/* ==============================================================
   GOD PRINTS · v2 — Web clara, simple, con Galería Viva
   ============================================================== */

:root {
  /* FONDOS — base clara invertida */
  --bg-base:         #EFE9FF;
  --bg-elevated:     #FFFFFF;
  --bg-accent:       #F5F0FF;
  --bg-galeria-viva: #E8DFFF;
  --bg-dark-cta:     #2A1245;
  --bg-footer:       #1A0A2E;

  /* TINTAS de marca */
  --morado-profundo:  #4C1D95;
  --violeta-vivo:     #8B5CF6;
  --azul-electrico:   #60A5FA;
  --perla-blanca:     #F0E6FF;
  --texto-principal:  #2A1245;
  --texto-secundario: #6B5B8C;
  --texto-claro:      #F0E6FF;

  --gradient-marca: linear-gradient(135deg, #8B5CF6 0%, #60A5FA 100%);
  --gradient-marca-suave: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(96,165,250,0.12) 100%);

  --shadow-soft:   0 8px 30px rgba(76,29,149,0.08);
  --shadow-medium: 0 16px 50px rgba(76,29,149,0.14);
  --shadow-strong: 0 28px 70px rgba(76,29,149,0.22);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Montserrat', system-ui, -apple-system, sans-serif;
  --font-handwriting: 'Caveat', cursive;

  --container-max: 1280px;
  --section-padding: clamp(70px, 10vw, 130px) clamp(20px, 5vw, 60px);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--texto-principal);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--violeta-vivo); color: white; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-accent); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violeta-vivo), var(--azul-electrico));
  border-radius: 10px;
}

/* ---------- LOGO MONOGRAMA ----------
   Usamos Logotrasparente3.png que es solo el monograma AD con fondo
   transparente. Se aplica directamente como <img> sin recortes. */
.logo-monograma {
  display: inline-block;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}
.logo-monograma--nav      { height: 42px; }
.logo-monograma--hero     { height: 72px; margin-bottom: 18px; filter: drop-shadow(0 6px 18px rgba(139,92,246,0.25)); }
.logo-monograma--contacto { height: 70px; margin-bottom: 8px; filter: drop-shadow(0 0 32px rgba(139,92,246,0.5)) brightness(1.15); }
.logo-monograma--footer   { height: 48px; margin: 0 auto 12px; opacity: 0.9; filter: brightness(1.1); }

/* ---------- TYPOGRAPHY UTILITIES ---------- */
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(50px, 7vw, 80px);
}
.section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--violeta-vivo);
  margin-bottom: 18px;
  font-weight: 600;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--morado-profundo);
  letter-spacing: -0.01em;
}
.section-sub {
  margin-top: 18px;
  color: var(--texto-secundario);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7;
}

/* ---------- BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.4s var(--ease-out-expo);
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary {
  background: var(--gradient-marca);
  color: white;
  box-shadow: 0 12px 30px rgba(139,92,246,0.35);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(139,92,246,0.55);
}
.btn--ghost {
  background: transparent;
  color: var(--morado-profundo);
  border: 2px solid var(--violeta-vivo);
}
.btn--ghost:hover {
  background: var(--gradient-marca-suave);
  border-color: var(--morado-profundo);
  transform: translateY(-2px);
}

/* ==============================================================
   NAVEGACIÓN
   ============================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 50px);
  z-index: 100;
  transition: all 0.4s var(--ease-out-expo);
  background: rgba(239, 233, 255, 0.6);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.nav.scrolled {
  background: rgba(239, 233, 255, 0.92);
  padding: 12px clamp(20px, 4vw, 50px);
  box-shadow: 0 4px 30px rgba(76,29,149,0.08);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s var(--ease-out-expo);
}
.nav__brand:hover { transform: scale(1.03); }
.nav__wordmark {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--morado-profundo);
  letter-spacing: -0.01em;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 32px);
}
.nav__links a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-principal);
  transition: color 0.3s;
  position: relative;
}
.nav__links a:hover { color: var(--violeta-vivo); }
.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 0;
  width: 0; height: 2px;
  background: var(--gradient-marca);
  transition: width 0.4s var(--ease-out-expo);
  border-radius: 2px;
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__cta {
  padding: 10px 22px;
  background: var(--gradient-marca);
  color: white !important;
  border-radius: 100px;
  box-shadow: 0 6px 18px rgba(139,92,246,0.3);
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(139,92,246,0.45); }

.nav__menu-btn { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 101; }
.nav__menu-btn span { width: 28px; height: 2px; background: var(--morado-profundo); transition: all 0.4s var(--ease-out-expo); border-radius: 2px; }

@media (max-width: 900px) {
  .nav__menu-btn { display: flex; }
  .nav__links {
    position: fixed;
    inset: 0;
    background: rgba(239, 233, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out-expo);
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { font-size: 1.1rem; }
  .nav.menu-open .nav__menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav__menu-btn span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==============================================================
   1. HERO — Polaroid revelándose
   ============================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 100px clamp(20px, 5vw, 60px) 60px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-base);
}

/* Textura papel fotográfico */
.hero__textura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.85' /><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0 0.58  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Florituras decorativas */
.hero__floritura {
  position: absolute;
  height: 280px;
  color: var(--violeta-vivo);
  opacity: 0.18;
  z-index: 2;
  pointer-events: none;
}
.hero__floritura--left  { left: 3vw; top: 30%; animation: floritura 8s ease-in-out infinite; }
.hero__floritura--right { right: 3vw; top: 30%; transform: scaleX(-1); animation: floritura 9s ease-in-out infinite reverse; }
@keyframes floritura {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero__floritura--right { animation-name: florituraR; }
@keyframes florituraR {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-12px); }
}
@media (max-width: 900px) { .hero__floritura { display: none; } }

/* Destellos diagonales tipo flash de cámara */
.hero__motas { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.destello {
  position: absolute;
  width: 2px;
  height: 35vh;
  border-radius: 999px;
  transform: rotate(35deg) translateY(-100%);
  opacity: 0;
  animation: destelloCruzando 7s ease-in-out infinite;
}
/* Morado suave */
.destello--1 { left: 8%;  top: 0; background: linear-gradient(to bottom, transparent, rgba(139,92,246,0.55), transparent); animation-delay: 0s;   animation-duration: 8s; }
.destello--2 { left: 22%; top: 0; background: linear-gradient(to bottom, transparent, rgba(96,165,250,0.45), transparent);  animation-delay: 2.5s; animation-duration: 9s; width: 1.5px; height: 28vh; }
.destello--3 { left: 45%; top: 0; background: linear-gradient(to bottom, transparent, rgba(139,92,246,0.4), transparent);  animation-delay: 5s;   animation-duration: 7.5s; }
.destello--4 { left: 63%; top: 0; background: linear-gradient(to bottom, transparent, rgba(96,165,250,0.5), transparent);  animation-delay: 1.2s; animation-duration: 10s; width: 1px; height: 45vh; }
.destello--5 { left: 78%; top: 0; background: linear-gradient(to bottom, transparent, rgba(139,92,246,0.5), transparent);  animation-delay: 3.8s; animation-duration: 8.5s; }
.destello--6  { left: 91%; top: 0; background: linear-gradient(to bottom, transparent, rgba(96,165,250,0.38), transparent);  animation-delay: 6.5s;  animation-duration: 9.5s;  width: 1.5px; height: 32vh; }
.destello--7  { left: 15%; top: 0; background: linear-gradient(to bottom, transparent, rgba(139,92,246,0.42), transparent);  animation-delay: 4.3s;  animation-duration: 11s;  width: 1px;   height: 40vh; }
.destello--8  { left: 33%; top: 0; background: linear-gradient(to bottom, transparent, rgba(96,165,250,0.48), transparent);  animation-delay: 7.8s;  animation-duration: 8.2s;  width: 2px;   height: 30vh; }
.destello--9  { left: 52%; top: 0; background: linear-gradient(to bottom, transparent, rgba(139,92,246,0.38), transparent);  animation-delay: 1.7s;  animation-duration: 12s;   width: 1px;   height: 50vh; }
.destello--10 { left: 69%; top: 0; background: linear-gradient(to bottom, transparent, rgba(96,165,250,0.44), transparent);  animation-delay: 9.1s;  animation-duration: 7.8s;  width: 1.5px; height: 36vh; }
.destello--11 { left: 84%; top: 0; background: linear-gradient(to bottom, transparent, rgba(139,92,246,0.5), transparent);   animation-delay: 0.8s;  animation-duration: 10.5s; width: 1px;   height: 28vh; }
.destello--12 { left: 38%; top: 0; background: linear-gradient(to bottom, transparent, rgba(96,165,250,0.4), transparent);   animation-delay: 5.5s;  animation-duration: 9s;    width: 2px;   height: 42vh; }
@keyframes destelloCruzando {
  0%   { transform: rotate(35deg) translateY(-110%); opacity: 0; }
  8%   { opacity: 1; }
  60%  { opacity: 0.85; }
  100% { transform: rotate(35deg) translateY(140vh);  opacity: 0; }
}

/* Contenido hero */
.hero__content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__content { grid-template-columns: 1fr; text-align: center; }
  .hero__texto { order: 2; }
  .hero__polaroid-wrapper { order: 1; }
}

.hero__texto {
  opacity: 0;
  transform: translateY(20px);
}
.hero__texto.shown { opacity: 1; transform: translateY(0); transition: all 1s var(--ease-out-expo); }

.hero__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 500;
  color: var(--morado-profundo);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.hero__tagline {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--azul-electrico);
  font-weight: 600;
  margin-bottom: 28px;
}
.hero__eslogan {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--morado-profundo);
  margin-bottom: 18px;
}
.hero__sub {
  color: var(--texto-secundario);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .hero__sub { margin: 0 auto 32px; } }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
@media (max-width: 900px) { .hero__ctas { justify-content: center; } }

/* Polaroid del hero */
.hero__polaroid-wrapper {
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.polaroid {
  background: #FFFFFF;
  padding: 14px 14px 60px;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.08),
    0 20px 40px rgba(76,29,149,0.18),
    0 40px 80px rgba(76,29,149,0.12);
  transform: rotate(-3deg);
  opacity: 0;
  animation: heroEntra 0.9s var(--ease-out-expo) 0.3s forwards, polaroidAgitar 5s ease-in-out 4s infinite;
  border-radius: 4px;
  position: relative;
}
@keyframes heroEntra {
  from { opacity: 0; transform: rotate(-3deg) scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: rotate(-3deg) scale(1)    translateY(0); }
}
@keyframes polaroidAgitar {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(-2.3deg); }
}

.polaroid__foto {
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #F5F0FF 0%, #E8DFFF 100%);
}
.polaroid__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(20px);
  opacity: 0;
  animation: revelado 3s var(--ease-out-expo) 1s both;
  animation-play-state: running;
}
@keyframes revelado {
  0%   { filter: blur(20px); opacity: 0; }
  30%  { filter: blur(14px); opacity: 0.4; }
  100% { filter: blur(0);    opacity: 1; }
}
.polaroid__revelado {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(139,92,246,0.25), transparent 70%);
  animation: glowFade 4s ease-out forwards;
  pointer-events: none;
}
@keyframes glowFade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.polaroid__caption {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-handwriting);
  font-size: 1.4rem;
  color: var(--texto-principal);
  opacity: 0;
  animation: captionAparece 0.8s var(--ease-out-expo) 4s forwards;
  padding: 0 10px;
}
.polaroid__caption span {
  display: block;
  font-size: 0.95rem;
  color: var(--texto-secundario);
  margin-top: -4px;
}
@keyframes captionAparece {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==============================================================
   2. QUÉ HACEMOS
   ============================================================== */
/* ============================================================
   FILM STRIP
   ============================================================ */
.film-strip {
  background: var(--bg-base);
  padding: 28px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.film-strip__track {
  overflow: hidden;
  width: 100%;
}
.film-strip__inner {
  display: flex;
  gap: 14px;
  width: max-content;
}
.film-strip__track--right .film-strip__inner {
  animation: filmDerecha 55s linear infinite;
}
.film-strip__track--left .film-strip__inner {
  animation: filmIzquierda 55s linear infinite;
}
@keyframes filmDerecha {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes filmIzquierda {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.film-strip__foto {
  width: 200px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(139,92,246,0.2);
  box-shadow: 0 4px 16px rgba(76,29,149,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.film-strip__foto:hover {
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 12px 32px rgba(139,92,246,0.4);
  z-index: 2;
}
.film-strip__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-strip__track:hover .film-strip__inner {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .film-strip__track--right .film-strip__inner,
  .film-strip__track--left .film-strip__inner {
    animation: none;
  }
}

.que-hacemos {
  padding: var(--section-padding);
  background: var(--bg-elevated);
  max-width: 100%;
}
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.pilar {
  background: white;
  padding: 44px 32px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid rgba(139,92,246,0.15);
  box-shadow: var(--shadow-soft);
  transition: all 0.5s var(--ease-out-expo);
}
.pilar:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-strong);
  border-color: var(--violeta-vivo);
}
.pilar__icono {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  display: grid; place-items: center;
  background: var(--gradient-marca-suave);
  border-radius: 50%;
  transition: transform 0.5s var(--ease-out-expo);
}
.pilar:hover .pilar__icono {
  transform: scale(1.1) rotate(-6deg);
  background: var(--gradient-marca);
}
.pilar:hover .pilar__icono svg path,
.pilar:hover .pilar__icono svg circle {
  stroke: white !important;
}
.pilar h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--morado-profundo);
  margin-bottom: 14px;
}
.pilar p {
  color: var(--texto-secundario);
  line-height: 1.75;
  font-size: 0.95rem;
}

/* ==============================================================
   3. PRECIOS
   ============================================================== */
.precios {
  padding: var(--section-padding);
  background: linear-gradient(160deg, #1A0A2E 0%, #2A1245 60%, #1A0A2E 100%);
  position: relative;
  overflow: hidden;
}
.precios::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.precios .section-header .section-eyebrow { color: rgba(139,92,246,0.8); }
.precios .section-header .section-title   { color: #F0E6FF; }
.precios .section-header .section-sub     { color: rgba(240,230,255,0.6); }

.precios__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  max-width: var(--container-max);
  margin: 0 auto 48px;
}

/* TARJETA BASE */
.precio-card {
  position: relative;
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(139,92,246,0.25);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo), border-color 0.45s;
  cursor: default;
}
.precio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(96,165,250,0.06) 100%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.precio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.4);
}
.precio-card:hover::before { opacity: 0; }

.precio-card__bg-num { display: none; }

/* ENCABEZADO */
.precio-card__header {
  position: relative;
  border-bottom: 1px solid rgba(139,92,246,0.2);
  overflow: hidden;
}
.precio-card__foto-wrap {
  position: relative;
  height: 140px;
  overflow: hidden;
}
.precio-card__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.precio-card:hover .precio-card__foto {
  transform: scale(1.06);
}
.precio-card__foto-overlay {
  display: none;
}
.precio-card__header-info {
  padding: 14px 16px 12px;
  text-align: center;
  background: linear-gradient(145deg, rgba(139,92,246,0.25), rgba(96,165,250,0.1));
}
.precio-card__header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 20%; right: 20%;
  height: 2px;
  background: var(--gradient-marca);
  border-radius: 2px;
  z-index: 2;
}
.precio-card__badge {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(96,165,250,0.85);
  margin-bottom: 10px;
}
.precio-card__size {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  line-height: 1;
  background: linear-gradient(135deg, #fff 40%, #C4B5FD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.precio-card__size span {
  font-size: 0.65em;
  opacity: 0.7;
  margin: 0 1px;
  -webkit-text-fill-color: rgba(196,181,253,0.7);
}
.precio-card__size em {
  font-size: 0.5em;
  font-style: normal;
  font-weight: 700;
  -webkit-text-fill-color: rgba(196,181,253,0.8);
}

/* FILAS DE PRECIO */
.precio-card__lista {
  list-style: none;
  padding: 12px 0;
  margin: 0;
  flex: 1;
}
.precio-card__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 20px;
  border-bottom: 1px solid rgba(139,92,246,0.08);
  border-radius: 8px;
  margin: 0 6px;
  transition: background 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.precio-card__fila:last-child { border-bottom: none; }
.precio-card__fila:hover {
  background: rgba(139,92,246,0.18);
  box-shadow: inset 0 0 0 1px rgba(139,92,246,0.4);
}
.precio-card__fila.seleccionada {
  background: rgba(139,92,246,0.28);
  box-shadow: inset 0 0 0 1.5px rgba(139,92,246,0.7);
}
.precio-card__fila.seleccionada .precio-card__val {
  filter: brightness(1.3);
}
.precio-card__cant {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(240,230,255,0.75);
}
.precio-card__cant b {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-right: 3px;
}
.precio-card__val {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(135deg, #D4AF37, #F4D03F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CTA */
.precio-card__footer {
  padding: 18px 20px 20px;
}
.precio-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--gradient-marca);
  box-shadow: 0 6px 20px rgba(139,92,246,0.35);
  transition: box-shadow 0.3s, transform 0.3s;
}
.precio-card__cta:hover {
  box-shadow: 0 10px 30px rgba(139,92,246,0.55);
  transform: scale(1.04);
}
.precio-card__cta.listo {
  animation: ctaPulso 0.6s var(--ease-out-expo);
}
@keyframes ctaPulso {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); box-shadow: 0 12px 36px rgba(139,92,246,0.7); }
  100% { transform: scale(1); }
}
.precio-card__cta.titilando {
  animation: ctaTitila 2.8s ease-in-out infinite !important;
  transition: none !important;
}
@keyframes ctaTitila {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(139,92,246,0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 32px rgba(139,92,246,0.8), 0 0 22px rgba(139,92,246,0.5);
    transform: scale(1.02);
  }
}
.precio-card__cta svg { width: 16px; height: 16px; }

/* NOTA */
.precios__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: rgba(196,181,253,0.6);
  max-width: var(--container-max);
  margin: 0 auto;
}
.precios__nota svg { flex-shrink: 0; color: var(--violeta-vivo); }
.precios__nota strong { color: #C4B5FD; font-weight: 700; }

@media (max-width: 1100px) {
  .precios__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .precios__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .precios__grid { grid-template-columns: 1fr; }
}

/* ==============================================================
   3. CÓMO FUNCIONA
   ============================================================== */
.proceso {
  padding: var(--section-padding);
  background: var(--bg-accent);
}
.timeline {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.timeline__linea {
  position: absolute;
  top: 35px;
  left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--violeta-vivo) 15%, var(--azul-electrico) 85%, transparent);
  opacity: 0.5;
  z-index: 0;
}
.paso {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 8px;
}
.paso__num {
  width: 70px; height: 70px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--violeta-vivo);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--morado-profundo);
  box-shadow: 0 8px 20px rgba(139,92,246,0.18);
  transition: all 0.5s var(--ease-out-expo);
}
.paso:hover .paso__num {
  transform: scale(1.1);
  background: var(--gradient-marca);
  color: white;
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(139,92,246,0.4);
}
.paso__icono {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  color: var(--violeta-vivo);
}
.paso__icono svg { width: 100%; height: 100%; }
.paso h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--morado-profundo);
  margin-bottom: 8px;
}
.paso p {
  font-size: 0.88rem;
  color: var(--texto-secundario);
  line-height: 1.65;
}
@media (max-width: 800px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .timeline__linea { display: none; }
}
@media (max-width: 480px) {
  .timeline { grid-template-columns: 1fr; }
}

/* ==============================================================
   4. GALERÍA VIVA
   ============================================================== */
.galeria-viva {
  padding: var(--section-padding);
  background: var(--bg-galeria-viva);
  position: relative;
  overflow: hidden;
}
.galeria-viva__canvas-wrapper {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  height: clamp(380px, 40vw, 460px);
  background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(245,240,255,0.3));
  border-radius: 28px;
  border: 1px solid rgba(139,92,246,0.18);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.galeria-viva__canvas {
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
}
.galeria-viva__canvas:active { cursor: grabbing; }

.galeria-viva__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  padding: 30px;
  align-content: center;
  justify-items: center;
}
.galeria-viva__fallback .mini-foto {
  width: 100px; height: 120px;
  background: white;
  padding: 6px 6px 16px;
  box-shadow: var(--shadow-soft);
  transform: rotate(var(--rot, -3deg));
}

.galeria-viva__cta {
  text-align: center;
  margin-top: 36px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--morado-profundo);
}
.galeria-viva__cta a {
  color: var(--violeta-vivo);
  font-weight: 600;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 12px;
  transition: color 0.3s;
}
.galeria-viva__cta a:hover { color: var(--morado-profundo); }

/* ==============================================================
   5. SUBE TU FOTO (MAGIA)
   ============================================================== */
.magia {
  padding: var(--section-padding);
  background: var(--bg-elevated);
  max-width: 100%;
  position: relative;
}
.magia__privacy {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--violeta-vivo);
  font-weight: 600;
}
.magia__dropzone {
  position: relative;
  max-width: 720px;
  margin: 0 auto 50px;
  padding: 60px 30px;
  border: 2px dashed rgba(139,92,246,0.4);
  border-radius: 28px;
  background: var(--bg-accent);
  text-align: center;
  cursor: pointer;
  transition: all 0.5s var(--ease-out-expo);
  outline: none;
}
.magia__dropzone:hover,
.magia__dropzone:focus,
.magia__dropzone.drag-over {
  border-color: var(--violeta-vivo);
  background: var(--gradient-marca-suave);
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}
.magia__dropzone-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 18px;
  color: var(--morado-profundo);
}
.magia__dropzone-sub {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--texto-secundario);
}

.magia__previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 900px;          /* Más estrecho ahora que son solo 2 */
  margin: 0 auto 40px;
}
.magia__preview {
  text-align: center;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.7s var(--ease-out-expo);
}
.magia__preview.shown { opacity: 1; transform: translateY(0) scale(1); }
.magia__preview-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-accent);
  border: 1px solid rgba(139,92,246,0.18);
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}
.magia__preview-label {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--morado-profundo);
  font-weight: 500;
}

/* ===== Mundo 1: En tu pared (marco de roble FRONTAL incorporado) =====
   ENFOQUE NUEVO: el frame toma el aspect-ratio NATURAL de la imagen.
   El slot se posiciona en % relativos al wrapper que coincide
   exactamente con la imagen de fondo renderizada. */
.magia__preview-frame--pared {
  /* SIN aspect-ratio fijo: lo determina la imagen */
  aspect-ratio: auto;
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}
/* La imagen del marco se muestra a su proporción natural, llenando el ancho */
.magia__pared-bg-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Slot calibrado al CUADRO VERDE de pared-marco-guia.PNG.
   Coordenadas extraídas pixel-perfect por scan automático:
   - left   37.662%   width  24.623%
   - top    23.438%   height 29.991%
   (Imagen base 1856×2304, bounding box verde 699,540 → 1156,1231 px) */
.magia__pared-slot {
  position: absolute;
  top: 23.438%;
  left: 37.662%;
  width: 24.623%;
  height: 29.991%;
  z-index: 2;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.06);
}
.magia__pared-slot .magia__user-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.96) saturate(1.03) contrast(1.02);
}
.magia__pared-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,240,210,0.1) 0%, transparent 35%);
  pointer-events: none;
}

/* ===== Mundo 2: Como polaroid (versión limpia y elegante) ===== */
.magia__preview-frame--polaroid {
  aspect-ratio: 4 / 5;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
  background: transparent;
  border: none;
}
/* Fondo cálido con degradado morado-crema */
.magia__polaroid-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 230, 200, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.25) 0%, transparent 55%),
    linear-gradient(135deg, #F5EEFF 0%, #EBE0FF 50%, #E5D5FF 100%);
}
/* Motas decorativas flotantes */
.mota-pol {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.6;
  animation: motaPol 8s ease-in-out infinite;
}
.mota-pol--1 { top: 12%; left: 18%; width: 8px; height: 8px; background: var(--violeta-vivo); animation-delay: 0s; }
.mota-pol--2 { top: 28%; right: 14%; width: 6px; height: 6px; background: var(--azul-electrico); animation-delay: 2s; }
.mota-pol--3 { bottom: 22%; left: 12%; width: 10px; height: 10px; background: var(--violeta-vivo); animation-delay: 4s; }
.mota-pol--4 { bottom: 14%; right: 20%; width: 7px; height: 7px; background: var(--azul-electrico); animation-delay: 6s; }
@keyframes motaPol {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%      { transform: translate(8px, -12px) scale(1.2); opacity: 0.8; }
}

/* Polaroid centrada inclinada */
.magia__polaroid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  width: 60%;
  background: #FFFFFF;
  padding: 12px 12px 50px 12px;
  border-radius: 3px;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.08),
    0 16px 36px rgba(76, 29, 149, 0.18),
    0 32px 60px rgba(76, 29, 149, 0.1);
  transition: transform 0.6s var(--ease-out-expo);
}
.magia__preview.shown .magia__polaroid {
  animation: polaroidEntra 0.9s var(--ease-out-expo);
}
@keyframes polaroidEntra {
  0%   { transform: translate(-50%, -50%) rotate(-3deg) scale(0.5); opacity: 0; }
  60%  { transform: translate(-50%, -50%) rotate(-1deg) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
}
/* Washi tape decorativa en esquina superior */
.magia__polaroid-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 60px;
  height: 22px;
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.5) 0%,
    rgba(96, 165, 250, 0.5) 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  /* Bordes ondulados estilo cinta */
  clip-path: polygon(
    0% 30%, 5% 0%, 15% 30%, 25% 0%, 35% 30%, 45% 0%, 55% 30%,
    65% 0%, 75% 30%, 85% 0%, 95% 30%, 100% 0%,
    100% 70%, 95% 100%, 85% 70%, 75% 100%, 65% 70%, 55% 100%,
    45% 70%, 35% 100%, 25% 70%, 15% 100%, 5% 70%, 0% 100%
  );
  z-index: 3;
}
/* La foto dentro de la polaroid */
.magia__polaroid-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f0ff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.magia__polaroid-photo .magia__user-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.97) saturate(1.05);
}
/* Caption manuscrito debajo */
.magia__polaroid-caption {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-handwriting);
  font-size: 1.4rem;
  color: var(--morado-profundo);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* === [DEPRECATED] Bloque del antiguo "En tus manos" reemplazado por
   polaroid centrada. Conservado vacío para no romper otras reglas. === */
.magia__manos-photo-slot--DEPRECATED {
  position: absolute;
  top: 27.17%;
  left: 30.927%;
  width: 39.386%;
  height: 41.84%;
  z-index: 2;
  overflow: hidden;
  --manos-clip: polygon(6.02% 0%, 5.88% 0.31%, 5.88% 0.62%, 5.88% 0.93%, 5.75% 1.24%, 5.75% 1.56%, 5.75% 1.87%, 5.75% 2.18%, 5.75% 2.49%, 5.75% 2.8%, 5.75% 3.11%, 5.61% 3.42%, 5.61% 3.73%, 5.61% 4.05%, 5.61% 4.36%, 5.61% 4.67%, 5.61% 4.98%, 5.61% 5.29%, 5.47% 5.6%, 5.47% 5.91%, 5.47% 6.22%, 5.47% 6.54%, 5.34% 6.85%, 5.34% 7.16%, 5.34% 7.47%, 5.34% 7.78%, 5.34% 8.09%, 5.2% 8.4%, 5.2% 8.71%, 5.2% 9.02%, 5.2% 9.34%, 5.2% 9.65%, 5.2% 9.96%, 5.2% 10.27%, 5.06% 10.58%, 5.06% 10.89%, 5.06% 11.2%, 5.06% 11.51%, 5.06% 11.83%, 4.92% 12.14%, 4.92% 12.45%, 4.92% 12.76%, 4.92% 13.07%, 4.92% 13.38%, 4.92% 13.69%, 4.92% 14%, 4.79% 14.32%, 4.79% 14.63%, 4.79% 14.94%, 4.79% 15.25%, 4.79% 15.56%, 4.65% 15.87%, 4.65% 16.18%, 4.65% 16.49%, 4.65% 16.8%, 4.65% 17.12%, 4.65% 17.43%, 4.51% 17.74%, 4.51% 18.05%, 4.51% 18.36%, 4.51% 18.67%, 4.51% 18.98%, 4.51% 19.29%, 4.38% 19.61%, 4.38% 19.92%, 4.38% 20.23%, 4.38% 20.54%, 4.38% 20.85%, 4.38% 21.16%, 4.24% 21.47%, 4.24% 21.78%, 4.24% 22.1%, 4.24% 22.41%, 4.24% 22.72%, 4.24% 23.03%, 4.1% 23.34%, 4.1% 23.65%, 4.1% 23.96%, 4.1% 24.27%, 4.1% 24.59%, 4.1% 24.9%, 3.97% 25.21%, 3.97% 25.52%, 3.97% 25.83%, 3.97% 26.14%, 3.97% 26.45%, 3.97% 26.76%, 3.83% 27.07%, 3.83% 27.39%, 3.83% 27.7%, 3.83% 28.01%, 3.83% 28.32%, 3.83% 28.63%, 3.83% 28.94%, 3.69% 29.25%, 3.69% 29.56%, 3.69% 29.88%, 3.69% 30.19%, 3.69% 30.5%, 3.56% 30.81%, 3.56% 31.12%, 3.56% 31.43%, 3.56% 31.74%, 3.56% 32.05%, 3.56% 32.37%, 3.56% 32.68%, 3.42% 32.99%, 3.42% 33.3%, 3.42% 33.61%, 3.42% 33.92%, 3.42% 34.23%, 3.42% 34.54%, 3.28% 34.85%, 3.28% 35.17%, 3.28% 35.48%, 3.28% 35.79%, 3.28% 36.1%, 3.28% 36.41%, 3.15% 36.72%, 3.15% 37.03%, 3.15% 37.34%, 3.15% 37.66%, 3.15% 37.97%, 3.15% 38.28%, 3.15% 38.59%, 3.01% 38.9%, 3.01% 39.21%, 3.01% 39.52%, 3.01% 39.83%, 3.01% 40.15%, 3.01% 40.46%, 2.87% 40.77%, 2.87% 41.08%, 2.87% 41.39%, 2.87% 41.7%, 2.87% 42.01%, 2.87% 42.32%, 2.87% 42.63%, 2.74% 42.95%, 2.74% 43.26%, 2.74% 43.57%, 2.74% 43.88%, 2.74% 44.19%, 2.74% 44.5%, 2.6% 44.81%, 2.6% 45.12%, 2.6% 45.44%, 2.6% 45.75%, 2.6% 46.06%, 2.6% 46.37%, 2.46% 46.68%, 2.46% 46.99%, 2.46% 47.3%, 2.46% 47.61%, 2.46% 47.93%, 2.46% 48.24%, 2.46% 48.55%, 2.33% 48.86%, 2.33% 49.17%, 2.33% 49.48%, 2.33% 49.79%, 2.33% 50.1%, 2.33% 50.41%, 2.33% 50.73%, 2.19% 51.04%, 2.19% 51.35%, 2.19% 51.66%, 2.19% 51.97%, 2.19% 52.28%, 2.19% 52.59%, 2.05% 52.9%, 2.05% 53.22%, 2.05% 53.53%, 2.05% 53.84%, 2.05% 54.15%, 2.05% 54.46%, 1.92% 54.77%, 1.92% 55.08%, 1.92% 55.39%, 1.92% 55.71%, 1.92% 56.02%, 1.92% 56.33%, 1.92% 56.64%, 1.78% 56.95%, 1.78% 57.26%, 1.78% 57.57%, 1.78% 57.88%, 1.78% 58.2%, 1.64% 58.51%, 1.64% 58.82%, 1.64% 59.13%, 1.64% 59.44%, 1.64% 59.75%, 1.64% 60.06%, 1.64% 60.37%, 1.5% 60.68%, 1.5% 61%, 1.5% 61.31%, 1.5% 61.62%, 1.5% 61.93%, 1.37% 62.24%, 1.37% 62.55%, 1.37% 62.86%, 1.37% 63.17%, 1.37% 63.49%, 1.37% 63.8%, 1.37% 64.11%, 1.37% 64.42%, 1.37% 64.73%, 1.23% 65.04%, 1.23% 65.35%, 1.23% 65.66%, 1.23% 65.98%, 1.23% 66.29%, 1.23% 66.6%, 1.23% 66.91%, 1.23% 67.22%, 1.09% 67.53%, 1.09% 67.84%, 1.09% 68.15%, 1.09% 68.46%, 1.09% 68.78%, 1.09% 69.09%, 0.96% 69.4%, 0.96% 69.71%, 0.96% 70.02%, 0.96% 70.33%, 0.96% 70.64%, 0.96% 70.95%, 0.96% 71.27%, 0.82% 71.58%, 0.82% 71.89%, 0.82% 72.2%, 0.82% 72.51%, 0.82% 72.82%, 0.82% 73.13%, 0.82% 73.44%, 0.68% 73.76%, 0.68% 74.07%, 0.68% 74.38%, 0.68% 74.69%, 0.68% 75%, 0.68% 75.31%, 0.55% 75.62%, 0.55% 75.93%, 0.55% 76.24%, 0.55% 76.56%, 0.55% 76.87%, 0.55% 77.18%, 0.41% 77.49%, 0.41% 77.8%, 0.41% 78.11%, 0.41% 78.42%, 0.41% 78.73%, 0.41% 79.05%, 0.41% 79.36%, 0.27% 79.67%, 0.27% 79.98%, 0.27% 80.29%, 0.27% 80.6%, 0.27% 80.91%, 0.27% 81.22%, 0.27% 81.54%, 0.14% 81.85%, 0.14% 82.16%, 0.14% 82.47%, 0.14% 82.78%, 0.14% 83.09%, 0.14% 83.4%, 0% 83.71%, 0% 84.02%, 0% 84.34%, 0% 84.65%, 0% 84.96%, 0% 85.27%, 0% 85.58%, 16.83% 85.89%, 16.96% 86.2%, 17.24% 86.51%, 17.24% 86.83%, 17.37% 87.14%, 17.37% 87.45%, 17.37% 87.76%, 17.37% 88.07%, 17.24% 88.38%, 17.24% 88.69%, 17.24% 89%, 17.1% 89.32%, 17.24% 89.63%, 17.24% 89.94%, 17.24% 90.25%, 17.24% 90.56%, 16.96% 90.87%, 17.65% 91.18%, 17.51% 91.49%, 17.37% 91.8%, 17.51% 92.12%, 17.51% 92.43%, 17.51% 92.74%, 17.37% 93.05%, 17.51% 93.36%, 17.1% 93.67%, 17.51% 93.98%, 17.65% 94.29%, 17.65% 94.61%, 17.37% 94.92%, 17.51% 95.23%, 17.65% 95.54%, 17.37% 95.85%, 17.78% 96.16%, 17.78% 96.47%, 17.92% 96.78%, 17.78% 97.1%, 18.19% 97.41%, 18.6% 97.72%, 22.44% 98.03%, 30.1% 98.34%, 38.99% 98.65%, 49.52% 98.96%, 60.47% 99.27%, 70.18% 99.59%, 82.76% 99.9%, 88.78% 99.9%, 88.78% 99.59%, 88.51% 99.27%, 88.37% 98.96%, 88.1% 98.65%, 87.96% 98.34%, 87.69% 98.03%, 87.55% 97.72%, 87.41% 97.41%, 87.14% 97.1%, 87% 96.78%, 86.73% 96.47%, 86.59% 96.16%, 86.46% 95.85%, 86.18% 95.54%, 86.05% 95.23%, 85.91% 94.92%, 85.77% 94.61%, 85.5% 94.29%, 85.36% 93.98%, 85.23% 93.67%, 84.95% 93.36%, 84.82% 93.05%, 84.68% 92.74%, 84.54% 92.43%, 84.4% 92.12%, 84.27% 91.8%, 84.13% 91.49%, 83.99% 91.18%, 83.86% 90.87%, 83.86% 90.56%, 83.72% 90.25%, 83.58% 89.94%, 83.58% 89.63%, 83.58% 89.32%, 83.45% 89%, 83.45% 88.69%, 83.45% 88.38%, 83.45% 88.07%, 83.58% 87.76%, 83.58% 87.45%, 83.86% 87.14%, 83.86% 86.83%, 83.86% 86.51%, 83.86% 86.2%, 83.72% 85.89%, 83.72% 85.58%, 83.72% 85.27%, 97.13% 84.96%, 97.13% 84.65%, 97.13% 84.34%, 97.13% 84.02%, 97.13% 83.71%, 97.26% 83.4%, 97.26% 83.09%, 97.26% 82.78%, 97.26% 82.47%, 97.26% 82.16%, 97.26% 81.85%, 97.26% 81.54%, 97.26% 81.22%, 97.26% 80.91%, 97.26% 80.6%, 97.26% 80.29%, 97.26% 79.98%, 97.26% 79.67%, 97.26% 79.36%, 97.4% 79.05%, 97.4% 78.73%, 97.4% 78.42%, 97.4% 78.11%, 97.4% 77.8%, 97.54% 77.49%, 97.54% 77.18%, 97.54% 76.87%, 97.54% 76.56%, 97.54% 76.24%, 97.54% 75.93%, 97.54% 75.62%, 97.54% 75.31%, 97.54% 75%, 97.54% 74.69%, 97.54% 74.38%, 97.54% 74.07%, 97.54% 73.76%, 97.54% 73.44%, 97.54% 73.13%, 97.54% 72.82%, 97.54% 72.51%, 97.67% 72.2%, 97.54% 71.89%, 97.54% 71.58%, 97.67% 71.27%, 97.67% 70.95%, 97.67% 70.64%, 97.67% 70.33%, 97.67% 70.02%, 97.67% 69.71%, 97.67% 69.4%, 97.67% 69.09%, 97.67% 68.78%, 97.67% 68.46%, 97.67% 68.15%, 97.67% 67.84%, 97.67% 67.53%, 97.67% 67.22%, 97.81% 66.91%, 97.81% 66.6%, 97.81% 66.29%, 97.81% 65.98%, 97.81% 65.66%, 97.81% 65.35%, 97.81% 65.04%, 97.81% 64.73%, 97.81% 64.42%, 97.81% 64.11%, 97.81% 63.8%, 97.81% 63.49%, 97.81% 63.17%, 97.95% 62.86%, 97.95% 62.55%, 97.95% 62.24%, 97.95% 61.93%, 97.95% 61.62%, 97.95% 61.31%, 97.95% 61%, 97.95% 60.68%, 97.95% 60.37%, 98.08% 60.06%, 98.08% 59.75%, 98.08% 59.44%, 98.08% 59.13%, 98.08% 58.82%, 98.08% 58.51%, 98.08% 58.2%, 98.08% 57.88%, 98.08% 57.57%, 98.08% 57.26%, 98.08% 56.95%, 98.08% 56.64%, 98.22% 56.33%, 98.22% 56.02%, 98.22% 55.71%, 98.22% 55.39%, 98.22% 55.08%, 98.22% 54.77%, 98.22% 54.46%, 98.22% 54.15%, 98.22% 53.84%, 98.22% 53.53%, 98.36% 53.22%, 98.36% 52.9%, 98.36% 52.59%, 98.36% 52.28%, 98.36% 51.97%, 98.36% 51.66%, 98.36% 51.35%, 98.36% 51.04%, 98.5% 50.73%, 98.5% 50.41%, 98.5% 50.1%, 98.5% 49.79%, 98.5% 49.48%, 98.5% 49.17%, 98.5% 48.86%, 98.5% 48.55%, 98.5% 48.24%, 98.5% 47.93%, 98.5% 47.61%, 98.63% 47.3%, 98.63% 46.99%, 98.63% 46.68%, 98.63% 46.37%, 98.63% 46.06%, 98.63% 45.75%, 98.63% 45.44%, 98.63% 45.12%, 98.63% 44.81%, 98.63% 44.5%, 98.63% 44.19%, 98.63% 43.88%, 98.63% 43.57%, 98.77% 43.26%, 98.77% 42.95%, 98.77% 42.63%, 98.77% 42.32%, 98.77% 42.01%, 98.77% 41.7%, 98.77% 41.39%, 98.77% 41.08%, 98.77% 40.77%, 98.77% 40.46%, 98.77% 40.15%, 98.91% 39.83%, 98.91% 39.52%, 98.91% 39.21%, 98.91% 38.9%, 98.91% 38.59%, 98.91% 38.28%, 98.91% 37.97%, 98.91% 37.66%, 98.91% 37.34%, 98.91% 37.03%, 98.91% 36.72%, 98.91% 36.41%, 98.91% 36.1%, 98.91% 35.79%, 99.04% 35.48%, 99.04% 35.17%, 99.04% 34.85%, 99.04% 34.54%, 99.04% 34.23%, 99.04% 33.92%, 99.04% 33.61%, 99.04% 33.3%, 99.04% 32.99%, 99.04% 32.68%, 99.18% 32.37%, 99.18% 32.05%, 99.18% 31.74%, 99.18% 31.43%, 99.18% 31.12%, 99.18% 30.81%, 99.18% 30.5%, 99.18% 30.19%, 99.18% 29.88%, 99.18% 29.56%, 99.18% 29.25%, 99.18% 28.94%, 99.18% 28.63%, 99.18% 28.32%, 99.18% 28.01%, 99.18% 27.7%, 99.32% 27.39%, 99.32% 27.07%, 99.32% 26.76%, 99.32% 26.45%, 99.32% 26.14%, 99.32% 25.83%, 99.32% 25.52%, 99.32% 25.21%, 99.32% 24.9%, 99.18% 24.59%, 99.18% 24.27%, 99.18% 23.96%, 99.32% 23.65%, 99.45% 23.34%, 99.45% 23.03%, 99.45% 22.72%, 99.45% 22.41%, 99.45% 22.1%, 99.45% 21.78%, 99.45% 21.47%, 99.32% 21.16%, 99.45% 20.85%, 99.45% 20.54%, 99.45% 20.23%, 99.45% 19.92%, 99.45% 19.61%, 99.45% 19.29%, 99.45% 18.98%, 99.59% 18.67%, 99.59% 18.36%, 99.59% 18.05%, 99.59% 17.74%, 99.59% 17.43%, 99.59% 17.12%, 99.59% 16.8%, 99.45% 16.49%, 99.45% 16.18%, 99.59% 15.87%, 99.59% 15.56%, 99.45% 15.25%, 99.45% 14.94%, 99.45% 14.63%, 99.45% 14.32%, 99.73% 14%, 99.73% 13.69%, 99.73% 13.38%, 99.73% 13.07%, 99.73% 12.76%, 99.73% 12.45%, 99.73% 12.14%, 99.73% 11.83%, 99.73% 11.51%, 99.73% 11.2%, 99.73% 10.89%, 99.73% 10.58%, 99.73% 10.27%, 99.73% 9.96%, 99.73% 9.65%, 99.73% 9.34%, 99.73% 9.02%, 99.86% 8.71%, 99.86% 8.4%, 99.86% 8.09%, 99.86% 7.78%, 99.86% 7.47%, 99.86% 7.16%, 99.86% 6.85%, 99.73% 6.54%, 99.73% 6.22%, 99.73% 5.91%, 99.73% 5.6%, 99.73% 5.29%, 99.73% 4.98%, 99.73% 4.67%, 99.73% 4.36%, 99.73% 4.05%, 99.86% 3.73%, 99.86% 3.42%, 99.86% 3.11%, 99.86% 2.8%, 99.86% 2.49%, 99.73% 2.18%, 94.66% 1.87%, 84.13% 1.56%, 72.37% 1.24%, 58.82% 0.93%, 45.28% 0.62%, 25.44% 0.31%, 6.57% 0%);
}
/* (Reglas antiguas eliminadas — reemplazadas por estructura de polaroid) */

.magia__cta {
  display: flex !important;
  margin: 30px auto 0;
  width: fit-content;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 100px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--gradient-marca);
  color: white;
  padding: 14px 22px;
  border-radius: 100px;
  box-shadow: 0 20px 50px rgba(76,29,149,0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 500;
  opacity: 0;
  transition: all 0.5s var(--ease-out-expo);
  pointer-events: none;
  font-size: 0.92rem;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast span { font-size: 1.3rem; }

/* ==============================================================
   6. CONTACTO (oscuro)
   ============================================================== */
.contacto {
  position: relative;
  padding: clamp(40px, 5vw, 70px) clamp(20px, 5vw, 60px);
  background: var(--bg-dark-cta);
  color: var(--texto-claro);
  text-align: center;
  overflow: hidden;
}
.contacto__glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(circle, rgba(139,92,246,0.3) 0%, rgba(96,165,250,0.15) 40%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Confeti fotográfico */
.contacto__confeti { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.confeti {
  position: absolute;
  top: -40px;
  border-radius: 2px;
  animation: confetiFall linear infinite;
}
@keyframes confetiFall {
  0%   { transform: translateY(0)     rotate(0deg);   opacity: 0.9; }
  95%  { opacity: 0.75; }
  100% { transform: translateY(115vh) rotate(540deg); opacity: 0; }
}

/* Tamaños y colores: rectángulos tipo tira de película / polaroid mini */
.confeti--1  { left:  5%; width: 6px;  height: 14px; background: rgba(139,92,246,0.85);  animation-duration: 9s;  animation-delay: -2s;   }
.confeti--2  { left: 12%; width: 10px; height: 6px;  background: rgba(96,165,250,0.8);   animation-duration: 11s; animation-delay: -5s;   }
.confeti--3  { left: 20%; width: 7px;  height: 16px; background: rgba(212,175,55,0.8);   animation-duration: 8s;  animation-delay: -1s;   }
.confeti--4  { left: 28%; width: 5px;  height: 12px; background: rgba(139,92,246,0.75);  animation-duration: 13s; animation-delay: -8s;   }
.confeti--5  { left: 35%; width: 9px;  height: 5px;  background: rgba(96,165,250,0.85);  animation-duration: 10s; animation-delay: -3s;   }
.confeti--6  { left: 43%; width: 6px;  height: 14px; background: rgba(212,175,55,0.8);   animation-duration: 12s; animation-delay: -6s;   }
.confeti--7  { left: 51%; width: 8px;  height: 8px;  background: rgba(139,92,246,0.8);   animation-duration: 9.5s;animation-delay: -4s;   }
.confeti--8  { left: 59%; width: 5px;  height: 18px; background: rgba(96,165,250,0.75);  animation-duration: 11s; animation-delay: -7s;   }
.confeti--9  { left: 66%; width: 10px; height: 6px;  background: rgba(212,175,55,0.85);  animation-duration: 8.5s;animation-delay: -2.5s; }
.confeti--10 { left: 73%; width: 6px;  height: 13px; background: rgba(139,92,246,0.75);  animation-duration: 14s; animation-delay: -9s;   }
.confeti--11 { left: 80%; width: 8px;  height: 5px;  background: rgba(96,165,250,0.8);   animation-duration: 10s; animation-delay: -1.5s; }
.confeti--12 { left: 87%; width: 5px;  height: 15px; background: rgba(212,175,55,0.75);  animation-duration: 12s; animation-delay: -5.5s; }
.confeti--13 { left: 16%; width: 7px;  height: 7px;  background: rgba(96,165,250,0.8);   animation-duration: 15s; animation-delay: -10s;  }
.confeti--14 { left: 56%; width: 9px;  height: 12px; background: rgba(212,175,55,0.85);  animation-duration: 9s;  animation-delay: -3.5s; }
.confeti--15 { left: 93%; width: 6px;  height: 10px; background: rgba(139,92,246,0.8);   animation-duration: 11s; animation-delay: -6.5s; }
.contacto > *:not(.contacto__glow):not(.contacto__confeti) { position: relative; z-index: 2; }
.contacto__confeti { z-index: 3 !important; }
.contacto__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 500;
  color: var(--perla-blanca);
  margin-bottom: 10px;
}
.contacto__title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 18px;
  color: var(--perla-blanca);
}
.contacto__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--azul-electrico);
  margin-bottom: 28px;
}

.contacto__redes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto 50px;
}
.red {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  text-align: left;
  transition: all 0.5s var(--ease-out-expo);
}
.red:hover {
  transform: translateY(-6px);
  border-color: var(--violeta-vivo);
  background: rgba(139,92,246,0.18);
  box-shadow: 0 18px 40px rgba(139,92,246,0.3);
}
.red svg { flex-shrink: 0; transition: transform 0.4s var(--ease-out-expo); }
.red:hover svg { transform: scale(1.1) rotate(-6deg); }
.red--whatsapp svg { color: #25D366; }
.red--instagram svg { color: #E1306C; }
.red--tiktok svg { color: #EE1D52; }
.red--facebook svg { color: #4285F4; }
.red__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,230,255,0.55);
  margin-bottom: 4px;
}
.red__handle {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--perla-blanca);
}

.contacto__info {
  color: rgba(240,230,255,0.65);
  font-size: 0.95rem;
  line-height: 2;
}
.contacto__info strong { color: var(--perla-blanca); font-weight: 600; }

/* ==============================================================
   FOOTER
   ============================================================== */
.footer {
  background: var(--bg-footer);
  color: rgba(240,230,255,0.55);
  text-align: center;
  padding: 40px 20px;
  font-size: 0.82rem;
  line-height: 1.8;
}
.footer .logo-monograma {
  margin-left: auto; margin-right: auto;
  display: block;
}
.footer strong { color: var(--perla-blanca); font-weight: 600; }

/* ==============================================================
   FAB WHATSAPP
   ============================================================== */
.fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  z-index: 200;
  box-shadow: 0 14px 36px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5);
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.5s var(--ease-out-expo);
  animation: fabPulse 2.5s ease-in-out infinite;
}
.fab.visible { opacity: 1; transform: scale(1); }
@keyframes fabPulse {
  0%   { box-shadow: 0 14px 36px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 14px 36px rgba(37,211,102,0.4), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 14px 36px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0); }
}
.fab:hover { transform: scale(1.1); }
@media (max-width: 600px) { .fab { width: 54px; height: 54px; bottom: 16px; right: 16px; } }

/* ==============================================================
   REVEAL UTILITY
   ============================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================================
   PREFERS REDUCED MOTION
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .polaroid__foto img { filter: none; opacity: 1; }
  .galeria-viva__canvas { display: none; }
  .galeria-viva__fallback { display: grid !important; }
  .hero__motas, .hero__floritura { display: none; }
}