/* webenserio.com · la hoja de estilo de toda la web.
   Colores y letras de marca/especificacion.md. Las cifras del texto van en Chivo: la familia «Texto»
   toma de Atkinson todo menos 0-9, que toma de Chivo 600. Las dos caras declaran los mismos pesos: si no, Chrome
   no las junta en una familia y las cifras caen a la fuente del sistema. Sin scripts, sin estilos en línea y sin
   nada de fuera. */

@font-face{font-family:"Chivo";src:url("/fuentes/chivo.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Texto";src:url("/fuentes/atkinson-hyperlegible-next.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-002F,U+003A-10FFFF}
@font-face{font-family:"Texto";src:url("/fuentes/chivo-cifras.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0030-0039}

:root{
  --mahon:#1F2B5B; --minio:#CF3F28; --cal:#FBF8F3; --azulejo:#E3E8F1; --acera:#5E6272; --minio-claro:#FF7556;
  --cal-suave:rgba(251,248,243,.86); --cal-linea:rgba(251,248,243,.5); --linea:rgba(31,43,91,.16);
  --titular:"Chivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --texto:"Texto",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --margen:clamp(16px,5vw,56px);
  --ancho:1120px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--cal);color:var(--mahon);
  font-family:var(--texto);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
img{display:block;max-width:100%;height:auto}
p,dl,dd,ul{margin:0}
p{text-wrap:pretty}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-thickness:.14em}
:focus-visible{outline:3px solid var(--mahon);outline-offset:3px;border-radius:4px}
.puerta :focus-visible{outline-color:var(--cal)}
a[href^="tel:"]{white-space:nowrap}
h1,h2,h3{margin:0;font-family:var(--titular);font-weight:800;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.envoltura{width:100%;max-width:calc(var(--ancho) + 2 * var(--margen));margin-inline:auto;padding-inline:var(--margen)}
.cifra{font-family:var(--titular);font-weight:600;font-variant-numeric:lining-nums}

/* Botones: el rojo es del cartel, así que ninguno va en rojo. */
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 22px;
  border:2px solid transparent;border-radius:10px;font-family:var(--titular);font-weight:800;font-size:18px;
  line-height:1.15;text-align:center;text-decoration:none}
.boton:hover{text-decoration:underline}
.boton-cal{background:var(--cal);color:var(--mahon)}
.boton-borde-cal{border-color:var(--cal-linea);color:var(--cal)}
.boton-borde-cal:hover{border-color:var(--cal)}
.boton-mahon{background:var(--mahon);color:var(--cal)}
.boton-borde-mahon{border-color:var(--mahon);color:var(--mahon)}

/* ── Portada: la puerta azul con el cartel colgado ── */
.puerta{flex:1 0 auto;display:flex;flex-direction:column;background:var(--mahon);color:var(--cal)}
.puerta main{display:flex;align-items:center}
.barra{padding-block:clamp(14px,3vw,28px) 0}
.barra a{display:inline-block;border-radius:6px}
/* El logotipo trae su zona de respeto (100,7 de 1339,35 de ancho): se saca al margen para que las letras
   caigan en la misma vertical que el texto. La zona sigue libre. */
.barra img{--logo:clamp(176px,20vw,232px);width:var(--logo);max-width:none;margin-left:calc(var(--logo) * -.0752)}
.escaparate{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cartel" "texto";
  gap:clamp(20px,4vw,40px);align-items:center;padding-block:clamp(20px,5vw,72px) clamp(56px,9vw,120px)}
.escaparate .cartel{grid-area:cartel;justify-self:center;width:min(100%,400px)}
.escaparate .texto{grid-area:texto}
.escaparate h1{font-size:clamp(44px,8.4vw,92px);line-height:1.02;letter-spacing:-.015em}
.entradilla-portada{margin-top:18px;font-size:clamp(20px,2.3vw,25px);line-height:1.4;color:var(--cal-suave)}
.escaparate .acciones{margin-top:clamp(28px,4vw,40px)}
@media (min-width:860px){
  .escaparate{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"texto cartel"}
  .escaparate .cartel{width:min(100%,460px)}
}
@media (max-width:420px){
  .escaparate .acciones{flex-direction:column}
  .escaparate .boton{width:100%}
}

/* ── Páginas interiores: cabecera clara y una columna de lectura ── */
.cabecera{border-bottom:1px solid var(--linea)}
.cabecera .envoltura{padding-block:clamp(12px,2.4vw,20px)}
.cabecera a{display:inline-block;border-radius:6px}
.cabecera img{--logo:clamp(160px,17vw,200px);width:var(--logo);max-width:none;margin-left:calc(var(--logo) * -.0752)}
.pagina{padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,96px)}
.pagina h1{font-size:clamp(38px,6vw,60px)}
.entradilla{margin-top:14px;max-width:40ch;font-size:clamp(19px,2vw,22px);line-height:1.45;color:var(--acera)}
.lectura{max-width:680px}
.lectura h2{font-size:clamp(23px,2.6vw,28px);margin-top:44px}
.lectura p{margin-top:12px}
.lectura p:first-of-type{margin-top:14px}
.datos{margin-top:16px;border-top:1px solid var(--linea)}
.datos div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 24px;padding-block:12px;border-bottom:1px solid var(--linea)}
.datos dt{font-family:var(--titular);font-weight:800;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--acera)}
.datos dd{overflow-wrap:anywhere}
@media (min-width:640px){.datos div{grid-template-columns:200px minmax(0,1fr);align-items:baseline}}
.nota{margin-top:40px;font-size:15px;color:var(--acera)}

/* ── /marca/ ── */
.seccion{margin-top:clamp(48px,6vw,72px)}
.seccion>h2{font-size:clamp(26px,3vw,34px)}
.seccion>p{margin-top:10px;max-width:62ch;color:var(--acera)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin-top:22px}
.pieza{display:flex;flex-direction:column;min-width:0;background:#FFFFFF;border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.muestra{display:flex;align-items:center;justify-content:center;min-height:170px;padding:24px}
.muestra img{max-height:120px;width:auto}
.muestra-ancha img{width:100%;max-height:none}
.muestra .firma{width:140px}
.muestra-cal{background:var(--cal)}
.muestra-mahon{background:var(--mahon)}
.muestra-azulejo{background:var(--azulejo)}
.pieza-pie{padding:16px 18px 18px;border-top:1px solid var(--linea)}
.pieza-pie h3{font-size:18px}
.pieza-pie p{margin-top:4px;font-size:15px;color:var(--acera)}
.descargas{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-family:var(--titular);font-weight:600;font-size:15px;color:var(--acera)}
.descargas+.descargas{margin-top:4px}
.descargas a{color:var(--mahon)}
.colores{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:12px;margin-top:22px}
.color{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#FFFFFF}
.color-muestra{height:84px}
.color p{padding:10px 14px 12px;font-size:15px;line-height:1.35}
.color b{display:block;font-family:var(--titular);font-weight:800}
.c-mahon{background:#1F2B5B}
.c-minio{background:#CF3F28}
.c-cal{background:#FBF8F3;border-bottom:1px solid var(--linea)}
.c-azulejo{background:#E3E8F1}
.c-acera{background:#5E6272}
.c-minio-claro{background:#FF7556}
.nombre{margin-top:18px;display:grid;gap:12px;max-width:62ch}
.nombre p{font-size:clamp(19px,2vw,22px)}
.nombre .suave{font-size:16px;color:var(--acera)}

/* ── 404 ── */
.perdido h1{font-size:clamp(40px,7vw,72px)}
.perdido .acciones{margin-top:28px}
.perdido .nota{margin-top:28px;font-size:17px;max-width:48ch}

/* ── Pie ── */
.pie{padding-block:22px 28px;font-size:15px;border-top:1px solid var(--linea);color:var(--acera)}
.pie .envoltura{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.pie nav ul{display:flex;flex-wrap:wrap;gap:6px 22px}
.pie a{color:var(--mahon)}
.pie-puerta{background:var(--mahon);color:var(--cal-suave);border-top:1px solid rgba(251,248,243,.14)}
.pie-puerta a{color:var(--cal)}