/* ==========================================================================
   PREVIEW — Plantilla Strevora adaptada a CaroCune
   · Estructura y layout: plantilla Strevora (Webflow)
   · Tipografía: la ORIGINAL de Strevora — Marcellus + General Sans
   · Colores: los REALES de CaroCune (tokens de src/styles/tokens.css)
   Contenido real de Caro Cuñé. Testimonios = ejemplos a reemplazar.
   ========================================================================== */

:root{
  /* Tipografía Strevora */
  --font-head:"Marcellus", Georgia, "Times New Roman", serif;
  --font-body:"General Sans", system-ui, -apple-system, sans-serif;

  /* Colores CaroCune (tokens reales) */
  --carmin:#c70039;
  --carmin-hover:#a0153d;
  --noche:#1f2847;
  --noche-accent:#2e3a5e;
  --noche-deep:#141a2e;
  --blush:#fff6f5;
  --rosa:#e79aad;
  --rosa-suave:#ffe1e8;
  --n-100:#f7edec;
  --n-200:#e8dbda;
  --n-300:#cdbebc;
  --n-500:#7e706e;
  --n-600:#5b4f4e;
  --n-800:#272120;
  --noche-rgb:31 40 71;
  --carmin-rgb:199 0 57;

  /* Roles */
  --superficie:#ffffff;
  --superficie-tintada:var(--blush);
  --superficie-oscura:var(--noche);
  --texto:var(--noche);
  --texto-suave:var(--n-600);
  --texto-invertido:var(--blush);
  --linea:var(--n-200);

  /* Escala tipográfica de Strevora (con clamp para responsive) */
  --h1:clamp(2.6rem, 1.6rem + 4.4vw, 3.75rem);
  --h2:clamp(2rem, 1.4rem + 2.6vw, 2.5rem);
  --h3:clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --texto-base:1rem;
  --texto-sm:0.75rem;

  /* Layout */
  --contenedor:75rem;          /* 1200px */
  --margen:clamp(1.25rem, 5vw, 4rem);
  --corte:clamp(1.5rem, 3.5vw, 4rem);  /* firma visual CaroCune: corte diagonal */
  --radio-foto:2px;            /* fotos casi rectas, estilo revista (CaroCune) */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-body);
  font-size:var(--texto-base);
  line-height:1.55;
  letter-spacing:.05rem;
  color:var(--texto);
  background:var(--superficie);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;line-height:1.12}
h1{font-size:var(--h1);letter-spacing:-.02em}
h2{font-size:var(--h2);letter-spacing:-.01em}
h3{font-size:var(--h3)}
p{max-width:60ch}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.contenedor{width:100%;max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--margen)}

/* Eyebrow / label — text-sm de Strevora, MAYÚSCULAS con tracking amplio */
.eyebrow{
  font-size:var(--texto-sm);
  font-weight:600;
  letter-spacing:.2rem;
  text-transform:uppercase;
  color:var(--carmin);
  display:inline-block;
  margin-bottom:1.1rem;
}
.sobre-oscuro .eyebrow{color:#e79aad}

/* Botones — forma de Strevora: rectangulares, MAYÚSCULAS, tracking amplio */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-block;
  font-family:var(--font-body);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.125rem;
  text-transform:uppercase;
  padding:1.15rem 2.1rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:color .3s ease, border-color .35s ease;
}
/* Animación del botón — clon del "wipe" diagonal de Strevora (.rt-button-overlay skew) */
.btn::before{
  content:"";position:absolute;top:-1px;bottom:-1px;left:-15%;width:0;z-index:-1;
  background:var(--noche);transform:skewX(-18deg);transform-origin:left center;
  transition:width .45s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before,.btn:focus-visible::before{width:135%}
.btn-solido{background:var(--carmin);color:#fff;border-color:var(--carmin)}
.btn-solido::before{background:var(--carmin-hover)}
.btn-solido:hover{color:#fff;border-color:var(--carmin-hover)}
.btn-outline{background:transparent;color:var(--texto);border-color:currentColor}
.btn-outline::before{background:var(--noche)}
.btn-outline:hover{color:var(--blush)}
.sobre-oscuro .btn-outline,
.btn-outline.sobre-oscuro{color:var(--blush)}
.sobre-oscuro .btn-outline::before,
.btn-outline.sobre-oscuro::before{background:var(--blush)}
.sobre-oscuro .btn-outline:hover,
.btn-outline.sobre-oscuro:hover{color:var(--noche)}

/* Líneas guía que se dibujan al hacer scroll (Strevora imágenes 2 y 3) */
.lineas{position:relative}
.linea-h{display:block;height:1px;background:var(--linea);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.linea-v{display:block;width:1px;background:var(--linea);transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.linea-h.visible{transform:scaleX(1)}
.linea-v.visible{transform:scaleY(1)}
.grid-serv.lineas{gap:0}
.grid-serv.lineas .card{border:none}
.grid-serv.lineas .card:hover{transform:none;box-shadow:none;background:var(--blush)}
@media (prefers-reduced-motion:reduce){.linea-h,.linea-v{transition:none}}
@media (max-width:960px){.linea-v{display:none}}

section{padding-block:clamp(4.5rem,7vw,8rem)}

/* Separador de acento carmín/rosa — firma de marca (de la lámina) */
.separador-acento{margin:0;border:0;height:5px;background:linear-gradient(90deg,var(--carmin) 0 60%,var(--rosa) 60% 100%)}

/* ===== NAVBAR ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:stretch;justify-content:space-between;
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav.scrolled{background:rgb(31 40 71 / .92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 .5rem 1.5rem rgb(0 0 0 / .28)}
.nav-inner{display:flex;align-items:center;gap:2.5rem;padding:1.6rem var(--margen)}
.logo{font-family:var(--font-head);font-size:1.4rem;color:var(--blush);letter-spacing:.02em;white-space:nowrap}
.logo img{display:block;height:2.75rem;width:auto}
.nav-links{display:flex;gap:1.9rem;list-style:none}
.nav-links a{font-size:.72rem;font-weight:600;letter-spacing:.13rem;text-transform:uppercase;color:var(--blush);opacity:.85;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-cta{
  display:flex;align-items:center;padding:0 2.4rem;background:var(--carmin);color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.13rem;text-transform:uppercase;
  transition:background .3s;
}
.nav-cta:hover{background:var(--carmin-hover)}

/* ===== Hamburguesa (menú móvil) ===== */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:6px;width:46px;height:46px;padding:0 11px;background:transparent;border:0;cursor:pointer;z-index:60}
.nav-toggle span{display:block;height:2px;width:24px;background:var(--blush);border-radius:2px;transition:transform .3s,opacity .3s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-links .nav-menu-cta{display:none} /* el CTA sólo aparece dentro del panel móvil */

/* ===== HERO ===== */
.hero{position:relative;background:radial-gradient(125% 125% at 85% -10%,var(--noche-accent),var(--noche) 46%,var(--noche-deep));color:var(--blush);overflow:hidden;padding:0;min-height:100vh;display:flex;flex-direction:column}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 80% 10%, rgb(var(--carmin-rgb)/.28), transparent 60%),
  radial-gradient(90% 70% at 0% 100%, rgb(var(--carmin-rgb)/.14), transparent 55%);
  pointer-events:none}
.hero-grid{flex:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:2rem;position:relative}
.hero-copy{position:relative;z-index:3;padding:7rem 0 4rem var(--margen);max-width:38rem;align-self:start}
.hero-copy h1{color:var(--blush);margin:.2rem 0 1.1rem}
.hero-copy h1 .acento{font-style:italic;color:var(--rosa-suave)}
.hero-tagline{font-family:var(--font-head);font-style:italic;font-size:clamp(1.25rem,1.05rem + 1vw,1.6rem);line-height:1.3;color:var(--rosa-suave);margin-bottom:1.3rem;max-width:34ch}
.hero-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;list-style:none}
.hero-chips li{font-size:.72rem;letter-spacing:.06rem;padding:.5rem .9rem;border-radius:999px;background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .16);color:rgb(255 246 245 / .9)}
.hero-copy .sub{color:rgb(255 246 245 / .78);margin-bottom:2.4rem;max-width:34ch}
.cta-sub{font-size:.75rem;letter-spacing:.09rem;color:rgb(255 246 245 / .6);margin-top:1rem}
.hero-foto{position:relative;z-index:1;align-self:end;justify-self:end;height:100%;display:flex;align-items:flex-end}
.hero-foto img{height:88vh;max-height:860px;width:auto;object-fit:contain;filter:drop-shadow(0 2rem 3rem rgb(0 0 0 / .35))}

/* ===== MARQUEE ===== */
.marquee{background:var(--carmin);color:#fff;padding-block:1.1rem;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;animation:desliza 26s linear infinite}
.marquee span{font-size:.8rem;font-weight:600;letter-spacing:.16rem;text-transform:uppercase;padding-inline:1.6rem}
.marquee span::after{content:"✦";margin-left:3.2rem;opacity:.6}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ===== INTRO ===== */
.intro{background:var(--blush)}
.intro .contenedor{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.intro h2{max-width:26ch}
.intro p{color:var(--texto-suave)}
.pilares{list-style:none;display:flex;flex-direction:column;gap:1.1rem}
.pilares li{display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;color:var(--texto-suave)}
.pilar-emoji{font-size:1.2rem;line-height:1.5;flex-shrink:0}
.pilares b{color:var(--texto);font-weight:600}
.intro .intro-cierre{grid-column:1/-1;margin-top:clamp(2rem,4vw,3rem);margin-inline:auto;max-width:50ch;text-align:center;font-family:var(--font-head);font-style:italic;font-size:clamp(1.15rem,1rem + .9vw,1.45rem);line-height:1.5;color:var(--noche)}

/* ===== SOBRE MÍ (banda oscura con corte diagonal) ===== */
/* El corte diagonal recorta el fondo del propio bloque, así que la cuña que
   queda arriba de la diagonal deja ver lo que hay detrás: el blanco del body.
   Las secciones claras que preceden a los bloques recortados (.intro antes de
   .sobre, .contacto antes de .footer) pintan ese tramo con una sombra sólida
   de su mismo color, para que la diagonal vaya de blush a noche sin que se
   cuele una franja blanca. La sombra se pinta con la sección, o sea por debajo
   del bloque oscuro: sólo queda a la vista donde el clip-path lo recorta. */
.intro,.contacto{box-shadow:0 var(--corte) 0 var(--blush)}
.sobre{background:radial-gradient(120% 130% at 88% -15%,var(--noche-accent),var(--noche) 50%,var(--noche-deep));color:var(--blush);clip-path:polygon(0 var(--corte),100% 0,100% 100%,0 100%);padding-bottom:clamp(1.5rem,2.5vw,2.5rem)}
.sobre .contenedor{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-top:var(--corte)}
.sobre p{color:rgb(255 246 245 / .8)}
.sobre-foto{display:flex;justify-content:center}
.sobre-foto img{width:100%;height:auto;max-height:34rem;object-fit:contain;filter:drop-shadow(0 1.5rem 2.5rem rgb(0 0 0 / .4))}
.stats{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2.5rem}
.stat b{font-family:var(--font-head);font-size:2.4rem;display:block;line-height:1}
.stat span{font-size:.75rem;letter-spacing:.1rem;text-transform:uppercase;color:rgb(255 246 245 / .7)}
.sobre .mision{margin-top:2.2rem;max-width:36ch;font-family:var(--font-head);font-style:italic;font-size:1.2rem;line-height:1.55;color:var(--rosa-suave)}

/* ===== SERVICIOS ===== */
.servicios{background:var(--superficie)}
.sec-head{max-width:34rem;margin-bottom:3.5rem}
.grid-serv{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:start}
.card{border:1px solid var(--linea);padding:2rem 1.75rem;background:var(--superficie);transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 1.5rem 3rem -1.5rem rgb(var(--noche-rgb)/.28);border-color:var(--carmin)}
.card .num{font-family:var(--font-head);font-size:1rem;color:var(--carmin);letter-spacing:.1rem}
.card h3{margin:1.2rem 0 .8rem;font-size:1.35rem}
.card p{font-size:.92rem;color:var(--texto-suave)}

/* Tarjetas de servicio: el contenido es largo, así que se compacta y el pie se ancla abajo */
.card.serv{display:flex;flex-direction:column;padding:1.9rem 1.35rem}
.card.serv h3{margin:.9rem 0 .6rem;font-size:1.12rem;line-height:1.25}
.serv-lead{margin:0 0 1.1rem;font-family:var(--font-head);font-style:italic;font-size:.95rem;line-height:1.4;color:var(--carmin)}
.serv-lista{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.serv-lista li{position:relative;padding-left:1.05rem;font-size:.82rem;line-height:1.45;color:var(--texto-suave)}
.serv-lista li::before{content:"→";position:absolute;left:0;top:0;color:var(--carmin);font-size:.78rem;line-height:1.5}
.serv-grupo{margin:1rem 0 .55rem;font-size:.79rem;font-weight:600;color:var(--texto)}
.serv-ideal{margin:1rem 0 0;font-size:.79rem;line-height:1.45;color:var(--texto-suave)}
.serv-ideal b{color:var(--texto)}
.serv-pie{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:.85rem}
.serv-precio{font-family:var(--font-head);font-size:1.2rem;line-height:1.2;color:var(--noche)}
.card.serv .btn{width:100%;text-align:center;padding:1rem .7rem;font-size:.68rem;letter-spacing:.07rem}

/* ===== ENFOQUE / MÉTRICAS ===== */
.enfoque{background:radial-gradient(120% 130% at 12% -10%,var(--noche-accent),var(--noche) 52%,var(--noche-deep));color:var(--blush)}
.enfoque .sec-head{margin-inline:auto;text-align:center;margin-bottom:3.5rem}
.enfoque h2{color:var(--blush)}
.grid-metricas{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.metrica{padding:2rem 1rem;border:1px solid rgb(255 255 255 / .1)}
.metrica b{font-family:var(--font-head);font-size:clamp(2.2rem,4vw,3rem);display:block;line-height:1;color:var(--blush)}
.metrica span{display:block;margin-top:.8rem;font-size:.78rem;letter-spacing:.08rem;text-transform:uppercase;color:rgb(255 246 245 / .72)}

/* ===== TESTIMONIOS ===== */
/* ===== TESTIMONIOS (carrusel estilo Strevora) ===== */
.testimonios{background:radial-gradient(130% 120% at 50% -20%,var(--noche-accent),var(--noche) 55%,var(--noche-deep));color:var(--blush);position:relative;overflow:hidden}
.testimonios::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%,rgb(var(--carmin-rgb)/.16),transparent 62%);pointer-events:none}
.testimonios .contenedor{position:relative;z-index:1}
.testimonios .sec-head{margin-inline:auto;text-align:center;margin-bottom:2.5rem}
.testimonios h2{color:var(--blush)}
.test-carrusel{max-width:52rem;margin-inline:auto}
.test-avatares{position:relative;height:clamp(150px,17vw,210px);max-width:40rem;margin:0 auto}
.test-avatar{position:absolute;width:104px;height:104px;border-radius:50%;background:var(--blush);border:2px solid transparent;padding:0;cursor:pointer;overflow:hidden;opacity:.45;filter:grayscale(.15);transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,opacity .4s,box-shadow .4s}
.test-avatar img{width:100%;height:100%;object-fit:cover}
.test-avatar:hover{opacity:.8}
.test-avatar:nth-child(1){left:9%;top:44%}
.test-avatar:nth-child(2){left:50%;top:2%;width:128px;height:128px;transform:translateX(-50%)}
.test-avatar:nth-child(3){right:9%;top:44%}
.test-avatar.activo{opacity:1;filter:none;border-color:var(--carmin);box-shadow:0 1rem 2.2rem -.6rem rgb(0 0 0 /.55);transform:scale(1.08)}
.test-avatar:nth-child(2).activo{transform:translateX(-50%) scale(1.08)}
.test-quote{position:relative;text-align:center;max-width:44rem;margin:1.2rem auto 0;min-height:16rem;transition:opacity .28s ease}
.test-quote.cambiando{opacity:0}
.test-quote::before{content:"\201C";display:block;font-family:var(--font-head);font-size:4.5rem;line-height:.6;color:rgb(var(--carmin-rgb)/.85);margin-bottom:.4rem}
.test-slide{display:none}
.test-slide.activo{display:block}
.test-cita{font-family:var(--font-head);font-style:italic;font-size:clamp(1.15rem,1rem + .75vw,1.55rem);line-height:1.6;color:var(--blush);margin-inline:auto}
.test-autor{margin-top:1.8rem;font-family:var(--font-head);font-size:1.4rem;color:var(--blush)}
.test-rubro{margin-top:.35rem;font-size:.72rem;letter-spacing:.14rem;text-transform:uppercase;color:#e79aad;font-weight:600}
.test-dots{display:flex;gap:.6rem;justify-content:center;margin-top:2rem}
.test-dot{width:9px;height:9px;border-radius:50%;background:rgb(255 246 245 /.28);border:0;padding:0;cursor:pointer;transition:background .3s,transform .3s}
.test-dot:hover{background:rgb(255 246 245 /.5)}
.test-dot.activo{background:var(--carmin);transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){.test-quote,.test-avatar{transition:none}}

/* ===== MEDIOS (entrevistas) ===== */
.medios{background:var(--n-100)}
.grid-medios{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.medio{background:var(--superficie);border:1px solid var(--linea);border-radius:1.25rem;padding:1.9rem 1.35rem;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .3s,box-shadow .3s,border-color .3s}
.medio:hover{transform:translateY(-6px);box-shadow:0 1.5rem 3rem -1.5rem rgb(var(--noche-rgb)/.28);border-color:var(--carmin)}
.medio-logo{height:3.6rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.medio-logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.medio h3{font-size:1rem;line-height:1.25;margin-bottom:.6rem}
.medio p{font-size:.78rem;line-height:1.5;color:var(--texto-suave)}
/* Reproductor compacto: el <audio> nativo de Chrome pierde la barra de avance
   al ancho de la tarjeta (~150px), así que los controles son propios. */
.medio-audio{width:100%;margin-top:auto;padding-top:1.4rem;display:flex;align-items:center;gap:.55rem}
.ma-play{flex:none;width:2.1rem;height:2.1rem;border:0;border-radius:50%;padding:0;background:var(--carmin);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.ma-play:hover{background:var(--carmin-hover)}
.ma-play svg{width:.9rem;height:.9rem;fill:currentColor}
.ma-ico-pausa{display:none}
.ma-play.reproduciendo .ma-ico-play{display:none}
.ma-play.reproduciendo .ma-ico-pausa{display:block}
.ma-barra{flex:1;height:.3rem;border-radius:1rem;background:rgb(var(--noche-rgb)/.16);cursor:pointer;position:relative}
.ma-prog{position:absolute;inset:0 auto 0 0;width:0;border-radius:1rem;background:var(--carmin)}
.ma-tiempo{flex:none;font-size:.62rem;font-variant-numeric:tabular-nums;color:var(--texto-suave)}
/* Es un <button> (abre la ventana flotante), así que lleva los reset de botón. */
.medio-link{margin-top:auto;padding:1.4rem 0 .25rem;font-family:inherit;font-size:.68rem;font-weight:600;letter-spacing:.1rem;text-transform:uppercase;color:var(--carmin);background:none;border:0;border-bottom:1px solid rgb(var(--carmin-rgb)/.4);cursor:pointer;transition:border-color .2s}
.medio-link:hover{border-color:var(--carmin)}

/* Ventana flotante de las entrevistas en video */
.video-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(1rem,4vw,2.5rem);background:rgb(var(--noche-rgb)/.86);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.video-modal[hidden]{display:none}
.video-modal.abierto{opacity:1}
.video-caja{width:min(62rem,100%);max-height:100%;display:flex;flex-direction:column;border-radius:1rem;overflow:hidden;background:var(--noche-deep);box-shadow:0 2rem 5rem -1.5rem rgb(0 0 0/.7);transform:translateY(1rem) scale(.97);transition:transform .25s}
.video-modal.abierto .video-caja{transform:none}
.video-barra{flex:none;display:flex;align-items:center;gap:1rem;padding:.55rem .6rem .55rem 1.15rem;background:var(--noche-deep);color:var(--texto-invertido)}
.video-titulo{flex:1;min-width:0;font-size:.75rem;font-weight:600;letter-spacing:.08rem;text-transform:uppercase;color:var(--blush);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-fuente{flex:none;font-size:.68rem;font-weight:600;letter-spacing:.08rem;text-transform:uppercase;color:var(--rosa);border-bottom:1px solid rgb(231 154 173/.4);transition:color .2s,border-color .2s}
.video-fuente:hover{color:var(--blush);border-color:var(--blush)}
.video-cerrar{flex:none;width:1.9rem;height:1.9rem;padding:0;border:0;border-radius:50%;background:none;color:var(--blush);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.video-cerrar:hover{background:var(--carmin);color:#fff}
.video-cerrar svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* flex-shrink deja que el video se achate en pantallas bajas (barras negras, no recorte) */
.video-marco{flex:0 1 auto;min-height:0;width:100%;aspect-ratio:16/9;background:#000}
.video-marco iframe{display:block;width:100%;height:100%;border:0}

/* ===== CONTACTO ===== */
.contacto{background:var(--blush)}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:stretch}
.contacto-info h2{margin:.2rem 0 1.1rem}
.contacto-info>p{color:var(--texto-suave);max-width:42ch;margin-bottom:2.4rem}
/* Formulario estilo Strevora: inputs de línea, sin cajas */
.form-contacto{display:flex;flex-direction:column;gap:1.5rem}
.form-contacto input,.form-contacto textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--texto);background:transparent;border:none;border-bottom:1px solid var(--n-300);padding:.7rem 0;transition:border-color .3s;resize:vertical}
.form-contacto input::placeholder,.form-contacto textarea::placeholder{color:var(--n-500)}
.form-contacto input:focus,.form-contacto textarea:focus{outline:none;border-bottom-color:var(--carmin)}
.form-contacto .btn{align-self:flex-start;margin-top:.6rem}
.contacto-directo{font-size:.85rem;color:var(--texto-suave);margin-top:1.6rem}
.contacto-directo a{color:var(--noche);font-weight:500;border-bottom:1px solid var(--carmin);padding-bottom:1px}
.contacto-directo a:hover{color:var(--carmin)}
/* Foto grande con caption superpuesto */
.contacto-foto{position:relative;border-radius:1.25rem;overflow:hidden;min-height:34rem}
.contacto-foto img{width:100%;height:100%;object-fit:cover;object-position:58% center;display:block}
.contacto-foto-cap{position:absolute;left:0;right:0;bottom:0;padding:3rem 2rem 2rem;color:#fff;font-size:1.05rem;line-height:1.45;text-align:center;background:linear-gradient(transparent,rgb(var(--noche-rgb)/.82))}

/* ===== FOOTER ===== */
.footer{background:radial-gradient(120% 120% at 85% -10%,var(--noche-accent),var(--noche) 48%,var(--noche-deep));color:var(--blush);clip-path:polygon(0 var(--corte),100% 0,100% 100%,0 100%);padding-top:calc(var(--corte) + 4rem)}
.footer-cta{max-width:22ch;font-size:clamp(2rem,4vw,3rem);color:var(--blush);margin-bottom:1.2rem}
.footer .lead{color:rgb(255 246 245 / .78);max-width:46ch;margin-bottom:3.5rem}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;padding-block:3rem;border-top:1px solid rgb(255 255 255 / .12)}
.footer-cols h4{font-family:var(--font-body);font-size:.72rem;letter-spacing:.14rem;text-transform:uppercase;color:#e79aad;margin-bottom:1.2rem;font-weight:600}
.footer-cols ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.footer-cols a{font-size:.9rem;color:rgb(255 246 245 / .82)}
.footer-cols a:hover{color:var(--blush)}
.footer-brand{font-family:var(--font-head);font-size:1.6rem}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:2rem;font-size:.78rem;color:rgb(255 246 245 / .6);border-top:1px solid rgb(255 255 255 / .12)}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer-bottom a{color:rgb(255 246 245 / .6);border-bottom:1px solid rgb(var(--carmin-rgb)/.55);padding-bottom:1px;transition:color .2s,border-color .2s}
.footer-bottom a:hover{color:var(--blush);border-color:var(--carmin)}

/* ===== RESPONSIVE ===== */
@media (max-width:960px){
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .nav{background:rgb(31 40 71 / .92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .nav-inner{flex:1;justify-content:space-between;gap:1rem}
  .nav-links{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:0;padding:6rem var(--margen) 2.5rem;background:var(--noche);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility .35s}
  .nav.open .nav-links{transform:translateX(0);visibility:visible}
  .nav-links a{display:block;padding:1.15rem 0;font-size:1rem;opacity:1;border-bottom:1px solid rgb(255 255 255 / .12)}
  .nav-links .nav-menu-cta{display:block;margin-top:1.6rem}
  .nav-links .nav-menu-cta a{border-bottom:0;background:var(--carmin);color:#fff;text-align:center;text-transform:uppercase;letter-spacing:.13rem;font-weight:600;font-size:.8rem;padding:1.1rem 2rem}
  .grid-serv{grid-template-columns:repeat(2,1fr)}
  .grid-metricas,.grid-test{grid-template-columns:1fr}
  .grid-medios{grid-template-columns:repeat(2,1fr)}
  .test-avatares{position:static;height:auto;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
  .test-avatar,.test-avatar:nth-child(1),.test-avatar:nth-child(2),.test-avatar:nth-child(3){position:static;transform:none;width:76px;height:76px;left:auto;right:auto;top:auto}
  .test-avatar.activo,.test-avatar:nth-child(2).activo{transform:scale(1.08)}
  .test-quote{min-height:0}
  .intro .contenedor,.sobre .contenedor,.contacto .contenedor{grid-template-columns:1fr}
  .contacto-foto{min-height:20rem;order:-1}
  .hero-grid{grid-template-columns:1fr}
  .hero-foto{justify-self:center}
  .hero-foto img{height:auto;max-height:60vh}
  .hero-copy{padding-top:7rem}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid-serv,.grid-medios{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
}

/* ===== Notebooks: pantallas anchas pero de poca altura (evita que el copy se corte) ===== */
@media (min-width:961px) and (max-height:880px){
  .hero{min-height:100svh}
  .hero-copy{padding-top:5.5rem;padding-bottom:2rem}
  .hero-copy h1{margin:.15rem 0 1rem}
  .hero-tagline{font-size:clamp(1.05rem,1rem + .6vw,1.3rem);margin-bottom:1rem}
  .hero-copy .sub{margin-bottom:1.35rem}
  .cta-sub{margin-top:.6rem}
  .hero-chips{margin-top:1.15rem}
  .hero-foto img{max-height:82vh}
}

/* ===== PÁGINAS LEGALES (términos, privacidad) ===== */
.legal-hero{background:var(--noche);color:var(--blush);text-align:center;position:relative;overflow:hidden;padding-block:clamp(3.5rem,7vw,6rem) clamp(2rem,4vw,3rem)}
.legal-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgb(var(--carmin-rgb)/.22),transparent 62%);pointer-events:none}
.legal-hero .contenedor{position:relative;z-index:1;max-width:52rem}
.legal-hero h1{color:var(--blush);margin:.4rem 0 0}
.legal-hero .actualizado{display:inline-block;margin-top:1rem;font-size:.72rem;letter-spacing:.13rem;text-transform:uppercase;color:rgb(255 246 245 / .7)}
.legal{background:var(--blush);padding-block:clamp(3rem,6vw,5rem)}
.legal .contenedor{max-width:50rem}
.legal h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);margin:2.6rem 0 .9rem}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{color:var(--texto-suave);line-height:1.75}
.legal p{margin-bottom:1rem}
.legal ul{list-style:disc;padding-left:1.35rem;margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.legal a{color:var(--noche);font-weight:500;border-bottom:1px solid var(--carmin);padding-bottom:1px}
.legal a:hover{color:var(--carmin)}
.legal .volver{display:inline-block;margin-top:2.8rem;font-size:.72rem;letter-spacing:.13rem;text-transform:uppercase;color:var(--carmin);border:0}