/* Torino · muestra v3 de OI Studio (22/10/2026; v2 del 21/10 en v2/).
   Maqueta: calco de la referencia BAILLOTTE (medidas tomadas de la captura de 736 px y pasadas a vw).
   Identidad: manual de marca Torino 2023 (Blömma): naranja #C96B34, morado #AB609C, mostaza #E7B94B y blanco.
   Letras: Gloock en lugar de Haganes (títulos) y Switzer en lugar de Calibre (texto y cursivas). */
@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url("fuentes/gloock-400.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:400;font-display:swap;src:url("fuentes/switzer-400.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:italic;font-weight:400;font-display:swap;src:url("fuentes/switzer-400i.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:500;font-display:swap;src:url("fuentes/switzer-500.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:italic;font-weight:500;font-display:swap;src:url("fuentes/switzer-500i.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:600;font-display:swap;src:url("fuentes/switzer-600.woff2") format("woff2")}

:root{
  /* marca (manual págs. 7-9) */
  --naranja:#C96B34; --morado:#AB609C; --mostaza:#E7B94B; --blanco:#FFFFFF;
  /* derivados (paleta.mjs desde #AB609C y #C96B34; contraste comprobado) */
  --noche:#20101C;        /* barra y pie: el morado llevado casi a negro */
  --tinta:#221A20; --texto-2:#6C5F68; --regla:#E0D6DD;
  --naranja-texto:#B2561B;/* naranja para texto pequeño (4,6:1 sobre blanco) */
  --ciruela-texto:#4A2342;/* frase sobre la mostaza */
  --crema:#FBF4E4;        /* mostaza muy clara: franja de aviso y «El restaurante» (en la referencia, beige) */
  --f:"Switzer",system-ui,sans-serif; --d:"Gloock",Georgia,serif;
  --e:cubic-bezier(.23,1,.32,1);
  --cab:62px;
}
@media(max-width:767px){:root{--cab:56px}}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cab) + 84px)}
body{background:var(--blanco);color:var(--tinta);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
i,em{font-family:var(--f);font-style:italic}
p{text-wrap:pretty}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--naranja-texto);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.envoltura{max-width:1240px;margin:0 auto;padding:0 clamp(18px,3vw,40px)}
.saltar{position:absolute;left:12px;top:-60px;z-index:60;background:var(--noche);color:#fff;padding:10px 14px}
.saltar:focus{top:8px}

/* ── logotipo: máscaras recortadas del manual, se pintan con el color del texto ── */
.m-logo,.m-apilado,.m-pie{display:block;background:currentColor}
.m-logo{aspect-ratio:2400/584;-webkit-mask:url("marca/torino-logo.png") center/contain no-repeat;mask:url("marca/torino-logo.png") center/contain no-repeat}
.m-apilado{aspect-ratio:1200/884;-webkit-mask:url("marca/torino-apilado.png") center/contain no-repeat;mask:url("marca/torino-apilado.png") center/contain no-repeat}
.m-pie{aspect-ratio:1400/59;-webkit-mask:url("marca/torino-pie.png") center/contain no-repeat;mask:url("marca/torino-pie.png") center/contain no-repeat}
.logo-completo{display:block}
.logo-completo .m-pie{width:55.6%;margin:6.1% 0 0 25.7%}
@media(forced-colors:active){.m-logo,.m-apilado,.m-pie{background:CanvasText}}

/* ── botón ovalado de contorno (como «Reserve» de la referencia) ── */
.ovalo{display:inline-grid;place-items:center;min-width:180px;min-height:62px;padding:0 30px;border:1px solid currentColor;border-radius:50%;font:400 17px/1 var(--f);text-decoration:none;color:var(--tinta);background:transparent;transition:background-color 220ms ease,color 220ms ease,transform 160ms var(--e)}
.ovalo:active{transform:scale(.97)}
.ovalo--claro{color:#fff}
.ovalo--mostaza{color:var(--mostaza)}
.ovalo--lleno{background:var(--noche);border-color:var(--noche);color:#fff}
@media(hover:hover) and (pointer:fine){
  .ovalo:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
  .ovalo--claro:hover{background:#fff;color:var(--noche);border-color:#fff}
  .ovalo--mostaza:hover{background:var(--mostaza);color:var(--noche);border-color:var(--mostaza)}
  .ovalo--lleno:hover{background:var(--naranja-texto);border-color:var(--naranja-texto)}
}
.enlace{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;color:inherit;cursor:pointer;font:400 17px/1.2 var(--f);text-decoration:underline;text-underline-offset:.3em}

/* ── a · barra superior oscura: enlaces a la izquierda, logo en el centro, reservar a la derecha ── */
.barra{position:sticky;top:10px;z-index:50;height:var(--cab);margin:10px 12px 0;border-radius:22px;background:var(--noche);color:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(18px,2.6vw,36px);box-shadow:0 10px 30px -18px rgba(32,16,28,.55)} /* barra flotante con las esquinas redondeadas (Oier, 21/10) */
.barra a{text-decoration:none}
.barra__izq{display:flex;gap:clamp(16px,2.4vw,36px)}
.barra__izq a,.barra__der a{font:italic 400 15px/1 var(--f);padding:15px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/0 1px no-repeat;transition:background-size 250ms var(--e)}
@media(hover:hover) and (pointer:fine){.barra__izq a:hover,.barra__der a:hover{background-size:100% 1px}}
.barra__logo{display:block;width:clamp(116px,10.5vw,150px);color:var(--naranja);padding:8px 0}
.barra__der{display:flex;justify-content:flex-end;align-items:center;gap:clamp(16px,2.4vw,32px)}
.barra__der .barra__reservar{font-style:normal;font-weight:500;color:var(--mostaza)}
@media(max-width:899px){.solo-ancho{display:none}}

/* ── b · franja de aviso ── */
.aviso{background:var(--crema);color:var(--tinta);text-align:center;font-size:13.5px;line-height:1.35;padding:11px 16px;margin:8px 12px 10px;border-radius:16px}

/* ── c · portada partida en dos fotos, monograma arriba y botón ovalado en el centro ── */
.portada{position:relative;display:grid;grid-template-columns:1fr 1fr;height:max(43.2vw,440px);overflow:hidden;background:var(--noche)}
.portada__f{position:relative;margin:0;overflow:hidden}
.portada__f img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) contrast(1.06)} /* estilo de foto oscuro (manual pág. 15) */
.portada__f:first-child img{object-position:50% 40%}
.portada__f:nth-child(2) img{object-position:50% 62%}
.monograma{position:absolute;left:50%;top:clamp(26px,4.4vw,64px);translate:-50% 0;width:clamp(64px,5.6vw,84px);aspect-ratio:1;border:1px solid rgba(255,255,255,.85);border-radius:50%;display:grid;place-items:center;color:#fff}
.monograma .m-apilado{width:52%}
.portada__boton{position:absolute;left:50%;top:83%;translate:-50% -50%;min-width:clamp(150px,16.9vw,250px);min-height:clamp(56px,5.9vw,84px);font-size:clamp(16px,1.6vw,21px)}

/* ── d · banda de color con el logo gigante y la frase ── */
.banda{background:var(--mostaza);color:var(--ciruela-texto);padding-top:clamp(28px,5.7vw,90px)}
.banda__logo{width:93.5%;margin:0 auto;color:var(--naranja)}
.banda__frase{font:400 clamp(26px,4.1vw,66px)/1.22 var(--d);text-align:center;margin:clamp(24px,5.4vw,84px) auto clamp(28px,5.4vw,84px);padding:0 16px;letter-spacing:-.005em}
.banda__frase i{font-weight:400;letter-spacing:-.01em}

/* ── e · tres arcos a sangre con su rótulo ── */
.arcos{display:grid;grid-template-columns:repeat(3,1fr)}
.arcos li{min-width:0}
.arcos a{position:relative;display:block;height:48vw;border-radius:999px 999px 0 0;overflow:hidden;text-decoration:none;color:#fff}
.arco__f{position:absolute;inset:0;margin:0}
.arco__f img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) contrast(1.06);transition:transform 900ms var(--e)}
.arcos a::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(32,16,28,.82))}
.arco__t{text-shadow:0 1px 12px rgba(32,16,28,.6)}
.arco__t{position:absolute;z-index:1;left:0;right:0;bottom:clamp(16px,3.3vw,44px);text-align:center;font:400 clamp(20px,2vw,30px)/1 var(--f)}
@media(hover:hover) and (pointer:fine){.arcos a:hover img{transform:scale(1.05)}}
.arcos a:focus-visible{outline:3px solid var(--noche);outline-offset:-6px}
@media(max-width:767px){
  .arcos{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none}
  .arcos::-webkit-scrollbar{display:none}
  .arcos li{flex:none;width:76vw;scroll-snap-align:center}
  .arcos a{height:108vw}
  .arcos:focus-visible{outline:2px solid var(--noche);outline-offset:-2px}
}

/* ── f · «El restaurante» a dos columnas + g · collage ── */
.restaurante{background:var(--crema);padding:clamp(56px,7.5vw,110px) 0 clamp(40px,6vw,90px)}
.restaurante__in{display:grid;gap:28px}
@media(min-width:900px){.restaurante__in{grid-template-columns:46% 1fr 33%}.restaurante__txt{grid-column:3}}
.restaurante__eti{font:500 12.5px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.restaurante__t{font:400 clamp(30px,3.3vw,46px)/1.22 var(--d);letter-spacing:-.005em}
.restaurante__txt p{font-size:16px;line-height:1.55;margin-bottom:16px;max-width:42ch}
.restaurante__txt .ovalo{margin-top:16px}
.collage{position:relative;height:clamp(420px,52vw,720px);margin-top:clamp(48px,8vw,120px);max-width:1440px;margin-left:auto;margin-right:auto}
.collage .foto{position:absolute;margin:0;overflow:hidden}
.collage img{width:100%;height:100%;object-fit:cover;filter:brightness(.86) contrast(1.05)}
.collage__a{left:42%;top:0;width:44%;height:62%}
.collage__b{left:30%;top:42%;width:30%;height:58%}
.collage__c{left:66%;top:56%;width:22%;height:40%}
.collage__bloque{position:absolute;left:6%;top:14%;width:22%;height:70%;background:var(--morado);color:var(--mostaza);overflow:hidden}
.collage__logo{position:absolute;width:190%;left:-12%;top:6%}
@media(max-width:767px){
  .collage{height:128vw}
  .collage__bloque{left:0;top:0;width:44%;height:52%}
  .collage__a{left:30%;top:8%;width:66%;height:44%}
  .collage__b{left:6%;top:50%;width:50%;height:46%}
  .collage__c{left:60%;top:60%;width:36%;height:30%}
}

/* ── textura PIZZAPASTA (manual pág. 14) que corre con el scroll ── */
.textura{position:relative;background:var(--morado);color:var(--mostaza);overflow:hidden;padding:clamp(10px,1.4vw,20px) 0}
.textura p{font:400 clamp(64px,9.4vw,150px)/.92 var(--d);white-space:nowrap;letter-spacing:-.01em;height:.92em}
.textura p::before{content:attr(data-t)} /* decorativo: el texto va en ::before para que no lo lean ni lo cuenten como texto */
.textura p:nth-child(2){margin-left:-30vw}
.textura__caja{position:absolute;left:50%;top:50%;translate:-50% -50%;background:#fff;color:var(--naranja);padding:clamp(10px,1.4vw,18px) clamp(18px,2.2vw,30px)}
.textura__caja .m-logo{width:clamp(130px,16vw,240px)}

/* ── la carta ── */
.carta{background:var(--blanco);padding:clamp(56px,7vw,110px) 0 0}
.carta__cab h2,.opiniones h2,.direccion,.reservar h2{font:400 clamp(44px,6.4vw,96px)/.95 var(--d);text-transform:uppercase;letter-spacing:-.01em}
.carta__cab p{color:var(--texto-2);margin-top:12px}
.indice{position:sticky;top:calc(var(--cab) + 20px);z-index:30;background:var(--blanco);border-bottom:1px solid var(--regla);margin-top:clamp(28px,3vw,40px)}
.indice__pista{max-width:1240px;margin:0 auto;padding:0 clamp(18px,3vw,40px);display:flex;gap:clamp(18px,2.6vw,34px);overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
.indice__pista::-webkit-scrollbar{display:none}
.indice__pista::after{content:"";flex:none;width:24px}
@media(min-width:1100px){.indice__pista{-webkit-mask:none;mask:none}}
.indice a{flex:none;display:flex;align-items:center;min-height:52px;font:italic 400 15px/1 var(--f);text-decoration:none;color:var(--texto-2);border-bottom:2px solid transparent;transition:color 200ms ease,border-color 200ms ease}
.indice a[aria-current="true"]{color:var(--tinta);border-bottom-color:var(--naranja)}
@media(hover:hover) and (pointer:fine){.indice a:hover{color:var(--tinta)}}

.carta__hoja{padding-bottom:clamp(40px,5vw,72px)}
.grupo{position:relative;padding:clamp(56px,6.5vw,104px) 0;scroll-margin-top:calc(var(--cab) + 72px)}
.grupo__in{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.grupo h3{font:400 clamp(32px,3.6vw,52px)/1 var(--d);text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--naranja);width:max-content;max-width:100%;min-width:min(100%,420px)}
.grupo__platos{container-type:inline-size}
.platos{display:grid;column-gap:48px}
@container (min-width:760px){.platos{grid-template-columns:1fr 1fr}}
.platos li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:.5em;padding:12px 0;border-bottom:1px solid var(--regla)}
/* foto del plato al lado, cuando la hay (todas del mismo tamaño) */
.platos li.con-foto{grid-template-columns:84px auto 1fr auto;column-gap:.5em}
.plato__f{grid-row:1 / span 2;align-self:center;width:84px;height:84px;margin-right:12px;border-radius:12px;overflow:hidden;background:var(--crema)}
.plato__f picture{height:100%}
.plato__f img{width:100%;height:100%;object-fit:cover;filter:brightness(.92) contrast(1.05)}
.platos li.con-foto .plato__d{grid-column:2 / -1}
.plato__n{font:600 16px/1.25 var(--f);text-transform:uppercase;letter-spacing:.03em}
.puntos{border-bottom:2px dotted #D9C9D5;transform:translateY(-.3em);min-width:18px}
.precio{font-weight:600;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.plato__d{grid-column:1 / -1;color:var(--texto-2);font-size:14.5px;line-height:1.4;margin-top:3px;max-width:56ch}
/* la pizza Torino: «Pizza» + su logotipo naranja sobre la mostaza (combinación permitida, pág. 9) */
.bodega{column-gap:48px}
.bodega__g{break-inside:avoid;margin-bottom:30px}
@container (min-width:640px){.bodega{columns:2}}
.bodega h4{font:400 clamp(24px,2.2vw,32px)/1 var(--d);text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--naranja);margin-bottom:4px}
.platos--vino li{padding:9px 0}
.carta__avisos{border-top:1px solid var(--tinta);padding-top:20px;margin-top:clamp(24px,3vw,40px);display:grid;gap:8px;color:var(--texto-2);max-width:72ch;font-size:14.5px}
.carta__avisos strong{color:var(--tinta);font-weight:600}

/* ── opiniones ── */
.opiniones{background:var(--noche);color:#F2ECF1;padding:clamp(64px,8vw,120px) 0}
.opiniones__in{display:grid;gap:32px}
@media(min-width:900px){.opiniones__in{grid-template-columns:.9fr 1.1fr;align-items:end}}
.opiniones h2{color:#fff}
.opiniones__nota{font:400 clamp(22px,2.3vw,32px)/1.3 var(--d);max-width:30ch;margin-bottom:28px}
.opiniones :focus-visible{outline-color:#fff}

/* ── visita: dirección + ticket del horario + croquis ── */
.visita{padding:clamp(64px,8vw,120px) 0 0;scroll-margin-top:var(--cab)}
.visita__in{display:grid;gap:clamp(36px,4vw,56px);align-items:start}
@media(min-width:900px){.visita__in{grid-template-columns:1fr 420px}}
.direccion{max-width:9ch}
.visita__lugar{margin-top:14px;font-size:20px;line-height:1.35;max-width:28ch}
.datos{margin-top:28px;max-width:520px}
.datos li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--regla);flex-wrap:wrap;align-items:center}
.datos span{color:var(--texto-2)}
.datos a{font-weight:500;display:inline-block;padding:8px 0}
.ticket{background:var(--crema);padding:28px 26px 30px;
  -webkit-mask:radial-gradient(circle 8px at 50% 0,#0000 98%,#000) 0 0/22px 51% repeat-x,radial-gradient(circle 8px at 50% 100%,#0000 98%,#000) 0 100%/22px 51% repeat-x;
          mask:radial-gradient(circle 8px at 50% 0,#0000 98%,#000) 0 0/22px 51% repeat-x,radial-gradient(circle 8px at 50% 100%,#0000 98%,#000) 0 100%/22px 51% repeat-x}
.ticket h3{font:400 32px/1 var(--d);text-transform:uppercase;text-align:center;padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--naranja)}
.ticket li{display:flex;justify-content:space-between;gap:12px;padding:6px 8px;font-variant-numeric:tabular-nums}
.ticket li>span:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:1em}
.ticket li>span>span{white-space:nowrap}
@media(min-width:900px){.ticket li>span:last-child{flex-wrap:nowrap}}
.ticket li.hoy{background:var(--mostaza);font-weight:600}
.ticket li.hoy>span:first-child::after{content:" · hoy"}
.ticket__pie{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px dashed #C9B9A0;margin-top:12px;padding:12px 8px 0;font-size:14px;color:var(--texto-2)}
.ticket .ovalo{display:grid;width:100%;margin-top:18px}
.mapa-lienzo{overflow:hidden;background:#fff;border-radius:20px;border:1px solid var(--regla)}
.mapa-credito{font-size:14px;color:var(--texto-2);margin-top:8px}
.croquis{display:block;width:100%;height:clamp(380px,46vw,600px)}
.croquis .cuad{stroke:var(--noche);stroke-opacity:.05}
.croquis .mar path,.croquis .agua path{fill:#DCE6EC;stroke:none}
.croquis .parque path{fill:#E4EADB;stroke:none}
.croquis .playa path{fill:#F6E7C4;stroke:none}
.croquis .calle path{stroke:#DCD0D8;stroke-width:1.3}
.croquis .principal path{stroke:#A792A4;stroke-width:3}
.croquis .rio-mancha path,.croquis .costa-mancha path{stroke:#B9CCD8;stroke-opacity:.6;stroke-width:12}
.croquis .rio path,.croquis .costa path{stroke:#4A6B80;stroke-opacity:.75;stroke-width:2.2}
.croquis .resaltada path{stroke:var(--naranja);stroke-width:7}
.croquis text{font-family:var(--f);font-style:italic}
.croquis .e-mar{font-size:30px;fill:#4A6B80}
.croquis .e-playa{font-size:24px;fill:#8A6D33}
.croquis .pin-punto{fill:var(--morado);stroke:#fff;stroke-width:4}
.croquis .pin-onda{fill:var(--naranja);opacity:.35;transform-box:fill-box;transform-origin:center}
.mapa-lienzo.en-vista .pin-onda{animation:onda 2.4s ease-out 1 both} /* una sola onda, al llegar al mapa */
@keyframes onda{0%{transform:scale(.5);opacity:.55}100%{transform:scale(2.2);opacity:0}}
.croquis .pin-etiqueta rect{fill:var(--noche)}
@media(max-width:819px){.croquis .e-mar{font-size:36px}.croquis .e-playa{font-size:30px}}

/* ── reservar ── */
.reservar{background:var(--mostaza);color:var(--tinta);padding:clamp(64px,8vw,120px) 0}
.reservar__in{display:grid;gap:36px}
@media(min-width:900px){.reservar__in{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:64px}.widget{grid-column:1 / -1}}
.reservar h2{max-width:9ch}
.reservar p{margin-top:16px;max-width:38ch}
.reservar__botones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.reservar__tel p{margin:0 0 6px;color:var(--ciruela-texto)}
.reservar__tel a{font:400 clamp(34px,4vw,56px)/1 var(--d);text-decoration:none;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:6px;display:inline-block}
@media(hover:hover) and (pointer:fine){.reservar__tel a:hover{color:var(--naranja-texto)}}
.widget{max-width:820px;background:#fff}
.widget iframe{display:block;width:100%;height:440px;border:0}

/* ── pie ── */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .croquis .pin-onda{opacity:0}
}
/* las fotos que llenan su caja: el <picture> también ocupa todo el alto */
.portada__f picture,.arco__f picture,.collage .foto picture{height:100%}
.collage__a img{object-position:50% 78%}
.collage__b img{object-position:50% 85%}

/* ── cabecera de cada apartado de la carta: foto suya o recurso de la marca, mismo tamaño ── */
.cabecera{position:relative;margin:0;height:clamp(170px,22vw,300px);border-radius:20px;overflow:hidden;background:var(--crema)}
.cabecera picture{height:100%}
.cabecera img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) contrast(1.06)}
/* ── llamar y reservar, fijo abajo (Oier, 21/10) ── */
.fijo{position:fixed;z-index:55;right:16px;bottom:16px;display:flex;gap:8px}
.fijo a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:999px;font:500 16px/1 var(--f);text-decoration:none;box-shadow:0 14px 30px -14px rgba(32,16,28,.6);transition:background-color 200ms ease,transform 160ms var(--e)}
.fijo a:active{transform:scale(.97)}
.fijo a:focus-visible{outline:3px solid var(--mostaza);outline-offset:3px}
.fijo svg{width:18px;height:18px;fill:currentColor}
.fijo__llamar{background:var(--naranja-texto);color:#fff}
.fijo__reservar{background:var(--noche);color:#fff}
@media(min-width:768px){.fijo__reservar{display:none!important}} /* en escritorio «Reservar» ya está en la barra de arriba */
@media(hover:hover) and (pointer:fine){.fijo__llamar:hover{background:#8E410F}.fijo__reservar:hover{background:#3A2033}}
@media(max-width:767px){
  .fijo{left:10px;right:10px;bottom:10px;gap:6px;padding:6px;border-radius:24px;background:var(--noche);box-shadow:0 14px 34px -14px rgba(32,16,28,.7)}
  .fijo a{flex:1;min-height:52px;padding:0 12px;box-shadow:none}
  .fijo__num{display:none}
  .fijo__reservar{background:var(--mostaza);color:var(--noche)}
}
@media(max-width:767px){.barra{margin:8px 8px 0;border-radius:18px;top:8px}.aviso{margin:8px 8px 10px}}
.platos--vino{grid-template-columns:minmax(0,1fr)!important}

/* ═════ v3 (22/10): imágenes del manual de marca y más ritmo ═════ */

/* ── la carta a sangre: cada apartado con su fondo (combinaciones de la pág. 9) y su forma ── */
.fondo--blanco{background:var(--blanco)}
.fondo--crema{background:var(--crema)}
.fondo--mostaza{background:var(--mostaza);color:var(--tinta)}
.fondo--mostaza h3,.fondo--mostaza .bodega h4{border-bottom-color:var(--ciruela-texto)}
.fondo--mostaza .plato__d,.fondo--mostaza .menu-dia__nota{color:var(--ciruela-texto)}
.fondo--mostaza .platos li{border-bottom-color:rgba(74,35,66,.22)}
.fondo--mostaza .puntos{border-bottom-color:rgba(74,35,66,.38)}
.fondo--mostaza :focus-visible{outline-color:var(--noche)}
.fondo--noche{background:var(--noche);color:#F4EEF3}
.fondo--noche h3{color:#fff;border-bottom-color:var(--mostaza)}
.fondo--noche .plato__d{color:#C9BAC6}
.fondo--noche .platos li{border-bottom-color:rgba(255,255,255,.14)}
.fondo--noche .puntos{border-bottom-color:rgba(255,255,255,.28)}
.fondo--noche :focus-visible{outline-color:var(--mostaza)}
.fondo--crema .plato__f{background:#fff}

/* lado: foto o textura al lado de la lista; en escritorio se queda fija mientras se lee la lista */
.grupo__lado{position:relative;margin:0;height:clamp(220px,58vw,360px);border-radius:20px;overflow:hidden}
.grupo__foto picture{height:100%}
.grupo__foto img{width:100%;height:100%;object-fit:cover;filter:brightness(.88) contrast(1.05)}
@media(min-width:900px){
  .grupo--lado .grupo__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,84px);align-items:start}
  .grupo--der .grupo__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .grupo--der .grupo__lado{order:2}
  .grupo--lado .grupo__lado{position:sticky;top:calc(var(--cab) + 104px);height:min(70vh,600px)}
}
.grupo__cuerpo{display:grid;gap:24px;min-width:0}
/* textura PIZZAPASTA en vertical (pág. 14), con la caja blanca y el logotipo */
.grupo__textura{background:var(--morado);color:var(--mostaza);display:flex;flex-direction:column;justify-content:center}
.grupo__textura p{font:400 clamp(52px,5.6vw,88px)/.9 var(--d);white-space:nowrap;letter-spacing:-.01em;height:.9em;margin-left:-.6em}
.grupo__textura p:nth-child(even){margin-left:-1.7em}
.grupo__textura p::before{content:attr(data-t)}
.grupo__caja{position:absolute;left:50%;top:50%;translate:-50% -50%;background:#fff;color:var(--morado);padding:clamp(10px,1.2vw,16px) clamp(16px,2vw,26px)}
.grupo__caja .m-logo{width:clamp(120px,12vw,190px)}

/* logo: el logotipo gigante cortado arriba, naranja sobre mostaza (págs. 9 y 10) */
.grupo--logo{padding-top:0}
.logo-corte{overflow:hidden;color:var(--naranja);height:clamp(120px,18vw,290px);margin-bottom:clamp(24px,3vw,44px)}
.logo-corte__m{width:116%;margin:-9.5% 0 0 -5%}

/* partida: la pizza con aceite a sangre y la pizza Torino en grande */
.grupo--partida{padding-top:0}
.partida{display:grid;margin-bottom:clamp(32px,4vw,56px)}
.partida__f{position:relative;margin:0;overflow:hidden;height:clamp(300px,84vw,460px)}
.partida__f picture{height:100%}
.partida__f img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.partida__txt{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(36px,5vw,80px) clamp(18px,4.5vw,72px) 0}
@media(min-width:900px){
  .partida{grid-template-columns:minmax(0,11fr) minmax(0,9fr);min-height:clamp(560px,50vw,760px)}
  .partida__f{height:auto}
  .partida__txt{padding-bottom:clamp(36px,5vw,80px)}
}
.destacada{background:var(--mostaza);color:var(--tinta);padding:clamp(24px,3.4vw,48px)}
.destacada__n{display:flex;align-items:flex-end;gap:.3em;flex-wrap:wrap;font:400 clamp(44px,5.4vw,84px)/.9 var(--d);color:var(--ciruela-texto)}
.destacada__logo{width:clamp(190px,21vw,330px);color:var(--naranja-texto);margin-bottom:.06em}
.destacada__precio{margin-top:18px;font:600 clamp(20px,1.9vw,26px)/1 var(--f);font-variant-numeric:tabular-nums}
.destacada__d{margin-top:12px;max-width:44ch;font-size:17px}
.destacada__nota{margin-top:8px;font-size:15px;color:var(--ciruela-texto)}

/* Menù del dia: mostaza con el bloque morado y el logo apilado cortado (pág. 16) */
.menu__in{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:900px){.menu__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.menu__bloque{position:relative;background:var(--morado);color:var(--mostaza);aspect-ratio:16/11;overflow:hidden}
@media(min-width:900px){.menu__bloque{aspect-ratio:1/1.04}}
.menu__apilado{position:absolute;width:158%;left:-8%;top:-3%}
.menu__txt{display:grid;gap:14px;align-content:center}
.menu__txt h3{font:400 clamp(32px,3.6vw,52px)/1 var(--d);text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--ciruela-texto);width:max-content;max-width:100%}
.menu-dia__precio{font:400 clamp(44px,5vw,72px)/1 var(--d);color:var(--ciruela-texto);margin-top:8px}
.menu__txt p:not(.menu-dia__precio){font-size:18px;max-width:46ch}
.menu__txt .menu-dia__nota{font-size:15.5px}

/* la bodega en tres columnas en lo ancho */
@container (min-width:1000px){.bodega{columns:3}}
/* Postres: dos apartados (tartas y helados), a dos columnas para que no quede la tercera vacía */
@container (min-width:640px){#postres .bodega{columns:2}}

/* ── collage: el escaparate del manual como quinta pieza ── */
.collage__bloque{left:4%;top:12%;width:20%;height:70%}
.collage__a{left:28%;top:0;width:38%;height:58%}
.collage__b{left:20%;top:46%;width:28%;height:54%}
.collage__c{left:52%;top:64%;width:18%;height:36%}
.collage__d{left:73%;top:16%;width:22%;height:78%}
.collage .collage__d img{object-position:36% 50%;filter:none}
.collage .foto picture{height:100%}
@media(max-width:767px){
  .collage{height:156vw}
  .collage__bloque{left:0;top:0;width:40%;height:38%}
  .collage__a{left:28%;top:5%;width:68%;height:34%}
  .collage__b{left:4%;top:42%;width:48%;height:28%}
  .collage__c{left:8%;top:74%;width:38%;height:24%}
  .collage__d{left:56%;top:44%;width:40%;height:54%}
}

/* ── franja de logos cortados en bloques de color (pág. 10) ── */
.franja-marca{display:grid;grid-template-columns:5fr 2fr 5fr;height:clamp(200px,30vw,440px);overflow:hidden}
.fm{position:relative;overflow:hidden}
.fm--mostaza{background:var(--mostaza);color:var(--morado)}
.fm--morado{background:var(--morado);color:var(--mostaza)}
.fm--naranja{background:var(--naranja);color:var(--mostaza)}
.fm__m{position:absolute;width:122%;left:-15%;top:-4%}
.fm--naranja .fm__m{width:130%;left:-3%;top:-20%}
.fm--morado .fm__m{width:auto;height:150%;aspect-ratio:1200/884;left:50%;top:50%;translate:-50% -50%;rotate:-90deg}
@media(max-width:767px){.franja-marca{grid-template-columns:1fr .5fr 1fr;height:56vw}}

/* ── cómo llegar: el letrero del manual al lado del croquis ── */
.visita__mapa{display:grid;gap:14px;margin-top:clamp(40px,5vw,64px)}
@media(min-width:900px){.visita__mapa{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.visita__letrero{position:relative;margin:0;overflow:hidden;border-radius:20px;height:clamp(280px,74vw,380px)}
@media(min-width:900px){.visita__letrero{height:auto}}
.visita__letrero picture{height:100%}
.visita__letrero img{width:100%;height:100%;object-fit:cover;object-position:80% 50%}

/* ── el neón: el gran momento oscuro antes de reservar ── */
.neon{position:relative;display:grid;background:var(--noche);color:#EFE6EE;overflow:hidden}
.neon__f{position:relative;margin:0;overflow:hidden;height:min(122vw,640px)}
.neon__f picture{height:100%}
.neon__f img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.neon__f::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--noche),transparent 26%);pointer-events:none}
.neon__txt{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:8px clamp(18px,4.5vw,72px) clamp(56px,7vw,110px)}
.neon h2{font:400 clamp(44px,6vw,96px)/.95 var(--d);text-transform:uppercase;letter-spacing:-.01em;color:var(--mostaza);max-width:8ch}
.neon p{font-size:18px;max-width:30ch}
.neon :focus-visible{outline-color:var(--mostaza)}
@media(min-width:900px){
  .neon{grid-template-columns:minmax(0,38fr) minmax(0,62fr);min-height:clamp(640px,100vh,960px)}
  .neon__f{order:2;height:auto}
  .neon__f::after{background:linear-gradient(90deg,var(--noche),rgba(32,16,28,.55) 10%,transparent 30%)}
  .neon__txt{justify-content:center;padding:clamp(56px,7vw,110px) clamp(18px,3vw,40px) clamp(56px,7vw,110px) max(clamp(18px,3vw,40px),calc((100vw - 1240px) / 2 + 40px))}
}

/* ── reservar: la tarjeta del manual junto al teléfono ── */
.reservar__tarjeta{margin:0 0 22px;width:min(100%,380px);aspect-ratio:5/4;border-radius:20px;overflow:hidden}
.reservar__tarjeta picture{height:100%}
.reservar__tarjeta img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}

/* ── pie: el logotipo en relieve sobre papel, del manual ── */
.pie{display:grid;background:#E9E0CE;color:var(--tinta)}
.pie__relieve{margin:0;overflow:hidden;height:clamp(260px,72vw,420px)}
.pie__relieve picture{height:100%}
.pie__relieve img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pie__in{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:clamp(40px,5vw,72px) clamp(18px,4.5vw,72px) calc(28px + 84px)} /* + el sitio de la barra fija de abajo */
@media(min-width:900px){
  .pie{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:440px}
  .pie__relieve{order:2;height:auto}
  .pie__in{padding-left:max(clamp(18px,3vw,40px),calc((100vw - 1240px) / 2 + 40px))}
}
.logo-completo--pie{width:220px;color:var(--naranja-texto)}
.pie a{color:var(--tinta);display:inline-block;padding:6px 0}
.pie__nota{font-size:14px;color:#5E5258;max-width:52ch;margin-top:8px;padding-top:16px;border-top:1px solid rgba(34,26,32,.18)}

/* ═════ v3.1 (22/10): fotos en HD. Ninguna foto se ve a más de la mitad de su ancho real (pantallas retina);
   donde la foto no llega, cambia cómo se muestra, no la foto. Comprobado con herramientas/diseno/medir-hd.mjs. ═════ */

/* portada: las fotos de Dish miden 1201–1280 px, así que cada mitad no pasa de 600 px. En escritorio la portada es una caja de
   1200 px como mucho, con las esquinas de arriba redondeadas como la barra, que apoya en la banda mostaza; en el móvil sigue a sangre */
@media(min-width:768px){
  .portada{width:min(100% - 24px,1200px);margin:0 auto;height:max(440px,min(43.2vw,600px));border-radius:22px 22px 0 0}
}

/* arcos: en la proporción de la foto (3:4), para que el recorte no la amplíe; a partir de 1920 px dejan de crecer */
.arcos{max-width:1920px;margin:0 auto}
@media(min-width:768px){.arcos a{height:auto;aspect-ratio:3/4}}

/* cabeceras de «Pasta fresca» y «Bodega»: caja de 600 px como mucho junto al título, en vez de foto a todo el ancho */
@media(min-width:900px){
  .grupo--arriba .grupo__in{grid-template-columns:minmax(0,1fr) minmax(0,600px);column-gap:clamp(40px,5vw,84px)}
  .grupo--arriba .grupo__in>h3{align-self:end}
  .grupo--arriba .grupo__platos{grid-column:1 / -1;margin-top:clamp(8px,1.4vw,20px)}
}

/* collage: el escaparate (648 px de ancho) en su proporción */
@media(min-width:768px){.collage__d{height:auto;aspect-ratio:648/1024}}

/* cómo llegar: el letrero (1280 px, apaisado) en su proporción 5:4 y el croquis a la misma altura */
@media(min-width:900px){
  .visita__letrero{height:auto;aspect-ratio:5/4}
  .visita__mapa .mapa-lienzo{contain:size}
  .visita__mapa .croquis{height:100%}
}

/* pizzas gourmet: foto de banco HD; centrada en el chorro de aceite */
.partida__f img{object-position:40% 62%}

/* pie: el relieve (1320 px) no pasa de 640 px de ancho */
@media(min-width:900px){.pie{grid-template-columns:minmax(0,1fr) min(50%,640px)}}
/* sin recuadro azul al tocar (Oier, 24/10): tap-highlight transparente; contorno solo con teclado (:focus-visible) */
html{-webkit-tap-highlight-color:transparent}
a,button,[role="button"],input,select,textarea,summary,label{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
/* 30/10: foto suya de la pizza Torino (520 px: se ve como mucho a 220) y fotos nuevas del collage */
.destacada{position:relative}
.destacada__f{float:right;width:clamp(140px,16vw,220px);aspect-ratio:1;margin:0 0 12px 16px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px var(--mostaza),0 0 0 8px var(--naranja-texto)}
.destacada__f img{width:100%;height:100%;object-fit:cover}
.collage__a img{object-position:50% 55%}
.collage__c img{object-position:50% 70%}
.destacada__f{shape-outside:circle(50%);shape-margin:12px}
/* 30/10 (Oier): barra de arriba en un morado más claro; fuera el letrero, el escaparate y la foto grande de pizzas gourmet */
.barra{background:#6E3464;box-shadow:0 10px 30px -18px rgba(110,52,100,.6)}
.barra__logo{color:var(--mostaza)}
@media(min-width:900px){.visita__mapa{grid-template-columns:1fr}}
.partida--sin-foto{display:block;min-height:0;margin-bottom:0}
.partida--sin-foto .partida__txt{max-width:1040px;margin:0 auto;padding:clamp(48px,6vw,96px) clamp(18px,4.5vw,72px) clamp(24px,3vw,40px)}
@media(min-width:900px){.partida--sin-foto .destacada{display:grid;grid-template-columns:auto 1fr;column-gap:40px;align-items:center}.partida--sin-foto .destacada__f{float:none;grid-row:1/span 4;grid-column:2;justify-self:end;margin:0;width:clamp(180px,20vw,260px)}}
/* 30/10: firma de OI Studio como en todas las webs (mismo estilo que A.Berri, con los colores de Torino) y enlaces legales */
.pie__legal{font-size:14px}
.pie__legal a{padding:6px 0}
.pie .firma{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:6px;padding:12px 18px;border-radius:999px;border:1px solid rgba(34,26,32,.22);color:var(--tinta);text-decoration:none;transition:background-color 250ms ease,border-color 250ms ease}
.pie .firma span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5E5258}
.pie .firma b{font:400 24px/1 var(--d);letter-spacing:-.02em;color:var(--tinta)}
.pie .firma small{font-size:13px;color:var(--naranja-texto)}
@media(hover:hover) and (pointer:fine){.pie .firma:hover{background:rgba(110,52,100,.08);border-color:#6E3464}}
/* páginas legales (construir-legal.mjs) */
.legal{background:var(--crema);color:var(--tinta)}
.legal__in{max-width:760px;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(32px,4vw,56px)}
.legal__in h1{font:400 clamp(44px,6vw,76px)/.95 var(--d);text-transform:uppercase;margin-bottom:28px}
.legal__in h2{font:400 clamp(24px,2.4vw,30px)/1.1 var(--d);text-transform:uppercase;margin:36px 0 12px}
.legal__in p,.legal__in li{font-size:17px;line-height:1.6;max-width:62ch}
.legal__in p+p{margin-top:12px}
.legal__in ul{padding-left:1.1em;display:grid;gap:8px;margin-top:12px}
.legal__in .legal__datos{list-style:none;padding:20px 22px;background:#fff;border-radius:16px;border:1px solid var(--regla)}
.legal__in a:not(.ovalo){color:var(--tinta);text-underline-offset:3px}
.legal__fecha{margin-top:36px!important;color:var(--texto-2);font-size:15px!important}
.legal__in .ovalo{margin-top:20px}
.legal__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:40px;border-top:1px solid var(--regla)}
.legal__pie .firma,.pie .firma{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 18px;border-radius:999px;border:1px solid rgba(34,26,32,.22);color:var(--tinta);text-decoration:none;transition:background-color 250ms ease,border-color 250ms ease}
.legal__pie .firma span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5E5258}
.legal__pie .firma b{font:400 24px/1 var(--d);letter-spacing:-.02em;color:var(--tinta)}
.legal__pie .firma small{font-size:13px;color:var(--naranja-texto)}
.legal__pie a:not(.firma){color:var(--tinta)}