@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{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}
.divider{height:14px;border:0;margin:0;
  background:url(../img/section-divider.png) center/100% 100% no-repeat}

/* --------------------------------------------------------- 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)}
.headline{font-weight:300;line-height:1.14;font-size:clamp(1.6rem,3.4vw,2.6rem)}
.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 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.85rem 2.1rem;border-radius:999px;
  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)}
.btn--wide{min-width:min(340px,100%)}
.btn--ghost{background:none;color:#fff;border:1.5px solid rgba(255,255,255,.75);
  box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.14);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}

.lang{display:flex;align-items:center;gap:.15rem;margin-left:.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}
  .lang{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)}
.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)}
.claim-grid{
  display:grid;gap:clamp(1.8rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;
}
.claim-grid__ttl{text-align:right}
@media (max-width:860px){
  .claim-grid{grid-template-columns:1fr}
  .claim-grid__ttl{text-align:left}
}

/* --------------------------------------------------- 11. Cómo funciona (3) */
.pillars{
  --pillar-top:clamp(2.4rem,4.4vw,3.6rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3.4vw,2.8rem);align-items:start;
  margin-top:clamp(2.2rem,4.5vw,3.4rem);
}
/* padding-top igual en los tres para que los títulos alineen, aunque solo
   el tercero lleve icono */
.pillar{position:relative;text-align:center;padding-inline:.5rem;
  padding-top:var(--pillar-top)}
.pillar__ttl{font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:600;
  line-height:1.24;color:var(--cyber-dark)}
.pillar__txt{margin-top:.7rem;font-size:.86rem;font-weight:600;line-height:1.5;
  color:var(--wg-900)}
.pillar--brackets .pillar__ttl{padding-inline:1.4rem}
.pillar--brackets::before,.pillar--brackets::after{
  content:"(";position:absolute;top:-.28em;font-size:clamp(3.4rem,6vw,5.4rem);
  font-weight:200;line-height:1;color:var(--orange)}
.pillar--brackets::before{left:-.1rem}
.pillar--brackets::after{content:")";right:-.1rem}
.pillar__glyph{display:block;margin:0 auto .8rem;color:var(--orange);
  font-size:clamp(2rem,3.4vw,2.9rem);font-weight:200;line-height:1}
.pillar__icon{position:absolute;top:0;right:14%;width:clamp(52px,5.6vw,76px)}
.pillars__note{margin-top:clamp(2.2rem,4.6vw,3.4rem);text-align:center;
  font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ink)}
@media (max-width:760px){
  .pillars{grid-template-columns:1fr;gap:2.6rem}
}

/* ------------------------------------------------- 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%)}

/* --------------------------------------------------- 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 */
.moment{position:relative;background:var(--slate);color:#fff;overflow:hidden}
/* La foto arranca antes (57% del ancho) para que "IS NOW" la cabalgue de
   verdad, como en la maqueta, y no la roce por unos pocos píxeles. */
.moment__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.74fr);
  align-items:stretch}
.moment__txt{padding:clamp(2.5rem,5.5vw,4.5rem) 0 clamp(2.5rem,5.5vw,4.5rem);
  padding-right:clamp(1rem,3vw,3rem);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(1.4rem,3vw,2.2rem)}
.moment__ttl{position:relative;z-index:2;font-weight:200;line-height:1;
  text-transform:uppercase;font-size:clamp(2.3rem,6.6vw,5.8rem);
  white-space:nowrap}
.moment__ttl em{font-style:normal;color:var(--orange)}
.moment__lead{max-width:34ch;font-weight:300;
  font-size:clamp(1.1rem,2vw,1.55rem);line-height:1.3}
.moment__list{text-align:right;display:grid;gap:.3rem;font-size:.9rem;
  color:rgba(255,255,255,.9);max-width:30ch;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%}
@media (max-width:860px){
  .moment__grid{grid-template-columns:1fr}
  .moment__ttl{white-space:normal}
  .moment__shot{min-height:320px;order:-1}
  .moment__shot img{position:relative}
  .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)}
.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%)}
.cta__body{position:relative;z-index:2;max-width:34rem;
  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)}
.cta__lead{font-weight:300;line-height:1.24;
  font-size:clamp(1.35rem,3vw,2.1rem)}
.cta__hook{margin-top:clamp(1.4rem,3vw,2.2rem);font-weight:400;line-height:1.24;
  font-size:clamp(1.2rem,2.5vw,1.8rem)}
.cta .btn{margin-top:clamp(1.6rem,3.4vw,2.4rem)}

/* -------------------------------------------- 16. Titular a caballo (split) */
.straddle{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.straddle__txt{padding:clamp(2.5rem,5.5vw,5rem) clamp(1.5rem,3.5vw,3.5rem)}
.straddle__shot{position:relative;align-self:stretch;min-height:clamp(280px,34vw,520px)}
.straddle__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 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. */
.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:clamp(2.2rem,9.5vw,8.6rem);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)}
@media (max-width:860px){
  .straddle{grid-template-columns:1fr}
  .straddle__ttl{white-space:normal;background:none;color:var(--wg-900);
    -webkit-text-fill-color:currentColor;padding-inline:var(--gut)}
  .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) */
.contact{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  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)}
.contact__mail{display:inline-block;margin-top:.9rem;font-size:1.15rem;
  font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.contact__mail:hover{color:var(--cyber-dark);border-color:var(--cyber-dark)}
.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. About (interina) */
.soon{display:grid;gap:clamp(1.4rem,3vw,2.2rem);max-width:60rem}
.soon__grid{display:grid;gap:clamp(1.4rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(1.5rem,3vw,2.4rem)}
.soon__card{padding:clamp(1.3rem,2.6vw,2rem);border-radius:14px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2)}
.soon__card h3{font-size:1.05rem;font-weight:600;color:var(--orange-light)}
.soon__card p{margin-top:.6rem;font-size:.92rem;line-height:1.55;
  color:rgba(255,255,255,.9)}

/* ------------------------------------------------------------ 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}
.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 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}

/* ------------------------------------------------------- 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}
.cookie p{flex:1 1 240px;font-size:.85rem;line-height:1.5}
.cookie a{text-decoration:underline}
.cookie .btn{min-height:42px;padding:.5rem 1.4rem;font-size:.9rem}

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

/* Separador ">" entre el segundo y el tercer pilar. Va a la altura de los
   títulos, como en la maqueta, no por encima: de ahí el desplazamiento igual
   al padding superior de los pilares. */
.pillar--sep::before{
  content:">";position:absolute;left:-.7rem;
  top:calc(var(--pillar-top) + .28em);
  font-size:clamp(2.2rem,4.2vw,3.8rem);font-weight:200;line-height:1;
  color:var(--orange)}
@media (max-width:760px){.pillar--sep::before{display:none}}

/* 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}
.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))}
.srvhero__ttl{
  margin: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}

/* 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}
}