/* ==========================================================================
   AMES — Maqueta 2026
   Paleta tomada del logo: azul-violeta del wordmark + verde menta del isotipo
   ========================================================================== */

:root {
  --azul:        #3D51C4;
  --azul-osc:    #2A3A96;
  --azul-prof:   #1B2359;
  --menta:       #50D7B0;
  /* 5,28:1 con texto blanco encima y 4,96:1 como texto sobre el menta claro.
     El anterior (#2FB893) daba 2,5:1 y 2,35:1: no llegaba al minimo. */
  --menta-osc:   #177A5D;
  --tinta:       #0F172A;
  --gris:        #475569;
  /* 5,68:1 sobre blanco. El anterior (#94A3B8) daba 2,56:1 y no llegaba
     al minimo de 4,5:1 que necesita el texto chico para ser legible. */
  --gris-claro:  #5B6878;
  --linea:       #E2E8F0;
  --fondo:       #FAFAFA;
  --fondo-alt:   #F1F5F9;
  --fondo-menta: #EDFBF6;

  --radio:    18px;
  --radio-sm: 12px;

  /* Las tarjetas son vidrio, pero solo dentro del @supports del final: la base
     va opaca para que sigan siendo legibles si el navegador no lo soporta. */
  --tarjeta:      rgba(255,255,255,.92);
  /* Neutras y con desplazamiento real. Las teniamos teñidas de azul, que
     sobre la franja oscura se lee como halo de color en vez de elevacion. */
  --sombra-sm:0 6px 18px -8px rgba(12,16,32,.16);
  --sombra:   0 14px 34px -12px rgba(12,16,32,.20);
  --sombra-lg:0 28px 64px -20px rgba(12,16,32,.30);
  
  --ancho:    1180px;
  --trans:    .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gris);
  background: var(--fondo);
  /* Un fondo con un sutil mesh en body */
  background-image: 
    radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.8) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(80, 215, 176, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(61, 81, 196, 0.05) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(255, 255, 255, 0.8) 0px, transparent 50%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  color: var(--tinta);
  line-height: 1.15;
  letter-spacing: -.008em;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(2.15rem, 4.4vw, 3.35rem); }
h3 { font-size: 1.42rem; }

p { margin: 0 0 1.1em; }
a { color: var(--azul); text-decoration: none; }
img { max-width: 100%; display: block; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

section { padding: 96px 0; }
/* El gris arrancaba y terminaba de golpe, y el corte se leia como una linea.
   Con el degradado nace y muere en blanco, asi que el limite entre secciones
   deja de existir como borde. La barra de arriba y el pie conservan el suyo. */
section.alt {
  background: linear-gradient(180deg,
    #fff 0,
    var(--fondo-alt) 110px,
    var(--fondo-alt) calc(100% - 110px),
    #fff 100%);
  --tarjeta: #fff;
}

/* El rotulo en versalitas sobre el titular se elimino: el titular se sostiene
   solo. Donde la palabra era del cliente (Impulsate) pasa dentro del titular. */

.encabezado-seccion { max-width: 660px; margin-bottom: 56px; }
.encabezado-seccion.centro { margin-left: auto; margin-right: auto; text-align: center; }
.encabezado-seccion p { font-size: 1.09rem; color: var(--gris); margin-bottom: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primario   { background: var(--azul); color: #fff; box-shadow: 0 6px 16px -6px rgba(12,16,32,.34); }
.btn-primario:hover { background: var(--azul-osc); box-shadow: 0 10px 24px -8px rgba(12,16,32,.42); }

.btn-menta      { background: var(--menta); color: #06392C; box-shadow: 0 6px 16px -6px rgba(12,16,32,.30); }
.btn-menta:hover{ background: var(--menta-osc); color: #fff; }

.btn-fantasma   { background: transparent; color: var(--tinta); border: 1.5px solid var(--linea); }
.btn-fantasma:hover { border-color: var(--azul); color: var(--azul); }

.btn-claro      { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.32); backdrop-filter: blur(6px); }
.btn-claro:hover{ background: rgba(255,255,255,.24); }

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.nav.pegada { border-bottom-color: var(--linea); box-shadow: 0 4px 24px rgba(15,23,42,.05); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 84px; position: relative; }
.nav-logo img { height: 50px; width: auto; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a {
  color: var(--gris); font-weight: 700; font-size: .97rem;
  position: relative; padding: 4px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--menta); transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans);
}
.nav-links a:hover { color: var(--tinta); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.actual { color: var(--tinta); }
.nav-links a.actual::after { transform: scaleX(1); background: var(--azul); }
.nav .btn { padding: 12px 24px; font-size: .95rem; }

.nav-burger {
  display: none; margin-left: auto; background: none; border: 0;
  cursor: pointer; padding: 8px; color: var(--tinta);
}
.nav-burger svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(80,215,176,.20), transparent 62%),
    radial-gradient(900px 560px at 4% 8%, rgba(61,81,196,.13), transparent 60%),
    linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 100%);
  padding: 88px 0 96px;
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: 64px; align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .destacado {
  background: linear-gradient(180deg, transparent 62%, rgba(80,215,176,.45) 62%);
  padding: 0 4px;
}
.hero-bajada { font-size: 1.16rem; max-width: 520px; margin-bottom: 32px; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-sellos { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.sello { display: flex; align-items: center; gap: 10px; font-size: .93rem; font-weight: 700; color: var(--gris); }
.sello svg { width: 20px; height: 20px; color: var(--menta-osc); flex: 0 0 auto; }

.hero-visual { position: relative; }
.hero-visual > img { width: 100%; height: auto; }


/* ---------- Encabezado de página interna ---------- */
.cabecera-pagina {
  background:
    radial-gradient(900px 420px at 88% -30%, rgba(80,215,176,.18), transparent 62%),
    radial-gradient(700px 380px at 4% 0%, rgba(61,81,196,.12), transparent 60%),
    linear-gradient(180deg, #FBFCFE 0%, #FFFFFF 100%);
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--linea);
}
.cabecera-pagina .encabezado-seccion { margin-bottom: 0; }

/* ---------- Bloque con ilustración al costado ---------- */
.bloque-ilustrado { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.bloque-ilustrado img { width: 100%; height: auto; }
.bloque-ilustrado.invertido > *:first-child { order: 2; }

/* ---------- Sello INAES en el pie ---------- */
/* Relleno igual arriba y abajo: si no, el logo queda pegado a la línea de
   abajo y se lee como desplazado. */
.sello-inaes {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
/* El PNG del INAES viene con fondo blanco: se le quitó para que el filtro
   que lo pasa a blanco sobre el pie oscuro no lo convierta en un bloque. */
/* 36px es el alto real del archivo. Mostrarlo más grande lo agranda y lo
   pixela: el original que mandaron no da para más. */
.sello-inaes img {
  height: 36px; width: auto;
  filter: brightness(0) invert(1); opacity: .9;
}
.sello-inaes span { font-size: .88rem; color: rgba(255,255,255,.62); font-weight: 700; }

/* ---------- Servicios ---------- */
.servicios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.servicio {
  position: relative;
  background: var(--tarjeta); 
  border-radius: var(--radio);
  padding: 32px 28px; 
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
  display: flex; flex-direction: column;
  box-shadow: var(--sombra-sm);
}
.servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.servicio .ico {
  width: 34px; height: 34px; color: var(--azul);
  display: grid; place-items: center; margin-bottom: 18px;
}
.servicio.acento .ico { color: var(--menta-osc); }
.servicio .ico svg { width: 34px; height: 34px; }
.servicio h3 { margin-bottom: 10px; }
.servicio p { font-size: .98rem; margin-bottom: 18px; }
.servicio .link {
  margin-top: auto; font-weight: 700; font-size: .93rem;
  display: inline-flex; align-items: center; gap: 7px;
}
.servicio .link svg { width: 15px; height: 15px; transition: transform var(--trans); }
.servicio:hover .link svg { transform: translateX(4px); }
/* Va posicionada sobre la tarjeta y no dentro del flujo: si empujara el
   contenido, los títulos de las tarjetas vecinas quedarían desalineados. */
.servicio .cinta {
  position: absolute; top: 22px; right: 22px;
  background: var(--fondo-menta); color: var(--menta-osc);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}

/* ---------- Simulador ---------- */
.simulador { background: var(--azul-prof); color: #fff; position: relative; overflow: hidden; }
.simulador::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 460px at 92% 4%, rgba(80,215,176,.20), transparent 60%),
    radial-gradient(660px 420px at 2% 96%, rgba(61,81,196,.42), transparent 62%);
  pointer-events: none;
}
.simulador .contenedor { position: relative; z-index: 1; }
.simulador h2 { color: #fff; }
.simulador .encabezado-seccion p { color: rgba(255,255,255,.74); }
.simulador .eyebrow { color: var(--menta); }

.sim-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start; }
/* Sin esto la tabla comparativa (min-width) estira la columna y desborda en mobile */
.sim-grid > * { min-width: 0; }

/* Este panel se apoya sobre la franja azul oscura, no sobre un fondo claro.
   Con vidrio translucido lo que se transparenta es el azul profundo: el panel
   queda gris y las etiquetas, que son gris claro, dejan de leerse. Va solido. */
.sim-panel {
  background: #fff;
  color: var(--gris);
  border-radius: var(--radio);
  padding: 32px;
  box-shadow: var(--sombra-lg);
}
.sim-campo { margin-bottom: 26px; }
.sim-campo > label {
  display: block; font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-claro); margin-bottom: 10px;
}
.sim-monto { position: relative; }
.sim-monto .signo {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 700; color: var(--gris-claro); pointer-events: none;
}
.sim-monto input {
  width: 100%; padding: 16px 20px 16px 46px;
  font-family: inherit; font-size: 1.55rem; font-weight: 700; color: var(--tinta);
  border: 1.5px solid var(--linea); border-radius: var(--radio-sm);
  background: var(--fondo-alt); outline: none;
  transition: border-color var(--trans), background var(--trans);
}
.sim-monto input:focus { border-color: var(--azul); background: #fff; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 18px 0 6px;
  border-radius: 999px; background: var(--linea); outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--azul); border: 4px solid #fff;
  box-shadow: 0 2px 8px -2px rgba(12,16,32,.45); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--azul); border: 4px solid #fff;
  box-shadow: 0 2px 8px -2px rgba(12,16,32,.45); cursor: pointer;
}
.rango-limites { display: flex; justify-content: space-between; font-size: .82rem; color: var(--gris-claro); font-weight: 700; }

/* Se acomoda a la cantidad de plazos que traiga la planilla: reparte en
   columnas iguales y baja de fila cuando no entran, sin achicarse tanto
   que deje de leerse. */
.plazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 10px; }
.plazo {
  padding: 15px 8px; border: 1.5px solid var(--linea); border-radius: var(--radio-sm);
  background: #fff; cursor: pointer; text-align: center;
  font-family: inherit; transition: all var(--trans);
}
.plazo .n { display: block; font-size: 1.3rem; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.plazo .u { display: block; font-size: .8rem; font-weight: 700; color: var(--gris-claro); }
.plazo:hover { border-color: var(--azul); }
.plazo.activo { border-color: var(--azul); background: var(--azul); }
.plazo.activo .n, .plazo.activo .u { color: #fff; }

.sim-nota { font-size: .84rem; color: var(--gris-claro); margin: 0; line-height: 1.5; }

.sim-resultado {
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px; padding: 32px; backdrop-filter: blur(10px);
}
.res-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.res-rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.res-tna {
  background: var(--menta); color: #06392C;
  font-size: .84rem; font-weight: 700; padding: 5px 13px; border-radius: 999px;
}
.res-ganancia {
  font-size: clamp(2.6rem, 5.6vw, 3.6rem); font-weight: 700;
  color: var(--menta); line-height: 1.05; letter-spacing: -.03em;
  margin-bottom: 4px;
}
.res-detalle { color: rgba(255,255,255,.7); font-size: .96rem; margin-bottom: 22px; }
.res-detalle strong { color: #fff; }



/* La aclaracion va antes de los botones y en un tono bajo: tiene que estar
   y poder leerse, pero no competirle al numero. */
.res-leyenda {
  font-size: .82rem; line-height: 1.5;
  color: rgba(255,255,255,.62);
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 16px; margin: 0 0 22px;
}

.res-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Compará Tasas: tabla sobre fondo claro ---------- */
.tabla-envoltura {
  overflow-x: auto; max-width: 100%;
  border: 0; border-radius: var(--radio);
  background: var(--tarjeta);
}
table.tasas { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 520px; }
table.tasas th {
  text-align: left; padding: 16px 22px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-claro); border-bottom: 1.5px solid var(--linea);
}
table.tasas td { padding: 18px 22px; border-bottom: 1px solid var(--linea); color: var(--gris); }
table.tasas tbody tr:last-child td { border-bottom: 0; }
table.tasas th:not(:first-child), table.tasas td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
table.tasas tr.resaltada { background: var(--fondo-menta); }
table.tasas tr.resaltada td { color: var(--tinta); font-weight: 700; font-size: 1.08rem; }
table.tasas tr.resaltada td:first-child { box-shadow: inset 4px 0 0 var(--menta-osc); }
.marca-fila {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--menta-osc); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: middle;
}

.fuente-datos {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--gris-claro); margin-top: 18px; font-weight: 700;
}
.punto-vivo {
  /* Sin pulso: las tasas se refrescan al recargar, no en vivo. Un punto que
     late sugiere un dato que se mueve solo y eso no es lo que pasa. */
  width: 7px; height: 7px; border-radius: 50%; background: var(--menta-osc);
}


/* ---------- Carrusel de servicios ---------- */
.carrusel-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}
.carrusel-cabecera .encabezado-seccion { margin-bottom: 0; }

.carrusel-flechas { display: flex; gap: 10px; flex: 0 0 auto; }
.carrusel-flecha {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--linea); background: #fff;
  display: grid; place-items: center; cursor: pointer;
  color: var(--tinta); transition: all var(--trans);
}
.carrusel-flecha svg { width: 20px; height: 20px; }
.carrusel-flecha:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.carrusel-flecha:disabled { opacity: .35; cursor: default; }

.carrusel-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* overflow-x:auto hace que el eje Y tambien recorte. El respiro tiene que
     cubrir la sombra en reposo, que ahora difumina 26px. */
  overflow-y: visible;
  padding: 10px 6px 34px;
  margin: -10px -6px -34px;
  scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > * { scroll-snap-align: start; }

/* Sin JS las tarjetas siguen siendo accesibles arrastrando de costado. */
.carrusel-pista .servicio p { margin-bottom: 0; }
/* El enlace se ancla al pie con margin-top:auto, pero en la tarjeta mas alta
   de la fila ese auto vale cero y el texto le quedaba pegado. El respiro va
   como padding del propio enlace: no colapsa y aplica en todas las tarjetas. */
.carrusel-pista .servicio .link { padding-top: 24px; }

/* Subsidios: cada uno con su propio bloque, no todo en un párrafo corrido. */
.sub-lista { list-style: none; margin: 16px 0 0; padding: 0; }
.sub-lista li {
  position: relative; padding-left: 16px; margin-bottom: 14px;
  font-size: .93rem; line-height: 1.55;
}
.sub-lista li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--menta);
}
.sub-lista b { display: block; color: var(--tinta); font-weight: 700; margin-bottom: 2px; }

/* ---------- Misión y visión ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.mv {
  background: var(--tarjeta); border: 0; border-radius: var(--radio);
  padding: 34px 32px;
}
.mv .ico {
  width: 32px; height: 32px; margin-bottom: 16px;
  display: grid; place-items: center; color: var(--azul);
}
.mv.menta .ico { color: var(--menta-osc); }
.mv .ico svg { width: 32px; height: 32px; }
.mv p { margin-bottom: 0; font-size: 1rem; }

/* ---------- Valores ---------- */
.valores-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.valor {
  background: var(--tarjeta); border: 0; border-radius: var(--radio);
  padding: 26px 22px; transition: transform var(--trans), box-shadow var(--trans);
}
.valor:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.valor .ico {
  width: 30px; height: 30px; margin-bottom: 14px;
  display: grid; place-items: center; color: var(--azul);
}
.valor .ico svg { width: 30px; height: 30px; }
.valor h3 { font-size: 1.08rem; margin-bottom: 8px; }
.valor p { font-size: .93rem; margin-bottom: 0; }

/* ---------- Asociate: requisitos ---------- */
.asociate-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.requisitos { list-style: none; margin: 0; padding: 0; }
.requisitos li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
}
.requisitos li:last-child { border-bottom: 0; }
.requisitos .n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--azul); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.requisitos .t { font-size: 1rem; color: var(--gris); padding-top: 4px; }

.sello-online {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--fondo-menta); color: var(--menta-osc);
  border-radius: 999px; padding: 10px 20px;
  font-weight: 700; font-size: .95rem; margin-bottom: 22px;
}
.sello-online svg { width: 18px; height: 18px; }

/* ---------- Accesos rápidos ---------- */
.accesos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* La primera tarjeta ocupa dos columnas: es la accion principal, y de paso
   evita que la quinta quede huerfana con un hueco al lado. */
.accesos-grid .acceso:first-child { grid-column: span 2; padding: 32px 30px; }
.accesos-grid .acceso:first-child .ico { width: 52px; height: 52px; }
.accesos-grid .acceso:first-child .ico svg { width: 26px; height: 26px; }
.accesos-grid .acceso:first-child h3 { font-size: 1.18rem; }
.accesos-grid .acceso:first-child p { font-size: .97rem; }

.acceso {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--tarjeta); 
  border-radius: var(--radio);
  padding: 26px 24px;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
  box-shadow: var(--sombra-sm);
}
.acceso:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.acceso .ico {
  flex: 0 0 auto; width: 28px; height: 28px; color: var(--azul);
  display: grid; place-items: center;
  transition: color var(--trans), transform var(--trans);
}
.acceso:hover .ico { color: var(--azul-osc); transform: translateX(2px); }
.acceso .ico svg { width: 28px; height: 28px; }
.acceso h3 { font-size: 1.02rem; margin-bottom: 5px; }
.acceso p { font-size: .92rem; margin-bottom: 0; color: var(--gris); }

/* ---------- Contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contacto-card {
  background: var(--tarjeta); 
  border-radius: var(--radio);
  padding: 30px 26px;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 16px; align-items: start; text-align: left;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
  box-shadow: var(--sombra-sm);
}
.contacto-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.contacto-card .ico {
  grid-row: span 2; width: 30px; height: 30px;
  display: grid; place-items: center; color: var(--azul);
}
.contacto-card.wa .ico { color: #128C7E; }
.contacto-card .ico svg { width: 30px; height: 30px; }
.contacto-card h3 { font-size: 1.06rem; margin-bottom: 6px; }
.contacto-card p { font-size: .98rem; margin-bottom: 0; }
.contacto-card a { font-weight: 700; }

/* ---------- CTA final ---------- */
/* El padding superior era cero, asi que el borde de arriba de la caja caia
   justo sobre el cambio de color entre secciones: todo el aire de arriba era
   del gris de la seccion anterior y la caja quedaba apoyada en la costura.
   Con estos 72px la caja flota sobre blanco y se despega del limite. */
.cta-final { padding: 72px 0 96px; }
.cta-caja {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-osc) 55%, var(--azul-prof) 100%);
  border-radius: 28px; padding: 68px 56px; text-align: center;
  position: relative; overflow: hidden;
}
.cta-caja::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 340px at 82% 0%, rgba(80,215,176,.28), transparent 62%);
}
.cta-caja > * { position: relative; z-index: 1; }
.cta-caja h2 { color: #fff; margin-bottom: 14px; }
.cta-caja p { color: rgba(255,255,255,.8); max-width: 560px; margin: 0 auto 30px; font-size: 1.08rem; }
.cta-acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.footer { background: #0B1030; color: rgba(255,255,255,.62); padding: 70px 0 30px; font-size: .96rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 48px; }
.footer h3 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.footer img.logo { height: 54px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .95; }
.footer p { font-size: .95rem; line-height: 1.7; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; }
.footer a { color: rgba(255,255,255,.62); }
.footer a:hover { color: var(--menta); }
.footer-contacto li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contacto svg { width: 17px; height: 17px; color: var(--menta); flex: 0 0 auto; margin-top: 4px; }
.footer-abajo {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .87rem; color: rgba(255,255,255,.42);
}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px -6px rgba(12,16,32,.38);
  transition: transform var(--trans);
}
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 30px; height: 30px; }

/* ---------- Animación de entrada ----------
   Se oculta solo si el JS arrancó (clase en <html>): si algo falla, el
   contenido queda visible en vez de desaparecer. */
/* La seccion ya no se funde como un bloque: se funden sus piezas, cada una con
   su retardo. El JS marca las piezas y calcula los retardos, asi que sin JS no
   hay .escalonable y todo se ve normal. */
.js .reveal .escalonable {
  opacity: 0; transform: translateY(9px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.js .reveal.visible .escalonable { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal .escalonable { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  section { padding: 72px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-bajada { max-width: none; }
    .sim-grid { grid-template-columns: 1fr; }
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-grid, .asociate-grid { grid-template-columns: 1fr; gap: 32px; }
  .bloque-ilustrado { grid-template-columns: 1fr; gap: 36px; }
  .bloque-ilustrado.invertido > *:first-child { order: 0; }
  .carrusel-pista { grid-auto-columns: calc((100% - 24px) / 2); }
  .valores-grid { grid-template-columns: repeat(3, 1fr); }
  .accesos-grid, .contacto-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
  /* El boton de simular es la accion principal del sitio: se queda a la vista
     tambien en celular, compacto, entre el logo y el menu. Para que entre en
     375px se achica el logo y el espacio entre piezas. */
  .nav-inner { gap: 12px; }
  .nav-logo img { height: 40px; }
  .nav > .contenedor > .nav-inner > .btn {
    display: inline-flex; order: 2; margin-left: auto;
    padding: 9px 13px; font-size: .82rem; gap: 6px; white-space: nowrap;
  }
  .nav > .contenedor > .nav-inner > .btn svg { width: 15px; height: 15px; }
  .nav-burger { order: 3; margin-left: 0; padding: 6px; }
  .nav-links.abierto {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 84px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--linea);
    padding: 16px 24px 24px; box-shadow: var(--sombra);
    margin-left: 0;
  }
  .nav-links.abierto a { padding: 12px 0; font-size: 1.05rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }
  .servicios-grid { grid-template-columns: 1fr; }
  .valores-grid, .accesos-grid, .contacto-grid { grid-template-columns: 1fr; }
  .accesos-grid .acceso:first-child { grid-column: auto; }
  .carrusel-pista { grid-auto-columns: 86%; }
  .carrusel-cabecera { flex-direction: column; align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-caja { padding: 48px 26px; }
  .sim-panel, .sim-resultado { padding: 24px; }
      .hero-acciones .btn, .cta-acciones .btn, .res-acciones .btn { width: 100%; }
  .hero-acciones, .cta-acciones, .res-acciones { flex-direction: column; }
}

/* Pie del dato de actualización: acompaña la alineación de la sección. */
.pie-dato { margin-top: 18px; }

/* ---------- Profundidad ---------- */
/* El hero, el simulador y el cierre ya traían halos propios. Las tres
   secciones claras del medio quedaban planas y hundían la mitad de abajo
   de la página: estos dos halos muy suaves las levantan sin competirle
   al contenido. */
/* Los halos quedan dentro de la seccion: ya se apagan solos antes del borde,
   asi que no hay corte que suavizar. Extenderlos hacia afuera los derrama
   sobre la seccion vecina y ahi si aparece una linea dura. */
section.aura { position: relative; }
section.aura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 500px at 86% -10%, rgba(80,215,176,.34), transparent 64%),
    radial-gradient(720px 520px at 2% 106%, rgba(61,81,196,.20), transparent 66%),
    radial-gradient(560px 400px at 46% 44%, rgba(99,132,255,.10), transparent 70%);

  /* Los halos arrancaban a plena intensidad justo en el borde y el recorte se
     leia como una linea. Este fundido los apaga contra el limite igual que el
     fondo, asi la costura desaparece del todo. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
section.aura > .contenedor { position: relative; z-index: 1; }

/* Elevación en reposo mas el desenfoque: el halo de la sección se ve a
   través de la tarjeta, y el borde claro le hace de canto iluminado. */
.acceso, .contacto-card, .servicio, .valor, .mv, .tabla-envoltura {
  /* Sin borde: el canto blanco del vidrio se leia como una linea marcada
     sobre fondo claro. La tarjeta se define por el relleno translucido y la
     sombra, que alcanzan y no dibujan contorno. */
  box-shadow: var(--sombra-sm);
}

/* El vidrio quedo solo donde hay algo real detras que valga la pena insinuar:
   la barra al hacer scroll y el panel de resultado sobre la franja oscura. En
   las tarjetas era decoracion, y se definen igual de bien por superficie y
   sombra. */

/* Trama de puntos detrás del contenido. Ademas de dar textura, es lo que hace
   legible el vidrio: el backdrop-filter difumina lo que tiene detras, y el
   desenfoque de un degradado liso no se distingue del degradado liso. Con la
   trama se ve borrosa a traves de la tarjeta y nitida alrededor.
   La mascara la concentra donde cae el halo, para que no quede empapelado. */
section.aura::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(27,35,89,.20) 1px, transparent 1.6px);
  background-size: 24px 24px;
  /* La mascara tiene que llegar hasta donde estan las tarjetas: si se apaga
     antes, la trama queda en el aire vacio y el vidrio no tiene que desenfocar. */
  -webkit-mask-image: radial-gradient(112% 96% at 84% 6%, #000 24%, transparent 82%), linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
  mask-image: radial-gradient(112% 96% at 84% 6%, #000 24%, transparent 82%), linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Los halos alternan de lado: si caen siempre en la misma esquina, las tres
   secciones del medio se leen como la misma sección repetida. */
section.aura:nth-of-type(even)::before,
section.aura:nth-of-type(even)::after { transform: scaleX(-1); }

/* La misma trama en el hero. Es lo primero que se ve y era la zona mas plana
   de la pagina: tiene degradados propios pero ninguna textura. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(27,35,89,.18) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(96% 88% at 88% 0%, #000 18%, transparent 78%);
  mask-image: radial-gradient(96% 88% at 88% 0%, #000 18%, transparent 78%);
}
.hero .contenedor { position: relative; z-index: 1; }

/* Grano sobre todo el sitio. Cumple dos funciones: le saca el aspecto digital
   plano a los degradados, y mata el bandeado — esas franjas que aparecen en
   los halos grandes sobre pantallas de 8 bits, sobre todo en la franja oscura
   del simulador, que es donde mas se nota. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Entrada de la primera pantalla ---------- */
/* Escalonada con animation-delay y en CSS puro: no depende de que el JS corra.
   El fill-mode "both" deja cada pieza en su estado final, asi que si la
   animacion nunca arranca el contenido igual termina visible. */
@keyframes entrada-hero {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* La animacion cuelga de .entra, que pone y saca el JS cada vez que el hero
   entra y sale de la pantalla. Asi se repite al volver a subir, y ademas si el
   JS no corre la clase nunca aparece y el contenido queda visible: el modo de
   fallar es hacia el lado seguro. */
/* El hero es el unico momento de autor de la pagina: el titular se descubre
   detras de una mascara que sube, y la ilustracion entra desenfocada y se
   enfoca. Todo lo demas de la pagina se mueve menos, para no competirle. */
@keyframes revelar-titular {
  from { clip-path: inset(0 0 100% 0); transform: translateY(16px); }
  to   { clip-path: inset(0 0 -14% 0); transform: none; }
}
@keyframes revelar-visual {
  from { opacity: 0; transform: scale(.96); filter: blur(12px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.hero.entra h1 {
  animation: revelar-titular .95s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .06s;
}
.hero.entra .hero-visual {
  animation: revelar-visual 1.1s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .12s;
}
.hero.entra .hero-bajada,
.hero.entra .hero-acciones,
.hero.entra .hero-sellos {
  animation: entrada-hero .7s cubic-bezier(.16, 1, .3, 1) both;
}
.hero.entra .hero-bajada   { animation-delay: .34s; }
.hero.entra .hero-acciones { animation-delay: .46s; }
.hero.entra .hero-sellos   { animation-delay: .58s; }

/* Windows trae prefers-reduced-motion activado en muchas configuraciones. Por
   eso la animacion se apaga en lugar de gatearse: apagada, cada elemento queda
   en su estado natural y visible. Gatearla dejaria el hero en blanco. */
@media (prefers-reduced-motion: reduce) {
  .hero.entra h1, .hero.entra .hero-bajada, .hero.entra .hero-acciones,
  .hero.entra .hero-sellos, .hero.entra .hero-visual {
    animation: none; clip-path: none; filter: none;
  }
}


/* ---------- Superficies del navegador ---------- */
/* Selección, foco, barra y numerales salen con los valores por defecto del
   navegador, que no pertenecen a ningún sistema de diseño. Se visten con la
   paleta como cualquier otra parte de la página. */
::selection { background: var(--menta); color: #06392C; }

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

a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

* { scrollbar-width: thin; scrollbar-color: #C3CBDE transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #C3CBDE; border-radius: 999px;
  border: 3px solid var(--fondo);
}
::-webkit-scrollbar-thumb:hover { background: #9AA6C2; }

/* Los importes y las tasas se comparan en columna: sin cifras de ancho fijo
   los numeros bailan de fila en fila. */
table.tasas td, .res-ganancia, .rango-limites, #monto {
  font-variant-numeric: tabular-nums;
}


/* ---------- Tarjetas principales de Servicios ---------- */
/* La accion principal de la tarjeta era un enlace con flecha, demasiado timido
   para ser lo unico que hay que hacer ahi. */
.btn-bloque {
  margin-top: auto; width: 100%; justify-content: center;
  background: var(--azul-prof); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(12,16,32,.4);
}
.btn-bloque:hover { background: #141B47; }

/* Franja de respaldo: tres senales en una linea, sin ocupar una seccion. */
.barra-confianza {
  margin-top: 22px; background: var(--tarjeta); border-radius: 999px;
  padding: 16px 30px; box-shadow: var(--sombra-sm);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 42px;
}
.barra-confianza span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .93rem; font-weight: 500; color: var(--gris);
}
.barra-confianza svg { width: 18px; height: 18px; color: var(--menta-osc); flex: 0 0 auto; }

@media (max-width: 680px) {
  .barra-confianza { border-radius: var(--radio); flex-direction: column; align-items: flex-start; gap: 12px; }
}





/* El contenedor va por encima del halo y de la trama de la seccion. */
section.aura > .contenedor { position: relative; z-index: 1; }



/* ---------- Lema debajo del logo ---------- */
/* align-items es imprescindible: en una columna flex el valor por defecto
   estira los hijos al ancho del contenedor, y con el lema debajo eso deformaba
   el logo de 71px a 229px de ancho. "center" alinea sin estirar, asi que el
   logo queda centrado sobre el lema y conserva su proporcion. */
.nav-logo { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.nav-lema {
  font-size: .64rem; letter-spacing: .04em; line-height: 1.2;
  color: var(--gris-claro); font-weight: 500; white-space: nowrap;
}

/* ---------- Servicios: todos a la vista ---------- */
/* Seis columnas para que las filas cierren sin huecos: las dos destacadas
   ocupan media fila cada una, despues van tres de a tercio y dos de a mitad. */
.servicios-todo {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px;
  align-items: stretch;
}
.servicios-todo > .servicio { grid-column: span 2; }

/* Ayudas Economicas y el AMT: mas grandes, mas elevadas y con boton solido
   en lugar del enlace de texto. La jerarquia la hace el tamano, no un adorno. */
.servicios-todo > .servicio:nth-child(1),
.servicios-todo > .servicio:nth-child(2) {
  grid-column: span 3;
  padding: 38px 34px;
  box-shadow: var(--sombra);
}
.servicios-todo > .servicio:nth-child(1) h3,
.servicios-todo > .servicio:nth-child(2) h3 { font-size: 1.62rem; }
.servicios-todo > .servicio:nth-child(1) p,
.servicios-todo > .servicio:nth-child(2) p { font-size: 1.04rem; }
.servicios-todo > .servicio:nth-child(1) .ico,
.servicios-todo > .servicio:nth-child(2) .ico { width: 40px; height: 40px; }
.servicios-todo > .servicio:nth-child(1) .ico svg,
.servicios-todo > .servicio:nth-child(2) .ico svg { width: 40px; height: 40px; }

/* Las dos ultimas cierran la grilla de a mitades. */
.servicios-todo > .servicio:nth-child(6),
.servicios-todo > .servicio:nth-child(7) { grid-column: span 3; }

.servicios-todo .servicio p { margin-bottom: 18px; }
.servicios-todo .servicio .link { margin-top: auto; padding-top: 8px; }

@media (max-width: 960px) {
  .nav-lema { display: none; }
  .servicios-todo { grid-template-columns: repeat(4, 1fr); }
  .servicios-todo > .servicio,
  .servicios-todo > .servicio:nth-child(6),
  .servicios-todo > .servicio:nth-child(7) { grid-column: span 2; }
  .servicios-todo > .servicio:nth-child(1),
  .servicios-todo > .servicio:nth-child(2) { grid-column: span 4; }
  /* Con cinco tarjetas de a dos, la ultima quedaba sola con un hueco al lado. */
  .servicios-todo > .servicio:nth-child(7) { grid-column: span 4; }
}

@media (max-width: 640px) {
  .servicios-todo { grid-template-columns: 1fr; }
  .servicios-todo > .servicio,
  .servicios-todo > .servicio:nth-child(1),
  .servicios-todo > .servicio:nth-child(2),
  .servicios-todo > .servicio:nth-child(6),
  .servicios-todo > .servicio:nth-child(7) { grid-column: 1 / -1; }
  .servicios-todo > .servicio:nth-child(1),
  .servicios-todo > .servicio:nth-child(2) { padding: 30px 26px; }
}