/* ================================================================
   inlife.mx · styles.css · v0.4
   Brand Guidelines v0.3 + motion premium
   Mobile-first · Vanilla CSS · Sin framework
   ================================================================ */

/* ── TOKENS v0.3 ── */
:root {
  --inlife-white:     #FFFFFF;
  --inlife-skywash:   #F2F8FD;
  --inlife-softline:  #DCE9F2;
  --inlife-angel:     #B4D8F2;
  --inlife-waterfall: #74C2EC;
  --inlife-signal:    #1F9BE0;
  --inlife-blue:      #1E7FD4;
  --inlife-assurance: #2E6FB5;
  --inlife-navy:      #0A2350;
  --inlife-navy-mid:  #0E2D5E;
  --inlife-slate:     #5D6675;
  --sys-alert:        #D14343;

  --f-display: "Satoshi","Manrope",system-ui,-apple-system,sans-serif;
  --f-body:    "Inter",system-ui,-apple-system,sans-serif;
  --f-mono:    "JetBrains Mono",ui-monospace,"Courier New",monospace;

  --ease:       cubic-bezier(.16,1,.3,1);
  --ease-in:    cubic-bezier(.4,0,1,1);
  --ease-out:   cubic-bezier(0,0,.2,1);
  --t:          200ms;
  --t-slow:     380ms;

  --max-w:   1180px;
  --px:      20px;
  --r:       14px;
  --r-sm:    8px;
  --r-pill:  9999px;

  --sh-xs: 0 1px 2px rgba(10,35,80,.04), 0 1px 4px rgba(10,35,80,.04);
  --sh-sm: 0 1px 3px rgba(10,35,80,.05), 0 3px 10px rgba(10,35,80,.06);
  --sh-md: 0 2px 4px rgba(10,35,80,.04), 0 10px 28px rgba(10,35,80,.10);
  --sh-lg: 0 4px 8px rgba(10,35,80,.05), 0 20px 48px rgba(10,35,80,.14);
  --sh-xl: 0 8px 16px rgba(10,35,80,.07), 0 32px 64px rgba(10,35,80,.18);

  --hd-h: 64px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  color:var(--inlife-navy);
  background:var(--inlife-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--inlife-navy);line-height:1.1;letter-spacing:-.025em;font-weight:700}
:focus-visible{outline:3px solid var(--inlife-signal);outline-offset:3px;border-radius:var(--r-sm)}

/* ── CONTAINER ── */
.wrap{width:100%;max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:var(--px);padding-right:var(--px)}

/* ── UTILITIES ── */
.eyebrow{
  display:block;font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--inlife-blue);margin-bottom:10px;
}
.eyebrow--light{color:var(--inlife-waterfall)}

.pill{
  display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--inlife-blue);border:1px solid var(--inlife-softline);border-radius:var(--r-pill);
  padding:6px 16px;
}
.pill--ghost{background:rgba(255,255,255,.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ── ARROW LINKS ── */
.arrow-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--inlife-blue);
  transition:gap var(--t) var(--ease),color var(--t);
}
.arrow-link:hover{gap:10px;color:var(--inlife-assurance)}
.arrow-link__icon{flex-shrink:0;transition:transform var(--t) var(--ease)}
.arrow-link:hover .arrow-link__icon{transform:translateX(3px)}

/* ── UNDERLINE ANIMATED ── */
.ul-link{
  position:relative;display:inline-block;
}
.ul-link::after{
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:1.5px;
  background:currentColor;transition:width var(--t-slow) var(--ease);
}
.ul-link:hover::after{width:100%}

/* ================================================================
   BUTTONS — 44px min touch target
   ================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;font-family:var(--f-display);font-size:15px;font-weight:600;line-height:1.2;
  padding:11px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  -webkit-user-select:none;user-select:none;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),
             color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{font-size:16px;padding:13px 28px}
.btn--sm{font-size:14px;padding:9px 18px;min-height:38px}
.btn--full{width:100%}

.btn__arrow{flex-shrink:0;transition:transform var(--t) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

.btn--blue{
  background:var(--inlife-blue);color:#fff;border-color:var(--inlife-blue);
  box-shadow:0 2px 10px rgba(30,127,212,.24);
}
.btn--blue:hover{background:var(--inlife-assurance);border-color:var(--inlife-assurance);box-shadow:0 4px 18px rgba(30,127,212,.36)}

.btn--outline{background:transparent;color:var(--inlife-blue);border-color:var(--inlife-blue)}
.btn--outline:hover{background:var(--inlife-skywash)}

.btn--white{background:#fff;color:var(--inlife-navy);border-color:#fff}
.btn--white:hover{background:var(--inlife-skywash)}

.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}

/* ================================================================
   HEADER
   ================================================================ */
.hd{
  position:sticky;top:0;left:0;right:0;z-index:100;height:var(--hd-h);
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--inlife-softline);
  transition:box-shadow var(--t) var(--ease);
}
.hd--scrolled{box-shadow:0 2px 0 var(--inlife-softline),0 4px 24px rgba(10,35,80,.09)}

.hd__bar{
  display:flex;flex-direction:row;align-items:center;
  height:var(--hd-h);gap:16px;justify-content:space-between;
}

/* Wordmark */
.wm{font-family:var(--f-display);font-weight:900;font-size:21px;letter-spacing:-.04em;color:var(--inlife-navy);line-height:1;flex-shrink:0;display:inline-block}
.wm__dot{color:var(--inlife-signal)}

/* Nav desktop */
.hd__nav{display:none;flex-direction:row;align-items:center;gap:2px;flex:1;justify-content:center}
.hd__link{
  display:inline-flex;align-items:center;font-size:14px;font-weight:500;color:var(--inlife-navy);
  padding:7px 13px;border-radius:var(--r-sm);opacity:.75;min-height:36px;
  transition:opacity var(--t),color var(--t),background-color var(--t);
  position:relative;
}
.hd__link::after{
  content:'';position:absolute;bottom:4px;left:13px;right:13px;height:1.5px;
  background:var(--inlife-blue);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease);border-radius:2px;
}
.hd__link:hover,.hd__link.active{opacity:1;color:var(--inlife-blue);background-color:var(--inlife-skywash)}
.hd__link.active::after,.hd__link:hover::after{transform:scaleX(1)}

.hd__cta{display:none;flex-shrink:0}

/* Burger */
.hd__burger{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:44px;height:44px;padding:8px;border-radius:var(--r-sm);flex-shrink:0;
  transition:background-color var(--t);
}
.hd__burger:hover{background-color:var(--inlife-skywash)}
.hd__burger span{
  display:block;width:100%;height:2px;background:var(--inlife-navy);border-radius:2px;
  transform-origin:center;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}
.hd__burger span:nth-child(2){width:70%}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.hd__mobile{
  position:absolute;top:var(--hd-h);left:0;right:0;z-index:99;
  background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--inlife-softline);padding:8px 20px 20px;
  box-shadow:0 8px 32px rgba(10,35,80,.12);
}
.hd__mobile[hidden]{display:none !important}
.hd__mlink{
  display:block;font-size:17px;font-weight:500;color:var(--inlife-navy);
  padding:14px 0;border-bottom:1px solid var(--inlife-softline);transition:color var(--t);
}
.hd__mlink:last-of-type{border-bottom:none}
.hd__mlink:hover{color:var(--inlife-blue)}
.hd__mcta{display:flex;flex-direction:column;gap:10px;padding-top:16px}

/* ================================================================
   HERO — video bg cinematográfico, headline estático
   ================================================================ */
.hero{
  position:relative;
  padding-top:72px;
  padding-bottom:88px;
  /* Fallback gradient cuando el video/poster no carga */
  background:linear-gradient(155deg,#f2f8fd 0%,#e4f1fa 50%,#d6eaf5 100%);
  overflow:hidden;
  min-height:calc(100svh - var(--hd-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ── Video background ── */
.hero__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  /* Fondo navy mientras el video/poster carga */
  background:var(--inlife-navy);
}

.hero__bg-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* center right: sujeto del video queda en zona derecha, texto en zona izquierda */
  object-position:center right;
  opacity:0;
  transition:opacity 1.1s ease;
}
/* JS agrega .is-playing cuando el video puede reproducirse */
.hero__bg-video.is-playing{ opacity:1; }

/* ── Capa de imagen final ──
   Posicionada sobre el video, debajo del overlay.
   Empieza invisible. Se hace visible con .hero-video-ended en #hero-bg.
   Uso:
     1. Al terminar el video (ended): transición suave al último frame/imagen.
     2. prefers-reduced-motion: se activa directamente, sin video.
   object-position alineado con el video (center right).
*/
.hero__bg-final{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .8s ease;
}
/* Activar imagen final cuando el video termina o en reduced-motion */
.hero-video-ended .hero__bg-final{
  opacity:1;
}

/* ── Overlay de composición ──
   Desktop (≥860px):
     Panel izquierdo blanco/skywash sólido donde vive el texto.
     Panel derecho transparente para que el video sea visible.
     Gradiente de profundidad inferior.
   Mobile (<860px):
     Overlay blanco uniforme — texto primero, performance primero.
     El poster se ve como imagen de apoyo.
*/
.hero__bg-overlay{
  position:absolute;inset:0;
  /* Mobile default: overlay sólido, contraste perfecto */
  background:rgba(242,248,253,.93);
}

@media(min-width:860px){
  .hero__bg-overlay{
    background:
      /* Panel izquierdo sólido para el copy */
      linear-gradient(
        to right,
        rgba(255,255,255,.97)  0%,
        rgba(255,255,255,.97) 44%,
        rgba(255,255,255,.55) 58%,
        rgba(255,255,255,.0)  72%
      ),
      /* Vignette inferior para profundidad */
      linear-gradient(
        to top,
        rgba(10,35,80,.22) 0%,
        rgba(10,35,80,.0)  36%
      ),
      /* Tint azul muy suave sobre el video */
      rgba(10,35,80,.06);
  }
}

/* ── Layout interior ── */
.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:48px;align-items:center;
}

.hero__copy{display:flex;flex-direction:column;align-items:flex-start}
.hero__copy .pill{margin-bottom:20px}

/* ── Headline estático ── */
.hero__h1{
  font-size:clamp(42px,8vw,88px);
  font-weight:900;line-height:1.0;
  color:var(--inlife-blue);letter-spacing:-.035em;
  margin-bottom:0;
}

/* ── Subtítulo, CTAs, nota ── */
.hero__sub{
  font-size:clamp(16px,1.7vw,19px);
  font-weight:400;line-height:1.7;
  color:#3a4d70;
  max-width:42ch;
  margin-top:20px;margin-bottom:28px;
}
.hero__ctas{
  display:flex;flex-direction:row;flex-wrap:wrap;
  gap:12px;margin-bottom:18px;
}
.hero__note{
  font-size:12.5px;line-height:1.65;
  color:var(--inlife-slate);max-width:50ch;
}

/* ── Animación de entrada del hero copy (CSS pura, sin JS) ── */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}
.hero__copy .pill{
  animation:heroFadeUp .55s var(--ease) .1s both;
}
.hero__sub{
  animation:heroFadeUp .65s var(--ease) .36s both;
}
.hero__ctas{
  animation:heroFadeUp .65s var(--ease) .48s both;
}
.hero__note{
  animation:heroFadeUp .65s var(--ease) .56s both;
}
.hero__card{
  animation:heroFadeUp .75s var(--ease) .30s both;
}

/* ── Expediente card ── */
.hero__card{display:flex;justify-content:flex-start}
.xcard{
  background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r);
  box-shadow:var(--sh-xl);padding:22px 24px 24px;width:100%;max-width:400px;
}

.xcard__head{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:8px;flex-wrap:wrap;margin-bottom:14px;
}
.xcard__id{font-family:var(--f-mono);font-size:11px;color:var(--inlife-slate);letter-spacing:.06em}

.xbadge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(30,127,212,.10);color:var(--inlife-blue);
}
.xbadge__dot{
  display:block;width:7px;height:7px;border-radius:50%;background:var(--inlife-signal);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.xcard__track{margin-bottom:14px;line-height:0;overflow:hidden}
.xcard__track svg{display:block;width:100%;height:10px}

.xcard__rows{display:flex;flex-direction:column;gap:7px}
.xrow{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:8px;padding:9px 13px;border-radius:10px;font-size:13.5px;
  transition:background-color var(--t);
}
.xrow--done{background:var(--inlife-skywash)}
.xrow--active{
  background:rgba(31,155,224,.07);
  border:1px solid rgba(31,155,224,.18);
}
.xrow--pending{background:rgba(10,35,80,.04)}
.xrow__label{font-weight:500;color:var(--inlife-navy);white-space:nowrap}
.xrow__st{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;color:var(--inlife-slate);white-space:nowrap;
}
.xrow__st--muted{font-family:var(--f-mono);font-size:11px;opacity:.55}

/* Dots */
.xdot{display:block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.xdot--navy{background:var(--inlife-navy)}
.xdot--signal{background:var(--inlife-signal)}
.xdot--alert{background:var(--sys-alert)}
.xdot--ping{
  position:relative;
  box-shadow:0 0 0 3px rgba(31,155,224,.22);
  animation:ping 2s ease-in-out infinite;
}
@keyframes ping{
  0%,100%{box-shadow:0 0 0 3px rgba(31,155,224,.22)}
  50%{box-shadow:0 0 0 6px rgba(31,155,224,.08)}
}

/* ================================================================
   SECTIONS
   ================================================================ */
.sec{padding-top:80px;padding-bottom:80px;border-top:1px solid var(--inlife-softline)}
.sec--sky{background:var(--inlife-skywash)}
.sec--navy{background:var(--inlife-navy);border-top:none;color:#dbe6f6}
.sec--cta{background:var(--inlife-navy);border-top:none}

.sec__head{margin-bottom:40px;max-width:64ch}
.sec__head h2{font-size:clamp(24px,4.5vw,36px);font-weight:700;margin-bottom:12px;color:var(--inlife-navy)}
.sec__head p{font-size:16px;line-height:1.7;color:var(--inlife-slate)}
.sec--navy .sec__head h2{color:#fff}
.sec--navy .sec__head p{color:#aebfd8}

/* ================================================================
   FEATURE CARDS — Personas / Empresas / Programas
   ================================================================ */
.fcards{display:grid;grid-template-columns:1fr;gap:20px}

.fcard{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s;
}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--sh-xl);border-color:var(--inlife-angel)}
.fcard--feature{border-color:var(--inlife-angel)}

/* Media slot */
.fcard__media{
  position:relative;
  aspect-ratio:16/7;
  overflow:hidden;
  background:var(--inlife-skywash);
}
.fcard__media-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .5s var(--ease);
}
.fcard:hover .fcard__media-bg{transform:scale(1.04)}

/* Fallbacks por línea cuando no hay poster */
.fcard__media-bg--ind{background-color:#e8f0fb}
.fcard__media-bg--emp{background-color:#e4eff8}
.fcard__media-bg--mas{background-color:#e0edf7}

.fcard__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .6s ease;
}
.fcard__video.is-playing{opacity:1}

.fcard__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--inlife-navy);background:rgba(255,255,255,.9);border:1px solid var(--inlife-softline);
  border-radius:var(--r-pill);padding:4px 10px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

.fcard__body{display:flex;flex-direction:column;flex:1;padding:24px 26px 28px}
.fcard__body h3{font-size:19px;font-weight:700;margin-bottom:8px;color:var(--inlife-navy)}
.fcard__body > p{font-size:14.5px;color:var(--inlife-slate);line-height:1.65;margin-bottom:14px}

.fcard__list{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;flex:1}
.fcard__list li{
  position:relative;font-size:13.5px;color:var(--inlife-slate);padding-left:14px;line-height:1.5;
}
.fcard__list li::before{
  content:'';position:absolute;left:0;top:.58em;width:5px;height:1.5px;
  background:var(--inlife-blue);border-radius:2px;
}

.fcard__link{margin-top:auto}

/* ================================================================
   CÓMO FUNCIONA — Timeline sticky
   ================================================================ */

/* Mobile: lista vertical simple */
.tl-nav{display:none}

.tl-panels{}
.tl-panel{
  padding:28px 0;
  border-bottom:1px solid var(--inlife-softline);
}
.tl-panel:last-child{border-bottom:none}

.tl-panel__inner{display:flex;flex-direction:row;gap:20px;align-items:flex-start}
.tl-panel__num{
  flex-shrink:0;
  width:40px;height:40px;border-radius:50%;
  background:var(--inlife-navy);color:#fff;
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
}
.tl-panel__body{flex:1}
.tl-panel__body h3{font-size:18px;font-weight:700;margin-bottom:7px;color:var(--inlife-navy)}
.tl-panel__body > p{font-size:15px;color:var(--inlife-slate);line-height:1.7;margin-bottom:14px}

.tl-panel__points{display:flex;flex-direction:column;gap:6px}
.tl-panel__points li{
  position:relative;font-size:14px;color:var(--inlife-slate);padding-left:16px;line-height:1.5;
}
.tl-panel__points li::before{
  content:'→';position:absolute;left:0;font-size:12px;color:var(--inlife-blue);line-height:1.5;
}

.como__note{
  margin-top:36px;font-size:14px;color:var(--inlife-slate);line-height:1.7;
  border-left:3px solid var(--inlife-softline);padding-left:16px;max-width:60ch;
}

/* ── Desktop: sticky nav + scrolling panels ── */
@media(min-width:860px){
  .tl-layout{
    display:grid;grid-template-columns:220px 1fr;gap:64px;
    align-items:start;
  }

  .tl-nav{
    display:flex;flex-direction:column;gap:4px;
    position:sticky;top:calc(var(--hd-h) + 24px);
  }

  .tl-nav__item{
    display:flex;flex-direction:row;align-items:center;gap:12px;
    padding:12px 14px;border-radius:var(--r-sm);
    text-align:left;cursor:pointer;
    transition:background-color var(--t),color var(--t);
    border:1.5px solid transparent;
    background:none;
  }
  .tl-nav__item:hover{background:var(--inlife-skywash);color:var(--inlife-blue)}
  .tl-nav__item--active{
    background:var(--inlife-skywash);
    border-color:var(--inlife-softline);
    color:var(--inlife-blue);
  }
  .tl-nav__item--active .tl-nav__num{background:var(--inlife-blue);color:#fff}

  .tl-nav__num{
    flex-shrink:0;width:28px;height:28px;border-radius:50%;
    background:var(--inlife-softline);color:var(--inlife-slate);
    font-family:var(--f-mono);font-size:11px;font-weight:500;
    display:flex;align-items:center;justify-content:center;
    transition:background-color var(--t),color var(--t);
  }
  .tl-nav__label{font-size:14px;font-weight:500}

  .tl-nav__note{
    margin-top:16px;padding-top:16px;border-top:1px solid var(--inlife-softline);
    font-size:12.5px;line-height:1.65;color:var(--inlife-slate);
  }

  .tl-panel{
    padding:32px 0;
    opacity:.55;transform:translateX(8px);
    transition:opacity .4s var(--ease),transform .4s var(--ease);
  }
  .tl-panel.is-active{opacity:1;transform:translateX(0)}
  .tl-panel:last-child{min-height:240px}

  .tl-panel__num{width:44px;height:44px;font-size:13px}
  .tl-panel__body h3{font-size:20px}
}

/* ================================================================
   INLIFE OS — mockup visual
   ================================================================ */
.os-layout{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}

.os__h2{color:#fff;font-size:clamp(22px,4.5vw,34px);font-weight:700;margin-bottom:12px}
.os__lead{font-size:16px;line-height:1.72;color:#aebfd8;margin-bottom:24px;max-width:50ch}

.os__list{display:flex;flex-direction:column;gap:12px}
.os__list li{display:flex;flex-direction:row;align-items:flex-start;gap:12px;font-size:15px;color:#cdddf2;line-height:1.6}
.os__list strong{color:#fff;font-weight:600}
.ostick{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:22px;height:22px;border-radius:50%;background:rgba(31,155,224,.15);margin-top:1px;
}
.ostick::after{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--inlife-signal)}

/* OS Mockup window */
.os-mockup{}
.os-window{
  background:#0d1f3e;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.4);
}
.os-window__bar{
  display:flex;flex-direction:row;align-items:center;gap:8px;
  padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);
}
.os-window__dot{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;
}
.os-window__dot--r{background:#ff5f57}
.os-window__dot--y{background:#febc2e}
.os-window__dot--g{background:#28c840}
.os-window__title{
  font-family:var(--f-mono);font-size:11px;color:rgba(255,255,255,.45);
  margin-left:8px;letter-spacing:.04em;
}

.os-window__body{padding:20px 18px 18px}

/* Metrics strip */
.os-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;
}
.os-metric{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:13px 14px;
}
.os-metric__val{
  display:block;font-family:var(--f-display);font-size:clamp(18px,2.5vw,24px);font-weight:700;
  color:#fff;line-height:1;margin-bottom:4px;
}
.os-metric__lbl{font-family:var(--f-mono);font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.06em}

/* Cases table */
.os-cases{display:flex;flex-direction:column;gap:0}
.os-cases__hdr{
  display:grid;grid-template-columns:1fr 110px 80px;gap:8px;padding:8px 10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.os-case{
  display:grid;grid-template-columns:1fr 110px 80px;gap:8px;align-items:center;
  padding:10px 10px;border-top:1px solid rgba(255,255,255,.06);
  font-size:13.5px;
}
.os-case:first-of-type{border-top:none}
.os-case__name{color:#fff;font-weight:500}
.os-case__status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;
}
.os-case__status--active{color:var(--inlife-waterfall)}
.os-case__status--done{color:rgba(255,255,255,.5)}
.os-case__status--pending{color:rgba(255,255,255,.45);font-size:12px}
.os-case__status--alert{color:#f8a84c}
.os-case__type{font-family:var(--f-mono);font-size:11px;color:rgba(255,255,255,.3)}

/* ================================================================
   CASOS EN DESARROLLO
   ================================================================ */
.casos{display:grid;grid-template-columns:1fr;gap:16px}
.caso{
  background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--sh-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .2s;
}
.caso:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--inlife-angel)}
.caso__badge{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--inlife-slate);background:var(--inlife-skywash);border:1px solid var(--inlife-softline);
  border-radius:var(--r-pill);padding:5px 12px;
}
.caso__badge i{display:block;width:7px;height:7px;border-radius:50%;background:var(--inlife-waterfall)}
.caso h3{font-size:17px;font-weight:700;margin-bottom:7px}
.caso p{font-size:14px;color:var(--inlife-slate);line-height:1.65}

/* ================================================================
   POR QUÉ DIFERENTE
   ================================================================ */
.difgrid{display:grid;grid-template-columns:1fr;gap:16px}
.difcard{
  background:var(--inlife-skywash);border:1px solid var(--inlife-softline);border-radius:var(--r);
  padding:26px 28px;
  transition:border-color var(--t),box-shadow var(--t),transform .22s var(--ease);
}
.difcard:hover{border-color:var(--inlife-angel);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.difcard__n{
  font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--inlife-blue);
  letter-spacing:.08em;margin-bottom:12px;opacity:.75;
}
.difcard h3{font-size:16px;font-weight:700;margin-bottom:8px}
.difcard p{font-size:14px;color:var(--inlife-slate);line-height:1.65}

/* ================================================================
   CTA FINAL
   ================================================================ */
.sec--cta{padding-top:104px;padding-bottom:96px}
.cta{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta .eyebrow{color:var(--inlife-waterfall)}
.cta__h2{
  font-size:clamp(32px,6vw,56px);font-weight:900;color:#fff;
  line-height:1.05;margin-bottom:6px;letter-spacing:-.03em;
}
.cta__sub{display:block;color:var(--inlife-waterfall)}
.cta__lead{font-size:17px;line-height:1.7;color:#aebfd8;margin-top:14px;margin-bottom:32px}
.cta__btns{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:center}
.cta__contact{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:12px 16px;justify-content:center;margin-top:24px;
}
.cta__chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:500;color:#aebfd8;transition:color var(--t);
}
.cta__chip:hover{color:#fff}
.cta__chip--muted{opacity:.4;pointer-events:none}
.cta__sep{color:rgba(255,255,255,.2)}

/* ================================================================
   FOOTER
   ================================================================ */
.ft{background:var(--inlife-navy);color:#aebfd8;padding-top:56px;padding-bottom:36px}

.ft__top{
  display:flex;flex-direction:column;gap:20px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:32px;
}
.ft__wm{color:#fff}
.ft__line{font-family:var(--f-display);font-size:16px;font-weight:500;color:var(--inlife-waterfall);margin-top:8px}

.ft__cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;margin-bottom:36px}
.ft__cols h4{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--inlife-waterfall);margin-bottom:12px;
}
.ft__cols a{
  display:block;padding:4px 0;font-size:13.5px;color:#aebfd8;
  transition:color var(--t);
  position:relative;
}
.ft__cols a::after{
  content:'';position:absolute;left:0;bottom:1px;width:0;height:1px;
  background:var(--inlife-waterfall);transition:width var(--t-slow) var(--ease);
}
.ft__cols a:hover{color:#fff}
.ft__cols a:hover::after{width:100%}

.ft__legal{
  padding-top:24px;border-top:1px solid rgba(255,255,255,.10);
  font-size:12.5px;line-height:1.65;color:#7a94b8;margin-bottom:16px;
}
.ft__bottom{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:12.5px;
}
.ft__bottom a{color:#aebfd8;transition:color var(--t)}
.ft__bottom a:hover{color:#fff}
.ft__bottom span{color:#4a6280}

/* ================================================================
   WHATSAPP FAB
   ================================================================ */
.wafab{
  position:fixed;bottom:22px;right:20px;z-index:200;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.44);
  transition:transform .2s var(--ease),box-shadow .2s;
}
.wafab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.58)}

/* ================================================================
   SCROLL REVEAL
   ──────────────────────────────────────────────────────────────
   PRINCIPIO: el contenido es SIEMPRE visible por defecto.
   JS añade .js-reveal-ready a <html> de forma SÍNCRONA (primera
   línea de main.js) ANTES de que IO observe nada.
   Solo bajo .js-reveal-ready se aplica opacity:0 + translateY.
   Sin JS → todo visible. Con JS → animación de reveal.
   ================================================================ */

/* Default: visible sin condición */
[data-reveal]{
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

/* Solo cuando JS está activo y ha añadido la clase: ocultar inicialmente */
.js-reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(20px);
}

/* Cuando IO dispara is-visible: mostrar con transición */
.js-reveal-ready [data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Excepción: el hero copy usa animación CSS propia (heroFadeUp),
   no necesita el sistema de reveal de IO */
.js-reveal-ready .hero__copy[data-reveal],
.js-reveal-ready .hero__card[data-reveal]{
  opacity:1;
  transform:none;
  transition:none;
}

/* Reduced motion: deshabilitar todo */
@media(prefers-reduced-motion:reduce){
  [data-reveal],
  .js-reveal-ready [data-reveal],
  .js-reveal-ready [data-reveal].is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .hero__copy .pill,
  .hero__h1,
  .hero__sub,
  .hero__ctas,
  .hero__note,
  .hero__card{
    animation:none !important;
  }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ================================================================
   BREAKPOINTS
   ================================================================ */

/* 600px */
@media(min-width:600px){
  :root{--px:28px}
  .fcards{grid-template-columns:repeat(3,1fr)}
  .casos{grid-template-columns:repeat(3,1fr)}
  .difgrid{grid-template-columns:repeat(2,1fr)}
  .ft__cols{grid-template-columns:repeat(5,1fr)}
  .ft__top{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .wafab{display:none}
}

/* 860px — desktop */
@media(min-width:860px){
  :root{--px:40px}
  .sec{padding-top:100px;padding-bottom:100px}
  /* Hero: más alto en desktop para que el video respire */
  .hero{padding-top:104px;padding-bottom:120px;min-height:auto}
  .hero__inner{grid-template-columns:55fr 45fr;gap:72px}
  .xcard{max-width:none}
  .hd__nav{display:flex}
  .hd__cta{display:inline-flex}
  .hd__burger{display:none}
  .os-layout{grid-template-columns:1fr 1fr;gap:64px}
  .difgrid{grid-template-columns:repeat(4,1fr)}
  .wafab{display:none}
  /* El video es visible siempre (está en el HTML con src real) */
  .hero__bg-video{display:block}
  /* En mobile-landscape, evitar hero excesivamente alto */
  @media(max-height:600px){
    .hero{min-height:auto;padding-top:64px;padding-bottom:64px}
  }
}

/* 1200px — wide */
@media(min-width:1200px){
  :root{--px:24px}
  /* No escalar más — el clamp del font-size ya maneja el tope */
}

/* ── Mobile landscape edge case ── */
@media(max-width:859px) and (max-height:500px){
  .hero{
    min-height:auto;
    padding-top:48px;
    padding-bottom:48px;
  }
}

/* ================================================================
   v0.5 — PATRONES COMPARTIDOS · multi-página
   Componentes reutilizables para homepage + rutas internas.
   Mobile-first · respeta prefers-reduced-motion (heredado global)
   ================================================================ */

/* ── Dropdown de navegación (desktop) ── */
.hd__has-sub{position:relative}
.hd__sub{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:220px;background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r);
  box-shadow:var(--sh-lg);padding:8px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
}
.hd__has-sub:hover .hd__sub,
.hd__has-sub:focus-within .hd__sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.hd__sublink{
  display:block;font-size:13.5px;font-weight:500;color:var(--inlife-navy);
  padding:9px 12px;border-radius:var(--r-sm);transition:background-color var(--t),color var(--t);
}
.hd__sublink:hover{background:var(--inlife-skywash);color:var(--inlife-blue)}

/* ── PAGE HERO (banner de rutas internas) ── */
.phero{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#f2f8fd 0%,#e4f1fa 55%,#d6eaf5 100%);
  padding-top:56px;padding-bottom:56px;border-bottom:1px solid var(--inlife-softline);
}
.phero--navy{
  background:linear-gradient(155deg,var(--inlife-navy) 0%,var(--inlife-navy-mid) 60%,#102b5a 100%);
  border-bottom:none;
}
.phero__inner{position:relative;z-index:1;max-width:62ch}
.phero__crumbs{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--inlife-slate);
  margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.phero--navy .phero__crumbs{color:var(--inlife-waterfall)}
.phero__crumbs a{color:inherit;opacity:.8;transition:opacity var(--t)}
.phero__crumbs a:hover{opacity:1}
.phero__crumbs span{opacity:.4}
.phero__h1{
  font-size:clamp(30px,6vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1.05;
  color:var(--inlife-navy);margin-bottom:14px;
}
.phero--navy .phero__h1{color:#fff}
.phero__lead{font-size:clamp(16px,2vw,19px);line-height:1.7;color:#3a4d70;max-width:54ch}
.phero--navy .phero__lead{color:#aebfd8}
.phero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ── BANDA AUTO (Cotiza tu seguro de auto) ── */
.autoband{
  display:grid;grid-template-columns:1fr;gap:32px;align-items:center;
  background:linear-gradient(135deg,#0a2350 0%,#103369 100%);
  border-radius:var(--r);overflow:hidden;padding:36px 28px;
  box-shadow:var(--sh-lg);
}
.autoband__copy h2{color:#fff;font-size:clamp(24px,4.5vw,34px);margin-bottom:12px}
.autoband__copy p{color:#aebfd8;font-size:16px;line-height:1.7;margin-bottom:22px;max-width:48ch}
.autoband__ctas{display:flex;flex-wrap:wrap;gap:12px}
.autoband__visual{position:relative}
/* Mini-card visual del auto (sin formulas, solo ilustración de UI) */
.autocard{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.autocard__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;color:#cdddf2;
}
.autocard__row:first-child{border-top:none}
.autocard__row strong{color:#fff;font-weight:600}
.autocard__tag{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inlife-waterfall);
}

/* ── SOCIOS ASEGURADORES (grid de logos) ── */
.socios__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px;
}
.socio{
  display:flex;align-items:center;justify-content:center;
  min-height:80px;padding:18px;background:#fff;
  border:1px solid var(--inlife-softline);border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t),transform .2s var(--ease);
}
.socio:hover{border-color:var(--inlife-angel);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.socio__mark{
  font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.01em;
  color:var(--inlife-slate);text-align:center;opacity:.85;
}
.socios__note{
  margin-top:22px;font-size:13px;color:var(--inlife-slate);line-height:1.65;
  text-align:center;max-width:60ch;margin-left:auto;margin-right:auto;
}

/* ── TEMAS DE INTERÉS (cards de artículo) ── */
.temas__grid{display:grid;grid-template-columns:1fr;gap:18px}
.tema{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--inlife-softline);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-sm);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .2s;
}
.tema:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--inlife-angel)}
.tema__media{
  aspect-ratio:16/9;background:var(--inlife-skywash);
  background-size:cover;background-position:center;position:relative;
}
.tema__cat{
  position:absolute;top:12px;left:12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--inlife-blue);background:rgba(255,255,255,.92);border:1px solid var(--inlife-softline);
  border-radius:var(--r-pill);padding:4px 10px;
}
.tema__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.tema__body h3{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.3}
.tema__body p{font-size:14px;color:var(--inlife-slate);line-height:1.6;margin-bottom:16px;flex:1}
.tema__meta{font-family:var(--f-mono);font-size:11px;color:var(--inlife-slate);opacity:.7}

/* ── HERRAMIENTAS (cards de tool) ── */
.tools__grid{display:grid;grid-template-columns:1fr;gap:18px}
.tool{
  display:flex;flex-direction:column;background:var(--inlife-skywash);
  border:1px solid var(--inlife-softline);border-radius:var(--r);padding:26px 26px 24px;
  transition:transform .22s var(--ease),box-shadow var(--t),border-color var(--t);
}
.tool:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--inlife-angel)}
.tool__icon{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,127,212,.10);color:var(--inlife-blue);
}
.tool h3{font-size:17px;font-weight:700;margin-bottom:8px}
.tool p{font-size:14px;color:var(--inlife-slate);line-height:1.65;margin-bottom:18px;flex:1}
.tool__cta{margin-top:auto}
.tool__soon{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--inlife-slate);
  background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r-pill);padding:6px 12px;
}
.tool__soon::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--inlife-waterfall)}

/* ── PROSE (contenido de rutas internas) ── */
.prose{max-width:68ch}
.prose h2{font-size:clamp(22px,4vw,30px);margin:0 0 14px}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose p{font-size:16px;line-height:1.75;color:var(--inlife-slate);margin-bottom:16px}
.prose ul{display:flex;flex-direction:column;gap:10px;margin:0 0 20px}
.prose ul li{position:relative;padding-left:20px;font-size:15.5px;color:var(--inlife-slate);line-height:1.6}
.prose ul li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--inlife-blue)}
.prose strong{color:var(--inlife-navy);font-weight:600}

/* ── FEATURE SPLIT (texto + lista, rutas internas) ── */
.split{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.split__media{
  aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--inlife-skywash);border:1px solid var(--inlife-softline);
  background-size:cover;background-position:center;
}

/* ── CHECKLIST de coberturas ── */
.coverlist{display:grid;grid-template-columns:1fr;gap:12px}
.cover{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r);padding:18px 20px;
  transition:border-color var(--t),box-shadow var(--t);
}
.cover:hover{border-color:var(--inlife-angel);box-shadow:var(--sh-sm)}
.cover__tick{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:rgba(31,155,224,.12);display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.cover__tick::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--inlife-signal)}
.cover h3{font-size:15.5px;font-weight:600;margin-bottom:4px;color:var(--inlife-navy)}
.cover p{font-size:13.5px;color:var(--inlife-slate);line-height:1.6}

/* ── FAQ (acordeón nativo <details>) ── */
.faq{display:flex;flex-direction:column;gap:10px;max-width:72ch}
.faq__item{
  border:1px solid var(--inlife-softline);border-radius:var(--r);background:#fff;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t);
}
.faq__item[open]{border-color:var(--inlife-angel);box-shadow:var(--sh-sm)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;font-family:var(--f-display);font-weight:600;font-size:15.5px;
  color:var(--inlife-navy);cursor:pointer;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:'+';font-family:var(--f-mono);font-size:20px;color:var(--inlife-blue);
  transition:transform var(--t) var(--ease);flex-shrink:0;
}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:0 20px 20px;font-size:14.5px;line-height:1.7;color:var(--inlife-slate)}

/* ── CONTACTO (formulario maquetado) ── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
.cform{display:flex;flex-direction:column;gap:16px}
.cfield{display:flex;flex-direction:column;gap:7px}
.cfield label{font-size:13.5px;font-weight:600;color:var(--inlife-navy)}
.cfield input,.cfield select,.cfield textarea{
  font-family:var(--f-body);font-size:15px;color:var(--inlife-navy);
  padding:12px 14px;border:1.5px solid var(--inlife-softline);border-radius:var(--r-sm);
  background:#fff;transition:border-color var(--t),box-shadow var(--t);width:100%;
}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{
  outline:none;border-color:var(--inlife-blue);box-shadow:0 0 0 3px rgba(30,127,212,.12);
}
.cfield textarea{resize:vertical;min-height:120px}
.cform__note{font-size:12px;color:var(--inlife-slate);line-height:1.6}
.cinfo{display:flex;flex-direction:column;gap:18px}
.cinfo__item{display:flex;gap:14px;align-items:flex-start}
.cinfo__icon{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  background:rgba(30,127,212,.10);color:var(--inlife-blue);
  display:flex;align-items:center;justify-content:center;
}
.cinfo__item h3{font-size:15px;font-weight:700;margin-bottom:3px}
.cinfo__item p,.cinfo__item a{font-size:14px;color:var(--inlife-slate);line-height:1.55}
.cinfo__item a:hover{color:var(--inlife-blue)}

/* ── CTA band genérico (reutilizable, fin de ruta) ── */
.ctaband{
  background:var(--inlife-navy);border-radius:var(--r);
  padding:44px 28px;text-align:center;
}
.ctaband h2{color:#fff;font-size:clamp(24px,4.5vw,36px);margin-bottom:10px}
.ctaband p{color:#aebfd8;font-size:16px;line-height:1.7;margin-bottom:26px;max-width:50ch;margin-left:auto;margin-right:auto}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── BREAKPOINTS de patrones compartidos ── */
@media(min-width:600px){
  .temas__grid{grid-template-columns:repeat(3,1fr)}
  .tools__grid{grid-template-columns:repeat(2,1fr)}
  .socios__grid{grid-template-columns:repeat(3,1fr)}
  .coverlist{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:860px){
  .phero{padding-top:80px;padding-bottom:80px}
  .autoband{grid-template-columns:1.15fr .85fr;padding:48px 44px;gap:48px}
  .socios__grid{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1fr 1fr;gap:56px}
  .contact-grid{grid-template-columns:1.2fr .8fr;gap:56px}
  .ctaband{padding:60px 48px}
}

/* ================================================================
   v0.6 — CORRECTION PASS · overrides + nuevos patrones
   (Cargado al final: gana en cascada sobre v0.4/v0.5)
   ================================================================ */

/* ── 1 · HERO CINEMATOGRÁFICO full-bg ──
   Video de fondo a todo lo ancho, copy a la izquierda sobre overlay navy.
   Sin card, sin split. JS (initHeroVideo) conserva play-once + frame final. */
.hero{
  min-height:calc(100svh - var(--hd-h));
  padding-top:96px;padding-bottom:104px;
  background:var(--inlife-navy); /* fallback mientras carga */
}
.hero__bg-video,
.hero__bg-final{object-position:center center}
/* Overlay navy para legibilidad del texto */
.hero__bg-overlay{
  background:
    linear-gradient(90deg, rgba(8,24,56,.92) 0%, rgba(8,24,56,.80) 38%, rgba(8,24,56,.52) 70%, rgba(8,24,56,.42) 100%),
    linear-gradient(to top, rgba(6,18,44,.55) 0%, rgba(6,18,44,0) 42%);
}
/* Layout interior: una sola columna, alineado a la izquierda */
.hero__inner{
  grid-template-columns:1fr;
  align-items:center;
  min-height:inherit;
}
.hero__copy{max-width:680px}
/* Pill ghost legible sobre navy */
.hero .pill--ghost{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  color:#dbe9fb;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* Texto en blanco */
.hero__h1{color:#fff;text-shadow:0 2px 24px rgba(4,12,30,.35)}
.hero__sub{color:#dceaf9;max-width:50ch}
.hero__note{color:#9db4d6}
/* Botón outline legible sobre navy */
.hero .btn--outline{
  background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55);
}
.hero .btn--outline:hover{background:rgba(255,255,255,.14);border-color:#fff}

@media(min-width:860px){
  .hero{padding-top:120px;padding-bottom:132px}
  .hero__inner{grid-template-columns:1fr}
  .hero__bg-video,.hero__bg-final{object-position:center center}
}
@media(max-width:600px){
  .hero__bg-video,.hero__bg-final{object-position:60% center}
}

/* ── 3 / 7 · SPACING ESTÁNDAR de sección ──
   Desktop: pt 88 / pb 96 / heading-gap 36 · Mobile: 56 / 64 / 24 */
.sec--std{padding-top:56px;padding-bottom:64px}
.sec--std .sec__head{margin-bottom:24px}
@media(min-width:860px){
  .sec--std{padding-top:88px;padding-bottom:96px}
  .sec--std .sec__head{margin-bottom:36px}
}

/* ── 3 · COVER-ART tipográfica (reemplaza rectángulos vacíos) ──
   Para fcard (soluciones) y tema (artículos) mientras no haya imágenes.
   Si llega la imagen real: añadir background-image en el elemento media. */
.coverart{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(31,155,224,.30) 0%, rgba(31,155,224,0) 55%),
    linear-gradient(150deg, #12356e 0%, #0e2c5e 60%, #0a2350 100%);
}
.coverart::before{
  content:'';position:absolute;right:-30px;top:-30px;width:150px;height:150px;
  border:1.5px solid rgba(180,216,242,.18);border-radius:50%;
}
.coverart::after{
  content:'';position:absolute;right:6px;top:26px;width:96px;height:96px;
  border:1.5px solid rgba(180,216,242,.12);border-radius:50%;
}
.coverart__word{
  position:relative;z-index:1;
  font-family:var(--f-display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(20px,4vw,26px);line-height:1.05;color:#fff;
}
.coverart__tag{
  position:relative;z-index:1;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--inlife-waterfall);margin-bottom:6px;
}
/* la media de fcard/tema ya es position:relative con aspect-ratio */
.fcard__media .coverart,.tema__media .coverart{border-radius:0}

/* Igualar alturas de cards en grid */
.fcards .fcard{height:100%}
.temas__grid .tema{height:100%}

/* ── 4 · QUOTE MODULE (primer paso de cotización de auto) ── */
.quote{
  display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
  background:linear-gradient(135deg,#0a2350 0%,#103369 100%);
  border-radius:var(--r);padding:30px 24px;box-shadow:var(--sh-lg);overflow:hidden;
}
.quote__copy h2{color:#fff;font-size:clamp(24px,4.5vw,32px);margin-bottom:10px}
.quote__copy p{color:#aebfd8;font-size:15.5px;line-height:1.65;margin-bottom:18px;max-width:46ch}
.quote__copy .eyebrow{color:var(--inlife-waterfall)}
.quote__wa{display:inline-flex;align-items:center;gap:8px;color:#cdddf2;font-size:14px;font-weight:500;transition:color var(--t)}
.quote__wa:hover{color:#fff}
.quote__wa svg{flex-shrink:0}
/* Card del formulario */
.qform{
  background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh-md);
  display:flex;flex-direction:column;gap:14px;
}
.qform__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qform .cfield label{font-size:12.5px;font-weight:600;color:var(--inlife-navy)}
.qform .cfield input,.qform .cfield select{
  font-family:var(--f-body);font-size:14.5px;color:var(--inlife-navy);
  padding:11px 12px;border:1.5px solid var(--inlife-softline);border-radius:var(--r-sm);
  background:#fff;width:100%;transition:border-color var(--t),box-shadow var(--t);
}
.qform .cfield input:focus,.qform .cfield select:focus{
  outline:none;border-color:var(--inlife-blue);box-shadow:0 0 0 3px rgba(30,127,212,.12);
}
.qform__note{font-size:11.5px;color:var(--inlife-slate);line-height:1.55}

/* ── 6 · SOCIOS · wordmarks grayscale ── */
.socio__wm{
  font-family:var(--f-display);font-weight:900;letter-spacing:-.02em;font-size:19px;
  color:#8a93a3;filter:grayscale(1);opacity:.85;transition:color var(--t),opacity var(--t);
}
.socio:hover .socio__wm{color:var(--inlife-navy);opacity:1}

/* ── 8 · INLIFE OS · mockup tipo marketplace ── */
.osapp{
  display:grid;grid-template-columns:138px 1fr;
  background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-xl);min-height:380px;
}
.osapp__side{
  background:var(--inlife-navy);color:#cdddf2;padding:16px 12px;display:flex;flex-direction:column;gap:14px;
}
.osapp__brand{font-family:var(--f-display);font-weight:900;font-size:15px;color:#fff;letter-spacing:-.03em;padding:2px 6px}
.osapp__brand span{color:var(--inlife-signal)}
.osapp__nav{display:flex;flex-direction:column;gap:2px}
.osapp__item{
  display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#9db4d6;
  padding:7px 8px;border-radius:8px;white-space:nowrap;
}
.osapp__item i{width:6px;height:6px;border-radius:2px;background:currentColor;flex-shrink:0;opacity:.7}
.osapp__item--active{background:rgba(31,155,224,.18);color:#fff}
.osapp__item--active i{background:var(--inlife-signal);opacity:1}
.osapp__main{display:flex;flex-direction:column;gap:14px;padding:16px 16px 18px;background:var(--inlife-skywash);min-width:0}
.osapp__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.osapp__top h4{font-size:15px;font-weight:700;color:var(--inlife-navy);line-height:1.1}
.osapp__top span{font-size:11px;color:var(--inlife-slate)}
.osapp__tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.osapp__search{font-size:11px;color:var(--inlife-slate);background:#fff;border:1px solid var(--inlife-softline);border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap}
.osapp__avatar{width:28px;height:28px;border-radius:50%;background:var(--inlife-blue);color:#fff;font-family:var(--f-mono);font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.osapp__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.oscard{background:#fff;border:1px solid var(--inlife-softline);border-radius:10px;padding:12px 13px}
.oscard__lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--inlife-slate)}
.oscard__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.oscard__val{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--inlife-navy);line-height:1}
.osbadge{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.04em;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}
.osbadge--ok{background:rgba(31,155,224,.12);color:var(--inlife-blue)}
.osbadge--warn{background:rgba(248,168,76,.16);color:#b9701a}
.osbadge--soon{background:rgba(10,35,80,.06);color:var(--inlife-slate)}
.osmkt__h{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px}
.osmkt__h h5{font-size:12.5px;font-weight:700;color:var(--inlife-navy)}
.osmkt__h span{font-family:var(--f-mono);font-size:10px;color:var(--inlife-slate)}
.osmkt{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.osprod{background:#fff;border:1px solid var(--inlife-softline);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:8px}
.osprod__top{display:flex;align-items:center;gap:8px}
.osprod__ic{width:24px;height:24px;border-radius:7px;background:rgba(30,127,212,.10);color:var(--inlife-blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.osprod__nm{font-size:12px;font-weight:600;color:var(--inlife-navy)}

@media(min-width:600px){
  .osapp__cards{grid-template-columns:repeat(4,1fr)}
  .osmkt{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:520px){
  .osapp{grid-template-columns:108px 1fr}
  .osapp__item{font-size:11px;padding:6px 7px}
  .osapp__cards{grid-template-columns:repeat(2,1fr)}
  .osmkt{grid-template-columns:repeat(2,1fr)}
}

/* ── 4 + quote responsive ── */
@media(min-width:860px){
  .quote{grid-template-columns:1fr 1fr;gap:44px;padding:44px}
}

/* ── 10 · TOOLS grid: 3 columnas en desktop (6 herramientas) ── */
@media(min-width:860px){
  .tools__grid{grid-template-columns:repeat(3,1fr)}
}
.tools__grid .tool{height:100%}

/* ── overflow guard global ── */
html,body{max-width:100%;overflow-x:hidden}
img,video{max-width:100%}

/* ── 2 · NAV · 7 enlaces necesitan más ancho: desktop nav desde 1024px ── */
@media(min-width:860px) and (max-width:1023px){
  .hd__nav{display:none}
  .hd__cta{display:none}
  .hd__burger{display:flex}
}
@media(min-width:1024px){
  .hd__nav{display:flex;gap:0}
  .hd__cta{display:inline-flex}
  .hd__burger{display:none}
  .hd__link{padding:7px 11px;font-size:13.5px}
}

/* ================================================================
   v1.0 — STITCH HOMEPAGE  (scoped to body.hp)
   Visual source of truth: Stitch Desktop Final Refined fc596cee
   Translated from Tailwind/Material Symbols → semantic + local CSS.
   Self-contained: does not affect secondary routes.
   ================================================================ */
body.hp{
  /* ── Stitch tokens ── */
  --s-navy:#001F3F;          /* primary brand */
  --s-navy-2:#06203f;        /* primary-container surfaces */
  --s-ink:#000613;           /* deepest (hero overlay base) */
  --s-blue:#3A5F94;          /* secondary / interactive */
  --s-blue-600:#2f4f80;
  --s-blue-100:#9FC2FE;
  --s-fixed:#D4E3FF;         /* light accent text on navy */
  --s-white:#FFFFFF;
  --s-surface:#F9F9F9;       /* alt section bg */
  --s-sky:#F0F4F8;
  --s-on:#1A1C1C;            /* on-surface text */
  --s-on-var:#43474E;        /* muted text */
  --s-border:#E2E8F0;
  --s-outline:#C4C6CF;

  --s-font:'Public Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --s-max:1200px;
  --s-mx:40px;               /* desktop side margin */
  --s-gap:80px;              /* section gap */
  --s-gutter:24px;
  --s-r:12px;                /* card radius (rounded-xl) */
  --s-r-sm:8px;              /* button/input radius */
  --s-shadow:0 4px 20px rgba(0,31,63,.05);
  --s-shadow-hover:0 8px 30px rgba(0,31,63,.10);
  --s-shadow-2xl:0 25px 50px -12px rgba(0,31,63,.25);

  font-family:var(--s-font);
  color:var(--s-on);
  background:var(--s-white);
}
body.hp *,body.hp *::before,body.hp *::after{box-sizing:border-box}
body.hp h1,body.hp h2,body.hp h3,body.hp h4{font-family:var(--s-font);color:var(--s-navy);letter-spacing:-.01em;margin:0}
body.hp p{margin:0}
body.hp img{display:block;max-width:100%;height:auto}
body.hp :focus-visible{outline:3px solid var(--s-blue);outline-offset:3px;border-radius:6px}

.hp .s-wrap{width:100%;max-width:var(--s-max);margin:0 auto;padding-left:var(--s-mx);padding-right:var(--s-mx)}
.hp .s-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--s-blue)}
.hp .s-eyebrow--light{color:var(--s-fixed)}
.hp .s-ico{flex-shrink:0;transition:transform .2s ease-out}
.hp .s-h2{font-size:32px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.hp .s-h2--light{color:#fff}
.hp .s-h3{font-size:22px;font-weight:600;line-height:1.3}
.hp .s-lead{font-size:18px;line-height:1.55;color:var(--s-on-var);margin-top:12px;max-width:60ch}
.hp .s-lead--center{margin-left:auto;margin-right:auto}
.hp .s-muted{color:var(--s-on-var)}

/* ── Buttons ── */
.hp .s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--s-font);font-size:14px;font-weight:600;letter-spacing:.02em;
  min-height:44px;padding:11px 22px;border-radius:var(--s-r-sm);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .2s ease-out,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.hp .s-btn--lg{font-size:15px;padding:15px 30px;border-radius:var(--s-r)}
.hp .s-btn--full{width:100%}
.hp .s-btn:hover{transform:translateY(-1px)}
.hp .s-btn--primary{background:var(--s-navy);color:#fff;border-color:var(--s-navy)}
.hp .s-btn--primary:hover{background:#06294f}
.hp .s-btn--outline{background:transparent;color:var(--s-navy);border-color:var(--s-navy)}
.hp .s-btn--outline:hover{background:var(--s-sky)}
.hp .s-btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.6)}
.hp .s-btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
.hp .s-btn--white{background:#fff;color:var(--s-navy);border-color:#fff}
.hp .s-btn--white:hover{background:var(--s-sky)}
.hp .s-btn:hover .s-ico{transform:translateX(3px)}
.hp .s-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--s-blue);transition:gap .2s}
.hp .s-link:hover{gap:10px}

/* ── Header ── */
.hp .s-hd{position:fixed;top:0;left:0;right:0;z-index:50;height:68px;
  background:rgba(249,249,249,.95);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 rgba(0,31,63,.06),0 2px 12px rgba(0,31,63,.04)}
.hp .s-hd__bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.hp .s-wm{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--s-navy);flex-shrink:0}
.hp .s-wm--light{color:#fff}
.hp .s-hd__nav{display:none;align-items:center;gap:32px}
.hp .s-hd__link{font-size:15px;font-weight:500;color:var(--s-on-var);transition:color .2s}
.hp .s-hd__link:hover,.hp .s-hd__link.active{color:var(--s-blue)}
.hp .s-hd__cta{display:none}
.hp .s-hd__burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border-radius:8px}
.hp .s-hd__burger span{display:block;height:2px;width:100%;background:var(--s-navy);border-radius:2px;transition:transform .2s,opacity .2s}
.hp .s-hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hp .s-hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hp .s-hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hp .s-hd__mobile{position:absolute;top:68px;left:0;right:0;background:rgba(255,255,255,.98);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--s-border);
  padding:8px 20px 20px;box-shadow:0 12px 32px rgba(0,31,63,.12)}
.hp .s-hd__mobile[hidden]{display:none !important}
.hp .s-hd__mlink{display:block;font-size:17px;font-weight:500;color:var(--s-navy);padding:14px 0;border-bottom:1px solid var(--s-border)}
.hp .s-hd__mlink:last-of-type{border-bottom:none}
.hp .s-hd__mcta{display:flex;flex-direction:column;gap:10px;padding-top:16px}

/* ── Hero (video full-bg) ── */
.hp .s-hero{position:relative;width:100%;overflow:hidden;background:var(--s-navy);
  min-height:84svh;display:flex;align-items:center;padding-top:68px}
.hp .s-hero__bg{position:absolute;inset:0;z-index:0;background:var(--s-ink)}
.hp .s-hero__video,.hp .s-hero__final{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hp .s-hero__video{opacity:0;transition:opacity 1.1s ease}
.hp .s-hero__video.is-playing{opacity:1}
.hp .s-hero__final{background-size:cover;background-position:60% center;background-repeat:no-repeat;opacity:0;transition:opacity .8s ease}
.hp .hero-video-ended .s-hero__final{opacity:1}
.hp .s-hero__overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,6,19,.95) 0%,rgba(0,6,19,.78) 42%,rgba(0,6,19,.45) 72%,rgba(0,6,19,.30) 100%),
             linear-gradient(to top,rgba(0,6,19,.5) 0%,rgba(0,6,19,0) 40%)}
.hp .s-hero__inner{position:relative;z-index:1;width:100%;padding-top:48px;padding-bottom:56px}
.hp .s-hero__copy{max-width:680px}
.hp .s-hero__h1{font-size:clamp(36px,7vw,56px);font-weight:800;line-height:1.05;color:#fff;margin:16px 0;max-width:14ch;text-shadow:0 2px 24px rgba(0,6,19,.4)}
.hp .s-hero__sub{font-size:clamp(16px,2vw,19px);line-height:1.55;color:rgba(255,255,255,.9);max-width:48ch;margin-bottom:32px}
.hp .s-hero__ctas{display:flex;flex-wrap:wrap;gap:16px}

/* ── Section shell ── */
.hp .s-sec{padding-top:56px;padding-bottom:64px}
.hp .s-sec--surface{background:var(--s-surface)}
.hp .s-sec__head{margin-bottom:32px}
.hp .s-sec__head--center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.hp .s-sec__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}

/* ── Soluciones (3 cards) ── */
.hp .s-cards3{display:grid;grid-template-columns:1fr;gap:var(--s-gutter)}
.hp .s-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--s-r);overflow:hidden;
  box-shadow:var(--s-shadow);transition:box-shadow .2s ease-out,transform .2s ease-out;height:100%}
.hp .s-card:hover{box-shadow:var(--s-shadow-hover);transform:translateY(-2px)}
.hp .s-card__media{display:block;height:200px;overflow:hidden}
.hp .s-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hp .s-card:hover .s-card__media img{transform:scale(1.05)}
.hp .s-card__body{display:flex;flex-direction:column;gap:10px;padding:28px;flex:1}
.hp .s-card__body p{color:var(--s-on-var);font-size:16px;line-height:1.5;flex:1}
.hp .s-card__body .s-link{margin-top:4px}

/* ── Cotiza auto ── */
.hp .s-auto{position:relative;padding-top:56px;padding-bottom:64px;overflow:hidden}
.hp .s-auto__bg{position:absolute;inset:0;z-index:0}
.hp .s-auto__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hp .s-auto__tint{position:absolute;inset:0;background:rgba(0,31,63,.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.hp .s-auto__inner{position:relative;z-index:1}
.hp .s-quote{background:#fff;border-radius:var(--s-r);box-shadow:var(--s-shadow-2xl);
  max-width:880px;margin:0 auto;padding:28px}
.hp .s-quote__head{text-align:center;margin-bottom:24px}
.hp .s-quote__head .s-muted{margin-top:8px;font-size:16px}
.hp .s-quote__form{display:grid;grid-template-columns:1fr;gap:16px}
.hp .s-field{display:flex;flex-direction:column;gap:6px}
.hp .s-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--s-on-var)}
.hp .s-field input,.hp .s-field select{font-family:var(--s-font);font-size:15px;color:var(--s-on);
  padding:12px 14px;border:1.5px solid var(--s-outline);border-radius:var(--s-r-sm);background:#fff;width:100%;transition:border-color .2s,box-shadow .2s}
.hp .s-field input:focus,.hp .s-field select:focus{outline:none;border-color:var(--s-blue);box-shadow:0 0 0 3px rgba(58,95,148,.15)}
.hp .s-quote__submit{margin-top:4px}
.hp .s-quote__note{font-size:12px;line-height:1.5;color:var(--s-on-var);text-align:center}
.hp .s-quote__note a{color:var(--s-blue);font-weight:600}

/* ── ¿Por qué? (4 features) ── */
.hp .s-cards4{display:grid;grid-template-columns:1fr;gap:var(--s-gutter)}
.hp .s-feature{background:#fff;border-radius:var(--s-r);padding:28px;box-shadow:var(--s-shadow);transition:box-shadow .2s,transform .2s}
.hp .s-feature:hover{box-shadow:var(--s-shadow-hover);transform:translateY(-2px)}
.hp .s-feature__ic{display:inline-flex;color:var(--s-blue);margin-bottom:16px}
.hp .s-feature__t{font-size:18px;font-weight:700;margin-bottom:8px}
.hp .s-feature p{color:var(--s-on-var);font-size:15px;line-height:1.55}

/* ── Socios ── */
.hp .s-socios{padding:48px 0;border-top:1px solid var(--s-border);border-bottom:1px solid var(--s-border);background:#fff}
.hp .s-socios__eyebrow{text-align:center;color:var(--s-on-var);opacity:.7;margin-bottom:28px}
.hp .s-socios__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 44px}
.hp .s-socio{font-size:24px;font-weight:800;letter-spacing:-.03em;color:#8a93a3;filter:grayscale(1);opacity:.85;transition:color .2s,opacity .2s}
.hp .s-socio:hover{color:var(--s-navy);opacity:1}

/* ── Cómo trabajamos (5 steps) ── */
.hp .s-steps{position:relative;display:grid;grid-template-columns:1fr;gap:28px;counter-reset:none;list-style:none;padding:0}
.hp .s-step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}
.hp .s-step__n{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;
  background:var(--s-navy);color:#fff;font-size:26px;font-weight:700;margin-bottom:16px;box-shadow:var(--s-shadow)}
.hp .s-step__t{font-size:18px;font-weight:700;margin-bottom:6px}
.hp .s-step p{font-size:14px;line-height:1.5;color:var(--s-on-var);max-width:24ch}

/* ── inlife OS ── */
.hp .s-os{background:var(--s-navy);color:#fff;padding-top:56px;padding-bottom:64px}
.hp .s-os__inner{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hp .s-os__lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,.8);margin:16px 0 24px;max-width:52ch}
.hp .s-os__list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:14px}
.hp .s-os__list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:rgba(255,255,255,.92)}
.hp .s-os__chk{flex-shrink:0;color:var(--s-blue-100);margin-top:2px}
.hp .s-os__mock{position:relative}
.hp .s-os__mock .osapp{transform:rotate(1deg);transition:transform .4s ease}
.hp .s-os__mock:hover .osapp{transform:rotate(0)}

/* ── Temas (4 cards) ── */
.hp .s-tema{display:flex;flex-direction:column;height:100%}
.hp .s-tema__media{display:block;height:180px;border-radius:var(--s-r);overflow:hidden;margin-bottom:14px}
.hp .s-tema__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hp .s-tema:hover .s-tema__media img{transform:scale(1.05)}
.hp .s-tema__t{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:6px;transition:color .2s}
.hp .s-tema:hover .s-tema__t{color:var(--s-blue)}
.hp .s-tema__d{font-size:14px;line-height:1.5;color:var(--s-on-var)}

/* ── Herramientas (icon list cards) ── */
.hp .s-tools{display:grid;grid-template-columns:1fr;gap:var(--s-gutter)}
.hp .s-tool{display:flex;align-items:flex-start;gap:16px;background:#fff;border-radius:var(--s-r);padding:24px;
  box-shadow:var(--s-shadow);transition:box-shadow .2s,transform .2s;height:100%;text-decoration:none;color:inherit}
.hp .s-tool:hover{box-shadow:var(--s-shadow-hover);transform:translateY(-2px)}
.hp .s-tool__ic{flex-shrink:0;display:inline-flex;color:var(--s-blue);margin-top:2px}
.hp .s-tool__t{font-size:16px;font-weight:700;color:var(--s-navy);margin-bottom:4px}
.hp .s-tool p{font-size:13.5px;line-height:1.5;color:var(--s-on-var)}
.hp .s-soon{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--s-blue);
  background:var(--s-sky);border-radius:999px;padding:2px 8px;margin-left:4px;white-space:nowrap}
.hp .s-tools__cta{text-align:center;margin-top:36px}

/* ── Footer ── */
.hp .s-ft{background:var(--s-navy);color:rgba(255,255,255,.8)}
.hp .s-ft__top{display:flex;flex-direction:column;gap:40px;padding-top:56px;padding-bottom:40px}
.hp .s-ft__tag{margin:14px 0 0;max-width:32ch;font-size:15px;color:rgba(255,255,255,.6)}
.hp .s-ft__social{display:flex;gap:12px;margin-top:20px}
.hp .s-ft__social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);color:#fff;transition:background-color .2s}
.hp .s-ft__social a:hover{background:rgba(255,255,255,.16)}
.hp .s-ft__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
.hp .s-ft__col{display:flex;flex-direction:column;gap:10px}
.hp .s-ft__h{color:rgba(255,255,255,.5);margin-bottom:6px}
.hp .s-ft__col a{font-size:15px;color:rgba(255,255,255,.8);transition:color .2s}
.hp .s-ft__col a:hover{color:var(--s-fixed)}
.hp .s-ft__legal{border-top:1px solid rgba(255,255,255,.1);padding:24px 0}
.hp .s-ft__legal p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.55);max-width:900px}
.hp .s-ft__copy{margin-top:10px !important;font-weight:500;color:rgba(255,255,255,.7) !important}

/* ── Reveal (reuses main.js .js-reveal-ready + .is-visible) ── */
.js-reveal-ready .hp [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.js-reveal-ready .hp [data-reveal].is-visible{opacity:1;transform:none}
.js-reveal-ready .hp .s-hero__copy[data-reveal]{opacity:1;transform:none}

/* ── Responsive ── */
@media(max-width:600px){
  body.hp{--s-mx:20px}
  .hp .s-hero{min-height:84svh}
  .hp .s-socios__row{gap:20px 28px}
  .hp .s-socio{font-size:20px}
}
@media(min-width:600px){
  .hp .s-cards3{grid-template-columns:repeat(3,1fr)}
  .hp .s-cards4{grid-template-columns:repeat(2,1fr)}
  .hp .s-quote__form{grid-template-columns:repeat(2,1fr)}
  .hp .s-quote__submit,.hp .s-quote__note{grid-column:1/-1}
  .hp .s-tools{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .hp .s-quote{padding:40px}
  .hp .s-steps{grid-template-columns:repeat(5,1fr);gap:var(--s-gutter)}
  .hp .s-steps::before{content:"";position:absolute;top:36px;left:10%;right:10%;height:2px;background:rgba(58,95,148,.35);z-index:0}
}
@media(min-width:1024px){
  body.hp{--s-mx:40px}
  .hp .s-hd__nav{display:flex}
  .hp .s-hd__cta{display:inline-flex}
  .hp .s-hd__burger{display:none}
  .hp .s-hero{min-height:80vh}
  .hp .s-h2{font-size:36px}
  .hp .s-sec{padding-top:88px;padding-bottom:96px}
  .hp .s-auto{padding-top:88px;padding-bottom:96px}
  .hp .s-os{padding-top:88px;padding-bottom:96px}
  .hp .s-cards4{grid-template-columns:repeat(4,1fr)}
  .hp .s-quote__form{grid-template-columns:repeat(4,1fr)}
  .hp .s-tools{grid-template-columns:repeat(3,1fr)}
  .hp .s-os__inner{grid-template-columns:1fr 1fr;gap:56px}
  .hp .s-ft__top{flex-direction:row;justify-content:space-between;padding-top:72px}
  .hp .s-ft__cols{grid-template-columns:repeat(3,1fr);gap:48px}
}
@media(min-width:1024px){
  /* desktop card media taller per Stitch h-64 */
  .hp .s-card__media{height:240px}
  .hp .s-tema__media{height:190px}
}