/* ==========================================================================
   EL RINCÓN DE JOTA — hoja de estilos única
   Mobile-first: todo se diseña a 390px y de ahí hacia arriba.
   Orden: 1 tokens · 2 base · 3 piezas reutilizables · 4 motivos gráficos
          5 nav · 6 hero · 7 ticker · 8 nosotros · 9 carta · 10 drop
          11 servicios · 12 contacto · 13 pie · 14 barra móvil · 15 movimiento
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  --negro:      #0A0A0A;
  --negro-2:    #141414;
  --hormigon:   #1E1E1E;
  --mostaza:    #F0B10A;
  --mostaza-alta:#FFC93C;
  --tiza:       #F2EDE3;
  --tiza-suave: #B5AFA5;
  --salsa:      #E03B2F;

  /* Fallback condensado real: si no hay internet, el sitio sigue gritando */
  --display: 'Anton', 'Impact', 'Haettenschweiler', 'Franklin Gothic Bold',
             'Arial Narrow', 'Arial Black', sans-serif;
  --cuerpo:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

  --max: 1180px;
  --nav-h: 58px;
  --linea: rgba(242,237,227,.12);
  --linea-mostaza: rgba(240,177,10,.34);

  /* Silueta de goteo. Se usa como máscara, así el color lo pone cada sección */
  --forma-goteo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34'%3E%3Cg fill='%23000'%3E%3Crect width='240' height='8'/%3E%3Crect x='20' width='9' height='20' rx='4.5'/%3E%3Ccircle cx='24.5' cy='20' r='4.5'/%3E%3Crect x='76' width='7' height='11' rx='3.5'/%3E%3Ccircle cx='79.5' cy='11' r='3.5'/%3E%3Crect x='124' width='11' height='24' rx='5.5'/%3E%3Ccircle cx='129.5' cy='24' r='5.5'/%3E%3Crect x='180' width='8' height='15' rx='4'/%3E%3Ccircle cx='184' cy='15' r='4'/%3E%3Ccircle cx='58' cy='16' r='2.5'/%3E%3Ccircle cx='210' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E");

  /* Rayado tipo espray sobre pared */
  --rayado: repeating-linear-gradient(135deg,
             rgba(240,177,10,.045) 0 2px, transparent 2px 11px);
}

@media (min-width: 900px){ :root{ --nav-h: 70px; } }


/* ---------- 2. BASE ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 66px); /* nav + barra de filtros */
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--negro);
  color:var(--tiza);
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; }
a{ color:var(--mostaza); }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--mostaza-alta);
  outline-offset:3px;
}

.envoltura{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:18px;
}

.salta{
  position:absolute; left:12px; top:-100px; z-index:100;
  background:var(--mostaza); color:var(--negro);
  font-family:var(--display); text-transform:uppercase;
  padding:12px 18px; text-decoration:none;
  transition:top .2s;
}
.salta:focus{ top:12px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Grano global: es lo que impide que esto parezca una plantilla */
.grano{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:70; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
}


/* ---------- 3. PIEZAS REUTILIZABLES ------------------------------------- */
.ic{ width:1em; height:1em; flex:0 0 auto; }

.kicker{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.8rem;
  color:var(--mostaza);
  display:flex; align-items:center; gap:9px;
  margin-bottom:10px;
}
.kicker--rojo{ color:var(--salsa); justify-content:center; }
.kicker--rojo .ic{ width:1.5em; height:1em; }

.titular{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(2.3rem, 9.5vw, 4.2rem);
  line-height:.93;
  letter-spacing:-.018em;
  color:var(--tiza);
}
.titular--xl{ font-size:clamp(2.9rem, 13vw, 6rem); }

.parrafo{
  color:var(--tiza-suave);
  font-size:clamp(.98rem, 3.6vw, 1.07rem);
  line-height:1.72;
  margin-top:18px;
}
.parrafo--centro{ text-align:center; margin-inline:auto; }
.parrafo--ancho{ max-width:62ch; }

.seccion-cab{ margin-bottom:34px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 20px;
  font-family:var(--display); text-transform:uppercase;
  font-size:.95rem; letter-spacing:.035em; line-height:1.1;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background-color .22s, color .22s, transform .22s, box-shadow .22s, border-color .22s;
}
.btn .ic{ width:1.15em; height:1.15em; }
.btn--gordo{ min-height:56px; padding:0 26px; font-size:clamp(1rem,4vw,1.15rem); }

.btn--solido{ background:var(--mostaza); color:var(--negro); }
.btn--solido:hover{
  background:var(--mostaza-alta); transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(240,177,10,.28);
}
.btn--linea{ border-color:var(--tiza); color:var(--tiza); background:transparent; }
.btn--linea:hover{ background:var(--tiza); color:var(--negro); transform:translateY(-2px); }
.btn--negro{ background:var(--negro); color:var(--mostaza); }
.btn--negro:hover{ background:#000; color:var(--mostaza-alta); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }


/* ---------- 4. MOTIVOS GRÁFICOS ---------------------------------------- */

/* Brochazo bajo palabra clave */
.marca{ position:relative; display:inline-block; }
.marca-t{ position:relative; z-index:2; }
/* Los titulares van con line-height < 1, así que la caja del span queda
   por encima del final real de las letras: hay que bajar el brochazo. */
.brocha{
  position:absolute; z-index:1;
  left:-5%; width:110%;
  bottom:-.17em; height:.26em;
  color:var(--mostaza);
}

/* Salpicaduras */
.salp{ position:absolute; color:var(--mostaza); pointer-events:none; }

/* Goteo entre secciones */
.goteo{
  position:absolute; top:0; left:0; right:0;
  height:34px; z-index:3; pointer-events:none;
  background-color:currentColor;
  -webkit-mask-image:var(--forma-goteo);
          mask-image:var(--forma-goteo);
  -webkit-mask-repeat:repeat-x;
          mask-repeat:repeat-x;
  -webkit-mask-position:top center;
          mask-position:top center;
  -webkit-mask-size:240px 34px;
          mask-size:240px 34px;
}
.goteo--mostaza{ color:var(--mostaza); }
.goteo--negro2{ color:var(--negro-2); }


/* ---------- 5. NAV ----------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,10,10,.78), rgba(10,10,10,.28));
  transition:background-color .28s, box-shadow .28s, border-color .28s;
  border-bottom:1px solid transparent;
}
.nav.compacta{
  background:rgba(10,10,10,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom-color:var(--linea-mostaza);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.nav-in{
  position:relative;
  max-width:var(--max); margin-inline:auto; padding-inline:14px;
  height:calc(var(--nav-h) - 1px);   /* el 1px que falta es el borde inferior */
  display:flex; align-items:center; gap:10px;
}
.nav-marca{
  display:flex; align-items:center; gap:10px;
  min-height:44px;                 /* objetivo táctil mínimo */
  text-decoration:none; color:var(--tiza);
  margin-right:auto;
}
.nav-marca img{
  width:38px; height:38px; display:block;
  transition:width .28s, height .28s;
}
.nav.compacta .nav-marca img{ width:34px; height:34px; }
.nav-marca-txt{
  display:none;
  font-family:var(--display); text-transform:uppercase;
  font-size:1rem; line-height:.92; letter-spacing:.01em;
}
.nav-marca-txt b{ display:block; color:var(--mostaza); }

.nav-menu{ display:none; }
.nav-menu a{
  font-family:var(--display); text-transform:uppercase;
  letter-spacing:.05em; font-size:1rem;
  color:var(--tiza); text-decoration:none;
  padding:12px 2px; position:relative;
  min-height:44px; display:flex; align-items:center;
}
.nav-menu a::after{
  content:''; position:absolute; left:0; bottom:8px;
  height:3px; width:0; background:var(--mostaza);
  transition:width .26s;
}
.nav-menu a:hover::after,
.nav-menu a:focus-visible::after{ width:100%; }

.nav-acc{ display:flex; align-items:center; gap:8px; }
.btn--tel{ min-height:44px; padding:0 13px; font-size:.85rem; white-space:nowrap; }

.nav-hamb{
  width:44px; height:44px; padding:0;
  display:grid; place-content:center; gap:5px;
  background:transparent; border:2px solid var(--linea); cursor:pointer;
}
.nav-hamb span{
  display:block; width:20px; height:2.5px; background:var(--tiza);
  transition:transform .24s, opacity .18s;
}
.nav-hamb[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-hamb[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-hamb[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Panel desplegable en móvil */
@media (max-width: 899px){
  .nav-menu.abierto{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:var(--negro);
    border-bottom:3px solid var(--mostaza);
    padding:6px 18px 16px;
    box-shadow:0 18px 34px rgba(0,0,0,.6);
  }
  .nav-menu.abierto a{ border-bottom:1px solid var(--linea); font-size:1.15rem; }
  .nav-menu.abierto a:last-child{ border-bottom:0; }
}
@media (min-width: 900px){
  .nav-marca-txt{ display:block; }
  .nav-menu{ display:flex; gap:26px; margin-right:26px; }
  .nav-hamb{ display:none; }
  .btn--tel{ min-height:46px; padding:0 18px; font-size:.98rem; }
}


/* ---------- 6. HERO ---------------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:grid; align-items:center;
  padding:26px 0 40px;
}
.hero-foto{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 20%;
  filter:contrast(1.06) saturate(.82) brightness(.9);
}
.hero-velo{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(118% 76% at 50% 32%, rgba(10,10,10,.30) 0%, rgba(10,10,10,.90) 70%, var(--negro) 100%),
    linear-gradient(180deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.56) 27%, rgba(10,10,10,.84) 64%, var(--negro) 100%);
}
.salp--hero-1{ width:190px; height:190px; top:-42px; left:-58px; opacity:.09; transform:rotate(18deg); }
.salp--hero-2{ width:210px; height:210px; bottom:-64px; right:-70px; opacity:.075; transform:rotate(-32deg); }

.hero-in{
  position:relative; z-index:2;
  max-width:var(--max); margin-inline:auto; padding-inline:18px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

/* El hero NO depende del observador de scroll: entra solo, con CSS.
   Los 3 primeros segundos no se juegan con un fallo de JS. */
.hero-in > *{
  transform:rotate(var(--rot, 0deg));
  animation:heroEntra .68s both cubic-bezier(.2,.8,.2,1);
}
.hero-in > *:nth-child(1){ animation-delay:.04s; }
.hero-in > *:nth-child(2){ animation-delay:.12s; }
.hero-in > *:nth-child(3){ animation-delay:.20s; }
.hero-in > *:nth-child(4){ animation-delay:.30s; }
.hero-in > *:nth-child(5){ animation-delay:.38s; }
.hero-in > *:nth-child(6){ animation-delay:.46s; }
@keyframes heroEntra{
  from{ opacity:0; transform:translateY(18px) rotate(var(--rot, 0deg)); }
  to  { opacity:1; transform:translateY(0)    rotate(var(--rot, 0deg)); }
}
.hero-logo{
  width:clamp(92px, 25vw, 158px); height:auto;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.75));
}

.sello{
  --rot:-7deg;
  margin:14px 0 4px;
  border:2.5px solid var(--mostaza);
  padding:6px 14px 7px;
  font-family:var(--display); text-transform:uppercase;
  color:var(--mostaza); line-height:.98;
  box-shadow:0 0 0 2.5px var(--negro), 0 0 0 5px rgba(240,177,10,.32);
}
.sello span{ display:block; font-size:.72rem; letter-spacing:.34em; }
.sello b{ display:block; font-size:1.02rem; letter-spacing:.06em; font-weight:400; }

.hero-titular{
  --rot:-1.7deg;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.85rem, 13.2vw, 6.4rem);
  line-height:.88; letter-spacing:-.025em;
  margin:24px 0 0;
  text-shadow:0 6px 30px rgba(0,0,0,.7);
}
.hero-titular .ln{ display:block; }

.hero-sub{
  max-width:56ch; margin:20px auto 0;
  color:var(--tiza);
  font-size:clamp(.97rem, 3.7vw, 1.12rem);
  line-height:1.66;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.hero-ctas{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:26px; width:100%; max-width:420px;
}
.hero-ctas .btn{ flex:1 1 100%; }
@media (min-width:520px){
  .hero-ctas{ max-width:none; }
  .hero-ctas .btn{ flex:0 0 auto; }
}
.hero-dir{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:18px;
  font-family:var(--display); text-transform:uppercase;
  letter-spacing:.09em; font-size:.82rem; color:var(--mostaza);
}
.hero-dir .ic{ width:1.15em; height:1.15em; }

/* El sello va SIEMPRE en el flujo. Flotarlo en una esquina choca con el
   titular en cuanto cambia el ancho, y el titular manda. */
@media (min-width:900px){
  .sello{ --rot:-6deg; padding:8px 20px 9px; }
  .sello span{ font-size:.82rem; }
  .sello b{ font-size:1.18rem; }
}


/* ---------- 7. TICKER -------------------------------------------------- */
.ticker{
  background:var(--mostaza);
  color:var(--negro);
  padding:11px 0;
  overflow:hidden;
  position:relative; z-index:4;
  border-block:3px solid var(--negro);
}
.ticker-pista{
  display:flex; width:max-content;
  animation:desliza 30s linear infinite;
}
.ticker-set{
  display:flex; align-items:center; gap:20px; padding-right:20px;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.05rem, 4.6vw, 1.9rem);
  letter-spacing:.01em; white-space:nowrap;
}
.ticker-set i{ font-style:normal; font-size:.62em; opacity:.55; }
@keyframes desliza{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}


/* ---------- 8. SOBRE NOSOTROS ------------------------------------------ */
.nosotros{
  position:relative;
  background:var(--negro-2);
  padding:66px 0 62px;
}
.nosotros-rejilla{ display:grid; gap:38px; }

.polaroids{ position:relative; padding:6px 0 44px; }
.polaroid{
  margin:0; background:var(--tiza);
  padding:10px 10px 0;
  box-shadow:0 22px 46px rgba(0,0,0,.6);
}
.polaroid img{ display:block; width:100%; height:100%; object-fit:cover; }
.polaroid figcaption{
  font-family:var(--display); text-transform:uppercase;
  color:#20201e; font-size:.78rem; letter-spacing:.06em;
  padding:9px 2px 11px; text-align:center;
}
.polaroid--a{
  transform:rotate(-2.4deg);
  width:76%;
}
.polaroid--a img{ aspect-ratio:4/5; object-position:50% 26%; }
/* La polaroid pequeña tapa la esquina derecha: el pie se queda a la izquierda */
.polaroid--a figcaption{ text-align:left; padding-left:4px; padding-right:42%; }
.polaroid--b{
  position:absolute; right:0; bottom:0;
  width:44%;
  transform:rotate(4.5deg);
  z-index:2;
}
.polaroid--b img{ aspect-ratio:3/4; object-position:50% 12%; }
.polaroid--b a{ display:block; }

.puntos{ margin-top:26px; display:grid; gap:2px; }
.puntos li{
  display:flex; align-items:center; gap:14px;
  padding:15px 4px;
  border-top:1px solid var(--linea);
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(.94rem, 3.8vw, 1.1rem);
  letter-spacing:.02em; line-height:1.22;
  color:var(--tiza);
}
.puntos li:last-child{ border-bottom:1px solid var(--linea); }
.puntos .ic{
  width:1.9em; height:1.9em; color:var(--mostaza);
}

@media (min-width:900px){
  .nosotros{ padding:96px 0 90px; }
  .nosotros-rejilla{ grid-template-columns:.92fr 1fr; gap:60px; align-items:center; }
  .polaroids{ padding-bottom:60px; }
}


/* ---------- 9. LA CARTA ------------------------------------------------ */
.carta{
  position:relative;
  background:var(--negro);
  background-image:var(--rayado);
  padding:0 0 66px;
}
.carta-banner{
  display:block; width:min(100%, 1120px); height:auto;
  margin:0 auto 6px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.carta-cab{ text-align:center; padding:6px 0 28px; }
.carta-cab .kicker{ justify-content:center; }
.carta-cab .parrafo{ max-width:64ch; }

/* Barra de filtros: pegada bajo el nav, es el atajo real en móvil */
.chips-barra{
  position:sticky; top:var(--nav-h); z-index:30;
  background:rgba(10,10,10,.95);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border-block:1px solid var(--linea-mostaza);
  padding:9px 0;
  margin-bottom:8px;
}
.chips{
  display:flex; gap:8px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:1px 0 2px;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto;
  min-height:44px; padding:0 16px;
  background:transparent; border:2px solid rgba(242,237,227,.2);
  color:var(--tiza);
  font-family:var(--display); text-transform:uppercase;
  font-size:.88rem; letter-spacing:.05em;
  cursor:pointer; white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s, transform .2s;
}
.chip:hover{ border-color:var(--mostaza); color:var(--mostaza); }
.chip[aria-pressed="true"]{
  background:var(--mostaza); border-color:var(--mostaza); color:var(--negro);
  transform:rotate(-1deg);
}

.grupo{ margin-top:8px; }
.grupo-titulo{
  display:flex; align-items:center; gap:14px;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.35rem, 5.6vw, 2rem);
  letter-spacing:.01em; color:var(--tiza);
  margin:38px 0 2px;
}
.grupo-titulo::after{
  content:''; flex:1 1 auto; height:4px;
  background:linear-gradient(90deg, var(--mostaza), rgba(240,177,10,0));
}

.plato{
  position:relative; overflow:hidden;
  padding:17px 12px 19px;
  margin-inline:-12px;
  border-top:2px dashed var(--linea-mostaza);
  transition:background-color .24s, transform .24s;
}
/* La raya de cierre va en el contenedor, no en el último plato: así sigue
   bien puesta cuando los filtros esconden platos. */
.grupo-lista{ border-bottom:2px dashed var(--linea-mostaza); }
.plato:hover{ background:rgba(240,177,10,.05); transform:translateY(-2px); }
.plato::after{
  content:''; position:absolute; left:0; bottom:0;
  height:3px; width:0; background:var(--mostaza);
  transition:width .4s cubic-bezier(.2,.8,.2,1);
}
.plato:hover::after{ width:100%; }

.plato-fila{ display:flex; align-items:baseline; gap:9px; }
.plato-nombre{
  font-family:var(--display); text-transform:uppercase;
  color:var(--mostaza);
  font-size:clamp(1.16rem, 4.9vw, 1.62rem);
  line-height:1.06; letter-spacing:-.008em;
}
.plato-corona{
  width:1.35em; height:.95em; color:var(--mostaza-alta);
  margin-left:.3em; vertical-align:-.02em;
}
/* Truco de carta impresa: un hueco vacío cuyo borde inferior cae justo
   sobre la línea base, así los puntos unen el nombre con el precio. */
.plato-puntos{
  flex:1 1 auto; min-width:16px;
  border-bottom:3px dotted rgba(242,237,227,.24);
  margin-bottom:-3px;
}
.plato-precio{
  flex:0 0 auto;
  font-family:var(--display);
  color:var(--tiza);
  font-size:clamp(1.34rem, 5.8vw, 1.95rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.plato-precio i{ font-style:normal; color:var(--mostaza); font-size:.72em; margin-left:.12em; }

.plato-desc{
  color:var(--tiza-suave);
  font-size:.945rem; line-height:1.58;
  margin-top:7px; max-width:62ch;
}
.plato-et{
  display:inline-block; vertical-align:.14em;
  background:var(--salsa); color:var(--tiza);
  font-family:var(--display); text-transform:uppercase;
  font-size:.64rem; letter-spacing:.09em;
  padding:4px 8px 3px; margin-left:9px;
  transform:rotate(-2.5deg);
}

.plato-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.tag{
  font-family:var(--display); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.055em; line-height:1;
  padding:7px 10px 6px;
  border:1.5px solid rgba(240,177,10,.48);
  background:rgba(240,177,10,.08);
  color:var(--mostaza);
}
.tag b{ color:var(--tiza); font-weight:400; margin-left:.35em; }
.tag--extra{
  border-color:rgba(242,237,227,.2);
  background:transparent; color:var(--tiza-suave);
}

.carta-vacio,
.carta-pie{
  text-align:center; color:var(--tiza-suave);
  font-size:.9rem; margin-top:34px;
}
.carta-pie a{ color:var(--mostaza); text-decoration-thickness:2px; text-underline-offset:3px; }

@media (min-width:760px){
  .grupo-lista{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; }
  .plato{ margin-inline:0; padding-inline:14px; }
}
@media (min-width:900px){ .carta{ padding-bottom:96px; } }


/* ---------- 10. EL DROP ------------------------------------------------ */
.drop{
  position:relative; overflow:hidden;
  background:#000;
  padding:74px 0 78px;
}
.drop::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(90% 62% at 50% 0%, rgba(240,177,10,.18), transparent 68%);
}
.drop-raya{
  position:absolute; top:6px; left:-6%; width:112%; height:5px;
  background:var(--mostaza); transform:rotate(-.7deg); z-index:1;
  box-shadow:0 0 26px rgba(240,177,10,.5);
}
.salp--drop-1{ width:300px; height:300px; top:-78px; left:-104px; opacity:.1; transform:rotate(24deg); }
.salp--drop-2{ width:240px; height:240px; bottom:-76px; right:-76px; opacity:.1; color:var(--salsa); transform:rotate(-12deg); }

.drop-in{ position:relative; z-index:2; text-align:center; }
.drop-titular{
  --rot:-1.2deg;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.7rem, 14.5vw, 7.2rem);
  line-height:.86; letter-spacing:-.03em;
  color:var(--tiza);
  margin:6px 0 0;
}
.drop-titular .ln{ display:block; }
.ln--hueca{ color:var(--mostaza); }
@supports (-webkit-text-stroke: 2px red){
  .ln--hueca{
    color:transparent;
    -webkit-text-stroke:clamp(1.5px, .55vw, 3px) var(--mostaza);
  }
}
.ln--peque{
  font-size:clamp(.9rem, 3.6vw, 1.5rem);
  letter-spacing:.2em; color:var(--mostaza);
  margin-top:.55em;
}
.drop-in .parrafo{ margin-top:24px; }
.drop-in .btn{ margin-top:30px; }
.drop-in .btn span{ text-wrap:balance; }

@media (min-width:900px){ .drop{ padding:104px 0 108px; } }


/* ---------- 11. SERVICIOS --------------------------------------------- */
.servicios{
  background:var(--negro-2);
  background-image:var(--rayado);
  padding:66px 0 74px;
}
.serv-rejilla{ display:grid; gap:22px; }
.serv{
  background:var(--hormigon);
  border:1px solid var(--linea);
  display:flex; flex-direction:column;
  transition:transform .26s, border-color .26s, box-shadow .26s;
}
.serv:hover{
  transform:translateY(-5px);
  border-color:var(--linea-mostaza);
  box-shadow:0 20px 40px rgba(0,0,0,.55);
}

.serv-cab{
  position:relative; overflow:hidden;
  height:clamp(124px, 31vw, 160px);
  background:var(--negro);
  background-image:repeating-linear-gradient(135deg,
    rgba(240,177,10,.07) 0 2px, transparent 2px 11px);
  border-bottom:3px solid var(--mostaza);
  display:grid; place-items:center;
}
.serv-num{
  position:absolute; right:8px; bottom:-16px; z-index:1;
  font-family:var(--display); font-size:5.6rem; line-height:1;
  color:rgba(240,177,10,.16);
}
@supports (-webkit-text-stroke: 2px red){
  .serv-num{ color:transparent; -webkit-text-stroke:2px rgba(240,177,10,.4); }
}
.serv-palabra{
  position:relative; z-index:2;
  font-family:var(--display); text-transform:uppercase;
  color:var(--mostaza);
  font-size:clamp(1.75rem, 7.4vw, 2.5rem);
  line-height:.95; letter-spacing:-.02em;
  text-align:center; padding:0 16px;
  transform:rotate(-3deg);
  text-shadow:0 4px 18px rgba(0,0,0,.6);
}
.serv-corona{
  position:absolute; z-index:2; left:14px; top:13px;
  width:36px; height:25px; color:var(--mostaza); opacity:.92;
}
.serv-salp{
  position:absolute; z-index:0;
  width:170px; height:170px; left:-46px; bottom:-56px;
  color:var(--mostaza); opacity:.1;
}
.serv-cab--2 .serv-palabra{ transform:rotate(2deg); }
.serv-cab--2 .serv-salp{ left:auto; right:-48px; top:-52px; bottom:auto; }
.serv-cab--3 .serv-palabra{ transform:rotate(-1.5deg); }
.serv-cab--3 .serv-salp{ left:auto; right:-40px; bottom:-60px; transform:rotate(40deg); }

.serv-cuerpo{ padding:22px 20px 26px; display:flex; flex-direction:column; flex:1; }
.serv-cuerpo h3{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.12rem, 4.4vw, 1.32rem);
  line-height:1.12; letter-spacing:.005em;
  color:var(--tiza);
}
.serv-cuerpo p{
  color:var(--tiza-suave); font-size:.94rem; line-height:1.62;
  margin-top:12px;
}
.serv-cuerpo .btn{ align-self:flex-start; margin-top:20px; }

@media (min-width:760px){ .serv-rejilla{ grid-template-columns:repeat(3, 1fr); gap:20px; } }
@media (min-width:900px){ .servicios{ padding:96px 0 104px; } }


/* ---------- 12. CONTACTO (único bloque invertido) --------------------- */
.contacto{
  position:relative;
  background:var(--mostaza);
  color:var(--negro);
  padding:74px 0 66px;
}
.contacto::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(10,10,10,.05) 0 2px, transparent 2px 12px);
  pointer-events:none;
}
.contacto-in{ position:relative; display:grid; gap:40px; }
.contacto .kicker{ color:#3a2a00; }
.contacto .titular{ color:var(--negro); --rot:-1.2deg; }
.contacto .parrafo{ color:#2a2205; max-width:52ch; }
.contacto .btn--negro{ margin-top:26px; }
.contacto :focus-visible{ outline-color:var(--negro); }

.contacto-lista li{ border-top:2px solid rgba(10,10,10,.16); }
.contacto-lista li:last-child{ border-bottom:2px solid rgba(10,10,10,.16); }
.contacto-lista li > a{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:'ic et' 'ic va';
  align-items:center; gap:2px 14px;
  min-height:60px; padding:14px 6px;
  color:var(--negro); text-decoration:none;
  transition:background-color .2s, padding-left .2s;
}
.contacto-lista li > a:hover{ background:rgba(10,10,10,.07); padding-left:14px; }
.contacto-lista .ic{ grid-area:ic; width:26px; height:26px; }
.contacto-lista .et{
  grid-area:et;
  font-family:var(--display); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.16em; color:#4a3703;
}
.contacto-lista .va{
  grid-area:va;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.02rem, 4.2vw, 1.28rem); line-height:1.14;
  letter-spacing:.005em; overflow-wrap:anywhere;
}
.contacto-redes{ padding:16px 6px 18px; }
.contacto-redes > .et{
  display:block;
  font-family:var(--display); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.16em; color:#4a3703; margin-bottom:10px;
}
.redes{ display:flex; flex-wrap:wrap; gap:8px; }
.redes a{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 13px;
  border:2px solid var(--negro); color:var(--negro);
  font-family:var(--display); text-transform:uppercase;
  font-size:.8rem; letter-spacing:.03em; text-decoration:none;
  transition:background-color .2s, color .2s, transform .2s;
}
.redes a:hover{ background:var(--negro); color:var(--mostaza); transform:translateY(-2px); }
.redes .ic{ width:1.15em; height:1.15em; }

@media (min-width:900px){
  .contacto{ padding:104px 0 96px; }
  .contacto-in{ grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
}


/* ---------- 13. PIE --------------------------------------------------- */
.pie{ position:relative; background:var(--negro); padding:56px 0 34px; }
.pie-in{ display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.pie-marca img{ width:86px; height:86px; display:block; }
.pie-menu{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; }
.pie-menu a{
  font-family:var(--display); text-transform:uppercase;
  font-size:.86rem; letter-spacing:.08em;
  color:var(--tiza); text-decoration:none;
  min-height:44px; padding:0 12px;
  display:inline-flex; align-items:center;
}
.pie-menu a:hover{ color:var(--mostaza); }
.pie-legal{ color:#7d786f; font-size:.8rem; line-height:1.7; }


/* ---------- 14. BARRA FIJA INFERIOR (móvil) --------------------------- */
.barra-pedir{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; align-items:center; justify-content:center; gap:11px;
  min-height:calc(62px + env(safe-area-inset-bottom));
  padding:0 16px env(safe-area-inset-bottom);
  background:var(--mostaza); color:var(--negro);
  border-top:3px solid var(--negro);
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1rem, 4.4vw, 1.2rem); letter-spacing:.03em;
  text-decoration:none; overflow:hidden;
  box-shadow:0 -10px 30px rgba(0,0,0,.6);
  transform:translateY(115%);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.barra-pedir .ic{ width:1.3em; height:1.3em; }
.barra-pedir.vista{ transform:translateY(0); }
.barra-pedir::after{
  content:''; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  animation:brillo 4.6s ease-in-out infinite;
}
@keyframes brillo{
  0%,72%{ transform:translateX(-160%); }
  100%  { transform:translateX(420%); }
}

@media (max-width:860px){
  .barra-pedir{ display:flex; }
  body{ padding-bottom:64px; }
}


/* ---------- 15. MOVIMIENTO -------------------------------------------- */
.js .rev{
  opacity:0;
  transform:translateY(20px) rotate(var(--rot, 0deg));
  transition:opacity .62s ease, transform .62s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--d, 0ms);
}
.js .rev.visible{
  opacity:1;
  transform:translateY(0) rotate(var(--rot, 0deg));
}
.rev{ transform:rotate(var(--rot, 0deg)); }

/* Entrada escalonada al filtrar la carta */
.plato-entra{ animation:cartaEntra .36s var(--d, 0ms) both cubic-bezier(.2,.8,.2,1); }
@keyframes cartaEntra{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker-pista{ animation:none; }
  .hero-in > *{ animation:none; }
  .barra-pedir::after{ animation:none; display:none; }
  .plato-entra{ animation:none; }
  .js .rev,
  .js .rev.visible{
    opacity:1;
    transform:rotate(var(--rot, 0deg));
    transition:none;
  }
  .btn, .serv, .plato, .chip, .redes a, .contacto-lista li > a,
  .nav, .nav-marca img, .nav-hamb span, .plato::after, .nav-menu a::after,
  .barra-pedir{
    transition:none;
  }
  .btn:hover, .serv:hover, .plato:hover, .redes a:hover{ transform:none; }
}