/* Ultramarinos Carmencin — hoja única (v2).
   La pared es de azulejo blanco y sobre ella se pintan azulejos de patrón en azul y
   mostaza (los colores del logo). Rojo de la carpintería, suelo hidráulico abajo,
   la carta escrita a máquina. Sin fotos hasta que haya sesión propia. */

/* ---------- Fuentes (locales, OFL) ---------- */
@font-face { font-family: "League Gothic"; src: url("../assets/fonts/league-gothic.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-italic-var.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Variables ---------- */
:root {
  --rojo: #c01b22;
  --rojo-hondo: #9a1219;
  --mostaza: #e6c676;
  --azul: #2d4a9a;
  --azul-logo: #5564a5;
  --azul-noche: #1b2a55;
  --tinta: #1c1f2b;
  --tinta-suave: #4a4d5c;
  --azulejo: #f7f6f1;
  --loza: #f8f6f0;
  --junta: #e3e0d8;
  --crema: #f6ecd6;
  --papel: #fbf6ea;
  --hueso: #fff8ec;

  --f-cartel: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --f-texto: "Fraunces", Georgia, "Times New Roman", serif;
  --f-maquina: "Courier Prime", "Courier New", Courier, monospace;

  --envoltorio: min(100% - 2rem, 76rem);
  --estrecho: min(100% - 2rem, 46rem);
  --seccion: clamp(4.5rem, 10vw, 8rem);
  --tesela: clamp(56px, 7vw, 88px);
  --curva: cubic-bezier(.2, .7, .2, 1);
  --rapida: .2s;
  --sombra-dura: 4px 4px 0 var(--azul);
  --cabecera: 4.5rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera, 4rem) + 4rem); }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 380;
  color: var(--tinta);
  background: var(--azulejo);
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
/* Lo que entra de lado al revelarse no debe crear scroll horizontal; clip no rompe el sticky */
main, .pie { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--rojo); }
p, ul, ol, dl, figure, h1, h2, h3, address { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
address { font-style: normal; }
strong { font-weight: 620; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--mostaza); color: var(--tinta); }
[hidden] { display: none !important; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--tinta); color: var(--hueso); font-family: var(--f-maquina); }
.saltar:focus { top: 1rem; }
.envoltorio { width: var(--envoltorio); margin-inline: auto; }
.envoltorio--estrecho { width: var(--estrecho); margin-inline: auto; }
.i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- Superficies ---------- */
.azulejos {
  background-color: var(--azulejo);
  background-image:
    linear-gradient(to bottom, var(--junta) 0 2px, transparent 2px),
    linear-gradient(to right, var(--junta) 0 2px, transparent 2px),
    radial-gradient(120% 120% at 24% 20%, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 52%),
    linear-gradient(135deg, transparent 55%, rgb(28 31 43 / .028));
  background-size: var(--tesela) var(--tesela);
}
.hidraulico {
  background-color: #f3f1ea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%232d4a9a'%3E%3Cpath d='M0 0h24A24 24 0 0 1 0 24z'/%3E%3Cpath d='M48 0v24A24 24 0 0 1 24 0z'/%3E%3Cpath d='M0 48V24a24 24 0 0 1 24 24z'/%3E%3Cpath d='M48 48H24a24 24 0 0 1 24-24z'/%3E%3Ccircle cx='24' cy='24' r='3.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f3f1ea' stroke-width='1.6'%3E%3Ccircle r='14'/%3E%3Ccircle cx='48' r='14'/%3E%3Ccircle cy='48' r='14'/%3E%3Ccircle cx='48' cy='48' r='14'/%3E%3C/g%3E%3Cg fill='%23f3f1ea'%3E%3Ccircle r='5'/%3E%3Ccircle cx='48' r='5'/%3E%3Ccircle cy='48' r='5'/%3E%3Ccircle cx='48' cy='48' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 48px;
}
.franja-hidraulica { height: clamp(36px, 5vw, 56px); border-block: 4px solid var(--azul-noche); }

/* Zócalo de azulejos de patrón (bloque 2×2 ya girado en padron.svg) */
.zocalo {
  position: relative;
  height: calc(var(--tesela) * 2);
  background: var(--loza) url("../assets/img/padron.svg") 0 0 / calc(var(--tesela) * 2) calc(var(--tesela) * 2);
  border-block: 5px solid var(--azul);
  box-shadow: 0 -9px 0 -4px var(--mostaza), 0 9px 0 -4px var(--mostaza);
}
.zocalo::after, .loza-pintada::after {
  /* juntas por encima de lo pintado: así parece pintado sobre la pieza */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--junta) 0 2px, transparent 2px),
    linear-gradient(to right, var(--junta) 0 2px, transparent 2px);
  background-size: var(--tesela) var(--tesela);
  mix-blend-mode: multiply;
}
.zocalo::before, .loza-pintada::before {
  /* el brillo del vidriado, que no se multiplica */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(110% 110% at 22% 18%, rgb(255 255 255 / .42), rgb(255 255 255 / 0) 45%) 0 0 / var(--tesela) var(--tesela);
}

/* ---------- Tipografía de sistema ---------- */
.antetitulo {
  font-family: var(--f-maquina);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.antetitulo::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; flex: none; }
.titulo {
  font-family: var(--f-cartel);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.75rem, 6.2vw, 5rem);
  line-height: .92;
  letter-spacing: .01em;
  color: var(--rojo);
  text-shadow: .045em .045em 0 var(--azul-logo);
  text-wrap: balance;
}
.titulo em {
  display: block;
  margin-top: .32em;
  font-family: var(--f-texto);
  font-style: italic;
  font-weight: 460;
  text-transform: none;
  letter-spacing: 0;
  font-size: .44em;
  line-height: 1.1;
  color: var(--azul);
  text-shadow: none;
}
.entradilla { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 36rem; }
.prosa { max-width: 36rem; }
.prosa > * + * { margin-top: 1.05em; }
.titulo + .prosa, .titulo + .entradilla, .titulo + .acciones { margin-top: 1.4rem; }
.nota-maquina { font-family: var(--f-maquina); font-size: .9375rem; line-height: 1.5; color: var(--tinta-suave); }

/* Por confirmar: anotación a lápiz que ve el cliente en la demo */
.por-confirmar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  border: 1.5px dashed var(--azul);
  border-radius: 4px;
  background: rgb(255 255 255 / .7);
  font-family: var(--f-maquina);
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--azul);
}
.por-confirmar::before { content: "✎"; font-size: 1rem; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.1rem;
  padding: .55rem 1.35rem .45rem;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  font-family: var(--f-cartel);
  font-size: 1.375rem;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  color: var(--tinta);
  background: var(--hueso);
  box-shadow: var(--sombra-dura);
  transition: transform var(--rapida) var(--curva), box-shadow var(--rapida) var(--curva), background-color var(--rapida);
}
.boton:hover { color: inherit; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--azul); }
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--azul); }
.boton .i { width: 1.05rem; height: 1.05rem; margin-top: -.15rem; }
.boton--rojo { background: var(--rojo); color: var(--hueso); border-color: var(--rojo-hondo); }
.boton--rojo:hover { color: var(--hueso); background: #ce2129; }
.boton--peq { min-height: 2.5rem; padding: .4rem .9rem .3rem; font-size: 1.125rem; box-shadow: 3px 3px 0 var(--azul); }
.boton--peq:hover { box-shadow: 4px 4px 0 var(--azul); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.1rem; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-maquina);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rojo);
  border-bottom: 2px solid currentColor;
  padding-bottom: .15rem;
}
.enlace-flecha::after { content: "→"; transition: transform var(--rapida) var(--curva); }
.enlace-flecha:hover { color: var(--rojo-hondo); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ---------- Logo (el SVG del cliente, recoloreable) ---------- */
.logo { width: 100%; height: auto; overflow: visible; }
.logo-letras { fill: var(--logo-letras, var(--rojo)); }
.logo-sombra { fill: var(--logo-sombra, var(--azul-logo)); }

/* ---------- Aviso ---------- */
.aviso { display: block; background: var(--azul-noche); color: var(--hueso); text-decoration: none; font-family: var(--f-maquina); font-size: .875rem; line-height: 1.4; }
.aviso:hover { color: var(--mostaza); }
.aviso-texto { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem .9rem; padding-block: .55rem; text-align: center; }
.aviso-cta { font-weight: 700; color: var(--mostaza); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(247 246 241 / .94);
  border-bottom: 3px solid transparent;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
@supports (backdrop-filter: blur(1px)) {
  .cabecera { background: rgb(247 246 241 / .84); backdrop-filter: blur(10px) saturate(1.2); }
}
.cabecera.compacta { border-color: var(--rojo); box-shadow: 0 10px 24px -20px rgb(27 42 85 / .55); }
.cabecera-fila { display: flex; align-items: center; gap: 1rem; min-height: var(--cabecera); transition: min-height .25s var(--curva); }
.cabecera.compacta .cabecera-fila { min-height: 3.75rem; }
.marca { display: block; width: clamp(7.4rem, 15vw, 9.6rem); margin-right: auto; text-decoration: none; transition: transform .3s var(--curva), width .3s var(--curva); }
.cabecera.compacta .marca { width: 6.9rem; }
.marca:hover { transform: rotate(-2deg) scale(1.03); }
.nav { display: none; }
.nav-lista { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav-lista a { position: relative; font-family: var(--f-cartel); font-size: 1.4rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding-block: .3rem; }
.nav-lista a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva); }
.nav-lista a:hover::after, .nav-lista a[aria-current="page"]::after { transform: scaleX(1); }
.nav-lista a[aria-current="page"] { color: var(--rojo); }
.cabecera-cta { display: none; }
.cabecera .estado { display: none; }

.menu-boton { display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--tinta); border-radius: 6px; background: var(--hueso); box-shadow: 3px 3px 0 var(--azul); cursor: pointer; }
.menu-boton-barras, .menu-boton-barras::before, .menu-boton-barras::after { display: block; width: 1.3rem; height: 2px; background: var(--tinta); transition: transform .3s var(--curva), opacity .2s; }
.menu-boton-barras { position: relative; }
.menu-boton-barras::before, .menu-boton-barras::after { content: ""; position: absolute; left: 0; }
.menu-boton-barras::before { top: -6px; }
.menu-boton-barras::after { top: 6px; }
.menu-abierto .menu-boton-barras { background: transparent; }
.menu-abierto .menu-boton-barras::before { transform: translateY(6px) rotate(45deg); }
.menu-abierto .menu-boton-barras::after { transform: translateY(-6px) rotate(-45deg); }

.menu-movil { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; padding: calc(var(--cabecera) + 2rem) 1.25rem 0; background: var(--rojo); color: var(--hueso); overflow-y: auto; }
.menu-abierto { overflow: hidden; }
.menu-abierto .cabecera { background: var(--azulejo); }
.menu-abierto .aviso { display: none; }
.menu-movil-lista { display: grid; gap: .2rem; }
.menu-movil-lista a { display: flex; align-items: baseline; gap: 1rem; font-family: var(--f-cartel); font-size: clamp(3rem, 15vw, 4.4rem); line-height: 1.02; text-transform: uppercase; text-decoration: none; color: var(--hueso); text-shadow: .04em .04em 0 var(--azul-logo); }
.menu-movil-lista a[aria-current="page"] { color: var(--mostaza); }
.menu-movil-lista .n { font-family: var(--f-maquina); font-size: .9rem; text-shadow: none; color: var(--mostaza); }
.menu-movil-pie { margin-top: auto; padding-block: 2rem 1.5rem; font-family: var(--f-maquina); font-size: .9375rem; }
.menu-movil-pie a { color: var(--hueso); }
.menu-movil .franja-hidraulica { margin-inline: -1.25rem; height: 5rem; }
@media (prefers-reduced-motion: no-preference) {
  .menu-movil:not([hidden]) .menu-movil-lista li { animation: subir .5s var(--curva) both; }
  .menu-movil:not([hidden]) .menu-movil-lista li:nth-child(2) { animation-delay: .05s; }
  .menu-movil:not([hidden]) .menu-movil-lista li:nth-child(3) { animation-delay: .1s; }
  .menu-movil:not([hidden]) .menu-movil-lista li:nth-child(4) { animation-delay: .15s; }
  .menu-movil:not([hidden]) .menu-movil-lista li:nth-child(5) { animation-delay: .2s; }
}

/* ---------- Estado abierto / cerrado ---------- */
.estado { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-maquina); font-size: .875rem; font-weight: 700; opacity: 0; transition: opacity .3s; }
.estado.listo { opacity: 1; }
.estado-punto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--tinta-suave); flex: none; }
.estado.abierto .estado-punto { background: #2f8a4c; box-shadow: 0 0 0 4px rgb(47 138 76 / .18); }

/* ---------- Azulejos de patrón ---------- */
.loza-pintada { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 6), var(--tesela)); grid-auto-rows: var(--tesela); width: max-content; isolation: isolate; }
.pieza { display: block; width: var(--tesela); height: var(--tesela); transform: rotate(var(--r, 0deg)); }
.pieza svg { width: 100%; height: 100%; }
.loza-brillo { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.loza-brillo::before {
  /* una pasada de luz sobre el vidriado, una sola vez */
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 43%, rgb(255 255 255 / .5) 50%, transparent 57%);
  transform: translateX(-100%);
}
.pieza--falta {
  /* el hueco del azulejo caído: mortero */
  transform: none;
  background:
    radial-gradient(circle at 30% 40%, rgb(0 0 0 / .08) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 20%, rgb(255 255 255 / .35) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
    #cdc6b8;
  box-shadow: inset 4px 4px 8px rgb(0 0 0 / .22), inset -2px -2px 0 rgb(255 255 255 / .3);
}

/* Portada: el rótulo de azulejos incrustado en la pared */
.portada { position: relative; }
.portada-rejilla { display: grid; }
.portada-texto { display: grid; align-content: center; gap: 1.4rem; padding-block: 2.2rem 3.2rem; }
.portada-texto .antetitulo { margin-bottom: 0; }
.portada-titulo { font-family: var(--f-cartel); font-weight: 400; text-transform: uppercase; font-size: clamp(3.6rem, 11vw, 7.6rem); line-height: .86; color: var(--rojo); text-shadow: .04em .04em 0 var(--azul-logo); }
.portada-titulo .linea { display: block; }
.portada-titulo em { display: block; margin-top: .3em; font-family: var(--f-texto); font-style: italic; font-weight: 460; font-size: .31em; line-height: 1.15; text-transform: none; color: var(--azul); text-shadow: none; }
.portada-entradilla { font-size: clamp(1.0625rem, 1.5vw, 1.2rem); max-width: 31rem; }
.portada-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.portada-pie .sello { --tam: 6rem; }

.panel { --cols: 6; }
.panel-cartela {
  --t: var(--tesela);
  position: absolute;
  z-index: 2;
  left: var(--t);
  top: var(--t);
  width: calc(var(--t) * 4);
  height: calc(var(--t) * 3);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--t) * .14);
  padding: calc(var(--t) * .3);
  background:
    radial-gradient(circle at 0 0, var(--mostaza) 0 calc(var(--t) * .17), var(--azul) calc(var(--t) * .17 + 1px) calc(var(--t) * .17 + 3px), transparent calc(var(--t) * .17 + 4px)),
    radial-gradient(circle at 100% 0, var(--mostaza) 0 calc(var(--t) * .17), var(--azul) calc(var(--t) * .17 + 1px) calc(var(--t) * .17 + 3px), transparent calc(var(--t) * .17 + 4px)),
    radial-gradient(circle at 0 100%, var(--mostaza) 0 calc(var(--t) * .17), var(--azul) calc(var(--t) * .17 + 1px) calc(var(--t) * .17 + 3px), transparent calc(var(--t) * .17 + 4px)),
    radial-gradient(circle at 100% 100%, var(--mostaza) 0 calc(var(--t) * .17), var(--azul) calc(var(--t) * .17 + 1px) calc(var(--t) * .17 + 3px), transparent calc(var(--t) * .17 + 4px)),
    var(--loza);
  box-shadow:
    inset 0 0 0 calc(var(--t) * .1) var(--loza),
    inset 0 0 0 calc(var(--t) * .1 + 3px) var(--azul),
    inset 0 0 0 calc(var(--t) * .1 + 7px) var(--loza),
    inset 0 0 0 calc(var(--t) * .1 + 8.5px) var(--azul);
}
.panel-cartela .logo { width: calc(var(--t) * 3.15); }
.panel-lema { font-family: var(--f-maquina); font-weight: 700; font-size: clamp(.6rem, calc(var(--t) * .14), .84rem); letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--azul); text-align: center; }

/* Mosaico decorativo de las páginas interiores y la 404 */
.mosaico { --cols: 3; }

/* Sello circular (Solete, precio) */
.sello { position: relative; display: inline-grid; place-items: center; width: var(--tam, 7.5rem); aspect-ratio: 1; flex: none; color: var(--rojo); text-decoration: none; }
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sello-aro { fill: none; stroke: currentColor; stroke-width: 2; }
.sello-texto { font-family: var(--f-maquina); font-weight: 700; font-size: 15.5px; letter-spacing: .16em; text-transform: uppercase; fill: currentColor; }
.sello-centro { position: relative; display: grid; justify-items: center; font-family: var(--f-cartel); text-transform: uppercase; line-height: .95; text-align: center; }
.sello .sello-sol { position: static; width: 2.3rem; height: 2.3rem; color: var(--mostaza); fill: currentColor; }
a.sello:hover { color: var(--rojo-hondo); }
@media (prefers-reduced-motion: no-preference) {
  .sello--gira svg { animation: girar 28s linear infinite; }
  a.sello:hover svg { animation-duration: 8s; }
}

/* ---------- Secciones ---------- */
.seccion { position: relative; padding-block: var(--seccion); }
.seccion--crema { background: var(--crema); }
.seccion--noche { background: var(--azul-noche); color: var(--hueso); }
.seccion--noche .antetitulo { color: var(--mostaza); }
.seccion--noche .titulo { color: var(--hueso); text-shadow: .045em .045em 0 var(--rojo); }
.seccion--noche .titulo em { color: var(--mostaza); }
.seccion--noche a:not(.boton):hover { color: var(--mostaza); }
.seccion--noche .enlace-flecha { color: var(--mostaza); }
.seccion-cabecera { display: grid; gap: 1.2rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* Inicio · Laterío: etiqueta plana, azul y oro como las latas */
.laterio-rejilla { display: grid; gap: 3rem; align-items: center; }
.laterio-rejilla .por-confirmar { margin-top: 1.6rem; }
.etiqueta-lata {
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 2.8rem);
  background: radial-gradient(120% 80% at 30% 0, #3a5bb0, var(--azul) 60%, #243f86);
  color: var(--hueso);
  border-radius: 8px;
  box-shadow: inset 0 0 0 7px var(--azul), inset 0 0 0 9px var(--mostaza), inset 0 0 0 13px var(--azul), inset 0 0 0 14px rgb(230 198 118 / .55), 0 30px 50px -30px rgb(27 42 85 / .7);
}
.etiqueta-lata-marca { font-family: var(--f-maquina); font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mostaza); text-align: center; }
.etiqueta-lata-titulo { margin: .3rem 0 1.6rem; font-family: var(--f-texto); font-style: italic; font-weight: 520; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; text-align: center; color: var(--hueso); font-variation-settings: "WONK" 1; }
.etiqueta-lata-lista { display: grid; gap: .1rem; border-top: 1.5px solid rgb(230 198 118 / .5); padding-top: 1rem; }
.etiqueta-lata-lista a { display: flex; align-items: baseline; gap: .6rem; padding-block: .38rem; font-family: var(--f-maquina); font-size: 1rem; text-decoration: none; }
.etiqueta-lata-lista a:hover { color: var(--mostaza); }
.etiqueta-lata-lista .lider { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgb(230 198 118 / .55); transform: translateY(-.3em); }
.etiqueta-lata-lista .precio { font-weight: 700; color: var(--mostaza); white-space: nowrap; }

/* Inicio · Lo que hay que pedir: fichas en la balda roja */
.estante { display: grid; gap: 1.6rem 1.4rem; }
.estante-item { display: grid; }
.tarjeta-plato {
  position: relative;
  display: grid;
  align-content: start;
  gap: .5rem;
  min-height: 15rem;
  padding: calc(2.2rem + 1.4rem) 1.4rem 1.6rem;
  background: var(--hueso);
  border: 2px solid var(--tinta);
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
.tarjeta-plato::before {
  /* una tira de azulejo de patrón en la cabeza de cada ficha */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2.2rem;
  background: var(--loza) url("../assets/img/padron.svg") 0 50% / 4.4rem 4.4rem;
  border-bottom: 2px solid var(--tinta);
}
.tarjeta-plato:hover { color: inherit; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--rojo); }
.tarjeta-n { font-family: var(--f-cartel); font-size: 3rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--azul); }
.tarjeta-nombre { font-family: var(--f-texto); font-style: italic; font-weight: 540; font-size: 1.5rem; line-height: 1.12; color: var(--azul); font-variation-settings: "WONK" 1; }
.tarjeta-cat { font-family: var(--f-maquina); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.tarjeta-nota { font-size: .95rem; font-style: italic; color: var(--tinta-suave); }
.tarjeta-precio { position: absolute; z-index: 2; top: 1.2rem; right: .9rem; padding: .3rem .6rem .25rem .9rem; background: var(--mostaza); color: var(--tinta); font-family: var(--f-maquina); font-weight: 700; font-size: .95rem; clip-path: polygon(.5rem 0, 100% 0, 100% 100%, .5rem 100%, 0 50%); transform: rotate(4deg); }
.estante-balda { height: 14px; margin-top: 1.4rem; background: var(--rojo); box-shadow: 0 4px 0 var(--rojo-hondo), 0 16px 18px -10px rgb(0 0 0 / .4); border-radius: 2px; }
.estante-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.4rem; }

/* Sugerencias: el cartel de rayas de su Instagram */
.toldo { padding: clamp(14px, 2.4vw, 22px); background: repeating-linear-gradient(90deg, var(--rojo) 0 20px, var(--hueso) 20px 40px); box-shadow: 0 22px 40px -18px rgb(0 0 0 / .45); }
.toldo-tarjeta { position: relative; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.3rem, 4vw, 2.6rem); background: var(--papel); border: 3px solid var(--azul); border-radius: 10px; box-shadow: inset 0 0 0 5px var(--papel), inset 0 0 0 6.5px var(--azul); color: var(--azul); text-align: center; }
.toldo-ante { font-family: var(--f-maquina); font-weight: 700; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; }
.toldo-titulo { margin: .3rem 0 1.2rem; font-family: var(--f-texto); font-style: italic; font-weight: 520; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; font-variation-settings: "WONK" 1; }
.toldo-lista { display: grid; gap: 1rem; }
.toldo-lista li { font-family: var(--f-cartel); font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; }
.toldo-lista small { display: block; margin-top: .3rem; font-family: var(--f-maquina); font-size: .8rem; letter-spacing: .02em; text-transform: none; color: var(--tinta-suave); }
.toldo-nota { margin-top: 1.4rem; font-style: italic; color: var(--tinta-suave); font-size: 1rem; }

.vermut-rejilla { display: grid; gap: 3.5rem; align-items: center; }
.vermut-texto .enlace-flecha { margin-top: 1.8rem; }

/* Menú de grupos (ticket) */
.grupos-rejilla { display: grid; gap: 3rem; align-items: center; }
.menu-grupo { position: relative; padding: clamp(1.6rem, 4vw, 2.6rem); background: var(--papel); border: 2px solid var(--tinta); box-shadow: 8px 8px 0 var(--azul); transform: rotate(-1.2deg); }
.menu-grupo::before { content: ""; position: absolute; left: -2px; right: -2px; top: -9px; height: 9px; background: radial-gradient(circle at 6px 9px, var(--tinta) 0 4px, transparent 4.5px) 0 0 / 14px 9px repeat-x; }
.menu-grupo-nombre { font-family: var(--f-texto); font-style: italic; font-weight: 560; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--azul); font-variation-settings: "WONK" 1; }
.menu-grupo-lema { margin-top: .5rem; font-family: var(--f-cartel); font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; }
.menu-grupo-lista { counter-reset: plato; display: grid; gap: .55rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px dashed var(--tinta); font-family: var(--f-maquina); font-size: 1rem; }
.menu-grupo-lista li { counter-increment: plato; display: grid; grid-template-columns: 2rem 1fr; }
.menu-grupo-lista li::before { content: counter(plato, decimal-leading-zero); color: var(--rojo); font-weight: 700; }
.menu-grupo-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 2px dashed var(--tinta); font-family: var(--f-maquina); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
.menu-grupo .sello { position: absolute; top: -3rem; right: -.4rem; --tam: 6.4rem; color: var(--hueso); }
.menu-grupo .sello::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--rojo); box-shadow: 0 10px 18px -8px rgb(0 0 0 / .5); }
.sello-precio { font-size: 2.4rem; color: var(--hueso); }

/* Horario y reserva */
.visita-rejilla { display: grid; gap: 3rem; }
.horario { display: grid; border-top: 2px solid var(--tinta); font-family: var(--f-maquina); }
.horario-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem .25rem; border-bottom: 1px dashed rgb(28 31 43 / .35); }
.horario-fila dt { font-weight: 700; text-transform: capitalize; display: flex; gap: .6rem; align-items: center; }
.horario-fila dd { margin: 0; text-align: right; }
.horario-fila--cerrado dd { color: var(--rojo); font-weight: 700; }
.horario-sep { color: var(--tinta-suave); }
.horario-fila.es-hoy { background: var(--hueso); box-shadow: inset 4px 0 0 var(--rojo); padding-left: .8rem; }
.hoy { padding: .05rem .4rem; border-radius: 3px; background: var(--rojo); color: var(--hueso); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.tarjeta-reserva { display: grid; gap: 1.3rem; align-content: start; padding: clamp(1.6rem, 4vw, 2.4rem); background: var(--hueso); border: 2px solid var(--tinta); border-radius: 10px; box-shadow: 8px 8px 0 var(--rojo); }
.tarjeta-titulo { font-family: var(--f-cartel); font-weight: 400; font-size: 2.6rem; line-height: .95; text-transform: uppercase; color: var(--rojo); text-shadow: .045em .045em 0 var(--azul-logo); }
.tarjeta-reserva address { font-family: var(--f-maquina); font-size: .95rem; line-height: 1.5; }
.acciones-col { display: grid; gap: .9rem; }
.acciones-col .boton { width: 100%; }

/* Prensa */
.prensa { display: grid; gap: 1rem; }
.prensa-item a { display: grid; gap: .3rem; height: 100%; padding: 1.2rem 1.3rem; border: 2px solid var(--tinta); border-radius: 10px; background: var(--hueso); text-decoration: none; transition: transform var(--rapida) var(--curva), box-shadow var(--rapida); }
.prensa-item a:hover { color: inherit; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--azul); }
.prensa-medio { font-family: var(--f-cartel); font-size: 1.7rem; line-height: 1; text-transform: uppercase; color: var(--rojo); }
.prensa-titulo { font-size: .98rem; line-height: 1.35; }
.prensa-cita { font-family: var(--f-maquina); font-size: .85rem; color: var(--tinta-suave); }

/* ---------- Páginas interiores ---------- */
.pagina-cabecera { position: relative; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }
.pagina-cabecera-rejilla { display: grid; gap: 2rem; align-items: end; }
.pagina-cabecera > .mosaico { display: none; }
.pagina-titulo { font-family: var(--f-cartel); font-weight: 400; text-transform: uppercase; font-size: clamp(4rem, 13vw, 8.6rem); line-height: .85; color: var(--rojo); text-shadow: .04em .04em 0 var(--azul-logo); }
.pagina-titulo em { display: block; margin-top: .25em; font-family: var(--f-texto); font-style: italic; font-weight: 460; text-transform: none; font-size: .3em; line-height: 1.15; color: var(--azul); text-shadow: none; }
.pagina-cabecera .entradilla { margin-top: 1.4rem; }
.pagina-cabecera .por-confirmar { margin-top: 1.4rem; }

/* Índice de capítulos (carta): justo debajo de la cabecera, sin cortes */
.indice { position: sticky; top: var(--alto-cabecera, 3.9rem); z-index: 20; background: rgb(247 246 241 / .96); border-bottom: 2px solid var(--tinta); box-shadow: 0 10px 20px -18px rgb(27 42 85 / .6); }
.indice-lista {
  display: flex;
  gap: .5rem;
  width: var(--envoltorio);
  margin-inline: auto;
  padding-block: .7rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.indice-lista::-webkit-scrollbar { display: none; }
.indice-lista li { flex: none; }
.indice-lista li:last-child { padding-right: 2rem; }
.indice-lista a { display: block; padding: .35rem .8rem .3rem; border: 1.5px solid var(--tinta); border-radius: 999px; font-family: var(--f-maquina); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color var(--rapida), color var(--rapida); }
.indice-lista a:hover { background: var(--hueso); color: var(--rojo); }
.indice-lista a.activo { background: var(--rojo); border-color: var(--rojo); color: var(--hueso); }

/* La carta: hoja de papel escrita a máquina */
.carta-rejilla { display: grid; gap: 3rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--seccion); }
.carta-lateral { display: grid; gap: 2rem; align-content: start; }
.hoja { position: relative; padding: clamp(1.6rem, 5vw, 3.6rem) clamp(1.1rem, 5vw, 3.6rem); background: var(--papel); box-shadow: 0 0 0 1px rgb(28 31 43 / .08), 0 30px 50px -30px rgb(27 42 85 / .5); }
.hoja::before { content: ""; position: absolute; inset: 0 0 auto; height: 12px; background: repeating-linear-gradient(90deg, var(--rojo) 0 28px, var(--hueso) 28px 56px); }
.capitulo + .capitulo { margin-top: clamp(2.6rem, 6vw, 4rem); padding-top: clamp(2.6rem, 6vw, 4rem); border-top: 2px dashed rgb(28 31 43 / .4); }
.capitulo { scroll-margin-top: calc(var(--alto-cabecera, 4rem) + 4.5rem); }
.capitulo-cabecera { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: end; margin-bottom: 1.6rem; }
.capitulo-n { grid-row: span 2; font-family: var(--f-cartel); font-size: 4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--azul); }
.capitulo-titulo { font-family: var(--f-cartel); font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.2rem); line-height: .95; text-transform: uppercase; color: var(--rojo); text-shadow: .045em .045em 0 var(--azul-logo); }
.capitulo-sub { font-family: var(--f-maquina); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.platos { display: grid; gap: .1rem; }
.plato { padding-block: .6rem; scroll-margin-top: calc(var(--alto-cabecera, 4rem) + 5rem); }
.plato:target { background: rgb(230 198 118 / .3); box-shadow: -.6rem 0 0 rgb(230 198 118 / .3), .6rem 0 0 rgb(230 198 118 / .3); }
.plato-linea { display: flex; align-items: baseline; gap: .6rem; }
.plato-nombre { font-family: var(--f-maquina); font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.plato-lider { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted rgb(28 31 43 / .45); transform: translateY(-.3em); }
.plato-precio { font-family: var(--f-maquina); font-weight: 700; font-size: 1.02rem; white-space: nowrap; color: var(--rojo); }
.plato-desc { margin-top: .15rem; font-style: italic; font-size: .98rem; color: var(--tinta-suave); }
.plato-alergenos { display: flex; gap: .3rem; margin-top: .35rem; }
.plato-alergenos img { width: 20px; height: 20px; }
.barra-lista { display: grid; gap: 1rem; }
.barra-lista li { padding-left: 1.4rem; position: relative; }
.barra-lista li::before { content: "✦"; position: absolute; left: 0; top: .1rem; color: var(--rojo); font-size: .8rem; }
.barra-lista strong { font-family: var(--f-maquina); font-weight: 700; display: block; }
.leyenda { padding-block: var(--seccion); }
.leyenda-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .8rem 1.4rem; margin-top: 1.6rem; font-family: var(--f-maquina); font-size: .9rem; }
.leyenda-lista li { display: flex; align-items: center; gap: .6rem; }
.leyenda-lista img { width: 24px; height: 24px; }

/* Grupos */
.pasos { display: grid; gap: 1.6rem; counter-reset: paso; }
.paso { counter-increment: paso; position: relative; padding: 1.6rem 1.4rem 1.5rem 4.6rem; background: var(--hueso); border: 2px solid var(--tinta); border-radius: 10px; }
.paso::before { content: counter(paso); position: absolute; left: 1.2rem; top: 1.1rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--rojo); color: var(--hueso); font-family: var(--f-cartel); font-size: 1.7rem; line-height: 1; box-shadow: 3px 3px 0 var(--azul); }
.paso h3 { font-family: var(--f-cartel); font-weight: 400; font-size: 1.9rem; line-height: 1; text-transform: uppercase; color: var(--rojo); }
.paso p { margin-top: .5rem; }
.cierre-grupos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cierre-grupos p { font-family: var(--f-texto); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; color: var(--azul); }

/* La casa */
.historia-rejilla { display: grid; gap: 3rem; }
.inventario { counter-reset: inv; border-top: 2px solid var(--tinta); font-family: var(--f-maquina); }
.inventario li { counter-increment: inv; display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem; padding: .9rem .2rem; border-bottom: 1px dashed rgb(28 31 43 / .4); }
.inventario li::before { content: counter(inv, decimal-leading-zero); color: var(--rojo); font-weight: 700; }
.inventario strong { font-weight: 700; display: block; color: var(--tinta); }
.inventario li > span > span { color: var(--tinta-suave); font-size: .92rem; }
.despensa { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; }
.etiqueta { position: relative; padding: 1.3rem 1.3rem 1.2rem 1.7rem; background: var(--papel); border: 2px solid var(--tinta); border-radius: 4px 14px 14px 4px; transition: transform .3s var(--curva); }
.etiqueta::before { content: ""; position: absolute; left: .55rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%; border: 2px solid var(--tinta); background: var(--azulejo); }
.etiqueta:hover { transform: rotate(-1.5deg); }
.etiqueta .etiqueta-nombre { font-family: var(--f-cartel); font-size: 1.7rem; line-height: 1; text-transform: uppercase; color: var(--rojo); }
.etiqueta .etiqueta-origen { margin-top: .35rem; font-family: var(--f-maquina); font-size: .85rem; letter-spacing: .04em; color: var(--azul); }
.etiqueta p:not([class]) { margin-top: .5rem; font-size: .98rem; }

/* Visítanos: la placa de la calle, en azulejo como las de aquí */
.placa {
  --t: clamp(64px, 10vw, 104px);
  --tesela: var(--t);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  width: calc(var(--t) * 4);
  height: calc(var(--t) * 2);
  padding: calc(var(--t) * .2);
  background:
    radial-gradient(circle at 0 0, var(--mostaza) 0 calc(var(--t) * .2), var(--azul) calc(var(--t) * .2 + 1px) calc(var(--t) * .2 + 3px), transparent calc(var(--t) * .2 + 4px)),
    radial-gradient(circle at 100% 0, var(--mostaza) 0 calc(var(--t) * .2), var(--azul) calc(var(--t) * .2 + 1px) calc(var(--t) * .2 + 3px), transparent calc(var(--t) * .2 + 4px)),
    radial-gradient(circle at 0 100%, var(--mostaza) 0 calc(var(--t) * .2), var(--azul) calc(var(--t) * .2 + 1px) calc(var(--t) * .2 + 3px), transparent calc(var(--t) * .2 + 4px)),
    radial-gradient(circle at 100% 100%, var(--mostaza) 0 calc(var(--t) * .2), var(--azul) calc(var(--t) * .2 + 1px) calc(var(--t) * .2 + 3px), transparent calc(var(--t) * .2 + 4px)),
    var(--loza);
  box-shadow:
    inset 0 0 0 calc(var(--t) * .08) var(--loza),
    inset 0 0 0 calc(var(--t) * .08 + 4px) var(--azul),
    inset 0 0 0 calc(var(--t) * .08 + 8px) var(--loza),
    inset 0 0 0 calc(var(--t) * .08 + 9.5px) var(--azul),
    0 24px 40px -24px rgb(27 42 85 / .5);
  color: var(--azul);
  text-align: center;
}
.placa::after {
  /* juntas de la placa (dos filas de cuatro piezas) */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--junta) 0 2px, transparent 2px), linear-gradient(to bottom, var(--junta) 0 2px, transparent 2px);
  background-size: var(--t) var(--t);
  background-position: -1px -1px;
  mix-blend-mode: multiply;
}
.placa-via { font-family: var(--f-maquina); font-weight: 700; font-size: calc(var(--t) * .15); letter-spacing: .3em; text-transform: uppercase; }
.placa-nombre { font-family: var(--f-cartel); font-size: calc(var(--t) * .6); line-height: .95; letter-spacing: .04em; text-transform: uppercase; }
.placa-zona { margin-top: calc(var(--t) * .06); font-family: var(--f-texto); font-style: italic; font-size: calc(var(--t) * .17); }
.placa-numero { position: absolute; z-index: 1; right: calc(var(--t) * -.42); bottom: calc(var(--t) * -.42); display: grid; place-items: center; width: var(--t); height: var(--t); background: var(--loza); box-shadow: inset 0 0 0 calc(var(--t) * .07) var(--loza), inset 0 0 0 calc(var(--t) * .07 + 3px) var(--rojo), 0 14px 24px -14px rgb(0 0 0 / .45); font-family: var(--f-cartel); font-size: calc(var(--t) * .58); line-height: 1; color: var(--rojo); }
.servicios { display: flex; flex-wrap: wrap; gap: .6rem; }
.servicios li { padding: .4rem .85rem .35rem; border: 2px solid var(--tinta); border-radius: 999px; background: var(--hueso); font-family: var(--f-maquina); font-weight: 700; font-size: .85rem; }
.redes { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; font-family: var(--f-maquina); font-weight: 700; }
.redes a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.redes a:hover { text-decoration: underline; }

/* Legales */
.pagina-legal { padding-block: 2rem var(--seccion); }
.pagina-legal h2 { margin: 2.4rem 0 .8rem; font-family: var(--f-cartel); font-weight: 400; font-size: 1.9rem; line-height: 1; text-transform: uppercase; color: var(--rojo); }
.pagina-legal p + p, .pagina-legal p + ul, .pagina-legal ul + p { margin-top: .9rem; }
.pagina-legal ul { padding-left: 1.2rem; display: grid; gap: .3rem; }

/* 404 */
.vacia { display: grid; gap: 2rem; justify-items: center; text-align: center; padding-block: var(--seccion); }
.vacia .mosaico { --tesela: clamp(52px, 14vw, 84px); --cols: 5; box-shadow: 0 0 0 2px var(--junta); }

/* ---------- Pie ---------- */
.pie { background: var(--rojo); color: var(--hueso); --logo-letras: var(--mostaza); --logo-sombra: var(--azul-logo); }
.pie a { color: var(--hueso); }
.pie a:hover { color: var(--mostaza); }
.pie-rejilla { display: grid; gap: 2.6rem; padding-block: 4rem 3rem; }
.pie-marca .logo { max-width: 16rem; }
.pie-lema { margin-top: 1.4rem; font-style: italic; font-size: 1.15rem; max-width: 20rem; }
.pie-titulo { margin-bottom: 1rem; font-family: var(--f-cartel); font-weight: 400; font-size: 1.6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mostaza); }
.pie-dir, .pie-horario, .pie-nav { font-family: var(--f-maquina); font-size: .92rem; line-height: 1.6; display: grid; gap: .25rem; }
.pie-nav a { text-decoration: none; }
.pie-nav a:hover { text-decoration: underline; }
.pie-legal-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.4rem 6.5rem; border-top: 1px solid rgb(255 248 236 / .3); font-family: var(--f-maquina); font-size: .82rem; }
.pie-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pie-vinilo { padding-block: 2rem 0; font-style: italic; font-weight: 600; font-size: clamp(1.4rem, 4vw, 2.4rem); line-height: 1.1; text-align: center; color: var(--mostaza); font-variation-settings: "WONK" 1; }

/* Barra fija móvil */
.barra-movil { position: fixed; left: .6rem; right: .6rem; bottom: max(.6rem, env(safe-area-inset-bottom)); z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--tinta); border-radius: 10px; overflow: hidden; background: var(--hueso); box-shadow: 4px 4px 0 var(--azul), 0 12px 30px -10px rgb(0 0 0 / .35); }
.barra-movil a { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .55rem .3rem .45rem; font-family: var(--f-cartel); font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; line-height: 1; }
.barra-movil a + a { border-left: 2px solid var(--tinta); }
.barra-movil a:first-child { background: var(--rojo); color: var(--hueso); }
.barra-movil .i { width: 1.2rem; height: 1.2rem; }
.menu-abierto .barra-movil { display: none; }

/* ---------- Revelado al hacer scroll ---------- */
.js [data-revela] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--curva), transform .8s var(--curva); }
.js [data-revela].visible { opacity: 1; transform: none; }

/* ---------- Coreografía ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* las piezas aparecen en una ola suave en diagonal y luego pasa la luz por el vidriado */
  .js .loza-pintada .pieza:not(.pieza--falta) { animation: aparecer .8s ease-out both; animation-delay: calc(var(--i) * 60ms + .1s); }
  .js .loza-brillo::before { animation: brillo 1.8s cubic-bezier(.45, 0, .25, 1) 1.5s both; }
  .js .panel-cartela { animation: pintar 1.1s cubic-bezier(.6, 0, .3, 1) 1s both; }
  .js .panel-cartela .logo-sombra { animation: sombra .7s var(--curva) 1.9s both; }

  .portada-texto > * { animation: subir .9s var(--curva) both; }
  .portada-texto > :nth-child(1) { animation-delay: .1s; }
  .portada-texto > :nth-child(2) { animation: none; }
  .portada-titulo .linea { animation: subir .9s var(--curva) both; }
  .portada-titulo .linea:nth-child(1) { animation-delay: .2s; }
  .portada-titulo .linea:nth-child(2) { animation-delay: .32s; }
  .portada-titulo .linea:nth-child(3) { animation-delay: .44s; }
  .portada-titulo em.linea { animation-delay: .6s; }
  .portada-texto > :nth-child(3) { animation-delay: .75s; }
  .portada-texto > :nth-child(4) { animation-delay: .9s; }
  .portada-texto > :nth-child(5) { animation-delay: 1s; }
}

@keyframes subir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pintar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sombra { from { transform: translate(-8px, -7px); } to { transform: none; } }
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-revela] { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 37.99rem) {
  .aviso { font-size: .8rem; }
  .aviso-cta { display: none; }
  .aviso-texto { padding-block: .45rem; }
  /* el sello redondo pasa a píldora con texto: se lee y no deja un hueco bajo los botones */
  .portada-texto { padding-bottom: 2.4rem; }
  .portada-pie { gap: .8rem; }
  .portada-pie .sello { width: auto; aspect-ratio: auto; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .4rem; border: 1.5px solid currentColor; border-radius: 999px; }
  .portada-pie .sello > svg { display: none; }
  .portada-pie .sello-sol { width: 1.2rem; height: 1.2rem; color: currentColor; }
  .portada-pie .sello-nombre { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; font-family: var(--f-maquina); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
  .portada-pie .estado { flex-basis: 100%; font-size: .8125rem; }
  /* el panel ocupa el ancho exacto: seis piezas, y la pared alineada con él */
  .portada { --tesela: calc(100vw / 6); }
  .placa { --t: calc((100vw - 4rem) / 4.4); }
}

@media (min-width: 38rem) {
  .estante { grid-template-columns: repeat(2, 1fr); }
  .prensa { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 38rem) and (max-width: 55.99rem) {
  .portada { --tesela: calc(100vw / 8); }
  .portada .panel { margin-left: var(--tesela); }
}

@media (min-width: 56rem) {
  :root { --cabecera: 5.25rem; }
  .nav { display: block; }
  .cabecera .estado { display: inline-flex; }
  .cabecera-cta { display: inline-flex; }
  .menu-boton, .menu-movil, .barra-movil { display: none !important; }
  .pie-legal-fila { padding-bottom: 1.8rem; }
  .indice-lista { flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .indice-lista li:last-child { padding-right: 0; }

  /* Portada: el panel se incrusta en la pared, alineado con sus juntas */
  .portada { min-height: calc(var(--tesela) * 7); display: grid; align-items: center; }
  .portada-texto { max-width: min(36rem, 46vw); padding-block: 3rem; }
  .portada .panel { position: absolute; top: var(--tesela); left: 52%; left: round(down, calc(50% + 1rem), var(--tesela)); }

  /* Interiores: un mosaico de 3×3 piezas en la pared, a la derecha */
  .pagina-cabecera { min-height: calc(var(--tesela) * 5); }
  .pagina-cabecera > .mosaico { display: grid; position: absolute; top: var(--tesela); left: 64%; left: round(down, calc(100% - var(--tesela) * 5), var(--tesela)); }
  .pagina-cabecera > .envoltorio { position: relative; z-index: 1; }
  .pagina-cabecera-rejilla { grid-template-columns: minmax(0, 1fr) calc(var(--tesela) * 4); }

  .laterio-rejilla { grid-template-columns: 1fr 1.05fr; gap: clamp(3rem, 7vw, 6rem); }
  .estante { grid-template-columns: repeat(4, 1fr); }
  .estante-item:nth-child(even) { margin-top: 2rem; }
  .vermut-rejilla { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); }
  .grupos-rejilla { grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 7vw, 6rem); }
  .visita-rejilla { grid-template-columns: repeat(12, 1fr); gap: 2.4rem; }
  .visita-horario { grid-column: span 7; }
  .visita-reserva { grid-column: span 5; }
  .historia-rejilla { grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: start; }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .menu-grupo .sello { right: -1.2rem; --tam: 7.2rem; }
  .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (min-width: 72rem) {
  .carta-rejilla { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .carta-lateral { position: sticky; top: calc(var(--alto-cabecera, 4rem) + 5.5rem); order: 2; }
}
@media (min-width: 38rem) and (max-width: 71.99rem) {
  .carta-lateral { grid-template-columns: 1.2fr 1fr; align-items: start; }
}