/* ═══════════════════════════════════════════════════════════════════════════
   LA GIARA · hoja común de las seis páginas
   Dirección: Roberta's Pizza (refero.design) — sistema de cartel: secciones a
   sangre, cinta de cuadros como separador (que es su mantel) y una sombra dura
   y retro que solo sale al pasar por encima.

   ⚠️ Pero los COLORES son los suyos, no los del sistema. Están sacados de su
   logotipo de 1993: el verde oliva del lettering, el ámbar de las espigas de
   trigo y la terracota de la giara —la tinaja siciliana que da nombre a la
   casa—. La marca del cliente manda sobre la referencia: Roberta's pide un
   solo color que grite, pero aquí ya existe una identidad de treinta y tres
   años y lo que toca es servirla, no sustituirla.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#ffffff;
  --carbon:#221d18;      /* neutro estructural: carga el 90 % de la interfaz */
  /* Medido: el valor anterior (#857a6c) daba 3,89:1 sobre la crema de fondo,
     con un minimo de 4,5:1. Es el color del texto secundario de toda la web
     -pies de tarjeta, nav posada, quien dice cada cita-, asi que el fallo
     estaba repetido en cinco sitios. Este da 4,64:1 sobre crema y 5,0:1 sobre
     blanco, y mantiene el mismo gris calido. */
  --humo:#786e60;
  --verde:#6f7533;       /* oliva del logotipo — EL color de la casa */
  --verde-h:#4e521f;     /* el mismo oliva en sombra */
  --ambar:#c9963a;       /* las espigas de trigo y la pastilla «desde 1993» */
  --terracota:#8d6b55;   /* la giara, la tinaja siciliana */
  --crema:#faf6ec;
  --brasa:#e2601c;       /* SOLO dentro de la escena y en el hueco del horno */
  --max:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  --retro:0 4px 4px rgba(0,0,0,.25);   /* la ÚNICA sombra del sistema */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--carbon);
  font-family:'Outfit',system-ui,sans-serif; font-weight:400;
  font-size:17px; line-height:1.55; letter-spacing:.035em;  /* la holgura es la firma */
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--verde); color:var(--carbon)}
:focus-visible{outline:3px solid var(--verde); outline-offset:3px}
p{margin:0}
a{color:inherit; text-decoration:none}

/* Condensada de cartel. Nunca por debajo de 22 px: no se lee. */
.cartel{font-family:'Bebas Neue',Impact,sans-serif; font-weight:400;
  letter-spacing:-.015em; line-height:.9; text-transform:uppercase}
h1,h2,h3,h4{margin:0; font-weight:400}
.eti{font-size:.75rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500}

.env{width:min(100% - 1.75rem, var(--max)); margin-inline:auto}
@media(min-width:900px){ .env{width:min(100% - 4rem, var(--max))} }

.cuadros{height:24px;
  background-image:repeating-conic-gradient(var(--verde) 0 25%, transparent 0 50%);
  background-size:24px 24px}

.btn{display:inline-flex; align-items:center; gap:.55rem; min-height:48px;
  padding:.8rem 1.6rem; border-radius:7.2px; cursor:pointer;
  font-size:.9375rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  background:var(--verde); color:var(--carbon); border:2px solid var(--verde);
  transition:background .28s var(--ease), color .28s var(--ease),
             box-shadow .28s var(--ease), transform .28s var(--ease)}
.btn:hover{box-shadow:var(--retro); transform:translateY(-2px)}
.btn.hueco{background:transparent; color:var(--papel); border-color:rgba(255,255,255,.55)}
.btn.hueco:hover{background:var(--papel); color:var(--carbon); border-color:var(--papel)}
.btn.tinta{background:var(--carbon); color:var(--papel); border-color:var(--carbon)}
.btn.tinta:hover{background:var(--verde); color:var(--carbon); border-color:var(--verde)}
.btn svg{width:17px; height:17px; flex:none}

/* ── NAVEGACIÓN — seis apartados, como su web ─────────────────────────────── */
nav{position:fixed; inset:0 0 auto; z-index:50; padding:.85rem 0;
  border-bottom:3px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease)}
nav.claro .marca, nav.claro ul a{color:var(--papel)}
nav.posada{background:var(--papel); border-bottom-color:var(--carbon)}
nav.posada .marca{color:var(--carbon)}
nav.posada ul a{color:var(--humo)}
nav .env{display:flex; align-items:center; justify-content:space-between; gap:1rem}
nav .marca{font-family:'Bebas Neue',sans-serif; font-size:1.65rem; line-height:1;
  color:var(--carbon); transition:color .4s var(--ease)}
nav .marca span{color:var(--ambar)}
nav ul{display:none; list-style:none; margin:0; padding:0; gap:1.6rem}
@media(min-width:1080px){ nav ul{display:flex} }
nav ul a{position:relative; font-size:.75rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--humo); transition:color .3s var(--ease)}
nav ul a::after{content:''; position:absolute; left:0; bottom:-5px; height:2px; width:100%;
  background:var(--verde); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease)}
nav ul a:hover::after, nav ul a[aria-current]::after{transform:scaleX(1); transform-origin:left}
nav ul a[aria-current]{color:var(--verde)}
nav.claro ul a[aria-current]{color:var(--ambar)}
nav .btn{min-height:40px; padding:.55rem 1.1rem; font-size:.75rem}
/* Menú de mano para pantallas estrechas */
.hamb{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:2px solid currentColor; border-radius:9999px; background:transparent;
  color:inherit; cursor:pointer}
@media(min-width:1080px){ .hamb{display:none} }
.hamb span{display:block; width:17px; height:2px; background:currentColor; position:relative}
.hamb span::before,.hamb span::after{content:''; position:absolute; left:0; width:17px;
  height:2px; background:currentColor}
.hamb span::before{top:-5px} .hamb span::after{top:5px}
.cajon{position:fixed; inset:0; z-index:49; background:var(--carbon); color:var(--papel);
  display:flex; flex-direction:column; justify-content:center; gap:.35rem; padding:2rem;
  transform:translateY(-100%); transition:transform .55s var(--ease)}
.cajon.abierto{transform:none}
.cajon a{font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,9vw,3.4rem);
  line-height:1.05; text-transform:uppercase}
.cajon a:hover, .cajon a[aria-current]{color:var(--ambar)}

/* ── CABECERA DE PÁGINA INTERIOR ──────────────────────────────────────────── */
.port{position:relative; min-height:62svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:8rem 0 clamp(2rem,6vh,3.5rem); overflow:hidden;
  background:var(--carbon); color:var(--papel)}
.port .env{position:relative; z-index:2}
.port h1{font-size:clamp(3rem,11vw,8rem)}
/* El titular entra línea a línea: cada una es un bloque con la suya recortada. */
.lin{display:block; overflow:hidden; padding-bottom:.04em}
.lin > span{display:block}
.port h1 .verde{color:var(--ambar)}
.port .bajada{margin-top:1.25rem; max-width:46ch; color:rgba(255,255,255,.84); line-height:1.65}
.escena{position:absolute; inset:0; z-index:0}
/* El texto no se negocia: la escena lleva su propio velo por debajo. */
.escena::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(36,31,28,.30) 0%, rgba(36,31,28,.05) 32%,
                             rgba(36,31,28,.62) 72%, rgba(36,31,28,.92) 100%)}
.escena canvas, .escena svg{display:block; width:100%; height:100%}

/* ── BLOQUES ──────────────────────────────────────────────────────────────── */
.bloque{padding:clamp(4rem,11vh,7.5rem) 0}
.rotulo{margin-bottom:clamp(2rem,5vh,3.25rem)}
.rotulo h2{font-size:clamp(2.2rem,7vw,5rem); max-width:16ch}
.rotulo h2 .verde, .rotulo h2 span{color:var(--verde)}
.rotulo p{margin-top:1rem; max-width:54ch; color:#5d554e; line-height:1.7}
.verde{color:var(--verde)}

.aviso{background:var(--verde-h); color:#eae6cf; position:relative; z-index:3}
.aviso .env{display:flex; gap:.9rem; align-items:flex-start;
  padding:.9rem 0; font-size:.875rem; line-height:1.55; letter-spacing:.02em}
.aviso b{color:#fff; font-weight:600}
.aviso i{flex:none; font-style:normal; font-size:1.05rem}

/* ── PIE ──────────────────────────────────────────────────────────────────── */
footer{background:var(--carbon); color:rgba(255,255,255,.76); padding:clamp(3rem,8vh,5rem) 0 2.5rem}
footer .env{display:grid; gap:2rem}
@media(min-width:800px){ footer .env{grid-template-columns:repeat(4,1fr); gap:2.5rem} }
footer .col{font-size:.875rem; line-height:1.9}
footer .col b{display:block; font-family:'Bebas Neue',sans-serif; font-size:1.2rem;
  letter-spacing:.04em; color:var(--ambar); margin-bottom:.4rem}
footer a:hover{color:var(--ambar)}
.pie-fin{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5)}

.con-dedo{display:none}
@media(hover:none),(pointer:coarse){ .con-raton{display:none} .con-dedo{display:inline} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}



/* ═══════════════════════════════════════════════════════════════════════════
   EL PASO DE UNA PÁGINA A OTRA
   ⚠️ Antes había un telón de fuego que tapaba la pantalla entera. Natxo lo
   tumbó con razón: «queda lo contrario a limpio». Un panel de color a pantalla
   completa se lee como barato. Lo que persiste ahora es el CONTENIDO: los
   bloques salen escalonados por donde vinieron y los de la página nueva entran
   igual. El fondo no cambia nunca y no se tapa nada.
   ═══════════════════════════════════════════════════════════════════════════ */
main, footer{transition:opacity .34s ease, transform .34s ease}
body.saliendo main, body.saliendo footer{opacity:0; transform:translateY(-14px)}
body.saliendo nav{opacity:.45; transition:opacity .34s ease}
@media (prefers-reduced-motion: reduce){
  main, footer{transition:none}
  body.saliendo main, body.saliendo footer{opacity:1; transform:none}
}

/* ── Grano de película ────────────────────────────────────────────────────
   Va por encima de todo y no captura el ratón. Con `overlay` el grano oscurece
   las zonas claras y aclara las oscuras, que es lo que hace el grano de
   verdad; con `opacity` a secas solo ensucia. Se apaga al imprimir y con
   movimiento reducido. */
canvas.grano{position:fixed; inset:0; width:100%; height:100%;
  z-index:9999; pointer-events:none; mix-blend-mode:overlay; opacity:.52}
@media print{ canvas.grano{display:none} }
@media (prefers-reduced-motion: reduce){ canvas.grano{display:none} }

/* ⚠️ APOYO DE LECTURA SOBRE EL FUEGO.
   Medido el 21/09/2026: el «Cuatro» del horno se queda en 2,52:1 sobre las
   llamas, por debajo del 3:1 que pide un texto de ese tamaño. Ocurre solo en
   ese punto del recorrido, cuando el fuego está más abierto, así que no se
   toca ni el color ni el humo: se le da sombra.

   Sombra NEUTRA y a dos radios, no de color: sobre fotografía esto es apoyo de
   lectura, no un adorno. Una sombra teñida se vería como un efecto. */
.parada .n{
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 6px 22px rgba(0,0,0,.6);
}
.parada h2{
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.5);
}