/* Fuentes servidas desde el propio dominio.

   Antes venian de fonts.googleapis.com y fonts.gstatic.com: dos dominios
   externos, cada uno con su DNS, su TCP y su TLS. Con un RTT de ~250 ms al
   servidor eso costaba mas que todo el resto de la pagina junta, y ademas
   bloqueaba el texto.

   Se usan las versiones variables de Outfit e Instrument Sans: un archivo
   cubre todos los pesos. DM Mono no tiene variable, van sus dos pesos.
   El unicode-range se conserva tal cual: el navegador solo baja el
   subconjunto latin salvo que la pagina use caracteres de latin-ext.

   Las tres familias son SIL Open Font License, que permite alojarlas. */

@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/dmmono-latin-ext-400.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:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/dmmono-latin-400.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/dmmono-latin-ext-500.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:'DM Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/dmmono-latin-500.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/instrument-latin-ext.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:'Instrument Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/instrument-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/outfit-latin-ext.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:'Outfit';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/outfit-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Proton Web — sistema visual
   Cabecera y hero en tinta, como el sitio original: fotografía
   real de infraestructura rotando, retícula técnica en
   movimiento y el teal de marca como único acento funcional.
   El espectro del isotipo vive en las barras del visor y en la
   cuña diagonal de la sección de infraestructura.
   ============================================================ */

:root{
  /* superficies */
  --tinta:      #06100F;
  --tinta-90:   #0C1917;
  --tinta-70:   #16302C;
  --papel:      #F0F3F2;
  --blanco:     #FFFFFF;

  /* marca */
  --teal:       #20B2AA;
  --teal-osc:   #0B5F5B;
  --teal-claro: #8AE0DA;

  /* espectro del isotipo — uso restringido */
  --lima:       #A8DC10;
  --menta:      #6ECFAE;
  --magenta:    #E8388C;
  --naranja:    #FF7A33;
  --rojo:       #E02434;
  --hueso:      #DDE3E1;

  /* texto y líneas */
  --gris:       #5E6E6A;
  --gris-claro: #9AA8A4;
  --linea:      rgba(6,16,15,.14);
  --linea-osc:  rgba(255,255,255,.14);

  /* tipografía */
  --display: 'Outfit', system-ui, -apple-system, sans-serif;
  --texto:   'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ritmo */
  --ancho: 1440px;
  --esp: clamp(4.5rem, 9vw, 8rem);
  --r: 4px;
  --suave: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2.5px solid var(--teal);
  outline-offset:3px;
  border-radius:2px;
}

.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.saltar{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--teal); color:var(--tinta); padding:.75rem 1.25rem;
  font-family:var(--mono); font-size:.8rem; text-decoration:none;
  transition:top .18s;
}
.saltar:focus{ top:1rem; }

/* ── layout ─────────────────────────────────────────────── */

.contenedor{
  width:100%; max-width:var(--ancho); margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3.5rem);
}
.contenedor--angosto{ max-width:900px; }

.seccion{ padding-block:var(--esp); }
.seccion--planes{ background:var(--blanco); border-block:1px solid var(--linea); }

/* ── retícula técnica en movimiento ─────────────────────── */

.malla{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(115% 85% at 68% 25%, #000 18%, transparent 76%);
  mask-image:radial-gradient(115% 85% at 68% 25%, #000 18%, transparent 76%);
  animation:deriva 26s linear infinite;
}
.malla::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(46% 52% at 70% 40%, rgba(32,178,170,.20), transparent 70%);
  animation:latir 9s ease-in-out infinite alternate;
}
@keyframes deriva{ to{ background-position:56px 56px, 56px 56px; } }
@keyframes latir{ from{ opacity:.5; transform:scale(1); } to{ opacity:1; transform:scale(1.14); } }

/* ── tipografía base ────────────────────────────────────── */

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-osc);
  margin:0 0 1.25rem;
}
.eyebrow--claro{ color:var(--teal-claro); }
/* Kickers sobre fondo oscuro.
   Esta lista tiene que crecer con cada tipo de sección oscura nueva.
   Ya se olvidó dos veces: al añadir .portada el kicker quedó en 2.57
   de contraste. Si añades otra sección en tinta, añádela AQUÍ. */
.seccion--oscura .eyebrow,
.infra .eyebrow,
.hero .eyebrow,
.portada .eyebrow{ color:var(--teal-claro); }

.titulo-seccion{ max-width:60ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.titulo-seccion h2{ font-size:clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }
.titulo-seccion__texto{
  margin:1.5rem 0 0; max-width:56ch; color:var(--tinta);
  font-size:1.075rem;
}

/* ── botones ────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:1rem;
  letter-spacing:-.01em;
  padding:.95rem 1.6rem;
  border:1.5px solid transparent;
  border-radius:var(--r);
  text-decoration:none;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover{ transform:translateY(-2px); }

.btn--teal{ background:var(--teal); color:var(--tinta); }
.btn--teal:hover{ background:var(--teal-claro); }

.btn--tinta{ background:var(--tinta); color:#fff; }
.btn--tinta:hover{ background:var(--tinta-70); }

.btn--linea{ border-color:rgba(6,16,15,.3); color:var(--tinta); background:transparent; }
.btn--linea:hover{ border-color:var(--tinta); background:rgba(6,16,15,.05); }

.btn--linea-claro{ border-color:rgba(255,255,255,.32); color:#fff; background:transparent; }
.btn--linea-claro:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ── cabecera (siempre en tinta) ────────────────────────── */

.cabecera{
  position:sticky; top:0; z-index:50;
  background:var(--tinta); color:#fff;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.cabecera.esta-fija{ border-bottom-color:var(--linea-osc); }

.cabecera__int{
  max-width:var(--ancho); margin-inline:auto;
  padding:.9rem clamp(1.25rem,4vw,3.5rem);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
}

.cabecera__logo{ flex:none; }
.cabecera__logo img{ width:172px; height:auto; }

.nav{
  display:flex; gap:clamp(1rem,2.2vw,1.9rem);
  margin-left:auto;
  font-size:.95rem; font-weight:500;
}
.nav a{
  text-decoration:none; padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition:border-color .18s, color .18s;
}
.nav a:hover{ border-bottom-color:var(--teal); color:var(--teal-claro); }

/* ── submenú de la cabecera ─────────────────────────────── */

.nav__grupo{ position:relative; }
.nav__padre{ display:inline-flex; align-items:center; gap:.4rem; }
.nav__padre span{ font-size:.7em; opacity:.7; transition:transform .2s; }
.nav__grupo:hover .nav__padre span,
.nav__grupo:focus-within .nav__padre span{ transform:translateY(2px); }

.nav__sub{
  position:absolute; top:100%; left:-1rem; z-index:60;
  min-width:250px; margin:0; padding:.5rem 0;
  list-style:none;
  background:var(--tinta-90);
  border:1px solid var(--linea-osc);
  border-radius:var(--r);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
/* el hueco evita que el menú se cierre al bajar el cursor */
.nav__grupo::after{ content:''; position:absolute; top:100%; left:0; right:0; height:14px; }
.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub{ opacity:1; visibility:visible; transform:none; }

.nav__sub a{
  display:block; padding:.6rem 1.1rem;
  font-size:.925rem; font-weight:500;
  border-bottom:0; border-left:2px solid transparent;
  transition:background .18s, border-color .18s, color .18s;
}
.nav__sub a:hover{
  background:rgba(32,178,170,.1);
  border-left-color:var(--teal);
  color:var(--teal-claro);
}

/* en móvil los hijos van indentados bajo su padre */
.nav-movil__hijo{
  padding-left:1.25rem !important;
  font-size:.975rem !important;
  font-weight:500 !important;
  color:var(--teal-claro) !important;
}

.cabecera__cta{ flex:none; padding:.7rem 1.25rem; font-size:.95rem; }

.menu-btn{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--linea-osc); border-radius:var(--r);
  padding:.6rem .7rem; cursor:pointer;
}
.menu-btn__caja{ display:block; width:20px; }
.menu-btn__caja span{
  display:block; height:2px; background:#fff; border-radius:2px;
  transition:transform .22s;
}
.menu-btn__caja span:first-child{ margin-bottom:5px; }
.menu-btn[aria-expanded="true"] .menu-btn__caja span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__caja span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.nav-movil[hidden]{ display:none; }
.nav-movil{
  border-top:1px solid var(--linea-osc);
  padding:.5rem clamp(1.25rem,4vw,3.5rem) 1.5rem;
  display:flex; flex-direction:column;
}
.nav-movil a{
  padding:.95rem 0; text-decoration:none; color:#fff;
  border-bottom:1px solid var(--linea-osc);
  font-family:var(--display); font-weight:600; font-size:1.1rem;
}
.nav-movil__wa{ color:var(--teal-claro); border-bottom:0 !important; }

/* ── hero: fotografía a sangre completa ─────────────────── */

.hero{
  position:relative; overflow:hidden;
  background:var(--tinta); color:#fff;
  min-height:clamp(600px, 86vh, 940px);
  display:flex;
  padding-block:clamp(3rem, 5vw, 4.5rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
}

/* capa 1 — las fotografías */
.hero__fondo{ position:absolute; inset:0; }
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  filter:saturate(.6) contrast(1.08) brightness(.72);
  transition:opacity 1.1s ease;
}
.hero__img.es-activa{ opacity:1; animation:kenburns 8s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.11); } }

/* capa 2 — el velo que garantiza la lectura del texto */
.hero__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,16,15,.96) 0%, rgba(6,16,15,.88) 38%, rgba(6,16,15,.55) 72%, rgba(6,16,15,.62) 100%),
    linear-gradient(to top, rgba(6,16,15,.92) 0%, rgba(6,16,15,0) 42%);
}

/* capa 3 — la retícula técnica, sobre la zona oscura */
.hero .malla{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(85% 90% at 12% 40%, #000 8%, transparent 72%);
  mask-image:radial-gradient(85% 90% at 12% 40%, #000 8%, transparent 72%);
}
.hero .malla::after{
  background:radial-gradient(40% 45% at 78% 30%, rgba(32,178,170,.22), transparent 72%);
}

/* capa 4 — el contenido */
.hero__rejilla{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  width:100%;
}

.hero__int{ margin-block:auto; max-width:min(100%, 880px); }

.hero__titulo{
  font-size:clamp(2.6rem, 1rem + 5.4vw, 5.5rem);
  line-height:.97;
  text-shadow:0 2px 24px rgba(6,16,15,.55);
}
.hero__titulo .fino{
  display:block; margin-top:.14em;
  font-size:.62em; font-weight:200; letter-spacing:-.04em;
  color:var(--teal-claro);
}

.hero__bajada{
  margin:2rem 0 0; max-width:60ch;
  font-size:1.125rem; color:#fff;
}

.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem; }

/* el titular baja a tres líneas solo cuando ya no cabe en dos */
.solo-movil{ display:none; }
@media (max-width:600px){ .solo-movil{ display:inline; } }

/* ── control del fondo ──────────────────────────────────── */

.hero__control{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}

.hero__pie{
  margin:0; flex:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff;
}

.visor__barras{ display:flex; gap:6px; flex:1; max-width:420px; }
.visor__barra{
  flex:1; position:relative; height:18px;
  background:none; border:0; padding:0; cursor:pointer;
}
.visor__barra::before{
  content:'';
  position:absolute; left:0; right:0; top:50%;
  height:3px; margin-top:-1.5px; background:rgba(255,255,255,.28);
}
.visor__barra i{
  position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; width:0;
}
.visor__barra.es-activa i{ animation:llenar 5.6s linear forwards; }
@keyframes llenar{ to{ width:100%; } }
.visor__barra:nth-child(1) i{ background:var(--lima); }
.visor__barra:nth-child(2) i{ background:var(--magenta); }
.visor__barra:nth-child(3) i{ background:var(--naranja); }
.visor__barra:nth-child(4) i{ background:var(--teal); }

/* ── tira en desfile ────────────────────────────────────── */

.tira{
  width:100%; min-width:0; align-self:stretch;
  margin-top:clamp(3rem,6vw,5rem); padding-top:1.1rem;
  border-top:1px solid var(--linea-osc);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tira__pista{ display:flex; width:max-content; animation:desfilar 38s linear infinite; }
.tira:hover .tira__pista{ animation-play-state:paused; }
.tira__lista{
  display:flex; list-style:none; margin:0;
  padding:0 clamp(1.5rem,3vw,2.5rem) .3rem 0;
  gap:clamp(1.5rem,3vw,2.5rem);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
  white-space:nowrap;
}
.tira__lista li{ display:flex; align-items:center; gap:.75rem; }
.tira__lista li::before{
  content:'';
  width:6px; height:6px; background:var(--teal);
  transform:rotate(45deg); flex:none;
}
@keyframes desfilar{ to{ transform:translateX(-50%); } }

/* ── fondo reactivo: rejilla + cruz de mira ─────────────── */

.reactiva{ position:relative; overflow:hidden; }
.reactiva > .contenedor{ position:relative; z-index:1; }

/* rejilla permanente, solo en las secciones claras */
.rejilla::before{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(11,95,91,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,95,91,.075) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

/* rejilla permanente para las secciones oscuras sin efecto propio */
.rejilla-osc::before{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

/* la cruz sigue al cursor: dos hilos de 1px y un halo */
.reactiva__luz{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:0; transition:opacity .45s ease;
}
.reactiva.con-luz .reactiva__luz{ opacity:1; }

.reactiva__luz::before,
.reactiva__luz::after{
  content:'';
  position:absolute;
  will-change:transform;
}
.reactiva__luz::before{
  left:0; right:0; top:0; height:1px;
  transform:translate3d(0, var(--my, -9999px), 0);
}
.reactiva__luz::after{
  top:0; bottom:0; left:0; width:1px;
  transform:translate3d(var(--mx, -9999px), 0, 0);
}

.reactiva__luz > span{
  position:absolute; top:0; left:0;
  width:420px; height:420px; margin:-210px 0 0 -210px;
  border-radius:50%;
  transform:translate3d(var(--mx, -9999px), var(--my, -9999px), 0);
  will-change:transform;
}

/* en claro: hilos verde petróleo y halo teal */
.rejilla .reactiva__luz::before{
  background:linear-gradient(90deg, transparent, rgba(11,95,91,.38) 18%, rgba(11,95,91,.38) 82%, transparent);
}
.rejilla .reactiva__luz::after{
  background:linear-gradient(180deg, transparent, rgba(11,95,91,.38) 18%, rgba(11,95,91,.38) 82%, transparent);
}
.rejilla .reactiva__luz > span{
  background:radial-gradient(circle, rgba(32,178,170,.16), transparent 64%);
}

/* en oscuro: los mismos hilos, encendidos en teal */
.seccion--oscura .reactiva__luz::before,
.infra .reactiva__luz::before{
  background:linear-gradient(90deg, transparent, rgba(32,178,170,.5) 18%, rgba(32,178,170,.5) 82%, transparent);
}
.seccion--oscura .reactiva__luz::after,
.infra .reactiva__luz::after{
  background:linear-gradient(180deg, transparent, rgba(32,178,170,.5) 18%, rgba(32,178,170,.5) 82%, transparent);
}
.seccion--oscura .reactiva__luz > span,
.infra .reactiva__luz > span{
  background:radial-gradient(circle, rgba(32,178,170,.18), transparent 64%);
}

/* ── sección oscura: tráfico de red ─────────────────────── */

.seccion--oscura{
  position:relative; overflow:hidden;
  background:var(--tinta); color:#fff;
}
.seccion--oscura > .contenedor{ position:relative; z-index:3; }

/* la retícula sobre la que viajan las señales */
.trazas{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.trazas::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 5%, transparent 78%);
  mask-image:radial-gradient(130% 100% at 50% 0%, #000 5%, transparent 78%);
}

/* cada señal recorre una línea de la retícula y se apaga */
.traza{
  position:absolute; opacity:0;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.traza:nth-child(1),
.traza:nth-child(2),
.traza:nth-child(3),
.traza:nth-child(6){
  height:2px; width:190px; left:0;
  background:linear-gradient(90deg, transparent, var(--teal), transparent);
  animation-name:senal-h;
}
.traza:nth-child(4),
.traza:nth-child(5){
  width:2px; height:150px; top:0;
  background:linear-gradient(180deg, transparent, var(--teal), transparent);
  animation-name:senal-v;
}

.traza:nth-child(1){ top:112px;  animation-duration:7s;    animation-delay:0s; }
.traza:nth-child(2){ top:448px;  animation-duration:9.5s;  animation-delay:2.6s;
  background:linear-gradient(90deg, transparent, var(--lima), transparent); }
.traza:nth-child(3){ top:896px;  animation-duration:8s;    animation-delay:5s; }
.traza:nth-child(6){ top:672px;  animation-duration:11s;   animation-delay:7.5s; }

.traza:nth-child(4){ left:336px;  animation-duration:12s;  animation-delay:1.2s;
  background:linear-gradient(180deg, transparent, var(--magenta), transparent); }
.traza:nth-child(5){ left:1064px; animation-duration:10s;  animation-delay:4.2s; }

@keyframes senal-h{
  0%   { transform:translateX(-200px); opacity:0; }
  6%   { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateX(calc(100vw + 200px)); opacity:0; }
}
@keyframes senal-v{
  0%   { transform:translateY(-160px); opacity:0; }
  6%   { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateY(1700px); opacity:0; }
}

/* la traza vertical de la derecha no cabe en pantallas medianas */
@media (max-width:1200px){ .traza:nth-child(5){ display:none; } }
@media (max-width:640px){ .traza:nth-child(4){ display:none; } }

/* texto y líneas invertidos dentro de la sección oscura */
.seccion--oscura .titulo-seccion h2{ color:#fff; }
.seccion--oscura .titulo-seccion__texto{ color:#fff; }
.seccion--oscura .capacidades{ border-top-color:var(--linea-osc); }
.seccion--oscura .capacidad{ border-bottom-color:var(--linea-osc); }
.seccion--oscura .capacidad p,
.seccion--oscura .capacidad .tags{ color:#fff; }
.seccion--oscura .capacidad__flecha{ color:var(--teal-claro); }
.seccion--oscura .capacidad a:hover{ background:rgba(255,255,255,.05); }

/* ── portada de página interior ─────────────────────────── */

.portada{
  position:relative; overflow:hidden;
  background:var(--tinta); color:#fff;
  padding-block:clamp(2.25rem,4vw,3.5rem) clamp(3.5rem,7vw,5.5rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%);
}
.portada > .contenedor{ position:relative; z-index:2; }

/* fotografía de fondo, reutilizable en cualquier sección oscura */
.fondo-foto,
.portada__fondo{ position:absolute; inset:0; z-index:0; }
.fondo-foto img,
.portada__fondo img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) contrast(1.05) brightness(.6);
}
.fondo-velo,
.portada__velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,16,15,.97) 0%, rgba(6,16,15,.9) 42%, rgba(6,16,15,.6) 78%, rgba(6,16,15,.7) 100%),
    linear-gradient(to top, rgba(6,16,15,.95), rgba(6,16,15,0) 60%);
}
@media (max-width:900px){
  .fondo-velo,
  .portada__velo{
    background:
      linear-gradient(to top, rgba(6,16,15,.97) 15%, rgba(6,16,15,.8) 60%, rgba(6,16,15,.65) 100%),
      linear-gradient(90deg, rgba(6,16,15,.8), rgba(6,16,15,.55));
  }
}
.portada h1{
  font-size:clamp(2.2rem, 1rem + 4.2vw, 4rem);
  max-width:20ch; line-height:1;
}
.portada__bajada{ margin:1.75rem 0 0; max-width:62ch; font-size:1.125rem; color:#fff; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.25rem; }

/* en secciones (no portadas) el velo va parejo, no en diagonal */
.seccion--oscura > .fondo-velo{
  background:
    linear-gradient(90deg, rgba(6,16,15,.94), rgba(6,16,15,.86) 50%, rgba(6,16,15,.92)),
    linear-gradient(to bottom, rgba(6,16,15,.98), rgba(6,16,15,.8) 30%, rgba(6,16,15,.98));
}

/* migas de pan */
.miga{ margin:0 0 1.75rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; }
.miga ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.miga li:not(:last-child)::after{ content:'/'; margin-left:.5rem; opacity:.45; }
.miga a{ color:var(--teal-claro); text-decoration:none; }
.miga a:hover{ text-decoration:underline; text-underline-offset:3px; }
.miga [aria-current]{ opacity:.7; }

/* tabla de características sobre fondo claro */
.tabla{
  width:100%; border-collapse:collapse;
  font-size:.975rem;
}
.tabla caption{
  text-align:left; padding-bottom:1rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-osc);
}
.tabla th, .tabla td{
  text-align:left; padding:.95rem 1rem;
  border-bottom:1px solid var(--linea);
}
.tabla th{
  width:42%; font-family:var(--texto); font-weight:500;
}
.tabla td{ font-family:var(--display); font-weight:600; letter-spacing:-.01em; }
.tabla tr:last-child th, .tabla tr:last-child td{ border-bottom:0; }
/* Color explicito: la caja siempre es blanca, asi que el texto no puede
   heredar el #fff de .seccion--oscura. Es el mismo fallo que dejo invisibles
   los testimonios. */
.tabla__caja{
  overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r);
  background:var(--blanco); color:var(--tinta);
}

/* texto corrido de página interior */
.prosa{ max-width:68ch; }
.prosa p{ margin:0 0 1.15rem; }
.prosa p:last-child{ margin-bottom:0; }
/* :not(.btn) — si no, esta regla le gana en especificidad a .btn--teal
   y le pinta el texto del color del enlace, dejándolo en 2.86 de contraste */
.prosa a:not(.btn){ color:var(--teal-osc); text-underline-offset:3px; }

/* dos columnas: texto y pieza al lado */
.dos{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ .dos{ grid-template-columns:1fr; } }

/* ── capacidades ────────────────────────────────────────── */

.capacidades{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea); }
.capacidad{ border-bottom:1px solid var(--linea); }

.capacidad a{
  position:relative; display:grid; gap:.4rem 3rem;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr) 2rem;
  align-items:start;
  padding:clamp(1.75rem,3vw,2.4rem) 0 clamp(1.75rem,3vw,2.4rem) 1.5rem;
  text-decoration:none;
  transition:padding-left .25s var(--suave), background .25s;
}
.capacidad a::before{
  content:'';
  position:absolute; left:0; top:1.5rem; bottom:1.5rem;
  width:3px; background:transparent; transition:background .25s;
}
.capacidad a:hover{ padding-left:2rem; background:rgba(32,178,170,.045); }
.capacidad a:hover::before{ background:var(--teal); }

.capacidad h3{ grid-column:1; font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem); }
.capacidad p{ grid-column:2; margin:0; color:var(--tinta); }
.capacidad .tags{
  grid-column:2; margin-top:.9rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta);
}
.capacidad__flecha{
  grid-column:3; grid-row:1 / span 3;
  font-family:var(--display); font-size:1.4rem; color:var(--teal-osc);
  justify-self:end; transition:transform .25s var(--suave);
}
.capacidad a:hover .capacidad__flecha{ transform:translateX(8px); }

/* ── canales de contacto ────────────────────────────────── */

.canales{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  background:var(--linea);
  border:1px solid var(--linea);
}
.canal{ background:var(--papel); padding:clamp(1.5rem,3vw,2rem); transition:background .25s; }
.canal:hover{ background:var(--blanco); }
.canal__tipo{
  margin:0 0 1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-osc);
}
.canal__dato{
  display:block;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);
  letter-spacing:-.03em; color:var(--tinta);
  text-decoration:none; word-break:break-word;
}
.canal__dato--chico{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); letter-spacing:-.01em; }
a.canal__dato:hover{ color:var(--teal-osc); }
.canal__nota{ margin:.9rem 0 0; font-size:.925rem; color:var(--tinta); }

/* ── blog: tarjetas de artículo ─────────────────────────── */

.articulos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.articulo{ display:flex; }
.articulo a{
  display:flex; flex-direction:column;
  width:100%; padding:clamp(1.5rem,3vw,2rem);
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r);
  text-decoration:none;
  transition:transform .3s var(--suave), border-color .3s, box-shadow .3s;
}
.articulo a:hover{
  transform:translateY(-6px);
  border-color:var(--teal);
  box-shadow:0 18px 40px -24px rgba(6,16,15,.45);
}
.articulo__kicker{
  margin:0 0 1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-osc);
}
.articulo h2, .articulo h3{
  font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); line-height:1.12;
}
.articulo__resumen{ margin:.9rem 0 1.5rem; color:var(--tinta); font-size:.975rem; flex:1; }
.articulo__mas{
  font-family:var(--display); font-weight:600; color:var(--teal-osc);
  transition:transform .25s var(--suave);
}
.articulo a:hover .articulo__mas{ transform:translateX(5px); display:inline-block; }

/* en sección oscura las tarjetas se invierten */
.seccion--oscura .articulo a{ background:var(--tinta-90); border-color:var(--linea-osc); }
.seccion--oscura .articulo a:hover{ border-color:var(--teal); }
.seccion--oscura .articulo__kicker,
.seccion--oscura .articulo__mas{ color:var(--teal-claro); }
.seccion--oscura .articulo__resumen{ color:#fff; }

/* ── blog: cuerpo del artículo ──────────────────────────── */

.articulo__fecha{
  margin:1.5rem 0 0;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:#fff;
}
.prosa--articulo{ font-size:1.075rem; line-height:1.72; max-width:none; }
.prosa--articulo h2{
  margin:2.75rem 0 1.1rem;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);
}
.prosa--articulo h2:first-child{ margin-top:0; }
.prosa__lista{ margin:0 0 1.15rem; padding:0; list-style:none; }
.prosa__lista li{ position:relative; padding:.4rem 0 .4rem 1.6rem; }
.prosa__lista li::before{
  content:''; position:absolute; left:0; top:1.1em;
  width:7px; height:7px; background:var(--teal); transform:rotate(45deg);
}
.prosa__cita{
  margin:2rem 0; padding:0 0 0 1.5rem;
  border-left:3px solid var(--teal);
}
.prosa__cita p{
  margin:0;
  font-family:var(--display); font-weight:200;
  font-size:1.35rem; line-height:1.32; letter-spacing:-.02em;
}
.articulo__cta{ margin-top:2.75rem; }

/* ── planes ─────────────────────────────────────────────── */

.planes{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  align-items:start;
}

.plan{
  display:flex; flex-direction:column;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:clamp(1.75rem,3vw,2.25rem);
  transition:transform .3s var(--suave), border-color .3s, box-shadow .3s;
}
.plan:hover{
  transform:translateY(-6px);
  border-color:var(--teal);
  box-shadow:0 18px 40px -24px rgba(6,16,15,.45);
}

.plan--destacado{
  background:var(--tinta); color:#fff; border-color:var(--tinta);
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  border-radius:0;
}

.plan__flag{
  margin:0 0 1rem; align-self:flex-start;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta);
  background:var(--teal); padding:.3rem .6rem;
}

.plan__nombre{ font-size:1.5rem; }
.plan__para{ margin:.6rem 0 0; color:var(--tinta); font-size:.95rem; }
.plan--destacado .plan__para{ color:#fff; }

.plan__precio{
  font-family:var(--mono); font-weight:500;
  font-size:clamp(2.4rem,1.8rem + 2vw,3.1rem);
  line-height:1; letter-spacing:-.04em;
  margin:1.5rem 0 .7rem;
}
.plan--destacado .plan__precio{ color:var(--teal-claro); }

.plan__renueva{
  margin:0 0 1.75rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--linea);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.03em;
  color:var(--tinta);
}
.plan__renueva strong{ font-weight:500; color:var(--tinta); }
.plan--destacado .plan__renueva{ border-bottom-color:var(--linea-osc); color:#fff; }
.plan--destacado .plan__renueva strong{ color:#fff; }
.plan__precio span{ font-size:.5em; vertical-align:.55em; margin-right:.1em; }
.plan__precio em{
  font-family:var(--texto); font-style:normal; font-size:.28em;
  letter-spacing:0; color:var(--tinta); margin-left:.35em;
}
.plan--destacado .plan__precio em{ color:#fff; }

.plan__lista{ list-style:none; margin:0 0 2rem; padding:0; flex:1; font-size:.975rem; }
.plan__lista li{ position:relative; padding:.42rem 0 .42rem 1.6rem; }
.plan__lista li::before{
  content:'';
  position:absolute; left:0; top:1.1em;
  width:7px; height:7px; background:var(--teal); transform:rotate(45deg);
}

.plan__cta{ width:100%; }
.plan--destacado .btn--linea{ border-color:var(--linea-osc); color:#fff; }
.plan--destacado .btn--linea:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.medida{
  margin-top:2.5rem; padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  display:flex; flex-wrap:wrap; align-items:center; gap:2rem;
  justify-content:space-between;
}
.medida h3{ font-size:1.4rem; }
.medida p{ margin:.75rem 0 0; max-width:62ch; color:var(--tinta); }
.medida > div{ flex:1 1 420px; }

/* ── proceso ────────────────────────────────────────────── */

.proceso{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2.5rem 2rem;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
}
.proceso li{ padding-top:1.5rem; border-top:3px solid var(--tinta); }
.proceso li:nth-child(1){ border-top-color:var(--lima); }
.proceso li:nth-child(2){ border-top-color:var(--menta); }
.proceso li:nth-child(3){ border-top-color:var(--magenta); }
.proceso li:nth-child(4){ border-top-color:var(--naranja); }
.proceso__num{
  margin:0 0 .75rem;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em;
  color:var(--teal-osc);
}
.proceso h3{ font-size:1.3rem; }
.proceso li p:last-child{ margin:.75rem 0 0; color:var(--tinta); font-size:.975rem; }

/* Componentes que se usan sobre claro Y sobre oscuro.
   El texto base es negro; aquí se invierte cuando el contenedor
   es oscuro. Si añades un componente reutilizable, añádelo AQUÍ. */
.infra .proceso li p:last-child,
.seccion--oscura .proceso li p:last-child,
.cierre .proceso li p:last-child{ color:#fff; }

.infra .proceso__num,
.seccion--oscura .proceso__num,
.cierre .proceso__num{ color:var(--teal-claro); }

.infra .prosa,
.seccion--oscura .prosa{ color:#fff; }
.infra .prosa a:not(.btn),
.seccion--oscura .prosa a:not(.btn){ color:var(--teal-claro); }

.infra .titulo-seccion__texto,
.cierre .titulo-seccion__texto{ color:#fff; }

.infra .tabla,
/* Retirada: toda .tabla vive dentro de .tabla__caja, que es blanca. Pintar
   el texto de blanco la dejaba invisible (1.00 de contraste). */

/* ── infraestructura (tinta) ────────────────────────────── */

.infra-borde{
  background:linear-gradient(90deg,
    var(--lima) 0 16.6%, var(--menta) 0 33.3%, var(--teal) 0 50%,
    var(--magenta) 0 66.6%, var(--naranja) 0 83.3%, var(--rojo) 0 100%);
}

.infra{
  position:relative; overflow:hidden;
  background:var(--tinta); color:#fff;
  clip-path:polygon(0 34px, 100% 0, 100% 100%, 0 100%);
  padding-block:calc(var(--esp) + 34px) var(--esp);
}
.infra::before{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 80% at 20% 30%, #000 10%, transparent 72%);
  mask-image:radial-gradient(90% 80% at 20% 30%, #000 10%, transparent 72%);
  animation:deriva 32s linear infinite;
}
.infra > .contenedor{ position:relative; z-index:1; }

.infra__cabeza{
  display:grid; gap:2rem clamp(2rem,5vw,5rem);
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  align-items:end;
  margin-bottom:clamp(3rem,5vw,4.5rem);
}
.infra h2{ font-size:clamp(2rem,1.2rem + 3.2vw,3.5rem); }
.infra__texto{ margin:0; color:#fff; font-size:1.075rem; }

.specs{
  display:grid; gap:1px; margin:0;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  background:var(--linea-osc);
  border:1px solid var(--linea-osc);
}
.specs > div{ background:var(--tinta); padding:1.5rem; transition:background .25s; }
.specs > div:hover{ background:var(--tinta-70); }
.specs dt{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff;
}
.specs dd{
  margin:.6rem 0 0;
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:-.02em;
}

.infra__pie{
  margin:clamp(2.5rem,4vw,3.5rem) 0 0; max-width:70ch;
  color:#fff;
}
.infra__pie a{ color:var(--teal-claro); text-underline-offset:4px; }

/* ── testimonios ────────────────────────────────────────── */

.testimonios{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  background:var(--linea);
  border:1px solid var(--linea);
}
.testimonios li{
  background:var(--papel); padding:clamp(1.5rem,3vw,2rem);
  border-top:3px solid var(--teal); transition:background .25s;
}
.testimonios li:nth-child(5n+1){ border-top-color:var(--lima); }
.testimonios li:nth-child(5n+2){ border-top-color:var(--menta); }
.testimonios li:nth-child(5n+3){ border-top-color:var(--magenta); }
.testimonios li:nth-child(5n+4){ border-top-color:var(--naranja); }
.testimonios li:nth-child(5n+5){ border-top-color:var(--teal); }
.testimonios li:hover{ background:var(--blanco); }
.testimonios blockquote{ margin:0; }
.testimonios blockquote p{
  /* Color explicito: la tarjeta siempre es clara, asi que el texto no puede
     heredar el #fff de .seccion--oscura. Sin esto, los testimonios quedan
     invisibles en cualquier seccion oscura (paso en /nosotros/). */
  margin:0; color:var(--tinta);
  font-family:var(--display); font-weight:200;
  font-size:1.4rem; line-height:1.28; letter-spacing:-.02em;
}
.testimonio__autor{
  margin:1.5rem 0 0;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
  color:var(--tinta);
}

/* ── preguntas ──────────────────────────────────────────── */

.faq{ border-top:1px solid var(--linea); }
.faq details{ border-bottom:1px solid var(--linea); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:1.5rem;
  padding:1.4rem 0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  letter-spacing:-.02em;
  transition:color .2s;
}
.faq summary:hover{ color:var(--teal-osc); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+';
  margin-left:auto; flex:none;
  font-family:var(--mono); font-size:1.35rem; line-height:1;
  color:var(--teal-osc); transition:transform .22s var(--suave);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 1.6rem; max-width:68ch; color:var(--tinta); }

/* el acordeón sobre fondo oscuro */
.seccion--oscura .faq{ border-top-color:var(--linea-osc); }
.seccion--oscura .faq details{ border-bottom-color:var(--linea-osc); }
.seccion--oscura .faq summary:hover{ color:var(--teal-claro); }
.seccion--oscura .faq summary::after{ color:var(--teal-claro); }
.seccion--oscura .faq details p{ color:#fff; }

/* ── cierre ─────────────────────────────────────────────── */

.cierre{
  position:relative; overflow:hidden;
  background:var(--teal-osc); color:#fff;
  padding-block:var(--esp);
}

/* rejilla del cierre, sobre el teal profundo */
.cierre::before{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

/* halo de marca que respira detrás del formulario */
.cierre__aura{
  position:absolute; z-index:0; pointer-events:none;
  top:50%; right:-10%; width:min(62vw, 900px); aspect-ratio:1;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(32,178,170,.55), transparent 62%);
  animation:latir 11s ease-in-out infinite alternate;
}

/* la cruz de mira también aquí */
.cierre .reactiva__luz::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42) 18%, rgba(255,255,255,.42) 82%, transparent);
}
.cierre .reactiva__luz::after{
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.42) 18%, rgba(255,255,255,.42) 82%, transparent);
}
.cierre .reactiva__luz > span{
  background:radial-gradient(circle, rgba(138,224,218,.18), transparent 64%);
}
.cierre__rejilla{
  position:relative; z-index:1;
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:start;
}
.cierre h2{ font-size:clamp(2rem,1.2rem + 3.2vw,3.5rem); max-width:18ch; }
.cierre__texto > p{ margin:1.5rem 0 0; max-width:52ch; font-size:1.125rem; }
.cierre__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem; }

/* ── formulario ─────────────────────────────────────────── */

.formulario{
  background:var(--tinta); color:#fff;
  color-scheme:dark;                       /* el desplegable nativo también en oscuro */
  padding:clamp(1.75rem,3vw,2.5rem);
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

.formulario__titulo{
  margin:0 0 1.75rem;
  font-family:var(--display); font-weight:600; font-size:1.35rem;
  letter-spacing:-.02em;
}

.campo{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem; }
.campo label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-claro);
}
.campo label span{ text-transform:none; letter-spacing:.04em; opacity:.72; }

.campo input,
.campo select,
.campo textarea{
  width:100%;
  font-family:var(--texto); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid var(--linea-osc);
  border-radius:var(--r);
  padding:.8rem .9rem;
  transition:border-color .2s, background .2s;
}
.campo textarea{ resize:vertical; min-height:88px; line-height:1.5; }

.campo select{
  appearance:none; -webkit-appearance:none;
  color-scheme:dark;               /* el desplegable nativo se pinta oscuro */
  padding-right:2.4rem; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, #8AE0DA 50%),
                   linear-gradient(135deg, #8AE0DA 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover{ border-color:rgba(255,255,255,.3); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:2px solid var(--teal);
  outline-offset:1px;
  border-color:var(--teal);
  background:rgba(255,255,255,.09);
}

/* Windows pinta el desplegable con fondo claro y heredaba el texto
   blanco del select: las opciones quedaban invisibles. */
.campo option{ background-color:#0C1917; color:#fff; }

.formulario__enviar{ width:100%; margin-top:.6rem; }

.formulario__nota{
  margin:1rem 0 0;
  font-size:.85rem; line-height:1.5; color:#fff; opacity:.72;
}

/* ── pie ────────────────────────────────────────────────── */

.pie{ background:var(--tinta); color:#fff; padding-block:clamp(3.5rem,6vw,5rem) 2rem; }

.pie__grid{
  display:grid; gap:2.5rem clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
}
@media (min-width:960px){
  .pie__grid{ grid-template-columns:1.7fr 1fr 1fr 1.15fr; }
}
.pie__marca{ min-width:0; }
.pie__marca img{ width:190px; margin-bottom:1.25rem; }
.pie__marca p{ margin:0; color:#fff; font-size:.925rem; max-width:36ch; }

.pie__col{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.pie__col h2{
  font-family:var(--mono); font-weight:500; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-claro); margin:0 0 .5rem;
}
.pie__col a{
  text-decoration:none; font-size:.95rem; color:#fff;
  border-bottom:1px solid transparent;
}
.pie__col a:hover{ border-bottom-color:var(--teal); }
.pie__dir{ margin:.5rem 0 0; color:#fff; font-size:.9rem; line-height:1.6; }

.pie__legal{
  margin-top:clamp(3rem,5vw,4rem); padding-top:1.5rem;
  border-top:1px solid var(--linea-osc);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:.75rem; color:#fff;
}
.pie__legal p{ margin:0; }
.pie__legales{ display:flex; gap:1.25rem; }
.pie__legales a{ color:#fff; text-decoration:none; border-bottom:1px solid transparent; }
.pie__legales a:hover{ border-bottom-color:var(--teal); }

/* ── botón flotante ─────────────────────────────────────── */

.wa{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:var(--teal); color:var(--tinta);
  display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(6,16,15,.28);
  transition:transform .2s;
}
.wa::before{
  content:'';
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--teal);
  animation:onda 2.8s ease-out infinite;
}
@keyframes onda{
  0%{ transform:scale(1); opacity:.65; }
  70%,100%{ transform:scale(1.5); opacity:0; }
}
.wa:hover{ transform:scale(1.07); }
.wa svg{ width:30px; height:30px; fill:currentColor; position:relative; }

/* ── revelado al hacer scroll (solo si hay JS) ──────────── */

.js-revelar [data-revelar]{
  opacity:0; transform:translateY(20px);
  transition:opacity .75s var(--suave), transform .75s var(--suave);
}
.js-revelar [data-revelar].es-visible{ opacity:1; transform:none; }

/* ── responsive ─────────────────────────────────────────── */

@media (max-width:1080px){
  .nav{ display:none; }
  .menu-btn{ display:block; margin-left:0; }

  /* El botón de contacto se queda visible: es la acción principal
     y esconderla tras el menú cuesta conversiones. */
  .cabecera__cta{
    margin-left:auto;
    padding:.6rem 1rem;
    font-size:.9rem;
  }
}

@media (max-width:480px){
  .cabecera__int{ gap:.6rem; }
  .cabecera__logo img{ width:132px; }
  .cabecera__cta{ padding:.55rem .8rem; font-size:.85rem; }
}

@media (max-width:900px){
  .cierre__rejilla{ grid-template-columns:1fr; }
  .hero{
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
    min-height:clamp(560px, 78vh, 760px);
  }
  /* en pantalla estrecha la foto se oscurece de arriba abajo,
     no de izquierda a derecha */
  .hero__velo{
    background:
      linear-gradient(to top, rgba(6,16,15,.96) 12%, rgba(6,16,15,.72) 55%, rgba(6,16,15,.55) 100%),
      linear-gradient(90deg, rgba(6,16,15,.75), rgba(6,16,15,.45));
  }
  .hero .malla{
    -webkit-mask-image:radial-gradient(110% 70% at 30% 70%, #000 8%, transparent 75%);
    mask-image:radial-gradient(110% 70% at 30% 70%, #000 8%, transparent 75%);
  }
  .hero__control{ flex-wrap:wrap; gap:.9rem 1.25rem; }
  .visor__barras{ max-width:none; }
}

@media (max-width:860px){
  .capacidad a{ grid-template-columns:1fr 2rem; gap:.75rem 1.5rem; }
  .capacidad h3,
  .capacidad p,
  .capacidad .tags{ grid-column:1; }
  .capacidad__flecha{ grid-column:2; grid-row:1; }
  .infra__cabeza{ align-items:start; }
}

@media (max-width:720px){
  html{ scroll-padding-top:76px; }
  .hero__acciones .btn,
  .cierre__acciones .btn{ flex:1 1 100%; }
  .plan--destacado{ clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
  .medida .btn{ width:100%; }
  .testimonios blockquote p{ font-size:1.25rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .malla, .malla::after, .infra::before, .tira__pista, .wa::before,
  .hero__img.es-activa, .visor__barra.es-activa i, .traza{ animation:none !important; }
  .traza{ display:none; }
}


/* -- precio visible: es lo primero que se pregunta -------- */

/* En la tarjeta va bajo el titulo, en la columna 1. Sobre fondo oscuro
   el teal claro da 12:1; sobre claro hay que bajar al teal oscuro. */
/* p.capacidad__precio, no .capacidad__precio a secas: si no, `.capacidad p`
   le gana en especificidad y lo manda a la columna 2 en blanco. */
.capacidad p.capacidad__precio{
  grid-column:1; margin:.35rem 0 0;
  font-family:var(--mono); font-size:.95rem; font-weight:500;
  letter-spacing:.04em; color:var(--teal-osc);
}
.seccion--oscura .capacidad p.capacidad__precio{ color:var(--teal-claro); }

/* En el menu, alineado a la derecha del rotulo. */
.nav__precio{
  margin-left:.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--teal-claro);
}
.nav__sub a,
.nav-movil__hijo{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }


/* -- carrusel de testimonios ----------------------------- */

/* Sin JS es una fila con scroll; el script solo anade los controles.
   Por eso la pista lleva scroll-snap y no depende de nada mas. */
.carrusel{ position:relative; }

.carrusel__pista{
  display:flex; gap:1px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carrusel__pista::-webkit-scrollbar{ display:none; }
.carrusel__pista:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

.carrusel__pista > li{
  flex:0 0 calc((100% - 2px) / 3);
  min-width:0; scroll-snap-align:start;
}
@media (max-width:900px){ .carrusel__pista > li{ flex-basis:calc((100% - 1px) / 2); } }
@media (max-width:620px){ .carrusel__pista > li{ flex-basis:100%; } }

.carrusel__mandos{
  display:flex; align-items:center; gap:1rem;
  margin-top:1.5rem;
}
.carrusel__btn{
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem; flex:none;
  background:none; cursor:pointer;
  border:1px solid var(--linea); border-radius:50%;
  color:var(--tinta); font-size:1.1rem; line-height:1;
  transition:background .2s, border-color .2s, color .2s;
}
.carrusel__btn:hover:not(:disabled){ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.carrusel__btn:disabled{ opacity:.3; cursor:default; }
.carrusel__btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.carrusel__puntos{ display:flex; gap:.5rem; margin-left:auto; }
.carrusel__punto{
  width:.5rem; height:.5rem; padding:0; flex:none;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--gris-claro); transition:background .2s, transform .2s;
}
.carrusel__punto[aria-current="true"]{ background:var(--teal-osc); transform:scale(1.35); }
.carrusel__punto:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

/* Sobre fondo oscuro los mandos se invierten. La tarjeta no: siempre es clara. */
.seccion--oscura .carrusel__btn{ border-color:var(--linea-osc); color:#fff; }
.seccion--oscura .carrusel__btn:hover:not(:disabled){ background:#fff; border-color:#fff; color:var(--tinta); }
.seccion--oscura .carrusel__punto{ background:rgba(255,255,255,.35); }
.seccion--oscura .carrusel__punto[aria-current="true"]{ background:var(--teal-claro); }


/* == tablas de ficha ===================================== */

/* Antes eran una rejilla de bordes pegada al borde de la caja. Ahora la
   caja tiene aire, una franja de titulo y algo de profundidad, para que
   no parezca pegada al fondo. El radio sigue el del sitio: nada de
   esquinas muy redondas, que romperian el lenguaje. */
.tabla__caja{
  position:relative;
  box-shadow:0 1px 2px rgba(6,16,15,.05), 0 22px 48px -32px rgba(6,16,15,.45);
}
.tabla caption{
  padding:1rem 1.4rem .9rem;
  background:linear-gradient(180deg, rgba(32,178,170,.07), rgba(32,178,170,0));
  border-bottom:1px solid var(--linea);
}
.tabla th, .tabla td{ padding:.9rem 1.4rem; }
.tabla tbody tr{ transition:background .18s; }
.tabla tbody tr:hover{ background:rgba(32,178,170,.05); }
.tabla tbody tr:nth-child(even){ background:rgba(6,16,15,.018); }
.tabla tbody tr:nth-child(even):hover{ background:rgba(32,178,170,.05); }

/* Sobre fondo oscuro la caja necesita un halo, o se ve recortada. */
.seccion--oscura .tabla__caja,
.infra .tabla__caja{
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 34px 76px -38px rgba(0,0,0,.85);
}

/* == comparativa de planes =============================== */

.comparativa{
  background:var(--blanco); color:var(--tinta);
  border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 40px 90px -42px rgba(0,0,0,.85);
}
.comparativa table{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:640px; }
.comparativa__rotulos{ width:26%; }

/* La cabecera es el gancho: nombre, precio y para quien es. */
.comparativa thead th{
  vertical-align:top; text-align:left;
  padding:1.5rem 1.2rem 1.35rem;
  border-bottom:1px solid var(--linea);
  background:linear-gradient(180deg, rgba(32,178,170,.08), rgba(32,178,170,0));
}
.comparativa thead td{ border-bottom:1px solid var(--linea); }
.comparativa__nombre{
  display:block;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--teal-osc);
}
.comparativa__precio{
  display:block; margin:.5rem 0 .55rem;
  font-family:var(--display); font-weight:600; font-size:1.85rem;
  letter-spacing:-.03em; line-height:1;
}
.comparativa__precio em{
  font-style:normal; font-size:.8rem; font-weight:400;
  letter-spacing:0; color:var(--gris);
}
.comparativa__para{
  display:block; font-size:.83rem; line-height:1.4; color:var(--gris);
}

.comparativa tbody th{
  text-align:left; padding:.85rem 1.4rem;
  font-family:var(--mono); font-size:.72rem; font-weight:400;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gris);
  border-bottom:1px solid var(--linea);
}
.comparativa tbody td{
  padding:.85rem 1.2rem;
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  border-bottom:1px solid var(--linea);
}
.comparativa tbody tr:last-child th,
.comparativa tbody tr:last-child td{ border-bottom:0; }
.comparativa tbody tr{ transition:background .18s; }
.comparativa tbody tr:hover{ background:rgba(32,178,170,.05); }

/* La columna de en medio se levanta: es la que suele convenir. */
.comparativa .es-destacado{ background:rgba(32,178,170,.045); }
.comparativa thead th.es-destacado{
  background:linear-gradient(180deg, rgba(32,178,170,.16), rgba(32,178,170,.03));
  box-shadow:inset 0 3px 0 var(--teal);
}
.comparativa tbody tr:hover .es-destacado{ background:rgba(32,178,170,.08); }

.comparativa__nota{
  margin:1.5rem 0 0; max-width:62ch;
  font-size:.95rem; line-height:1.55; color:#fff;
}
.comparativa__nota strong{ color:var(--teal-claro); }

@media (max-width:620px){
  .comparativa__precio{ font-size:1.5rem; }
  .comparativa thead th{ padding:1.15rem .9rem 1rem; }
  .comparativa tbody th, .comparativa tbody td{ padding:.75rem .9rem; }
}


/* Texto que va debajo de una tabla ancha. Sin esto queda colgando a la
   izquierda mientras la tabla ocupa todo el ancho, y se ve descuadrado.
   El bloque se centra; el texto largo sigue alineado a la izquierda,
   porque centrar tres parrafos deja los dos bordes en bandera y cuesta
   mas leerlo. */
.bajo-tabla{
  margin-left:auto; margin-right:auto;
  margin-top:2.25rem;
}
.prosa.bajo-tabla{ max-width:64ch; }
p.bajo-tabla{ max-width:70ch; text-align:center; }

/* La nota de la comparativa es corta: centrada entera se ve mejor. */
.comparativa__nota{
  margin:2.25rem auto 0; max-width:62ch; text-align:center;
}