/* La Barreta · hoja de estilo común (inicio y carta) */
@font-face{font-family:"Lora";src:url(../fonts/lora.woff) format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(../fonts/lora-italic.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-medium.woff) format("woff");font-weight:500;font-display:swap}

:root{
  --papel:#EFEAE1;
  --a:#B04B29;          /* masa terracota */
  --b:#1E2823;          /* masa verde noche */
  --tinta:#1F1C19;
  --tinta-2:#5C544B;
  --sobre-a:#FFF4EA;
  --sobre-b:#E9EDE5;
  --acento-a:#FDE7D3;   /* producción: aclarado desde #F7CDA8 para llegar a 4.5:1 sobre la terracota */
  --acento-b:#E7A783;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --g:clamp(20px,3.9vw,56px);
  --max:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.55 var(--serif);overflow-x:hidden;font-kerning:normal}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
.saltar{position:absolute;left:-999px;top:8px;background:var(--tinta);color:var(--papel);padding:8px 14px;z-index:20}
.saltar:focus{left:8px}

/* etiquetas y utilidades */
.etiqueta,.antetitulo,.cat,.estado,.firma,.credito{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.4}
.nota{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--tinta-2)}
.solo-estrecho{display:none}

.boton{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 24px;border-radius:999px;background:var(--tinta);color:var(--papel);font:500 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;transition:transform .2s ease}
.boton:hover{transform:translateY(-1px)}
.boton-claro{background:var(--papel);color:var(--tinta)}
.enlace{font:500 15px/1 var(--sans);padding:14px 0}

/* cabecera */
.cabecera{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;
  max-width:var(--max);margin:0 auto;padding:22px var(--g)}
.marca{font:600 22px/1 var(--serif);letter-spacing:-.01em;text-decoration:none}
.nav{display:flex;gap:6px 26px;flex-wrap:wrap;font:500 14px/1 var(--sans)}
.nav a{text-decoration:none;padding:10px 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:currentColor}
.js .inicio .nav a{color:var(--sobre-a)}

/* lienzo y masas */
.lienzo{position:relative;isolation:isolate}
.masas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}
.masa-a{fill:var(--a)}
.masa-b{fill:var(--b)}
.lienzo>section{position:relative;max-width:var(--max);margin:0 auto;padding-left:var(--g);padding-right:var(--g)}
.sobre-a{color:var(--sobre-a)}
.sobre-b{color:var(--sobre-b)}
.sobre-a .etiqueta{color:var(--acento-a)}
.sobre-b .etiqueta,.sobre-b .cat,.sobre-b .estado{color:var(--acento-b)}
/* sin JavaScript no hay masas: cada bloque claro lleva su propio fondo */
html:not(.js) .sobre-a{background:var(--a);padding:24px}
html:not(.js) .sobre-b{background:var(--b);padding:24px}

/* fotos (marcadores neutros; se sustituyen cambiando el src) */
.foto{position:relative;overflow:hidden;background:#D8D0C3}
.foto img{width:100%;height:100%;object-fit:cover}

/* ================= INICIO · ESCRITORIO ================= */
.portada{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:150px}
.portada-texto{grid-column:1/6;padding-top:40px}
.antetitulo{color:var(--tinta-2)}
h1{font:600 clamp(84px,9.6vw,148px)/.86 var(--serif);letter-spacing:-.035em;margin:26px 0 34px;margin-left:-.05em}
.entrada{font-size:clamp(20px,1.65vw,24px);line-height:1.42;max-width:22em}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;margin-top:34px}
.foto-portada{grid-column:7/12;aspect-ratio:4/5;margin-top:0}

.filosofia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:300px;padding-bottom:40px}
.filosofia-campo{grid-column:1/8;padding-right:2vw}
.cita-grande{font:italic 500 clamp(56px,6.6vw,100px)/.98 var(--serif);letter-spacing:-.02em;margin:22px 0 40px;margin-left:-.06em;max-width:8.5em}
.palabras p{font-size:clamp(19px,1.6vw,23px);line-height:1.55;max-width:30em}
.palabras p+p{margin-top:.8em}
.firma{margin-top:30px;color:var(--acento-a);font-size:11px}
.firma::before{content:"— "}
.pilares{grid-column:9/13;align-self:end;display:flex;flex-direction:column;gap:46px;padding-bottom:30px}
.pilares li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;max-width:300px}
.pilares li:nth-child(1){margin-left:34%}
.pilares li:nth-child(2){margin-left:17%}
.pilares .num{grid-row:1/3;font:italic 500 40px/1 var(--serif);color:var(--a)}
.pilares strong{font:600 22px/1.2 var(--serif)}
.pilares li>span:last-child{font-size:16px;line-height:1.45;color:var(--tinta-2);margin-top:4px}

.comida{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:240px}
.comida-cabeza{grid-column:3/8;grid-row:1;align-self:end;padding-bottom:56px}
.comida h2,.espacio h2,.avance h2,.visita h2{font:500 clamp(44px,4.6vw,68px)/1 var(--serif);letter-spacing:-.02em;margin:14px 0 18px}
.plato figcaption{display:grid;grid-template-columns:1fr auto;column-gap:16px;margin-top:14px;align-items:baseline}
.plato .cat{grid-column:1/-1;color:var(--a);margin-bottom:2px}
.plato b{font:600 24px/1.2 var(--serif)}
.plato .precio{font-family:var(--sans);font-size:15px;font-variant-numeric:tabular-nums}
.plato .desc{grid-column:1/2;grid-row:3;font-size:16px;line-height:1.4;color:var(--tinta-2)}
.plato.sobre-b .desc{color:inherit;opacity:.85}
.plato-1{grid-column:3/8;grid-row:2}
.plato-1 .foto{aspect-ratio:3/2}
.plato-2{grid-column:9/12;grid-row:1/3;align-self:start;margin-top:40px}
.plato-2 .foto{aspect-ratio:4/5}
.plato-3{grid-column:4/7;grid-row:3;margin-top:110px}
.plato-3 .foto{aspect-ratio:1/1}
.plato-4{grid-column:8/12;grid-row:3/5;margin-top:260px}
.plato-4 .foto{aspect-ratio:4/3}

.avance{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:150px;padding-bottom:40px}
.avance-lado{grid-column:3/5;align-self:end;padding-bottom:12px}
.cifras{display:flex;flex-direction:column;gap:2px;font:400 19px/1.35 var(--serif);color:var(--tinta-2)}
.cifras b{font-weight:600;color:var(--tinta);font-variant-numeric:lining-nums}
.avance-lado .nota{margin-top:18px}
.avance-campo{grid-column:6/13;padding:0 0 0 0}
.avance-cabeza{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 26px;margin-bottom:34px}
.avance h2{margin:0}
.avance-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px;max-width:760px}
.grupo h3{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acento-b);padding-bottom:10px;border-bottom:1px solid rgba(233,237,229,.25);margin-bottom:12px}
.grupo li{display:grid;grid-template-columns:1fr auto;column-gap:14px;padding:5px 0}
.grupo b{font:500 19px/1.3 var(--serif)}
.grupo i{font:400 14px/1.6 var(--sans);font-style:normal;font-variant-numeric:tabular-nums}
.grupo small{grid-column:1/2;font-size:15px;line-height:1.35;opacity:.75}
.avance-campo .boton{margin-top:42px}
.avance-cifras,.avance-nota{display:none}

.espacio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:240px}
.foto-barra{grid-column:1/8;grid-row:1/3;aspect-ratio:3/2}
.espacio-texto{grid-column:8/12;grid-row:1;padding-left:56px;padding-top:30px;align-self:start}
.espacio-texto p:not(.etiqueta){font-size:19px;line-height:1.55;max-width:22em}
.espacio-texto p+p{margin-top:.7em}
.espacio-texto .etiqueta{color:var(--a)}
.foto-mesas{grid-column:9/11;grid-row:2/4;aspect-ratio:3/4;margin-top:40px;align-self:start}
.foto-fachada{grid-column:4/8;grid-row:3/5;aspect-ratio:4/3;margin-top:120px}

.visita{padding-top:300px;padding-bottom:0}
.visita h2{font-size:clamp(56px,6.4vw,96px);margin:0 0 56px}
.visita-rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 24px}
.bloque .etiqueta{margin-bottom:12px}
.bloque .grande{font:500 clamp(24px,2.1vw,30px)/1.2 var(--serif);margin-bottom:12px}
.bloque p{font-size:17px;line-height:1.6}
.bloque .grande a{text-decoration-thickness:1px}
.bloque .boton{margin-top:22px}
.donde{grid-column:1/5}
.cuando{grid-column:5/9}
.contacto{grid-column:9/13}
.horario{display:grid;grid-template-columns:1fr;gap:0;margin:6px 0 14px;font-family:var(--sans);font-size:14px;max-width:300px}
.horario div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(233,237,229,.18)}
.horario dd{opacity:.85;text-align:right;font-variant-numeric:tabular-nums}
.mapa{grid-column:1/9;margin-top:20px}
.mapa iframe{display:block;width:100%;height:360px;border:0;border-radius:2px;background:#2b3631 repeating-linear-gradient(135deg,transparent 0 16px,rgba(233,237,229,.05) 16px 17px);filter:saturate(.7)}
.credito{margin-top:8px;opacity:.6;font-size:10px}
.cierre{font:italic 500 clamp(40px,5.4vw,80px)/1 var(--serif);letter-spacing:-.02em;margin:160px 0 0 33.3%;color:var(--acento-b)}
.pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:120px;padding:26px 0 34px;border-top:1px solid rgba(233,237,229,.2);font-family:var(--sans);font-size:13px;opacity:.85}

/* ================= INICIO · MÓVIL Y TABLETA =================
   En pantallas estrechas la composición no copia el escritorio:
   las masas cruzan la pantalla en diagonales largas, se hinchan
   alrededor de fotos y texto y se afilan en lenguas que pasan por
   detrás de las imágenes. */
@media (max-width:959px){
  body{font-size:17px}
  .solo-ancho{display:none}
  .solo-estrecho{display:inline}
  .cabecera{padding:16px 20px}
  .marca{font-size:20px}
  .nav{gap:6px 18px;font-size:14px}
  .js .inicio .nav a{color:inherit}
  .js .inicio .nav .tel{color:var(--sobre-a)}
  .lienzo>section{padding-left:20px;padding-right:20px}
  .comida h2,.espacio h2,.avance h2,.visita h2{font-size:clamp(40px,11.5vw,60px)}

  /* portada: cuña terracota a la derecha que se hincha en la foto */
  .portada{display:block;padding-top:92px}
  .portada-texto{padding:6px 58px 0 0}
  h1{font-size:clamp(70px,21.5vw,124px);margin:16px 0 20px}
  .entrada{font-size:18px;line-height:1.45}
  .acciones{margin-top:22px;gap:2px 20px}
  .acciones a[href^="tel"]{display:none}
  .foto-portada{width:76%;margin:46px 0 0 6%}

  /* filosofía: el campo terracota y, al pie, una diagonal que deja
     aparecer las tres ideas escalonadas como en escritorio */
  .filosofia{display:block;padding-top:64px;padding-bottom:0}
  .filosofia-campo{padding-right:0}
  .cita-grande{font-size:clamp(46px,13.4vw,76px);margin:14px 0 24px}
  .palabras p{font-size:18.5px;line-height:1.52}
  .firma{margin-top:22px}
  .pilares{margin:96px 0 0;gap:26px;padding:0}
  .pilares li,.pilares li:nth-child(1),.pilares li:nth-child(2){max-width:none;column-gap:12px}
  .pilares li:nth-child(1){margin-left:38%}
  .pilares li:nth-child(2){margin-left:24%}
  .pilares li:nth-child(3){margin-left:10%}
  .pilares .num{font-size:32px}
  .pilares strong{font-size:19px}
  .pilares li>span:last-child{font-size:15px}

  /* comida: escalera de cuatro platos entre las dos masas. Las bravas
     (grande, apaisada) salen de la lengua terracota por la izquierda; el
     burrata (grande) entra en la verde por la derecha; quiche y bocadillo
     (pequeños, verticales) se escalonan en el canal de papel entre ambas. */
  .comida{display:block;padding-top:70px}
  .comida-cabeza{padding:0 0 0 64px}
  .comida-cabeza h2{margin:10px 0 12px}
  .plato{margin:0}
  .plato figcaption{column-gap:8px;margin-top:10px}
  .plato b{font-size:20px}
  .plato .precio{font-size:14px}
  .plato .desc{font-size:15px}
  .plato-1{width:calc(78% + 20px);margin:96px 0 0 -20px}
  .plato-1 .foto{aspect-ratio:4/3}
  .plato-1 figcaption{padding-left:20px}
  .js .plato-1{color:var(--sobre-a)}
  .js .plato-1 .cat{color:var(--acento-a)}
  .plato-2,.plato-3{width:48%}
  .plato-2 .foto,.plato-3 .foto{aspect-ratio:4/5}
  .plato-2{margin:70px 0 0 auto}
  .plato-3{margin-top:calc(104px - 60vw)}
  .plato-2 figcaption,.plato-3 figcaption{grid-template-columns:1fr}
  .plato-2 .precio,.plato-3 .precio{margin-top:2px}
  .plato-3 .desc{grid-row:auto}
  .plato-4{width:calc(78% + 20px);margin:96px -20px 0 auto}
  .plato-4 .foto{aspect-ratio:4/3}
  .plato-4 figcaption{grid-template-columns:1fr auto;padding-right:20px}

  /* avance de la carta: compacto, sin descripciones */
  .avance{display:block;padding-top:64px}
  .avance-lado{display:none}
  .avance-cabeza{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}
  .avance-cifras{display:block!important;font:400 15px/1.4 var(--serif);opacity:.85}
  .avance-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 18px}
  .grupo h3{margin-bottom:6px;padding-bottom:8px}
  .grupo li{padding:4px 0;column-gap:8px}
  .grupo b{font-size:16.5px;line-height:1.25}
  .grupo i{font-size:13px;line-height:1.5}
  .grupo small{display:none}
  .avance-campo .boton{margin-top:28px;width:100%;justify-content:center}
  .avance-nota{display:block!important;margin-top:14px;font-family:var(--sans);font-size:13px;opacity:.8}

  /* espacio: texto primero; la terracota vuelve desde la izquierda con
     la barra y baja como lengua por detrás de las dos fotos pequeñas */
  .espacio{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);column-gap:26px;padding-top:96px}
  .espacio-texto{grid-column:1/-1;grid-row:1;padding:0 0 0 0}
  .espacio-texto p:not(.etiqueta){font-size:17.5px}
  .foto-barra{grid-column:1/-1;grid-row:2;margin:70px 34px 0 -20px}
  .foto-mesas{grid-column:2;grid-row:3;width:auto;margin:56px 0 0 0}
  .foto-fachada{grid-column:1;grid-row:3;width:auto;margin:150px 0 0 0;aspect-ratio:4/5}

  /* visítanos: lo práctico primero y más compacto */
  .visita{padding-top:150px}
  .visita h2{margin-bottom:30px}
  .visita-rejilla{display:flex;flex-direction:column;gap:34px}
  .donde{order:1}.contacto{order:2}.cuando{order:3}.mapa{order:4}
  .bloque{margin:0}
  .bloque .boton{width:100%;justify-content:center}
  .bloque .grande{margin-bottom:8px}
  .horario{grid-template-columns:1fr;max-width:none}
  .mapa{margin:0}
  .mapa iframe{height:230px}
  .cierre{margin:72px 0 0 0;font-size:clamp(40px,11.5vw,64px)}
  .pie{flex-direction:column;margin-top:56px}
}
@media (min-width:600px) and (max-width:959px){
  .lienzo>section{padding-left:40px;padding-right:40px}
  .portada-texto{max-width:600px}
  .foto-portada{width:58%;margin-left:30%}
  .filosofia-campo{max-width:640px}
  .pilares li{max-width:330px}
  .comida-cabeza{padding-left:110px}
  .plato-1{width:calc(60% + 40px);margin-left:-40px}
  .plato-1 figcaption{padding-left:40px}
  .plato-2,.plato-3{width:36%}
  .plato-2{margin-right:7%}
  .plato-3{margin-left:9%;margin-top:calc(150px - 45vw)}
  .plato-4{width:calc(60% + 40px);margin-right:-40px}
  .plato-4 figcaption{padding-right:40px}
  .avance-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .avance-campo .boton{width:auto}
  .espacio-texto{max-width:600px}
  .foto-barra{margin:70px 0 0 -40px;width:calc(64% + 40px)}
  .foto-mesas{width:78%;justify-self:start}
  .foto-fachada{width:78%;justify-self:end}
  .visita-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:40px 40px}
  .donde,.cuando,.contacto{grid-column:auto}
  .mapa{grid-column:1/-1}
  .horario{grid-template-columns:1fr}
  .bloque .boton{width:auto}
  .acciones a[href^="tel"]{display:inline-flex}
}

/* ================= CARTA ================= */
.pagina-carta .cabecera .nav a[aria-current]{border-bottom-color:currentColor}
.js .pagina-carta .nav a{color:var(--sobre-a)}
.carta-cabeza{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:150px;padding-bottom:70px}
.carta-titulo{grid-column:1/7}
.carta-titulo .etiqueta{color:var(--tinta-2)}
.carta-titulo .etiqueta a{text-decoration:none}
.carta-titulo h1{font-size:clamp(76px,8.4vw,128px);margin:22px 0 18px}
.carta-estado{grid-column:9/13;align-self:end;max-width:360px;margin-bottom:6px}
.carta-estado p:not(.etiqueta){font-size:17px;line-height:1.5;margin-top:10px}
.carta-estado .menor{font-family:var(--sans);font-size:13px!important;opacity:.85}

.indice{position:relative;z-index:4;max-width:var(--max);margin:0 auto;padding:0 var(--g);display:flex;flex-wrap:wrap;gap:0 28px;font:500 14px/1 var(--sans)}
.indice a{text-decoration:none;padding:16px 0;border-bottom:2px solid transparent}
.indice a:hover{border-bottom-color:var(--a)}
.indice::before{content:"";position:absolute;left:var(--g);right:var(--g);bottom:0;border-bottom:1px solid rgba(31,28,25,.15)}

.carta-cuerpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:90px 24px;padding-top:70px;padding-bottom:40px}
.categoria h2{font:500 clamp(36px,3.4vw,50px)/1 var(--serif);letter-spacing:-.015em;padding-bottom:16px;border-bottom:2px solid var(--tinta);margin-bottom:8px;scroll-margin-top:70px}
.cat-bocadillos{grid-column:1/6}
.cat-tapas{grid-column:7/11}
.cat-platos{grid-column:1/6}
.cat-final{grid-column:7/11;display:flex;flex-direction:column;gap:70px}
.lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;padding:13px 0;border-bottom:1px solid rgba(31,28,25,.12)}
.lista .n{font:600 20px/1.3 var(--serif)}
.lista .p{font:400 15px/1.75 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.lista .d{grid-column:1/2;font-size:16px;line-height:1.45;color:var(--tinta-2);margin-top:2px}
.lista-corta li{padding:9px 0}
.lista-corta .n{font-weight:500;font-size:19px}
.extras{margin-top:20px;font-family:var(--sans);font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:4px}
.extras li::before{content:"+ ";color:var(--a)}

.carta-pie{padding-top:230px}
.pie-rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 24px;align-items:end}
.pie-rejilla>div:nth-child(1){grid-column:1/6}
.pie-rejilla>div:nth-child(2){grid-column:6/9}
.pie-acciones{grid-column:9/13;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.carta-pie h2{font:500 clamp(44px,4.6vw,68px)/1 var(--serif);letter-spacing:-.02em;margin-bottom:26px}
.carta-pie .grande{font:500 clamp(24px,2.1vw,30px)/1.25 var(--serif);margin:6px 0}
.carta-pie p{font-size:17px}
.carta-pie .etiqueta{margin-bottom:8px}

@media (max-width:959px){
  .js .pagina-carta .nav a{color:inherit}
  .js .pagina-carta .nav .tel{color:var(--sobre-a)}
  .carta-cabeza{display:block;padding-top:92px;padding-bottom:0}
  .carta-titulo{padding-right:58px}
  .carta-titulo h1{font-size:clamp(66px,20vw,112px);margin:16px 0 14px}
  .carta-titulo .entrada{font-size:18px}
  .carta-estado{max-width:none;margin:0;padding:84px 0 0 16%}
  .carta-estado p:not(.etiqueta){font-size:16.5px}
  .indice{position:sticky;top:0;margin-top:92px;padding:0 20px;gap:0 18px;font-size:13px}
  .indice::before{left:0;right:0;top:0;background:var(--papel);z-index:-1}
  .indice a{padding:15px 0}
  .carta-cuerpo{display:block;padding-top:36px}
  .categoria{margin-bottom:56px}
  .categoria h2{font-size:38px;padding-bottom:12px}
  .cat-final{gap:56px;display:flex}
  .lista li{padding:11px 0;column-gap:14px}
  .lista .n{font-size:18.5px}
  .lista .d{font-size:15px}
  .lista-corta li{padding:8px 0}
  .lista-corta .n{font-size:18px}
  .carta-pie{padding-top:150px}
  .pie-rejilla{display:block}
  .pie-rejilla>div{margin-bottom:30px}
  .pie-acciones .boton{width:100%;justify-content:center}
}
@media (min-width:960px) and (max-width:1199px){
  .filosofia-campo{grid-column:1/8;padding-right:0}
  .pilares{grid-column:9/13}
  .pilares li:nth-child(1){margin-left:20%}
  .pilares li:nth-child(2){margin-left:10%}
  .espacio-texto{grid-column:8/12;padding-left:40px}
}

/* ================= FOTOGRAFÍAS REALES =================
   Encuadre individual de cada foto (los originales no se tocan:
   el recorte es solo object-fit / object-position). */
.foto-portada img{object-position:50% 52%}           /* 01: croquetas y bocadillo; deja fuera el borde superior */
.plato-1 .foto img{object-position:50% 50%}          /* 02: el plato completo; quedan fuera las franjas oscuras del archivo */
.plato-2 .foto{aspect-ratio:1/1}                     /* 03: la porción de quiche entera cabe en un cuadrado */
.plato-2 .foto img{object-position:52% 50%}
.plato-3 .foto{aspect-ratio:4/3}                     /* 04: bocadillo alargado, entero en apaisado */
.plato-3 .foto img{object-position:50% 55%}
.plato-4 .foto img{object-position:45% 50%}          /* 05: burrata y verduras, plato completo */
.foto-barra img{object-position:50% 30%}             /* 06: conserva la lámpara y la barra */
.foto-mesas img{object-position:20% 50%}             /* 07: las mesas altas en primer plano */
.foto-fachada{aspect-ratio:4/5}                      /* 08: foto vertical: toldo, puerta y taburetes */
.foto-fachada img{object-position:50% 45%}
@media (max-width:959px){
  .plato-2 .foto{aspect-ratio:1/1}
  .plato-3 .foto{aspect-ratio:1/1}
  .plato-3 .foto img{object-position:46% 55%}
  .plato-3{margin-top:calc(69px - 48vw)}
  .foto-fachada{aspect-ratio:4/5}
}
@media (min-width:600px) and (max-width:959px){
  .plato-3{margin-top:calc(150px - 36vw)}
}
@media (min-width:960px){
  .foto-mesas{grid-column:9/12}                       /* 07: más grande para no dejar un vacío bajo el texto */
}

/* ================= ESQUINAS DE LAS FOTOS (alternativa B, aprobada) =================
   Regla: las fotos que sostiene una masa toman UNA esquina de la curva
   de esa masa (esquina elíptica, orientada hacia donde la masa se curva);
   las fotos que están sobre papel conservan el corte recto, como contraste.
   El lado que sangra fuera de la pantalla siempre queda recto. */
.foto-portada{border-radius:2px 2px 2px 34% / 2px 2px 2px 24%}           /* 01: curva abajo-izquierda, hacia el canal de papel */
.plato-1 .foto{border-radius:2px}                                         /* 02: en escritorio está sobre papel: recta */
.plato-4 .foto{border-radius:30% 2px 2px 2px / 40% 2px 2px 2px}          /* 05: curva arriba-izquierda, hacia el papel */
.foto-barra{border-radius:2px 2px 30% 2px / 2px 2px 42% 2px}             /* 06: curva abajo-derecha */
.plato-2 .foto,.plato-3 .foto,.foto-mesas,.foto-fachada{border-radius:2px}/* sobre papel: rectas */
@media (max-width:959px){
  .foto-portada{border-radius:2px 2px 2px 40% / 2px 2px 2px 26%}
  .plato-1 .foto{border-radius:0 34% 2px 0 / 0 44% 2px 0}               /* sangra por la izquierda: ese lado recto */
  .plato-4 .foto{border-radius:34% 0 0 2px / 44% 0 0 2px}               /* sangra por la derecha */
  .foto-barra{border-radius:0 2px 34% 0 / 0 2px 46% 0}                   /* sangra por la izquierda */
}

/* ================= PRODUCCIÓN ================= */
.foto picture{display:contents}                      /* <picture> no altera el encuadre: el img sigue llenando el marco */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.credito a{text-decoration:none}
.credito a:hover{text-decoration:underline}

/* 404 */
.pagina-404 .lienzo{min-height:100vh}
.error{max-width:var(--max);margin:0 auto;padding:180px var(--g) 120px}
.error h1{font-size:clamp(64px,9vw,128px);margin:22px 0 26px}
.error .entrada{margin-bottom:34px}
.error .acciones{margin-top:0}

/* Accesibilidad: la etiqueta del plato sobre la masa verde usa el acento verde
   (en la referencia .plato .cat pisaba a .sobre-b .cat y quedaba terracota sobre verde) */
.plato.sobre-b .cat{color:var(--acento-b)}

/* Carta: en móviles estrechos (≤399 px) el índice cabe en una sola línea */
@media (max-width:399px){
  .indice{gap:0 13px}
}
/* Móviles muy estrechos (≤359 px): cabecera e índice en una línea */
@media (max-width:359px){
  .cabecera{gap:10px;padding-left:16px;padding-right:16px}
  .marca{font-size:18px}
  .nav{gap:6px 26px;font-size:13px}
  .nav a[href$="#visitanos"],.nav a[href="#visita"]{display:none}   /* el mismo enlace está en la portada y al pie */
  .indice{gap:0 14px;font-size:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .indice::-webkit-scrollbar{display:none}
}

/* Foco visible: los botones claros están sobre la masa verde; su contorno va en claro */
.boton-claro:focus-visible{outline-color:var(--papel)}

/* Portada sin antetítulo ni dato: el título arranca a la altura del borde superior de la foto */
.portada-texto{padding-top:0}
.portada h1{margin-top:0}
@media (max-width:959px){
  .portada-texto{padding-top:6px}
  .portada h1{margin-top:4px}
}

/* El espacio · las dos fotos de abajo (mesas y fachada) */
@media (min-width:960px){
  .foto-fachada{margin-top:40px}                      /* su borde superior cae a media altura de las mesas: escalón claro */
}
@media (max-width:959px){
  .foto-fachada{margin-top:56px}                      /* misma línea superior que las mesas: pareja bajo la barra */
}

/* Carta · pie: con el horario completo, las columnas arrancan a la misma altura */
.pie-rejilla{align-items:start}
.pie-acciones{padding-top:8px}