/* Zetein — estilos compartidos de páginas interiores (legal, registro, etc.)
   Misma estética que la landing (zetein_web_v4). */
:root{
  --ink:#0C2233; --ink-2:#102E45;
  --marine:#0E4D78; --marine-deep:#0A3A5C;
  --ice:#19B2C6; --ice-soft:#DBF1F4;
  --amber:#E76F38;
  --paper:#F2F6F8; --surface:#FFFFFF;
  --line:#D7E2E8; --muted:#56697A; --text:#173140;
  --display:'Space Grotesk',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --shadow:0 1px 2px rgba(12,34,51,.04),0 12px 32px -12px rgba(12,34,51,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body); color:var(--text); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased}
.wrap{width:min(1120px,92vw); margin-inline:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--display); line-height:1.1; letter-spacing:-.02em; color:var(--ink)}

.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--body); font-weight:600; font-size:1rem; padding:.7rem 1.25rem; border-radius:11px; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .2s ease}
.btn-primary{background:var(--marine); color:#fff; box-shadow:0 8px 22px -10px rgba(14,77,120,.7)}
.btn-primary:hover{background:var(--marine-deep); transform:translateY(-1px)}
:focus-visible{outline:2.5px solid var(--ice); outline-offset:2px; border-radius:4px}

/* NAV */
nav{position:sticky; top:0; z-index:50; background:rgba(242,246,248,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand img{height:42px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:1.7rem; font-size:.94rem; font-weight:500; color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:.55rem 1.1rem; font-size:.92rem}

/* CONTENIDO (texto legal / páginas) */
.page-wrap{max-width:820px; margin:0 auto; padding:clamp(2.5rem,5vw,4rem) 5% clamp(3rem,6vw,5rem)}
.page-wrap h1{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:700; margin-bottom:.5rem}
.page-wrap h2{font-size:1.3rem; font-weight:600; margin:2rem 0 .6rem; color:var(--ink)}
.page-wrap h3{font-size:1.05rem; font-weight:600; margin:1.4rem 0 .5rem}
.page-wrap p{font-size:1rem; color:var(--text); margin-bottom:.9rem; line-height:1.75}
.page-wrap ul{padding-left:1.3rem; margin-bottom:.9rem}
.page-wrap li{font-size:1rem; color:var(--text); margin-bottom:.4rem; line-height:1.7}
.page-wrap a{color:var(--marine); text-decoration:underline}
.fecha{font-family:var(--mono); font-size:.82rem; color:var(--muted); margin-bottom:2.4rem}
.separador{height:1px; background:var(--line); margin:2.4rem 0}

/* FOOTER (color Zetein, navy de marca) */
footer{background:var(--ink); padding:2.6rem 0; margin-top:2rem}
.foot{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.foot-l img{height:38px; width:auto; display:block}
.foot-links{display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.9rem; color:#A9C0CE}
.foot-links a:hover{color:#fff}
.foot-meta{font-family:var(--mono); font-size:.76rem; color:#7FA8BD}

/* Botón fantasma y utilidades del menú */
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--marine); color:var(--marine)}
.nav-lang{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:34px;
  padding:0 10px; border:1.5px solid currentColor; border-radius:8px; font-size:12px; font-weight:700;
  letter-spacing:.5px; color:inherit; opacity:.7; transition:opacity .15s}
.nav-lang:hover{opacity:1}
.nav-2l{display:inline-flex; flex-direction:column; line-height:1.12; font-size:.86rem}
.nav-2l span:last-child{color:var(--muted); font-size:.8rem}
.nav-2l:hover span{color:var(--ink)}
.nav-boton{display:none; background:none; border:1px solid var(--line); border-radius:9px;
  width:40px; height:38px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center}

/* CABECERA DE PÁGINA */
.page-head{padding:clamp(2.4rem,5vw,3.8rem) 0 0}
.page-head .eyebrow{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--marine)}
.page-head h1{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:700; margin:.7rem 0 .8rem}
.page-head p.lead{font-size:1.08rem; color:var(--muted); max-width:56ch}

/* FORMULARIOS Y FICHAS */
.cols{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem,3vw,2.6rem);
  align-items:start; padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,5vw,4rem)}
.tarjeta{background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow)}
.tarjeta h2{font-size:1.25rem; font-weight:600; margin-bottom:.3rem}
.tarjeta > p.sub{color:var(--muted); font-size:.95rem; margin-bottom:1.2rem}
.campo{margin-bottom:.9rem}
.campo label{display:block; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.35rem}
.campo input, .campo textarea, .campo select{width:100%; padding:.75rem .9rem; font-family:var(--body);
  font-size:.97rem; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.campo textarea{resize:vertical; min-height:110px; line-height:1.55}
.campo input:focus, .campo textarea:focus, .campo select:focus{outline:none; border-color:var(--marine)}
.fila2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.form-pie{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.2rem; flex-wrap:wrap}
.form-nota{font-size:.82rem; color:var(--muted); max-width:34ch}
.form-nota a{color:var(--marine); text-decoration:underline}
.aviso-err{display:none; margin-top:1rem; padding:.7rem .9rem; border-radius:10px;
  background:#FBEAE8; color:#D6453B; font-size:.9rem}
.exito{display:none; text-align:center; padding:1.5rem 0}
.exito .ok-ic{width:54px; height:54px; border-radius:50%; background:var(--ice-soft); color:var(--marine);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:0 auto 1rem}
.exito h2{font-size:1.3rem; margin-bottom:.5rem}
.exito p{color:var(--muted); font-size:.97rem}

/* Columna lateral: vías de contacto y qué esperar */
.lat{display:flex; flex-direction:column; gap:1rem}
.lat-bloque{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.3rem 1.4rem}
.lat-bloque h3{font-size:1.02rem; font-weight:600; margin-bottom:.5rem}
.lat-bloque p{color:var(--muted); font-size:.93rem; line-height:1.6}
/* :not(.btn) es imprescindible. Sin él, esta regla (0,2,0) le gana a
   .btn-primary (0,1,0) y le pone al botón texto azul marino sobre fondo azul
   marino: el botón se ve, pero no se lee lo que pone. */
.lat-bloque a:not(.btn){color:var(--marine); font-weight:600}
.lista-check{list-style:none; margin:.4rem 0 0; padding:0}
.lista-check li{display:flex; gap:.55rem; align-items:flex-start; padding:.3rem 0;
  font-size:.93rem; color:var(--text)}
.lista-check svg{flex:0 0 17px; color:var(--ice); margin-top:.2rem}
.dato{font-family:var(--mono); font-size:.88rem; color:var(--ink)}

@media(max-width:860px){
  .cols{grid-template-columns:1fr}
  .nav-boton{display:inline-flex}
  .nav-links{display:none; position:absolute; left:0; right:0; top:64px; flex-direction:column;
    align-items:stretch; gap:.2rem; padding:.8rem 4vw 1.2rem; background:var(--paper);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .nav-links.abierto{display:flex}
  .nav-links a{padding:.7rem .2rem; border-bottom:1px solid var(--line)}
  .nav-links a.nav-cta{justify-content:center; border-bottom:none; margin-top:.5rem}
  .nav-lang{align-self:flex-start; border-bottom:1.5px solid currentColor!important}
  .nav-2l{flex-direction:row; gap:.35rem; font-size:.94rem}
  .nav-2l span:last-child{font-size:.94rem}
}
@media(max-width:560px){
  .fila2{grid-template-columns:1fr}
}
@media(max-width:760px){
  .foot{flex-direction:column; align-items:flex-start; gap:1rem}
}