/* Fuentes alojadas en la propia web (sin Google Fonts: menos conexiones y carga más rápida) */
@font-face{ font-family:"Baloo 2"; font-style:normal; font-weight:500 800; font-display:swap; src:url("../fonts/baloo2.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Caveat"; font-style:normal; font-weight:600 700; font-display:swap; src:url("../fonts/caveat.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/poppins-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/poppins-500.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/poppins-600.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins-700.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================
   UMAMI HEALTHY FOOD — Design system
   Verde de marca #78C783 · Morado de marca #4F2260
   Tipografía: Baloo 2 (display) + Poppins (texto) + Caveat (acento manuscrito)
   ========================================================= */

:root{
  /* --- Marca (extraída de materiales reales del cliente) --- */
  --green-50:  #f2f9ee;
  --green-100: #e2f2da;
  --green-300: #a9dcae;
  --green-500: #78c783; /* verde de marca */
  --green-600: #5aab69;
  --green-700: #3f8850;
  --green-900: #234a2e;

  --purple-500: #4f2260; /* morado de marca */
  --purple-600: #401b4e;
  --purple-700: #33153e;
  --purple-800: #26102f;
  --purple-100: #efe3f2;
  --purple-50:  #f8f2f9;

  /* --- Neutros rotos (nunca blanco/negro puro) --- */
  --bg:      #f6f8f0;   /* fondo de página, blanco roto con tinte verde */
  --cream: #f7f1e1;      /* crema cálido (secciones de planes) */
  --surface: #fdfbf5;   /* tarjetas / superficies elevadas */
  --surface-2: #eef2e6; /* superficies secundarias */
  --ink:     #211a28;   /* texto principal, negro roto con tinte morado */
  --ink-soft:#544a5c;   /* texto secundario */
  --ink-mute:#7c7284;   /* texto terciario / metadatos */
  --line:    #e2e2d3;   /* bordes sutiles */

  /* --- Semántico --- */
  --accent: var(--green-500);
  --accent-ink: var(--purple-500);
  --on-accent: var(--purple-800);

  /* --- Tipografía --- */
  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", cursive;

  /* --- Espaciado (ritmo 4/8) --- */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: 5.25rem;
  --space-7: 8.5rem;

  /* --- Radios --- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* --- Sombra --- */
  --shadow-sm: 0 1px 2px rgba(33,26,40,.06), 0 1px 1px rgba(33,26,40,.04);
  --shadow-md: 0 8px 24px -8px rgba(33,26,40,.18);
  --shadow-lg: 0 24px 48px -16px rgba(38,16,47,.28);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 160ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;

  /* --- z-index --- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
p{ margin:0 0 var(--space-2); max-width: 62ch; }
p.lead{ font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--ink-soft); text-wrap: pretty;}

.container{
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 640px){ .container{ padding-inline: var(--space-4); } }

section{ padding-block: var(--space-6); }
@media (max-width: 640px){ section{ padding-block: var(--space-5); } }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:var(--space-3); top:-60px;
  background:var(--purple-500); color:var(--surface);
  padding:.7em 1.2em; border-radius: var(--r-sm); z-index: var(--z-toast);
  transition: top var(--dur-med) var(--ease-out);
}
.skip-link:focus{ top: var(--space-3); }

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

/* =========================== Tipografía de acento =========================== */
.hand{
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--purple-500);
  transform: rotate(-2deg);
  display:inline-block;
}
.eyebrow-hand{
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  color: var(--purple-500);
  font-weight: 700;
  margin-bottom: -.4em;
  display:inline-block;
}

.doodle-underline{
  position:relative;
  display:inline-block;
}
.doodle-underline svg{
  position:absolute; left:0; bottom:-.18em; width:100%; height:.4em;
  overflow:visible;
}

/* =========================== Botones =========================== */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--surface);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-body); font-weight:600; font-size: .98rem;
  padding: .95em 1.7em;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
/* Móviles muy estrechos (320 px): un botón con texto largo («Consulta nuestra carta completa») no puede salirse de la pantalla */
@media (max-width: 360px){ .btn{ white-space: normal; text-align:center; max-width:100%; } }
.btn:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn:active{ transform: scale(.97) translateY(0); }
.btn-primary{ --btn-bg: var(--green-500); --btn-fg: var(--purple-800); }
.btn-primary:hover{ --btn-bg: var(--green-600); }
.btn-secondary{ --btn-bg: var(--purple-500); --btn-fg: var(--surface); }
.btn-secondary:hover{ --btn-bg: var(--purple-600); }
.btn-outline{ --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ --btn-bg: var(--ink); --btn-fg: var(--surface); }
.btn-outline-light{ --btn-bg: transparent; --btn-fg: var(--surface); border-color: rgba(253,251,245,.5); }
.btn-outline-light:hover{ --btn-bg: rgba(253,251,245,.12); border-color: var(--surface); }
.btn-sm{ padding: .6em 1.2em; font-size: .88rem; }
.btn-block{ width:100%; }

@media (hover: hover) and (pointer: fine){
  .btn{ transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
}

/* =========================== Header / Nav =========================== */
.site-header{
  position: sticky; top:0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled{
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: var(--space-2);
  gap: var(--space-3);
}
@media (min-width: 900px){
  .nav{ display:grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--space-5); }
  .nav-links{ order:1; justify-self:start; gap: var(--space-2); font-size:.72rem; }
  .brand{ order:2; justify-self:center; }
  .nav-cta{ order:3; justify-self:end; }
}
.brand{ display:flex; align-items:baseline; gap:.5rem; }
.brand-word{
  font-family: var(--font-display); font-weight:800; font-size: 1.7rem;
  color: var(--purple-500); letter-spacing: -0.02em;
}
.brand-word span{ color: var(--green-600); }
.brand-tag{
  font-family: var(--font-hand); font-size:1rem; color: var(--ink-mute);
  display:none;
}
@media (min-width:480px){ .brand-tag{ display:inline; } }

.nav-links{
  display:none;
  align-items:center;
  gap: var(--space-4);
  font-weight:600; font-size:.85rem;
}
.nav-links a{
  position:relative;
  padding-block:.3em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: var(--green-600); transition: right var(--dur-med) var(--ease-out);
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ right:0; }
.nav-links a[aria-current="page"]{ color: var(--ink); }
.nav-links a[aria-current="page"]::after{ right:0; background: var(--purple-500); }

.nav-cta{ display:flex; align-items:center; gap: var(--space-2); }
.nav-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex:none;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-social svg{ width:20px; height:20px; }
.nav-social:hover{ color: var(--purple-500); background: var(--surface-2); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-social{ color: var(--purple-700); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-social:hover{ background: rgba(255,255,255,.16); }

/* Icono de cuenta (arriba a la derecha): lleva a «Mi cuenta» o, si eres el administrador, al panel. Punto verde = sesión iniciada. */
.nav-account{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; flex:none;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-account svg{ width:23px; height:23px; }
.nav-account:hover, .nav-account[aria-current="page"]{ color: var(--purple-500); background: var(--surface-2); }
.nav-account-dot{
  display:none; position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%;
  background: var(--green-600); border:2px solid var(--bg);
}
.nav-account.has-session .nav-account-dot{ display:block; }
.nav-account.is-admin{ color: var(--purple-500); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-account{ color: var(--purple-700); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-account:hover{ background: rgba(255,255,255,.16); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-account-dot{ border-color: var(--purple-100); }
.nav-whatsapp{ display:none; }
@media (max-width: 899px){
  .nav-cta .btn-outline{ display:none; }     /* en móvil «Pedir a domicilio» ya está siempre debajo, no hace falta repetirlo arriba */
  .nav-social:not(.nav-whatsapp){ display:none; }   /* Instagram sigue en el pie de la página */
  .nav-whatsapp{ display:inline-flex; }
}

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius: var(--r-sm);
  background:transparent; border:none; cursor:pointer;
  color: var(--ink);
}
.nav-toggle svg{ width:24px; height:24px; }

@media (min-width: 900px){
  .nav-links{ display:flex; }
  .nav-toggle{ display:none; }
}

.mobile-panel{
  display:none;
  position:fixed; inset:0; z-index: var(--z-overlay);
  background: var(--purple-800);
  color: var(--surface);
  padding: var(--space-4) var(--space-3);
  overflow-y:auto;
}
.mobile-panel.is-open{ display:flex; flex-direction:column; }
.mobile-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-4); }
.mobile-panel .brand-word{ color: var(--green-500); }
.mobile-panel .brand-word span{ color: var(--surface); }
.mobile-links{ display:flex; flex-direction:column; }
.mobile-links a{
  font-family: var(--font-display); font-size: 1.6rem; font-weight:700;
  color: var(--surface); padding-block:.5em;
  border-bottom: 1px solid rgba(253,251,245,.14);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.mobile-links a:first-child{ padding-top:0; }
.mobile-links a:last-child{ border-bottom:none; }
.mobile-links a:hover{ color: var(--green-500); padding-left:.15em; }
.mobile-panel .btn{
  margin-top: var(--space-4);
  padding: .7em 1.5em; font-size:.9rem;
}
.mobile-credit{
  margin-top: var(--space-4); margin-bottom:0;
  text-align:center; font-size:.68rem; letter-spacing:.02em;
  color: rgba(253,251,245,.5);
}
.mobile-close{ background:transparent; border:none; color:var(--surface); width:44px; height:44px; cursor:pointer; }

/* =========================== Hero =========================== */
.hero{
  padding-block: var(--space-6) var(--space-5);
  position:relative;
  overflow:clip;
}
.hero-grid{
  display:grid; gap: var(--space-5);
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero h1{ font-size: clamp(2.4rem, 1.9rem + 2.6vw, 4.4rem); }
.hero-trust{
  display:flex; flex-wrap:wrap; gap: var(--space-3);
  margin-top: var(--space-4);
  font-size:.92rem; color: var(--ink-soft); font-weight:600;
}
.hero-trust li{ display:flex; align-items:center; gap:.45em; }
.hero-trust svg{ width:18px; height:18px; flex:none; color: var(--green-700); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-4); }

.hero-art{
  position:relative; aspect-ratio: 1/1; max-width:480px; margin-inline:auto;
}

/* =========================== Hero v2 (portada) =========================== */
.hero-v2{
  position:relative;
  overflow: clip;
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(3.5rem, 2rem + 5vw, 7rem);
}
.hero-bg-wave{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  color: var(--green-100);
  opacity:.7;
}
.hero-inner{
  position:relative;
  display:flex; align-items:center;
  min-height: clamp(480px, 46vw, 600px);
  max-width: 1360px;
}
.hero-images-row{ position:static; }
.hero-blob-img{
  position:absolute;
  width: clamp(230px, 21vw, 360px);
  height:auto;
  z-index:0;
}
.hero-blob-img.tl{ top: 0; left: 0; }
.hero-blob-img.br{
  bottom: 0; right: 0;
  width: clamp(220px, 20vw, 340px);
}
.hero-center{
  position:relative; z-index:1;
  max-width: 660px; margin-inline:auto;
  text-align:center;
}
.hero-center .eyebrow-hand{ display:block; }
.hero-center h1{
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 4.4rem);
  line-height: 1.22;
  margin-top:.15em;
}
.hero-center .lead{ margin-inline:auto; margin-top: var(--space-4); }

.mark{
  display:inline-block;
  background: var(--green-500);
  color: var(--purple-800);
  padding: .05em .34em;
  border-radius: .32em;
  transform: rotate(-1.4deg);
  box-shadow: 3px 3px 0 var(--purple-800);
}

.hero-social-row{
  display:flex; align-items:center; justify-content:center;
  gap: var(--space-5);
  flex-wrap:wrap;
  margin-top: var(--space-5);
}
.hero-social-proof{ display:flex; align-items:center; gap: var(--space-2); }
.avatar-stack{ display:flex; flex:none; }
.avatar-stack .avatar{
  width:38px; height:38px; border-radius:50%;
  border:3px solid var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:.8rem;
  margin-left:-12px;
  box-shadow: var(--shadow-sm);
}
.avatar-stack .avatar:first-child{ margin-left:0; }
.avatar-stack .avatar.a1{ background: var(--green-500); color: var(--purple-800); }
.avatar-stack .avatar.a2{ background: var(--purple-500); color: var(--surface); }
.avatar-stack .avatar.a3{ background: var(--ink); color: var(--surface); }
.hero-social-text{ text-align:left; font-size:.82rem; line-height:1.3; color: var(--ink-soft); }
.hero-social-text strong{ display:block; font-family: var(--font-display); color: var(--ink); font-size:.92rem; }
.hero-social-text .stars{ display:inline-flex; align-items:center; gap:.3em; color: var(--green-700); font-weight:700; }
.hero-social-text .stars svg{ width:14px; height:14px; }

@media (max-width: 760px){
  .hero-inner{ min-height:0; display:flex; flex-direction:column; align-items:center; gap: var(--space-4); }
  .hero-images-row{
    display:flex; justify-content:center; align-items:flex-start;
    gap: var(--space-3); order:1; width:100%;
  }
  .hero-blob-img{ position:relative; top:auto; left:auto; right:auto; bottom:auto; width:150px; }
  .hero-blob-img.br{ width:150px; }
  .hero-center{ order:2; }
  .hero-social-row{ flex-direction:column; gap: var(--space-3); }
  .hero-social-text{ text-align:center; }
}

/* =========================== Tarjetas de plato =========================== */
.dish-grid{
  display:grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.dish-card{
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .dish-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
}
.dish-media{
  aspect-ratio: 4/3;
  background: var(--green-100);
  position:relative;
}
.dish-body{ padding: var(--space-3); }
.dish-body h3{ font-size:1.2rem; margin-bottom:.25em; }
.dish-body p{ font-size:.92rem; color: var(--ink-soft); margin-bottom:.75em; }
.dish-price{ font-family:var(--font-display); font-weight:700; color: var(--purple-500); }
.dish-tag{
  position:absolute; top:.8em; left:.8em;
  background: var(--purple-500); color:var(--surface);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.35em .8em; border-radius: var(--r-pill);
}

/* =========================== Placeholder de imagen ilustrado =========================== */
.art-frame{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--green-500) 35%, transparent), transparent 55%),
    radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--purple-500) 25%, transparent), transparent 55%),
    var(--green-100);
  position:relative;
}
.art-frame svg{ width:46%; height:46%; color: var(--purple-500); opacity:.85; }
.art-frame::after{
  content: attr(data-label);
  position:absolute; bottom:.8em; left:.8em; right:.8em;
  font-size:.72rem; font-weight:600; color: var(--purple-700);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  padding:.4em .7em; border-radius: var(--r-sm);
}

/* =========================== Secciones utilitarias =========================== */
.section-head{ max-width: 78ch; margin-bottom: var(--space-6); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 1.5rem + 1.9vw, 2.9rem); margin-top:.15em; }
.section-head .lead{ margin-top: var(--space-3); max-width: 62ch; margin-inline:auto; }

.band-purple{ background: var(--purple-500); color: var(--surface); }
.band-purple h2, .band-purple h3{ color: var(--surface); }
.band-purple p{ color: color-mix(in srgb, var(--surface) 82%, transparent); }
.band-purple .btn-outline{ --btn-fg: var(--surface); border-color: rgba(253,251,245,.55); }
.band-purple .btn-outline:hover{ --btn-bg: rgba(253,251,245,.14); border-color: var(--surface); }

.band-cream-2{ background: var(--surface-2); }
.band-cream{ background: var(--cream); }

/* =========================== Quote =========================== */
.quote-block{
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--space-5);
  position:relative;
  box-shadow: var(--shadow-sm);
}
.quote-block p{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  color: var(--ink); max-width: 42ch; text-wrap: balance;
}
.quote-cite{ font-family: var(--font-body); font-weight:600; color: var(--purple-500); font-size:.95rem; }
.quote-cite a{ text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--purple-500) 45%, transparent); transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.quote-cite a:hover{ text-decoration-color: var(--purple-500); }

/* =========================== Stepper (Crea tu poke) =========================== */
.steps{
  display:grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  counter-reset: step;
}
.step{
  background: var(--surface); border-radius: var(--r-md); padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.step-num{
  font-family: var(--font-display); font-weight:800; font-size:1.6rem;
  color: var(--green-600); display:block; margin-bottom:.3em;
}
.step h4{ margin-bottom:.35em; font-size:1.05rem; }
.step ul{ font-size:.88rem; color: var(--ink-soft); display:flex; flex-wrap:wrap; gap:.3em .5em; }
.step ul li::after{ content:"·"; margin-left:.5em; color: var(--ink-mute); }
.step ul li:last-child::after{ content:""; }

/* =========================== CARTA =========================== */
.hero-ctas--center{ justify-content:center; margin-top: var(--space-3); }

/* --- Menú lateral de categorías (escritorio) / tira horizontal (móvil y tablet) --- */
.cat-rail-wrap{
  position: sticky; top: 64px; z-index: 30;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 14px -10px rgba(0,0,0,.35);
  margin-bottom: var(--space-3);
}
.cat-rail{
  display:flex; gap:.6rem; overflow-x:auto;
  padding: .6rem var(--space-3);
  scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none;
}
.cat-rail::-webkit-scrollbar{ display:none; }
/* --- Flechas reutilizables para cualquier tira con desplazamiento horizontal (categorías, pasos de «Crea tu poke»…) --- */
.rail-arrow{
  display:none; position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; z-index:2;
  align-items:center; justify-content:center;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm); border:1px solid var(--line);
  cursor:pointer; padding:0;
}
.rail-arrow svg{ width:16px; height:16px; }
.rail-arrow.prev{ left:4px; }
.rail-arrow.next{ right:4px; }
.rail-arrow:disabled{ opacity:.35; cursor:default; }
.scroll-rail-wrap.can-scroll .rail-arrow{ display:flex; }
@media (min-width:1240px){ .cat-rail-wrap .rail-arrow{ display:none !important; } }
.cat-rail a{
  flex:none; width:64px; aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background: var(--purple-500); color: var(--green-300);
  text-align:center; line-height:1.05; padding:4px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cat-rail a svg{ width:24px; height:24px; }
.cat-rail a span{ font-size:.5rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.cat-rail a:hover{ transform: scale(1.06); }
.cat-rail a:active{ transform: scale(.96); }
.cat-rail a{ --ib: var(--purple-500); }
.cat-rail a.is-active{ --ib: var(--green-500); background: var(--green-500); color: var(--purple-500); }
.cat-rail a span{ hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 1240px){
  .cat-rail-wrap{ position:static; background:none; backdrop-filter:none; box-shadow:none; margin-bottom:0; }
  .cat-rail{
    position: fixed; top:50%; left:14px; transform: translateY(-50%);
    z-index: 40; flex-direction:column; gap:.4rem;
    padding:0; overflow:visible; background:none; backdrop-filter:none; border:0;
  }
  .cat-rail a{
    width:56px; box-shadow: 0 0 0 3px var(--surface), var(--shadow-md);
  }
}
@media (min-width:1240px) and (max-height:760px){
  .cat-rail{ gap:.3rem; }
  .cat-rail a{ width:44px; }
  .cat-rail a svg{ width:22px; height:22px; }
  .cat-rail a span{ display:none; }
}

/* En escritorio el menú lateral aparece al bajar del hero */
@media (min-width: 1240px){
  .js .cat-rail{
    opacity:0; visibility:hidden; transform: translate(-18px, -50%);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .js .cat-rail.is-shown{
    opacity:1; visibility:visible; transform: translate(0, -50%);
    transition-delay: 0s;
  }
}

/* --- Barra de color de cada categoría --- */
.carta-cat{ padding:0; scroll-margin-top: 120px; }
.cat-band{
  position:relative; overflow:hidden; text-align:center;
  padding-block: clamp(2rem, 1.4rem + 3vw, 3.4rem);
}
.cat-band::before, .cat-band::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; opacity:.16; background:#fff;
}
.cat-band::before{ width:280px; height:280px; top:-130px; left:-70px; }
.cat-band::after{ width:200px; height:200px; bottom:-100px; right:-40px; }
.cat-band .container{ position:relative; z-index:1; }
.cat-hand{
  display:block; font-family: var(--font-hand); font-weight:700;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); margin-bottom:-.15em;
  transform: rotate(-2deg);
}
.cat-band h2{ font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); margin:0; text-transform:uppercase; letter-spacing:.01em; }
.cat-sub{
  margin: .5em auto 0; max-width:none;
  font-size: clamp(.75rem, .7rem + .25vw, .9rem);
  font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.cat-band--green{ background: var(--green-500); }
.cat-band--green .cat-hand{ color: var(--purple-500); }
.cat-band--green h2{ color: var(--purple-500); }
.cat-band--green .cat-sub{ color: var(--purple-500); }
.cat-band--purple{ background: var(--purple-500); }
.cat-band--purple .cat-hand{ color: var(--green-300); }
.cat-band--purple h2{ color: var(--surface); }
.cat-band--purple .cat-sub{ color: var(--green-300); }

.carta-body{
  max-width: 1080px;
  padding-block: clamp(3.25rem, 2.2rem + 4.4vw, 6rem);
}

/* --- Introducción --- */
.carta-intro{ padding-block: var(--space-6) clamp(5rem, 3.5rem + 6vw, 8.5rem); }
.carta-intro .container{ max-width: 900px; }
.intro-text{ text-align:center; }
.intro-text h2{ font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem); color: var(--purple-500); margin-bottom:.5em; }
.intro-text .eyebrow-hand{ display:block; margin-bottom:.1em; }
.intro-text p{ margin-inline:auto; font-size:1.05rem; color: var(--ink-soft); text-wrap: pretty; }

.intro-pdf{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap: var(--space-4);
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-600) 100%);
  color: var(--surface); border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -24px rgba(38,16,47,.55);
}
.intro-pdf::before, .intro-pdf::after{ content:""; position:absolute; border-radius:50%; z-index:-1; background: var(--green-500); }
.intro-pdf::before{ width:260px; height:260px; right:-70px; top:-120px; opacity:.22; }
.intro-pdf::after{ width:170px; height:170px; left:38%; bottom:-110px; opacity:.16; }
.pdf-mock{ position:relative; flex:none; width:150px; height:172px; }
.pdf-mock img{
  position:absolute; width:118px; height:150px; object-fit:cover; object-position:top; border-radius:10px;
  box-shadow: 0 12px 26px -8px rgba(0,0,0,.55); border:3px solid var(--surface);
  transition: transform var(--dur-slow) var(--ease-out);
}
.pdf-sheet-b{ right:0; bottom:0; transform: rotate(9deg); }
.pdf-sheet-a{ left:0; top:0; transform: rotate(-7deg); }
@media (hover:hover){
  .intro-pdf:hover .pdf-sheet-a{ transform: rotate(-11deg) translateY(-3px); }
  .intro-pdf:hover .pdf-sheet-b{ transform: rotate(13deg) translateX(3px); }
}
.pdf-copy{ flex:1; min-width:0; }
.pdf-kicker{ display:block; font-family: var(--font-hand); font-weight:700; font-size:1.45rem; color: var(--green-300); line-height:1; margin-bottom:.15em; }
.pdf-copy h3{ font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); color: var(--surface); margin-bottom:.3em; }
.pdf-copy p{ margin:0; font-size:.95rem; color: color-mix(in srgb, var(--surface) 82%, transparent); text-wrap: pretty; }
.btn-lg{ padding: 1.05em 1.9em; font-size:1.02rem; }
.intro-pdf .btn{ flex:none; }
@media (max-width: 760px){
  .intro-pdf{ flex-direction:column; text-align:center; padding: var(--space-4) var(--space-3); gap: var(--space-3); }
  .pdf-mock{ width:140px; height:160px; }
}

/* --- Chips de precio (Crea tu poke) --- */
.price-chip{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.1em;
  min-width:128px; padding:.6em 1.4em; border-radius: var(--r-md);
  background: var(--green-100); color: var(--purple-500); line-height:1.1;
}
.price-chip small{ font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--purple-600); }
.price-chip b{ font-family: var(--font-display); font-size:1.5rem; font-weight:800; }

/* --- Tarjetas de plato (sin foto, sin iconos) --- */
.dish-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--space-4) var(--space-3); }
.dish-grid--4{ max-width: 720px; margin-inline:auto; }
.dish{
  --head-bg: var(--purple-500); --head-ink: var(--surface); --foot-bg: var(--green-100); --foot-ink: var(--purple-500);
  position:relative;
  flex: 1 1 290px; max-width: 340px;
  display:flex; flex-direction:column;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(33,26,40,.06), 0 10px 28px -14px rgba(38,16,47,.28);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.carta-cat--purple .dish{ --head-bg: var(--green-500); --head-ink: var(--purple-500); --foot-bg: var(--purple-100); }
@media (hover:hover){ .dish:hover{ transform: translateY(-5px); box-shadow: 0 2px 4px rgba(33,26,40,.06), 0 22px 40px -16px rgba(38,16,47,.38); } }
.dish-head{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height: 6.4rem; padding: 1.3rem 1.2rem 2.1rem;
  background-color: var(--head-bg); color: var(--head-ink);
  background-image:
    radial-gradient(circle at 94% 8%, rgba(255,255,255,.16) 0 42px, transparent 43px),
    radial-gradient(circle at 3% 100%, rgba(255,255,255,.10) 0 34px, transparent 35px);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.dish-head::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5C10 0 20 0 30 4S50 10 60 6 80 0 100 4V10z' fill='%23fdfbf5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.dish h3{ font-size:1.22rem; text-transform:uppercase; letter-spacing:.02em; color: var(--head-ink); margin:0; line-height:1.15; }
.veg-badge{
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); z-index:2;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
  background: var(--surface); color: var(--green-700); border:1.5px solid var(--green-500);
  padding:.25em .8em; border-radius: var(--r-pill);
}
.dish .desc{ font-size:.92rem; line-height:1.55; color: var(--ink-soft); text-align:center; text-wrap: pretty; margin:0; padding: var(--space-3) var(--space-3) var(--space-3); max-width:none; flex:1; }
.dish-foot{
  display:flex; margin: 0 var(--space-2) var(--space-2);
  background: var(--foot-bg); border-radius: var(--r-md); overflow:hidden;
}
.dish-foot .cell{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.6rem .5rem; color: var(--foot-ink); line-height:1.1; }
.dish-foot .cell + .cell{ border-left:1.5px dashed color-mix(in srgb, var(--foot-ink) 30%, transparent); }
.dish-foot small{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.8; margin-bottom:.2em; }
.dish-foot b{ font-family: var(--font-display); font-size:1.4rem; font-weight:800; }

/* --- Alérgenos desplegables bajo cada plato (los genera tools/alergenos.js) --- */
.alerg{ margin: 0 var(--space-2) var(--space-2); font-size:.82rem; }
.dish-foot + .alerg{ margin-top: -.2rem; }
.alerg > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:38px; padding:.35rem .9rem; border-radius: var(--r-pill);
  color: var(--ink-soft); font-weight:600; letter-spacing:.02em;
  border:1.5px dashed color-mix(in srgb, var(--purple-500) 32%, transparent);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.alerg > summary::-webkit-details-marker{ display:none; }
.alerg > summary::after{
  content:""; width:.5rem; height:.5rem; margin-top:-.2rem; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out), margin var(--dur-fast) var(--ease-out);
}
.alerg[open] > summary::after{ transform: rotate(-135deg); margin-top:.25rem; }
.alerg > summary:hover{ background: var(--purple-50); color: var(--purple-500); border-color: color-mix(in srgb, var(--purple-500) 55%, transparent); }
.alerg > summary:focus-visible{ outline:3px solid var(--purple-500); outline-offset:2px; }
.alerg[open] > summary{ background: var(--purple-50); color: var(--purple-500); border-style:solid; }
@media (pointer:coarse){ .alerg > summary{ min-height:44px; } }
.drink-group .alerg{ margin: var(--space-2) 0 0; }
.alerg-body{ display:grid; gap:.6rem; padding:.75rem .25rem .2rem; text-align:left; }
.alerg-row{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; max-width:none; }
.alerg-tit{ flex-basis:100%; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--purple-600); }
.alerg-chip{
  font-size:.78rem; font-weight:600; line-height:1.2; padding:.25em .75em; border-radius: var(--r-pill);
  background: var(--purple-100); color: var(--purple-500);
}
.alerg-row--may .alerg-chip{ background: transparent; border:1.5px dashed color-mix(in srgb, var(--purple-500) 50%, transparent); padding:.15em .7em; }
.alerg-note{ margin:0; max-width:none; font-size:.76rem; line-height:1.45; color: var(--ink-soft); text-wrap: pretty; }
/* «Crea tu poke»: la tabla por ingrediente cuelga bajo el constructor */
.alerg--poke{ max-width:720px; margin: var(--space-4) auto 0; font-size:.9rem; }
.alerg--poke .alerg-body{ padding: .9rem .25rem .2rem; }
.alerg-table{ width:100%; min-width:460px; border-collapse:collapse; font-size:.84rem; background: var(--surface); border-radius: var(--r-md); overflow:hidden; }
.alerg-table th, .alerg-table td{ padding:.5rem .7rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.alerg-table thead th{ font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--purple-600); background: var(--purple-50); }
.alerg-table tbody th[scope="row"]{ font-weight:600; color: var(--ink); white-space:nowrap; }
.alerg-table .alerg-cat th{ background: var(--green-100); color: var(--purple-500); font-family: var(--font-display); font-size:.9rem; letter-spacing:.02em; }

/* --- Crea tu poke --- */
.builder-intro{ text-align:center; margin-inline:auto; font-size:1.05rem; color: var(--ink-soft); }
.builder-prices{ display:flex; justify-content:center; gap: var(--space-3); margin-bottom: var(--space-5); }
.builder{
  display:grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--space-4); align-items:start;
}
.step-list{ display:flex; flex-direction:column; gap:.5rem; }
.step-tab{
  display:flex; align-items:center; gap:.8rem; width:100%; text-align:left;
  padding:.7rem 1rem; border-radius: var(--r-pill); border:2px solid transparent;
  background: transparent; color: var(--purple-500); cursor:pointer; font-family: var(--font-display);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.step-tab:hover{ background: var(--purple-50); }
.step-tab:active{ transform: scale(.98); }
.step-tab[aria-selected="true"]{ background: var(--purple-500); color: var(--surface); }
.step-n{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:.95rem; background: var(--green-100); color: var(--purple-500);
}
.step-tab[aria-selected="true"] .step-n{ background: var(--green-500); }
.step-txt{ flex:1; display:flex; flex-direction:column; line-height:1.15; }
.step-txt b{ font-size:1.05rem; font-weight:700; }
.step-txt em{ font-style:normal; font-family: var(--font-body); font-size:.72rem; font-weight:500; opacity:.75; }
.step-icos{ display:flex; margin-right:-.2rem; }
.step-icos .ing-ico{ width:30px; height:30px; margin-left:-8px; }

.step-panels{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--space-3) var(--space-3) var(--space-4); min-height: 320px;
}
.step-panel:focus-visible{ outline-offset:8px; }
.panel-head{ font-family: var(--font-display); font-size:1.1rem; color: var(--purple-500); margin:0 0 var(--space-3); max-width:none; }
.panel-note{ font-family: var(--font-body); font-size:.8rem; font-weight:600; color: var(--green-700); background: var(--green-100); padding:.2em .7em; border-radius: var(--r-pill); margin-left:.4em; white-space:nowrap; }
/* Flex en vez de grid: así, si la última fila queda con un hueco (número impar de opciones), se centra sola en vez de pegarse a la izquierda */
.opt-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--space-2); }
.opt-grid .opt{ flex: 1 1 118px; max-width:160px; }
.opt{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem;
  padding:.8rem .4rem; border-radius: var(--r-md); background: var(--bg);
}
.step-panel:not([hidden]) .opt{ animation: opt-in 320ms var(--ease-out) both; }
.step-panel:not([hidden]) .opt:nth-child(2){ animation-delay:30ms; } .step-panel:not([hidden]) .opt:nth-child(3){ animation-delay:60ms; }
.step-panel:not([hidden]) .opt:nth-child(4){ animation-delay:90ms; } .step-panel:not([hidden]) .opt:nth-child(5){ animation-delay:120ms; }
.step-panel:not([hidden]) .opt:nth-child(n+6){ animation-delay:150ms; }
@keyframes opt-in{ from{ opacity:0; transform: translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.opt .ing-ico{ width:56px; height:56px; }
.opt-name{ font-size:.82rem; font-weight:600; line-height:1.2; color: var(--ink); }
.opt-extra{ font-size:.7rem; font-weight:700; color: var(--purple-500); background: var(--purple-100); padding:.15em .6em; border-radius: var(--r-pill); }
.ing-ico{ display:block; flex:none; }
.builder-cta{ text-align:center; margin-top: var(--space-4); }
.step-list-wrap{ position:relative; min-width:0; }
@media (max-width: 820px){
  .builder{ grid-template-columns: 1fr; gap: var(--space-3); }
  .step-list-wrap{ margin-bottom: var(--space-3); }
  .step-list{ flex-direction:row; overflow-x:auto; gap:.4rem; padding-bottom:.3rem; scrollbar-width:none; scroll-behavior:smooth; }
  .step-list::-webkit-scrollbar{ display:none; }
  .step-tab{ width:auto; flex:none; padding:.55rem .9rem .55rem .6rem; }
  .step-tab .step-icos{ display:none; }
  .step-txt b{ font-size:.95rem; white-space:nowrap; }
  .step-txt em{ display:none; }
}
@media (min-width:821px){ .step-list-wrap .rail-arrow{ display:none !important; } }

/* --- Bebidas: Aguas y Refrescos apiladas a la izquierda y Cervezas (la lista más larga) a la derecha, sin huecos --- */
.drink-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows:auto; gap: var(--space-3);
  grid-template-areas: "aguas cervezas" "refrescos cervezas";
}
.drink-group:nth-child(1){ grid-area:aguas; }
.drink-group:nth-child(2){ grid-area:cervezas; }
.drink-group:nth-child(3){ grid-area:refrescos; }
.drink-group{
  display:flex; flex-direction:column;
  background: var(--surface); border-radius: var(--r-lg); padding: var(--space-3) var(--space-4) var(--space-3);
  box-shadow: 0 1px 2px rgba(33,26,40,.06), 0 10px 28px -14px rgba(38,16,47,.28);
}
.drink-group h3{
  font-size:1.3rem; text-transform:uppercase; letter-spacing:.02em; color: var(--purple-500);
  margin: 0 0 .5rem; padding-bottom:.6rem; border-bottom:3px solid var(--green-500);
}
.drink-group ul{ display:flex; flex-direction:column; }
.drink-group li{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.45em 0; border-top:1px dashed var(--line); font-size:.94rem;
}
.drink-group li:first-child{ border-top:0; }
.drink-cols li{ flex:1; font-size:.9rem; }
.drink-cols{ flex:1; display:grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
.drink-cols ul li:first-child{ border-top:0; }
.d-name{ font-weight:500; }
.d-name small{ display:block; font-size:.76rem; font-weight:400; color: var(--ink-mute); line-height:1.35; margin-top:.15em; }
.d-price{ font-family: var(--font-display); font-weight:700; color: var(--purple-500); white-space:nowrap; }
@media (max-width: 760px){
  .drink-grid{ grid-template-columns: 1fr; grid-auto-rows:auto; grid-template-areas:none; }
  .drink-group:nth-child(n){ grid-area:auto; }
  .drink-cols{ grid-template-columns: 1fr; }
  .drink-cols ul + ul li:first-child{ border-top:1px dashed var(--line); }
}

/* --- Visor de la carta (PDF en imagen, sin descarga) --- */
.pdf-viewer{
  position:fixed; inset:0; z-index: var(--z-overlay);
  display:flex; flex-direction:column; background: #1d0b25;
  opacity:0; transition: opacity var(--dur-med) var(--ease-out);
}
.pdf-viewer[hidden]{ display:none; }
.pdf-viewer.is-open{ opacity:1; }
.pdf-viewer-bar{
  flex:none; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.6rem var(--space-3); background: var(--purple-800); color: var(--surface);
  border-bottom:1px solid rgba(253,251,245,.12);
}
.pdf-viewer-title{ font-family: var(--font-display); font-size:1.15rem; margin-right:auto; }
.pdf-viewer-tabs, .pdf-viewer-zoom{ display:flex; gap:.25rem; background: rgba(253,251,245,.1); padding:3px; border-radius: var(--r-pill); }
.pdf-viewer-bar button{
  font:inherit; font-weight:600; font-size:.85rem; color: var(--surface); background:transparent; border:0; cursor:pointer;
  padding:.4em 1em; border-radius: var(--r-pill); min-height:36px;
}
.pdf-viewer-tabs .is-active{ background: var(--green-500); color: var(--purple-500); }
.pdf-viewer-zoom button{ width:40px; padding:0; font-size:1.2rem; line-height:1; }
.pdf-viewer-bar button:hover:not(.is-active){ background: rgba(253,251,245,.16); }
.pdf-viewer-bar button:disabled{ opacity:.35; cursor:default; }
.pdf-viewer-bar .pdf-viewer-close{ width:40px; height:40px; padding:0; display:grid; place-items:center; background: rgba(253,251,245,.1); }
.pdf-viewer-close svg{ width:20px; height:20px; }
.pdf-viewer-scroll{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding: var(--space-3) var(--space-2) var(--space-5); text-align:center; }
.pdf-sheet{ width: calc(min(100%, 720px) * var(--zoom, 1)); max-width:none; margin: 0 auto var(--space-4); display:none; border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-lg); text-align:left; }
.pdf-sheet.is-active{ display:block; }
.pdf-sheet--green{ background:#78c783; } .pdf-sheet--purple{ background:#4f2260; }
.pdf-sheet img{ display:block; width:100%; height:auto; }
.pdf-sheet img:not([src]){ min-height:40vh; }
@media (max-width:560px){ .pdf-viewer-title{ display:none; } .pdf-viewer-bar{ justify-content:space-between; } }

/* =========================== Gallery =========================== */
.gallery-grid{
  display:grid; gap: var(--space-2);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:720px){
  /* Flex en vez de grid: si el número de fotos es impar, la última se centra en vez de quedar pegada a la izquierda */
  .gallery-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
  .gallery-grid .gallery-item{ flex: 0 1 calc(50% - var(--space-2) / 2); width: calc(50% - var(--space-2) / 2); }
}
.gallery-item{ aspect-ratio:1/1; border-radius: var(--r-md); overflow:hidden; }
.gallery-item.tall{ grid-row: span 2; aspect-ratio: 1/2.15; }
@media (max-width:720px){ .gallery-item.tall{ aspect-ratio:1/1; grid-row:span 1; } }

/* --- Botones-imagen que abren el visor (reset de apariencia de <button>) --- */
button.spot-item, button.gallery-item{
  appearance:none; border:0; margin:0; padding:0; background:none; font:inherit;
  text-align:left; cursor: zoom-in; width:100%;
}

/* --- Spotlight (El local: dentro y fuera) --- */
.spot-grid{ display:grid; gap: var(--space-3); grid-template-columns: repeat(4, 1fr); }
@media (max-width:900px){ .spot-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:480px){ .spot-grid{ grid-template-columns: 1fr; } }
.spot-item{ position:relative; display:block; border-radius: var(--r-lg); overflow:hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-sm); }
.spot-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.spot-caption{
  position:absolute; inset:auto 0 0 0; padding: var(--space-4) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgba(10,6,14,.92) 0%, rgba(10,6,14,.55) 55%, transparent 100%);
  color:#fff; pointer-events:none;
}
.spot-caption strong{
  font-family: var(--font-display); font-weight:700; font-size:1.1rem; display:block;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.spot-caption span{ font-size:.8rem; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.55); }

/* --- Galería de reels (enlazan al reel real de Instagram) --- */
.reel-grid{ display:grid; gap: var(--space-2); grid-template-columns: repeat(5, 1fr); }
@media (max-width:900px){ .reel-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:560px){
  /* Flex en vez de grid: si el número de reels es impar, el último se centra en vez de quedar pegado a la izquierda */
  .reel-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
  .reel-grid .reel-item{ flex: 0 1 calc(50% - var(--space-2) / 2); width: calc(50% - var(--space-2) / 2); }
}
.reel-item{ position:relative; display:block; aspect-ratio: 9/16; border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-sm); }
.reel-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-item::after{ content:""; position:absolute; inset:0; background: rgba(38,16,47,0); transition: background var(--dur-med) var(--ease-out); }
.reel-item .insta-play{ width:34px; height:34px; }
.reel-item .insta-play svg{ width:16px; height:16px; }
@media (hover:hover) and (pointer:fine){
  .reel-item:hover img{ transform: scale(1.06); }
  .reel-item:hover::after{ background: rgba(38,16,47,.14); }
}

/* --- Reseñas de clientes en Google (rejilla densa) ---
   Flexbox en vez de grid: así la última fila incompleta queda centrada
   (huecos repartidos a ambos lados) en lugar de pegada a la izquierda. */
.reviews-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.reviews-grid .gallery-item{
  flex: 0 0 calc((100% - 7*6px)/8);
  aspect-ratio: 1/1; border-radius: var(--r-sm);
}
@media (max-width:1100px){ .reviews-grid .gallery-item{ flex-basis: calc((100% - 5*6px)/6); } }
@media (max-width:720px){ .reviews-grid .gallery-item{ flex-basis: calc((100% - 3*6px)/4); } }
@media (max-width:480px){ .reviews-grid .gallery-item{ flex-basis: calc((100% - 2*6px)/3); } }
.reviews-cta-wrap{ display:flex; justify-content:center; max-width:none; margin-inline:auto; }
.reviews-cta:hover{ --btn-bg: var(--green-500); --btn-fg: var(--surface); border-color: var(--green-500); }

/* --- Visor de imagen (lightbox) --- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding: var(--space-4);
  background: rgba(12,6,16,.9);
  opacity:0; visibility:hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.lightbox.is-open{ opacity:1; visibility:visible; transition: opacity var(--dur-med) var(--ease-out); }
.lightbox-figure{ position:relative; max-width:min(1100px,92vw); max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.lightbox-figure img{
  max-width:100%; max-height:80vh; width:auto; height:auto;
  border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.45);
  background: var(--surface-2);
  transform: scale(.96); transition: transform var(--dur-med) var(--ease-out);
}
.lightbox.is-open .lightbox-figure img{ transform: scale(1); }
.lightbox-caption{ margin-top: var(--space-2); color: rgba(255,255,255,.88); font-size:.92rem; text-align:center; max-width:70ch; }
.lightbox-close{
  position:absolute; top:-46px; right:-6px;
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox-close:hover{ background: rgba(255,255,255,.24); }
.lightbox-close svg{ width:20px; height:20px; }
@media (max-width:640px){
  .lightbox-close{ top:-44px; right:0; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox-figure img{ transition:none; }
}

/* =========================== Contact =========================== */
/* Contacto: mapa a la izquierda e información a la derecha, del mismo alto (sin huecos en blanco). En móvil, uno debajo del otro. */
.contact-split{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--space-4); align-items:stretch; max-width:1120px; margin-inline:auto; }
.contact-map{ position:relative; display:flex; min-height:420px; }
.contact-map .map-frame{ flex:1; width:100%; height:auto; aspect-ratio:auto; min-height:inherit; }
.contact-map iframe.map-frame{ height:100%; }
.map-open{
  position:absolute; left:14px; bottom:14px; z-index:2; padding:.5em 1em; border-radius: var(--r-pill);
  background: var(--surface); color: var(--purple-500); font-weight:600; font-size:.88rem; box-shadow: var(--shadow-md);
}
.map-open:hover{ background: var(--purple-50); }
.contact-info{ display:flex; }
.contact-info .info-card{ flex:1; display:flex; flex-direction:column; }
.info-foot{ margin-top:auto; padding-top: var(--space-3); display:flex; flex-direction:column; gap: var(--space-2); }
.info-foot p{ margin:0; font-size:.9rem; color: var(--ink-soft); max-width:none; }
.info-foot a:not(.btn){ color: var(--purple-500); font-weight:600; }
@media (max-width:900px){
  .contact-split{ grid-template-columns:1fr; max-width:640px; }
  .contact-map{ min-height:0; }
  .contact-map .map-frame{ aspect-ratio:4 / 3; min-height:0; }
}
.info-card{ background:var(--surface); border-radius:var(--r-lg); padding:var(--space-4); box-shadow:var(--shadow-sm); }
.info-row{ display:flex; gap: var(--space-2); padding-block: var(--space-2); border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:none; }
.info-row svg{ width:22px; height:22px; flex:none; color: var(--green-700); margin-top:.15em; }
.info-row h4{ font-size:.95rem; margin-bottom:.15em; }
.info-row p{ font-size:.92rem; color:var(--ink-soft); margin:0; }
.info-sep{ color: var(--ink-mute); }
@media (max-width:420px){ .info-sep{ display:none; } .info-row p{ display:flex; flex-direction:column; gap:.2em; align-items:flex-start; } }
.map-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:0; width:100%; aspect-ratio: 4/3; }

.order-apps{ display:flex; flex-wrap:wrap; gap:.6em; margin-top: var(--space-3); }
.order-app{
  display:flex; align-items:center; gap:.6em;
  padding:.7em 1.1em; border-radius: var(--r-pill);
  background: var(--surface-2); font-weight:600; font-size:.9rem;
  border:1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.order-app:hover{ border-color: var(--green-600); transform: translateY(-2px); }

.form-field{ display:flex; flex-direction:column; gap:.4em; margin-bottom: var(--space-2); }
.form-field label{ font-weight:600; font-size:.88rem; }
.form-field input, .form-field textarea{
  font-family: var(--font-body); font-size:1rem;
  padding:.85em 1em; border-radius: var(--r-sm); border:1.5px solid var(--line);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--purple-500); }

.req-mark{ color:#8a1f1f; font-weight:700; }
.form-hint--req{ margin-bottom: var(--space-3); }
.form-check{ display:flex; align-items:flex-start; gap:.6em; margin-bottom: var(--space-3); }
.form-check input{ margin-top:.3em; width:18px; height:18px; accent-color: var(--purple-500); flex:none; }
.form-check label{ font-size:.88rem; color: var(--ink-soft); font-weight:400; }
.form-check a{ color: var(--purple-500); font-weight:600; }

/* =========================== Footer =========================== */
.site-footer{
  background: var(--purple-800); color: var(--surface);
  padding-block: var(--space-6) var(--space-4);
}
.footer-grid{
  display:grid; gap: var(--space-5);
  grid-template-columns: 1.3fr 1fr 1fr;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; gap: var(--space-4); } }
.footer-grid h5{
  font-family:var(--font-body); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--green-500); margin-bottom: var(--space-2);
}
.footer-links{ display:flex; flex-direction:column; gap:.6em; }
.footer-links a{ color: color-mix(in srgb, var(--surface) 85%, transparent); transition: color var(--dur-fast) var(--ease-out); }
.footer-links a:hover{ color: var(--green-500); }
.footer-brand .brand-word{ color: var(--green-500); font-size:2rem; }
.footer-brand .brand-word span{ color: var(--surface); }
.footer-bottom{
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top:1px solid rgba(253,251,245,.15);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--space-2);
  font-size:.85rem; color: color-mix(in srgb, var(--surface) 65%, transparent);
}
.social-row{ display:flex; gap:.7em; margin-top: var(--space-2); }
.social-row a{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(253,251,245,.1); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.social-row a:hover{ background: var(--green-500); color: var(--purple-800); transform: translateY(-3px); }
.social-row svg{ width:18px; height:18px; }
.icon-whatsapp{
  display:block; width:18px; height:18px; background-color: currentColor;
  -webkit-mask: url('../img/icon-whatsapp.png') center / contain no-repeat;
  mask: url('../img/icon-whatsapp.png') center / contain no-repeat;
}

/* =========================== Reveal on scroll =========================== */
.reveal{
  opacity:1; transform:none;
}
.js .reveal{
  opacity:0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* stagger helper */
.reveal-group > *{ transition-delay: calc(var(--i,0) * 60ms); }

/* =========================== Page hero (sub-pages) =========================== */
.page-hero{ padding-block: var(--space-5) var(--space-4); }
.page-hero .eyebrow-hand{ display:block; }
.page-hero h1{ font-size: clamp(2rem, 1.6rem + 2vw, 3.4rem); }
.breadcrumb{ font-size:.85rem; color: var(--ink-mute); margin-bottom: var(--space-2); }
.breadcrumb a:hover{ color: var(--purple-500); }

/* =========================== Hero band — color de fondo + nav integrada (sub-páginas) =========================== */
/* El header sigue siendo hermano de <main> (accesibilidad / skip-link intactos),
   pero se posiciona flotando sobre el hero: transparente al cargar, sólido al hacer scroll. */
body.hero-tinted .site-header{
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.hero-tinted .site-header.is-scrolled{
  position: fixed;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
/* Sobre el hero el verde de marca del logo y del texto de nav se funde con el fondo:
   se oscurecen a morado mientras flota sobre el hero y recuperan su aspecto normal al hacer scroll. */
body.hero-tinted .site-header:not(.is-scrolled) .brand-logo{
  filter: brightness(0) saturate(100%) invert(13%) sepia(32%) saturate(2600%) hue-rotate(255deg) brightness(90%) contrast(95%);
}
body.hero-tinted .site-header:not(.is-scrolled) .nav-links a{ color: var(--purple-700); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-links a:hover{ color: var(--purple-800); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-links a[aria-current="page"]{ color: var(--purple-800); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-links a::after{ background: var(--purple-700); }
body.hero-tinted .site-header:not(.is-scrolled) .btn-outline{ --btn-fg: var(--purple-700); border-color: var(--purple-700); }
body.hero-tinted .site-header:not(.is-scrolled) .btn-outline:hover{ --btn-bg: var(--purple-700); --btn-fg: var(--surface); }
body.hero-tinted .site-header:not(.is-scrolled) .nav-toggle{ color: var(--purple-700); }

.hero-band{
  position: relative;
  overflow: clip;
  background:
    linear-gradient(to bottom, var(--surface) 0%, var(--surface) 32%, transparent 58%),
    radial-gradient(65% 62% at 50% 38%, var(--surface) 0%, var(--surface) 15%, color-mix(in srgb, var(--green-300) 72%, var(--surface)) 100%);
  padding-block: clamp(5rem, 4rem + 4.5vw, 7rem) 0;
}
.hero-band-inner{
  position: relative; z-index: 1;
  max-width: 720px; margin-inline: auto; text-align: center;
}
.hero-band-inner .eyebrow-hand{ display:block; }
.hero-band-inner h1{ font-size: clamp(2.3rem, 1.7rem + 2.6vw, 4rem); margin-top:.1em; }
.hero-band-inner .lead{ margin-inline: auto; }

.hero-band-features{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: var(--space-3) var(--space-4);
  margin-block: var(--space-3) var(--space-4);
}
.hero-band-features li{
  display:flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.92rem; color: var(--ink);
}
.hero-band-features svg{ width:19px; height:19px; flex:none; color: var(--purple-500); }
.hero-band-inner > .btn{ margin-top:.2em; }

.hero-band-bowls{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; justify-content:center;
  margin-top: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
}
/* Los tres pokes se recortan por abajo (según la línea marcada) justo a la altura
   del borde inferior del hero: no hay hueco entre el corte y el límite del hero. */
.hero-band-bowls img{
  display:block;
  width: clamp(200px, 19vw, 360px);
  height: auto;
  object-fit: cover;
  object-position: top;
}
.hero-band-bowls .bowl-left{ aspect-ratio: 620 / 538; margin-right: clamp(-5.5rem, -3rem - 3vw, -2.5rem); }
.hero-band-bowls .bowl-right{ aspect-ratio: 620 / 488; margin-left: clamp(-5.5rem, -3rem - 3vw, -2.5rem); }
.hero-band-bowls .bowl-center{ width: clamp(280px, 26vw, 480px); z-index:1; aspect-ratio: 700 / 535; }
@media (max-width: 560px){
  .hero-band-bowls .bowl-side{ width: clamp(130px, 30vw, 190px); margin-inline: -1.75rem; }
  .hero-band-bowls .bowl-center{ width: clamp(170px, 42vw, 250px); }
}

.hero-band-wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  width:100%; height:clamp(24px,4vw,44px);
}
@media (max-width: 640px){
  .hero-band{ padding-block: clamp(4.5rem, 3.75rem + 6vw, 6rem) 0; }
  .hero-band + section{ padding-top: calc(var(--space-5) + 2rem); }
}

/* =========================== Misc =========================== */
.badge-row{ display:flex; flex-wrap:wrap; gap:.5em; margin-top: var(--space-2); }
.badge{
  font-size:.78rem; font-weight:600; padding:.4em .9em; border-radius: var(--r-pill);
  background: var(--green-100); color: var(--green-700);
}
.badge.alt{ background: var(--purple-100); color: var(--purple-500); }

.two-col{ display:grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }
.two-col.reverse{ direction: rtl; }
.two-col.reverse > *{ direction: ltr; }

.value-grid{ display:grid; gap: var(--space-5) var(--space-5); grid-template-columns: repeat(2,1fr); max-width:920px; margin-inline:auto; }
@media (max-width:640px){ .value-grid{ grid-template-columns:1fr; max-width:460px; } }
.value-item{ display:flex; gap: var(--space-3); align-items:flex-start; }
.value-item .icon{
  flex:none; width:52px; height:52px; border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--purple-500), var(--purple-700));
  color: var(--green-300);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  animation: icon-bob 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i,0) * -0.9s);
}
.value-item .icon svg{ width:24px; height:24px; }
.value-item h4{ font-size:1.05rem; margin-bottom:.25em; }
.value-item p{ font-size:.92rem; color: var(--ink-soft); margin:0; }
@media (prefers-reduced-motion: reduce){ .value-item .icon{ animation:none; } }

.value-photo{
  margin-top: var(--space-6); border-radius: var(--r-lg); overflow:hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 16/8; max-width:960px; margin-inline:auto;
}
.value-photo img{ width:100%; height:100%; object-fit:cover; }
.value-photo-caption{ text-align:center; margin-top: var(--space-3); color: var(--ink-soft); font-size:.96rem; max-width:56ch; margin-inline:auto; }

.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: var(--z-nav);
  background: var(--surface); border-top:1px solid var(--line);
  padding: var(--space-2) var(--space-3);
  display:flex; gap:.6em;
  box-shadow: 0 -8px 24px -12px rgba(33,26,40,.25);
}
@media (min-width: 900px){ .sticky-cta{ display:none; } }

/* =========================================================
   AMPLIACIÓN — fotos reales, más movimiento, FAQ, cookies
   ========================================================= */

/* --- Logo real (PNG) en header / footer --- */
.brand-logo{ height: 34px; width:auto; display:block; }
.mobile-panel .brand-logo{ height:30px; filter: brightness(0) invert(1); }
.footer-brand .brand-logo{ height:40px; filter: brightness(0) invert(1); }

/* --- Fotografía real dentro de los frames existentes --- */
.photo-frame{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .dish-card:hover .photo-frame, .gallery-item:hover .photo-frame{ transform: scale(1.06); }
}
.dish-media, .gallery-item, .hero-art .art-frame, .two-col .art-frame{ overflow:hidden; }

/* --- Blobs decorativos ambientales --- */
.blob-field{ position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:-1; }
.blob{
  position:absolute; border-radius:50%; filter: blur(38px); opacity:.55;
  animation: float-blob 11s var(--ease-in-out) infinite;
}
.blob.b1{ width:280px; height:280px; background: var(--green-300); top:-60px; right:-40px; animation-duration:13s; }
.blob.b2{ width:220px; height:220px; background: var(--purple-100); bottom:-40px; left:-30px; animation-duration:9s; animation-delay:-3s; }
.blob.b3{ width:160px; height:160px; background: var(--green-500); opacity:.3; top:40%; right:15%; animation-duration:15s; animation-delay:-6s; }
@keyframes float-blob{
  0%, 100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(14px,-18px) scale(1.06); }
  66%{ transform: translate(-12px,12px) scale(.96); }
}
@media (prefers-reduced-motion: reduce){ .blob{ animation: none; } }
.hero{ position:relative; }

/* --- Doodle: trazo animado al cargar --- */
.doodle-underline svg path{
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw-doodle 900ms var(--ease-out) 500ms forwards;
}
@media (prefers-reduced-motion: reduce){ .doodle-underline svg path{ animation: none; stroke-dashoffset:0; } }
@keyframes draw-doodle{ to{ stroke-dashoffset: 0; } }

/* --- Botón: brillo al pasar el ratón --- */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{ transform: translateX(120%); }
}
.btn > *{ position:relative; z-index:2; }

/* --- Iconos con rebote en hover --- */
@media (hover:hover) and (pointer:fine){
  .value-item .icon, .info-row svg{ transition: transform var(--dur-fast) var(--ease-out); }
  .value-item:hover .icon, .info-row:hover svg{ animation-play-state:paused; transform: scale(1.14) rotate(-6deg); }
  .social-row a svg{ transition: transform var(--dur-fast) var(--ease-out); }
  .social-row a:hover svg{ transform: scale(1.15); }
  .feature-block .icon{ transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
  .feature-block:hover .icon{ animation-play-state: paused; transform: scale(1.2) rotate(-8deg); background: var(--green-500); color: var(--purple-800); }
  .insta-follow-icon{ transition: transform var(--dur-fast) var(--ease-out); }
  .insta-follow:hover .insta-follow-icon{ animation-play-state: paused; transform: scale(1.15) rotate(-6deg); }
}

/* --- Encabezados con aparición por palabra (usado en hero) --- */
.hero h1, .hero-center h1{ animation: rise-in 700ms var(--ease-out) both; }
.hero .lead, .hero-center .lead{ animation: rise-in 700ms var(--ease-out) 120ms both; }
.hero .hero-ctas, .hero-center .hero-social-row{ animation: rise-in 700ms var(--ease-out) 220ms both; }
.hero .hero-trust{ animation: rise-in 700ms var(--ease-out) 320ms both; }
.hero .eyebrow-hand, .hero-center .eyebrow-hand{ animation: rise-in 700ms var(--ease-out) 40ms both; }
@keyframes rise-in{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero h1, .hero .lead, .hero .hero-ctas, .hero .hero-trust, .hero .eyebrow-hand,
  .hero-center h1, .hero-center .lead, .hero-center .hero-social-row, .hero-center .eyebrow-hand{ animation: none; }
}

/* --- FAQ acordeón --- */
.faq-list{ display:flex; flex-direction:column; gap: var(--space-2); max-width: 760px; margin-inline:auto; }
.faq-item{
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow:hidden;
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.faq-item[data-open="true"]{ box-shadow: var(--shadow-md); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding: var(--space-3); background:none; border:none; text-align:left; cursor:pointer;
  font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--ink);
}
.faq-q .plus{
  flex:none; width:28px; height:28px; border-radius:50%;
  background: var(--green-100); color: var(--purple-500);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.faq-q .plus svg{ width:16px; height:16px; }
.faq-item[data-open="true"] .faq-q .plus{ transform: rotate(135deg); background: var(--purple-500); color: var(--surface); }
.faq-a{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-in-out); }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding: 0 var(--space-3) var(--space-3); color: var(--ink-soft); margin:0; }
.faq-item[data-open="true"] .faq-a{ grid-template-rows: 1fr; }

/* --- Banner de cookies --- */
.cookie-banner{
  position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  z-index: var(--z-toast);
  max-width: 640px; margin-inline:auto;
  background: var(--purple-800); color: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-3);
  display:flex; flex-direction:column; gap: var(--space-2);
  transform: translateY(140%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size:.88rem; margin:0; color: color-mix(in srgb, var(--surface) 88%, transparent); }
.cookie-banner a{ color: var(--green-500); font-weight:600; }
.cookie-actions{ display:flex; gap:.6em; flex-wrap:wrap; }
@media (prefers-reduced-motion: reduce){ .cookie-banner{ transition:none; } }

/* --- Mapa con puerta de consentimiento --- */
.map-consent{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--space-2);
  text-align:center; padding: var(--space-4);
  background: var(--green-100);
}
.map-consent svg{ width:40px; height:40px; color: var(--purple-500); }
.map-consent p{ max-width:32ch; font-size:.9rem; color: var(--ink-soft); }

/* --- Páginas legales --- */
.legal-content{ max-width: none; }
.legal-content h2{ font-size:1.4rem; margin-top: var(--space-5); }
.legal-content h3{ font-size:1.1rem; margin-top: var(--space-3); }
.legal-content p, .legal-content li{ color: var(--ink-soft); font-size:.98rem; max-width: none; }
.legal-content ul{ padding-left:1.3em; list-style:disc; margin-bottom: var(--space-2); }
.legal-content ul li{ margin-bottom:.4em; }
.table-wrap{ overflow-x:auto; margin-block: var(--space-3); -webkit-overflow-scrolling:touch; }
.legal-content table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.88rem; }
.legal-content th, .legal-content td{ text-align:left; padding:.7em .8em; border-bottom:1px solid var(--line); }
.legal-content th{ font-family: var(--font-display); color: var(--purple-500); }
.legal-toc{ background: var(--surface-2); border-radius: var(--r-md); padding: var(--space-3); margin-bottom: var(--space-4); }
.legal-toc h2{ font-size:1rem; margin-top:0; text-transform:uppercase; letter-spacing:.04em; }
.legal-toc ol{ padding-left:1.2em; display:flex; flex-direction:column; gap:.35em; font-size:.92rem; }
.legal-toc a:hover{ color: var(--purple-500); }
.legal-placeholder{
  background: var(--purple-100); color: var(--purple-700);
  padding:.1em .4em; border-radius:4px; font-weight:600; font-size:.92em;
}
.legal-updated{ color: var(--ink-mute); font-size:.85rem; margin-bottom: var(--space-4); }

/* --- Página 404 --- */
.error-404{ text-align:center; padding-block: var(--space-6); }
.error-404 .error-code{
  font-family: var(--font-display); font-weight:800; color: var(--green-500);
  font-size: clamp(4rem, 3rem + 6vw, 8rem); line-height:1; margin:0;
  -webkit-text-stroke: 2px var(--purple-500);
}
.error-404 h1{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-top: var(--space-2); }
.error-404 p.lead{ margin-inline:auto; }
.error-404 .error-actions{ display:flex; gap: var(--space-2); justify-content:center; flex-wrap:wrap; margin-top: var(--space-4); }

/* --- Crédito de agencia en footer --- */
.footer-credit{ display:flex; align-items:center; gap:.4em; }
.footer-credit a{ font-weight:700; color: var(--green-500); }
.footer-credit a:hover{ text-decoration: underline; }
.footer-legal-links{ display:flex; gap: var(--space-2); flex-wrap:wrap; font-size:.72rem; }
.footer-legal-links a:hover{ color: var(--green-500); }

/* =========================================================
   REFINAMIENTO — barra de progreso, reveals con clip-path,
   paralaje suave, CTA fija de pedido
   ========================================================= */

/* --- Barra de progreso de scroll --- */
.scroll-progress{
  position: fixed; top:0; left:0; right:0; height:3px; z-index: 400;
  background: transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--green-500), var(--purple-500));
}
@media (prefers-reduced-motion: reduce){ .scroll-progress{ display:none; } }

/* --- Paralaje suave (aplicado vía JS a [data-parallax]) --- */
[data-parallax]{ will-change: transform; }

/* --- CTA fija de pedido (solo móvil/tablet) --- */
body.has-sticky-cta{ padding-bottom: 0; }
@media (max-width: 899px){
  body.has-sticky-cta{ padding-bottom: 84px; }
}
.sticky-cta .btn-outline{ padding-inline: 1em; }
.sticky-cta svg{ width:20px; height:20px; }

/* --- Reveal general también dispara sobre secciones al hacer scroll (ya cubierto por .reveal); aquí ampliamos a más selectores --- */
.js .reveal-fade{ opacity:0; transition: opacity 700ms var(--ease-out); }
.js .reveal-fade.is-visible{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .js .reveal-fade{ opacity:1; transition:none; } }

/* =========================================================
   SECCIONES DE INICIO — rediseño completo
   ========================================================= */

/* --- 1. Sobre Umami (banda morada) --- */
.about-band{ text-align:center; }
.about-band .eyebrow-hand{ color: var(--green-500); }
.about-band h2{ font-size: clamp(1.9rem, 1.5rem + 2vw, 3.1rem); max-width: 20ch; margin-inline:auto; }
.about-band .about-copy{ max-width: 680px; margin-inline:auto; display:flex; flex-direction:column; gap: var(--space-2); }
.about-band .about-copy p{ max-width:none; color: color-mix(in srgb, var(--surface) 88%, transparent); }
.about-band .btn{ margin-top: var(--space-4); }

/* --- 2. Encuentra tu poke bowl favorito --- */
.favorites-grid{
  display:grid; gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px; margin-inline:auto;
  margin-top: var(--space-6);
}
@media (max-width: 700px){ .favorites-grid{ grid-template-columns:1fr; max-width:320px; gap: var(--space-6); } }
.favorite-item{ text-align:center; }
.favorite-photo{ aspect-ratio:1/1; }
.favorite-photo img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 14px 16px rgba(33,26,40,.22)); }
.favorite-item h3{ margin-top: var(--space-4); font-size:1.3rem; }
.favorite-item p{ margin-top:.5em; font-size:.92rem; color: var(--ink-soft); max-width:26ch; margin-inline:auto; }

/* --- 3. 4 características + imagen central --- */
.features-grid{
  display:grid;
  grid-template-columns: 1fr minmax(340px,500px) 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-6) var(--space-6);
  align-items:center;
  max-width: 1220px; margin-inline:auto;
}
.features-center{
  grid-column:2; grid-row: 1/3;
  aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  justify-self:center;
}
.features-center img{ width:100%; height:100%; object-fit:cover; transform: scale(1.16); }
.feature-block{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap: .1em; max-width:26ch; }
.feature-tl{ grid-column:1; grid-row:1; justify-self:end; }
.feature-tr{ grid-column:3; grid-row:1; justify-self:end; align-items:flex-end; text-align:right; }
.feature-bl{ grid-column:1; grid-row:2; justify-self:end; }
.feature-br{ grid-column:3; grid-row:2; justify-self:end; align-items:flex-end; text-align:right; }
.feature-block .icon{
  flex:none; width:58px; height:58px; border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--purple-500), var(--purple-700));
  color: var(--green-300);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-2);
  animation: icon-bob 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
}
.feature-block .icon svg{ width:28px; height:28px; }
.feature-block h4{ font-size:1.4rem; margin-bottom:.3em; color: var(--purple-800); }
.feature-block p{ font-size:.94rem; color: var(--ink-soft); max-width:26ch; }
@keyframes icon-bob{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-7px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){ .feature-block .icon{ animation:none; } }
@media (max-width: 820px){
  .features-grid{ grid-template-columns:1fr; grid-template-rows:none; max-width:420px; gap: var(--space-5); }
  .features-center{ grid-column:1; grid-row:auto; width:min(300px, 100%); margin-inline:auto; order:-1; }
  .feature-tl,.feature-tr,.feature-bl,.feature-br{ grid-column:1; grid-row:auto; justify-self:stretch; align-items:center; text-align:center; max-width:none; }
  .feature-block .icon{ margin-inline:auto; }
  .feature-block p{ margin-inline:auto; }
}

/* --- 4. Síguenos en Instagram --- */
.insta-follow{
  display:flex; align-items:center; justify-content:center; gap: var(--space-2);
  flex-wrap:wrap; text-decoration:none;
}
.insta-follow-icon{
  display:inline-flex; flex:none; color: var(--purple-500);
  animation: icon-bob 3.2s ease-in-out infinite;
}
.insta-follow-icon svg{ width:40px; height:40px; }
.insta-follow-text{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  color: var(--ink);
}
.insta-follow-handle{
  color: var(--purple-500); transition: color var(--dur-fast) var(--ease-out);
}
.insta-follow:hover .insta-follow-handle{ color: var(--green-700); }
@media (prefers-reduced-motion: reduce){ .insta-follow-icon{ animation:none; } }

/* --- 5. Galería a sangre completa (carrusel automático) --- */
.insta-gallery{
  width:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap: 3px;
}
.insta-marquee-row{ overflow:hidden; }
.insta-marquee-track{
  display:flex;
  gap: 3px;
  width:max-content;
  animation: insta-scroll 72s linear infinite;
  will-change: transform;
}
.insta-marquee-row.reverse .insta-marquee-track{ animation-direction: reverse; animation-duration: 84s; }
@keyframes insta-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-33.3333%); }
}
.insta-item{
  display:block; position:relative; flex:none; overflow:hidden;
  height: clamp(260px, 32vw, 440px);
  aspect-ratio: 3/4;
}
.insta-item img{ width:100%; height:100%; object-fit:cover; }
.insta-item::after{
  content:""; position:absolute; inset:0; background: rgba(38,16,47,0); transition: background var(--dur-med) var(--ease-out);
}
.insta-play{
  position:absolute; top: var(--space-2); right: var(--space-2);
  width:30px; height:30px; border-radius:50%;
  background: rgba(20,10,26,.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.insta-play svg{ width:14px; height:14px; margin-left:2px; }
@media (hover:hover) and (pointer:fine){
  .insta-item:hover img{ transform: scale(1.06); }
  .insta-item:hover::after{ background: rgba(38,16,47,.14); }
}
@media (prefers-reduced-motion: reduce){
  /* Este carrusel es puramente decorativo y de movimiento muy lento y continuo:
     lo mantenemos activo incluso con "reducir movimiento" para que el efecto
     solicitado sea siempre visible, anulando el reset global de duración. */
  .insta-marquee-track{ animation-duration: 48s !important; }
  .insta-marquee-row.reverse .insta-marquee-track{ animation-duration: 58s !important; }
}
@media (max-width: 640px){
  .insta-item{ height: clamp(180px, 52vw, 260px); }
}

/* --- 6. Opiniones (carrusel, estilo bocadillo de Google) --- */
.reviews-wrap{ max-width: 1080px; margin-inline:auto; position:relative; }
.reviews-track-outer{ overflow:hidden; }
.reviews-track{
  display:flex; align-items:flex-start;
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.review-card{
  flex: 0 0 100%;
  padding: 0 var(--space-2);
  box-sizing:border-box;
}
@media (min-width: 760px){ .review-card{ flex-basis: 33.333%; } }
.review-card-inner{
  display:flex; flex-direction:column; height:100%;
}
.review-bubble{
  position:relative;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  height: 240px;
  display:flex; flex-direction:column; gap: var(--space-2);
}
.review-bubble::after{
  content:""; position:absolute; left: var(--space-4); bottom:-9px;
  width:18px; height:18px; background: var(--surface);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-radius: 0 0 0 4px;
}
.review-stars{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); }
.review-stars-left{ display:flex; align-items:center; gap:.65em; }
.review-stars .stars-icons{ display:flex; align-items:center; gap:.2em; }
.review-stars .stars-icons svg{ width:16px; height:16px; color:#fbbc04; }
.review-verified{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:17px; height:17px; border-radius:50%;
  background:#1a73e8; color:#fff;
  box-shadow: 0 0 0 2px var(--surface);
}
.review-verified svg{ width:10px; height:10px; }
.review-google-badge{ flex:none; }
.review-google-badge svg{ width:20px; height:20px; }
.review-text{
  font-size:.92rem; line-height:1.45; color: var(--ink); flex:1;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
}
.review-card-inner{ cursor:pointer; }
.review-read-more{
  font-size:.78rem; font-weight:700; color: var(--purple-500);
  margin-top:.3em; align-self:flex-start;
}
@media (hover:hover) and (pointer:fine){
  .review-card-inner:hover .review-bubble{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
.review-bubble{ transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.review-author{ display:flex; align-items:center; gap:.6em; margin-top: var(--space-4); padding-inline: var(--space-1); }
.review-avatar{
  width:40px; height:40px; border-radius:50%; flex:none; object-fit:cover;
  background: var(--purple-500); color: var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:.9rem;
}
.review-author strong{ display:block; font-size:.9rem; }
.review-author span{ display:block; font-size:.78rem; color: var(--ink-mute); }
.reviews-nav{
  display:flex; align-items:center; justify-content:center; gap: var(--space-3);
  margin-top: var(--space-4);
}
.reviews-nav button{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
  background: var(--surface); color: var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.reviews-nav button:hover{ border-color: var(--purple-500); color: var(--purple-500); }
.reviews-nav button:active{ transform: scale(.94); }
.reviews-nav button svg{ width:20px; height:20px; }
.reviews-nav .dots{ display:flex; gap:.4em; }
.reviews-nav .dot{ width:8px; height:8px; border-radius:50%; background: var(--line); transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out); }
.reviews-nav .dot.is-active{ background: var(--purple-500); width:20px; border-radius:4px; }
.reviews-counter{ font-size:.85rem; font-weight:700; color: var(--ink-mute); font-variant-numeric: tabular-nums; min-width:4.5em; text-align:center; }
.reviews-more{ text-align:center; margin-top: var(--space-3); }

/* --- Modal: reseña completa --- */
.review-modal-overlay{
  position:fixed; inset:0; z-index:200;
  background: rgba(20,10,26,.55);
  display:flex; align-items:center; justify-content:center;
  padding: var(--space-3);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.review-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.review-modal{
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  max-width: 520px; width:100%; max-height:80vh; overflow-y:auto;
  padding: var(--space-5);
  transform: translateY(16px) scale(.97); transition: transform var(--dur-med) var(--ease-out);
}
.review-modal-overlay.is-open .review-modal{ transform:none; }
.review-modal-close{
  position:absolute; top: var(--space-3); right: var(--space-3);
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background: var(--surface-2); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.review-modal-close svg{ width:18px; height:18px; }
.review-modal .review-stars{ margin-bottom: var(--space-3); }
.review-modal .review-text{
  font-size:1.02rem; line-height:1.6; -webkit-line-clamp:unset; overflow:visible;
}
.review-modal .review-author{ margin-top: var(--space-4); padding-inline:0; }
.review-modal .review-avatar{ width:48px; height:48px; font-size:1.05rem; }
@media (prefers-reduced-motion: reduce){
  .review-modal-overlay, .review-modal{ transition:none; }
}
.reviews-more a{ font-weight:600; color: var(--purple-500); }
.reviews-more a:hover{ text-decoration:underline; }

/* =========================================================
   PÁGINA "SOBRE NOSOTROS" — secciones ampliadas
   ========================================================= */

/* --- Diferenciales: imagen recortada + lista de checks --- */
.check-list{ display:flex; flex-direction:column; gap: var(--space-2); margin-block: var(--space-3) var(--space-4); }
.check-list li{ display:flex; align-items:flex-start; gap:.7em; font-weight:600; font-size:1rem; color: var(--ink); }
.check-list svg{ width:23px; height:23px; flex:none; color: var(--green-600); margin-top:.1em; }

.diff-art{ display:flex; align-items:center; justify-content:center; }
.diff-art img{
  width:min(100%,440px); height:auto; margin-inline:auto;
  filter: drop-shadow(0 20px 26px rgba(33,26,40,.22));
}

/* --- Banda morada: puntos fuertes numerados --- */
.process-grid{ display:grid; gap: var(--space-4) var(--space-5); grid-template-columns: repeat(2,1fr); margin-top: var(--space-5); max-width:900px; margin-inline:auto; }
@media (max-width:700px){ .process-grid{ grid-template-columns:1fr; } }
.process-item{ display:flex; gap: var(--space-3); }
.process-num{
  font-family: var(--font-display); font-weight:800; font-size:2.2rem; line-height:1;
  color: var(--green-500); flex:none; opacity:.85; min-width:1.4em;
}
.process-item h4{ color: var(--surface); font-size:1.12rem; margin-bottom:.3em; }
.process-item p{ color: color-mix(in srgb, var(--surface) 80%, transparent); font-size:.94rem; max-width:32ch; margin:0; }

/* --- Beneficios: variante "corazón" del patrón features-grid (ver .features-grid base) --- */
.features-grid.benefits-heart .features-center{
  border-radius:0;
  overflow:visible;
  aspect-ratio: 1920/2224;
}
.features-grid.benefits-heart .features-center img{
  transform:none; object-fit:contain;
  filter: drop-shadow(0 18px 28px rgba(38,16,47,.28));
}
.features-grid.benefits-heart .feature-block{ position:relative; }
.point-arrow{ position:absolute; width:72px; height:auto; color: var(--purple-500); opacity:.75; overflow:visible; }
.point-arrow .flow-line{ fill:none; stroke-linecap:round; stroke-dasharray: 2 9; animation: arrow-flow 1.1s linear infinite; }
.point-arrow .flow-head{ fill:none; stroke-linecap:round; stroke-linejoin:round; transform-origin: 85% 58%; animation: arrow-pulse 1.1s ease-in-out infinite; }
@keyframes arrow-flow{ to{ stroke-dashoffset: -33; } }
@keyframes arrow-pulse{ 0%,100%{ transform:scale(1); opacity:.8; } 50%{ transform:scale(1.25); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .point-arrow .flow-line, .point-arrow .flow-head{ animation:none; } }
.features-grid.benefits-heart .feature-tl .point-arrow{ right:-58px; bottom:2px; }
.features-grid.benefits-heart .feature-tr .point-arrow{ left:-58px; bottom:2px; transform: scaleX(-1); }
.features-grid.benefits-heart .feature-bl .point-arrow{ right:-58px; top:2px; transform: scaleY(-1); }
.features-grid.benefits-heart .feature-br .point-arrow{ left:-58px; top:2px; transform: scale(-1,-1); }
@media (max-width:1080px){ .point-arrow{ width:52px; } .features-grid.benefits-heart .feature-tl .point-arrow, .features-grid.benefits-heart .feature-tr .point-arrow{ bottom:-10px; } .features-grid.benefits-heart .feature-bl .point-arrow, .features-grid.benefits-heart .feature-br .point-arrow{ top:-10px; } }
@media (max-width:820px){ .point-arrow{ display:none; } }

/* --- "Pide en 3 pasos" --- */
.order-steps{ display:flex; align-items:flex-start; justify-content:center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap:wrap; }
.order-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:220px; }
.order-step .icon{
  width:68px; height:68px; border-radius:50%; flex:none;
  background: linear-gradient(155deg, var(--purple-500), var(--purple-700));
  color: var(--green-300);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
  animation: icon-bob 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i,0) * -0.9s);
}
.order-step .icon svg{ width:28px; height:28px; }
.order-step h4{ font-size:1.05rem; margin-bottom:.3em; }
.order-step p{ font-size:.88rem; margin:0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce){ .order-step .icon{ animation:none; } }

.order-step-arrow{ flex:none; align-self:center; color: var(--green-600); margin-top:34px; }
.order-step-arrow svg{ width:30px; height:30px; overflow:visible; }
.order-step-arrow .shaft{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:2 5; animation: order-arrow-dash .9s linear infinite; }
.order-step-arrow .head{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transform-origin:75% 50%; animation: order-arrow-pulse .9s ease-in-out infinite; }
@keyframes order-arrow-dash{ to{ stroke-dashoffset:-14; } }
@keyframes order-arrow-pulse{ 0%,100%{ transform:scale(1); opacity:.75; } 50%{ transform:scale(1.3); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .order-step-arrow .shaft, .order-step-arrow .head{ animation:none; } }
@media (max-width:760px){ .order-step-arrow{ display:none; } }

/* --- Formulario de contacto: estado, antispam e información legal --- */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin:var(--space-2) 0 0; padding:.7em 1em; border-radius:var(--r-md); font-size:.92rem; font-weight:600; max-width:none; }
.form-status.is-ok{ background: var(--green-100); color: var(--green-900); }
.form-status.is-info{ background: var(--purple-50); color: var(--purple-500); }
.form-status.is-error{ background:#fdeaea; color:#8a1f1f; }
.form-legal, .form-alt{ font-size:.78rem; line-height:1.5; color: var(--ink-mute); margin-top: var(--space-2); max-width:none; }
.form-alt{ font-size:.85rem; color: var(--ink-soft); }
.form-legal a, .form-alt a{ color: var(--purple-500); font-weight:600; }

.contact-form[hidden]{ display:none; }
.form-success{
  text-align:center; padding: var(--space-5) var(--space-4);
  background: var(--green-100); border-radius: var(--r-lg);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  animation: opt-in 380ms var(--ease-out) both;
}
.form-success[hidden]{ display:none; }
.form-success-ico{ width:68px; height:68px; border-radius:50%; background: var(--green-500); color: var(--purple-500); display:grid; place-items:center; margin-bottom:.4rem; }
.form-success-ico svg{ width:34px; height:34px; }
.form-success h3{ font-size:1.6rem; color: var(--purple-500); margin:0; }
.form-success p{ color: var(--purple-600); margin:0 0 var(--space-2); max-width:34ch; }

/* --- Plato no disponible de momento (se mantiene en carta, atenuado y sin precio) --- */
.dish--off{ --head-bg: var(--ink-mute); --foot-bg: var(--surface-2); --foot-ink: var(--ink-soft); }
.dish--off .desc{ opacity:.6; }
.dish--off h3{ opacity:.85; }
@media (hover:hover){ .dish--off:hover{ transform:none; box-shadow: 0 1px 2px rgba(33,26,40,.06), 0 10px 28px -14px rgba(38,16,47,.28); } }
.dish-off-tag{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.35em 0; }