/* ==========================================================================
   Casa Latina · sistema visual
   Los colores vienen de los carteles de flechas que tienen colgados en la
   entrada: cada categoría con su color. La tipografía de rótulo (Anton)
   imita los letreros pintados del local.
   ========================================================================== */

:root{
  --ink:#12100d;
  --ink-2:#1c1712;
  --paper:#f2e9dc;
  --paper-2:#e6d9c6;
  --mango:#ee9a4b;      /* naranja exacto del logo */
  --amber:#f7d117;      /* amarillo del rótulo */
  --lima:#8cc63f;
  --cyan:#29abe2;
  --rojo:#e8412e;
  --morado:#a864c8;
  --rosa:#ec4899;
  --muted:#a8927b;
  --hair:rgba(238,154,75,.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:'Outfit',sans-serif;font-weight:300;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--ink)}

/* grano: quita el aspecto de "fondo plano de plantilla" */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#dust{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}

/* ---------- tipografía de rótulo ---------- */
.sign-type{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;line-height:.95}
.display{font-family:'Fraunces',serif;font-weight:600;line-height:.94;letter-spacing:-.02em}
.hollow{color:transparent}
@supports (-webkit-text-stroke: 1px black){
  .hollow{-webkit-text-stroke:2px var(--mango)}
}
@supports not (-webkit-text-stroke: 1px black){
  .hollow{color:var(--mango)}
}

/* ---------- flecha de cartel (la forma de sus letreros) ---------- */
.arrow{
  display:inline-block;padding:.5rem 1.5rem .5rem 1.7rem;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:.82rem;color:var(--ink);background:var(--mango);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%);
  transition:transform .25s,filter .25s;
}
.arrow:hover{transform:translateX(4px);filter:brightness(1.1)}
.arrow.ghost{background:transparent;color:var(--paper);
  box-shadow:none;border:0;padding-left:0;clip-path:none;letter-spacing:.1em;font-size:.78rem}
.arrow.ghost:hover{color:var(--mango);transform:none}
.a-lima{background:var(--lima)}.a-cyan{background:var(--cyan)}
.a-amber{background:var(--amber)}.a-rojo{background:var(--rojo);color:var(--paper)}
.a-morado{background:var(--morado);color:var(--paper)}.a-rosa{background:var(--rosa);color:var(--paper)}

/* ---------- cabecera ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(1rem,4vw,2.6rem);
  transition:background .35s,padding .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
header.scrolled{background:rgba(18,16,13,.9);backdrop-filter:blur(12px);
  border-bottom-color:var(--hair);padding-top:.6rem;padding-bottom:.6rem}
header .badge{height:62px;width:auto;transition:height .35s;flex:none}
header.scrolled .badge{height:46px}
header nav{display:flex;align-items:center;gap:1.6rem}
/* 44px es el minimo comodo para un dedo; el icono sigue midiendo 26px pero la
   zona pulsable llega al minimo sin agrandar el dibujo. */
.burger{display:none;background:none;border:0;color:var(--paper);cursor:pointer;
  width:44px;height:44px;padding:0;align-items:center;justify-content:center;
  flex-direction:column;flex:none;margin-right:-8px}
.burger span{display:block;width:26px;height:2px;background:currentColor;margin:4px 0}

/* menú móvil */
.sheet{position:fixed;inset:0;z-index:39;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  padding:2rem clamp(1.4rem,7vw,3rem);
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.sheet.open{transform:none}
.sheet a{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(2rem,10vw,3rem);line-height:1.05;color:var(--paper)}
.sheet a span{color:var(--mango)}
.sheet .meta{margin-top:1.6rem;color:var(--muted);font-size:.9rem;line-height:1.9}

/* ---------- rail vertical ---------- */
.rail{position:fixed;left:0;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;z-index:20;padding:.6rem .5rem;
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.68rem;
  letter-spacing:.42em;color:var(--muted);pointer-events:none}

/* ---------- portada ---------- */
main{position:relative;z-index:10}

.hero{position:relative;min-height:100svh;display:grid;
  grid-template-columns:1.02fr .98fr;align-items:center;
  gap:clamp(1.4rem,4vw,3.4rem);
  padding:7rem 0 2.6rem clamp(2.2rem,6vw,5rem)}
.hero-copy{position:relative;z-index:3}
.eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.74rem;
  letter-spacing:.3em;color:var(--mango)}
.eyebrow::before{content:"";width:clamp(24px,5vw,56px);height:2px;background:var(--mango);
  transform-origin:left;animation:ruleIn .8s cubic-bezier(.65,0,.35,1) .1s backwards}
@keyframes ruleIn{from{transform:scaleX(0)}}
.hero h1{font-family:'Fraunces',serif;font-weight:600;line-height:.9;
  letter-spacing:-.025em;font-size:clamp(2.7rem,7.4vw,6.1rem)}
.hero h1 .l2{font-style:italic;font-weight:500;color:var(--mango)}
.hero h1 .l3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:0;display:block;font-size:.92em}
.hero .lede{max-width:44ch;margin-top:1.6rem;color:var(--muted);font-size:clamp(1rem,1.2vw,1.1rem)}
.hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:2.2rem}

/* entrada de portada: cada pieza con su retardo, sin esperar al scroll */
.hero .eyebrow{animation:riseIn .8s cubic-bezier(.2,.7,.2,1) .05s backwards}
.hero h1>*,.hero h1{display:block}
.hero h1 .ln{opacity:0;transform:translateY(38px);
  animation:riseIn .95s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .ln:nth-child(1){animation-delay:.14s}
.hero h1 .ln:nth-child(2){animation-delay:.26s}
.hero h1 .ln:nth-child(3){animation-delay:.38s}
.hero .lede{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) .52s backwards}
.hero .cta{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) .64s backwards}

/* panel de la fachada: sangra por el borde derecho */
/* la caja se ajusta a la foto para que el sello y la chapa caigan en
   sus esquinas, no en las de la celda de la rejilla */
.hero-art{position:relative;align-self:center;display:block}
.hero-shot{position:relative;width:100%;height:min(80vh,700px);overflow:hidden;
  clip-path:inset(0 0 100% 0);animation:curtainUp 1.1s cubic-bezier(.65,0,.35,1) .2s forwards}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:center 44%;
  transform:scale(1.2);animation:settle 1.6s cubic-bezier(.2,.7,.2,1) .2s forwards}
@keyframes curtainUp{to{clip-path:inset(0 0 0 0)}}
@keyframes settle{to{transform:scale(1)}}
.hero-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,16,13,.9) 0%,rgba(18,16,13,.22) 40%,transparent 66%)}
/* la chapa cae girando y se asienta en su ángulo */
.hero-badge{position:absolute;left:-52px;bottom:-26px;width:clamp(96px,11vw,142px);
  z-index:4;transform:rotate(-9deg);filter:drop-shadow(0 10px 26px rgba(0,0,0,.65));
  animation:dropBadge .9s cubic-bezier(.34,1.4,.5,1) .78s backwards}
@keyframes dropBadge{
  from{opacity:0;transform:rotate(-38deg) scale(.72)}
}

/* sello de valoración: se estampa, como un sello de tinta */
.stamp{position:absolute;left:-46px;top:-30px;z-index:5;
  width:clamp(96px,10vw,128px);aspect-ratio:1;border-radius:50%;
  border:2px dashed var(--amber);color:var(--amber);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-11deg);background:rgba(18,16,13,.82);
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;line-height:1;
  animation:stampIn .5s cubic-bezier(.34,1.5,.5,1) .92s backwards}
@keyframes stampIn{
  from{opacity:0;transform:rotate(-11deg) scale(1.9)}
}
.stamp b{font-size:clamp(1.4rem,2.4vw,2rem)}
.stamp i{font-style:normal;font-size:.53rem;letter-spacing:.14em;margin-top:.35rem;
  color:var(--paper);opacity:.85;max-width:82%}

/* ---------- bandas en marquesina ----------
   El movimiento lo lleva site.js: nada de animation-play-state (que frena
   en seco al pasar el ratón). Aquí la velocidad tiene inercia y el
   conjunto se inclina un poco según la velocidad del scroll. */
.bands{position:relative;z-index:10;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.band{overflow:hidden;display:flex}
.band .track{display:flex;flex:none;gap:2.4rem;padding:.55rem 1.2rem;white-space:nowrap;
  font-family:'Anton',sans-serif;text-transform:uppercase;will-change:transform}
.band-a{background:var(--mango);color:var(--ink)}
.band-a .track{font-size:clamp(1.1rem,2.4vw,1.9rem);letter-spacing:.04em}
.band-b{background:var(--ink-2);border-top:2px solid var(--ink)}
.band-b .track{font-size:clamp(.72rem,1.2vw,.9rem);letter-spacing:.24em;gap:1.8rem}
.band-a .track span::after{content:"◆";margin-left:2.4rem;font-size:.5em;
  vertical-align:middle;opacity:.55}
.band-b .track i{font-style:normal;color:var(--muted)}
.band-b .track i::after{content:"·";margin-left:1.8rem;color:var(--mango)}

/* ---------- bloque claro ---------- */
.light{background:var(--paper);color:var(--ink);position:relative;z-index:10}
.light .muted{color:#6d5c49}
.dark{background:var(--ink);position:relative;z-index:10}

section{padding:clamp(3.4rem,8vh,6rem) clamp(1.2rem,5vw,4rem)}
.wrap{max-width:1180px;margin:0 auto}

/* titular de sección: número al margen, texto a sangre izquierda */
.shead{display:grid;grid-template-columns:auto 1fr;gap:clamp(.9rem,3vw,2.2rem);
  align-items:start;margin-bottom:clamp(2rem,5vw,3.2rem)}
.shead .num{font-family:'Anton',sans-serif;font-size:.82rem;letter-spacing:.2em;
  color:var(--mango);padding-top:.7rem}
.shead h2{font-family:'Fraunces',serif;font-weight:600;line-height:.95;letter-spacing:-.02em;
  font-size:clamp(1.9rem,5.4vw,3.7rem);max-width:22ch}
.shead p{margin-top:.9rem;max-width:52ch;color:var(--muted)}
.light .shead p{color:#6d5c49}
.squiggle{display:block;width:clamp(90px,16vw,180px);height:9px;margin-top:1rem;
  background-repeat:repeat-x;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='9'%3E%3Cpath d='M0 6 Q9 0 18 6 T36 6' fill='none' stroke='%23ee9a4b' stroke-width='2.4'/%3E%3C/svg%3E")}

/* ---------- mosaico asimétrico ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.4vw,1rem)}
.tile{position:relative;overflow:hidden;background:var(--ink-2);
  border:6px solid var(--paper);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.light .tile{border-color:#fff}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile figcaption{position:absolute;left:0;bottom:.8rem;
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.7rem;letter-spacing:.12em;
  background:var(--ink);color:var(--paper);padding:.4rem .8rem}
.tile.t-a{grid-column:span 4;aspect-ratio:16/10}
.tile.t-b{grid-column:span 2;aspect-ratio:3/4;transform:rotate(1.4deg)}
.tile.t-c{grid-column:span 2;aspect-ratio:1;transform:rotate(-1.6deg)}
.tile.t-d{grid-column:span 2;aspect-ratio:1}
.tile.t-e{grid-column:span 2;aspect-ratio:1;transform:rotate(1deg)}

/* ---------- cita a sangre ---------- */
.quote{position:relative;z-index:10;min-height:min(86vh,720px);display:grid;
  align-items:end;overflow:hidden}
/* La foto es muy vertical (1400×1866) y la sección es muy ancha y baja, así
   que solo se ve una franja fina de su altura. Anclada arriba se ve siempre
   la frase pintada en la pared, que es lo que da sentido a la cita; el plato
   y la copa quedan fuera de encuadre, pero son decorativos. */
.quote>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top;opacity:.5}
.quote::before{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--ink) 2%,rgba(18,16,13,.92) 30%,
    rgba(18,16,13,.5) 60%,rgba(18,16,13,.2))}
.quote-in{position:relative;padding:clamp(2.6rem,7vw,6rem) clamp(1.2rem,5vw,4rem);
  max-width:1180px;margin:0 auto;width:100%}
.quote blockquote{font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;max-width:24ch}
.quote .who{margin-top:1.3rem;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.26em;color:var(--amber)}
.quote .foot{margin-top:1.1rem;color:var(--muted);max-width:46ch;font-size:.94rem}

/* ---------- opiniones como notas ---------- */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  gap:clamp(1rem,2.4vw,1.8rem)}
.note{background:#fff;color:var(--ink);padding:1.7rem 1.5rem 1.4rem;
  box-shadow:0 14px 34px rgba(0,0,0,.16);position:relative}
.note:nth-child(1){transform:rotate(-1.1deg)}
.note:nth-child(2){transform:rotate(.8deg)}
.note:nth-child(3){transform:rotate(-.5deg)}
.note .st{color:var(--mango);letter-spacing:.18em;font-size:.9rem}
.note p{margin:.7rem 0 1rem;font-size:1rem;line-height:1.55;color:#241d15}
.note cite{font-style:normal;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:.66rem;letter-spacing:.16em;color:#8a7660}

/* ---------- visitanos ---------- */
.visit{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1rem,2.4vw,1.6rem)}

/* El mapa de Google llega en blanco brillante y rompe la paleta. Se tiñe con
   filtros hasta la gama del sitio (invertido, rotado al ámbar) y encima lleva
   una capa naranja en multiply. Al pasar el ratón recupera color real, que es
   cuando de verdad quieres leer las calles. */
.map-box{position:relative;border:1px solid var(--hair);overflow:hidden;min-height:420px;
  background:var(--ink-2)}
.map-box iframe{width:100%;height:100%;min-height:420px;border:0;display:block;
  filter:invert(.92) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(1.08);
  transition:filter .6s ease}
.map-box::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(238,154,75,.26),rgba(232,65,46,.13) 55%,rgba(41,171,226,.12));
  mix-blend-mode:multiply;transition:opacity .6s ease}
.map-box::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 90px 12px rgba(18,16,13,.65)}
.map-box:hover iframe,.map-box:focus-within iframe{filter:none}
.map-box:hover::after,.map-box:focus-within::after{opacity:0}

/* chapita sobre el mapa, en la misma familia que el sello del héroe.
   Vive justo donde Google pone el control de satélite: al pasar el ratón
   se aparta (no solo se atenúa) para dejarlo pulsable del todo. */
.map-tag{position:absolute;left:0;bottom:0;z-index:3;pointer-events:none;
  display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;
  background:var(--ink);color:var(--mango);
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.7rem;letter-spacing:.16em;
  opacity:1;transform:translateY(0);
  transition:opacity .3s ease,transform .3s ease}
.map-box:hover .map-tag,.map-box:focus-within .map-tag{opacity:0;transform:translateY(8px)}
.map-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mango);
  box-shadow:0 0 0 0 rgba(238,154,75,.7);animation:ping 2.4s ease-out infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(238,154,75,.65)}
  70%{box-shadow:0 0 0 14px rgba(238,154,75,0)}
  100%{box-shadow:0 0 0 0 rgba(238,154,75,0)}
}
.visit-col{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.4rem)}
.card{border:1px solid var(--hair);padding:clamp(1.2rem,2.4vw,1.7rem);background:var(--ink-2)}
.card .lbl{display:block;margin-bottom:.9rem;font-family:'Anton',sans-serif;
  text-transform:uppercase;font-size:.7rem;letter-spacing:.22em;color:var(--mango)}
.addr{font-size:1.06rem;line-height:1.5}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.acts a{flex:1 1 120px;text-align:center;padding:.8rem .6rem;
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.74rem;letter-spacing:.1em;
  transition:.25s}
.b-call{border:1px solid var(--mango);color:var(--mango)}
.b-call:hover{background:var(--mango);color:var(--ink)}
.b-wa{background:#25d366;color:#08301a}
.b-wa:hover{filter:brightness(1.1)}
.b-map{border:1px solid var(--hair);color:var(--paper)}
.b-map:hover{border-color:var(--mango);color:var(--mango)}

.hours{list-style:none;font-size:.95rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;
  color:var(--muted);border-bottom:1px dashed rgba(168,146,123,.16)}
.hours li:last-child{border-bottom:none}
.hours li.today{color:var(--paper)}
.hours li.today span:first-child{color:var(--mango)}
.hours li span:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.light .hours li{color:#6d5c49;border-bottom-color:rgba(109,92,73,.18)}
.light .hours li.today{color:var(--ink)}
.now{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  padding:.34rem .8rem;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.14em}
.now i{width:7px;height:7px;border-radius:50%;background:currentColor}
.now.si{color:#5f9c1f;background:rgba(140,198,63,.16)}
.now.no{color:#c9352a;background:rgba(232,65,46,.14)}
.dark .now.si{color:var(--lima)}
.dark .now.no{color:#f08b82}

/* ---------- cierre con dos accesos ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:min(60vh,520px)}
.half{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.6rem,4vw,3rem);overflow:hidden;min-height:270px}
.half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.4;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .5s}
.half:hover img{transform:scale(1.07);opacity:.55}
.half::before{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,16,13,.94),rgba(18,16,13,.3))}
.half>*{position:relative}
.half h3{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3rem);line-height:.98}
.half .arrow{align-self:flex-start}
.half p{color:var(--muted);margin:.6rem 0 1.3rem;max-width:34ch;font-size:.96rem}
.half+.half{border-left:2px solid var(--ink)}

/* ---------- páginas internas ---------- */
.phead{padding:clamp(7.5rem,15vh,10rem) clamp(1.2rem,5vw,4rem) clamp(2rem,4vw,3rem)}
.phead .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(.9rem,3vw,2.2rem)}
.phead h1{font-family:'Fraunces',serif;font-weight:600;line-height:.92;letter-spacing:-.025em;
  font-size:clamp(2.4rem,8vw,5.4rem)}
.phead .num{font-family:'Anton',sans-serif;font-size:.82rem;letter-spacing:.2em;
  color:var(--mango);padding-top:.9rem}
.phead p{margin-top:1rem;max-width:54ch;color:var(--muted)}
.back{display:inline-block;margin-bottom:1.2rem;font-family:'Anton',sans-serif;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.2em;color:var(--muted)}
.back:hover{color:var(--mango)}

/* carta: replica el tablón del local (pastillas naranjas sobre negro) */
.board{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(1.6rem,3vw,3rem)}
.grp{break-inside:avoid}
.grp h2{display:inline-block;background:var(--mango);color:var(--ink);
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.02rem;padding:.4rem 1.1rem;margin-bottom:1.1rem}
.grp.big h2{background:none;color:var(--amber);font-size:clamp(1.8rem,4.6vw,2.6rem);padding:0}
.grp .note-sub{color:var(--muted);font-size:.86rem;margin:-.7rem 0 1.1rem}
.it{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px dashed rgba(168,146,123,.16)}
.it:last-child{border-bottom:none}
.it .nm{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.92rem;
  letter-spacing:.03em;color:var(--mango)}
.it .ds{display:block;font-family:'Outfit',sans-serif;text-transform:none;letter-spacing:0;
  color:var(--paper);opacity:.72;font-size:.88rem;font-weight:300;margin-top:.15rem;line-height:1.5}
.it .pr{font-family:'Anton',sans-serif;font-size:1.12rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fills{color:var(--muted);font-size:.94rem}
.fills b{color:var(--paper);font-weight:400}

/* fichas de plato con foto (carta) */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(.7rem,1.6vw,1.1rem);max-width:1180px;margin:0 auto clamp(2.4rem,5vw,3.6rem)}
.pick{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--hair)}
.pick img{width:100%;height:100%;object-fit:cover;opacity:.86;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pick:hover img{transform:scale(1.06);opacity:1}
.pick figcaption{position:absolute;inset:auto 0 0 0;padding:2.6rem .9rem .9rem;
  background:linear-gradient(0deg,rgba(12,10,8,.96),rgba(12,10,8,.5) 55%,transparent)}
.pick .nm{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.94rem;line-height:1.1}
.pick .pr{color:var(--amber);font-family:'Anton',sans-serif;font-size:1.05rem;margin-top:.25rem}

/* formulario */
.form-wrap{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.1fr .9fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
form.res{background:var(--paper);color:var(--ink);padding:clamp(1.4rem,3.4vw,2.6rem)}
form.res .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.f{display:flex;flex-direction:column;gap:.4rem}
.f.full{grid-column:1/-1}
label{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:.68rem;
  letter-spacing:.16em;color:#7d6a55}
input,select,textarea{background:#fff;border:1px solid #cdbca5;color:var(--ink);
  padding:.8rem .85rem;font-family:'Outfit',sans-serif;font-size:1rem;
  border-radius:0;transition:border-color .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mango)}
select:disabled{opacity:.5}
textarea{resize:vertical;min-height:84px}
.hint{font-size:.8rem;color:#7d6a55}
button.send{width:100%;border:0;cursor:pointer;background:var(--ink);color:var(--paper);
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.92rem;padding:1.05rem;transition:background .25s}
button.send:hover{background:var(--mango);color:var(--ink)}
.msg{margin-top:1.1rem;padding:1rem;font-size:.96rem;display:none;line-height:1.6}
.msg.ok{display:block;background:rgba(140,198,63,.18);border-left:4px solid var(--lima);color:var(--ink)}
.msg.err{display:block;background:rgba(232,65,46,.14);border-left:4px solid var(--rojo);color:var(--ink)}
.aside .card{background:var(--ink-2)}

/* ---------- pie ---------- */
footer{position:relative;z-index:10;background:var(--ink);border-top:1px solid var(--hair);
  padding:clamp(2.4rem,5vw,3.4rem) clamp(1.2rem,5vw,4rem) 2rem;text-align:center;
  color:var(--muted);font-size:.88rem}
footer .badge{height:70px;margin:0 auto 1.2rem}
footer .links{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0}
footer .links a{color:var(--paper);font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.14em}
footer .links a:hover{color:var(--mango)}
footer .fine{margin-top:1.2rem;opacity:.55;font-size:.76rem}

/* ==========================================================================
   Aparición al hacer scroll
   Cada tipo de bloque entra a su manera, no todos deslizando hacia arriba:
   los rótulos entran como un cartel que se cuelga, las fotos se revelan
   con una cortina, las notas caen torcidas. --d lo pone site.js para
   escalonar los hijos.
   ========================================================================== */
.rv{--d:0ms}

/* por defecto: sube y entra */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d),
             transform .8s cubic-bezier(.2,.7,.2,1) var(--d)}
.rv.in{opacity:1;transform:none}

/* titulares: el número del margen y el texto entran por separado */
.shead .num{opacity:0;transform:translateX(-14px);
  transition:opacity .6s ease .1s,transform .6s cubic-bezier(.2,.7,.2,1) .1s}
.shead.in .num{opacity:1;transform:none}
.shead h2{opacity:0;transform:translateY(30px) rotate(-1.2deg);transform-origin:left bottom;
  transition:opacity .85s cubic-bezier(.2,.7,.2,1) .16s,
             transform .85s cubic-bezier(.2,.7,.2,1) .16s}
.shead.in h2{opacity:1;transform:none}
.shead p{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease .34s,transform .7s cubic-bezier(.2,.7,.2,1) .34s}
.shead.in p{opacity:1;transform:none}

/* la rúbrica se dibuja de izquierda a derecha */
.squiggle{clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s cubic-bezier(.65,0,.35,1) .5s}
.shead.in .squiggle{clip-path:inset(0 0 0 0)}

/* Fotos: cortina que sube y la imagen se desescala.
   Ojo: quien lleva la clase .in es el CONTENEDOR, nunca la pieza recortada.
   Un elemento con clip-path a cero no tiene área visible, así que el
   IntersectionObserver le da ratio 0 y no se dispararía nunca: se escondería
   a sí mismo para siempre. */
.mosaic .tile,.picks .pick{clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.65,0,.35,1) var(--d)}
.mosaic.in .tile,.picks.in .pick{clip-path:inset(0 0 0 0)}
.mosaic .tile img,.picks .pick img{transform:scale(1.16)}
.mosaic.in .tile img,.picks.in .pick img{transform:scale(1);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d)}
/* el hover manda una vez ya ha entrado */
.mosaic.in .tile:hover img,.picks.in .pick:hover img{
  transform:scale(1.06);transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* notas de opiniones: caen y se enderezan a su ángulo */
.notes .note{opacity:0;transform:translateY(34px) rotate(-5deg);transform-origin:top center;
  transition:opacity .7s ease var(--d),transform .8s cubic-bezier(.34,1.3,.5,1) var(--d)}
.notes.in .note:nth-child(1){opacity:1;transform:rotate(-1.1deg)}
.notes.in .note:nth-child(2){opacity:1;transform:rotate(.8deg)}
.notes.in .note:nth-child(3){opacity:1;transform:rotate(-.5deg)}

/* apartados de la carta: la pastilla naranja se despliega y las líneas caen */
.grp h2{transform-origin:left center;transform:scaleX(.2);opacity:0;
  transition:transform .55s cubic-bezier(.65,0,.35,1) .05s,opacity .3s ease .05s}
.grp.in h2{transform:none;opacity:1}
.grp .it,.grp .fills,.grp .note-sub{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease var(--d),transform .5s cubic-bezier(.2,.7,.2,1) var(--d)}
.grp.in .it,.grp.in .fills,.grp.in .note-sub{opacity:1;transform:none}

/* la cita se descubre línea a línea */
.quote blockquote{opacity:0;transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.quote.in blockquote{opacity:1;transform:none}
.quote .who{opacity:0;transform:translateX(-16px);
  transition:opacity .7s ease .35s,transform .7s cubic-bezier(.2,.7,.2,1) .35s}
.quote.in .who{opacity:1;transform:none}
.quote .foot{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease .5s,transform .7s cubic-bezier(.2,.7,.2,1) .5s}
.quote.in .foot{opacity:1;transform:none}

/* la foto de fondo de la cita hace un paralaje suave (site.js pone --py) */
.quote>img{--py:0px;transform:translateY(var(--py)) scale(1.12);will-change:transform}

/* fichas de contacto */
.card{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease var(--d),transform .7s cubic-bezier(.2,.7,.2,1) var(--d)}
.card.in{opacity:1;transform:none}

/* mapa: entra con cortina lateral (la clase va en .visit, ver nota de arriba) */
.visit .map-box{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
.visit.in .map-box{clip-path:inset(0 0 0 0)}

/* la foto del cierre hace zoom out al entrar en pantalla */
.half img{transform:scale(1.18)}
.half.in img{transform:scale(1);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),opacity .5s}
.half.in:hover img{transform:scale(1.07);opacity:.55;
  transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .5s}
.half h3,.half p,.half .arrow{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease var(--d),transform .7s cubic-bezier(.2,.7,.2,1) var(--d)}
.half.in h3,.half.in p,.half.in .arrow{opacity:1;transform:none}

/* cabecera de página interna */
.phead .num{opacity:0;transform:translateX(-14px);
  animation:slideIn .7s cubic-bezier(.2,.7,.2,1) .15s forwards}
.phead h1{opacity:0;transform:translateY(34px);
  animation:riseIn .9s cubic-bezier(.2,.7,.2,1) .22s forwards}
.phead .back{opacity:0;animation:fadeIn .6s ease .1s forwards}
.phead p{opacity:0;transform:translateY(18px);
  animation:riseIn .8s cubic-bezier(.2,.7,.2,1) .42s forwards}
@keyframes riseIn{to{opacity:1;transform:none}}
@keyframes slideIn{to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- adaptación ---------- */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:7rem;gap:2rem;align-content:center}
  .hero-art{order:-1;min-height:0}
  .hero-shot{height:min(42vh,340px)}
  /* En movil el sello se queda DENTRO: con right negativo se salia por el
     borde y se cortaba media chapa. */
  .hero-badge{left:auto;right:14px;bottom:-30px;width:96px}
  .stamp{display:none}
  .visit,.form-wrap{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .tile.t-a{grid-column:span 4}
  .tile.t-b,.tile.t-c,.tile.t-d,.tile.t-e{grid-column:span 2}
}
@media(max-width:760px){
  .rail{display:none}
  header nav{display:none}
  .burger{display:flex}
  /* Los enlaces del pie median 15-20px de alto y eran dificiles de acertar.
     La letra no cambia; lo que crece es la zona pulsable, hasta 44px. */
  footer .links{gap:.2rem 1.2rem}
  footer .links a{padding:.8rem .3rem}
  footer .fine a{padding:.5rem .2rem;display:inline-block}
  /* Los botones en chevron median 38px. Se suben a 44 por dentro, con el
     relleno vertical, para no tocar el recorte del clip-path. */
  .arrow{padding-top:.85rem;padding-bottom:.85rem}
  .sheet a{padding-block:.35rem}
  .sheet .meta a{padding:.6rem 0;display:inline-block}
  .split{grid-template-columns:1fr}
  .half+.half{border-left:0;border-top:2px solid var(--ink)}
  form.res .row{grid-template-columns:1fr}
  .quote{min-height:auto}
  .quote>img{opacity:.34}
}
@media(max-width:520px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .tile.t-a{grid-column:span 2;aspect-ratio:4/3}
  .tile.t-b,.tile.t-c,.tile.t-d,.tile.t-e{grid-column:span 1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #dust{display:none}
  /* todo lo que se anima al entrar queda ya en su estado final */
  .rv,.rv.in,.shead .num,.shead h2,.shead p,.quote blockquote,.quote .who,.quote .foot,
  .card,.notes .note,.grp h2,.grp .it,.grp .fills,.grp .note-sub,
  .half h3,.half p,.half .arrow,.phead .num,.phead h1,.phead p,.phead .back,
  .hero h1 .ln{opacity:1!important;transform:none!important}
  .tile,.pick,.map-box,.hero-shot,.squiggle{clip-path:none!important}
  .tile img,.pick img,.half img,.hero-shot img,.quote>img{transform:none!important}
  .note,.tile.t-b,.tile.t-c,.tile.t-e{transform:none!important}
}