/* ═══════════════════════════════════════════════════════════
   ASISTECNICA GPS — Hoja de estilos
   Papel: lienzo de mapa. Tinta: azul marino. Acento: dorado.
   ═══════════════════════════════════════════════════════════ */

/* ── Fichas de diseño ─────────────────────────────────────── */
:root{
  /* Color */
  --tinta:        #0A1A5C;
  --tinta-honda:  #050D33;
  --tinta-clara:  #1B3080;
  --oro:          #E8B23A;
  --oro-honda:    #7A5A12;
  --papel:        #EEF1F5;
  --papel-alto:   #F7F9FB;
  --papel-hondo:  #E3E8EF;
  --texto:        #12161F;
  --texto-tenue:  #59616F;
  --linea:        #0A1A5C1F;
  --linea-tenue:  #0A1A5C12;
  --critico:      #C6362E;
  --alerta:       #B07A0C;

  /* Tipografía */
  --rotulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --lectura: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dato: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Ritmo */
  --ancho: 1216px;
  --canto: 24px;
  --aire: 104px;
  --curva: 4px;
  --curva-grande: 10px;
}

/* ── Reinicio ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font:400 17px/1.65 var(--lectura);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

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

.saltar{
  position:absolute; left:12px; top:12px; z-index:200;
  padding:14px 22px; background:var(--tinta); color:#fff;
  font:600 15px var(--lectura);
  clip-path:inset(50%);           /* oculto sin salirse del lienzo */
  opacity:0; pointer-events:none;
}
.saltar:focus{ clip-path:none; opacity:1; pointer-events:auto; }

/* ── Piezas compartidas ───────────────────────────────────── */
.envoltura{
  width:100%; max-width:var(--ancho);
  margin-inline:auto; padding-inline:var(--canto);
}

.sello{
  margin:0 0 18px;
  font:600 12px/1 var(--dato);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--oro-honda);
}
.sello::before{
  content:""; display:inline-block;
  width:22px; height:2px; margin-right:10px;
  vertical-align:.28em; background:var(--oro);
}
.sello--oro{ color:var(--oro); }

.seccion{ padding-block:var(--aire); }
.seccion--alterna{ background:var(--papel-hondo); }
.seccion--oscura{
  background:var(--tinta);
  color:#E8ECF5;
}

/* Fotografía de fondo velada. La foto va en `background-image` en línea:
   dentro de una custom property, url() se resolvería contra esta hoja. */
.seccion--foto{
  position:relative;
  isolation:isolate;
  background-color:var(--tinta-honda);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.seccion--foto::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(102deg, #050D33F2 0%, #0A1A5CE0 46%, #0A1A5CAD 100%);
}
.seccion--foto > .envoltura{ position:relative; }

.encabezado{ max-width:760px; margin-bottom:56px; }
.encabezado__titulo{
  margin:0;
  font:800 clamp(30px,4vw,50px)/1.08 var(--rotulo);
  font-style:italic;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--tinta);
}
.seccion--oscura .encabezado__titulo{ color:#fff; }
.encabezado__bajada{
  margin-top:20px;
  font-size:18px;
  color:var(--texto-tenue);
  text-wrap:pretty;
}
.seccion--oscura .encabezado__bajada{ color:#AEBBD8; }
.encabezado--claro{ max-width:840px; }

.aclaracion{
  margin-top:40px; padding:16px 20px;
  border-left:3px solid var(--oro);
  background:var(--papel-alto);
  font-size:15px; color:var(--texto-tenue);
  max-width:760px;
}

/* ── Botones ──────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px;
  border-radius:var(--curva);
  font:600 15px/1.2 var(--lectura);
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.boton--oro{ background:var(--oro); color:var(--tinta-honda); }
.boton--oro:hover{ background:#F2C25C; transform:translateY(-1px); }

.boton--linea{
  border:1.5px solid var(--tinta);
  color:var(--tinta);
}
.boton--linea:hover{ background:var(--tinta); color:#fff; }

/* Contorno claro, para fondos oscuros o con foto */
.boton--claro{
  border:1.5px solid #FFFFFF66;
  color:#fff;
  backdrop-filter:blur(6px);
}
.boton--claro:hover{ background:#fff; color:var(--tinta); border-color:#fff; }

.boton--wa{ color:var(--tinta); padding:12px 14px; }
.boton--wa svg{ width:20px; height:20px; }
.boton--wa:hover{ color:var(--tinta-clara); }

.boton--grande{ padding:16px 30px; font-size:16px; }
.boton--bloque{ width:100%; padding:16px; font-size:16px; }

/* ═══════════ CINTA + CABECERA ═══════════ */
.cinta{
  background:var(--tinta-honda);
  color:#B9C6E4;
  font:500 12.5px/1 var(--dato);
  letter-spacing:.04em;
}
.cinta__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:38px; flex-wrap:wrap;
}
.cinta__dato span{ color:var(--oro); }
.cinta__contactos{ display:flex; align-items:center; gap:10px; }
.cinta__contactos a:hover{ color:#fff; }
.cinta__sep{ opacity:.45; }

.cabecera{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.cabecera__fila{
  display:flex; align-items:center; gap:28px;
  min-height:76px;
}

.marca{ display:flex; align-items:center; flex-shrink:0; }
.marca__logo{
  display:block;
  height:46px; width:auto;
}
.marca--pie .marca__logo{ height:50px; }

.nav{ margin-left:auto; }
.nav__lista{ display:flex; align-items:center; gap:2px; }
.nav__enlace{
  display:block; padding:10px 13px;
  font:500 15.5px/1 var(--lectura);
  color:var(--texto);
  border-radius:var(--curva);
  transition:color .16s ease, background .16s ease;
}
.nav__enlace:hover{ color:var(--tinta); background:#0A1A5C0D; }

.cabecera__acciones{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Mega menú */
.nav__item--mega{ position:static; }
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--papel-alto);
  border-bottom:1px solid var(--linea);
  box-shadow:0 22px 44px -24px #0A1A5C40;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  /* visibility salta al final al cerrar, y de inmediato al abrir */
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega,
.mega.esta-abierto{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}

.mega__rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:14px 36px; padding-block:34px 38px;
}
.mega__titulo{
  margin:0 0 14px;
  font:600 11.5px/1 var(--dato);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-honda);
}
.mega__col a{
  display:block; padding:10px 12px; margin-left:-12px;
  border-radius:var(--curva);
  transition:background .16s ease;
}
.mega__col a:hover{ background:var(--papel-hondo); }
.mega__col a b{
  display:block;
  font:600 16px/1.3 var(--lectura);
  color:var(--tinta);
}
.mega__col a span{
  display:block; margin-top:2px;
  font-size:14px; color:var(--texto-tenue);
}
.mega__col--destacada{
  padding-left:36px;
  border-left:1px solid var(--linea);
}
.mega__nota{
  padding-left:36px;
  border-left:1px solid var(--linea);
}
.mega__nota p{ font-size:15px; color:var(--texto-tenue); }
.mega__cta{
  display:inline-block !important;
  margin-top:16px; margin-left:0 !important; padding:0 !important;
  font:600 15px var(--lectura); color:var(--tinta) !important;
  border-bottom:2px solid var(--oro);
  border-radius:0 !important;
}
.mega__cta:hover{ background:none !important; }

.hamburguesa{ display:none; width:44px; height:44px; padding:11px; }
.hamburguesa span{
  display:block; height:2px; background:var(--tinta);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.hamburguesa span + span{ margin-top:5px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ═══════════ HÉROE ═══════════ */
.heroe{
  position:relative;
  padding-block:96px 104px;
  background:var(--tinta-honda);
  color:#fff;
  overflow:hidden;
}

/* ── Carrusel de fondo ── */
.heroe__fondo{ position:absolute; inset:0; overflow:hidden; }
.heroe__foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.1s ease, transform 7s linear;
}
.heroe__foto.esta-activa{ opacity:1; transform:scale(1); }

/* Velo: casi opaco donde va el texto, translúcido al otro lado */
.heroe__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, #050D3399 0%, #050D3300 22%, #050D3300 74%, #050D33E6 100%),
    linear-gradient(96deg, #050D33F5 0%, #050D33E0 34%, #0A1A5CB8 62%, #0A1A5C8C 100%);
}

.heroe__rejilla{
  position:relative;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:64px; align-items:center;
}

.heroe__titulo{
  margin:0;
  font:800 clamp(38px,5.4vw,70px)/1.02 var(--rotulo);
  font-style:italic;
  letter-spacing:-.008em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 24px #050D3359;
}
.heroe__titulo em{ font-style:italic; color:var(--oro); }
.heroe__bajada{
  max-width:520px; margin-top:24px;
  font-size:19px; color:#C7D2E8;
  text-wrap:pretty;
}
.heroe__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* ── Los tres momentos: rótulo y control del carrusel ── */
.momentos{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:40px;
  border-top:1px solid #FFFFFF26;
  padding-top:8px;
}
.momento{
  display:flex; align-items:baseline; gap:9px;
  padding:12px 16px 12px 0;
  margin-right:12px;
  position:relative;
  text-align:left;
}
.momento::before{
  content:""; position:absolute; left:0; top:-9px;
  width:0; height:2px; background:var(--oro);
  transition:width .3s ease;
}
.momento.esta-activo::before{ width:calc(100% - 12px); }
.momento__num{
  font:600 11px/1 var(--dato);
  letter-spacing:.1em;
  color:var(--oro);
}
/* El estado activo se marca con el filo dorado y el blanco pleno,
   no atenuando el conjunto: en opacidad el número dorado caía a 3:1. */
.momento__texto{
  font:700 17px/1 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  letter-spacing:.02em;
  color:#A9B6D4;
  transition:color .2s ease;
}
.momento:hover .momento__texto{ color:#DCE3F2; }
.momento.esta-activo .momento__texto{ color:#fff; }

/* ── Elemento firma: bitácora ── */
.bitacora{
  position:relative;
  background:#050D33D9;
  backdrop-filter:blur(16px) saturate(120%);
  border:1px solid #E8B23A40;
  border-radius:var(--curva-grande);
  box-shadow:0 34px 70px -26px #00000099;
  overflow:hidden;
}
.bitacora__barra{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px;
  background:#0A1A5CCC;
  border-bottom:1px solid #FFFFFF14;
}
.bitacora__pulso{
  width:8px; height:8px; border-radius:50%;
  background:#3ED27A;
  box-shadow:0 0 0 0 #3ED27A99;
  animation:latido 2.4s ease-out infinite;
}
@keyframes latido{
  0%{ box-shadow:0 0 0 0 #3ED27A99; }
  70%{ box-shadow:0 0 0 9px #3ED27A00; }
  100%{ box-shadow:0 0 0 0 #3ED27A00; }
}
.bitacora__marca{
  margin:0; flex:1;
  font:600 11.5px/1 var(--dato);
  letter-spacing:.16em; text-transform:uppercase;
  color:#9FB2DC;
}
.bitacora__reloj{
  margin:0;
  font:500 13px/1 var(--dato);
  font-variant-numeric:tabular-nums;
  color:var(--oro);
}

.bitacora__lista{ padding:6px 0; }
.evento{
  padding:16px 20px 18px 34px;
  position:relative;
  border-bottom:1px solid #FFFFFF0F;
}
.evento:last-child{ border-bottom:0; }
.evento::before{
  content:""; position:absolute;
  left:19px; top:23px;
  width:7px; height:7px; border-radius:50%;
  background:var(--alerta);
}
.evento--critico::before{ background:var(--critico); }

.evento__cabeza{
  display:flex; align-items:baseline; gap:12px;
  font:500 12px/1 var(--dato);
  letter-spacing:.03em;
}
.evento__hora{ color:#8296C4; font-variant-numeric:tabular-nums; }
.evento__unidad{ color:var(--oro); }

.evento__deteccion{
  margin-top:7px;
  font:600 15.5px/1.4 var(--lectura);
  color:#FFFFFF;
}
.evento__respuesta{
  margin-top:5px; padding-left:16px;
  position:relative;
  font-size:14px; line-height:1.5;
  color:#9FB2DC;
}
.evento__respuesta::before{
  content:"→"; position:absolute; left:0; top:0;
  color:var(--oro); font-family:var(--dato);
}

.bitacora__nota{
  padding:16px 20px;
  background:#FFFFFF08;
  border-top:1px solid #FFFFFF14;
  font-size:14px; line-height:1.5;
  color:#AEBBD8;
}

/* Entrada escalonada de eventos */
.evento{ animation:asomar .5s ease-out backwards; }
.evento:nth-child(1){ animation-delay:.15s; }
.evento:nth-child(2){ animation-delay:.35s; }
.evento:nth-child(3){ animation-delay:.55s; }
.evento:nth-child(4){ animation-delay:.75s; }
@keyframes asomar{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* ═══════════ FRANJA DE CONFIANZA ═══════════ */
.confianza{
  padding-block:44px;
  background:var(--papel-alto);
  border-block:1px solid var(--linea);
}
.confianza__lema{
  margin:0 0 28px;
  font:700 18px/1.3 var(--rotulo);
  font-style:italic;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--tinta);
}
.confianza__rejilla{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--linea);
  border:1px solid var(--linea);
}
.confianza__dato{
  padding:22px 24px; background:var(--papel-alto);
}
.confianza__dato dt{
  font:500 11.5px/1 var(--dato);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--texto-tenue);
}
.confianza__dato dd{
  margin:10px 0 0;
  font:800 40px/1 var(--rotulo);
  font-style:italic;
  color:var(--tinta);
}
.asterisco{ color:var(--oro-honda); font-size:.5em; vertical-align:super; }
.confianza__aviso{
  margin-top:14px;
  font:400 13px var(--dato);
  color:var(--texto-tenue);
}

/* ═══════════ RIESGOS ═══════════ */
.riesgos{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--linea);
  border:1px solid var(--linea);
}
.riesgo{
  display:grid; grid-template-columns:1fr 1.25fr;
  gap:24px; align-items:start;
  padding:26px 28px;
  background:var(--papel);
}
.riesgo__problema{
  margin:0; position:relative; padding-left:20px;
  font:600 16.5px/1.35 var(--lectura);
  color:var(--tinta);
}
.riesgo__problema::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px;
  background:var(--critico);
  transform:rotate(45deg);
}
.riesgo__respuesta{
  margin:0; font-size:15.5px; color:var(--texto-tenue);
}

/* ═══════════ TARJETAS DE SOLUCIÓN ═══════════ */
.tarjetas{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.tarjeta{
  display:flex; flex-direction:column;
  padding:30px 28px 26px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--curva-grande);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tarjeta:hover{
  border-color:var(--oro);
  transform:translateY(-3px);
  box-shadow:0 18px 34px -22px #0A1A5C59;
}
.tarjeta__icono{
  width:34px; height:34px; margin-bottom:20px;
  fill:none; stroke:var(--tinta); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.tarjeta h3{
  font:700 22px/1.15 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--tinta);
}
.tarjeta p{
  margin-top:11px; flex:1;
  font-size:15.5px; color:var(--texto-tenue);
}
.tarjeta__mas{
  margin-top:22px;
  font:600 14px var(--lectura);
  color:var(--tinta);
}
.tarjeta__mas::after{
  content:" →"; color:var(--oro-honda);
  transition:margin-left .18s ease;
  display:inline-block;
}
.tarjeta:hover .tarjeta__mas::after{ margin-left:5px; }

/* ═══════════ SECTORES (seguridad electrónica) ═══════════ */
.sectores{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:#FFFFFF1F;
  border:1px solid #FFFFFF1F;
}
.sector{ background:var(--tinta); }
.sector a{
  display:block; height:100%;
  padding:28px 26px;
  transition:background .18s ease;
}
.sector a:hover{ background:var(--tinta-clara); }
.sector h3{
  font:700 21px/1.15 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:#fff;
}
.sector h3::after{
  content:"→"; margin-left:9px;
  color:var(--oro); font-style:normal;
  display:inline-block; transition:transform .18s ease;
}
.sector a:hover h3::after{ transform:translateX(4px); }
.sector p{
  margin-top:9px;
  font-size:15px; color:#AEBBD8;
}

/* ═══════════ EQUIPOS ═══════════ */
.equipos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.equipo{
  padding:24px 22px 26px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-top:3px solid var(--tinta);
  border-radius:0 0 var(--curva) var(--curva);
}
.equipo--destacado{ border-top-color:var(--oro); }
.equipo__familia{
  font:500 11px/1 var(--dato);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-tenue);
}
.equipo__nombre{
  margin-top:12px;
  font:700 25px/1.05 var(--rotulo);
  text-transform:uppercase;
  letter-spacing:.005em;
  color:var(--tinta);
}
.equipo__nombre em{ font-style:italic; color:var(--oro-honda); }
.equipo__uso{
  margin-top:6px;
  font-size:14.5px; color:var(--texto-tenue);
}
.equipo__lista{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--linea);
  font-size:14.5px; line-height:1.5;
}
.equipo__lista li{ position:relative; padding-left:16px; }
.equipo__lista li + li{ margin-top:8px; }
.equipo__lista li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:6px; height:1.5px; background:var(--oro);
}

/* ═══════════ VALORES AGREGADOS ═══════════ */
.valores{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.valor{
  display:block; padding:32px 30px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--curva-grande);
  transition:border-color .2s ease, transform .2s ease;
}
.valor:hover{ border-color:var(--oro); transform:translateY(-3px); }
.valor__nombre{
  font:800 30px/1 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:var(--tinta);
}
.valor__frase{
  margin-top:10px; padding-bottom:18px;
  border-bottom:1px solid var(--linea);
  font-size:16px; color:var(--texto);
}
.valor ul{
  margin-top:18px;
  font-size:15px; line-height:1.5; color:var(--texto-tenue);
}
.valor ul li{ position:relative; padding-left:18px; }
.valor ul li + li{ margin-top:9px; }
.valor ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--oro);
}

/* ═══════════ INDUSTRIAS ═══════════ */
.industrias{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.industrias a{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:238px;
  padding:24px 22px;
  background:var(--tinta-honda);
  border-radius:var(--curva-grande);
}
.industrias img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .55s ease;
}
.industrias a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(175deg, #050D3352 0%, #050D33C7 52%, #050D33F5 100%);
  transition:background .25s ease;
}
.industrias a:hover img{ transform:scale(1.07); }
.industrias a:hover::before{
  background:linear-gradient(175deg, #050D3352 0%, #0A1A5CC7 52%, #0A1A5CF5 100%);
}
.industrias b{
  display:block;
  font:700 20px/1.12 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:#fff;
}
.industrias b::after{
  content:""; display:block;
  width:24px; height:2px; margin-top:10px;
  background:var(--oro);
  transition:width .25s ease;
}
.industrias a:hover b::after{ width:46px; }
.industrias span{
  display:block; margin-top:10px;
  font-size:14.5px; color:#C7D2E8;
}

/* ═══════════ MONITOREO ═══════════ */
.monitoreo__rejilla{
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:start;
}
.monitoreo__intro .boton{ margin-top:30px; }

.pasos{ counter-reset:paso; }
.paso{
  display:grid; grid-template-columns:88px 1fr;
  gap:20px; align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid #FFFFFF1F;
}
.paso:first-child{ border-top:1px solid #FFFFFF1F; }
.paso__num{
  margin:0;
  font:500 11.5px/1.5 var(--dato);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro);
}
.paso__texto{
  margin:0;
  font-size:16.5px; line-height:1.5;
  color:#DCE3F2;
}

/* ═══════════ MÉTODO ═══════════ */
.metodo{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--linea);
  border:1px solid var(--linea);
}
.metodo li{ padding:28px 26px; background:var(--papel-hondo); }
.metodo b{
  display:block;
  font:600 17px/1.3 var(--lectura);
  color:var(--tinta);
}
.metodo b::before{
  content:""; display:block;
  width:26px; height:2px; margin-bottom:14px;
  background:var(--oro);
}
.metodo span{
  display:block; margin-top:8px;
  font-size:15px; color:var(--texto-tenue);
}

/* ═══════════ PLATAFORMAS ═══════════ */
.plataformas{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.plataforma{
  padding:28px 26px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--curva-grande);
}
.plataforma h3{
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--linea);
  font:800 27px/1 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:var(--tinta);
}
.plataforma p{ font-size:15px; color:var(--texto-tenue); }

/* ═══════════ PLANES ═══════════ */
.planes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.plan{
  display:flex; flex-direction:column;
  padding:34px 30px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--curva-grande);
}
.plan--destacado{
  background:var(--tinta);
  border-color:var(--tinta);
  color:#E8ECF5;
}
.plan__nombre{
  font:800 30px/1 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:var(--tinta);
}
.plan--destacado .plan__nombre{ color:#fff; }
.plan__rango{
  margin-top:8px;
  font:500 12.5px/1 var(--dato);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--oro-honda);
}
.plan--destacado .plan__rango{ color:var(--oro); }
.plan__texto{
  margin-top:18px; flex:1;
  font-size:15.5px; color:var(--texto-tenue);
}
.plan--destacado .plan__texto{ color:#AEBBD8; }
.plan__cta{
  margin-top:26px;
  font:600 15px var(--lectura);
  color:var(--tinta);
  border-bottom:2px solid var(--oro);
  align-self:flex-start;
  padding-bottom:2px;
}
.plan--destacado .plan__cta{ color:#fff; }

/* ═══════════ CIERRE ═══════════ */
.cierre{
  padding-block:var(--aire);
  background:var(--tinta-honda);
  color:#E8ECF5;
}
.cierre__rejilla{
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:start;
}
.cierre__titulo{
  margin:0;
  font:800 clamp(30px,3.8vw,46px)/1.06 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:#fff;
}
.cierre__bajada{
  margin-top:20px; font-size:18px; color:#AEBBD8;
}
.cierre__lista{ margin-top:30px; }
.cierre__lista li{
  position:relative; padding-left:26px;
  font-size:15px; color:#9FB2DC;
}
.cierre__lista li + li{ margin-top:12px; }
.cierre__lista li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:11px; height:11px; border-radius:50%;
  border:1.5px solid var(--oro);
}

/* Formulario */
.formulario{
  padding:32px 30px 30px;
  background:var(--papel);
  border-radius:var(--curva-grande);
  color:var(--texto);
}
.formulario__titulo{
  margin:0 0 22px;
  font:800 26px/1.1 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:var(--tinta);
}
.campo{ margin-bottom:16px; }
.campo--doble{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.campo label,
.campo--doble label{
  display:block; margin-bottom:6px;
  font:500 12.5px/1 var(--dato);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-tenue);
}
.campo input,
.campo select,
.campo textarea{
  width:100%; padding:12px 13px;
  font:400 15.5px var(--lectura);
  color:var(--texto);
  background:#fff;
  border:1px solid var(--linea);
  border-radius:var(--curva);
  transition:border-color .16s ease;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ border-color:var(--tinta); }
.campo textarea{ resize:vertical; }

.consentimiento{
  display:flex; gap:11px; align-items:flex-start;
  margin:6px 0 20px;
  font-size:14.5px; color:var(--texto-tenue);
}
.consentimiento input{
  margin-top:3px; width:17px; height:17px; flex-shrink:0;
  accent-color:var(--tinta);
}
.formulario__nota{
  margin-top:14px; text-align:center;
  font-size:14px; color:var(--texto-tenue);
}
.formulario__nota a{
  color:var(--tinta); font-weight:600;
  border-bottom:1.5px solid var(--oro);
}

/* ═══════════ PIE ═══════════ */
.pie{
  padding-block:64px 34px;
  background:var(--tinta);
  color:#AEBBD8;
  font-size:15px;
}
.pie__rejilla{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid #FFFFFF1F;
}
.pie__datos{
  display:grid; margin-top:22px; max-width:300px;
}
.pie__datos a{
  padding:7px 0;
  color:var(--papel); font-size:15px;
  text-decoration:none;
  transition:color .18s;
}
.pie__datos a:hover{ color:var(--oro); }
.pie__titulo{
  margin:0 0 16px;
  font:600 11.5px/1 var(--dato);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro);
}
.pie__col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.pie__col a{ transition:color .16s ease; }
.pie__col a:hover{ color:#fff; }
.pie__direccion{
  margin-top:6px; line-height:1.6;
  color:#8296C4; font-size:14px;
}

.pie__divisiones{
  padding-block:26px;
  border-bottom:1px solid #FFFFFF1F;
}
.pie__divisiones a{
  color:#DCE3F2;
  border-bottom:1px solid var(--oro);
  padding-bottom:2px;
}
.pie__divisiones a:hover{ color:#fff; }

.pie__base{
  display:flex; flex-wrap:wrap; gap:16px 30px;
  justify-content:space-between; align-items:center;
  padding-top:26px;
  font-size:14px;
}
.pie__base p{ margin:0; }
.pie__legal{ display:flex; flex-wrap:wrap; gap:20px; }
.pie__legal a:hover{ color:#fff; }

.pie__descargo{
  margin-top:26px; max-width:820px;
  font-size:13px; line-height:1.6;
  color:#8296C4;
}

/* ═══════════ WHATSAPP FLOTANTE ═══════════ */
.wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:grid; place-items:center;
  width:54px; height:54px;
  background:#1FA855; color:#fff;
  border-radius:50%;
  box-shadow:0 10px 24px -8px #00000059;
  transition:transform .18s ease;
}
.wa-flotante svg{ width:28px; height:28px; }
.wa-flotante:hover{ transform:scale(1.06); }

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════ */

@media (max-width:1120px){
  .equipos{ grid-template-columns:repeat(3,1fr); }
  .industrias{ grid-template-columns:repeat(2,1fr); }
  .plataformas{ grid-template-columns:repeat(2,1fr); }
  .pie__rejilla{ grid-template-columns:repeat(3,1fr); gap:36px; }
}

@media (max-width:980px){
  :root{ --aire:76px; }

  /* Cerrado se saca del flujo: si solo se desplazara fuera de pantalla,
     al ser `fixed` ensancharía el documento y `overflow-x` no lo recorta. */
  .nav{
    display:none;
    position:fixed; inset:0 0 0 auto;
    width:min(360px,86vw);
    margin:0; padding:96px 24px 32px;
    background:var(--papel-alto);
    border-left:1px solid var(--linea);
    overflow-y:auto;
    z-index:99;
  }
  .nav.esta-abierto{
    display:block;
    animation:entrar-nav .26s ease-out;
  }
  @keyframes entrar-nav{
    from{ transform:translateX(100%); }
    to{ transform:none; }
  }
  .nav__lista{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__item{ border-bottom:1px solid var(--linea); }
  .nav__enlace{
    width:100%; padding:15px 0; text-align:left;
    font-size:17px;
  }
  .nav__item--mega .nav__enlace::after{
    content:"+"; float:right; color:var(--oro-honda);
  }
  .nav__item--mega .nav__enlace[aria-expanded="true"]::after{ content:"−"; }

  .mega{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none;
    display:none;
  }
  .mega.esta-abierto{ display:block; }
  .nav__item--mega:hover .mega{ display:none; }
  .nav__item--mega:hover .mega.esta-abierto{ display:block; }
  .mega__rejilla{
    grid-template-columns:1fr; gap:8px;
    padding:0 0 16px; max-width:none;
  }
  .mega__col--destacada,
  .mega__nota{ padding-left:0; border-left:0; border-top:1px solid var(--linea); padding-top:16px; }

  .hamburguesa{ display:block; }
  .cabecera__acciones .boton--oro{ display:none; }

  .heroe__rejilla,
  .monitoreo__rejilla,
  .cierre__rejilla{ grid-template-columns:1fr; gap:44px; }
  .heroe{ padding-block:60px 72px; }
  /* En una columna el texto ya no ocupa solo la izquierda: velo parejo */
  .heroe__velo{
    background:
      linear-gradient(180deg, #050D33CC 0%, #050D33A6 40%, #050D33F2 100%);
  }

  .riesgos{ grid-template-columns:1fr; }
  .tarjetas,
  .sectores,
  .valores,
  .planes,
  .metodo{ grid-template-columns:repeat(2,1fr); }
  .equipos{ grid-template-columns:repeat(2,1fr); }
  .confianza__rejilla{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:680px){
  :root{ --canto:18px; --aire:60px; }
  body{ font-size:16px; }

  .cinta__fila{ justify-content:center; min-height:0; padding-block:9px; }
  .cinta__dato{ display:none; }

  .heroe__acciones{ flex-direction:column; align-items:stretch; }
  .heroe__acciones .boton{ width:100%; }

  .momentos{ gap:0; margin-top:32px; }
  .momento{
    flex:1 1 0; min-width:0;
    flex-direction:column; align-items:flex-start; gap:4px;
    margin-right:0; padding:12px 8px 12px 0;
  }
  .momento__texto{ font-size:15px; }
  .momento.esta-activo::before{ width:calc(100% - 8px); }

  .industrias a{ min-height:190px; }

  .riesgo{ grid-template-columns:1fr; gap:10px; }

  .tarjetas,
  .sectores,
  .valores,
  .planes,
  .metodo,
  .equipos,
  .plataformas,
  .industrias,
  .confianza__rejilla{ grid-template-columns:1fr; }

  .campo--doble{ grid-template-columns:1fr; }
  .pie__rejilla{ grid-template-columns:1fr; gap:32px; }
  .formulario{ padding:26px 20px 24px; }
  .wa-flotante{ right:14px; bottom:14px; }
}

/* ── Movimiento reducido ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ── Impresión ───────────────────────────────────────────── */
@media print{
  .cinta,.cabecera,.wa-flotante,.formulario{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ═══════════════════════════════════════════════════════════
   PÁGINAS INTERNAS
   ═══════════════════════════════════════════════════════════ */

/* ── Portada de página ───────────────────────────────────── */
.portada{
  padding-block:52px 84px;
  color:#fff;
}
.migas{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-bottom:34px;
  font:500 12.5px/1.5 var(--dato);
  color:#8296C4;
}
.migas a{ color:#AEBBD8; }
.migas a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.migas span[aria-current]{ color:var(--oro); }

.portada__titulo{
  max-width:30ch;
  margin:0;
  font:800 clamp(34px,4.8vw,60px)/1.03 var(--rotulo);
  font-style:italic;
  letter-spacing:-.006em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 24px #050D3359;
}
.portada__titulo em{ font-style:italic; color:var(--oro); }
.portada__entrada{
  max-width:62ch; margin-top:24px;
  font-size:18.5px; line-height:1.62;
  color:#C7D2E8;
  text-wrap:pretty;
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* ── Lista de funciones ──────────────────────────────────── */
.funciones{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 48px;
  max-width:1000px;
}
.funciones li{
  position:relative;
  padding:16px 0 16px 34px;
  border-bottom:1px solid var(--linea);
  font-size:16.5px; line-height:1.55;
  color:var(--texto);
}
.funciones li::before{
  content:""; position:absolute;
  left:0; top:24px;
  width:16px; height:2px;
  background:var(--oro);
}

/* ── Pares título / explicación ──────────────────────────── */
.detalles{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--linea);
  border:1px solid var(--linea);
}
.detalle{
  padding:28px 30px;
  background:var(--papel);
}
.seccion--alterna .detalle{ background:var(--papel-hondo); }
.detalle__nombre{
  font:700 21px/1.15 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--tinta);
}
.detalle__nombre::after{
  content:""; display:block;
  width:26px; height:2px; margin-top:12px;
  background:var(--oro);
}
.detalle__texto{
  margin-top:12px;
  font-size:15.5px; color:var(--texto-tenue);
}

/* ── Beneficios sobre oscuro ─────────────────────────────── */
.beneficios{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:#FFFFFF1F;
  border:1px solid #FFFFFF1F;
}
.beneficios li{
  padding:26px 24px;
  background:var(--tinta);
  font-size:16px; line-height:1.5;
  color:#DCE3F2;
}
.beneficios li::before{
  content:""; display:block;
  width:22px; height:2px; margin-bottom:14px;
  background:var(--oro);
}

/* ── Frase comercial ─────────────────────────────────────── */
.frase{
  padding-block:64px;
  background:var(--papel-alto);
  border-block:1px solid var(--linea);
}
.frase__texto{
  max-width:24ch;
  margin:0;
  font:800 clamp(26px,3.4vw,40px)/1.12 var(--rotulo);
  font-style:italic;
  text-transform:uppercase;
  color:var(--tinta);
}
.frase__texto::before{
  content:""; display:block;
  width:40px; height:3px; margin-bottom:22px;
  background:var(--oro);
}

/* ── Avisos técnicos y legales ───────────────────────────── */
.seccion--corta{ padding-block:0 var(--aire); }
.aviso{
  max-width:840px;
  padding:26px 30px;
  border-left:3px solid var(--oro);
  background:var(--papel-alto);
}
.aviso--legal{
  border-left-color:var(--critico);
  background:#C6362E0A;
}
.aviso__titulo{
  margin:0 0 8px;
  font:600 16.5px/1.3 var(--lectura);
  color:var(--tinta);
}
.aviso__texto{
  margin:0;
  font-size:15.5px; color:var(--texto-tenue);
}

/* ── Banda de cierre ─────────────────────────────────────── */
.banda{
  padding-block:72px;
  background:var(--tinta-honda);
  color:#E8ECF5;
}
.banda__fila{
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:48px; align-items:center;
}
.banda__titulo{
  margin:0; max-width:20ch;
  font:800 clamp(26px,3.2vw,38px)/1.08 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:#fff;
}
.banda__texto{
  margin-top:16px; max-width:52ch;
  font-size:17px; color:#AEBBD8;
}
.banda__acciones{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:flex-end;
}

/* ── Adaptación de las internas ──────────────────────────── */
@media (max-width:980px){
  .banda__fila{ grid-template-columns:1fr; gap:30px; }
  .banda__acciones{ justify-content:flex-start; }
  .beneficios{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:680px){
  .portada{ padding-block:34px 60px; }
  .portada__titulo{ max-width:none; }
  .portada__acciones{ flex-direction:column; align-items:stretch; }
  .portada__acciones .boton{ width:100%; }
  .funciones,
  .detalles,
  .beneficios{ grid-template-columns:1fr; }
  .funciones{ gap:0; }
  .frase__texto{ max-width:none; }
  .aviso{ padding:22px 20px; }
  .banda__acciones{ flex-direction:column; align-items:stretch; }
  .banda__acciones .boton{ width:100%; }
}

/* ═══════════════════════════════════════════════════════════
   BLOQUES DE PÁGINAS INTERNAS (segunda tanda)
   ═══════════════════════════════════════════════════════════ */

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

/* ── Portada sin fotografía: retícula cartográfica ───────── */
.portada--lisa{
  position:relative; isolation:isolate;
  background:var(--tinta-honda);
  color:#fff;
}
.portada--lisa::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(#FFFFFF14 1px, transparent 1px),
    linear-gradient(90deg, #FFFFFF14 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 90% at 18% 45%, #000 20%, transparent 76%);
}
.portada--lisa::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 60% 120% at 88% 50%, #1B308073, transparent 70%);
}

/* ── Prosa ───────────────────────────────────────────────── */
.prosa{ max-width:68ch; }
.prosa p{ font-size:17px; line-height:1.7; color:var(--texto-tenue); }
.prosa p + p{ margin-top:18px; }

/* ── Fichas enlazadas ────────────────────────────────────── */
.fichas{ display:grid; gap:16px; }
.fichas--4{ grid-template-columns:repeat(4,1fr); }
.fichas--3{ grid-template-columns:repeat(3,1fr); }
.fichas--2{ grid-template-columns:repeat(2,1fr); }

.ficha{
  display:flex; flex-direction:column;
  height:100%; padding:26px 24px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--curva-grande);
  transition:border-color .2s ease, transform .2s ease;
}
.seccion--alterna .ficha{ background:var(--papel); }
.ficha:hover{ border-color:var(--oro); transform:translateY(-3px); }
.ficha b{
  font:700 20px/1.14 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:var(--tinta);
}
.ficha b::after{
  content:""; display:block;
  width:24px; height:2px; margin-top:10px;
  background:var(--oro);
  transition:width .25s ease;
}
.ficha:hover b::after{ width:44px; }
.ficha span{
  display:block; margin-top:10px;
  font-size:15px; color:var(--texto-tenue);
}

/* Ficha con fotografía */
.ficha--foto{
  position:relative; isolation:isolate; overflow:hidden;
  justify-content:flex-end;
  min-height:238px;
  background:var(--tinta-honda);
  border-color:transparent;
}
.ficha--foto img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease;
}
.ficha--foto::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(175deg, #050D3352 0%, #050D33C7 52%, #050D33F5 100%);
  transition:background .25s ease;
}
.ficha--foto:hover img{ transform:scale(1.07); }
.ficha--foto:hover::before{
  background:linear-gradient(175deg, #050D3352 0%, #0A1A5CC7 52%, #0A1A5CF5 100%);
}
.ficha--foto b{ color:#fff; }
.ficha--foto span{ color:#C7D2E8; }

/* ── Preguntas frecuentes ────────────────────────────────── */
.preguntas{
  max-width:900px;
  border-top:1px solid var(--linea);
}
.pregunta{ border-bottom:1px solid var(--linea); }
.pregunta summary{
  display:flex; align-items:flex-start; gap:16px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font:600 18px/1.42 var(--lectura);
  color:var(--tinta);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:"+";
  margin-left:auto; flex-shrink:0;
  font:400 26px/1 var(--dato);
  color:var(--oro-honda);
  transition:transform .2s ease;
}
.pregunta[open] summary::after{ content:"−"; }
.pregunta summary:hover{ color:var(--tinta-clara); }
.pregunta__cuerpo{
  padding:0 44px 24px 0;
  max-width:70ch;
}
.pregunta__cuerpo p{
  font-size:16.5px; line-height:1.65;
  color:var(--texto-tenue);
}

/* ── Tablas de planes ────────────────────────────────────── */
.familias{ display:grid; gap:56px; }
/* Los items de grid traen min-width:auto y no dejan encoger al
   contenedor con overflow-x: sin esto la tabla desborda la página. */
.familias > *{ min-width:0; }
.familia__cabeza{ margin-bottom:22px; }
.familia__nombre{
  font:800 28px/1 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:var(--tinta);
}
.familia__texto{
  margin-top:10px; max-width:60ch;
  font-size:16px; color:var(--texto-tenue);
}
.tabla-envoltura{
  overflow-x:auto;
  border:1px solid var(--linea);
  border-radius:var(--curva-grande);
  background:var(--papel-alto);
}
.tabla{
  width:100%; min-width:680px;
  border-collapse:collapse;
  font-size:15px;
}
.tabla th, .tabla td{
  padding:15px 18px;
  text-align:center;
  border-bottom:1px solid var(--linea);
}
.tabla thead th{
  background:var(--tinta);
  color:#fff;
  font:700 15px/1.2 var(--lectura);
  border-bottom:0;
}
.tabla thead th span{
  display:block;
  font:500 11px/1.6 var(--dato);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--oro);
}
.tabla tbody th{
  text-align:left;
  font:600 15px/1.35 var(--lectura);
  color:var(--tinta);
  background:var(--papel-hondo);
  white-space:nowrap;
}
.tabla td{ color:var(--texto-tenue); }
.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td{ border-bottom:0; }

/* ── Canales de contacto ─────────────────────────────────── */
.canales{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; margin-top:36px;
  background:var(--linea);
  border:1px solid var(--linea);
}
.canal{
  display:block; padding:18px 20px;
  background:var(--papel-hondo);
  transition:background .18s ease;
}
.canal:hover{ background:var(--papel-alto); }
.canal__rotulo{
  display:block;
  font:500 11px/1 var(--dato);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--oro-honda);
}
.canal__dato{
  display:block; margin-top:8px;
  font:600 16px/1.3 var(--lectura);
  color:var(--tinta);
}

/* Variante clara del bloque de cierre, para la página de contacto */
.cierre__rejilla--claro .cierre__lista--clara li{ color:var(--texto-tenue); }
.cierre__rejilla--claro .cierre__lista--clara li::before{ border-color:var(--oro); }

@media (max-width:980px){
  .fichas--4{ grid-template-columns:repeat(2,1fr); }
  .fichas--3{ grid-template-columns:repeat(2,1fr); }
  .cierre__rejilla--claro{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .fichas--4,
  .fichas--3,
  .fichas--2{ grid-template-columns:1fr; }
  .canales{ grid-template-columns:1fr; }
  .pregunta summary{ font-size:16.5px; }
  .pregunta__cuerpo{ padding-right:0; }
  .familias{ gap:44px; }
}

/* Región de tabla con scroll: alcanzable por teclado. */
.tabla-envoltura:focus-visible{ outline:3px solid var(--oro); outline-offset:2px; }

/* ═══════════════════════════════════════════════════════════
   PLATAFORMAS, RECURSOS Y AJUSTES DE NAVEGACIÓN
   ═══════════════════════════════════════════════════════════ */

/* Fichas de plataforma: nombre y texto arriba, capacidades abajo */
.plataformas-fichas{ display:grid; gap:18px; }
.plataforma-ficha{
  display:grid; grid-template-columns:1fr 1.35fr;
  gap:40px;
  padding:34px 34px 36px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--curva-grande);
}
.plataforma-ficha__nombre{
  font:800 34px/1 var(--rotulo);
  font-style:italic; text-transform:uppercase;
  color:var(--tinta);
}
.plataforma-ficha__nombre::after{
  content:""; display:block;
  width:34px; height:3px; margin-top:14px;
  background:var(--oro);
}
.plataforma-ficha__texto{
  margin-top:16px;
  font-size:16px; line-height:1.6;
  color:var(--texto-tenue);
}
.plataforma-ficha__lista{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 32px;
  align-content:start;
}
.plataforma-ficha__lista li{
  position:relative;
  padding:12px 0 12px 26px;
  border-bottom:1px solid var(--linea);
  font-size:15px; line-height:1.5;
  color:var(--texto);
}
.plataforma-ficha__lista li::before{
  content:""; position:absolute; left:0; top:19px;
  width:12px; height:2px; background:var(--oro);
}

/* El menú crece: en pantallas medianas se aprieta antes de colapsar */
@media (min-width:981px) and (max-width:1250px){
  .cabecera__fila{ gap:16px; }
  .nav__enlace{ padding:10px 9px; font-size:14.5px; }
  .marca__logo{ height:33px; }
  .cabecera__acciones .boton--oro{ padding:11px 14px; font-size:14px; }
  .boton--wa span{ display:none; }
}

@media (max-width:980px){
  .plataforma-ficha{ grid-template-columns:1fr; gap:24px; }
}

@media (max-width:680px){
  .plataforma-ficha{ padding:26px 22px 28px; }
  .plataforma-ficha__lista{ grid-template-columns:1fr; }
}

/* ── Cabecera en pantallas angostas ──────────────────────────
   A 375 px la marca (184) más las acciones (182) más el hueco
   sumaban 36 px de más y ensanchaban el documento. El rótulo
   «WhatsApp» sale: el botón flotante ya cumple esa función. */
@media (max-width:680px){
  .cabecera__fila{ gap:12px; }
  .boton--wa span{ display:none; }
  .boton--wa{ padding:10px; }
  .marca__logo{ height:31px; }
}

/* Logotipo de submarca en la portada del equipo, en lugar del sello */
.portada__logo{
  display:block;
  height:56px; width:auto;
  margin-bottom:22px;
}
@media (max-width:680px){
  .portada__logo{ height:44px; }
}

/* ── Formulario: trampa y estado del envío ──────────────────
   La trampa no puede llevar display:none: algunos robots la
   detectan. Se saca del viewport y se oculta a lectores. */
.trampa{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}
.formulario__estado{
  margin:0 0 16px; padding:12px 15px;
  border-radius:9px; font-size:14.5px; line-height:1.5;
}
.formulario__estado--ok{
  background:#D8F0E2; color:#14603A; border:1px solid #A9DCC0;
}
.formulario__estado--error{
  background:#F9E2E2; color:#8E2020; border:1px solid #E7BDBD;
}
.formulario button[disabled]{ opacity:.6; cursor:progress; }