/* ENIGMATIKOS · estilos de la web de lectores */
@font-face{font-family:"Cinzel";font-weight:600;font-display:swap;src:url(../fuentes/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:800;font-display:swap;src:url(../fuentes/cinzel-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(../fuentes/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url(../fuentes/nunito-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(../fuentes/nunito-latin-800-normal.woff2) format("woff2")}

:root{
  --petroleo:#1F4E5A; --petroleo-osc:#123540; --crema:#FBF6EA; --crema-2:#F3EBD6;
  --lacre:#C0392B; --lacre-osc:#A93226; --oro:#E2B93B; --verde:#2F5D3A;
  --tinta:#1D2B30; --gris:#4A5A5E; --borde:#E8DFC8; --campo:#C9BFA6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:"Nunito",system-ui,sans-serif;font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--petroleo)} a:hover{color:var(--petroleo-osc)}
h1,h2,h3{line-height:1.15}
.display{font-family:"Cinzel",Georgia,serif;font-weight:800}
.contenedor{max-width:1200px;margin:0 auto;padding:0 24px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--oro);outline-offset:2px}

/* Cabecera */
.barra{background:var(--petroleo);color:var(--crema)}
.barra .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--crema)}
.marca:hover{color:var(--crema)}
.marca span{font-family:"Cinzel",serif;font-weight:800;font-size:24px;letter-spacing:3px}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;font-weight:600}
.menu a{color:var(--crema);text-decoration:none;padding:10px 2px}
.menu a:hover{text-decoration:underline}
.menu a.boton-oro{background:var(--oro);color:var(--tinta);padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:800;font-size:1.05rem;border:none;border-radius:10px;padding:14px 24px;min-height:48px;cursor:pointer;text-decoration:none}
.boton-lacre{background:var(--lacre);color:#fff} .boton-lacre:hover{background:var(--lacre-osc);color:#fff}
.boton-petroleo{background:var(--petroleo);color:#fff} .boton-petroleo:hover{background:var(--petroleo-osc);color:#fff}
.boton-borde{background:transparent;color:var(--petroleo);border:2px solid var(--petroleo)}
.boton[disabled]{opacity:.6;cursor:wait}

/* Portada */
.portada{background:#F6E7C8 url(../img/cabecera.webp) right center/cover no-repeat;padding:72px 0 96px;min-height:640px}
.portada .contenedor{display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:space-between}
.portada-texto{flex:999 1 520px;min-width:0;max-width:620px;display:flex;flex-direction:column;gap:20px;background:rgba(251,246,234,.88);border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.cinta{align-self:flex-start;background:var(--verde);border:2px solid var(--oro);color:var(--crema);font-family:"Cinzel",serif;font-weight:800;letter-spacing:2px;padding:8px 18px;border-radius:6px;font-size:14px;margin:0}
.portada h1{margin:0;font-size:clamp(2.2rem,5vw,3.6rem);color:var(--petroleo)}
.portada .entrada{margin:0;font-size:1.25rem;max-width:560px;color:#26363B;font-weight:600}
.portada .edad{margin:0;color:#3B4A4E;font-weight:600}

/* Formulario */
.tarjeta-form{flex:1 1 380px;min-width:0;background:var(--crema);border-radius:16px;padding:32px;box-shadow:0 18px 40px rgba(0,0,0,.25);position:relative}
.sello{position:absolute;top:-26px;right:24px;width:64px;height:64px;border-radius:50%;background:var(--lacre);box-shadow:inset -6px -8px 0 rgba(0,0,0,.18),inset 6px 6px 0 rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:var(--crema);font-family:"Cinzel",serif;font-weight:800;font-size:26px}
.tarjeta-form h2{margin:0 0 6px;font-family:"Cinzel",serif;font-size:1.5rem;color:var(--petroleo)}
.tarjeta-form .nota{margin:0 0 20px;font-size:.95rem;color:var(--gris)}
.formulario{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.95rem}
.campo input{font:inherit;font-weight:400;padding:12px 14px;border:2px solid var(--campo);border-radius:10px;background:#fff;min-height:48px;color:var(--tinta)}
.campo input:focus{border-color:var(--petroleo);outline:none}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#3B4A4E}
.casilla input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--petroleo)}
.mensaje{margin:0;padding:12px 14px;border-radius:10px;font-weight:700;font-size:.95rem}
.mensaje.ok{background:#E3EFE5;color:#1E4527}
.mensaje.error{background:#F7E1DE;color:#8E2A20}
.letra-pequena{margin:0;font-size:.8rem;color:var(--gris)}

/* Secciones */
.seccion{padding:80px 0}
.seccion-crema{background:var(--crema-2)}
.titulo-seccion{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;margin-bottom:40px}
.titulo-seccion h2{margin:0;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--petroleo)}
.titulo-seccion p{margin:0;font-size:1.1rem;color:var(--gris);max-width:640px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.paso{background:#fff;border:2px solid var(--borde);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.paso img{width:160px;height:160px;object-fit:contain;align-self:center}
.paso-cab{display:flex;align-items:center;gap:12px}
.numero{width:48px;height:48px;border-radius:50%;background:var(--petroleo);border:3px solid var(--oro);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none}
.paso-cab span:last-child{font-family:"Cinzel",serif;font-weight:800;color:var(--verde);letter-spacing:1px}
.paso h3{margin:0;font-size:1.35rem}
.paso p{margin:0;color:var(--gris)}

.saga .contenedor{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.saga-libro{flex:1 1 280px;min-width:0;display:flex;justify-content:center}
.libro-hueco{width:260px;height:340px;background:var(--petroleo);border-radius:6px 14px 14px 6px;box-shadow:0 20px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--crema);padding:24px;text-align:center}
.libro-hueco span{font-family:"Cinzel",serif;font-weight:800;letter-spacing:2px;font-size:22px}
.saga-texto{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:18px}
.saga-texto .antetitulo{margin:0;font-family:"Cinzel",serif;font-weight:800;color:var(--lacre);letter-spacing:2px}
.saga-texto h2{margin:0;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--petroleo)}
.saga-texto p{margin:0;font-size:1.1rem;color:#3B4A4E}
.botones{display:flex;flex-wrap:wrap;gap:12px}

.autora{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.foto-hueco{width:120px;height:120px;border-radius:50%;background:var(--borde);border:4px solid var(--oro);object-fit:cover}
.autora h2{margin:0;font-family:"Cinzel",serif;font-size:2rem;color:var(--petroleo)}
.autora p{margin:0;font-size:1.1rem;color:#3B4A4E}

/* Pie */
.pie{background:var(--petroleo-osc);color:#CFE0E0;padding:40px 0;font-size:.95rem}
.pie .contenedor{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.pie a{color:#CFE0E0}

/* Zona de agentes */
.fondo-petroleo{background:var(--petroleo);min-height:100vh}
.zona{max-width:640px;margin:0 auto;padding:56px 24px 80px}
.zona-tarjeta{background:var(--crema);border-radius:16px;padding:48px 32px 40px;box-shadow:0 18px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:18px;text-align:center;align-items:center;position:relative}
.zona-tarjeta .sello{right:auto;left:50%;transform:translateX(-50%);top:-32px;width:72px;height:72px}
.zona-tarjeta h1{margin:0;font-size:clamp(1.9rem,4vw,2.6rem);color:var(--petroleo)}
.zona-tarjeta .cofre{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.zona-bloque{display:flex;flex-direction:column;gap:16px;width:100%;align-items:stretch}
.zona-bloque[hidden]{display:none}
.campo-clave input{font-weight:800;letter-spacing:3px;text-transform:uppercase;text-align:center}

/* Páginas legales */
.legal{max-width:800px;margin:0 auto;padding:56px 24px 80px}
.legal h1{font-family:"Cinzel",serif;color:var(--petroleo);font-size:clamp(1.8rem,4vw,2.4rem)}
.legal h2{color:var(--petroleo);font-size:1.25rem;margin-top:32px}
.rellenar{background:#FFF3C4;padding:0 4px;border-radius:3px}

@media (max-width:900px){
  .portada{padding:48px 0 64px;min-height:0}
  .portada-texto{padding:24px}
}