/* ═══════════════════════════════════════════════════════════
   FAMILY BURGER & MORE — St. Petersburg, FL
   Paleta extraída del menú y logo oficiales:
   rojo #AD1B26 · amarillo #F9AA11 · crema #F8EDDB
   Tipos: Anton (poster) · Shrikhand (groovy) · Permanent Marker · Archivo
   Mobile-first ═══════════════════════════════════════════════ */

:root{
  --rojo:      #AD1B26;
  --rojo-osc:  #7E1119;
  --amarillo:  #F9AA11;
  --ama-osc:   #D98A00;
  --crema:     #F8EDDB;
  --crema-cl:  #FFF8EC;
  --tinta:     #26130C;   /* marrón tostado casi negro */
  --tinta-2:   #3A1D12;
  --blanco:    #FFFDF8;
  --verde-wa:  #1FAF57;

  --f-display: 'Anton', Impact, sans-serif;
  --f-groovy:  'Shrikhand', 'Cooper Black', serif;
  --f-marker:  'Permanent Marker', cursive;
  --f-body:    'Archivo', system-ui, sans-serif;

  --header-h: 4rem;   /* en rem: crece junto con la escala de PC */
  --radius: 18px;
  --shadow: 0 10px 30px rgba(38,19,12,.18);

  /* Patrón cuadriculado rojo/blanco (el papel de las cestas 🧺) */
  --check-size: 22px;
}

/* ── Reset básico ── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* ── Escala grande en PC ──
   Equivale a ver el sitio al ~150% de zoom: pensado para
   que la gente mayor lea todo sin esfuerzo. Todo el sitio
   usa rem/em, así que crece en bloque. */
@media(min-width:900px){  html{ font-size:105%; } }
@media(min-width:1300px){ html{ font-size:112%; } }
@media(min-width:1650px){ html{ font-size:120%; } }
body{
  font-family:var(--f-body);
  background:var(--crema);
  color:var(--tinta);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
ul{ list-style:none; }
section{ scroll-margin-top:var(--header-h); }
button{ font:inherit; cursor:pointer; }

:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; border-radius:4px; }

/* ── Utilidades tipográficas ── */
.display{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.01em;
  font-weight:400;
}
.marker{ font-family:var(--f-marker); font-weight:400; }

/* ── Botones ── */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em;
  text-decoration:none; border:3px solid var(--tinta); border-radius:999px;
  padding:.65em 1.4em; font-size:1rem; line-height:1;
  box-shadow:4px 4px 0 var(--tinta);
  transition:transform .15s ease, box-shadow .15s ease;
  user-select:none;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--tinta); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--tinta); }
.btn-red{ background:var(--rojo); color:var(--crema-cl); }
.btn-yellow{ background:var(--amarillo); color:var(--tinta); }
.btn-ghost{ background:transparent; color:var(--crema-cl); border-color:var(--crema-cl); box-shadow:4px 4px 0 rgba(255,253,248,.35); }
.btn-ghost:hover{ box-shadow:7px 7px 0 rgba(255,253,248,.35); }
.btn-ghost-dark{ background:transparent; color:var(--tinta); }
.btn-big{ font-size:1.15rem; padding:.75em 1.5em; }
.btn-mini{ font-size:.8rem; padding:.55em 1em; border-width:2px; box-shadow:3px 3px 0 var(--tinta); }

/* ═══════════ HEADER ═══════════ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  background:rgba(248,237,219,.92);
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--tinta);
}
.brand img{ height:2.75rem; width:auto; }
.top-actions{ display:flex; align-items:center; gap:10px; }

/* Toggle de idioma */
.lang-toggle{
  display:flex; border:2px solid var(--tinta); border-radius:999px; overflow:hidden;
  background:var(--blanco); padding:0;
}
.lang-op{
  font-family:var(--f-display); font-size:.8rem; letter-spacing:.05em;
  padding:.5em .8em; color:var(--tinta); opacity:.55; transition:.2s;
}
.lang-op.is-on{ background:var(--rojo); color:var(--crema-cl); opacity:1; }

/* Botón hamburguesa */
.navbtn{
  width:2.75rem; height:2.75rem; border:2px solid var(--tinta); border-radius:12px;
  background:var(--amarillo); display:grid; place-content:center; gap:5px;
  box-shadow:3px 3px 0 var(--tinta);
}
.navbtn span{ display:block; width:20px; height:3px; background:var(--tinta); border-radius:2px; transition:.25s; }
.navbtn.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.navbtn.is-open span:nth-child(2){ opacity:0; }
.navbtn.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* En móvil ocultamos el botón GPS del header (está en el hero) */
.topbar .btn-mini{ display:none; }
@media(min-width:640px){ .topbar .btn-mini{ display:inline-flex; } }

/* ═══════════ NAV OVERLAY ═══════════ */
.nav-overlay{
  position:fixed; inset:0; z-index:40;
  background:var(--rojo);
  color:var(--crema-cl);
  display:flex; flex-direction:column; justify-content:center; gap:8vh;
  padding:calc(var(--header-h) + 4vh) 8vw 6vh;
  overflow-y:auto;
  /* textura cuadriculada sutil en el borde inferior */
  background-image:
    repeating-conic-gradient(rgba(0,0,0,.06) 0 25%, transparent 0 50%);
  background-size:var(--check-size) var(--check-size);
}
.nav-overlay[hidden]{ display:none; }
.nav-links li{ margin:2.5vh 0; }
.nav-links a{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(2rem, 9vw, 4rem); text-decoration:none; line-height:1;
  display:inline-flex; align-items:baseline; gap:.4em;
  transition:transform .15s ease, color .15s;
}
.nav-links a:hover{ transform:translateX(8px) rotate(-1deg); color:var(--amarillo); }
.nav-num{ font-size:.35em; font-family:var(--f-marker); color:var(--amarillo); }
.nav-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.nav-ig{ font-family:var(--f-marker); font-size:1rem; color:var(--crema-cl); }

/* Bloquear scroll con overlay abierto */
body.nav-open{ overflow:hidden; }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--header-h) + 16px) 20px 56px;
  color:var(--crema-cl);
  overflow:hidden;
  background:var(--tinta);
}
.hero-media{ position:absolute; inset:0; }
.hero-video{ width:100%; height:100%; object-fit:cover; }
.hero-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(38,19,12,.45) 0%, rgba(38,19,12,.05) 35%, rgba(38,19,12,.82) 88%);
}
.hero-inner{ position:relative; z-index:2; max-width:640px; }

.eyebrow{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.chip{
  font-family:var(--f-display); font-size:.8rem; letter-spacing:.14em;
  background:var(--amarillo); color:var(--tinta);
  padding:.45em .9em; border-radius:6px; transform:rotate(-1.5deg);
}
.chip-outline{ background:transparent; color:var(--crema-cl); border:2px solid var(--crema-cl); transform:rotate(1deg); }

.display .line{ display:block; }
.hero h1{ font-size:clamp(3rem, 13.5vw, 6.5rem); margin-bottom:12px; }
.hero .l2{
  color:transparent;
  -webkit-text-stroke:2px var(--crema-cl);
  text-stroke:2px var(--crema-cl);
}
.hero .hl{
  font-style:normal; display:inline-block;
  background:var(--rojo); color:var(--crema-cl);
  padding:.04em .18em .0em; transform:rotate(-2deg);
  box-shadow:5px 5px 0 var(--amarillo);
}
.hero-tag{ font-size:clamp(1.05rem, 4vw, 1.5rem); color:var(--amarillo); margin-bottom:22px; transform:rotate(-1deg); }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* Stickers */
.sticker{ position:absolute; z-index:3; pointer-events:none; }
.sticker-round{
  top:calc(var(--header-h) + 18px); right:14px;
  width:104px; height:104px; border-radius:50%;
  background:var(--amarillo); color:var(--tinta);
  display:grid; place-content:center; text-align:center;
  font-size:.82rem; line-height:1.15; padding:10px;
  transform:rotate(9deg);
  border:3px dashed var(--tinta);
  animation:floaty 5s ease-in-out infinite;
}
.sticker-star{
  font-family:var(--f-groovy); font-size:1rem; text-align:center; line-height:1;
  background:var(--rojo); color:var(--crema-cl);
  padding:20px 14px;
  clip-path:polygon(50% 0%,61% 12%,76% 5%,79% 21%,95% 22%,89% 37%,100% 50%,89% 63%,95% 78%,79% 79%,76% 95%,61% 88%,50% 100%,39% 88%,24% 95%,21% 79%,5% 78%,11% 63%,0% 50%,11% 37%,5% 22%,21% 21%,24% 5%,39% 12%);
  transform:rotate(12deg) scale(1.15);
}
@keyframes floaty{ 0%,100%{ transform:rotate(9deg) translateY(0);} 50%{ transform:rotate(6deg) translateY(-8px);} }

/* ── Abanico del hero: columna propia ──
   Tres fotos como cartas en la mano, en su PROPIA columna flex
   entre el texto y el video (nunca se enciman). Se abre al pasar
   el cursor. Oculto bajo 1440px; las imágenes van por CSS dentro
   del media query, así el celular NUNCA las descarga. */
.hero-fan{ display:none; }
@media(min-width:1440px){
  .hero-fan{
    display:block; position:relative;
    order:2; flex:0 0 11rem; height:12.5rem;
    align-self:center; margin-top:4rem;
  }
  .fan-card{
    position:absolute; inset:0; border-radius:16px;
    border:3px solid var(--tinta);
    background-size:cover; background-position:center;
    box-shadow:5px 5px 0 rgba(38,19,12,.22);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .fc-1{ background-image:url(../assets/img/fan_tequenos.webp); transform:rotate(-11deg) translate(-28%,3%); }
  .fc-3{ background-image:url(../assets/img/fan_cachapa.webp);  transform:rotate(11deg)  translate(28%,3%); }
  .fc-2{ background-image:url(../assets/img/fan_burger.webp);   transform:rotate(1deg) translateY(-6%); box-shadow:6px 6px 0 var(--amarillo); }
  .hero-fan:hover .fc-1{ transform:rotate(-15deg) translate(-38%,-2%); }
  .hero-fan:hover .fc-3{ transform:rotate(15deg)  translate(38%,-2%); }
  .hero-fan:hover .fc-2{ transform:rotate(0) translateY(-11%) scale(1.04); }
  .fan-star{ top:-2rem; right:-1.6rem; z-index:3; transform:rotate(14deg); }
}
@media(prefers-reduced-motion: reduce){ .fan-card{ transition:none; } }

/* ── Marcas de agua flotantes del hero ──
   Solo PC (≥1280px): el celular no las descarga (van por CSS
   dentro del media query). Parallax suave con el mouse vía JS. */
.hero-wm{ display:none; }
@media(min-width:1280px){
  .hero-wm{ position:absolute; inset:0; display:block; z-index:0; pointer-events:none; overflow:hidden; }
  .wm{
    position:absolute; background-size:contain; background-repeat:no-repeat;
    opacity:.09; will-change:transform;
    animation:wmIn 1.4s ease backwards;
  }
  /* posiciones "a mano": tamaños e inclinaciones variadas (rotación via JS/data-rot) */
  .wm-1{ left:37%;  top:11%;    width:6.5rem; aspect-ratio:320/615; background-image:url(../assets/img/wm_frescolita.webp); transform:rotate(-14deg); animation-delay:.15s; }
  .wm-2{ left:27%;  bottom:5%;  width:8.5rem; aspect-ratio:320/512; background-image:url(../assets/img/wm_pan.webp);        transform:rotate(9deg);   animation-delay:.4s; }
  .wm-3{ left:47%;  top:50%;    width:6rem;   aspect-ratio:320/461; background-image:url(../assets/img/wm_maltin.webp);     transform:rotate(17deg);  animation-delay:.65s; }
  .wm-4{ left:4%;   top:7%;     width:4.8rem; aspect-ratio:320/770; background-image:url(../assets/img/wm_maltinbot.webp);  transform:rotate(-9deg);  animation-delay:.9s; }
  .wm-5{ left:1.5%; bottom:13%; width:5.5rem; aspect-ratio:320/927; background-image:url(../assets/img/wm_nestea.webp);     transform:rotate(12deg);  animation-delay:1.15s; }
}
@keyframes wmIn{ from{ opacity:0; } }
@media(prefers-reduced-motion: reduce){ .wm{ animation:none; } }

/* Capa de marcas de agua del MENÚ: mismas 5 imágenes repetidas
   (el navegador las cachea = 0 descargas extra). Posición y tamaño
   van inline en el HTML; aquí solo la imagen de cada variante. */
.menu-wm{ display:none; }
@media(min-width:1280px){
  .menu-wm{
    display:block; position:absolute; inset:0 -10vw;
    z-index:0; pointer-events:none;
  }
  .menu-wm .wm{ animation:none; }              /* entran con la sección, sin fade */
  .wmi-fres{ aspect-ratio:320/615; background-image:url(../assets/img/wm_frescolita.webp); }
  .wmi-pan{  aspect-ratio:320/512; background-image:url(../assets/img/wm_pan.webp); }
  .wmi-malt{ aspect-ratio:320/461; background-image:url(../assets/img/wm_maltin.webp); }
  .wmi-bot{  aspect-ratio:320/770; background-image:url(../assets/img/wm_maltinbot.webp); }
  .wmi-nes{  aspect-ratio:320/927; background-image:url(../assets/img/wm_nestea.webp); }
}

/* Hero en escritorio: dos columnas, video como "teléfono" inclinado */
@media(min-width:900px){
  .hero{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:4vw; padding:calc(var(--header-h) + 30px) 7vw 70px;
    background:var(--crema); color:var(--tinta); min-height:92svh;
  }
  .hero-shade{ display:none; }
  .hero-media{
    position:relative; inset:auto; order:3; flex:0 0 min(26vw, 30rem);
    aspect-ratio:9/16; border-radius:28px; overflow:visible;
  }
  .hero-video{
    border-radius:28px; border:4px solid var(--tinta);
    box-shadow:14px 14px 0 var(--amarillo), var(--shadow);
    transform:rotate(3deg);
  }
  .hero-inner{ order:1; max-width:700px; }
  .hero h1{ font-size:clamp(4rem, 7.5vw, 7rem); }
  .hero .l2{ -webkit-text-stroke:2.5px var(--rojo); }
  .hero .hl{ background:var(--rojo); }
  .hero-tag{ color:var(--rojo-osc); }
  .btn-ghost{ color:var(--tinta); border-color:var(--tinta); box-shadow:4px 4px 0 var(--tinta); }
  .chip-outline{ color:var(--tinta); border-color:var(--tinta); }
  .sticker-round{ top:auto; bottom:-18px; right:-30px; }
}

/* ═══════════ TICKER ═══════════ */
.ticker{
  background:var(--rojo); border-block:3px solid var(--tinta);
  overflow:hidden; padding:10px 0; position:relative; z-index:4;
}
.ticker-track{
  display:flex; width:max-content;
  animation:ticker 26s linear infinite;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.12em; color:var(--amarillo);
  white-space:nowrap;
}
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ═══════════ SECCIÓN MENÚ ═══════════ */
.menu-section{ position:relative; padding:64px 16px 72px; max-width:72rem; margin-inline:auto; }
/* Escala +13% del menú en PC (en móvil se mantiene compacto) */
@media(min-width:700px){ .menu-section{ zoom:1.13; } }

.sec-head{ text-align:center; margin-bottom:26px; }
.sec-title{ font-size:clamp(2.4rem, 9vw, 4.2rem); color:var(--rojo); position:relative; display:inline-block; }
.sec-title-light{ color:var(--crema); }
.title-doodle{
  display:block; font-size:clamp(1rem, 4vw, 1.3rem);
  color:var(--tinta); transform:rotate(-2deg); margin-top:6px;
  text-transform:none; letter-spacing:0;
}
.sec-title-light + .title-doodle, .sec-title-light .title-doodle{ color:var(--amarillo); }

/* Tabs */
.menu-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.menu-tab{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:1rem; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--blanco); color:var(--tinta);
  border:3px solid var(--tinta); border-radius:16px; padding:.7em 1.3em;
  box-shadow:4px 4px 0 var(--tinta); transition:.15s;
}
.menu-tab small{ font-family:var(--f-body); font-weight:600; font-size:.72rem; opacity:.7; }
.menu-tab.is-active{ background:var(--amarillo); transform:rotate(-1.5deg); }
.menu-tab:not(.is-active):hover{ transform:translateY(-2px); }

.menu-note{
  text-align:center; font-weight:600; margin-bottom:14px;
  color:var(--rojo-osc); font-size:.95rem;
}

/* ── DOCK DE CATEGORÍAS ──
   Estilo "dock animado" (como el dock de macOS): burbujas que se
   agrandan al acercar el cursor (solo desktop con mouse; en táctil
   quedan grandes y estables). Filtra el menú = menos scroll. */
.cat-nav{
  position:sticky; top:calc(var(--header-h) + 8px); z-index:10;
  display:flex; align-items:flex-end; gap:2px;
  width:max-content; max-width:calc(100vw - 24px);
  margin:0 auto 22px;
  padding:12px 10px 8px; /* aire arriba para la burbuja activa en móvil */
  background:var(--blanco);
  border:3px solid var(--tinta); border-radius:999px;
  box-shadow:6px 6px 0 var(--tinta);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cat-nav::-webkit-scrollbar{ display:none; }
/* En PC el dock no necesita scroll: overflow visible para que las
   burbujas magnificadas crezcan hacia arriba SIN cortarse */
@media(min-width:700px){
  .cat-nav{ overflow:visible; padding-top:10px; }
}

.cat-chip{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  flex-shrink:0; background:none; border:0; padding:2px 7px;
  color:var(--tinta);
}
.dock-ico{
  width:2.7rem; height:2.7rem; border-radius:50%;
  display:grid; place-content:center;
  font-size:1.35rem; line-height:1;
  background:var(--crema); border:2px solid var(--tinta);
  transform:scale(var(--mag,1));
  transform-origin:bottom center;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), background .18s;
}
.dock-label{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:.66rem; letter-spacing:.05em; white-space:nowrap;
}
.cat-chip:hover .dock-ico{ background:var(--amarillo); }
.cat-chip.is-active .dock-ico{
  background:var(--rojo);
  transform:scale(calc(var(--mag,1) * 1.12)) rotate(-8deg);
  box-shadow:0 4px 0 var(--amarillo);
}
.cat-chip.is-active .dock-label{
  color:var(--rojo); font-weight:400;
  text-decoration:underline 3px var(--amarillo); text-underline-offset:3px;
}
@media(min-width:700px){ .cat-nav{ position:static; } }

/* Card oculta por el filtro (hidden no vence a display:flex sin esto) */
.cat-card[hidden]{ display:none; }

/* Con filtro activo: una sola columna centrada */
.menu-grid.is-filtered{ grid-template-columns:1fr; max-width:34rem; margin-inline:auto; }
@media(min-width:1000px){
  .menu-grid.is-filtered .cat-big, .menu-grid.is-filtered .cat-card:not(.cat-big){ grid-column:auto; }
}

/* Grid de categorías */
.menu-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:700px){ .menu-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1000px){
  .menu-grid{ grid-template-columns:repeat(6, 1fr); }
  .cat-big{ grid-column:span 3; }
  .cat-card:not(.cat-big){ grid-column:span 2; }
}

/* Cards de categoría */
.cat-card{
  background:var(--blanco); border:3px solid var(--tinta); border-radius:var(--radius);
  overflow:hidden; box-shadow:6px 6px 0 rgba(38,19,12,.9);
  display:flex; flex-direction:column;
  transition:transform .18s ease;
}
.cat-card:hover{ transform:translateY(-4px) rotate(-.4deg); }
.cat-card:nth-child(even):hover{ transform:translateY(-4px) rotate(.4deg); }

.cat-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; border-bottom:3px solid var(--tinta); }
.cat-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.cat-card:hover .cat-photo img{ transform:scale(1.05); }
.cat-photo-mid{ aspect-ratio:16/9; }
.cat-badge{
  position:absolute; bottom:10px; left:10px;
  background:var(--amarillo); color:var(--tinta);
  padding:.3em .8em; border-radius:8px; border:2px solid var(--tinta);
  font-size:.95rem; transform:rotate(-2deg);
}

.cat-body{ padding:18px 18px 22px; }
.cat-card > .cat-head + *, .cat-card > .cat-head ~ .cat-sub, .cat-card > .cat-head ~ .items, .cat-card > .cat-head ~ .sub-group{ padding-inline:18px; }
.cat-card > .items:last-child, .cat-card > .cat-sub:last-child, .cat-card > .sub-group:last-child{ padding-bottom:20px; }

.cat-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px 10px;
}
.chip-img{
  width:4rem; height:4rem; object-fit:cover; border-radius:50%;
  border:3px solid var(--tinta); box-shadow:3px 3px 0 var(--amarillo);
  flex-shrink:0;
}
.cat-title{
  font-family:var(--f-groovy); font-weight:400; font-size:1.6rem; color:var(--rojo);
  line-height:1.1;
}
.cat-title small{ font-family:var(--f-body); font-size:.85rem; font-weight:600; color:var(--tinta); }
.price{
  font-family:var(--f-display); font-size:.95rem; vertical-align:middle;
  background:var(--amarillo); color:var(--tinta); border:2px solid var(--tinta);
  border-radius:8px; padding:.15em .5em; margin-left:.3em; display:inline-block; transform:rotate(-2deg);
}

.items li{
  padding:10px 0; border-bottom:2px dashed rgba(38,19,12,.18);
  display:flex; flex-direction:column; gap:2px;
}
.items li:last-child{ border-bottom:none; }
.items b{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:1.02rem; }
.items span{ font-size:.9rem; color:rgba(38,19,12,.75); }
.items-compact li{ padding:7px 0; }

.cat-sub{ font-size:.92rem; color:rgba(38,19,12,.8); padding:2px 0 10px; }
.cat-body .cat-sub{ padding:2px 0 10px; }

.sub-group{ padding-block:8px 12px; }
.sub-group h4{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.05em; font-size:1.05rem; color:var(--rojo); margin-bottom:2px;
}
.sub-group h4 small{ font-family:var(--f-body); font-size:.8rem; color:var(--tinta); }
.sub-group p{ font-size:.9rem; color:rgba(38,19,12,.78); }

.badge-sun{
  font-family:var(--f-marker); font-size:.75rem; background:var(--rojo); color:var(--crema-cl);
  border-radius:8px; padding:.2em .6em; display:inline-block; transform:rotate(-2deg);
  vertical-align:middle;
}

/* Cambio de panel */
.menu-panel{ display:none; }
.menu-panel.is-active{ display:block; }

.menu-cta{ text-align:center; margin-top:38px; }
.menu-cta .marker{ font-size:1.3rem; color:var(--rojo); transform:rotate(-2deg); display:block; margin-bottom:12px; }

/* ═══════════ REELS (TRAS LA PLANCHA) ═══════════ */
.reels-section{
  background:var(--tinta); color:var(--crema);
  padding:0 0 56px; position:relative;
}
.check-divider{
  height:26px;
  background:repeating-conic-gradient(var(--rojo) 0 25%, var(--crema) 0 50%);
  background-size:26px 26px;
  border-bottom:3px solid var(--tinta);
}
.reels-section .sec-head{ padding:44px 20px 4px; }

.reels-rail{
  display:flex; gap:18px; overflow-x:auto; padding:22px 20px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.reels-rail::-webkit-scrollbar{ display:none; }

.reel{
  position:relative; flex:0 0 min(72vw, 17rem);
  scroll-snap-align:center;
  border:4px solid var(--crema); border-radius:26px; overflow:hidden;
  background:#000; box-shadow:8px 8px 0 var(--rojo);
  transform:rotate(-1deg);
}
.reel:nth-child(even){ transform:rotate(1.2deg); box-shadow:8px 8px 0 var(--amarillo); }
.reel video{ aspect-ratio:9/16; width:100%; object-fit:cover; }
.reel-tag{
  position:absolute; top:12px; left:12px;
  background:var(--crema); color:var(--tinta);
  padding:.25em .7em; border-radius:8px; font-size:.9rem;
  transform:rotate(-3deg); border:2px solid var(--tinta);
}
.reel-sound{
  position:absolute; bottom:12px; right:12px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(248,237,219,.92); border:2px solid var(--tinta);
  font-size:1.1rem; display:grid; place-content:center;
}
.reels-hint{
  text-align:center; font-family:var(--f-marker);
  color:var(--amarillo); font-size:1rem; padding-top:6px;
}
@media(min-width:1100px){
  .reels-rail{ justify-content:center; }
  .reels-hint{ display:none; }
}

/* ═══════════ GALERÍA (POLAROIDS) ═══════════ */
.gallery-section{ padding:64px 18px 70px; max-width:72rem; margin-inline:auto; }
.polaroid-wall{ columns:2 160px; column-gap:16px; }
@media(min-width:800px){ .polaroid-wall{ columns:3 14rem; column-gap:20px; } }

.polaroid{
  break-inside:avoid; margin-bottom:18px;
  background:var(--blanco); border:2px solid var(--tinta);
  padding:8px 8px 6px; border-radius:8px;
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.polaroid img{ border-radius:4px; }
.polaroid figcaption{ padding:8px 4px 4px; font-size:.88rem; color:var(--tinta); }
.polaroid:nth-child(3n+1){ transform:rotate(-1.6deg); }
.polaroid:nth-child(3n+2){ transform:rotate(1.3deg); }
.polaroid:nth-child(3n){ transform:rotate(-.6deg); }
.polaroid:hover{ transform:rotate(0) scale(1.03); z-index:2; position:relative; }
.gallery-cta{ text-align:center; margin-top:28px; }

/* ═══════════ NOSOTROS ═══════════ */
.about-section{
  position:relative; background:var(--rojo); color:var(--crema-cl);
  padding:72px 24px; overflow:hidden;
  background-image:repeating-conic-gradient(rgba(0,0,0,.05) 0 25%, transparent 0 50%);
  background-size:26px 26px;
}
.about-inner{ max-width:720px; margin-inline:auto; text-align:center; }
.about-kicker{ color:var(--amarillo); font-size:1.15rem; margin-bottom:10px; transform:rotate(-1.5deg); }
.about-title{ font-size:clamp(1.9rem, 7vw, 3.4rem); margin-bottom:22px; }
.about-text{ font-size:1.05rem; margin-bottom:14px; opacity:.95; }
/* Sticker de "Nosotros": arriba a la derecha, sin estirarse (bottom:auto) */
.sticker-star-b{
  position:absolute; top:14px; right:10px; bottom:auto;
  transform:rotate(14deg) scale(1.05);
  background:var(--amarillo); color:var(--tinta);
}

/* ═══════════ UBICACIÓN ═══════════ */
.findus-section{ padding:64px 16px 76px; max-width:72rem; margin-inline:auto; }
.findus-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px; }
@media(min-width:880px){ .findus-grid{ grid-template-columns:1fr 1.1fr; align-items:stretch; } }

.findus-card{
  background:var(--blanco); border:3px solid var(--tinta); border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--amarillo);
  padding:26px 22px;
}
.findus-addr{ font-family:var(--f-display); font-weight:400; font-size:1.6rem; line-height:1.15; text-transform:uppercase; color:var(--rojo); }
.findus-note{ font-size:.92rem; margin:10px 0 18px; color:rgba(38,19,12,.75); }
.findus-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }

.hours-title{
  font-family:var(--f-groovy); font-weight:400; font-size:1.35rem; color:var(--rojo); margin-bottom:8px;
}
.hours li{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:7px 8px; border-bottom:2px dashed rgba(38,19,12,.15);
  font-size:.92rem; border-radius:8px;
}
.hours b{ font-weight:800; }
.hours .closed{ color:var(--rojo); font-weight:700; }
.hours li.is-today{ background:var(--amarillo); border-bottom-color:transparent; transform:rotate(-.5deg); border:2px solid var(--tinta); }
.hours li.is-today::after{ content:'← ' attr(data-today-label); font-family:var(--f-marker); font-size:.78rem; color:var(--rojo-osc); }

.findus-contact{ display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.findus-contact a{ font-weight:700; text-decoration:none; }
.findus-contact a:hover{ color:var(--rojo); }

.findus-map{
  border:3px solid var(--tinta); border-radius:var(--radius); overflow:hidden;
  box-shadow:8px 8px 0 var(--rojo); min-height:20rem;
}
.findus-map iframe{ width:100%; height:100%; min-height:20rem; border:0; }

/* ═══════════ FOOTER ═══════════ */
.footer{
  background:var(--tinta); color:var(--crema);
  text-align:center; padding:48px 20px 90px;
  border-top:3px solid var(--rojo);
}
.footer-logo{ width:12rem; height:auto; margin:0 auto 18px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.footer-social{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.footer-social a{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; color:var(--amarillo); font-size:.95rem;
}
.footer-social a:hover{ color:var(--crema-cl); text-decoration:underline; }
.footer-line{ font-size:.85rem; opacity:.8; }
.footer-love{ color:var(--amarillo); margin-top:8px; font-size:1rem; transform:rotate(-1deg); }
.footer-credit{ margin-top:14px; font-size:.7rem; letter-spacing:.04em; opacity:.55; }

/* ═══════════ WHATSAPP FAB ═══════════ */
.wa-fab{
  position:fixed; right:1rem; bottom:1rem; z-index:45;
  width:3.5rem; height:3.5rem; border-radius:50%;
  background:var(--verde-wa); color:#fff;
  display:grid; place-content:center;
  border:3px solid var(--tinta);
  box-shadow:4px 4px 0 var(--tinta);
  opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;
  transition:.3s ease;
}
.wa-fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-fab:hover{ transform:scale(1.08) rotate(6deg); }

/* ═══════════ ANIMACIONES DE ENTRADA ═══════════ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ═══════════ ACCESIBILIDAD: MOVIMIENTO REDUCIDO ═══════════ */
@media(prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker-track{ animation:none; }
  .sticker-round{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .cat-card, .polaroid, .btn{ transition:none; }
}