/* Paleta A (granate y oro) - tokens y piezas comunes de las tres portadas */
@font-face{font-family:Anton;src:url(/fonts/anton-400.woff2?v=2e308a05) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-400.woff2?v=1793b6dd) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-600.woff2?v=635ba4a4) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-700.woff2?v=5bb2752c) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --granate:#7F1D2D; --hondo:#4F1220; --oro:#F2A71B; --tinta:#1E1816; --granito:#E7E4E0; --blanco:#fff;
  --disp:Anton,Impact,"Arial Narrow",sans-serif;
  --cuerpo:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  --w:80rem; --g:clamp(16px,3vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.5 var(--cuerpo);color:var(--tinta);background:var(--blanco)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.w{max-width:var(--w);margin-inline:auto;padding-inline:var(--g)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:-999px;top:8px;z-index:100;background:var(--oro);color:var(--tinta);padding:10px 16px;font-weight:700}
.salto:focus{left:8px}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.sobre-claro :focus-visible{outline-color:var(--granate)}

/* Botón: 44 px mínimo de alto, texto oscuro sobre oro (8,6:1) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;
  font:700 1rem/1 var(--cuerpo);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  background:var(--oro);color:var(--tinta);border:2px solid var(--oro);cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{background:var(--tinta);border-color:var(--tinta);color:var(--oro)}
.btn--granate{background:var(--granate);border-color:var(--granate);color:var(--blanco)}
.btn--granate:hover{background:var(--hondo);border-color:var(--hondo);color:var(--blanco)}
.btn--borde{background:transparent;color:inherit;border-color:currentColor}
.btn--borde:hover{background:var(--blanco);color:var(--tinta);border-color:var(--blanco)}

.cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.cabecera nav ul{display:flex;gap:22px}
.cabecera nav a{font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:10px 0;display:inline-block}
.cabecera nav a:hover{text-decoration:underline;text-underline-offset:6px}
/* En móvil el menú no se esconde: sin JavaScript no hay desplegable fiable, así que los enlaces pasan a una segunda fila */
@media (max-width:720px){
  .cabecera{flex-wrap:wrap;row-gap:0}
  .cabecera nav{order:3;width:100%}
  .cabecera nav ul{flex-wrap:wrap;gap:0 18px}
  .cabecera nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;font-size:.8125rem}
}

.legal-pie{display:flex;flex-wrap:wrap;gap:6px 22px}
.legal-pie a{display:inline-block;padding:10px 0;text-underline-offset:4px}

/* Primera capa de información de privacidad (art. 11 LOPDGDD), junto al teléfono */
.capa{font-size:.9375rem;max-width:46ch;opacity:.92}
.capa a{text-underline-offset:3px}

/* Botón de subir al inicio. Como la barra de llamar: sale tras bajar un poco, sin JavaScript (la CSP no lo permite),
   con una animación de CSS vinculada al scroll que sólo cambia la opacidad. Donde el navegador no la soporta no sale
   el botón flotante y queda el enlace «Volver arriba» del pie. */
.subir{display:none}
.volver{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
@supports (animation-timeline: scroll()){
  @keyframes aparece{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
  .volver{display:none}
  .subir{display:flex;align-items:center;justify-content:center;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:16px;z-index:40;
    width:48px;height:48px;background:var(--granate);color:var(--blanco);border:2px solid var(--blanco);box-shadow:0 0 0 2px var(--granate);
    opacity:0;visibility:hidden;animation:aparece linear both;animation-timeline:scroll();animation-range:500px 700px}
  .subir:hover{background:var(--hondo)}
  .subir:focus-visible{outline:3px solid var(--tinta);outline-offset:2px;box-shadow:0 0 0 2px var(--granate),0 0 0 5px var(--blanco)}
  .subir svg{width:22px;height:22px}
  @media (max-width:720px){body:has(.llamar-fijo) .subir{bottom:76px}}   /* por encima de la barra de llamar */
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* La barra de llamar queda fuera: su animacion va ligada al scroll y solo cambia la opacidad (no mueve nada) */
  *:not(.llamar-fijo):not(.subir),*::before,*::after{animation:none!important;transition:none!important}
}

/* V3 Escaparate: foto a sangre, texto editorial y una carta que parece impresa */
.hero{position:relative;min-height:min(100svh,820px);color:var(--blanco);background:var(--hondo);display:flex;overflow:hidden}
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%}
/* El velo existe para que el texto se lea sobre la foto, no como adorno */
.hero__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgb(79 18 32 / .78) 0,rgb(79 18 32 / 0) 140px),linear-gradient(90deg,rgb(79 18 32 / .92) 0%,rgb(79 18 32 / .74) 34%,rgb(79 18 32 / 0) 66%)}
.hero__cont{position:relative;width:100%;display:flex;flex-direction:column}
.hero__cont .w{width:100%}
.hero__txt{margin-block:auto;padding-block:clamp(40px,8vw,96px);display:grid;gap:22px;justify-items:start}
.hero h1{font:400 clamp(3.6rem,10vw,8.4rem)/.92 var(--disp);text-transform:uppercase;max-width:9ch;text-wrap:balance}
.hero .sub{font:600 clamp(1.15rem,2vw,1.5rem)/1.3 var(--cuerpo);max-width:26ch}
.botones{display:flex;flex-wrap:wrap;gap:12px}

.historia{padding-block:clamp(48px,8vw,112px)}
.historia .w{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.historia__foto{position:relative}
.historia__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 50%}
.historia h2,.carta h2,.menus h2{font:400 clamp(3.2rem,8vw,6.4rem)/.95 var(--disp);text-transform:uppercase;color:var(--granate)}
.historia__txt{display:grid;gap:22px;justify-items:start}
.historia__txt p{font:600 clamp(1.25rem,2.3vw,1.75rem)/1.35 var(--cuerpo);max-width:28ch}
.historia .gallo{width:min(100%,380px);margin-top:8px;background:var(--granito);padding:18px 18px 0}

.carta{background:var(--granito);padding-block:clamp(48px,8vw,112px)}
.carta h2{margin-bottom:clamp(24px,4vw,56px)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;margin-bottom:clamp(28px,5vw,64px)}
.fila img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fila--inv img{order:2}
.fila h3,.tambien h3{font:400 clamp(2.4rem,5vw,4rem)/1 var(--disp);text-transform:uppercase}
.fila p{font:600 1.375rem/1.3 var(--cuerpo);margin-top:10px}
.fila--destacada{margin-bottom:clamp(40px,7vw,96px)}
.fila--destacada h3{font-size:clamp(3.4rem,8vw,6.4rem)}
.fila--destacada p{max-width:30ch}
.fila--destacada .btn{margin-top:6px}
.sabores{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font:600 clamp(1.15rem,2vw,1.5rem)/1.2 var(--cuerpo)}
/* Un cuadradito delante de cada sabor y no una barra entre ellos: al partirse la línea, ninguna empieza por «/» */
.sabores li{display:inline-flex;align-items:center}
.sabores li::before{content:"";width:.42em;height:.42em;background:var(--granate);margin-right:.5em;flex:none}
.tambien{border-top:3px solid var(--tinta);padding-top:22px;display:grid;grid-template-columns:1fr 2fr;gap:12px 40px;align-items:baseline}
.tambien ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 32px;font:600 1.25rem/1.3 var(--cuerpo)}
.tambien li{padding-block:6px}

.menus{padding-block:clamp(48px,8vw,112px)}
.menus .w{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.ticket h2{margin-bottom:24px}
.ticket ol{display:grid;gap:22px}
.ticket .linea{display:flex;align-items:baseline;gap:12px}
.ticket .m,.ticket .pr{font:400 clamp(1.9rem,4vw,2.8rem)/1 var(--disp);text-transform:uppercase}
.ticket .pr{color:var(--granate)}
.ticket .pt{flex:1;border-bottom:4px dotted var(--tinta);transform:translateY(-.25em);min-width:20px}
.ticket li p{font:600 1.125rem/1.3 var(--cuerpo);margin-top:6px;max-width:38ch}
.ticket .nota{font-size:.9375rem;margin-top:26px}
.menus__foto{width:100%;aspect-ratio:4/5;object-fit:cover}

.donde{background:var(--granate);color:var(--blanco);padding-block:clamp(48px,8vw,104px)}
.donde .w{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.donde__txt{display:grid;gap:18px;justify-items:start}
.donde h2{font:400 clamp(3rem,7vw,5.6rem)/.95 var(--disp);text-transform:uppercase}
.donde .dir{font:600 clamp(1.3rem,2.4vw,1.8rem)/1.25 var(--cuerpo)}
.donde .tel{display:inline-block;font:400 clamp(3rem,8vw,6rem)/1 var(--disp);color:var(--oro);text-decoration:none;padding-block:6px}
.donde .tel:hover{text-decoration:underline;text-underline-offset:10px}
.donde .botones{margin-top:2px}
.plano{display:block;border:3px solid var(--blanco)}
.plano img{width:100%;aspect-ratio:4/3;object-fit:cover}
.plano-pie{font-size:.875rem;margin-top:10px;color:var(--granito)}
.plano-pie a{text-underline-offset:3px}
@media (max-width:900px){.donde .w{grid-template-columns:1fr}}

.pie{background:var(--tinta);color:var(--granito);padding-block:32px}
.pie .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.pie p{font-size:.9375rem}

/* Barra de llamada fija, sólo en móvil */
/* La barra sale sólo al empezar a hacer scroll. Sin JavaScript (la CSP no lo permite): una animación de CSS
   vinculada al desplazamiento de la página. Donde el navegador no la soporta (@supports) la barra no sale, y
   quedan el botón «Llamar» de la portada y el teléfono de «Dónde estamos». */
.llamar-fijo{display:none}
@media (max-width:720px){
  @supports (animation-timeline: scroll()){
    body:has(.llamar-fijo){padding-bottom:60px}   /* sólo donde hay barra: las legales no la tienen */
    .llamar-fijo{display:flex;align-items:center;justify-content:center;position:fixed;inset:auto 0 0 0;z-index:50;min-height:60px;background:var(--oro);color:var(--tinta);font:700 1.125rem/1 var(--cuerpo);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-top:3px solid var(--tinta);
      opacity:0;visibility:hidden;animation:aparece linear both;animation-timeline:scroll();animation-range:0 160px}
  }
}
@media (max-width:900px){
  .historia .w,.menus .w,.fila{grid-template-columns:1fr}
  .fila--inv img{order:0}
  .tambien{grid-template-columns:1fr}
  .tambien ul{grid-template-columns:1fr}
  .menus__foto{aspect-ratio:4/3}
}
@media (max-width:560px){
  /* La foto ocupa sólo el tramo de arriba, con el pollo a la vista, y el texto va sobre granate liso */
  .hero{min-height:0}
  .hero__foto{inset:0 0 auto 0;height:400px;object-position:50% 34%}
  .hero__velo{background:linear-gradient(180deg,rgb(79 18 32 / .78) 0,rgb(79 18 32 / .55) 130px,rgb(79 18 32 / 0) 230px,var(--hondo) 400px,var(--hondo) 100%)}
  .hero__txt{padding-top:206px}
  /* El plano se recorta en vertical para que los nombres de calle se lean */
  .plano img{aspect-ratio:4/5;object-position:30% 50%}
}

/* Páginas de texto: aviso legal, privacidad, cookies y 404 */
.cab-legal{background:var(--blanco);border-bottom:3px solid var(--tinta)}
.legal{padding-block:clamp(32px,6vw,80px) clamp(48px,8vw,112px)}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:.9375rem;margin-bottom:10px}
.migas li{display:flex;align-items:center;min-height:44px}
.migas li+li::before{content:"/";margin-right:10px;color:var(--granate)}
.migas a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;text-underline-offset:4px}
.legal h1{font:400 clamp(3rem,8vw,5.6rem)/.95 var(--disp);text-transform:uppercase;color:var(--granate);margin-bottom:clamp(20px,4vw,40px)}
.texto{max-width:44rem}
.texto h2{font:400 clamp(1.6rem,3vw,2.2rem)/1.1 var(--disp);text-transform:uppercase;margin:2.2em 0 .6em}
.texto h2:first-child{margin-top:0}
.texto p{margin-bottom:1em}
.texto ul{margin:0 0 1.2em;display:grid;gap:.6em;padding-left:1.2em;list-style:disc}
.texto li::marker{color:var(--granate)}
.texto a{text-underline-offset:3px}
.texto code{font:600 .95em/1 ui-monospace,Menlo,Consolas,monospace;background:var(--granito);padding:.1em .35em}
.texto .fecha{font-size:.9375rem;margin-top:2em;padding-top:1em;border-top:3px solid var(--tinta)}
.texto table{width:100%;border-collapse:collapse;margin-bottom:1.4em}
.texto th,.texto td{text-align:left;padding:10px 12px;border-bottom:2px solid var(--granito);vertical-align:top}
.texto th{width:11rem;font-weight:700}
.texto td{overflow-wrap:anywhere}   /* el correo no tiene por dónde partirse y desbordaba a 320-360 px */
@media (max-width:560px){.texto th{width:7.5rem}}
/* La 404 es corta: el pie baja al fondo de la ventana en vez de dejar un hueco blanco debajo */
body:has(.error404){min-height:100svh;display:flex;flex-direction:column}
body:has(.error404) main{flex:1 0 auto}
.error404{padding-block:clamp(48px,10vw,140px)}
.error404 h1{font:400 clamp(4rem,14vw,10rem)/.9 var(--disp);text-transform:uppercase;color:var(--granate);margin-bottom:16px}
.error404 p{font:600 clamp(1.15rem,2vw,1.5rem)/1.3 var(--cuerpo);margin-bottom:24px}