@charset "UTF-8";
/* ==========================================================================
   Aivacy — aivacy.io
   Sistema de diseño. Paleta y tipografía según guía de marca.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fuentes
   Self-hosted (no CDN de terceros: la web de una empresa de privacidad no
   debe filtrar IPs de visitantes a Google Fonts).
   -------------------------------------------------------------------------- */
@font-face{font-family:Nunito;font-style:normal;font-weight:200;font-display:swap;
  src:url(../fonts/nunito-latin-200-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:200;font-display:swap;
  src:url(../fonts/nunito-latin-ext-200-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/nunito-latin-300-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/nunito-latin-ext-300-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/nunito-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/nunito-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/nunito-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/nunito-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/nunito-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/nunito-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------- 2. Tokens */
:root{
  /* Cyberblue */
  --cyber-light:#1CA2AE;      /* HEX #00A3AD de guía, valor real del degradado */
  --cyber:#00A499;            /* PANTONE 315 C */
  --cyber-mid:#156B73;
  --cyber-dark:#0C3F45;       /* HEX #004147 */
  --cyber-ink:#083035;

  /* Naranja */
  --orange-light:#F7A335;
  --orange:#F28C48;           /* PANTONE 158 U */
  --orange-burnt:#91542B;

  /* Warm grey */
  --wg-050:#F4F2EF;
  --wg-100:#CFC6B4;           /* Caliza */
  --wg-200:#CBC4BC;
  --wg-400:#968C83;
  --wg-600:#6D6B6A;
  --wg-900:#4B4845;           /* PANTONE Warm Grey 11 C */
  --gold:#AF8D5D;             /* Oro viejo */

  /* Neutros de composición */
  --slate:#4C5A5E;            /* fondo "The moment is now" */
  --ink:#33322F;
  --white:#FFFFFF;

  /* Degradados de marca */
  --grad-cyber:linear-gradient(65deg,#1CA2AE 0%,#0C3F45 100%);
  --grad-cyber-soft:linear-gradient(65deg,#189BA6 0%,#0F4A51 100%);
  --grad-footer:linear-gradient(90deg,#323232 0%,#6D6B6A 25%,#999490 50%,#B4ACA8 75%,#B4ACA8 100%);
  --grad-panel:linear-gradient(90deg,#8C8880 0%,#B3ACA6 45%,#C2BBB5 100%);
  --grad-orange:linear-gradient(90deg,#F7A335 0%,#F28C48 100%);

  /* Métrica */
  --shell:1240px;
  --gut:clamp(1.25rem,4vw,3.25rem);
  --hdr:clamp(64px,7vw,92px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------- 3. Reset/base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;
  font-family:Nunito,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:400;font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.62;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;height:auto}
/* <picture> es inline por defecto y no propaga la altura al <img> que lleva
   dentro, así que las capas de fondo se quedaban sin alto. */
picture{display:block}
.hero__slide picture,.cta__bg picture,.dark__bg picture,.moment__shot picture,
.straddle__shot picture,.contact__shot picture,.pagehead__media picture,
.srvhero__media picture,.fullshot picture,
.band__bg picture,.abhero__shot picture,.scale__shot picture{width:100%;height:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
::selection{background:var(--cyber-light);color:#fff}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:200;padding:.7rem 1.2rem;
  background:var(--white);color:var(--cyber-dark);border-radius:6px;font-weight:600;
  transition:top .2s var(--ease)}
.skip:focus{top:1rem}

/* ------------------------------------------------------- 4. Layout helpers */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell--wide{max-width:1440px}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--flush{padding-block:0}
/* Separador de secciones. Era un PNG y traía basura en los bordes: una columna
   gris clara a la izquierda y cuatro blancas a la derecha, que a pantalla
   completa se leían como un corte. Aquí va como degradado CSS con las paradas
   tomadas del propio asset, así no hay bordes y escala a cualquier ancho.
   Alto: 24 px sobre el lienzo de 1441 de la maqueta. */
.divider{height:clamp(11px,1.67vw,26px);border:0;margin:0;
  background:linear-gradient(90deg,
    #333333 0%, #646160 20%, #928C88 40%, #A69F99 50%,
    #B5ADA7 60%, #BAB2AC 70%, #C3BBB4 85%, #CBC4BC 100%)}

/* --------------------------------------------------------- 5. Tipografía UI */
.display{
  font-weight:200;line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;
  font-size:clamp(2.4rem,7.2vw,5.5rem);
}
.display--sm{font-size:clamp(2rem,5.4vw,4rem)}
.display--xl{font-size:clamp(2.6rem,8.4vw,6.6rem)}
/* «How Aivacy works?»: 44 px y trazo más grueso que el resto de titulares
   (medido sobre la maqueta: 0,089 em de grosor de asta, frente a 0,075 del
   peso 300 que tenía antes). */
.headline{font-weight:500;line-height:1.14;font-size:clamp(1.6rem,3.06vw,3.1rem)}
.subhead{font-weight:400;line-height:1.28;font-size:clamp(1.25rem,2.2vw,1.75rem)}
.eyebrow{font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;color:var(--cyber)}
.lede{font-size:clamp(1.05rem,1.4vw,1.22rem);font-weight:300;line-height:1.6}
.fine{font-size:.9rem;line-height:1.6}
.finer{font-size:.83rem;line-height:1.62}
.tx-right{text-align:right}
.tx-center{text-align:center}
.stack>*+*{margin-top:1em}
.stack--s>*+*{margin-top:.55em}
.stack--l>*+*{margin-top:1.6em}
.on-dark{color:#fff}
.on-dark .eyebrow{color:var(--orange-light)}
.accent{color:var(--orange)}
.teal{color:var(--cyber)}

/* --------------------------------------------------------------- 6. Botones */
/* El radio era una píldora (999px). En la maqueta los botones son rectángulos
   con la esquina apenas redondeada: ~10 px sobre un botón de 450x66 en la home
   y la misma proporción en el «Send» de Contacto. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:58px;padding:.9rem 2.3rem;border-radius:10px;
  font-weight:600;font-size:1rem;letter-spacing:.01em;text-align:center;
  background:var(--grad-orange);color:#fff;
  box-shadow:0 6px 20px -8px rgba(146,84,43,.55);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.08) brightness(1.04);
  box-shadow:0 12px 28px -10px rgba(146,84,43,.6)}
.btn:active{transform:translateY(0)}
/* 450 px sobre 1441 en la maqueta */
.btn--wide{min-width:min(420px,100%)}
/* Variante transparente. Existe SOLO para el segundo botón del slider de la
   home: ahí el naranja lo lleva «Enter Aivacy», que es la acción principal, y
   «Book a demo» queda en contorno («Slider 1 pelirroja actualizado»). En el
   resto del sitio todos los botones van en naranja. */
.btn--ghost{background:none;color:#fff;border:1.5px solid rgba(255,255,255,.85);
  box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.16);filter:none}
.btn--teal{background:var(--cyber-dark);box-shadow:none}
.btn--teal:hover{background:var(--cyber-mid);filter:none}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------------------------------------------------------------- 7. Marca */
/* Se usa el logotipo oficial tal cual («Logo Aivacy ciberblue-01»). El
   wordmark sangra por los dos lados del cuadro: es intencionado, no un
   recorte. Por eso no se recompone con CSS. */
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand__img{
  display:block;
  width:var(--brand-size,74px);
  height:var(--brand-size,74px);
}
.brand--lg{--brand-size:clamp(60px,6.4vw,88px)}
.brand--sm{--brand-size:56px}

/* --------------------------------------------------------------- 8. Header */
.hdr{
  position:absolute;inset:0 0 auto;z-index:60;
  display:flex;align-items:flex-start;
  min-height:var(--hdr);padding-block:clamp(1.1rem,2vw,1.8rem);
}
/* Velo superior para cuando el menú se superpone a una foto clara (Contacto).
   En el hero de la home no hace falta: ya lleva su propio degradado. */
.hdr--scrim::before{content:"";position:absolute;inset:0 0 auto;height:170%;
  pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(20,32,36,.45),rgba(20,32,36,0))}
.hdr--solid{position:sticky;top:0;background:var(--cyber-dark);align-items:center}
.hdr--onlight{position:sticky;top:0;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);align-items:center;
  border-bottom:1px solid rgba(75,72,69,.12);color:var(--cyber-dark)}
.hdr__inner{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;width:100%}
.hdr--solid .hdr__inner,.hdr--onlight .hdr__inner{align-items:center}

.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.4rem);
  padding-top:.4rem;color:#fff}
.hdr--onlight .nav{color:var(--cyber-dark);padding-top:0}
.nav a{position:relative;padding:.4rem .1rem;font-weight:400;font-size:1.02rem;
  transition:color .18s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.05rem;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current=page]{color:var(--orange-light);font-weight:600}
.nav a[aria-current=page]::after{display:none}

/* El selector va DELANTE de los enlaces (ver «Slider 1 pelirroja
   actualizado»), así que el aire sobrante va por la derecha, no por la
   izquierda como cuando cerraba el menú. */
.lang{display:flex;align-items:center;gap:.15rem;margin-right:.4rem;
  font-size:.85rem;font-weight:600;letter-spacing:.06em}
.lang a{padding:.3rem .45rem;border-radius:4px;opacity:.62}
.lang a:hover{opacity:1}
.lang a[aria-current=true]{opacity:1;color:var(--orange-light)}
.lang span{opacity:.4}

.burger{display:none;width:46px;height:46px;position:relative;z-index:80;
  border-radius:8px;color:inherit}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:currentColor;
  border-radius:2px;transition:transform .3s var(--ease),opacity .2s linear}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.burger i:nth-child(3){top:28px}
body.nav-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){opacity:0}
body.nav-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .burger{display:block}
  .nav{
    position:fixed;inset:0;z-index:70;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.4rem;padding:6rem var(--gut) 3rem;
    background:var(--grad-cyber);color:#fff;
    transform:translateX(100%);transition:transform .38s var(--ease);
    overflow-y:auto;
  }
  body.nav-open .nav{transform:none}
  body.nav-open{overflow:hidden}
  .nav a{font-size:1.6rem;font-weight:300;padding:.55rem 0}
  .hdr--onlight .nav{color:#fff}
  /* En el panel desplegable el selector sigue yendo al final, que es donde se
     espera en un menú móvil. En el HTML va primero porque es el orden del
     diseño de escritorio; aquí lo recoloca `order` sin tocar el marcado. */
  .lang{order:1;margin:1.6rem 0 0;font-size:1rem}
}

/* ----------------------------------------------------------------- 9. Hero */
.hero{position:relative;isolation:isolate;background:var(--cyber-ink);
  min-height:clamp(460px,62vw,760px);display:grid}
.hero__slides{position:absolute;inset:0;z-index:-2}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero__slide[data-active]{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,48,53,.5) 0%,rgba(8,48,53,.12) 34%,
    rgba(8,48,53,.1) 55%,rgba(8,48,53,.62) 100%)}
.hero__body{
  position:relative;z-index:2;align-self:end;
  padding-block:clamp(2rem,5vw,4.2rem) clamp(3.2rem,6vw,4.6rem);
  color:#fff;
}
.hero__titles{display:grid}
.hero__titles>*{grid-area:1/1;max-width:19ch;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .85s var(--ease),visibility 0s linear .85s}
.hero__titles>[data-active]{opacity:1;visibility:visible;
  transition:opacity .85s var(--ease),visibility 0s}
.hero__ttl>span{display:block;overflow:hidden}
.hero__ttl b{display:block;font-weight:inherit;
  animation:heroIn .9s var(--ease) both}
@keyframes heroIn{from{transform:translateY(105%)}to{transform:none}}
.hero .btn-row{margin-top:clamp(1.5rem,3vw,2.2rem)}
/* Los del slider son más pequeños que el resto: 40 px de alto y 6 de radio
   sobre el lienzo de 1440, frente a los 58 y 10 del botón grande del CTA. */
.hero .btn{min-height:40px;padding:.45rem 1.5rem;border-radius:6px;
  font-size:.94rem}
.hero__dots{position:absolute;left:50%;bottom:clamp(1rem,2.4vw,1.7rem);
  z-index:3;transform:translateX(-50%);display:flex;gap:.6rem}
.hero__dots button{width:11px;height:11px;border-radius:50%;
  background:rgba(255,255,255,.42);transition:background .2s,transform .2s}
.hero__dots button:hover{transform:scale(1.2)}
.hero__dots button[aria-selected=true]{background:#fff}

/* Cabecera compacta para páginas interiores */
.pagehead{position:relative;isolation:isolate;background:var(--grad-cyber);
  padding-block:calc(var(--hdr) + clamp(2.4rem,5vw,4.5rem)) clamp(2.4rem,5vw,4rem);
  color:#fff}
.pagehead--media{background:var(--cyber-ink);min-height:clamp(380px,44vw,620px);
  display:grid;align-items:end}
.pagehead__media{position:absolute;inset:0;z-index:-2}
.pagehead__media img,.pagehead__media video{width:100%;height:100%;object-fit:cover}
.pagehead--media::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,48,53,.42),rgba(8,48,53,.05) 45%,rgba(8,48,53,.5))}
.pagehead__brand{display:flex;justify-content:center;
  padding-block:clamp(2rem,5vw,3.5rem) 0}

/* ------------------------------------------------- 10. Bloque cyberblue */
.cyber{position:relative;background:var(--grad-cyber);color:#fff}
.cyber--soft{background:var(--grad-cyber-soft)}
.cyber .lede,.cyber p{color:rgba(255,255,255,.94)}
/* Proporciones tomadas de la maqueta (lienzo 1441): el titular ocupa hasta el
   59,5% de la caja de contenido y la columna de texto el 33,4%, con una calle
   del 4,5%. Antes el titular era demasiado pequeño y la columna demasiado
   ancha, así que el bloque no tenía el contraste de tamaños del diseño. */
.claim-grid{
  display:grid;gap:clamp(1.8rem,4.5%,3.5rem);
  grid-template-columns:minmax(0,1.78fr) minmax(0,1fr);align-items:start;
}
/* 100 px sobre el lienzo de 1441 de la maqueta = 6,94vw. No se toca
   .display--sm porque esa clase la comparten 404, Nosotros y el «PUT SIMPLY»
   de FAQs, que no van a este tamaño. */
/* El tope es 6rem y no 7: .shell deja de crecer sobre los 1280 px, pero el
   cuerpo seguía subiendo con el vw hasta 112 px, y a partir de ~1400 px la
   línea más larga se salía de su columna. En español «EL CUMPLIMIENTO» medía
   810 px en una columna de 695 y a 1920 se montaba 64 px sobre el párrafo; en
   inglés «COMPLIANCE» se salía 6 px. A 96 px la línea larga cabe justa y
   vuelve a haber los 51 px de calle del diseño en todas las anchuras. */
.claim-grid__ttl{text-align:right;font-size:clamp(2rem,6.94vw,6rem);
  line-height:1.07}
/* 17 px sobre 1441 en la maqueta */
.claim-grid .fine{font-size:clamp(1rem,1.18vw,1.16rem);line-height:1.55}
@media (max-width:860px){
  .claim-grid{grid-template-columns:1fr}
  .claim-grid__ttl{text-align:left}
}

/* --------------------------------------------------- 11. Cómo funciona (3) */
/* Los tres elementos, rehechos contra la maqueta. Lo que estaba mal antes:
   - los títulos iban a 21 px y en el diseño van a 33; y en color teal oscuro
     cuando en el diseño son casi negros
   - los paréntesis eran el carácter «(» de la fuente, fino y colgado arriba;
     en el diseño son dos arcos gruesos que envuelven todo el bloque
   - el chevron iba dentro de la tercera columna y en el diseño va ENTRE la
     segunda y la tercera
   - el icono de los cuadrados no se parecía: son dos rectángulos redondeados
     de trazo grueso, el grande arriba a la derecha y el pequeño encajado en
     su esquina inferior izquierda
   Medidas de la maqueta (lienzo 1441): título 33 px, subtexto 15 px, arcos de
   30x146 con trazo 16, chevron de 87x83 con trazo 13, icono de 120x119 con
   trazo 12 y radio 18.                                                      */
.pillars{
  --pgap:clamp(1.5rem,3.4vw,2.8rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--pgap);align-items:start;
  margin-top:clamp(2.6rem,5.2vw,4rem);
}
.pillar{position:relative;text-align:center;
  padding-inline:clamp(1.6rem,3.4vw,3.2rem)}
/* El tercer bloque corre su TÍTULO a la izquierda para dejar libre la esquina
   donde va el icono; la maqueta hace lo mismo (unos 26 px de desplazamiento).
   Solo el título: cuando el desplazamiento estaba en el padding del pilar,
   estrechaba también el subtexto y le salía una tercera línea donde la maqueta
   tiene dos. */
.pillar--sep .pillar__ttl{margin-left:auto;
  margin-right:clamp(1.2rem,3.6vw,3.6rem)}
/* El ancho del texto es lo que deja sitio a los adornos. En la maqueta cada
   bloque de texto ocupa unos 230 px de los 379 de su columna, y en esos huecos
   laterales entran los arcos, el chevron y el icono. Sin este límite el texto
   llenaba la columna y los tres adornos se le montaban encima. */
.pillar__ttl{font-size:clamp(1.15rem,2.29vw,2.3rem);font-weight:500;
  line-height:1.1;color:var(--ink);text-wrap:balance;
  max-width:7.2em;margin-inline:auto}
.pillar__txt{margin-top:clamp(.9rem,2.2vw,1.7rem);
  font-size:clamp(.82rem,1.04vw,1.02rem);font-weight:700;line-height:1.22;
  color:var(--ink);max-width:23ch;margin-inline:auto}

/* --- arcos de la primera columna --- */
.pillar--brackets::before,.pillar--brackets::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(14px,2.1vw,32px);
  background:no-repeat center/100% 100%}
.pillar--brackets::before{left:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 146' preserveAspectRatio='none'%3E%3Cpath d='M23 8 Q-6 73 23 138' fill='none' stroke='%23E98D3F' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E")}
.pillar--brackets::after{right:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 146' preserveAspectRatio='none'%3E%3Cpath d='M7 8 Q36 73 7 138' fill='none' stroke='%23E98D3F' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E")}

/* --- chevron: centrado en la calle entre la 2ª y la 3ª columna ---
   right:100% lo deja con su borde derecho en el canto izquierdo del tercer
   bloque; el primer translate lo centra en ese canto y el segundo lo corre
   media calle a la izquierda, así queda justo en medio del hueco. */
.pillar--sep::before{
  content:"";position:absolute;top:clamp(.4rem,1.2vw,1.1rem);right:100%;
  transform:translateX(50%) translateX(calc(var(--pgap,2rem) / -2));
  width:clamp(34px,6.04vw,92px);aspect-ratio:87/83;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 87 83'%3E%3Cpath d='M9 8 L78 41.5 L9 75' fill='none' stroke='%23E98D3F' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* --- icono de cuadrados: arriba a la derecha del tercer bloque ---
   en la maqueta asoma unos 28 px por fuera de la caja de contenido */
.pillar__icon{position:absolute;top:calc(-1 * clamp(.6rem,1.8vw,1.6rem));
  right:calc(-1 * clamp(0px,1.9vw,30px));
  width:clamp(56px,8.3vw,126px);aspect-ratio:1}

/* Va a 27 px y no a los 28 de la maqueta para que la frase entre en una sola
   línea dentro del .shell, como en el diseño: a 28 se pasaba por unos pocos
   píxeles y partía «source of trust» a una segunda línea. */
.pillars__note{margin-top:clamp(2.6rem,5.6vw,4.4rem);text-align:center;
  font-size:clamp(1.05rem,1.88vw,1.9rem);font-weight:600;line-height:1.3;
  color:var(--ink);text-wrap:balance}
@media (max-width:900px){
  .pillar__icon{width:clamp(52px,9vw,84px)}
  .pillar--sep::before{width:clamp(30px,5vw,54px)}
}
/* Apilado en una sola columna los tres adornos cambian de papel, así que se
   recolocan en vez de dejarlos donde caigan (AIV-360):
   - los arcos se separan del borde de la pantalla y bajan de grosor;
   - el chevron ya no separa columnas: gira 90º y marca el salto de un bloque
     al siguiente, centrado en la calle que hay sobre el tercero;
   - el icono de cuadrados sale del flujo absoluto y se pone encima del
     título, que en columna estrecha se le montaba encima. */
@media (max-width:760px){
  .pillars{grid-template-columns:1fr;gap:3.4rem}
  /* El tope de ancho es lo que mantiene los arcos pegados al texto: sin él,
     entre 700 y 760 px el bloque ocupaba toda la fila y los arcos se iban a
     los bordes de la pantalla, lejos de la frase que abrazan. */
  .pillar{max-width:26rem;margin-inline:auto;
    padding-inline:clamp(2.4rem,10vw,3.6rem)}
  .pillar--brackets::before,.pillar--brackets::after{width:15px}
  .pillar--brackets::before{left:.7rem}
  .pillar--brackets::after{right:.7rem}
  /* El chevron deja de vivir en la calle a la izquierda del tercer bloque: no
     hay columnas que separar. Pasa al SEGUNDO bloque y se coloca exactamente
     igual que el icono de cuadrados en el tercero — misma esquina, mismo
     tamaño, sin girar — para que los dos adornos se lean como una pareja.
     Se dibuja como ::before del segundo pilar y se apaga el original.
     El trazo baja de 13 a 9 porque los dos SVG no comparten proporción: el
     chevron lleva 13 sobre un lienzo de 87 (15%) y el icono 12 sobre 120
     (10%), así que a igual tamaño el 13 se veía mucho más gordo. */
  .pillar--sep::before{display:none}
  .pillars .pillar:nth-child(2)::before{
    content:"";position:absolute;top:-.2rem;right:1.2rem;width:44px;
    aspect-ratio:87/83;
    background:no-repeat center/100% 100%
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 87 83'%3E%3Cpath d='M9 8 L78 41.5 L9 75' fill='none' stroke='%23E98D3F' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  /* El icono vuelve a su esquina de la maqueta, pero más pequeño y con el
     título estrechado para que no se le monte encima. Los dos títulos con
     adorno se estrechan igual, para que ambos bloques queden simétricos. */
  .pillar__icon{top:-.2rem;right:1.2rem;width:44px;margin:0}
  .pillar--sep .pillar__ttl,
  .pillars .pillar:nth-child(2) .pillar__ttl{
    margin-left:0;margin-right:3.6rem;max-width:9em}
}

/* ------------------------------------------------- 12. Banda con titular */
.bandttl{position:relative;isolation:isolate;display:grid;place-items:center;
  min-height:clamp(64px,7vw,96px);padding:1rem var(--gut);
  background:var(--grad-panel);overflow:hidden}
.bandttl::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(51,50,47,.55),rgba(51,50,47,0) 55%)}
.bandttl h2{color:#fff;text-align:center;font-weight:300;
  font-size:clamp(1.2rem,2.9vw,2.1rem);line-height:1.15;
  text-shadow:0 1px 12px rgba(51,50,47,.35)}
.fullshot{display:block;width:100%}
.fullshot img{width:100%;height:clamp(200px,26vw,420px);object-fit:cover;
  object-position:var(--pos,50% 50%)}

/* En la maqueta el titular "Una sola solución…" NO va en una banda gris
   aparte: cabalga la franja superior de la propia foto. Se mantiene un velo
   muy suave para que el texto blanco siga legible sobre la parte clara de la
   imagen, que es donde cae en el diseño. */
.fullshot--ttl{position:relative;isolation:isolate;display:block}
.fullshot--ttl img{height:clamp(240px,30vw,470px)}
/* 57 px sobre el lienzo de 1441 de la maqueta = 3,95vw, y con algo más de
   peso: a este tamaño el 300 se quedaba flojo sobre la foto. */
.fullshot__ttl{
  position:absolute;top:0;left:0;right:0;z-index:2;
  padding:clamp(1.2rem,3.2vw,2.6rem) var(--gut) clamp(1.6rem,4vw,3rem);
  text-align:center;color:#fff;font-weight:400;
  font-size:clamp(1.25rem,3.95vw,4rem);line-height:1.12;
  text-shadow:0 1px 14px rgba(51,50,47,.45);
  background:linear-gradient(180deg,rgba(51,50,47,.34),rgba(51,50,47,0))}

/* --------------------------------------------------- 13. Dos audiencias */
.audience{display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.audience h3{font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cyber)}
.audience ul{margin-top:1.1rem;display:grid;gap:.5rem}
.audience li{position:relative;padding-left:1.05rem;font-size:.92rem;
  line-height:1.55;color:var(--wg-900)}
.audience li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--orange)}
@media (max-width:760px){.audience{grid-template-columns:1fr}}

/* ------------------------------------------------- 14. The moment is now */
/* En la maqueta el titular NO vive en la columna de texto: es una sola línea
   que cruza toda la sección, y «IS NOW» cae encima de la foto justo porque la
   línea llega hasta ahí. Antes estaba dentro de .moment__txt y por eso se
   quedaba corto y las dos mitades caían las dos sobre el panel gris.

   El tamaño se calcula, no se fija: --em lo pone el build con el ancho real de
   la cadena en la fuente (ver tools/fontwidth.py), así la línea ocupa el 93%
   del ancho tanto en inglés como en español, que es más largo. Con un vw fijo
   el español se salía. */
.moment{position:relative;background:var(--slate);color:#fff;overflow:hidden}
/* El alto mínimo va en la rejilla, no en la sección. Puesto en la sección, si
   la rejilla salía más baja que ese mínimo sobraba una banda del gris de fondo
   por debajo de la foto. Aquí lo que crece es la propia rejilla, y la foto, que
   va a align stretch, la acompaña hasta el final. */
.moment__ttl{
  position:absolute;top:clamp(.6rem,3.1vw,2.6rem);left:0;right:0;z-index:3;
  padding-left:2vw;pointer-events:none;
  font-weight:200;line-height:1;letter-spacing:-.005em;
  text-transform:uppercase;white-space:nowrap;
  /* 90 y no 93: el ancho de la cadena se mide sin kerning y sin contar el
     rebase de tinta del último trazo, así que conviene dejar holgura. Con 93
     la T de THE llegaba a rozar el borde según la resolución. */
  font-size:calc(90vw / var(--em,10.4))}
/* La foto ocupa el 38% del ancho, como en la maqueta, para que «IS NOW» caiga
   sobre ella. */
.moment__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.613fr);
  align-items:stretch;min-height:clamp(420px,48.5vw,760px)}
/* el hueco de arriba deja pasar el titular, que va en absoluto */
.moment__txt{padding:clamp(5.5rem,15vw,16rem) 0 clamp(2.5rem,5.5vw,4.5rem);
  padding-right:clamp(1rem,3vw,3rem);display:flex;flex-direction:column;
  gap:clamp(1.4rem,3.3vw,2.6rem)}
.moment__ttl em{font-style:normal;color:var(--orange)}
/* 36 px sobre 1441 en la maqueta, y alineado a la derecha como la lista */
.moment__lead{max-width:34ch;margin-left:auto;text-align:right;font-weight:300;
  font-size:clamp(1.1rem,2.5vw,2.4rem);line-height:1.34}
/* 42ch y no 30: en inglés los seis rótulos son etiquetas de una línea, y en
   español (AIV-380) son frases y a 30ch partían todos en dos, dejando once
   líneas apelotonadas contra la foto. A 42ch vuelven a una línea cada uno; el
   inglés no cambia porque su ancho natural es menor y max-width solo recorta. */
.moment__list{text-align:right;display:grid;gap:.3rem;font-size:.9rem;
  color:rgba(255,255,255,.9);max-width:42ch;margin-left:auto}
.moment__shot{position:relative;min-height:100%}
.moment__shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%}
/* En la maqueta la foto llega al borde derecho del lienzo. Al vivir dentro de
   .shell--wide se quedaba con la calle del gutter (y la banda del centrado en
   pantallas > 1440 px) a la derecha. Se recupera ese ancho a sangre. */
@media (min-width:861px){
  .moment__shot{
    margin-right:calc(-1 * (var(--gut) + (100vw - min(100vw,1440px)) / 2))}
}
@media (max-width:860px){
  .moment{min-height:0;padding-top:clamp(1.4rem,5vw,2.4rem)}
  .moment__grid{grid-template-columns:1fr}
  /* en una columna el titular no puede cabalgar nada: vuelve al flujo y parte
     en varias líneas */
  .moment__ttl{position:static;white-space:normal;padding:0 var(--gut);
    font-size:clamp(2.2rem,10.5vw,4.2rem)}
  .moment__txt{padding-top:clamp(1.6rem,5vw,2.6rem)}
  .moment__shot{min-height:320px}
  .moment__shot img{position:relative}
  .moment__lead{text-align:left;margin-left:0}
  .moment__list{text-align:left;margin-left:0}
}

/* ------------------------------------------------------- 15. CTA a sangre */
.cta{position:relative;isolation:isolate;display:grid;align-items:center;
  min-height:clamp(420px,46vw,660px);color:#fff;background:var(--cyber-ink)}
/* La maqueta da a esta sección 1755 px de alto sobre 1441 de ancho: es una
   banda casi vertical, y por eso se ve la foto entera (la cámara arriba a la
   izquierda, los dos paraguas y el suelo mojado). Con los 46vw de antes se
   quedaba en una tira y la foto salía recortadísima. El asset se regeneró a
   esta misma proporción desde el original (ver tools/build.py, guided-tour). */
.cta--tall{min-height:clamp(560px,118vw,1900px);align-items:start}
.cta--tall .shell{padding-top:clamp(2.5rem,11vw,12rem)}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 62%}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(20,32,36,.82) 0%,rgba(20,32,36,.55) 45%,
    rgba(20,32,36,.12) 78%)}
/* 43vw es el ancho del bloque de texto en la maqueta (615 px sobre 1441). Con
   un porcentaje del .shell salía más estrecho y el titular se partía en seis
   líneas donde el diseño tiene cuatro. */
.cta__body{position:relative;z-index:2;max-width:min(46rem,43vw);
  padding-block:clamp(3rem,6vw,4.5rem)}
/* Variante para secciones donde la foto manda y el texto es un rótulo corto
   (p. ej. "Put Simply…"): velo suave y solo en la parte baja. */
.cta--soft{align-items:end}
.cta--soft::after{background:linear-gradient(180deg,rgba(20,32,36,.30) 0%,
  rgba(20,32,36,.02) 40%,rgba(20,32,36,.60) 100%)}
.cta--soft .shell{padding-bottom:clamp(1.6rem,4vw,3rem)}
/* 63 y 56 px sobre el lienzo de 1441 de la maqueta */
.cta__lead{font-weight:300;line-height:1.2;
  font-size:clamp(1.35rem,4.37vw,4.4rem)}
.cta__hook{margin-top:clamp(1.6rem,4.6vw,4rem);font-weight:600;line-height:1.2;
  font-size:clamp(1.2rem,3.89vw,3.9rem)}
.cta .btn{margin-top:clamp(1.6rem,3.4vw,2.4rem)}
/* En móvil los 43vw dejaban el bloque en unos 168 px: el titular se partía en
   ocho líneas dentro del tercio izquierdo y el botón salía como un ladrillo
   naranja de tres líneas que no se leía como botón (AIV-361). Apilado no hay
   nada a la derecha que proteger, así que el bloque ocupa el ancho útil y el
   botón va a línea completa con su altura normal. */
@media (max-width:760px){
  .cta__body{max-width:none}
  .cta__body .btn{display:flex;width:100%}
}

/* -------------------------------------------- 16. Titular a caballo (split) */
.straddle{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  min-height:clamp(280px,34vw,520px)}
.straddle__txt{padding:clamp(2.5rem,5.5vw,5rem) clamp(1.5rem,3.5vw,3.5rem)}
/* La foto cubre la mitad derecha de la sección ENTERA, de arriba abajo.
   Antes era una celda de la rejilla, en la fila del medio, y los dos titulares
   cabalgan los bordes superior e inferior: la mitad blanca de cada uno caía por
   fuera de la imagen, blanco sobre blanco, y se perdían las puntas de las
   letras. En la maqueta la foto llega a los dos extremos del bloque y los
   titulares caen enteros encima.

   Va en absoluto y no como celda que abarque filas, porque el titular de abajo
   ocupa las dos columnas: si la foto abarca filas, ese titular no cabe en
   ninguna y la rejilla le abre una cuarta fila por debajo de la foto. */
.straddle__shot{position:absolute;inset:0 0 0 50%;z-index:1}
.straddle__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.straddle__txt{position:relative;z-index:2}
/* El titular cabalga la frontera de las dos columnas: la mitad izquierda cae
   sobre fondo claro (gris) y la derecha sobre la foto (blanco). El corte del
   degradado coincide con el 50% de la rejilla. Por eso el texto tiene que
   cruzar ese punto: se dimensiona para ocupar casi todo el ancho. */
/* El tamaño no puede ser un vw fijo: con 9,5vw «ONE ORGANIZATION» medía más
   que la página, así que centrarlo no servía de nada y las últimas letras se
   salían por la derecha (y en español, más largo, peor). Ahora se divide el
   ancho disponible entre el ancho real de la cadena en la fuente, que lo mide
   tools/fontwidth.py y lo inyecta el build en --em. Los dos titulares de la
   página comparten el mismo --em (el del más largo) para que salgan al mismo
   cuerpo, como en la maqueta, y el corto simplemente ocupe menos. */
.straddle__ttl{
  position:relative;z-index:3;grid-column:1/-1;
  font-weight:200;line-height:1;text-transform:uppercase;text-align:center;
  font-size:calc(85vw / var(--em,9.7));white-space:nowrap;pointer-events:none;
  background:linear-gradient(90deg,var(--wg-900) 0 50%,#fff 50% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.straddle__ttl--top{margin-bottom:-.60em}
.straddle__ttl--bottom{margin-top:-.60em}
/* hueco para que el titular que cabalga no pise el párrafo */
.straddle__txt{padding-top:clamp(3.5rem,7vw,6.5rem);
  padding-bottom:clamp(3.5rem,7vw,6.5rem)}
/* 22 px sobre 1441 en la maqueta, en negrita y con mucho aire entre líneas */
.straddle__txt .lede{font-size:clamp(1.02rem,1.53vw,1.45rem);
  font-weight:600;line-height:2.4}
@media (max-width:860px){
  .straddle{grid-template-columns:1fr;min-height:0}
  /* en una columna la foto vuelve al flujo, debajo del texto */
  .straddle__shot{position:relative;inset:auto;min-height:clamp(240px,50vw,420px)}
  .straddle__ttl{white-space:normal;background:none;color:var(--wg-900);
    -webkit-text-fill-color:currentColor;padding-inline:var(--gut);
    font-size:clamp(2.2rem,10.5vw,4.2rem)}
  .straddle__txt .lede{line-height:1.7}
  .straddle__ttl--top,.straddle__ttl--bottom{margin:0;padding-block:1rem}
  .straddle__txt{text-align:left!important}
}

/* -------------------------------------------------- 17. Sección oscura foto */
.dark{position:relative;isolation:isolate;color:#fff;background:#06131A;
  min-height:clamp(520px,58vw,820px);display:grid;align-content:space-between;
  padding-block:clamp(2.5rem,5.5vw,4.5rem)}
.dark__bg{position:absolute;inset:0;z-index:-2}
.dark__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.dark::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,19,26,.62) 0%,rgba(6,19,26,.06) 45%,
    rgba(6,19,26,.34) 100%)}
.dark__top{position:relative;z-index:2;max-width:44rem}
.dark__bottom{position:relative;z-index:2;margin-top:clamp(3rem,10vw,8rem);
  margin-left:auto;max-width:34rem;text-align:right;
  font-weight:300;font-size:clamp(1rem,1.7vw,1.28rem);line-height:1.5}

/* ------------------------------------------------- 18. Tarjeta explicativa */
.explain{max-width:640px;margin-inline:auto;padding:clamp(1.6rem,3.4vw,2.6rem);
  background:var(--slate);color:#fff;text-align:center}
.explain h2{font-weight:300;font-size:clamp(1.4rem,2.8vw,2.05rem);
  color:rgba(255,255,255,.96)}
.explain__icon{margin:clamp(1.4rem,3vw,2rem) auto;width:min(64%,340px)}
.explain p{font-size:.85rem;line-height:1.62;color:rgba(255,255,255,.88)}

/* --------------------------------------------------------- 19. Acordeón FAQ
   En la maqueta el bloque no está centrado: ocupa casi todo el ancho y queda
   desplazado a la derecha, y las preguntas van indentadas respecto al titular.
   -------------------------------------------------------------------------- */
.faq{max-width:1150px;margin-left:auto;margin-right:0}
.faq__ttl{font-weight:300;font-size:clamp(1.7rem,4.2vw,2.9rem);color:#fff;
  padding-bottom:clamp(.8rem,2vw,1.3rem);
  border-bottom:1px solid rgba(255,255,255,.42)}
.acc{margin-top:clamp(1.4rem,3vw,2.4rem)}
/* Las preguntas entran hacia dentro; el titular y su filete se quedan en el
   borde. Solo en pantallas anchas: en móvil sería perder espacio útil. */
@media (min-width:900px){.acc{padding-left:19%}}
.acc__item{border-bottom:1px solid rgba(255,255,255,.26)}
.acc__item h2{margin:0;font-size:inherit;font-weight:inherit}
.acc__btn{display:flex;align-items:flex-start;gap:1.5rem;width:100%;
  padding:1.05rem .25rem;text-align:left;color:#fff;font-size:1rem;
  font-weight:500;line-height:1.45;transition:color .18s var(--ease)}
.acc__btn:hover{color:var(--orange-light)}
/* solo el texto crece; el signo "+" conserva su tamaño */
.acc__btn>span:not(.acc__sign){flex:1 1 auto}
.acc__sign{flex:0 0 auto;position:relative;width:18px;height:18px;margin-top:.28em;
  color:var(--orange-light)}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;
  background:currentColor;border-radius:1px;transition:transform .28s var(--ease)}
.acc__sign::before{left:0;right:0;top:8px;height:2px}
.acc__sign::after{top:0;bottom:0;left:8px;width:2px}
.acc__btn[aria-expanded=true] .acc__sign::after{transform:scaleY(0)}
.acc__panel{overflow:hidden;height:0;transition:height .34s var(--ease)}
.acc__inner{padding:0 3rem 1.4rem .25rem;color:rgba(255,255,255,.9);
  font-size:.95rem;font-weight:300;line-height:1.62}
.acc__inner>*+*{margin-top:.8em}

/* -------------------------------------------------------- 20. Is / Is not */
.isnot{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:920px;margin-inline:auto}
.isnot h2{font-weight:300;font-size:clamp(1.5rem,3.2vw,2.3rem);color:var(--wg-900)}
.isnot ul{margin-top:clamp(1.2rem,2.6vw,1.9rem);display:grid;gap:.9rem;
  font-size:.92rem;line-height:1.5;color:var(--wg-900)}
.isnot--right{text-align:right}
@media (max-width:700px){
  .isnot{grid-template-columns:1fr}
  .isnot--right{text-align:left}
}

/* ------------------------------------------------- 21. Contacto (split) */
/* El 1.02/0.98 dejaba la costura descuadrada y, con el degradado del panel
   terminando en un gris más claro que la foto, se leía como una línea vertical
   clara entre las dos mitades. En la maqueta el corte está justo al 50% y las
   dos piezas se tocan sin junta. */
.contact{display:grid;grid-template-columns:1fr 1fr;
  min-height:100vh;min-height:100svh}
.contact__panel{position:relative;background:var(--grad-panel);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,4.5rem)
          clamp(2.5rem,5vw,4rem)}
.contact__panel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(51,50,47,.4),rgba(51,50,47,0) 60%);
  pointer-events:none}
.contact__panel>*{position:relative;z-index:1}
.contact__brand{margin-bottom:clamp(1.8rem,4vw,3rem)}
.contact__ttl{font-weight:200;line-height:1.04;color:#fff;
  font-size:clamp(2.1rem,4.6vw,3.6rem)}
.contact__lead{margin-top:clamp(1rem,2.2vw,1.6rem);max-width:46ch;
  font-weight:300;font-size:clamp(.98rem,1.35vw,1.12rem);line-height:1.5;
  color:rgba(255,255,255,.95)}
/* Sin filete: en la maqueta el correo va como una línea más del texto, y el
   border-bottom cruzaba toda la columna y parecía un separador del formulario.
   El subrayado se guarda para el hover, que ahí sí ayuda. */
.contact__mail{display:inline-block;margin-top:.9rem;font-size:1.15rem;
  font-weight:600;color:#fff;border-bottom:1px solid transparent}
.contact__mail:hover{color:var(--cyber-dark);border-color:currentColor}
/* El logo vive en la cabecera, que va en un .shell de 1440 centrado; a partir
   de ahí se separaba del titular del panel, que sigue el padding del panel. En
   la maqueta los dos arrancan en la misma vertical, así que en esta página la
   cabecera abandona el shell y adopta el mismo padding que el panel. */
.hdr--scrim .hdr__inner{max-width:none;
  padding-inline:clamp(1.5rem,4vw,4.5rem)}
.contact__shot{position:relative;min-height:320px}
.contact__shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 50%}
@media (max-width:900px){
  .contact{grid-template-columns:1fr;min-height:0}
  .contact__shot{min-height:46vw;order:-1}
}

/* -------------------------------------------------------- 22. Formulario */
.form{margin-top:clamp(1.6rem,3.4vw,2.6rem)}
.form__row{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:.85rem}
.form__field{position:relative;margin-bottom:.85rem}
.form input,.form textarea{
  width:100%;padding:1rem 1.2rem;border:1.5px solid transparent;border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:1rem;
  box-shadow:0 2px 10px -6px rgba(51,50,47,.3);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.form textarea{min-height:150px;resize:vertical;border-radius:14px}
.form input::placeholder,.form textarea::placeholder{color:#8B8781;opacity:1}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(242,140,72,.22)}
.form input[aria-invalid=true],.form textarea[aria-invalid=true]{
  border-color:#C2411F;box-shadow:0 0 0 4px rgba(194,65,31,.16)}
.form__err{display:block;min-height:0;margin:.35rem .3rem 0;font-size:.8rem;
  font-weight:600;color:#7A2A12}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem;margin-top:1.1rem}
.form__req{font-size:.85rem;color:var(--ink)}
.form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0}
.form__note{margin-top:1rem;font-size:.78rem;line-height:1.5;
  color:rgba(255,255,255,.85);max-width:52ch}
.form__note a{text-decoration:underline}
.form__status{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;
  font-size:.92rem;font-weight:600;display:none}
.form__status[data-state=ok]{display:block;background:rgba(0,164,153,.16);
  color:#04352F;border:1px solid rgba(0,164,153,.5)}
.form__status[data-state=err]{display:block;background:rgba(194,65,31,.14);
  color:#5E1F0C;border:1px solid rgba(194,65,31,.45)}
.form__status[data-state=busy]{display:block;background:rgba(255,255,255,.3);
  color:var(--ink)}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}

/* --------------------------------------------------------------- 23. Footer */
.ftr{position:relative;background:var(--grad-footer);color:#fff}
.ftr__inner{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;
  padding-block:clamp(1.1rem,2vw,1.5rem)}
.ftr__brand{flex:0 0 auto}
.ftr__brand img{height:clamp(26px,2.6vw,34px);width:auto}
.ftr__links{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;
  margin-left:auto;font-size:.78rem;color:rgba(255,255,255,.92)}
.ftr__links a:hover{text-decoration:underline}
.ftr__social{display:flex;gap:.7rem;flex:0 0 auto}
.ftr__social a{display:grid;place-items:center;width:34px;height:34px;
  border-radius:6px;color:#fff;transition:background .2s var(--ease)}
.ftr__social a:hover{background:rgba(255,255,255,.2)}
.ftr__social svg{width:26px;height:26px;fill:currentColor}
@media (max-width:700px){
  .ftr__inner{flex-direction:column;align-items:flex-start}
  .ftr__links{margin-left:0}
}

/* ---------------------------------------------------------- 24. Nosotros */
/* Medidas tomadas de la maqueta «ABOUT web lanzamiento Aivacy-01» (lienzo de
   3000 px = los 1441 del diseño). */

/* --- cabecera partida: foto 43,67% / panel 56,33%, 936 px de alto = 64,95vw.
   El logotipo cae sobre la foto y el menú sobre el panel, que es justo lo que
   hace la cabecera normal del sitio (va en absoluto): aquí solo hay que
   dejarle sitio por arriba dentro del panel. */
.abhero{display:grid;grid-template-columns:43.67fr 56.33fr;
  background:var(--cyber-ink)}
.abhero__shot{position:relative;min-height:clamp(560px,64.95vw,1000px)}
.abhero__shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%}
.abhero__panel{display:grid;align-items:center;
  background:var(--grad-cyber);color:#fff}
/* Medidas del panel sobre el lienzo de 1441: el texto arranca a 104 px del
   canto del panel (7,22vw) y la caja de texto mide 545 (37,8vw). Ese ancho es
   el que parte el titular donde lo parte la maqueta —«KNOWLEDGE / ONLY HAS /
   IMPACT WHEN / IT IS SHARED.»—: con la caja más ancha, «KNOWLEDGE ONLY»
   entraba en una sola línea y el bloque se quedaba en tres. */
.abhero__body{max-width:47.06vw;
  padding:calc(var(--hdr) + clamp(1rem,2vw,2rem)) clamp(1.25rem,2vw,2rem)
          clamp(2rem,4vw,3.5rem) clamp(1.5rem,7.22vw,7.3rem)}
/* 73 px sobre 1441, con el interlineado casi macizo de la maqueta */
.abhero__ttl{font-size:clamp(1.9rem,5.07vw,5.2rem);line-height:.96;
  margin-bottom:clamp(1.2rem,3.5vw,3.5rem)}
.abhero__txt{font-size:clamp(.88rem,1.11vw,1.12rem);line-height:1.62}
.abhero__txt p{color:rgba(255,255,255,.92)}
/* el tercer párrafo va destacado en la maqueta */
.abhero__note{font-weight:700;color:#fff}
@media (max-width:860px){
  .abhero{grid-template-columns:1fr}
  /* apilada, la foto no tiene que sostener 936 px: basta una banda */
  .abhero__shot{min-height:clamp(300px,62vw,460px)}
  .abhero__shot img{position:relative}
  .abhero__body{max-width:none;padding-top:clamp(2rem,6vw,3rem);
    padding-inline:var(--gut)}
  .abhero__ttl{font-size:clamp(1.9rem,8vw,3.2rem)}
}

/* --- «Aivacy goes beyond answers» -----------------------------------------
   Proporciones de la maqueta: titular 871 px, calle 59 y columna de texto 275,
   muy distintas del claim-grid de la home (1,78 / 1). El cuerpo del titular es
   92 px sobre 1441, no los 100 del de la home. Aquí se reparte sobre el ancho
   del .shell, así que las tres medidas bajan un 6% y la proporción se mantiene.
   El gris del texto es el mismo de las listas del resto del sitio. */
.claim-grid--ink{grid-template-columns:minmax(0,871fr) minmax(0,275fr)}
.claim-grid--ink .claim-grid__ttl{color:var(--wg-900);line-height:1.17;
  font-size:clamp(1.9rem,6.02vw,6.1rem)}
@media (max-width:860px){
  .claim-grid--ink{grid-template-columns:1fr}
}

/* --- «Aivacy exists because…» --- */
.exists{display:grid;gap:clamp(1.2rem,2.6vw,2.2rem);text-align:center}
/* 34 px sobre 1441: bastante menos que el «How Aivacy works?» de la home */
.exists .headline{font-size:clamp(1.3rem,2.36vw,2.4rem)}
/* 23 px y las cinco líneas casi pegadas, como en la maqueta */
.exists__list{display:grid;gap:0;font-weight:300;line-height:1.26;
  font-size:clamp(1rem,1.6vw,1.6rem)}
/* 734 px sobre 1441: el ancho que parte la frase en dos líneas donde la parte
   la maqueta */
.exists__note{font-weight:500;line-height:1.34;
  font-size:clamp(1.05rem,1.6vw,1.6rem);max-width:51vw;margin-inline:auto}

/* --- banda de la ciudad: 386 px de alto sobre 1441 = 26,8vw --- */
/* El reclamo y el botón van en el tercio alto de la banda, que es donde la
   foto todavía está lavada y el texto oscuro se lee. Centrados, caían a media
   banda, ya sobre los edificios. */
.band{position:relative;isolation:isolate;display:grid;align-items:start;
  min-height:clamp(300px,26.8vw,430px);
  padding-block:clamp(1.6rem,3.4vw,3.4rem) clamp(3.4rem,7vw,7rem)}
/* overflow:hidden aquí y no en .band, porque el titular tiene que poder
   asomar por debajo del borde de la banda. */
.band__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* El fundido a blanco viene dentro del JPG, no de un degradado CSS: el asset
   está recortado a la franja exacta de la maqueta (4016x1076 de la foto
   original, desde y=4450), con la misma curva de luminancia. Hacerlo en CSS
   obligaba a adivinar dónde empieza la ciudad y dejaba la mitad superior
   lavada. Al recortar a la proporción de la banda, `cover` no recorta nada en
   escritorio, y en móvil recorta a los lados, que es donde no hay degradado. */
.band__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.band__body{display:grid;justify-items:center;text-align:center;
  gap:clamp(.9rem,1.9vw,1.5rem)}
.band__lead{font-weight:600;font-size:clamp(1.05rem,1.6vw,1.6rem)}
/* «OUR PHILOSOPHY» cabalga el borde inferior de la banda: algo más de la mitad
   cae sobre la foto y el resto sobre el blanco de la sección siguiente. El
   cuerpo se calcula con el ancho real de la cadena, igual que en
   .moment__ttl, porque en español la línea es más larga y con un vw fijo se
   saldría de la página. */
.band__ttl{position:absolute;left:0;right:0;bottom:0;z-index:3;
  transform:translateY(48.5%);pointer-events:none;
  padding-inline:2vw;text-align:center;
  font-weight:200;line-height:1;letter-spacing:-.005em;
  text-transform:uppercase;white-space:nowrap;color:var(--wg-200);
  font-size:calc(85vw / var(--em,8.55))}
.band__ttl em{font-style:normal;color:var(--orange)}

/* --- credo y los tres principios --- */
/* 32 px sobre 1441 y una caja de 1046 de ancho: las tres frases caen en tres
   líneas, que es como están escritas (van separadas con <br>, no como
   párrafos: en la maqueta no hay aire extra entre ellas). */
.creed__txt{max-width:73vw;margin-inline:auto;font-weight:400;line-height:1.22;
  font-size:clamp(1.05rem,2.2vw,2.25rem)}
/* tres tarjetas de 324 con calles de 82 sobre los 1136 del .shell */
.beliefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,5.7vw,5.2rem);margin-block:clamp(2rem,4.4vw,3.6rem)}
.belief{display:grid;align-content:center;gap:.4rem;text-align:center;
  padding:clamp(1.1rem,2.3vw,1.9rem) clamp(.9rem,1.9vw,1.5rem);
  border-radius:10px;background:var(--cyber-dark);color:#fff;
  min-height:clamp(104px,11.24vw,180px)}
.belief h3{font-weight:500;font-size:clamp(1.02rem,1.67vw,1.7rem)}
.belief p{font-size:clamp(.8rem,1.04vw,1.05rem);line-height:1.34;
  color:rgba(255,255,255,.92)}
.creed__trust{text-align:center;line-height:1.22;text-wrap:balance;
  font-size:clamp(1.05rem,2.2vw,2.25rem)}
@media (max-width:760px){
  .beliefs{grid-template-columns:1fr;gap:.9rem}
  .belief{min-height:0}
  /* los topes en vw del diseño de escritorio dejaban estas dos frases en una
     columna de 200-285 px dentro de una pantalla de 390 */
  .exists__note,.creed__txt{max-width:none}
}

/* --- bloque final: gris 58,7% / foto 41,3%, 685 px de alto = 47,5vw --- */
.scale{display:grid;grid-template-columns:58.7fr 41.3fr;align-items:stretch;
  background:var(--wg-900);color:#fff}
.scale__txt{display:grid;align-items:center;
  padding-block:clamp(2.4rem,5vw,4.5rem);
  /* la columna de texto se alinea con la calle del resto del sitio, y en
     pantallas por encima de 1440 acompaña al centrado del .shell */
  padding-inline:max(clamp(1.25rem,6.8vw,6.9rem),
                     calc((100vw - 1440px) / 2 + var(--gut)))
                 clamp(1rem,2.5vw,2.5rem)}
/* El titular es más ancho que la columna de texto: en la maqueta los párrafos
   cortan a 651 px y «SCALE EXPERTISE.» llega a 690, en una sola línea. Con el
   mismo tope para los dos, esa línea se partía en «SCALE / EXPERTISE.». */
.scale__inner{display:grid;justify-items:start;gap:clamp(1.3rem,2.8vw,2.3rem);
  max-width:54.5vw}
.scale__txt .fine{max-width:45.2vw;
  font-size:clamp(.88rem,1.16vw,1.18rem);line-height:1.6}
/* 82 px sobre 1441, con el interlineado macizo de la maqueta */
.scale__ttl{font-size:clamp(1.9rem,5.69vw,5.8rem);line-height:.9}
.scale__txt p{color:rgba(255,255,255,.9)}
.scale__ttl em{font-style:normal;color:var(--orange)}
.scale__shot{position:relative;min-height:clamp(420px,47.5vw,760px)}
.scale__shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0}
@media (max-width:860px){
  .scale{grid-template-columns:1fr}
  .scale__inner{max-width:none}
  .scale__txt .fine{max-width:none}
  .scale__shot{min-height:clamp(280px,62vw,440px)}
  .scale__shot img{position:relative}
}

/* ------------------------------------------------------------ 25. Legales */
.legal{max-width:52rem}
.legal h2{margin-top:2.4rem;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;
  color:var(--cyber-dark)}
.legal h3{margin-top:1.6rem;font-size:1.02rem;font-weight:600;color:var(--wg-900)}
.legal p,.legal li{font-size:.98rem;line-height:1.68}
.legal p+p{margin-top:.9rem}
/* Un párrafo detrás de una lista o de una tabla también necesita su aire: sin
   esto, el texto que sigue a la lista de derechos arrancaba pegado al último
   punto y parecía otra viñeta más. */
.legal ul+p,.legal table+p{margin-top:.9rem}
.legal ul{margin-top:.8rem;display:grid;gap:.5rem;padding-left:1.2rem;
  list-style:disc}
.legal a{color:var(--cyber);text-decoration:underline}
.legal a .btn,.legal .btn{text-decoration:none}
/* Nombres de cookie y de clave de almacenamiento: se leen mejor en monoespaciada
   y así no se confunden con texto normal ni con un enlace. */
.legal code{padding:.1em .35em;border-radius:4px;background:var(--wg-050);
  border:1px solid var(--wg-200);font-size:.88em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* Confirmación de «hemos borrado tu elección». Nace vacía, así que sin :empty
   dejaría un hueco en blanco debajo del botón. */
.legal__note{margin-top:.7rem;font-size:.9rem;font-weight:600;color:var(--cyber)}
.legal__note:empty{display:none}
/* Fecha de vigencia: va bajo el titular, discreta, sin competir con él. */
.legal__eff{margin-top:.6rem;font-size:.92rem;color:var(--wg-600)}
.legal table{width:100%;margin-top:1rem;border-collapse:collapse;font-size:.9rem}
.legal th,.legal td{padding:.6rem .7rem;border:1px solid var(--wg-200);
  text-align:left;vertical-align:top}
.legal th{background:var(--wg-050);font-weight:600}
/* En móvil la tabla de proveedores no cabe: que haga scroll ella sola en vez de
   ensanchar la página entera. */
@media (max-width:560px){
  .legal table{display:block;overflow-x:auto;white-space:nowrap}
  .legal td,.legal th{white-space:normal;min-width:9rem}
}

/* ------------------------------------------------------- 26. Reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* -------------------------------------------------------------- 27. Cookies */
.cookie{position:fixed;z-index:120;left:1rem;right:1rem;bottom:1rem;
  max-width:640px;margin-inline:auto;padding:1.1rem 1.3rem;border-radius:14px;
  background:var(--cyber-dark);color:#fff;
  box-shadow:0 18px 40px -18px rgba(8,48,53,.75);
  display:none;gap:1rem;align-items:center;flex-wrap:wrap}
.cookie[data-show]{display:flex}
/* El aviso ya no pregunta, informa: el texto es más largo que antes y lleva
   titular, así que va en su propio bloque y el botón se queda a un lado. */
.cookie__txt{flex:1 1 260px}
.cookie__ttl{font-weight:700}
.cookie p{font-size:.85rem;line-height:1.5}
.cookie__txt p+p{margin-top:.5rem}
.cookie a{text-decoration:underline}
.cookie .btn{min-height:42px;padding:.5rem 1.4rem;font-size:.9rem;flex:0 0 auto}
@media (max-width:560px){
  .cookie .btn{width:100%}
}

/* ------------------------------------------- 28. Ajustes de composición
   Bloques añadidos al maquetar, agrupados aparte para no romper el orden
   de los componentes de arriba.
   -------------------------------------------------------------------- */

/* El separador ">" entre el segundo y el tercer pilar estaba aquí como
   carácter de la fuente (fino, y con la referencia del padding que ya no
   existe). Ahora es un SVG con el grosor de la maqueta y vive junto al resto
   del componente, en el bloque 11. */

/* Cabecera de Services: el titular cabalga el borde inferior de la imagen,
   una línea en blanco sobre la foto y la otra en gris sobre el fondo claro.
   El hueco superior se calcula con la MISMA medida que la altura de línea del
   titular, así el corte cae siempre exactamente entre las dos líneas. Antes
   era un valor aproximado y en móvil la segunda línea acababa encima de la
   foto: gris oscuro sobre imagen oscura, ilegible. */
.srvhero{
  --srvh:clamp(320px,40vw,560px);
  --srv-ttl:clamp(1.5rem,5.2vw,4.2rem);
  --srv-lh:calc(var(--srv-ttl) * 1.05);
  position:relative;isolation:isolate;background:#fff;overflow:hidden}
.srvhero__media{
  position:absolute;top:0;left:0;right:0;height:var(--srvh);z-index:-2;
  background:var(--grad-cyber)}
.srvhero__media picture,.srvhero__media img,.srvhero__media video{
  display:block;width:100%;height:100%;object-fit:cover}

/* Carrusel con fundido cruzado. Los pases se apilan y solo cambia la opacidad,
   que es lo único que el compositor puede animar sin repintar la banda. */
.fade__slide{position:absolute;inset:0;opacity:0;
  transition:opacity .9s var(--ease)}
.fade__slide[data-active]{opacity:1}

/* Logo calado: cuadrado blanco con las letras transparentes, así cada foto se
   ve a través de la palabra. Va fuera de .srvhero__media (que está en z-index
   negativo y le impone width/height al 100%) y se centra en la banda. */
.srvhero__mark{
  position:absolute;left:50%;top:calc(var(--srvh) / 2);
  transform:translate(-50%,-50%);z-index:1;
  width:clamp(124px,15.4vw,228px);height:auto;pointer-events:none}
.srvhero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,48,53,.34),rgba(8,48,53,.02) 46%,
    rgba(8,48,53,.30))}
.srvhero__pad{height:calc(var(--srvh) - var(--srv-lh))}
/* margin-block, NO margin. El titular lleva .shell shell--wide, y .shell
   centra con margin-inline:auto; un `margin:0` aquí tiene la misma
   especificidad y gana por orden, así que anulaba ese auto y el bloque se
   quedaba pegado al borde izquierdo. Por eso el titular salía descentrado
   respecto al párrafo de debajo, que sí iba en un .shell intacto. */
.srvhero__ttl{
  margin-block:0;text-align:center;font-weight:200;line-height:1.05;
  text-transform:uppercase;font-size:var(--srv-ttl);
  padding-bottom:clamp(1.4rem,3vw,2.4rem)}
.srvhero__ttl span{display:block}
.srvhero__l1{color:#fff;text-shadow:0 2px 18px rgba(8,48,53,.35)}
.srvhero__l2{color:var(--wg-900)}

/* En pantallas estrechas el titular podría partirse en más de dos líneas y el
   encaje dejaría de cuadrar. Por debajo de 640 px se abandona el efecto: las
   dos líneas van en blanco sobre la imagen, que crece para alojarlas. */
@media (max-width:640px){
  .srvhero{--srvh:clamp(380px,86vw,460px)}
  .srvhero__pad{height:calc(var(--srvh) - var(--srv-lh) * 2.4)}
  .srvhero__l2{color:#fff;text-shadow:0 2px 18px rgba(8,48,53,.35)}
  .srvhero__ttl{padding-bottom:clamp(1rem,4vw,1.8rem)}
}

/* La cabecera flota sobre el panel gris de Contacto */
.contact__panel{padding-top:calc(var(--hdr) + clamp(1.4rem,3.5vw,3rem))}

/* Banda CTA de Services */
.ctaband{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.6rem 2.5rem}
.ctaband p{max-width:34ch}

/* Bloque de texto centrado y estrecho */
.narrow{max-width:62ch;margin-inline:auto}
/* Entradilla de Servicios: 17 px y una caja del 60% del ancho, como en la
   maqueta. Con .fine + .narrow se quedaba en 14 px y en una columna estrecha,
   y le salían cinco líneas donde el diseño tiene cuatro. */
.srvintro{max-width:min(76%,60rem);margin-inline:auto;
  font-size:clamp(.95rem,1.18vw,1.16rem);line-height:1.55}

/* Rótulo "Put Simply…" / "En pocas palabras…" sobre la foto del ojo */
.putsimply{text-transform:none;color:#fff;font-weight:300;
  text-shadow:0 2px 26px rgba(20,32,36,.5)}

@media print{
  .hdr,.ftr,.cookie,.hero__dots,.burger{display:none!important}
  body{color:#000;background:#fff}
}