/* El sistema del rediseño de lujo (2026-10-15, aprobado por Mafer): el "cuaderno de ruta".
   Crema como tierra, el verde azulado profundo de Impulso como mar, aguamarina solo en
   detalles. Figtree para todo (fina en los titulares grandes); Caprasimo ya no va en la
   página. Una sola ilustración con sentido por página, el resto es tipografía y espacio.
   Lo comparten todas las páginas: el menú (.menu), el pie (.pie), los botones y la letra. */

:root{
  --mar:#0A3F45; --mar-2:#072E33; --agua:#0ABCC6; --agua-t:#056B75; --purp:#7354A0; --lila:#A68BD0;
  --negro:#0D0D0D; --gris:#2E2E2E; --crema:#F2EDE4; --crema-2:#FAF8F3;
  --tinta:rgba(242,237,228,.74); --linea:rgba(46,46,46,.14); --linea-mar:rgba(242,237,228,.16);
  --sans:"Figtree",system-ui,sans-serif; --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,88px); --ancho:1320px;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scrollbar-color:var(--mar) var(--crema);accent-color:var(--agua)}
body{margin:0;background:var(--crema);color:var(--gris);font:400 18px/1.7 var(--sans)}
::selection{background:rgba(10,188,198,.3);color:var(--negro)}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:1.5px solid var(--agua);outline-offset:4px}
/* hidden gana siempre: dfp-impulso.js y la lista de espera dependen de esto */
[hidden]{display:none!important}

.envoltura{max-width:var(--ancho);margin:0 auto;padding-inline:var(--gut)}
.nota{font:500 11.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.grande{margin:0;font:300 clamp(40px,5.4vw,84px)/1.03 var(--sans);letter-spacing:-.035em;color:var(--negro);text-wrap:balance}
.media{margin:0;font:300 clamp(30px,3.4vw,52px)/1.08 var(--sans);letter-spacing:-.03em;color:var(--negro);text-wrap:balance}
.chica{margin:0;font:500 clamp(20px,1.7vw,24px)/1.25 var(--sans);letter-spacing:-.01em;color:var(--negro)}
.parrafo{margin:0;max-width:58ch;text-wrap:pretty}
.parrafo + .parrafo{margin-top:1.1em}

.boton{display:inline-flex;align-items:center;gap:14px;min-height:44px;font:600 16px/1 var(--sans);text-decoration:none;padding:14px 0;border-bottom:1px solid currentColor;cursor:pointer}
.boton::after{content:"";width:26px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.boton:hover::after{width:44px}
.boton--lleno,.boton--crema,.boton--mar{padding:16px 26px;border:0;border-radius:999px}
.boton--lleno{background:var(--agua);color:var(--negro)}
.boton--crema{background:var(--crema);color:var(--negro)}
.boton--mar{background:var(--mar-2);color:var(--crema)}

.mar{background:var(--mar-2);color:var(--tinta)}
.mar :is(.grande,.media,.chica){color:var(--crema)}
.mar .nota{color:var(--agua)}

/* Logo de Impulso: la parte negra toma el color del texto; el infinito queda aguamarina */
.logo-imp{display:inline-block;height:1em;width:3.5em;vertical-align:-0.18em;overflow:visible}

/* ---------- Menú ---------- */
.menu{position:fixed;inset:0 0 auto;z-index:50;color:var(--negro);background:rgba(242,237,228,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linea);
  transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
/* En Inicio arranca transparente sobre el video; el script de la página lo vuelve sólido */
.menu.sobre-video{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--crema)}
.menu.sobre-mar{background:rgba(7,46,51,.9);color:var(--crema);box-shadow:0 1px 0 var(--linea-mar)}
.menu-in{display:flex;align-items:center;gap:28px;padding:18px var(--gut);max-width:1600px;margin:0 auto}
.menu-marca img{display:block;height:30px;width:auto}
.menu-links{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.menu-links a{font:500 14px/1 var(--sans);letter-spacing:.02em;text-decoration:none;opacity:.86;padding:15px 0;white-space:nowrap}
.menu-links a:hover,.menu-links a[aria-current="page"]{opacity:1}
.menu-links a[aria-current="page"]{box-shadow:inset 0 -1px 0 currentColor}
.menu-imp .logo-imp{height:17px;width:60px;vertical-align:-3px}
.menu-links .cta{display:inline-flex;align-items:center;gap:10px;opacity:1;font-weight:600;padding:12px 20px;border:1px solid currentColor;border-radius:999px}
.menu-links .cta .logo-imp{height:15px;width:53px;vertical-align:0}
.menu-toggle{position:absolute;opacity:0;pointer-events:none}
.menu-burger{display:none}
@media (max-width:1000px){
  .menu-burger{display:flex;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
  .menu-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--crema-2);color:var(--negro);max-height:0;overflow:hidden;padding:0 var(--gut);visibility:hidden}
  .menu-toggle:checked ~ .menu-links{max-height:85vh;overflow:auto;padding:10px var(--gut) 22px;box-shadow:0 20px 30px -20px rgba(13,13,13,.4);visibility:visible}
  .menu-toggle:focus-visible ~ .menu-burger{outline:1.5px solid var(--agua);outline-offset:2px}
  .menu-links a{padding:15px 0;font-size:17px;border-bottom:1px solid var(--linea)}
  .menu-links a[aria-current="page"]{box-shadow:none;color:var(--agua-t)}
  .menu-imp .logo-imp{height:20px;width:70px}
  .menu-links .cta{margin-top:14px;justify-content:center;background:var(--mar-2);color:var(--crema);border:0}
}

/* ---------- Pie ---------- */
.pie{background:var(--mar-2);color:var(--tinta);border-top:1px solid var(--linea-mar);padding:clamp(64px,7vw,96px) 0 34px;font-size:15.5px}
.pie-grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pie a{text-decoration:none;color:var(--crema)}
.pie a:hover{color:var(--agua)}
.pie .nota{display:block;margin-bottom:16px;color:rgba(242,237,228,.5)}
.pie-lista{display:grid;gap:0}
.pie-lista a{padding:11px 0;line-height:1.2}
.pie-marca{margin:18px 0 6px;font:500 19px/1.2 var(--sans);color:var(--crema)}
.pie-lema{margin:0;color:var(--agua)}
.pie-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--linea-mar);font-size:13.5px;color:rgba(242,237,228,.58)}

/* Primera sección de una página interior: deja sitio al menú fijo */
.tope{padding-top:clamp(140px,14vw,200px)}

@media (prefers-reduced-motion:reduce){.boton::after{transition:none}.menu{transition:none}}