/* =============================================================================
   CRUNCHY — Granollers
   Oscuro, pero plano: sin degradados, sin halos y sin sombras difuminadas.
   El color se usa en bloques sólidos; la jerarquía la marca la tipografía.
   La fuente se define en css/fonts.css (único sitio para cambiarla).
   ============================================================================= */

/* --- 1. Tokens ------------------------------------------------------------- */
:root{
  /* Morados y rosas medidos sobre el propio logo */
  --violet:#7b16e0;
  --violet-deep:#4d0a97;
  --lila:#c9a2ff;
  --pink:#ff3ec9;

  --bg:#140720;              /* fondo plano, sin degradados */
  --bg-alt:#1a0929;
  --surface:#200d33;
  --surface-2:#2a1142;
  --line:#3a1a58;
  --line-soft:#2c1244;

  --text:#f5edfb;
  --text-dim:#bda9d2;
  --text-faint:#8f78aa;

  --radius:12px;
  --radius-lg:18px;
  --header-h:68px;
  --wrap:1140px;
  --ease:cubic-bezier(.2,.8,.3,1);
}

/* --- 2. Reset -------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16.5px;line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;}
::selection{background:var(--pink);color:var(--bg);}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.06;letter-spacing:-.035em;}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto;}

/* Trama de puntos: textura discreta en lugar de degradados radiales */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px);
  background-size:16px 16px;
}

/* --- 3. Botones ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.3rem;border-radius:8px;border:1.5px solid transparent;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none;}
.btn-primary{background:var(--pink);color:var(--bg);}
.btn-primary:hover{background:#ff6fd7;}
.btn-ghost{border-color:var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--lila);background:rgba(201,162,255,.08);}

/* --- 4. Cabecera ----------------------------------------------------------- */
header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:var(--bg);border-bottom:1px solid var(--line-soft);
}
nav{height:100%;display:flex;align-items:center;gap:1rem;
  width:min(100% - 32px,var(--wrap));margin-inline:auto;}
.brand{display:flex;align-items:center;gap:.55rem;margin-right:auto;}
.brand img{width:36px;height:36px;}
.brand span{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.04em;}

.nav-links{display:flex;align-items:center;gap:.1rem;list-style:none;}
.nav-links > li > a{
  display:block;padding:.42rem .78rem;border-radius:6px;
  font-weight:500;font-size:.94rem;color:var(--text-dim);
  transition:color .16s,background .16s;
}
.nav-links > li > a:hover{color:var(--text);background:var(--surface);}
.nav-links > li > a.active{color:var(--text);box-shadow:inset 0 -2px 0 var(--pink);border-radius:0;}
.nav-cta{margin-left:.4rem;padding:.55rem 1rem;font-size:.9rem;}
.nav-mobile-only{display:none;}
/* `.nav-links > li > a` (0,1,2) pisaba el color de `.btn-*` (0,1,0) y dejaba el
   botón del menú móvil ilegible. Estas dos reglas (0,2,0) lo devuelven. */
.nav-links .btn-primary{color:var(--bg);}
.nav-links .btn-ghost{color:var(--text);}

.burger{display:none;width:42px;height:42px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.burger span{width:22px;height:2px;background:var(--text);
  transition:transform .26s var(--ease),opacity .18s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* --- 5. Hero --------------------------------------------------------------- */
.hero{padding:64px 0 56px;border-bottom:1px solid var(--line-soft);overflow:hidden;}   /* el rotate del logo sobresalía 2px */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;}

/* Etiqueta plana, sin puntito que late */
.eyebrow{
  display:inline-block;padding:.32rem .75rem;margin-bottom:1.2rem;
  border:1px solid var(--line);border-radius:5px;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lila);
}

.hero h1{
  font-size:clamp(2.9rem,7.4vw,4.6rem);font-weight:900;letter-spacing:-.05em;
  line-height:.94;text-transform:uppercase;margin-bottom:1.05rem;
}
/* La palabra clave en bloque sólido: contraste alto y sin degradado */
.hero h1 em{
  font-style:normal;display:inline-block;
  background:var(--pink);color:var(--bg);
  padding:0 .1em .05em;border-radius:6px;
}
.lead{font-size:1.05rem;color:var(--text-dim);max-width:44ch;margin-bottom:1.7rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.8rem;}

/* Antes: tres cifras de relleno. Ahora: el dato que la gente busca. */
.hero-facts{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;}
.fact{display:inline-flex;align-items:center;gap:.55rem;font-size:.93rem;color:var(--text-dim);}
.fact svg{width:16px;height:16px;flex:none;stroke:var(--text-faint);}
.fact.is-open,.fact.is-shut{
  padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--text);
}
.fact .dot{width:8px;height:8px;border-radius:50%;background:#4ade80;flex:none;}
.fact.is-shut .dot{background:#fb7185;}

/* El logo, quieto y anclado: ni flota ni tiene halo */
.hero-visual{display:flex;justify-content:center;align-items:center;}
/* height:auto es obligatorio: el <img> lleva height="512" y, como .hero-visual
   es flex (align-items:stretch por defecto), el logo salía estirado. */
.hero-visual img{width:min(390px,100%);height:auto;transform:rotate(-4deg);}

/* --- 6. Cinta corredera ---------------------------------------------------- */
.ticker{
  background:var(--pink);color:var(--bg);overflow:hidden;padding:.62rem 0;
  border-block:1px solid var(--bg);
}
.ticker-track{display:flex;width:max-content;animation:roll 32s linear infinite;}
.ticker-track span{
  padding-right:2.2rem;font-family:var(--font-display);font-weight:800;
  font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
@keyframes roll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* --- 7. Secciones ---------------------------------------------------------- */
section{padding:78px 0;}
.section-alt{background:var(--bg-alt);border-block:1px solid var(--line-soft);}

.section-head{margin-bottom:2.6rem;max-width:60ch;}
.section-tag{
  font-family:var(--font-display);font-weight:800;font-size:.73rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin-bottom:.6rem;
}
.section-title{font-size:clamp(2rem,5.2vw,3rem);font-weight:900;text-transform:uppercase;}
.section-head p{margin-top:.7rem;color:var(--text-dim);}

/* --- 8. Por qué (numerado, sin cuadraditos de icono) ----------------------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.2rem;}
.feature{border-top:2px solid var(--line);padding-top:1.15rem;}
.feature .ico{
  display:block;font-family:var(--font-display);font-weight:900;font-size:2rem;
  color:var(--pink);line-height:1;letter-spacing:-.05em;margin-bottom:.6rem;
}
.feature h3{font-size:1.15rem;font-weight:800;margin-bottom:.4rem;}
.feature p{color:var(--text-dim);font-size:.95rem;}

/* --- 9. Carta -------------------------------------------------------------- */
/* El botón de la carta en PDF, debajo del titular de la sección */
.menu-pdf{margin-top:1.3rem;}

.menu-tabs{
  display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.2rem;margin-bottom:2rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.menu-tabs::-webkit-scrollbar{display:none;}
.tab-btn{
  flex:none;padding:.5rem 1.05rem;border-radius:7px;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);color:var(--text-dim);
  font-family:var(--font-display);font-weight:700;font-size:.9rem;white-space:nowrap;
  transition:color .16s,border-color .16s,background .16s;
}
.tab-btn:hover{color:var(--text);border-color:var(--lila);}
.tab-btn.active{background:var(--text);border-color:var(--text);color:var(--bg);}

.menu-panel{display:none;}
.menu-panel.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem;}

.dish{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .18s var(--ease);
}
.dish:hover{border-color:var(--lila);}
/* La foto sólo existe si hay foto: nada de recuadros vacíos con un emoji */
.dish-media{aspect-ratio:1/1;background:var(--surface-2);overflow:hidden;}   /* fotos cuadradas: sin recorte */
.dish-media img{width:100%;height:100%;object-fit:cover;}
.dish-body{padding:.95rem 1.1rem 1.05rem;display:flex;flex-direction:column;gap:.35rem;flex:1;}
.dish-top{display:flex;align-items:baseline;gap:.7rem;}
.dish-top h3{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;}
.dish-top .leader{flex:1;height:0;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:12px;}
.dish-price{font-family:var(--font-display);font-weight:900;font-size:1.1rem;white-space:nowrap;}
.dish p{color:var(--text-dim);font-size:.92rem;line-height:1.55;}
.dish-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.6rem;}
.tag{
  padding:.16rem .58rem;border:1px solid var(--line);border-radius:5px;
  font-size:.72rem;font-weight:600;color:var(--text-dim);
}
.tag.hot{border-color:var(--pink);color:var(--pink);}
.tag.top{border-color:var(--lila);color:var(--lila);}
.menu-empty{grid-column:1/-1;padding:2.5rem 0;color:var(--text-faint);}

/* --- 10. Horario ----------------------------------------------------------- */
.hours{max-width:600px;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:.4rem 1.4rem;background:var(--surface);}
.hours-row{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.97rem;}
.hours-row:last-child{border-bottom:0;}
.hours-row .day{color:var(--text-dim);}
.hours-row .time{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;}
.hours-row.today{margin-inline:-.8rem;padding-inline:.8rem;background:var(--surface-2);
  border-radius:8px;border-bottom-color:transparent;}
.hours-row.today .day{color:var(--text);font-weight:700;}
.hours-row .badge{
  display:inline-block;margin-left:.55rem;padding:.1rem .42rem;border-radius:4px;
  background:var(--pink);color:var(--bg);font-size:.62rem;font-weight:800;
  letter-spacing:.08em;vertical-align:1px;
}
.hours-row.closed .time{color:var(--text-faint);font-weight:600;}

/* --- 11. Mapa -------------------------------------------------------------- */
.map-box{display:grid;grid-template-columns:1.3fr .7fr;
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);}
.map-box iframe{width:100%;height:100%;min-height:380px;border:0;display:block;}
.map-info{padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.9rem;
  align-items:flex-start;justify-content:center;}
.map-info h3{font-size:1.3rem;font-weight:800;text-transform:uppercase;}
.map-info address{font-style:normal;line-height:1.7;color:var(--text-dim);}
.map-info address strong{color:var(--text);font-size:1.04rem;}
.map-note{color:var(--text-dim);font-size:.94rem;}

/* --- 12. Contacto ---------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;}
.contact-card{
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.3rem 1.2rem;
  background:var(--surface);transition:border-color .18s var(--ease);
}
.contact-card:hover{border-color:var(--pink);}
.contact-card svg{width:20px;height:20px;stroke:var(--text-faint);margin-bottom:.75rem;}
.contact-card h4{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:.25rem;}
.contact-card p{font-size:.98rem;word-break:break-word;}

/* --- 13. Pie --------------------------------------------------------------- */
footer{border-top:1px solid var(--line-soft);padding:2.6rem 0;background:var(--bg-alt);}
footer .brand{margin:0 0 1.1rem;}
.foot-links{display:flex;gap:1.3rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.foot-links a{color:var(--text-dim);font-size:.92rem;}
.foot-links a:hover{color:var(--text);}
.copy{color:var(--text-faint);font-size:.84rem;border-top:1px solid var(--line-soft);padding-top:1.1rem;}

/* --- 14. Botones flotantes ------------------------------------------------- */
.fab{
  position:fixed;right:18px;z-index:90;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;border:0;cursor:pointer;
  transition:transform .16s var(--ease);
}
.fab svg{width:24px;height:24px;}
.fab:hover{transform:scale(1.06);}
.fab-wa{bottom:18px;background:#25d366;color:#0b2e18;}
.fab-top{bottom:80px;background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  opacity:0;pointer-events:none;}
.fab-top.show{opacity:1;pointer-events:auto;}

/* --- 15. Revelado ---------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* =============================================================================
   16. RESPONSIVE — el móvil es donde más se va a ver
   ============================================================================= */
@media (max-width:940px){
  /* Hero móvil: composición centrada y simétrica. El logo va arriba pero
     pequeño (marca, no imagen de portada), para que toda la primera pantalla
     — logo, titular, botones y estado de apertura — entre sin hacer scroll. */
  .hero-grid{grid-template-columns:1fr;gap:0;text-align:center;}
  .hero-visual{order:-1;justify-content:center;margin-bottom:1.5rem;}
  .hero-visual img{width:min(170px,44%);transform:none;}   /* centrado: sin giro */
  .eyebrow{margin-bottom:1rem;}
  .lead{margin-inline:auto;}
  .hero-actions{justify-content:center;}
  .hero-facts{align-items:center;}

  .features{grid-template-columns:1fr;gap:1.6rem;}
  .map-box{grid-template-columns:1fr;}
  .map-box iframe{min-height:280px;}
}

@media (max-width:820px){
  .burger{display:flex;}
  .nav-cta{display:none;}
  .nav-mobile-only{display:flex;flex-direction:column;gap:.55rem;margin-top:.7rem;}
  .nav-mobile-only .btn{justify-content:center;}
  .nav-links{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:.9rem 16px 1.3rem;
    transform:translateY(-130%);transition:transform .3s var(--ease);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links > li > a{padding:.78rem .85rem;font-size:1.04rem;}
  .nav-links > li > a.active{box-shadow:inset 2px 0 0 var(--pink);}
  body.nav-open{overflow:hidden;}
}

@media (max-width:620px){
  section{padding:56px 0;}
  .hero{padding:30px 0 40px;}
  .hero-actions{gap:.6rem;}
  .hero-actions .btn{flex:1 1 0;justify-content:center;}   /* mismo ancho: la composición va centrada */
  .section-head{margin-bottom:1.8rem;}
  .menu-panel.active{grid-template-columns:1fr;gap:.9rem;}
  .menu-tabs{margin-inline:-16px;padding-inline:16px;}
  .hours{padding-inline:1.1rem;}
  .map-info{padding:1.5rem 1.2rem;}
  .contact-grid{grid-template-columns:1fr 1fr;}
  .fab{width:48px;height:48px;right:14px;}
  .fab-wa{bottom:14px;} .fab-top{bottom:72px;}
}

@media (max-width:380px){
  .contact-grid{grid-template-columns:1fr;}
  .dish-top .leader{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}