/* Frutos Secos Bohórquez · Collado Villalba
 *
 * REGISTRO: el color lo pone SU rótulo — negro con el círculo mostaza del
 * logotipo — y el fondo lo ponen los sacos de arpillera que tienen en el
 * escaparate. Nada de paleta de moda: arpillera, negro de rótulo, mostaza de
 * logo, verde de aceituna y rojo de guindilla.
 *
 * Va en tono medio a propósito: la del bar de la plaza salió oscura y la de la
 * churrería salió blanca. Tres claras o tres oscuras seguidas y ya parecen la
 * misma web con otra foto.
 *
 * Tipografía: Bitter, una egipcia de bajo contraste, que es lo más cerca que hay
 * en la web del rótulo serif de su fachada; Figtree para leer; y Caveat sólo
 * para la pizarra, porque su pizarra está escrita a mano y ponerla en una
 * tipografía de imprenta habría sido cambiarla.
 */

@font-face { font-family:'Bitter'; src:url(fonts/bitter.woff2) format('woff2'); font-weight:400 900; font-display:swap; }
@font-face { font-family:'Figtree'; src:url(fonts/figtree.woff2) format('woff2'); font-weight:400 800; font-display:swap; }
@font-face { font-family:'Caveat'; src:url(fonts/caveat.woff2) format('woff2'); font-weight:400 700; font-display:swap; }

:root {
  --arpillera:  #e8dcc4;   /* el saco de legumbres del escaparate */
  --arpillera-2:#d8c8a8;
  --papel:      #f4ecdb;
  --negro:      #16130f;   /* el rótulo */
  --negro-2:    #241f18;
  --mostaza:    #e3b325;   /* el círculo del logotipo */
  --mostaza-cl: #f3cd5e;
  --oliva:      #7f9b33;
  --guindilla:  #c4342a;
  --tinta:      #221c14;
  --tinta-ap:   #6a5c46;
  --rotulo: 'Bitter', Georgia, serif;
  --texto: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --mano: 'Caveat', 'Segoe Script', cursive;
  --ancho: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin:0; background:var(--arpillera); color:var(--tinta); font-family:var(--texto); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, picture, canvas, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
.saltar { position:absolute; left:-9999px; top:0; z-index:99; background:var(--negro); color:#fff; padding:.8rem 1.2rem; font-weight:700; text-decoration:none; }
.saltar:focus { left:0; }
:focus-visible { outline:3px solid var(--guindilla); outline-offset:3px; }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.3rem; padding:.75rem clamp(1rem,4vw,2.2rem); background:var(--negro); color:var(--papel); transition:box-shadow .25s; }
.cab--pegada { box-shadow:0 8px 26px -16px #000c; }
.cab__marca { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.cab__marca svg { width:40px; height:40px; flex:none; }
.cab__nom { font-family:var(--rotulo); font-weight:900; font-size:1.1rem; line-height:1.08; letter-spacing:.01em; text-transform:uppercase; display:flex; flex-direction:column; gap:.25rem; }
.cab__nom span { font-family:var(--texto); font-size:.6rem; font-weight:700; letter-spacing:.2em; color:#f4ecdb99; white-space:nowrap; }
.nav { display:flex; gap:1.4rem; margin-left:auto; }
.nav a { text-decoration:none; font-size:.87rem; font-weight:600; color:#f4ecdbc0; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.nav a:hover { color:#fff; border-color:var(--mostaza); }
.cab__wa { display:inline-flex; align-items:center; gap:.5rem; background:var(--mostaza); color:var(--negro); text-decoration:none; padding:.6rem 1.1rem; font-weight:800; font-size:.88rem; border-radius:3px; transition:background .18s, transform .18s; }
.cab__wa svg { width:17px; height:17px; flex:none; }
.cab__wa:hover { background:var(--mostaza-cl); transform:translateY(-1px); }
@media (max-width:920px) { .nav { display:none; } .cab__wa { margin-left:auto; } }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada { background:var(--negro); color:var(--papel); position:relative; overflow:hidden; }
.portada::after {
  /* La trama del saco de arpillera, muy tenue. */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(0deg, #ffffff07 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, #ffffff07 0 2px, transparent 2px 5px);
}
.portada__caja { position:relative; z-index:2; max-width:var(--ancho); margin:0 auto; padding:clamp(2.4rem,6vw,4.4rem) clamp(1rem,4vw,2.2rem); display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:center; }
@media (max-width:940px) { .portada__caja { grid-template-columns:1fr; } }
.rotulo { margin:0 0 1rem; font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--mostaza); display:flex; align-items:center; gap:.7rem; }
.rotulo::before { content:''; width:28px; height:3px; background:var(--mostaza); flex:none; }
.portada h1 { font-family:var(--rotulo); font-weight:900; font-size:clamp(2.4rem,6.2vw,4.5rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1.1rem; text-wrap:balance; }
.portada h1 em { font-style:normal; color:var(--mostaza); display:block; }
.portada__bajo { margin:0 0 1.7rem; max-width:34rem; font-size:clamp(1.02rem,1.5vw,1.14rem); color:#f4ecdbc4; }
.portada__acc { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.8rem; }
.bot { display:inline-flex; align-items:center; gap:.55rem; padding:.82rem 1.4rem; text-decoration:none; font-weight:800; font-size:.95rem; min-height:44px; border-radius:3px; transition:transform .18s, background .18s, border-color .18s; }
.bot svg { width:18px; height:18px; flex:none; }
.bot--fuerte { background:var(--mostaza); color:var(--negro); }
.bot--fuerte:hover { background:var(--mostaza-cl); transform:translateY(-2px); }
.bot--linea { border:2px solid #f4ecdb44; color:var(--papel); }
.bot--linea:hover { border-color:var(--mostaza); color:var(--mostaza); transform:translateY(-2px); }
.portada__pie { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; padding-top:1.2rem; border-top:1px solid #f4ecdb26; font-size:.83rem; color:#f4ecdb99; }
.portada__pie b { display:block; font-family:var(--rotulo); font-weight:900; font-size:1.7rem; line-height:1.08; color:var(--papel); }
@media (max-width:560px) { .portada__pie { gap:.7rem; font-size:.75rem; } .portada__pie b { font-size:1.4rem; } }

.portada__foto { position:relative; }
.portada__foto img { border-radius:6px; box-shadow:0 30px 60px -30px #000c; }
.portada__foto figcaption { margin-top:.7rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#f4ecdb80; text-align:center; }

/* ── Secciones ────────────────────────────────────────────────────── */
.sec { padding:clamp(3.2rem,7vw,5.6rem) clamp(1rem,4vw,2.2rem); }
.sec__caja { max-width:var(--ancho); margin:0 auto; }
.sec--negro { background:var(--negro); color:var(--papel); }
.sec--negro .rotulo { color:var(--mostaza); }
.sec--papel { background:var(--papel); }
h2 { font-family:var(--rotulo); font-weight:900; font-size:clamp(1.85rem,4.2vw,2.9rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1rem; max-width:22ch; text-wrap:balance; }
.entradilla { margin:0 0 2.2rem; max-width:58ch; font-size:1.05rem; color:var(--tinta-ap); }
.sec--negro .entradilla { color:#f4ecdbaa; }
.sube { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.sube.dentro { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .sube { opacity:1; transform:none; } }

/* ── El montador de pinchos ───────────────────────────────────────── */
.montador { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media (max-width:880px) { .montador { grid-template-columns:1fr; } }
.montador__tabla { background:#efe6d2; border-radius:8px; padding:1.2rem; display:grid; place-items:center; box-shadow:inset 0 2px 14px #0000001a; }
.montador__tabla svg { width:min(300px,100%); height:auto; display:block; }
.piezas { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin:0 0 1.2rem; padding:0; list-style:none; }
@media (max-width:520px) { .piezas { grid-template-columns:repeat(2,1fr); } }
.piezas button { width:100%; min-height:76px; display:grid; place-items:center; gap:.3rem; padding:.6rem .4rem; background:#ffffff12; border:1px solid #f4ecdb26; border-radius:6px; color:var(--papel); font-family:var(--texto); font-size:.72rem; font-weight:700; line-height:1.2; text-align:center; cursor:pointer; transition:background .18s, border-color .18s, transform .18s; }
.piezas button:hover { background:#ffffff1e; border-color:var(--mostaza); transform:translateY(-2px); }
.piezas button svg { width:52px; height:26px; }
.pincho__nom { font-family:var(--rotulo); font-weight:900; font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.2; margin:0 0 .35rem; color:var(--mostaza-cl); }
.pincho__aviso { margin:0 0 1rem; font-size:.93rem; color:#f4ecdb99; min-height:1.4em; }
.pincho__quitar { background:transparent; border:1px solid #f4ecdb3a; color:#f4ecdbc0; border-radius:3px; padding:.5rem 1rem; font-family:var(--texto); font-weight:700; font-size:.85rem; min-height:44px; cursor:pointer; transition:border-color .18s, color .18s; }
.pincho__quitar:hover:not(:disabled) { border-color:var(--guindilla); color:#ff9a90; }
.pincho__quitar:disabled { opacity:.35; cursor:default; }

/* ── La pizarra ───────────────────────────────────────────────────── */
.pizarra__caja { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3.5vw,2.8rem); align-items:center; }
@media (max-width:860px) { .pizarra__caja { grid-template-columns:1fr; } }
.pizarra {
  background:#2f2a24; border:10px solid #6b5330; border-radius:6px;
  padding:1.8rem 1.6rem; box-shadow:0 20px 46px -26px #000;
}
.pizarra h3 { font-family:var(--mano); font-weight:700; font-size:2rem; color:var(--mostaza-cl); margin:0 0 .8rem; transform:rotate(-1.2deg); }
.pizarra ul { list-style:none; margin:0; padding:0; display:grid; gap:.42rem; }
.pizarra li { font-family:var(--mano); font-size:1.5rem; line-height:1.16; color:#f2ede1; }
/* Cada renglón cae un poco distinto, como una pizarra escrita a mano. Sin esto
   parece una lista de la compra en el ordenador. */
.pizarra li:nth-child(odd)  { transform:rotate(-.5deg); }
.pizarra li:nth-child(3n)   { transform:rotate(.6deg) translateX(3px); }
.pizarra li:nth-child(4n)   { transform:rotate(-.9deg) translateX(-2px); }
.pizarra__pie { margin:1rem 0 0; font-family:var(--texto); font-size:.78rem; color:#f2ede180; }
.pizarra__foto img { border-radius:6px; box-shadow:0 20px 46px -26px #0009; }
.pizarra__foto figcaption { margin-top:.7rem; font-size:.82rem; color:var(--tinta-ap); }

/* ── Lo que anuncia el rótulo ─────────────────────────────────────── */
.rotulos { display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem; list-style:none; margin:0; padding:0; }
@media (max-width:1000px) { .rotulos { grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px)  { .rotulos { grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px)  { .rotulos { grid-template-columns:1fr; } }
.rotulos li { background:#fff; border:1px solid var(--arpillera-2); border-radius:6px; padding:1.25rem 1.1rem; display:flex; flex-direction:column; gap:.45rem; }
.rotulos svg { width:32px; height:32px; color:var(--negro); }
.rotulos h3 { margin:0; font-family:var(--rotulo); font-weight:900; font-size:1.02rem; line-height:1.2; }
.rotulos p { margin:0; font-size:.9rem; color:var(--tinta-ap); }

/* ── Dónde ────────────────────────────────────────────────────────── */
.donde { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch; }
@media (max-width:860px) { .donde { grid-template-columns:1fr; } }
.ficha { display:grid; gap:1.15rem; align-content:center; }
.ficha__fila { display:flex; gap:.9rem; align-items:flex-start; }
.ficha__fila svg { width:21px; height:21px; color:var(--mostaza); flex:none; margin-top:.2rem; }
.ficha__fila b { display:block; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:#f4ecdb8c; font-weight:800; margin-bottom:.18rem; }
.ficha__fila > div { font-size:1.02rem; }
.donde__foto img { border-radius:6px; }
.donde__foto figcaption { margin-top:.7rem; font-size:.82rem; color:#f4ecdb90; }

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie { background:var(--negro-2); color:#f4ecdb9c; padding:clamp(2.4rem,5vw,3.4rem) clamp(1rem,4vw,2.2rem) 1.9rem; font-size:.88rem; }
.pie__caja { max-width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
@media (max-width:780px) { .pie__caja { grid-template-columns:1fr; } }
.pie h3 { font-family:var(--rotulo); font-weight:900; color:var(--papel); font-size:1.02rem; margin:0 0 .7rem; }
.pie a { color:#f4ecdbc0; text-decoration:none; }
.pie a:hover { color:var(--mostaza); text-decoration:underline; }
.pie ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.pie__legal { max-width:var(--ancho); margin:2rem auto 0; padding-top:1.3rem; border-top:1px solid #ffffff1a; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; font-size:.8rem; }

/* ── Legales ──────────────────────────────────────────────────────── */
.legal { max-width:46rem; margin:0 auto; padding:clamp(2.4rem,6vw,4.2rem) clamp(1rem,4vw,2.2rem); }
.legal h1 { font-family:var(--rotulo); font-weight:900; font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.08; margin:0 0 1.5rem; }
.legal h2 { font-size:1.2rem; margin:2.1rem 0 .6rem; max-width:none; }
.legal a { color:#9a6a06; }
.legal .volver { display:inline-block; margin-bottom:1.5rem; font-weight:800; text-decoration:none; color:var(--negro); }
.legal .volver:hover { text-decoration:underline; }

/* MEDIDO en un móvil de 390 px: el subtítulo de la marca lleva "nowrap" y, al no
   poder encoger, empujaba el botón de WhatsApp fuera de la pantalla — la página
   se movía de lado. En móvil el subtítulo sobra: el nombre ya está ahí. */
@media (max-width: 560px) {
  .cab__nom span { display: none; }
  .cab__marca { min-width: 0; }
  .cab__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}