/* Blakeo Ganet — estilo editorial / revista
   Paleta: petróleo #0F4C5C · mostaza #E9B44C · azul grisáceo #D6E4E8 · arena #F3E9D2 · crema #FBF7EE · carbón #1C1C1C */
:root{
  --petroleo:#0F4C5C; --mostaza:#E9B44C; --azul:#D6E4E8; --arena:#F3E9D2; --crema:#FBF7EE; --carbon:#1C1C1C; --blanco:#FFFFFF;
  --r:14px; --serif:"Playfair Display",Georgia,serif; --sans:"Source Sans 3",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--carbon);font-family:var(--sans);font-size:18px;line-height:1.65}
img,svg{max-width:100%;display:block}
a{color:var(--petroleo);text-underline-offset:3px}
a:hover{color:var(--carbon)}
a:focus-visible,button:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--carbon);color:var(--blanco);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.wrap{width:min(1180px,92%);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0 0 .6em;font-weight:700}
h1{font-size:clamp(2rem,4.5vw,3.4rem)} h2{font-size:clamp(1.5rem,2.6vw,2.1rem)} h3{font-size:1.3rem}
p{margin:0 0 1em}

/* Banda de exención (parte superior del inicio) */
.exencion-top{background:var(--carbon);color:var(--blanco);font-size:.98rem;padding:.9rem 0}
.exencion-top .wrap{display:grid;gap:.35rem}
.exencion-top strong{color:var(--mostaza)}

/* Cabecera */
.site-header{border-bottom:3px solid var(--carbon);background:var(--crema)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--carbon)}
.brand-name{font-family:var(--serif);font-size:1.9rem;font-weight:900;line-height:1}
.tag{display:inline-block;background:var(--mostaza);color:var(--carbon);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;margin-top:.35rem}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0;padding:0}
nav a{color:var(--carbon);text-decoration:none;font-weight:600;padding:.3rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--petroleo)}

/* Qué es / qué no es */
.queson{padding:2.4rem 0 1rem}
.queson-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.queson .box{border-radius:var(--r);padding:1.4rem 1.5rem}
.queson .si{background:var(--azul)}
.queson .no{background:var(--arena)}
.queson h2{font-size:1.3rem;margin-bottom:.4em}
.queson ul{margin:0;padding-left:1.2rem}

/* Portada tipo revista */
.portada{padding:1.5rem 0 2.5rem}
.portada-grid{display:grid;gap:1.4rem;grid-template-columns:1.9fr 1fr}
.principal{background:var(--petroleo);color:var(--blanco);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.principal .ilus{background:var(--azul)}
.principal .cuerpo{padding:1.8rem 2rem 2.2rem}
.principal a{color:var(--blanco)}
.kicker{display:inline-block;background:var(--mostaza);color:var(--carbon);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:6px;margin-bottom:.8rem}
.principal h2{font-size:clamp(1.8rem,3.2vw,2.7rem)}
.btn{display:inline-block;background:var(--carbon);color:var(--blanco);text-decoration:none;font-weight:700;padding:.7rem 1.3rem;border-radius:10px;border:2px solid var(--carbon)}
.btn:hover{background:var(--blanco);color:var(--carbon)}
.btn-sec{background:var(--mostaza);color:var(--carbon);border-color:var(--mostaza)}
.btn-sec:hover{background:var(--carbon);color:var(--blanco);border-color:var(--carbon)}
.principal .btn{background:var(--mostaza);color:var(--carbon);border-color:var(--mostaza)}
.principal .btn:hover{background:var(--blanco);color:var(--carbon);border-color:var(--blanco)}
.lateral{display:grid;gap:1rem;align-content:start}
.lateral h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:3px solid var(--carbon);padding-bottom:.5rem;margin:0}
.item{border-radius:var(--r);padding:1.1rem 1.2rem;display:block;text-decoration:none;color:var(--carbon)}
.item:nth-of-type(1){background:var(--azul)}
.item:nth-of-type(2){background:var(--arena)}
.item:nth-of-type(3){background:var(--petroleo);color:var(--blanco)}
.item:nth-of-type(4){background:var(--crema);border:2px solid var(--carbon)}
.item .num{font-family:var(--serif);font-weight:900;font-size:1.6rem}
.item h3{margin:.1em 0 .3em;font-size:1.15rem}
.item p{margin:0;font-size:.97rem}
.item:hover h3{text-decoration:underline}

/* Conceptos */
.conceptos{padding:2.5rem 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;border-bottom:3px solid var(--carbon);margin-bottom:1.5rem}
.conceptos-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.card{border-radius:var(--r);padding:1.4rem}
.card:nth-child(3n+1){background:var(--azul)}
.card:nth-child(3n+2){background:var(--arena)}
.card:nth-child(3n){background:var(--petroleo);color:var(--blanco)}
.card h3{margin-bottom:.3em}
.card p{margin:0}

/* Sección correo */
.correo{background:var(--carbon);color:var(--blanco);padding:2.8rem 0}
.correo .wrap{display:grid;gap:1rem;grid-template-columns:1.4fr 1fr;align-items:center}
.correo a.btn{background:var(--mostaza);color:var(--carbon);border-color:var(--mostaza)}
.correo a.btn:hover{background:var(--blanco);border-color:var(--blanco)}
.correo h2{color:var(--blanco)}

/* Artículo */
.articulo-head{background:var(--petroleo);color:var(--blanco);padding:3rem 0 2.2rem}
.articulo-head .wrap{display:grid;gap:2rem;grid-template-columns:1.5fr 1fr;align-items:center}
.articulo-head .ilus{border-radius:var(--r);overflow:hidden;background:var(--azul)}
.articulo-head a{color:var(--blanco)}
.meta{font-size:.95rem}
.articulo{padding:2.5rem 0}
.articulo .wrap{max-width:760px}
.articulo h2{margin-top:1.6em;border-left:6px solid var(--mostaza);padding-left:.7rem}
.sabias{background:var(--mostaza);color:var(--carbon);border-radius:var(--r);padding:1.2rem 1.4rem;margin:1.6rem 0}
.sabias strong{font-family:var(--serif);font-size:1.2rem}
.nota{background:var(--azul);border-radius:var(--r);padding:1rem 1.2rem;font-size:.97rem;margin:1.6rem 0}
.fuentes{background:var(--arena);border-radius:var(--r);padding:1.2rem 1.4rem;margin-top:2rem}
.fuentes h2{border:0;padding:0;margin-top:0;font-size:1.3rem}
.fuentes ul{margin:0;padding-left:1.2rem}
.otros{padding:0 0 2.5rem}

/* Acerca de: dos columnas */
.dos-col{padding:3rem 0}
.dos-col .wrap{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;align-items:start}
.dos-col .ilus{border-radius:var(--r);overflow:hidden;background:var(--azul);position:sticky;top:1rem}
.bloque{border-radius:var(--r);padding:1.3rem 1.5rem;margin-bottom:1rem}
.bloque.b1{background:var(--azul)} .bloque.b2{background:var(--arena)} .bloque.b3{background:var(--petroleo);color:var(--blanco)}
.bloque h2{font-size:1.4rem}

/* Política editorial: lista numerada con iconos */
.pageh{padding:2.6rem 0 1rem}
.criterios{list-style:none;counter-reset:c;margin:1rem 0 3rem;padding:0;display:grid;gap:1rem}
.criterios li{counter-increment:c;display:grid;grid-template-columns:72px 1fr;gap:1.2rem;border-radius:var(--r);padding:1.3rem 1.5rem;align-items:start}
.criterios li:nth-child(3n+1){background:var(--azul)}
.criterios li:nth-child(3n+2){background:var(--arena)}
.criterios li:nth-child(3n){background:var(--petroleo);color:var(--blanco)}
.criterios li::before{content:counter(c);font-family:var(--serif);font-weight:900;font-size:1rem;grid-column:2;grid-row:1;color:inherit;opacity:1;letter-spacing:.1em;text-transform:uppercase;content:"Criterio " counter(c)}
.criterios .ico{grid-column:1;grid-row:1 / span 2;width:64px;height:64px}
.criterios h3,.criterios p{grid-column:2;margin:0}
.criterios h3{margin-bottom:.2em}

/* Páginas legales: documento limpio */
.legal{max-width:760px;margin:0 auto;padding:2.8rem 0 3rem}
.legal h1{font-size:2.2rem}
.legal h2{font-size:1.35rem;margin-top:1.8em}
.legal .upd{font-size:.95rem;border-bottom:1px solid var(--carbon);padding-bottom:1rem;margin-bottom:1.5rem}
.legal dl{margin:0}
.legal dt{font-weight:700;margin-top:.8em}
.legal dd{margin:0}

/* Footer */
.site-footer{background:var(--carbon);color:var(--blanco);margin-top:0;padding:2.6rem 0 1.6rem;font-size:.97rem}
.site-footer a{color:var(--blanco)}
.site-footer a:hover{color:var(--mostaza)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr}
.site-footer h2{font-size:1.1rem;color:var(--mostaza);font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.35rem}
.exencion{border:2px solid var(--mostaza);border-radius:var(--r);padding:1rem 1.2rem;margin-top:1.8rem}
.exencion p{margin:0 0 .6em}.exencion p:last-child{margin:0}
.copy{margin-top:1.4rem;font-size:.9rem}
address{font-style:normal}

@media (max-width:900px){
  .portada-grid,.articulo-head .wrap,.dos-col .wrap,.correo .wrap,.foot-grid{grid-template-columns:1fr}
  .conceptos-grid{grid-template-columns:1fr 1fr}
  .dos-col .ilus{position:static}
}
@media (max-width:600px){
  body{font-size:17px}
  .queson-grid,.conceptos-grid{grid-template-columns:1fr}
  .criterios li{grid-template-columns:1fr}
  .criterios li::before,.criterios .ico,.criterios h3,.criterios p{grid-column:1;grid-row:auto}
  .criterios .ico{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}