/* CoDX ONE · sistema visual · manual A3 v1.0 */

:root{
  --tinta:#080B14;
  --grafito:#1C2733;
  --pizarra:#34434E;
  --acero:#67727B;
  --niebla:#A8B0B6;
  --bruma:#DCE0E3;
  --hueso:#F2F3F4;
  --papel:#FBFBFA;
  --cian:#1F9BC4;
  --cian-profundo:#15708F;
  --cian-claro:#3FB6DC;
  --exito:#1D6B41;
  --atencion:#8A6212;
  --alerta:#B3392F;
  --titulo:'Poppins',system-ui,sans-serif;
  --texto:'IBM Plex Sans',system-ui,sans-serif;
  --cifra:'IBM Plex Mono',ui-monospace,monospace;
  --max:1120px;
  --medida:62ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papel);color:var(--pizarra);font-family:var(--texto);font-size:16px;line-height:1.69;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.saltar{position:absolute;left:-9999px}
.saltar:focus{position:static;display:inline-block;padding:12px;background:var(--tinta);color:var(--papel)}

/* Escala · A3 §15 */
h1{font-family:var(--titulo);font-weight:700;font-size:clamp(30px,4.6vw,44px);line-height:1.09;letter-spacing:-.02em;color:var(--tinta)}
h2{font-family:var(--titulo);font-weight:700;font-size:clamp(23px,3vw,30px);line-height:1.2;letter-spacing:-.015em;color:var(--tinta)}
h3{font-family:var(--titulo);font-weight:500;font-size:19px;line-height:1.36;letter-spacing:-.01em;color:var(--tinta)}
p{max-width:var(--medida)}
.entradilla{font-size:19px;line-height:1.58;max-width:var(--medida)}
.secundario{font-size:14px;line-height:1.57;color:var(--acero)}
.etiqueta{display:block;font-family:var(--cifra);font-weight:500;font-size:11px;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;color:var(--cian-profundo)}
.cifra{font-family:var(--cifra);font-size:14px}
a{color:var(--cian-profundo)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
section{padding:80px 0;border-top:1px solid var(--bruma)}
.tras-titulo{margin:18px 0 16px}

/* Encabezado */
.nav{display:flex;justify-content:space-between;align-items:center;padding:26px 0;gap:20px}
.marca{font-family:var(--titulo);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--tinta);text-decoration:none}
.marca img{display:block;height:26px;width:auto}
.nav-links{display:flex;gap:26px;font-family:var(--cifra);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.nav-links a{color:var(--acero);text-decoration:none}
.nav-links a:hover{color:var(--cian-profundo)}

/* Portada */
.hero{padding:76px 0 88px;border-top:none}
.hero h1{max-width:17ch;margin:22px 0 24px}
.hero .entradilla{max-width:54ch}
.btn{display:inline-block;margin-top:36px;background:var(--tinta);color:var(--papel);font-family:var(--cifra);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 32px;text-decoration:none}
.btn:hover{background:var(--cian-profundo)}
.btn-linea{background:transparent;color:var(--tinta);border:1px solid var(--tinta)}
.btn-linea:hover{background:var(--tinta);color:var(--papel)}

/* Bloques numerados */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--bruma);border:1px solid var(--bruma);margin-top:40px}
.bloque{background:var(--papel);padding:28px 26px 32px}
.bloque .n{font-family:var(--cifra);font-size:11px;letter-spacing:.16em;color:var(--cian-profundo)}
.bloque h3{margin:14px 0 8px}
.bloque p{font-size:15px}

/* Tabla de incentivos */
.inc{margin-top:40px;border:1px solid var(--bruma)}
.fila{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:1px solid var(--bruma)}
.fila:last-child{border-bottom:none}
.fila:nth-child(even){background:var(--hueso)}
.quien{padding:26px;border-right:1px solid var(--bruma)}
.quien p{font-size:14px;color:var(--acero);margin-top:5px}
.pasa{padding:26px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.pasa .et{font-family:var(--cifra);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero)}
.pasa .val{font-size:16px;line-height:1.5}
.nuestra{background:var(--tinta)!important}
.nuestra h3,.nuestra .val{color:var(--papel)}
.nuestra p,.nuestra .et{color:var(--niebla)}
.nuestra .quien{border-right-color:var(--grafito)}
.remate{font-family:var(--titulo);font-weight:500;font-size:clamp(19px,2.4vw,22px);line-height:1.38;color:var(--tinta);max-width:28ch;margin-top:38px}

/* Tarjetas con filete */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:28px 40px;margin-top:40px}
.cap{border-left:2px solid var(--cian);border-radius:0;padding-left:18px}
.cap h3{font-size:17px;margin-bottom:6px}
.cap p{font-size:15px}

/* Fondo tinta */
.oscura{background:var(--tinta);border-top:none}
.oscura h2,.oscura h3{color:var(--papel)}
.oscura p,.oscura .entradilla{color:var(--niebla)}
.oscura .etiqueta{color:var(--cian-claro)}
.oscura .cap{border-left-color:var(--cian-claro)}

/* Listas sí / no */
.filtro{background:var(--hueso)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:40px;margin-top:34px}
.cols h3{margin-bottom:16px}
.cols ul{list-style:none}
.cols li{padding:10px 0 10px 24px;position:relative;font-size:15.5px;border-bottom:1px solid var(--bruma)}
.cols li:before{position:absolute;left:0;top:10px;font-family:var(--cifra);font-size:14px}
.si li:before{content:"+";color:var(--cian-profundo)}
.no li:before{content:"\2212";color:var(--niebla)}
.no li{color:var(--acero)}

/* Preguntas y listas simples */
.lista{list-style:none;margin-top:28px;border-top:1px solid var(--bruma)}
.lista li{padding:16px 0;border-bottom:1px solid var(--bruma);display:flex;gap:18px;align-items:baseline}
.lista .idx{font-family:var(--cifra);font-size:12px;color:var(--cian-profundo);min-width:26px}
.lista p{margin:0}

/* Tabla de capas */
.tabla{width:100%;border-collapse:collapse;margin-top:36px;font-size:15px}
.tabla th{font-family:var(--cifra);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acero);text-align:left;padding:0 20px 12px 0;border-bottom:1px solid var(--bruma)}
.tabla td{padding:16px 20px 16px 0;border-bottom:1px solid var(--bruma);vertical-align:top}
.tabla td:first-child{font-family:var(--titulo);font-weight:500;color:var(--tinta);white-space:nowrap}

/* Contacto y pie */
.datos{display:flex;gap:36px;flex-wrap:wrap;margin-top:30px;font-family:var(--cifra);font-size:15px}
.datos a{text-decoration:none;border-bottom:1px solid var(--bruma);padding-bottom:3px}
.datos a:hover{border-color:var(--cian)}
footer{border-top:1px solid var(--bruma);padding:28px 0 44px;font-family:var(--cifra);font-size:12px;letter-spacing:.06em;color:var(--acero);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--acero);text-decoration:none}
footer a:hover{color:var(--cian-profundo)}

/* Documento legal */
.doc{padding-top:56px}
.doc h2{margin:44px 0 14px;font-size:23px}
.doc h3{margin:28px 0 10px;font-size:17px}
.doc p,.doc li{margin-bottom:12px}
.doc ul{margin:0 0 12px 22px;max-width:var(--medida)}
.aviso{border-left:2px solid var(--atencion);border-radius:0;padding:16px 0 16px 18px;margin:32px 0;background:var(--hueso)}
.aviso p{margin:0;font-size:15px}

@media (max-width:680px){
  section{padding:56px 0}
  .hero{padding:48px 0 62px}
  .nav-links{display:none}
  .fila{grid-template-columns:1fr}
  .quien{border-right:none;border-bottom:1px solid var(--bruma)}
  .nuestra .quien{border-bottom-color:var(--grafito)}
  .tabla td:first-child{white-space:normal}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ── Movimiento · lo que WordPress no dejaba ──────────────── */
.aparece{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.aparece.visible{opacity:1;transform:none}
.aparece:nth-child(2){transition-delay:.08s}
.aparece:nth-child(3){transition-delay:.16s}
.aparece:nth-child(4){transition-delay:.24s}

.nav{position:sticky;top:0;z-index:50;background:rgba(251,251,250,.88);backdrop-filter:saturate(180%) blur(12px);transition:padding .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.nav.compacta{padding:12px 0;border-bottom-color:var(--bruma)}

.btn{transition:background .25s ease,transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.nav-links a{position:relative;transition:color .25s ease}
.nav-links a:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--cian);transition:width .3s ease}
.nav-links a:hover:after{width:100%}

.bloque{transition:background .3s ease}
.bloque:hover{background:var(--hueso)}
.cap{transition:border-left-color .3s ease,padding-left .3s ease}
.cap:hover{border-left-color:var(--cian-profundo);padding-left:22px}
.fila{transition:background .3s ease}
.datos a{transition:border-color .25s ease,color .25s ease}
.cols li{transition:padding-left .25s ease}
.cols li:hover{padding-left:28px}

.marca-fondo{position:absolute;right:-4%;top:8%;width:34%;min-width:220px;opacity:.045;pointer-events:none}
.hero{position:relative;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .aparece{opacity:1;transform:none;transition:none}
  .btn:hover,.cap:hover,.cols li:hover{transform:none;padding-left:inherit}
}