:root {
  --azul: #1E46C8;
  --tinta: #0F1E3D;
  --tinta2: #1A2C52;
  --sol: #FFD23F;
  --texto2: #3A4868;
  --texto3: #4A5878;
  --fondo: #F2F5FC;
  --cielo: #E9EFFD;
  --borde: #D9DFEB;
  --borde2: #EDF0F6;
  --campo: #8A97B5;
  --verde: #0B7A55;
  --verde2: #0B6A4A;
  --verde-f: #E7F5EF;
  --ambar: #6B4700;
  --ambar-f: #FFF1C2;
  --rojo: #A12A20;
  --rojo-f: #FBE4E1;
  --gris-f: #EEF0F5;
  --display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --cuerpo: 'Figtree', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --margen: clamp(16px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--tinta); font: 400 17px/1.55 var(--cuerpo); }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: var(--azul); }
button { cursor: pointer; font-family: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sol); outline-offset: 2px;
}
[hidden] { display: none !important; }
input[type=range] { accent-color: var(--azul); width: 100%; height: 32px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 800 28px var(--display); color: #fff; text-decoration: none; letter-spacing: -.02em; }
.logo img { flex: 0 0 auto; }
.logo b { font: inherit; color: #fff; }
.logo span { color: var(--sol); margin-left: -9px; }

/* Bandas del sitio público */
.banda { padding: clamp(56px, 7vw, 104px) var(--margen); }
.contenedor { max-width: 1240px; margin: 0 auto; }
.fila { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.fila > * { flex: 1 1 420px; min-width: 0; }
.azul { background: var(--azul); color: #fff; }
.oscuro { background: var(--tinta); color: #fff; }
.suave { background: var(--fondo); }
.titulo { font: 800 clamp(36px, 4.6vw, 62px)/1.04 var(--display); letter-spacing: -.03em; }
.grande { font-size: 20px; line-height: 1.5; max-width: 32em; }

.cabecera { background: var(--azul); padding: 18px var(--margen); }
.cabecera .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.cabecera nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.cabecera nav a { color: #fff; text-decoration: none; font-weight: 500; padding-block: 10px; }
.cabecera nav a.boton-sol { color: var(--tinta); padding: 10px 18px; font-weight: 700; }

.heroe { padding-top: clamp(32px, 5vw, 72px); }
.heroe h1 { font: 800 clamp(50px, 7.4vw, 104px)/.98 var(--display); letter-spacing: -.035em; }
.marca { background: var(--sol); color: var(--tinta); padding: 0 .12em; border-radius: 4px; white-space: nowrap; }
.heroe .sub { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; max-width: 34em; margin-top: 28px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.boton-sol, .boton-azul, .boton-linea, .boton-borde {
  display: inline-block; border-radius: 6px; font-weight: 700; text-decoration: none; text-align: center;
  padding: 14px 24px; border: 2px solid transparent; font-size: 17px; line-height: 1.25;
}
.boton-sol { background: var(--sol); color: var(--tinta); }
.boton-azul { background: var(--azul); color: #fff; }
.boton-linea { background: transparent; color: #fff; border-color: #fff; }
.boton-borde { background: #fff; color: var(--azul); border-color: var(--azul); }
.boton-chico { padding: 8px 12px; font-size: 14px; min-height: 40px; }
button:disabled { opacity: .55; cursor: not-allowed; }

.tarjeta { background: #fff; color: var(--tinta); border-radius: 12px; padding: 28px; }
.seguimiento { max-width: 500px; }
.seguimiento h2 { font: 800 26px var(--display); }
.seguimiento .monto { font: 600 40px var(--mono); margin: 8px 0 20px; }
.paso { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.paso i { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 15px var(--cuerpo); background: #E4E9F3; color: var(--texto3); }
.paso.done i { background: var(--verde); color: #fff; }
.paso.now i { background: var(--sol); color: var(--tinta); }
.paso b { display: block; line-height: 1.25; }
.paso.next b { color: var(--texto3); }
.paso small { font-size: 15px; color: var(--texto3); }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 36px; margin-top: 48px; }
.pasos .n { font: 600 18px var(--mono); color: var(--azul); }
.pasos h3 { font-size: 23px; line-height: 1.2; margin: 8px 0; }
.pasos p { color: var(--texto2); }

.aitrol h2 { font: 800 clamp(44px, 6vw, 84px)/1 var(--display); letter-spacing: -.03em; margin-top: 6px; }
.aitrol h3 { font-size: 22px; line-height: 1.2; }
.lista-v { display: flex; flex-direction: column; gap: 18px; }
.check { display: flex; gap: 12px; }
.check::before { content: "✓"; color: var(--verde); font-weight: 800; }

.mensaje { background: var(--cielo); border-radius: 10px; padding: 18px; }
.mensaje dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; margin: 12px 0; }
.mensaje dd { margin: 0; font: 600 16px var(--mono); text-align: right; }

.digitos { display: flex; flex-wrap: wrap; gap: 10px; }
.digitos button { width: 56px; height: 56px; border-radius: 6px; font: 600 22px var(--mono); border: 2px solid var(--azul); background: #fff; color: var(--azul); }
.digitos button[aria-pressed=true] { background: var(--azul); color: #fff; }
.fecha { background: var(--sol); border-radius: 12px; padding: 32px; }
.fecha .dia { font: 800 clamp(96px, 12vw, 160px)/1 var(--display); letter-spacing: -.04em; }

.calc { display: flex; flex-wrap: wrap; gap: 32px; background: var(--tinta2); border-radius: 12px; padding: clamp(20px, 3vw, 36px); margin-top: 36px; }
.calc .controles { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.calc .resultado { flex: 1 1 260px; min-width: 0; background: var(--sol); color: var(--tinta); border-radius: 10px; padding: 24px; }
.calc .precio { font: 800 76px/1.05 var(--display); letter-spacing: -.03em; }
.calc label { font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.tipos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tipos button { min-height: 48px; padding: 8px 16px; border-radius: 6px; font: 600 16px var(--cuerpo); border: 2px solid var(--sol); background: transparent; color: #fff; }
.tipos button[aria-pressed=true] { background: var(--sol); color: var(--tinta); }

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 24px; }
.plan { background: #fff; color: var(--tinta); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; border: 4px solid #fff; }
.plan.activo { border-color: var(--sol); }
.plan h3 { font: 800 28px var(--display); }
.plan .cab { display: flex; justify-content: space-between; align-items: center; min-height: 30px; }
.plan .tu { background: var(--sol); font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.plan .quien { min-height: 52px; color: var(--texto2); }
.plan .valor { font: 600 34px var(--mono); }
.plan .items { display: flex; flex-direction: column; gap: 9px; flex-grow: 1; }
.extras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.extras span { border: 1px solid #7E8EB0; padding: 7px 14px; border-radius: 4px; }

.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px; }
.tres h2 { font: 800 clamp(32px, 3.4vw, 46px)/1.08 var(--display); letter-spacing: -.025em; }
.tres p { margin-top: 14px; max-width: 32em; }
.pie { background: var(--tinta); color: #fff; padding: 32px var(--margen); font-size: 16px; }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.pie a { color: #fff; }

/* Contenido ampliado del sitio */
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; margin-top: 40px; }
.servicios article { background: var(--fondo); border-radius: 10px; padding: 22px; }
.servicios h3 { font: 800 24px/1.15 var(--display); color: var(--azul); }
.servicios p { margin-top: 8px; color: var(--texto2); }
.sectores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sectores span { background: var(--cielo); color: var(--azul); font-weight: 700; padding: 10px 16px; border-radius: 6px; }
.lista-obl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 28px; margin-top: 20px; }
.tarjeta.borde { border: 2px solid var(--borde); }
.nomina-total small { display: block; font-weight: 600; color: var(--texto3); }
.nomina-total strong { display: block; font: 800 52px/1.1 var(--display); letter-spacing: -.03em; margin-bottom: 8px; }
.modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2px 18px; margin-top: 8px; }
.modulos .casilla { font-weight: 500; }
.calc .casilla { display: flex; justify-content: flex-start; font-weight: 500; }
.calc .dos { gap: 22px; }
.desglose { margin-top: 12px; border-top: 1px solid rgba(15, 30, 61, .3); padding-top: 10px; font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.desglose div { display: flex; justify-content: space-between; gap: 12px; }
.faq { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.faq details { background: #fff; border-radius: 8px; padding: 16px 20px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin-top: 10px; color: var(--texto2); }
.subnav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }

/* Centro de documentos y módulo laboral */
.zona-subir { display: block; border: 2px dashed var(--azul); border-radius: 10px; padding: 24px; background: var(--cielo); cursor: pointer; text-align: center; font-weight: 700; }
.zona-subir.activa { background: var(--ambar-f); }
.zona-subir input { display: block; margin: 12px auto 0; font: inherit; max-width: 100%; }
.cola-archivos { font-size: 15px; color: var(--texto2); }
.portal-enlaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.portal-enlaces a { display: block; background: var(--fondo); border-radius: 8px; padding: 14px; font-weight: 700; text-decoration: none; }
.portal-enlaces small { display: block; font-weight: 500; color: var(--texto3); }

/* Fotografía */
.heroe {
  background:
    linear-gradient(100deg, rgba(30, 70, 200, .97) 0%, rgba(30, 70, 200, .9) 48%, rgba(15, 30, 61, .5) 100%),
    url("https://images.unsplash.com/photo-1758599543110-f9cf3903a2ad?auto=format&fit=crop&w=2000&q=80") center / cover no-repeat;
}
.foto-banda { position: relative; height: clamp(360px, 44vw, 640px); overflow: hidden; background: var(--tinta); }
.foto-banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 30, 61, .86) 0%, rgba(15, 30, 61, .25) 62%, rgba(15, 30, 61, .05) 100%); }
.foto-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(24px, 4vw, 56px) var(--margen); color: #fff; }
.foto-texto p { max-width: 1240px; margin: 0 auto; font: 800 clamp(34px, 5.2vw, 76px)/1.03 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.con-foto { padding-top: 0; overflow: hidden; }
.foto-top { display: block; width: calc(100% + 56px); max-width: none; margin: 0 -28px 22px; height: 240px; object-fit: cover; }

/* Formularios */
.form { display: flex; flex-direction: column; gap: 14px; }
.campo label { font-weight: 700; display: block; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea, select.compacto, input.compacto {
  width: 100%; min-height: 46px; padding: 8px 12px; border: 2px solid var(--campo); border-radius: 6px;
  font: 500 16px var(--cuerpo); background: #fff; color: var(--tinta);
}
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.casilla { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 600; }
.casilla input { width: 22px; height: 22px; accent-color: var(--azul); }

/* Ingreso */
.ingreso { display: flex; flex-wrap: wrap; min-height: 100vh; }
.ingreso > * { flex: 1 1 420px; min-width: 0; padding: clamp(24px, 5vw, 64px) clamp(16px, 5vw, 64px); }
.ingreso section { background: linear-gradient(160deg, rgba(30, 70, 200, .95) 0%, rgba(30, 70, 200, .84) 55%, rgba(15, 30, 61, .72) 100%), url("https://images.unsplash.com/photo-1758873268783-967d13f0c163?auto=format&fit=crop&w=1400&q=80") center / cover no-repeat; color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.ingreso .frase { font: 800 clamp(46px, 6.4vw, 92px)/.98 var(--display); letter-spacing: -.035em; }
.ingreso main { display: flex; flex-direction: column; justify-content: center; }
.ingreso .caja { width: 100%; max-width: 440px; margin: 0 auto; }
.ingreso h1 { font: 800 40px/1.05 var(--display); letter-spacing: -.025em; }
.enlace { align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; color: var(--azul); font: 600 16px var(--cuerpo); text-decoration: underline; }

/* Aplicación */
.app { background: var(--fondo); font-size: 16px; line-height: 1.45; min-height: 100vh; }
.app-portal { display: flex; flex-wrap: wrap; min-height: 100vh; }
.lateral { flex: 1 1 250px; background: var(--azul); color: #fff; padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; }
.lateral label { font-weight: 700; display: block; margin-bottom: 6px; }
.lateral select { width: 100%; min-height: 46px; padding: 6px 10px; border-radius: 6px; border: 0; font: 600 16px var(--cuerpo); }
.lateral nav { display: flex; flex-wrap: wrap; gap: 6px; }
.lateral nav button { flex: 1 1 180px; min-height: 46px; text-align: left; padding: 8px 14px; border: 0; border-radius: 6px; font: 600 17px var(--cuerpo); background: transparent; color: #fff; }
.lateral nav button[aria-current=page] { background: var(--sol); color: var(--tinta); }
.lateral .pieLat { margin-top: auto; font-size: 15px; }
.lateral .pieLat button, .barra button.salir { background: none; border: 0; color: #fff; text-decoration: underline; font: 500 15px var(--cuerpo); padding: 8px 0; }
.contenido { flex: 999 1 560px; min-width: 0; padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.contenido h1 { font: 800 clamp(32px, 3.6vw, 46px)/1.05 var(--display); letter-spacing: -.025em; }
.sub { color: var(--texto3); }
.barra { background: var(--tinta); color: #fff; padding: 16px clamp(16px, 3vw, 40px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.barra a { color: #fff; }
.barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.centro { padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; max-width: 1360px; margin: 0 auto; }
.centro h1 { font: 800 clamp(34px, 3.8vw, 50px)/1.05 var(--display); letter-spacing: -.025em; }
.bloque { background: #fff; border-radius: 10px; padding: 22px; min-width: 0; }
.bloque h2 { font-size: 21px; margin-bottom: 12px; }
.columnas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.columnas > .ancha { flex: 999 1 620px; min-width: 0; }
.columnas > .angosta { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.dato { background: #fff; border-radius: 10px; padding: 20px; }
.dato small { display: block; font-size: 15px; font-weight: 600; color: var(--texto3); }
.dato strong { display: block; font: 600 34px var(--mono); }
.dato.num strong { font: 800 48px/1.05 var(--display); }
.dato.sol { background: var(--sol); }
.dato.sol small { color: var(--tinta); }
.semaforo { color: #fff; border-radius: 10px; padding: 20px; }
.semaforo small { display: block; font-size: 15px; font-weight: 600; }
.semaforo strong { display: block; font: 800 32px/1.05 var(--display); }
.semaforo.verde { background: var(--verde); }
.semaforo.amarillo { background: var(--sol); color: var(--tinta); }
.semaforo.rojo { background: var(--rojo); }

.tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 14px; color: var(--texto3); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--borde); }
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--borde2); vertical-align: middle; }
td small { display: block; color: var(--texto3); font-size: 14px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pill.verde { background: var(--verde-f); color: var(--verde2); }
.pill.azul { background: var(--cielo); color: var(--azul); }
.pill.amarillo { background: var(--ambar-f); color: var(--ambar); }
.pill.gris { background: var(--gris-f); color: var(--texto3); }
.pill.rojo { background: var(--rojo-f); color: var(--rojo); }
.pill.sol { background: var(--sol); color: var(--tinta); }
.renglon { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-block: 12px; border-bottom: 1px solid var(--borde2); }
.renglon > div { min-width: 0; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros button { min-height: 44px; padding: 4px 12px; border: 2px solid var(--azul); border-radius: 6px; font: 600 15px var(--cuerpo); background: #fff; color: var(--azul); }
.filtros button[aria-pressed=true] { background: var(--azul); color: #fff; }
.barras { display: flex; flex-direction: column; gap: 12px; }
.barra-mes { display: grid; grid-template-columns: 70px minmax(0, 1fr) 96px; gap: 4px 10px; align-items: center; font-size: 14px; }
.barra-mes b { grid-row: span 2; font-size: 15px; }
.barra-mes em { display: block; height: 12px; border-radius: 2px; background: var(--azul); }
.barra-mes em.g { background: #E8A200; }
.barra-mes span { font-family: var(--mono); text-align: right; }
.leyenda { display: flex; gap: 18px; font-size: 14px; margin-bottom: 10px; }
.vacio { color: var(--texto3); padding-block: 8px; }
.nota { background: var(--ambar-f); color: var(--ambar); padding: 12px 14px; border-radius: 6px; font-weight: 600; }
.enlace-listo { background: var(--verde-f); padding: 14px; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.enlace-listo input { width: 100%; min-height: 42px; padding: 6px 8px; border: 1px solid var(--campo); border-radius: 4px; font: 500 13px var(--mono); }
.oculto-vista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

#aviso { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 14px 18px; border-radius: 8px; font-weight: 600; z-index: 50; box-shadow: 0 6px 24px rgba(15, 30, 61, .3); }
#aviso.ok { background: var(--verde-f); color: var(--verde2); }
#aviso.error { background: var(--rojo-f); color: var(--rojo); }

/* =====================================================================
   Estilo refinado del sitio público
   ===================================================================== */
:root {
  --sombra: 0 1px 2px rgba(15, 30, 61, .06), 0 8px 24px rgba(15, 30, 61, .07);
  --sombra-alta: 0 2px 4px rgba(15, 30, 61, .06), 0 18px 40px rgba(15, 30, 61, .14);
  --radio: 16px;
}
body { font-size: 16px; line-height: 1.6; }
.banda { padding-block: clamp(56px, 7vw, 96px); }
.titulo { font-size: clamp(28px, 3.3vw, 44px); line-height: 1.12; letter-spacing: -.025em; }
.grande { font-size: 18px; }
.heroe h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.02; }
.heroe .sub { font-size: 18px; }
.foto-texto p { font-size: clamp(26px, 3.6vw, 48px); }
.aitrol h2 { font-size: clamp(40px, 5vw, 64px); }
.tres h2 { font-size: 24px; }
.fecha .dia { font-size: clamp(72px, 9vw, 120px); }
.calc .precio { font-size: 58px; }
.pasos h3 { font-size: 19px; }
.pasos .n { display: inline-block; font-size: 13px; background: var(--cielo); padding: 3px 10px; border-radius: 999px; }
.oscuro .pasos .n { background: rgba(255, 255, 255, .12); color: var(--sol); }

.boton-sol, .boton-azul, .boton-linea, .boton-borde {
  padding: 11px 20px; font-size: 15px; border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.boton-sol:hover, .boton-azul:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 30, 61, .2); }
.boton-azul:hover { background: #1739A6; }
.boton-linea:hover { background: rgba(255, 255, 255, .1); }
.boton-borde:hover { background: var(--cielo); }
.boton-chico { padding: 7px 12px; font-size: 14px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .boton-sol, .boton-azul, .tarjeta-s { transition: none; } }

.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); background: var(--cielo); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.oscuro .etiqueta, .azul .etiqueta, .heroe-pagina .etiqueta { background: rgba(255, 255, 255, .14); color: var(--sol); }
.intro { color: var(--texto2); font-size: 18px; max-width: 40em; margin-top: 14px; }
.oscuro .intro, .heroe-pagina .intro { color: #DDE5FA; }

/* Encabezado */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; padding-block: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, .12); }
.cabecera .logo { font-size: 24px; }
.cabecera nav { gap: 4px 22px; }
.cabecera nav > a, .menu-serv summary { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding-block: 8px; }
.cabecera nav > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sol); }
.cabecera nav a.boton-sol { color: var(--tinta); padding: 9px 18px; }
.menu-serv { position: relative; }
.menu-serv summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.menu-serv summary::-webkit-details-marker { display: none; }
.menu-serv summary::after { content: "▾"; font-size: 12px; }
.menu-panel { position: absolute; top: calc(100% + 10px); left: -16px; width: 340px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-alta); padding: 8px; display: flex; flex-direction: column; }
.menu-panel a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; }
.cabecera .menu-panel a { color: var(--tinta); padding: 10px 12px; font-weight: 500; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--fondo); }
.menu-panel svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--azul); margin-top: 2px; }
.menu-panel b { display: block; font-size: 15px; }
.menu-panel small { color: var(--texto3); font-size: 13px; }
.menu-btn { display: none; background: none; border: 0; color: #fff; padding: 6px; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .cabecera nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-top: 8px; }
  .cabecera.abierto nav { display: flex; }
  .menu-panel { position: static; width: auto; box-shadow: none; margin-top: 6px; }
  .cabecera nav a.boton-sol { text-align: center; margin-top: 6px; }
}

/* Encabezado de página interna */
.heroe-pagina { color: #fff; padding: clamp(64px, 9vw, 120px) var(--margen) clamp(56px, 7vw, 96px);
  background: linear-gradient(100deg, rgba(15, 30, 61, .95) 0%, rgba(30, 70, 200, .86) 55%, rgba(30, 70, 200, .4) 100%), var(--foto, none) center / cover no-repeat; }
.heroe-pagina h1 { font: 800 clamp(34px, 4.4vw, 58px)/1.05 var(--display); letter-spacing: -.03em; max-width: 15em; text-wrap: balance; }
.heroe-pagina .acciones { margin-top: 28px; }

/* Tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 20px; margin-top: 36px; }
.tarjeta-s { position: relative; background: #fff; border: 1px solid #E3E8F2; border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; color: var(--tinta); text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
a.tarjeta-s:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: #C9D5F5; }
.tarjeta-s h3 { font: 700 19px/1.25 var(--cuerpo); }
.tarjeta-s p { color: var(--texto2); font-size: 15px; }
.tarjeta-s .mas { margin-top: auto; padding-top: 6px; color: var(--azul); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.tarjeta-s .mas svg { width: 16px; height: 16px; }
.icono { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cielo), #D6E1FD); color: var(--azul); }
.icono svg { width: 23px; height: 23px; }
.icono.sol { background: linear-gradient(135deg, #FFF4C7, #FFE48A); color: #7A5200; }
.oscuro .tarjeta-s { background: var(--tinta2); border-color: rgba(255, 255, 255, .08); color: #fff; box-shadow: none; }
.oscuro .tarjeta-s p { color: #C8D3EE; }

.servicios article { background: #fff; border: 1px solid #E3E8F2; border-radius: var(--radio); box-shadow: var(--sombra); }
.servicios h3 { font: 700 19px/1.25 var(--cuerpo); color: var(--tinta); }
.servicios p { font-size: 15px; }

.plan { border: 1px solid #E3E8F2; border-radius: var(--radio); box-shadow: var(--sombra); padding: 26px; }
.plan.activo { border: 2px solid var(--sol); box-shadow: var(--sombra-alta); }
.plan h3 { font-size: 22px; }
.plan .valor { font-size: 26px; }
.calc { border-radius: 20px; }
.calc .resultado { border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tipos button { font-size: 15px; min-height: 44px; border-radius: 10px; border-width: 1.5px; }
.digitos button { border-radius: 10px; width: 52px; height: 52px; font-size: 20px; }
.filtros button { border-radius: 10px; }
.mensaje { border-radius: 14px; }
.tarjeta { border-radius: 18px; box-shadow: var(--sombra); }
.seguimiento { box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.sectores span { border-radius: 999px; font-size: 15px; padding: 8px 16px; }
.faq details { border: 1px solid #E3E8F2; border-radius: 12px; }
.faq summary { font-size: 16px; }

/* Proceso numerado */
.proceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; margin-top: 36px; counter-reset: paso; }
.proceso > div { counter-increment: paso; position: relative; padding-top: 52px; }
.proceso > div::before { content: counter(paso); position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font: 700 16px var(--cuerpo); }
.oscuro .proceso > div::before { background: var(--sol); color: var(--tinta); }
.proceso h3 { font-size: 18px; margin-bottom: 6px; }
.proceso p { color: var(--texto2); font-size: 15px; }
.oscuro .proceso p { color: #C8D3EE; }

/* Llamado a la acción */
.cta { background: linear-gradient(120deg, var(--azul), #2C5BE0); color: #fff; border-radius: 22px; padding: clamp(28px, 4vw, 52px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; box-shadow: var(--sombra-alta); }
.cta h2 { font: 800 clamp(26px, 3vw, 38px)/1.12 var(--display); letter-spacing: -.02em; max-width: 18em; }
.cta p { color: #DDE5FA; margin-top: 8px; max-width: 34em; }

/* Franja de instituciones */
.franja { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; padding: 22px var(--margen); background: #fff; border-bottom: 1px solid #E3E8F2; color: var(--texto3); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }

/* Pie */
.pie { padding-block: 48px 28px; }
.pie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; }
.pie-grid h4 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sol); margin: 0 0 10px; }
.pie-grid a, .pie-grid span { display: block; color: #DDE5FA; text-decoration: none; font-size: 15px; padding-block: 3px; }
.pie-grid a:hover { color: #fff; }
.pie-texto { color: #B9C6E6; font-size: 15px; margin-top: 10px; max-width: 22em; }
.pie-legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 32px; padding-top: 18px; color: #9FB0D8; font-size: 14px; }

/* WhatsApp flotante */
.wa-flotante { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; background: #1FA855; color: #fff; text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.wa-flotante svg { width: 20px; height: 20px; }
.wa-flotante:hover { background: #178F47; }
@media (max-width: 520px) { .wa-flotante span { display: none; } .wa-flotante { padding: 14px; } }

/* =====================================================================
   Paleta clara: blanco, tinta y verde azulado, con ámbar solo en detalles
   ===================================================================== */
:root {
  --azul: #0F766E;
  --azul-oscuro: #0B5F58;
  --tinta: #101828;
  --tinta2: #1D2939;
  --sol: #F5B841;
  --texto2: #475467;
  --texto3: #667085;
  --fondo: #F7F8FA;
  --cielo: #E7F4F1;
  --borde: #E4E7EC;
  --borde2: #EEF0F3;
  --campo: #98A2B3;
  --ambar-suave: #FFF6E0;
}
body { color: var(--tinta); }

/* Botones */
.boton-sol, .boton-azul { background: var(--azul); color: #fff; }
.boton-sol:hover, .boton-azul:hover { background: var(--azul-oscuro); box-shadow: 0 6px 16px rgba(15, 118, 110, .25); }
.boton-linea { background: #fff; color: var(--tinta); border: 1.5px solid #D0D5DD; }
.boton-linea:hover { background: var(--fondo); }
.boton-borde { border-color: #D0D5DD; color: var(--tinta); }
.boton-borde:hover { background: var(--fondo); }

/* Encabezado blanco */
.cabecera { background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--borde); }
.cabecera .logo { color: var(--tinta); }
.cabecera .logo span { color: var(--azul); }
.cabecera nav > a, .cabecera .menu-serv summary { color: var(--tinta2); }
.cabecera nav > a:hover, .cabecera .menu-serv summary:hover { color: var(--azul); }
.cabecera nav > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--azul); }
.cabecera nav a.boton-sol { color: #fff; }
.menu-btn { color: var(--tinta); }
.menu-panel { border: 1px solid var(--borde); }

/* Secciones claras en lugar de bloques de color intenso */
.azul { background: linear-gradient(180deg, #F2F8F7 0%, #FFFFFF 100%); color: var(--tinta); }
.oscuro { background: var(--fondo); color: var(--tinta); }
.heroe {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 50%, rgba(255, 255, 255, .6) 100%),
    url("https://images.unsplash.com/photo-1758599543110-f9cf3903a2ad?auto=format&fit=crop&w=2000&q=80") center / cover no-repeat;
}
.heroe .sub { color: var(--texto2); }
.heroe-pagina {
  color: var(--tinta);
  background: linear-gradient(100deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 52%, rgba(255, 255, 255, .45) 100%), var(--foto, none) center / cover no-repeat;
  border-bottom: 1px solid var(--borde);
}
.etiqueta, .oscuro .etiqueta, .azul .etiqueta, .heroe-pagina .etiqueta { background: var(--cielo); color: var(--azul); }
.intro, .oscuro .intro, .heroe-pagina .intro { color: var(--texto2); }
.marca { background: var(--ambar-suave); color: var(--tinta); box-shadow: inset 0 -0.18em 0 #F7D78B; }

/* Tarjetas */
.icono { background: var(--cielo); color: var(--azul); }
.icono.sol { background: var(--ambar-suave); color: #9A6700; }
.tarjeta-s { border-color: var(--borde); }
a.tarjeta-s:hover { border-color: #B9DED6; }
.oscuro .tarjeta-s { background: #fff; color: var(--tinta); border-color: var(--borde); box-shadow: var(--sombra); }
.oscuro .tarjeta-s p, .oscuro .proceso p { color: var(--texto2); }
.oscuro .proceso > div::before, .proceso > div::before { background: var(--azul); color: #fff; }
.oscuro .pasos .n, .pasos .n { background: var(--cielo); color: var(--azul); }
.servicios h3 { color: var(--tinta); }
.sectores span { background: var(--cielo); color: var(--azul); }

/* Fechas y cotizador */
.fecha { background: var(--ambar-suave); border: 1px solid #F7DFA5; color: var(--tinta); }
.digitos button { background: #fff; border: 1.5px solid #D0D5DD; color: var(--tinta); }
.digitos button[aria-pressed=true] { background: var(--azul); border-color: var(--azul); color: #fff; }
.calc { background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--tinta); }
.tipos button { background: #fff; color: var(--tinta); border: 1.5px solid #D0D5DD; }
.tipos button[aria-pressed=true] { background: var(--azul); border-color: var(--azul); color: #fff; }
.calc .resultado { background: linear-gradient(160deg, #0F766E, #134E4A); color: #fff; box-shadow: 0 14px 34px rgba(15, 118, 110, .3); }
.calc .resultado .desglose { border-top-color: rgba(255, 255, 255, .3); }
.calc .resultado .boton-azul { background: #fff; color: var(--azul); }
.plan.activo { border-color: var(--azul); }
.plan .tu { background: var(--cielo); color: var(--azul); }
.filtros button { border-color: #D0D5DD; color: var(--tinta); border-width: 1.5px; }
.filtros button[aria-pressed=true] { background: var(--azul); border-color: var(--azul); color: #fff; }
input[type=range] { accent-color: var(--azul); }

/* Llamados y pie */
.cta { background: linear-gradient(120deg, #0F766E, #134E4A); }
.cta .boton-sol { background: #fff; color: var(--azul); }
.cta p { color: #D7EEE9; }
.pie { background: var(--tinta); }
.pie-grid h4 { color: #7FD1C2; }
.pie-grid a, .pie-grid span, .pie-texto { color: #C9D2DE; }
.pie-legal { color: #98A2B3; }

/* Paneles de la aplicación */
.ingreso section { background: linear-gradient(160deg, rgba(16, 24, 40, .9) 0%, rgba(15, 118, 110, .82) 100%), url("https://images.unsplash.com/photo-1758873268783-967d13f0c163?auto=format&fit=crop&w=1400&q=80") center / cover no-repeat; }
.ingreso .marca { background: var(--sol); box-shadow: none; }
.lateral { background: linear-gradient(180deg, #0F766E, #134E4A); }
.dato.sol { background: var(--ambar-suave); }

/* Registro */
.registro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: start; }
.registro-caja { display: flex; flex-direction: column; gap: 16px; }
.caja-titulo { font: 800 24px var(--display); letter-spacing: -.01em; }
.pasos-registro { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; counter-reset: r; }
.pasos-registro li { counter-increment: r; display: flex; align-items: center; gap: 12px; color: var(--texto3); font-weight: 600; }
.pasos-registro li::before { content: counter(r); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--borde); font-size: 14px; }
.pasos-registro li.actual { color: var(--tinta); }
.pasos-registro li.actual::before { background: var(--azul); border-color: var(--azul); color: #fff; }
.pasos-registro li.hecho::before { content: "✓"; background: var(--cielo); border-color: var(--cielo); color: var(--azul); }
.resumen-plan { background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.resumen-plan small { display: block; color: var(--texto3); font-weight: 600; }
.resumen-plan strong { display: block; font: 800 38px/1.1 var(--display); }
.resumen-plan span { color: var(--texto2); font-size: 14px; }
.resumen-plan .desglose { border-top-color: var(--borde); }
.opciones-pago { display: flex; flex-direction: column; gap: 10px; }
.opcion { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1.5px solid var(--borde); border-radius: 12px; background: #fff; color: var(--tinta); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.opcion:hover, .opcion[aria-pressed="true"] { border-color: var(--azul); background: var(--cielo); }
.opcion svg { width: 26px; height: 26px; color: var(--azul); flex: 0 0 auto; }
.opcion b { display: block; }
.opcion small { color: var(--texto3); }

/* Panel del administrador */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.registro-tarjeta { border: 1px solid var(--borde); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.registro-tarjeta h3 { font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.accesos a { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 14px; color: var(--tinta); text-decoration: none; font-weight: 600; }
.accesos a:hover { border-color: var(--azul); background: var(--cielo); }
.accesos svg { width: 20px; height: 20px; color: var(--azul); }
.tabla-editable input { min-height: 38px; padding: 4px 8px; border: 1.5px solid var(--campo); border-radius: 6px; font: 500 15px var(--cuerpo); width: 100%; }