/* =========================================================================
   LEANDRO BÁEZ FOTOGRAFÍA — HOJA DE ESTILO GLOBAL
   Un solo archivo para TODO el sitio: landing, blog, recursos, gracias,
   privacidad y 404. Cambiar un color acá lo cambia en todas las páginas.

   ÍNDICE
   00 · Tokens (colores, tipografía, espaciado)
   01 · Reset y base
   02 · Tipografía y utilidades de texto
   03 · Layout (wrap, section, grids)
   04 · Botones y enlaces
   05 · Header y footer
   06 · Animaciones (reveal, fade-up, prefers-reduced-motion)
   07 · Componentes de la landing
   08 · Componentes de artículo (blog y recursos)
   09 · Formularios
   10 · Marcadores de posición y avisos de "falta contenido"
   ========================================================================= */


/* =========================================================================
   00 · TOKENS
   Identidad: verde profundo y marfil. El verde es estructural (secciones
   enteras), el marfil es el texto y el color del CTA, y el latón aparece
   solo en detalles: filete, antetítulo, número, itálica.
   REGLA: el latón nunca ocupa más del 10% de la superficie de la página.
   ========================================================================= */
:root{
  /* --- Verdes: el esqueleto --- */
  --bg:           #0B1710;   /* fondo principal */
  --bg-alt:       #101F17;   /* secciones alternas */
  --surface:      #16291E;   /* tarjetas y superficies elevadas */
  --surface-2:    #1D3527;   /* superficie sobre superficie */

  /* --- Marfil: el texto y el CTA --- */
  --ink:          #F4F1E8;   /* texto principal — contraste 15.8:1 sobre --bg */
  --ink-2:        #DCD7C8;   /* texto secundario claro */
  --muted:        #9AA898;   /* texto de apoyo — contraste 7.4:1 sobre --bg */

  /* --- Acentos --- */
  --brass:        #C2A25E;   /* latón: filetes, antetítulos, itálicas, números */
  --brass-lt:     #DCC28A;   /* latón claro, para el degradado del resaltador */
  --brass-soft:   #E0CB92;
  --clay:         #D2724E;   /* tensión: problema, urgencia */
  --rojo:         #E5342C;   /* rojo pleno: fechas reservadas en el calendario */
  --wa:           #25D366;   /* verde WhatsApp, se respeta aunque no combine */

  /* --- Líneas --- */
  --line:         rgba(194,162,94,.16);
  --line-2:       rgba(194,162,94,.34);
  --line-ink:     rgba(244,241,232,.12);

  /* --- Forma --- */
  --r-sm:   4px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* --- Ritmo --- */
  --max:         1140px;
  --max-article: 700px;
  --pad:         22px;
  --sp:          clamp(64px, 8vw, 108px);   /* aire vertical entre secciones */
  --sp-sm:       clamp(40px, 5vw, 64px);

  /* --- Movimiento --- */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* --- Sombras (en fondo oscuro se usan resplandores, no negros) --- */
  --glow-brass: 0 24px 60px -34px rgba(194,162,94,.55);
  --glow-ink:   0 20px 50px -30px rgba(244,241,232,.28);
}

/* =========================================================================
   01 · RESET Y BASE
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background-color:var(--bg);
  /* textura de puntos: dos líneas de CSS, cero kilobytes, y la página deja
     de leerse como plantilla */
  background-image:radial-gradient(rgba(194,162,94,.055) 1.3px, transparent 1.3px);
  background-size:30px 30px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg,iframe{ max-width:100%; display:block; }
/* Blindaje: cualquier elemento con el atributo hidden queda oculto de verdad,
   sin importar qué otra regla le ponga un display. Lo usa la sección del VSL. */
[hidden]{ display:none !important; }
/* Reserva el alto del widget de reseñas de Google (Elfsight) antes de que
   cargue. Sin esto, al terminar de cargar empuja todo lo de abajo (incluido
   el calendario) y el scroll del visitante queda desalineado. */
.elfsight-wrap{ min-height:420px; }
@media (max-width:600px){ .elfsight-wrap{ min-height:620px; } }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--brass); color:var(--bg); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:var(--r-sm); }
/* enlace para saltar al contenido, invisible hasta que se navega con teclado */
.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:0 0 var(--r-sm) 0; }
.skip:focus{ left:0; }


/* =========================================================================
   02 · TIPOGRAFÍA
   Fraunces para titulares (serif con carácter orgánico, no la Playfair de
   todas las webs de bodas). Inter para el cuerpo.
   ========================================================================= */
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:400;
  font-variation-settings:'SOFT' 40, 'WONK' 1;
  line-height:1.12;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1{ font-size:clamp(32px, 5.2vw, 58px); }
h2{ font-size:clamp(27px, 4.2vw, 46px); }
h3{ font-size:clamp(19px, 2.2vw, 24px); line-height:1.25; }
h4{ font-size:clamp(17px, 1.8vw, 20px); line-height:1.3; }
p{ font-size:clamp(15px, 1.5vw, 17px); }

/* --- Marcas de texto del sistema de diseño --- */
/* *itálica* → itálica normal   |   **negrita** → 600 */
strong,b{ font-weight:600; color:var(--ink); }
/* ~~palabra clave~~ → tipografía de título en itálica, color de acento */
em, .kw{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:400;
  color:var(--brass);
}
/* ^^palabra clave con glow^^ */
.kw-glow{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  color:var(--brass);
  text-shadow:0 0 28px rgba(194,162,94,.5);
}
/* resaltador que se pinta solo: un único momento de sorpresa en la página */
mark{
  background-color:transparent;
  background-image:linear-gradient(100deg, var(--brass), var(--brass-lt));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  color:var(--bg);
  padding:2px 10px;
  border-radius:var(--r-sm);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;   /* sin esto el resaltado se rompe al saltar de línea en celular */
  animation:highlight-sweep 1s ease-out .85s forwards;
}
@keyframes highlight-sweep{ to{ background-size:100% 100%; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter', sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass);
}
.eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; opacity:.75; flex:none; }
.center .eyebrow::before, .eyebrow.bare::before{ display:none; }

.lead{ color:var(--muted); max-width:58ch; }
.center{ text-align:center; }
.center .lead{ margin-left:auto; margin-right:auto; }
/* El bloque de titular se centra tanto si la clase "center" está en un
   contenedor de arriba (.center .sec-head) como si está en el propio bloque
   (.sec-head.center). Sin la segunda mitad, el max-width de abajo lo dejaba
   pegado a la izquierda y el titular quedaba corrido respecto de la sección. */
.center .sec-head,
.sec-head.center{ margin-left:auto; margin-right:auto; }
.sec-head{ max-width:660px; }
.sec-head h2, .sec-head h1{ margin:14px 0 14px; }
.small{ font-size:13px; color:var(--muted); }
.hairline{ height:1px; border:0;
  background:linear-gradient(90deg, transparent, var(--line-2), transparent); }
.br-desktop{ display:none; }


/* =========================================================================
   03 · LAYOUT
   ========================================================================= */
.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.wrap-narrow{ max-width:var(--max-article); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ padding:var(--sp) 0; }
section.tight{ padding:var(--sp-sm) 0; }
.bg-alt{
  background-color:var(--bg-alt);
  background-image:radial-gradient(rgba(194,162,94,.075) 1.3px, transparent 1.3px);
  background-size:30px 30px;
}
.bg-flat{ background-color:var(--bg-alt); background-image:none; }
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:repeat(2,1fr); }


/* =========================================================================
   04 · BOTONES Y ENLACES
   El CTA lleva el color más contrastante de la paleta: sobre verde profundo,
   ese color es el marfil. El latón queda para los detalles.
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:'Inter', sans-serif;
  font-size:14px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:17px 30px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .2s ease, box-shadow .25s ease, background-color .25s ease,
             border-color .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-2px) scale(1.015); }
.btn:active{ transform:translateY(0) scale(1); }

.btn-primary{ background:var(--ink); color:var(--bg); box-shadow:var(--glow-ink); }
.btn-primary:hover{ background:#FFFDF6; box-shadow:0 26px 60px -30px rgba(244,241,232,.4); }

.btn-brass{
  color:var(--bg);
  background-image:linear-gradient(135deg, var(--brass) 0%, var(--brass-lt) 55%, var(--brass) 100%);
  background-size:210% 100%;
  box-shadow:var(--glow-brass);
}
.btn-brass:hover{ background-position:100% 0; }

.btn-ghost{ color:var(--ink); border-color:var(--line-2); background:rgba(194,162,94,.05); }
.btn-ghost:hover{ border-color:var(--brass); background:rgba(194,162,94,.11); }

.btn-wa{ background:var(--wa); color:#06301A; box-shadow:0 20px 44px -22px rgba(37,211,102,.7); }
.btn-wa:hover{ background:#2FE374; }

.btn-sm{ padding:12px 21px; font-size:12px; }
.btn-block{ width:100%; }
.btn .arrow{ transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(3px); }
.btn .ico{ width:17px; height:17px; flex:none; }

/* pulso lento y discreto — solo para el CTA final de la página */
.btn-pulse{ animation:cta-pulse 3.2s ease-in-out infinite; }
@keyframes cta-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.022); } }
.btn-pulse:hover{ animation:none; }

/* microcopy debajo de cada botón: dice qué pasa al presionarlo */
.microcopy{ font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.5; }
.microcopy b{ color:var(--brass); font-weight:700; }

.link-soft{
  display:inline-block;
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.link-soft:hover{ color:var(--brass); border-color:var(--brass); }

.link-inline{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; }
.link-inline:hover{ color:var(--brass-lt); }


/* =========================================================================
   05 · HEADER Y FOOTER (idénticos en todas las páginas del sitio)
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,23,16,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transform:translate3d(0,0,0);   /* capa propia: evita el parpadeo del blur al animar */
  will-change:transform;
  transition:transform .3s var(--ease), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:rgba(11,23,16,.94);
  border-bottom-color:var(--line);
  box-shadow:0 12px 30px -24px rgba(0,0,0,.9);
}
/* Al bajar se esconde (le deja el lugar a la barra fija de abajo);
   al subir vuelve a aparecer. Ver 09 en app.js. */
.site-header.oculto{ transform:translate3d(0,-100%,0); }
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--max); margin:0 auto; padding:13px var(--pad);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; }
.brand-text{ font-family:'Fraunces', serif; font-weight:400; font-size:19px; line-height:1.15; }
.brand-text small{
  display:block; font-family:'Inter', sans-serif; font-weight:600;
  font-size:9px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--brass); margin-top:3px;
}
/* La nav solo hace scroll interno y lleva el CTA. Sin links externos:
   cada puerta de salida es una fuga de conversión. */
.nav-links{ display:none; gap:26px; list-style:none; }
.nav-links a{
  font-size:13.5px; font-weight:600; text-decoration:none; color:var(--ink-2);
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--brass); }

.site-footer{ padding:52px 0 44px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.footer-grid{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:grid; gap:28px;
}
.footer-brand .brand-text{ font-size:21px; }
.footer-brand p{ font-size:13.5px; color:var(--muted); margin-top:12px; max-width:34ch; }
.footer-col h4{ font-family:'Inter', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:14px; }
.footer-col ul{ list-style:none; display:grid; gap:9px; }
.footer-col a{ color:var(--muted); text-decoration:none; transition:color .2s ease; }
.footer-col a:hover{ color:var(--brass); }
.footer-bottom{
  max-width:var(--max); margin:34px auto 0; padding:22px var(--pad) 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.5px;
}


/* =========================================================================
   06 · ANIMACIONES
   ========================================================================= */
@keyframes fade-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop-in{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }

.reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

.reveal-fade{ opacity:0; transition:opacity .9s var(--ease); }
.reveal-fade.in-view{ opacity:1; }

.stagger-item{ opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in-view .stagger-item{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view .stagger-item:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in-view .stagger-item:nth-child(3){ transition-delay:.24s; }
.reveal-stagger.in-view .stagger-item:nth-child(4){ transition-delay:.36s; }
.reveal-stagger.in-view .stagger-item:nth-child(5){ transition-delay:.48s; }
.reveal-stagger.in-view .stagger-item:nth-child(6){ transition-delay:.60s; }

.pop{ opacity:0; transform:scale(.9); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.in-view .pop, .pop.in-view{ opacity:1; transform:scale(1); }


/* =========================================================================
   07 · COMPONENTES DE LA LANDING
   ========================================================================= */

/* --- 07.1 Hero (variante: texto a la izquierda, imagen de fondo) --- */
.hero{ position:relative; overflow:hidden; padding:0; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%; animation:ken-burns 22s ease-out both; }
@keyframes ken-burns{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  /* Tres capas, en este orden:
     1. velo verde que tiñe la foto y la mete dentro de la paleta
     2. degradado hacia el lado del texto, para que el titular se lea siempre
     3. oscurecido general del 35% */
  background:
    linear-gradient(100deg, rgba(11,23,16,.96) 0%, rgba(11,23,16,.86) 42%, rgba(11,23,16,.42) 78%, rgba(11,23,16,.55) 100%),
    linear-gradient(180deg, rgba(11,23,16,.5) 0%, transparent 40%, rgba(11,23,16,.85) 100%),
    rgba(16,31,23,.42);
  mix-blend-mode:normal;
}
/* La foto de fondo se desatura un poco: así ninguna luz de fiesta compite
   con el color de marca ni con el botón. */
.hero-bg img{ filter:saturate(.72) contrast(1.04); }
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto; padding:clamp(52px,9vw,116px) var(--pad) clamp(56px,8vw,104px);
  display:grid; gap:20px;
}
.hero-copy{ max-width:720px; }
.hero-copy .eyebrow{ animation:fade-up .7s var(--ease) both; }
.hero-copy h1{ margin:16px 0 18px; animation:fade-up .8s var(--ease) .08s both; }
.hero-copy .lead{ animation:fade-up .8s var(--ease) .18s both; }
.hero-cta{ margin-top:26px; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  animation:fade-up .8s var(--ease) .28s both; }
.hero-cta .cta-line{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; width:100%; }
.hero-cta .btn{ width:100%; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--line);
  animation:fade-up .8s var(--ease) .36s both; }
.hero-stats > span{ display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; color:var(--ink-2); }
.hero-stats > span::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brass); flex:none; }
.hero-stats .stars{ color:var(--brass); letter-spacing:2px; }
/* En celular la imagen va debajo del texto, según el wireframe */
.hero-photo-mobile{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  animation:fade-up .9s var(--ease) .44s both; }
.hero-photo-mobile img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }

/* --- 07.2 Cinta de confianza --- */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(194,162,94,.03); }
.trust-inner{ max-width:var(--max); margin:0 auto; padding:24px var(--pad);
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 10px; text-align:center; }
.trust-item strong{ display:block; font-family:'Fraunces', serif; font-weight:400;
  font-size:clamp(24px,3.4vw,34px); line-height:1; color:var(--brass); }
.trust-item span{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:9px; }

/* --- 07.3 Video (VSL y video destacado) --- */
.video-frame{
  position:relative; max-width:900px; margin:38px auto 0;
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  aspect-ratio:16/9; background:var(--surface); box-shadow:var(--glow-brass);
}
.video-frame video, .video-frame iframe, .video-frame img{ width:100%; height:100%; object-fit:cover; border:0; }
.video-sound{
  position:absolute; right:14px; bottom:14px; z-index:3;
  background:rgba(11,23,16,.74); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:var(--r-pill); color:var(--brass);
  padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.vsl-beats{ display:grid; gap:14px; margin-top:34px; }
.vsl-beat{ display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--muted); }
.vsl-beat span{ font-family:'Fraunces',serif; font-size:12px; letter-spacing:.1em;
  color:var(--brass); flex:none; padding-top:3px; min-width:58px; }

/* --- 07.4 Problema --- */
.problema h2 em, .problema h2 .kw{ display:block; color:var(--clay);
  text-shadow:0 0 32px rgba(210,114,78,.28); }
.dudas{ display:grid; gap:14px; margin-top:40px; }
.duda{ background:rgba(244,241,232,.03); border:1px solid var(--line);
  border-radius:var(--r-md); padding:28px 26px;
  transition:border-color .3s ease, transform .3s ease, background .3s ease; }
.duda:hover{ border-color:var(--line-2); transform:translateY(-3px); background:rgba(244,241,232,.05); }
.duda .n{ font-family:'Fraunces',serif; font-size:13px; color:var(--brass);
  letter-spacing:.12em; display:block; margin-bottom:11px; }
.duda h3{ margin-bottom:10px; }
.duda p{ font-size:14.5px; color:var(--muted); }

/* --- 07.5 Proceso y próximos pasos --- */
.steps{ display:grid; gap:20px; margin-top:42px; }
.step{ background:rgba(244,241,232,.03); border:1px solid var(--line);
  border-radius:var(--r-md); padding:28px 24px; transition:border-color .3s ease; }
.step:hover{ border-color:var(--line-2); }
.step .num{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:transparent; color:var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:19px; margin-bottom:16px;
}
.step h3{ margin-bottom:8px; }
.step p{ font-size:14px; color:var(--muted); }

/* --- 07.6 Promesa --- */
.promesa-frase{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,4vw,42px); line-height:1.25; color:var(--brass);
  max-width:20ch; margin:18px auto 22px;
}

/* --- 07.7 Exclusividad --- */
.exclusiva{
  background:linear-gradient(160deg, var(--surface), var(--bg-alt));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(34px,5vw,64px); position:relative; overflow:hidden;
}
.exclusiva::before{
  content:""; position:absolute; inset:-40% -30% auto -30%; height:280px;
  background:radial-gradient(circle, rgba(194,162,94,.2), transparent 70%);
  filter:blur(26px); pointer-events:none;
}
.exclusiva > *{ position:relative; z-index:1; }

/* --- 07.8 Portafolio (grid) --- */
.port-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:40px; }
.port-item{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--line); aspect-ratio:4/5; background:var(--surface);
  opacity:0; transform:scale(.96);
  transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .3s ease;
}
.reveal-stagger.in-view .port-item{ opacity:1; transform:scale(1); }
.port-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.port-item:hover img{ transform:scale(1.05); }
.port-item::after{
  content:attr(data-cap); position:absolute; left:0; right:0; bottom:0;
  padding:28px 14px 12px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);
  background:linear-gradient(180deg, transparent, rgba(11,23,16,.88));
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.port-item:hover::after{ opacity:1; transform:translateY(0); }
.port-item.wide{ grid-column:span 2; }

/* --- 07.9 Comparador antes / después --- */
/* La tarjeta usa la proporción EXACTA de la foto (1065x1600), así la versión
   "Conmigo" se ve entera, sin recorte y sin deformarse. */
.cmp{
  position:relative; width:100%; max-width:min(430px, 84vw); margin:40px auto 0;
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  aspect-ratio:1065/1600; cursor:ew-resize; user-select:none; -webkit-user-select:none;
  touch-action:pan-y; background:var(--surface); box-shadow:var(--glow-brass);
}
/* pointer-events:none en las capas = el navegador no puede "agarrar" la foto
   y arrastrarla; todos los gestos van al comparador. */
.cmp-layer{ position:absolute; inset:0; pointer-events:none; }
.cmp-layer picture{ position:absolute; inset:0; display:block; }
.cmp-layer img{
  display:block; width:100%; height:100%; object-fit:fill; border-radius:0;
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none; pointer-events:none;
}
.cmp-after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.cmp-tag{
  position:absolute; top:14px; z-index:3;
  background:rgba(11,23,16,.76); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:7px 15px; font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
.cmp-tag.is-before{ left:14px; color:var(--muted); }
.cmp-tag.is-after{ right:14px; color:var(--brass); }
.cmp-handle{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px;
  background:var(--brass); z-index:4; pointer-events:none; box-shadow:0 0 18px rgba(194,162,94,.75); }
.cmp-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--brass); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
  box-shadow:0 8px 26px rgba(0,0,0,.5); }
.cmp-hint{ margin-top:16px; }

/* Escritorio ancho: el texto se va a la izquierda y el comparador a la derecha.
   Debajo de 940px NO se aplica nada de esto: queda la columna única centrada
   del celular, que es como tiene que verse. */
@media (min-width:940px){
  .cmp-split{
    display:grid;
    grid-template-columns:1fr minmax(0, 430px);
    /* Las dos filas 1fr de arriba y abajo son colchones: dejan el titular y la
       ayuda pegados entre sí y centrados en vertical junto al comparador. */
    grid-template-rows:1fr auto auto 1fr;
    column-gap:clamp(48px, 6vw, 88px);
  }
  .cmp-split > .sec-head{
    grid-column:1; grid-row:2;
    text-align:left; max-width:540px; margin:0;
  }
  .cmp-split > .sec-head .lead{ margin-left:0; margin-right:0; }
  .cmp-split > .sec-head .eyebrow::before{ display:inline-block; }
  .cmp-split > .cmp{
    grid-column:2; grid-row:1 / -1;
    margin:0; width:100%; max-width:100%;
  }
  .cmp-split > .cmp-hint{
    grid-column:1; grid-row:3;
    text-align:left; margin-top:22px;
  }
}

/* --- 07.10 Testimonios (grid estático) --- */
.testi-grid{ display:grid; gap:16px; margin-top:40px; }
.testi{
  background:rgba(244,241,232,.035); border:1px solid var(--line);
  border-radius:var(--r-md); padding:28px 26px; text-align:left;
  display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.testi:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.testi .stars{ color:var(--brass); letter-spacing:2px; font-size:13px; }
.testi p{ font-size:15px; color:var(--ink-2); margin:14px 0 20px; flex:1; }
.testi-who{ display:flex; align-items:center; gap:12px; }
.testi-who img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.testi-who strong{ display:block; font-size:13.5px; }
.testi-who span{ font-size:12px; color:var(--muted); }

/* --- 07.11 Cita destacada --- */
.pull-quote{ max-width:820px; margin:0 auto; text-align:center; }
.pull-quote blockquote{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(21px,3.4vw,36px); line-height:1.32; color:var(--ink);
}
.pull-quote cite{
  display:block; margin-top:22px; font-family:'Inter',sans-serif; font-style:normal;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}

/* --- 07.12 Logos "confían en mí" --- */
.logos{ display:flex; flex-wrap:nowrap; gap:26px; overflow-x:auto; padding:6px 0 14px;
  scrollbar-width:none; margin-top:26px; align-items:center; }
.logos::-webkit-scrollbar{ display:none; }
.logos > *{ flex:0 0 auto; height:44px; opacity:.7; filter:grayscale(1) brightness(1.6);
  transition:opacity .3s ease, filter .3s ease; }
.logos > *:hover{ opacity:1; filter:grayscale(0) brightness(1); }

/* --- 07.13 Estadísticas --- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px 12px; text-align:center; }
.stat strong{ display:block; font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(34px,6vw,58px); line-height:1; color:var(--brass); }
.stat span{ display:block; margin-top:10px; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* --- 07.14 Sobre mí --- */
.about{ display:grid; gap:32px; align-items:center; }
.about-photo{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); }
.about-photo img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.about-list{ list-style:none; margin-top:24px; display:grid; gap:12px; }
.about-list li{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.about-list li::before{
  content:"✓"; color:var(--brass); font-weight:700; font-size:12px; flex:none;
  border:1px solid var(--line-2); border-radius:50%; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center; margin-top:4px;
}

/* --- 07.15 Garantías --- */
.garantia{
  display:grid; gap:22px; align-items:center; text-align:center;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(30px,4.4vw,52px); background:rgba(194,162,94,.04);
}
.garantia-sello{
  width:84px; height:84px; border-radius:50%; margin:0 auto;
  border:1px solid var(--line-2); color:var(--brass);
  display:flex; align-items:center; justify-content:center; font-size:34px;
  background:rgba(194,162,94,.07);
}
.gar-cards{ display:grid; gap:16px; margin-top:40px; }
.gar-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:28px 26px; transition:border-color .3s ease; }
.gar-card:hover{ border-color:var(--line-2); }
.gar-card .ico{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2);
  color:var(--brass); display:flex; align-items:center; justify-content:center;
  font-size:19px; margin-bottom:16px; }
.gar-card h3{ margin-bottom:8px; }
.gar-card p{ font-size:14px; color:var(--muted); }

/* --- 07.16 Precios (rango) --- */
.precios{ display:grid; gap:18px; margin-top:42px; }
.plan{
  background:linear-gradient(180deg, rgba(244,241,232,.05), rgba(244,241,232,.015));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 28px; display:flex; flex-direction:column; position:relative;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.plan:hover{ border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--glow-brass); }
.plan.destacado{ border-color:var(--brass); animation:pop-in .5s var(--ease) both; }
.plan-flag{
  position:absolute; top:-1px; right:24px; background:var(--brass); color:var(--bg);
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:0 0 8px 8px;
}
.plan h3{ margin-bottom:6px; }
.plan .rango{ font-family:'Fraunces',serif; font-size:clamp(28px,4.4vw,38px);
  line-height:1.05; color:var(--ink); margin:14px 0 4px; }
.plan .rango small{ display:block; font-family:'Inter',sans-serif; font-size:12px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.plan ul{ list-style:none; margin:22px 0 26px; display:grid; gap:9px; flex:1; }
.plan ul li{ font-size:13.5px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start; }
.plan ul li::before{ content:"◈"; color:var(--brass); font-size:9px; flex:none; margin-top:5px; }

/* --- 07.17 Extras / add-ons --- */
.extras{ display:grid; gap:16px; margin-top:40px; }
.extra{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; display:flex; flex-direction:column; gap:12px; transition:border-color .3s ease; }
.extra:hover{ border-color:var(--line-2); }
.extra p{ font-size:14px; color:var(--muted); flex:1; }

/* --- 07.18 Formas de pago --- */
.pagos{ display:grid; gap:16px; margin-top:40px; }
.pago{ border:1px solid var(--line); border-radius:var(--r-md); padding:28px 26px;
  background:rgba(244,241,232,.03); }
.pago strong{ display:block; font-family:'Fraunces',serif; font-size:20px; font-weight:400;
  color:var(--ink); margin-bottom:8px; }
.pago span{ font-size:14px; color:var(--muted); }
.pago b{ color:var(--brass); }

/* --- 07.19 CTA final --- */
.cta-final{ position:relative; overflow:hidden; background:var(--bg); background-image:none; }
.cta-final::before{
  content:""; position:absolute; inset:auto -20% -60% -20%; height:380px;
  background:radial-gradient(circle, rgba(194,162,94,.18), transparent 68%);
  filter:blur(48px); pointer-events:none;
}
.cta-final .wrap{ position:relative; z-index:1; }
.cta-info{ display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:32px; font-size:13px; color:var(--muted); }
.cta-info a, .cta-info span{ display:flex; align-items:center; gap:8px; text-decoration:none;
  transition:color .2s ease; }
.cta-info a:hover{ color:var(--brass); }
.cta-info b{ color:var(--brass); font-weight:700; }

/* --- 07.20 Lead magnet / newsletter --- */
.magnet{
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(30px,4.4vw,56px); background:rgba(194,162,94,.045);
  display:grid; gap:20px; align-items:center;
}

/* --- 07.21 FAQ --- */
.faq{ max-width:790px; margin:36px auto 0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 0; font-size:15.5px; font-weight:600; text-align:left; color:var(--ink);
  transition:color .2s ease;
}
.faq-q:hover{ color:var(--brass); }
.faq-q .plus{ transition:transform .25s ease; font-size:21px; color:var(--brass); flex:none; line-height:1; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a p{ padding-bottom:22px; color:var(--muted); font-size:14.5px; }

/* --- 07.22 Embed genérico --- */
.embed{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); }
.embed iframe{ width:100%; border:0; display:block; }

/* --- 07.23 Calendario de disponibilidad --- */
.cal-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px;
  margin-top:20px; font-size:12.5px; color:var(--muted); }
.cal-legend span{ display:flex; align-items:center; gap:8px; }
.cal-legend i{ width:12px; height:12px; border-radius:50%; border:1px solid var(--line-2); flex:none; }
.cal-legend i.taken{ border-color:var(--rojo); background:var(--rojo); }

/* --- 07.24 Barra fija de acción (celular) y botón flotante (escritorio) --- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(11,23,16,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  display:flex; align-items:center; gap:12px;
  will-change:transform;
  transform:translate3d(0,115%,0); transition:transform .35s var(--ease);
}
.sticky-cta.show{ transform:translate3d(0,0,0); }
.sticky-cta .sc-text{ flex:1; min-width:0; }
.sticky-cta .sc-text strong{ display:block; font-size:12.5px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .sc-text span{ display:block; font-size:11px; color:var(--muted); }
.sticky-cta .btn{ padding:13px 20px; font-size:12px; flex:none; }

.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:65; display:none;
  width:56px; height:56px; border-radius:50%; background:var(--wa); color:#06301A;
  align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.65);
  opacity:0; transform:scale(.7);
  transition:opacity .3s ease, transform .3s var(--ease);
}
.wa-float.show{ opacity:1; transform:scale(1); }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:29px; height:29px; }


/* =========================================================================
   08 · ARTÍCULO (blog y recursos) — el mismo CSS, sin rediseñar nada
   ========================================================================= */
.crumb{ font-size:12px; color:var(--muted); letter-spacing:.04em; margin-bottom:18px; }
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--brass); }
.crumb span{ color:var(--brass); }

.post-head{ padding:clamp(44px,6vw,80px) 0 0; }
.post-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px;
  font-size:12.5px; color:var(--muted); }
.post-meta span{ display:flex; align-items:center; gap:7px; }
.post-hero{ margin:34px 0 0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.post-hero img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

.prose{ padding:clamp(34px,5vw,56px) var(--pad) var(--sp); }
.prose > *{ max-width:var(--max-article); margin-left:auto; margin-right:auto; }
.prose p{ font-size:17px; color:var(--ink-2); margin-bottom:22px; }
.prose h2{ font-size:clamp(24px,3.4vw,34px); margin:44px auto 16px; }
.prose h3{ font-size:clamp(19px,2.4vw,23px); margin:34px auto 12px; }
.prose ul, .prose ol{ margin:0 auto 24px; padding-left:24px; color:var(--ink-2); }
.prose li{ font-size:16.5px; margin-bottom:10px; }
.prose li::marker{ color:var(--brass); }
.prose img{ border-radius:var(--r-md); margin:30px auto; border:1px solid var(--line); }
.prose figcaption{ font-size:13px; color:var(--muted); text-align:center; margin-top:-18px; margin-bottom:30px; }
.prose blockquote{
  border-left:2px solid var(--brass); padding:6px 0 6px 26px; margin:30px auto;
  font-family:'Fraunces',serif; font-style:italic; font-size:20px; color:var(--ink);
}
.prose table{ width:100%; border-collapse:collapse; margin:26px auto; font-size:15px; }
.prose th, .prose td{ border:1px solid var(--line); padding:12px 14px; text-align:left; }
.prose th{ background:rgba(194,162,94,.07); color:var(--brass); font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; }
.prose .destacado{
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:rgba(194,162,94,.05); padding:24px 26px; margin:30px auto;
}
.prose .destacado p{ margin-bottom:0; }

/* tabla de contenidos del artículo */
.toc{ border:1px solid var(--line); border-radius:var(--r-md); padding:22px 24px;
  background:rgba(244,241,232,.025); margin:0 auto 34px; }
.toc h4{ font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:12px; }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ font-size:14.5px; margin-bottom:7px; }
.toc a{ color:var(--ink-2); text-decoration:none; }
.toc a:hover{ color:var(--brass); }

/* CTA al final del artículo — mismo botón, mismo microcopy, mismo evento */
.post-cta{
  max-width:var(--max-article); margin:0 auto; text-align:center;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(30px,4.4vw,48px); background:rgba(194,162,94,.05);
}
.post-nav{ max-width:var(--max-article); margin:38px auto 0;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13.5px; }

/* listado de posts / recursos */
.card-grid{ display:grid; gap:18px; margin-top:42px; }
.card{
  display:flex; flex-direction:column; text-decoration:none;
  background:rgba(244,241,232,.03); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
}
.card:hover{ border-color:var(--brass); transform:translateY(-4px); }
.card-img{ aspect-ratio:16/9; overflow:hidden; background:var(--surface); }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card-img img{ transform:scale(1.05); }
.card-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.card-tag{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin-bottom:12px; }
.card h3{ margin-bottom:10px; }
.card p{ font-size:14px; color:var(--muted); flex:1; }
.card-more{ margin-top:18px; font-size:13px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:8px; }
.card:hover .card-more{ color:var(--brass); }


/* =========================================================================
   09 · FORMULARIOS
   ========================================================================= */
.field-row{ display:grid; gap:12px; }
.input{
  width:100%; padding:16px 18px;
  background:rgba(244,241,232,.05); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-size:15px; transition:border-color .2s ease, background .2s ease;
}
.input::placeholder{ color:var(--muted); }
.input:focus{ outline:none; border-color:var(--brass); background:rgba(244,241,232,.08); }
.form-note{ font-size:12px; color:var(--muted); margin-top:12px; }
.form-note a{ color:var(--brass); }
.form-ok{ display:none; color:var(--brass); font-weight:600; font-size:14.5px; margin-top:14px; }
.form-ok.show{ display:block; animation:fade-up .4s var(--ease) both; }


/* =========================================================================
   10 · MARCADORES DE POSICIÓN
   Cuando falta una foto o un link, el hueco tiene que verse como hueco.
   Así es imposible publicar algo a medias sin darse cuenta.
   ========================================================================= */
.img-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; height:100%;
  background:repeating-linear-gradient(135deg,
    rgba(194,162,94,.09) 0 10px, rgba(194,162,94,.03) 10px 20px);
  border:2px dashed rgba(194,162,94,.4); border-radius:var(--r-md);
  color:var(--muted); font-size:12px; font-weight:600; line-height:1.55; padding:16px;
}
.img-placeholder .ph-tag{
  display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--clay); font-weight:800; margin-bottom:6px;
}
/* aviso en línea para un dato pendiente (un link, un precio, un ID) */
.todo{
  display:inline-block; font-family:'Inter',sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--clay); border:1px dashed rgba(210,114,78,.5); border-radius:var(--r-sm);
  padding:3px 8px;
}


/* =========================================================================
   ESCRITORIO
   ========================================================================= */
@media (min-width:768px){
  .br-desktop{ display:inline; }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }

  .nav-links{ display:flex; }

  .hero-inner{ grid-template-columns:1fr; min-height:min(88vh, 760px); align-content:center; }
  .hero-cta .btn{ width:auto; }
  .hero-photo-mobile{ display:none; }

  .trust-inner{ grid-template-columns:repeat(4,1fr); padding:30px var(--pad); }

  .vsl-beats{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .vsl-beat{ flex-direction:column; gap:8px; }

  .dudas{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .steps.cuatro{ grid-template-columns:repeat(4,1fr); }

  .port-grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
  .port-item.wide{ grid-column:span 2; }

  .testi-grid{ grid-template-columns:repeat(3,1fr); }
  .about{ grid-template-columns:.85fr 1.15fr; gap:56px; }
  .garantia{ grid-template-columns:auto 1fr; text-align:left; gap:34px; }
  .garantia-sello{ margin:0; }
  .gar-cards{ grid-template-columns:repeat(3,1fr); }
  .precios{ grid-template-columns:repeat(3,1fr); }
  .extras{ grid-template-columns:repeat(3,1fr); }
  .pagos{ grid-template-columns:repeat(2,1fr); }
  .magnet{ grid-template-columns:1fr auto; }
  .card-grid{ grid-template-columns:repeat(3,1fr); }

  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:44px; }

  .sticky-cta{ display:none; }
  .wa-float{ display:flex; }
}

@media (max-width:767px){
  /* espacio para que la barra fija no tape el final del footer */
  body.has-sticky-cta{ padding-bottom:78px; }
  .btn{ font-size:13px; padding:16px 24px; }
  .stats{ grid-template-columns:1fr; gap:26px; }

  /* Foto de "Quién soy": en celular, más corta y ancha (no un retrato
     alargado de pantalla completa). */
  .about-photo img{ aspect-ratio:4/3; object-position:50% 35%; }
}


/* =========================================================================
   ACCESIBILIDAD DEL MOVIMIENTO — obligatorio, no opcional.
   Hay gente que activa "reducir movimiento" porque las animaciones le
   producen mareo o migraña. Ignorarlo es dejar afuera clientes reales.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .reveal-fade, .stagger-item, .pop, .port-item{ opacity:1 !important; transform:none !important; }
  mark{ background-size:100% 100% !important; }
  .hero-bg img{ transform:none !important; }
}


/* =========================================================================
   IMPRESIÓN — para que los recursos descargables se impriman decentes
   ========================================================================= */
@media print{
  body{ background:#fff !important; color:#111 !important; }
  .site-header, .site-footer, .sticky-cta, .wa-float, .post-cta, .btn{ display:none !important; }
  .prose p, .prose li{ color:#222 !important; }
  h1,h2,h3{ color:#111 !important; }
  a{ text-decoration:underline; }
}


/* =========================================================================
   11 · CALENDARIO DE DISPONIBILIDAD
   Usa container queries para que los meses se achiquen con el contenedor,
   no con la ventana: así entran 3 por fila incluso en un celular chico.
   ========================================================================= */
.cal-wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  text-align:center; container-type:inline-size; }
.cal-titulo{ font-family:'Fraunces',serif; font-weight:400;
  font-size:clamp(20px, 6cqi, 40px); color:var(--ink); margin:30px 0 4px; }
.cal-sub{ font-size:clamp(12px, 3cqi, 17px); color:var(--brass);
  font-weight:500; margin:0 0 22px; }
.cal-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(6px, 2cqi, 20px); }
.cal-mes{ min-width:0; margin-bottom:18px; }
.cal-mes-badge{
  background:rgba(194,162,94,.06); border:1px solid var(--line-2); color:var(--brass);
  padding:6px 0; border-radius:var(--r-pill); text-transform:uppercase; font-weight:700;
  font-size:clamp(6.5px, 2.5cqi, 12px); letter-spacing:.1em; margin-bottom:10px;
  width:95%; margin-left:auto; margin-right:auto;
}
.cal-dow, .cal-dias{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px; }
.cal-dow{ margin-bottom:5px; }
.cal-dow span{ font-weight:700; color:var(--muted); font-size:clamp(6.5px, 2.2cqi, 12px); }
.cal-celda{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; }
.cal-celda i{
  display:flex; align-items:center; justify-content:center;
  width:92%; height:92%; border-radius:50%; border:1px solid transparent;
  font-style:normal; font-size:clamp(6.5px, 2.3cqi, 14px); color:var(--ink-2); line-height:1;
}
.cal-celda.tomada i{
  border-color:var(--rojo); color:#fff; font-weight:800;
  background:var(--rojo); box-shadow:0 0 10px rgba(229,52,44,.55);
}
.cal-celda.hoy i{ border-color:var(--line-2); }
.cal-celda.vacia{ pointer-events:none; opacity:0; }
.cal-estado{ color:var(--ink-2); font-weight:600; padding:30px 0; font-size:14.5px; }
.cal-foot{
  margin-top:12px; display:inline-block; background:rgba(194,162,94,.06);
  border:1px solid var(--line-2); padding:12px 30px; border-radius:var(--r-pill);
  color:var(--ink-2); font-size:clamp(11px, 2.5cqi, 14px);
}
.cal-foot b{ color:var(--brass); }

/* --- 07.24 Testimonios: destacado, videos, muro de capturas ------------ */
.testi-featured{
  display:grid; gap:28px; margin-top:38px;
  grid-template-columns:1fr; align-items:start;
}
.testi-featured-quote{
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:rgba(194,162,94,.05); text-align:left;
  display:flex; flex-direction:column;
}
.testi-featured-quote-photo img{ width:100%; height:auto; display:block; }
.testi-featured-quote-text{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:14px; }
.testi-featured-quote-text .promesa-frase{ margin:0; max-width:none; font-size:clamp(18px,2.4vw,23px); }
.testi-featured-quote-who{ font-size:13.5px; color:var(--muted); font-weight:600; }
.testi-featured-quote-who b{ color:var(--ink); }

/* En celular, lado a lado (ahí ya se veían bien y ocupar menos alto le
   deja más lugar al carrusel de capturas, que es lo que tiene que
   destacar en esa pantalla). Recién en escritorio pasan a apilarse uno
   abajo del otro, donde apretarlos en columna angosta los dejaba chicos. */
.testi-videos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.embed-vertical{
  aspect-ratio:9/16; max-width:280px; margin:0 auto; width:100%;
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface);
}
.embed-vertical iframe{ width:100%; height:100% !important; border:0; display:block; }

.google-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px;
  margin-top:46px; padding:20px 24px; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:rgba(194,162,94,.05);
}
.google-strip .stars{ color:var(--brass); letter-spacing:2px; font-size:15px; }
.google-strip strong{ font-family:'Fraunces',serif; font-weight:400; font-size:18px; }
.google-strip a{ color:var(--brass); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

.testi-wall-head{ margin-top:56px; }

/* Carrusel: avanza solo con movimiento continuo (no a saltos) vía CSS
   @keyframes + translateX (inyectados por carruselTestimonios() en app.js).
   La animación corre en la GPU, no depende de scrollLeft ni de setInterval,
   así que es perfectamente suave en celular y PC. Se pausa con el dedo
   encima (touch), mouse encima (hover), arrastre, rueda del mouse o flechas.
   Al soltar, retoma de inmediato. El JS cambia overflow a hidden y envuelve
   los tracks en una "cinta" con translateX animado. Sin scrollbar visible. */
.testi-carousel-wrap{ 
  position:relative; 
  margin-top:26px; 
  /* Forzar ancho completo de pantalla (edge to edge) ignorando el contenedor padre */
  width:100vw; 
  margin-left:calc(-50vw + 50%); 
}
.testi-carousel{
  display:flex; gap:14px; overflow:hidden; cursor:grab;
  /* Padding lateral para que las imágenes no empiecen pegadas al borde cuando se reinicia */
  padding:0 16px;
}
.testi-carousel:active{ cursor:grabbing; }
.testi-carousel::-webkit-scrollbar{ display:none; }
.testi-carousel-track{ display:flex; flex:0 0 auto; align-items:center; gap:14px; width:max-content; }

/* Altura fija para TODA la fila, ancho libre: es la única forma de que
   una captura muy alta (ej. 1385px) no obligue a toda la fila a esa
   altura y deje un hueco enorme arriba de las capturas normales. Cada
   imagen escala su ancho sola para respetar su proporción real — nunca
   se recorta. Las cortas van de a pares apiladas (mismo alto sumado que
   una sola) para que el conjunto se vea parejo. */
.testi-slot{ flex:0 0 auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; }
.testi-item{
  display:block; padding:0; text-align:left; line-height:0;
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-2);
  transition:border-color .25s var(--ease);
}
.testi-item:hover{ border-color:var(--brass); }
/* Números fijos, escritos a mano, sin variable CSS ni calc(): en
   celular 420px (a propósito más grande que en tablet — en el celular
   es donde tiene que ser protagonista), en tablet/escritorio 400px.
   Para agrandar o achicar el carrusel, tocar estos 4 números. */
.testi-item img{
  height:420px !important; width:auto !important; max-width:none !important;
  display:block; -webkit-user-drag:none; user-select:none; pointer-events:none;
}
/* Las dos capturas de un mismo par NO comparten proporción (una es más
   panorámica que la otra), así que si a las dos se les fija el ALTO,
   terminan con anchos distintos y se ven desalineadas, como una columna
   torcida. Con el par, es al revés: se fija el ANCHO (compartido entre
   las dos) y el alto de cada una sale solo — así quedan una debajo de
   la otra, prolijas, aunque no midan exactamente lo mismo de alto. */
.testi-slot.par{ width:356px; }
.testi-slot.par .testi-item img{
  height:auto !important; width:356px !important; max-width:none !important;
}
@media (min-width:700px){
  .testi-item img{ height:400px !important; }
  .testi-slot.par{ width:335px; }
  .testi-slot.par .testi-item img{ width:335px !important; }
}

.testi-carousel-flecha{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(11,23,16,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line-2); color:var(--brass); font-size:20px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.35); transition:border-color .2s var(--ease), scale .2s var(--ease);
}
.testi-carousel-flecha:hover{ border-color:var(--brass); scale:1.06; }
.testi-carousel-flecha.izq{ left:12px; }
.testi-carousel-flecha.der{ right:12px; }

@media (min-width:700px){
  /* Topes fijos en px para las dos tarjetas, no fracciones (fr) del
     ancho disponible: con fr, en una pantalla ancha la foto terminaba
     gigante (o los videos, según el reparto) porque crecía junto con
     el contenedor. Con un tope fijo, la foto de Emily nunca pasa de
     320px ni los videos de 165px, sea cual sea el ancho de la pantalla
     — se quedan del tamaño de una tarjeta, no de media pantalla.
     El ancho de los videos (165px) está medido, no adivinado: con la
     tarjeta de Emily en 320px, su alto total (foto + texto) da 601px.
     Dos videos verticales (9:16) apilados dan esa misma altura total
     con un ancho de 165px cada uno — por eso ese número puntual. */
  /* Tablet (700px a 1079px): no caben los 3 elementos en fila, 
     así que apilamos los 2 videos a la derecha (165px de ancho cada uno
     suman ~600px de alto, igualando la foto) */
  .testi-featured{ grid-template-columns:320px 165px; gap:20px; justify-content:center; }
  .testi-featured-quote{ width:320px; }
  .testi-videos{ display:flex; flex-direction:column; width:165px; gap:20px; }
  .embed-vertical{ max-width:165px; width:100%; }
  /* Las flechas en PC deben estar dentro de la pantalla (el wrap es 100vw) */
  .testi-carousel-flecha.izq{ left:20px; }
  .testi-carousel-flecha.der{ right:20px; }
}

@media (min-width:1080px){
  /* PC ancho completo (>1080px): Foto y los 2 videos uno al lado del otro.
     La foto mide 320px ancho = ~601px de alto total.
     Un video 9:16 a 601px de alto ocupa 338px de ancho. */
  .testi-featured{ grid-template-columns:320px auto; gap:28px; }
  .testi-videos{ flex-direction:row; width:auto; gap:28px; }
  .embed-vertical{ max-width:none; width:338px; }
}
@media (max-width:479px){
  .testi-carousel-flecha{ width:34px; height:34px; font-size:17px; }
}

/* --- Visor de imágenes (lightbox) --------------------------------------
   Pantalla completa, fondo oscuro, la imagen entera sin recortar
   (object-fit:contain) y una X grande y fácil de tocar para cerrar. */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,13,9,.94); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:env(safe-area-inset-top,16px) 16px env(safe-area-inset-bottom,16px);
  animation:lightbox-in .18s var(--ease);
}
.lightbox[hidden]{ display:none !important; }
@keyframes lightbox-in{ from{ opacity:0; } to{ opacity:1; } }
.lightbox-img{
  max-width:min(94vw, 560px); max-height:88vh; width:auto; height:auto;
  object-fit:contain; border-radius:var(--r-md); box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-cerrar{
  position:absolute; right:16px; top:calc(env(safe-area-inset-top, 0px) + 16px);
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(11,23,16,.85); border:1px solid var(--line-2); color:var(--ink);
  font-size:20px; line-height:1; z-index:1;
}
.lightbox-cerrar:hover{ border-color:var(--brass); color:var(--brass); }

/* Flechas de navegación del lightbox */
.lightbox-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:1;
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(11,23,16,.85); border:1px solid var(--line-2); color:var(--ink);
  font-size:28px; line-height:1; transition:border-color .2s var(--ease), color .2s var(--ease), scale .2s var(--ease);
}
.lightbox-nav:hover{ border-color:var(--brass); color:var(--brass); scale:1.08; }
.lightbox-prev{ left:max(12px, env(safe-area-inset-left, 12px)); }
.lightbox-next{ right:max(12px, env(safe-area-inset-right, 12px)); }
@media (max-width:600px){
  .lightbox-nav{ width:40px; height:40px; font-size:22px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}