/* Alsacia Chocolat · manual de marca v1.2: rojo manda, burdeos es tinta, crema de fondo; Anton + Work Sans */
:root{
  --rojo:#B71B0B; --burdeos:#640C0A; --crema:#F5ECDE; --rosa:#EBD5CD; --cacao:#977068; --fondo:#1C0504;
  --display:"Anton","Oswald","Arial Narrow",Impact,sans-serif;
  --texto:"Work Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--crema);color:var(--burdeos);font:400 17px/1.5 var(--texto);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.t{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.12;margin:0}
.m{font:600 12px/1.3 var(--texto);letter-spacing:.16em;text-transform:uppercase}
.envoltura{max-width:480px;margin:0 auto;padding:0 18px}

/* cabecera roja con la A */
.cabecera{background:var(--rojo);color:var(--crema);position:relative;overflow:hidden}
.cabecera .a-fondo{position:absolute;width:520px;max-width:none;right:-180px;top:-60px;opacity:.16;pointer-events:none}
.cabecera .envoltura{position:relative;padding-top:34px;padding-bottom:30px;display:grid;justify-items:center;text-align:center;gap:14px}
.cabecera .logo{width:150px}
.cabecera .m{opacity:.9}

/* botones */
.links{display:grid;gap:12px;padding:24px 0 8px}
.boton{display:grid;grid-template-columns:46px 1fr 20px;align-items:center;gap:14px;padding:16px 18px;text-decoration:none;border:2px solid var(--burdeos);background:#fff;color:var(--burdeos);transition:transform .15s ease}
.boton:hover{transform:translateY(-2px)}
.boton:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
.boton .ico{width:46px;height:46px;display:grid;place-items:center;background:var(--burdeos);color:var(--crema)}
.boton .ico svg{width:24px;height:24px}
.boton .titulo{font-family:var(--display);font-size:22px;line-height:1.1;text-transform:uppercase}
.boton .sub{font-size:14px;line-height:1.35;opacity:.8;margin-top:2px}
.boton .flecha{font-family:var(--display);font-size:20px}
.boton.principal{background:var(--rojo);border-color:var(--rojo);color:var(--crema)}
.boton.principal .ico{background:var(--crema);color:var(--rojo)}
.boton.oscuro{background:var(--burdeos);color:var(--crema)}
.boton.oscuro .ico{background:var(--crema);color:var(--burdeos)}

/* vitrinas */
.vitrinas{padding:22px 0 8px}
.vitrinas h2{font-size:30px;margin-bottom:12px}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vitrina{position:relative;aspect-ratio:1/1;overflow:hidden;max-width:100%}
.vitrina img{width:100%;height:100%;object-fit:cover}
.vitrina span{position:absolute;left:0;bottom:0;padding:8px 12px;font-family:var(--display);font-size:20px;text-transform:uppercase;color:var(--crema)}
.vitrina.ro span{background:var(--rojo)} .vitrina.rs span{background:var(--rosa);color:var(--burdeos)}
.vitrina.bu span{background:var(--burdeos)} .vitrina.rc span{background:var(--cacao)}
.nota{font-size:14px;margin:12px 0 0;opacity:.85}

.pie{text-align:center;padding:30px 0 40px;display:grid;gap:10px;justify-items:center}
.pie .icono{width:46px}
.pie p{margin:0;font-size:14px;opacity:.8}

/* portada en construcción */
.obra{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
.obra .foto{position:relative;max-height:46vh;overflow:hidden}
.obra .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.obra .texto{padding:28px 0 10px;display:grid;gap:14px}
.obra h1{font-size:clamp(44px,12vw,64px);color:var(--rojo)}
.obra p{margin:0;font-size:18px}
@media (prefers-reduced-motion:reduce){.boton{transition:none}}