/* Paellas by Carlitin — tokens */
:root {
  --saffron: #F2B300;      /* arroz con azafrán / amarillo del logo */
  --saffron-pale: #FFF3C4;
  --pimenton: #C62A1E;     /* rojo del logo */
  --ember: #FF7A1A;        /* brillo del fuego, solo en el hero */
  --iron: #24262B;         /* acero de la paellera */
  --iron-2: #2F3238;
  --iron-soft: #4A4D55;
  --mist: #C9CBD1;
  --white: #FFFFFF;
  --sea: #0F6B73;          /* foco */

  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Work Sans", system-ui, sans-serif;
  --f-script: "Kaushan Script", cursive;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--iron);
  background: var(--white);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: .95; margin: 0 0 .4em; }
h1 { font-size: clamp(3.4rem, 8.5vw, 7.4rem); font-weight: 900; }
h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h3 { font-size: 1.7rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 60ch; }
section[id] { scroll-margin-top: 76px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section-lead { font-size: 1.15rem; color: var(--iron-soft); margin-bottom: 2.2em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem/1 var(--f-body);
  padding: 1em 1.5em; border-radius: 999px;
  background: var(--pimenton); color: var(--white);
  text-decoration: none; border: 2px solid var(--pimenton);
  cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), background .15s;
}
.btn:hover { background: #a82217; border-color: #a82217; }
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; color: var(--iron); border-color: var(--iron); }
.btn-ghost:hover { background: var(--iron); color: var(--white); border-color: var(--iron); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: var(--white); color: var(--iron); border-color: var(--white); }
.btn-dark { background: var(--iron); border-color: var(--iron); }
.btn-dark:hover { background: #000; border-color: #000; }
.btn-small { padding: .7em 1.1em; font-size: .95rem; }
.round-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--iron);
  background: var(--white); font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--iron);
}
.round-btn:hover { background: var(--iron); color: var(--white); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid #eee; transition: background .25s, border-color .25s, color .25s; }
.home .site-header { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; color: var(--white); }
.home .site-header.is-solid { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-color: #eee; color: var(--iron); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { position: relative; display: inline-flex; align-items: center; text-decoration: none; padding: 6px 14px; }
.brand-stroke {
  position: absolute; inset: 8px -8px 4px -4px; background: var(--pimenton);
  border-radius: 40% 12% 46% 10% / 60% 30% 70% 40%; transform: skew(-8deg) rotate(-2deg);
}
.brand-name { position: relative; font-family: var(--f-script); font-size: 1.65rem; color: var(--saffron); text-shadow: 2px 2px 0 var(--iron); white-space: nowrap; }
.brand-name.small { font-size: 1.4rem; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav > a:not(.btn) { text-decoration: none; font-weight: 500; }
.nav > a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
/* Sección en la que estás: el link del menú queda marcado */
.nav > a:not(.btn) { position: relative; transition: color .2s; }
.nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px;
  background: var(--saffron); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav > a.is-active { font-weight: 700; }
.nav > a.is-active::after { transform: scaleX(1); }
.nav > a.is-active:hover { text-decoration: none; }
.home .site-header.is-solid .nav > a.is-active::after { background: var(--pimenton); }
.lang { font: 600 .9rem var(--f-body); background: none; border: 2px solid currentColor; border-radius: 999px; padding: .35em .8em; cursor: pointer; color: inherit; }

/* Pan (paellera): foto redonda con borde de acero y asas */
.pan { position: relative; display: block; border-radius: 50%; isolation: isolate; }  /* isolate: las asas van detrás de la paellera */
.pan img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 10px solid var(--iron);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--iron);
}
.pan::before, .pan::after {
  z-index: -1;
  content: ""; position: absolute; top: 50%; width: 30px; height: 18px;
  transform: translateY(-50%); border: 6px solid var(--iron); border-radius: 50%;
}
.pan::before { left: -22px; }
.pan::after { right: -22px; }

/* HERO */
.hero {
  position: relative; overflow: hidden; overflow: clip; color: var(--white);   /* clip: permite el sticky de la paellera */
  background:
    radial-gradient(60% 70% at 78% 55%, rgba(255,122,26,.35), transparent 60%),
    radial-gradient(40% 50% at 80% 60%, rgba(242,179,0,.25), transparent 70%),
    var(--iron);
  padding-top: 76px;
  /* Primera pantalla completa: texto, botones y franja amarilla visibles al cargar */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; flex: 1; width: 100%; padding-top: clamp(12px, 3vh, 32px); padding-bottom: clamp(12px, 3vh, 40px); }
.hero .ticker { flex: none; }
/* El H1 SEO es el kicker ("Catering de paella en vivo en Miami…"); el titular grande es un <p> con estilo de display */
.hero-kicker { font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.5; letter-spacing: 0; display: block; }
.hero-title { font-family: var(--f-display); font-weight: 900; line-height: .95; }
.hero-kicker { color: var(--saffron); font-weight: 600; margin-bottom: min(1.2em, 2.2vh); }
.hero-title { margin-bottom: .3em; font-size: clamp(2.6rem, min(5.4vw, 8.2vh), 6.4rem); font-size: clamp(2.6rem, min(5.4vw, 8.2svh), 6.4rem); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line > span { display: inline-block; }
.hero-title .line:nth-child(2) { color: var(--saffron); }
.hero .lead { font-size: 1.2rem; max-width: 44ch; color: #E6E7EA; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: min(1.8em, 3.5vh); }

/* La paellera queda centrada en la parte visible de la pantalla (debajo del header de 76px) y siempre entera:
   su tamaño también se limita por el alto disponible. Si el texto de la izquierda es más alto que la pantalla,
   la paellera se queda fija (sticky) en el centro mientras se baja. */
.hero-pan { position: relative; display: grid; place-items: center; }
.pan-xl { width: min(100%, 560px, calc(100vh - 76px - 64px - 90px)); width: min(100%, 560px, calc(100svh - 76px - 64px - 90px)); }
.pan-xl img { border-width: 16px; box-shadow: 0 0 0 4px #3a3d44, 0 30px 80px rgba(0,0,0,.55), 0 0 120px rgba(255,122,26,.35); }
.pan-xl::before, .pan-xl::after { width: 64px; height: 36px; border-width: 12px; border-color: #3a3d44; }
.pan-xl::before { left: -50px; }
.pan-xl::after { right: -50px; }
.pan-xl img { animation: spin 90s linear infinite; }
.steam { position: absolute; inset: -20% -10% 30% -10%; width: 120%; height: 90%; pointer-events: none; z-index: 2; }

/* Secuencia de entrada (único momento animado al cargar) */
.js .hero-title .line > span { transform: translateY(105%); }
.js .hero-kicker, .js .hero .lead, .js .hero .cta-row { opacity: 0; transform: translateY(14px); }
.js .hero-pan { opacity: 0; transform: scale(.9) rotate(-20deg); }
.is-loaded .hero-title .line > span { transform: none; transition: transform .9s var(--ease); }
.is-loaded .hero-title .line:nth-child(2) > span { transition-delay: .1s; }
.is-loaded .hero-title .line:nth-child(3) > span { transition-delay: .2s; }
.is-loaded .hero-kicker, .is-loaded .hero .lead, .is-loaded .hero .cta-row { opacity: 1; transform: none; transition: opacity .7s .35s, transform .7s .35s var(--ease); }
.is-loaded .hero-pan { opacity: 1; transform: none; transition: opacity 1.2s .1s, transform 1.6s .1s var(--ease); }

@keyframes spin { to { transform: rotate(360deg); } }

/* Ticker */
.ticker { background: var(--saffron); color: var(--iron); overflow: hidden; border-top: 3px solid var(--iron); }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker-track span { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; padding: .45em 0; display: inline-flex; align-items: center; }
.ticker-track span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--iron); margin: 0 1.1em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Paellas */
.paellas { overflow-x: clip; padding: clamp(56px, 8vw, 104px) 0; }
.pans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 48px); }
.pans li { text-align: center; }
.pans .pan { margin-bottom: 18px; }
.pans .pan img { transition: transform .8s var(--ease); }
.pans li:hover .pan img { transform: rotate(25deg); }
.pans li p { margin-inline: auto; color: var(--iron-soft); font-size: 1rem; }

/* Planner */
.planner { background: var(--saffron); padding: clamp(56px, 8vw, 104px) 0; overflow-x: clip; }
.planner .section-lead { color: var(--iron); }
.planner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.guests-label { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.guests-label output { font-family: var(--f-display); font-weight: 900; font-size: 4rem; line-height: 1; }
.range { width: 100%; margin: 8px 0 28px; accent-color: var(--iron); height: 28px; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: var(--iron); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 6px solid var(--iron); margin-top: -11px; cursor: grab; }
.range { -webkit-appearance: none; appearance: none; background: transparent; }
.range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--iron); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 6px solid var(--iron); }

fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend, .step-label { font-weight: 600; margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: .55em 1em; border-radius: 999px; border: 2px solid var(--iron); font-weight: 500; font-size: .95rem; background: transparent; transition: background .15s, color .15s; }
.chip input:checked + span { background: var(--iron); color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--sea); outline-offset: 2px; }
.chip-custom span { border-style: dashed; }
.chip-custom span::before { content: "✎ "; }
/* Paella a tu gusto */
.custom-panel { margin: 14px 0 22px; padding: 16px 18px; border: 2px dashed var(--iron); border-radius: 16px; background: rgba(255,255,255,.35); animation: pop .35s var(--ease); }
.custom-panel[hidden] { display: none; }
.custom-title { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; margin: 0 0 6px; }
.custom-note { display: grid; gap: 6px; }
.custom-note small { font-size: .92rem; color: var(--iron-soft); }
.custom-note textarea { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--iron); background: var(--white); resize: vertical; }

.planner-result { background: var(--white); border-radius: 28px; padding: clamp(20px, 3vw, 36px); box-shadow: 8px 8px 0 var(--iron); border: 3px solid var(--iron); }
.pan-stage { min-height: 240px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 18px 26px; padding: 10px 24px 18px; }
.pan-stage figure { margin: 0; max-width: 150px; text-align: center; animation: pop .45s var(--ease); }
.pan-stage svg { display: block; margin: 0 auto 6px; overflow: visible; }
.pan-stage figcaption { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.pan-stage figcaption small { display: block; font-family: var(--f-body); font-weight: 500; font-size: .8rem; color: var(--iron-soft); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.result-main { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1.05; margin-bottom: .3em; }
.result-sub { color: var(--iron-soft); }
.result-note { font-size: .85rem; color: var(--iron-soft); margin: 14px 0 0; }

/* Live */
.live { background: var(--iron); color: var(--white); }
.live-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 6vw, 80px); align-items: center; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.live img { border-radius: 24px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.live h2 { color: var(--saffron); }
.live p { font-size: 1.2rem; color: #E6E7EA; }
.facts { list-style: none; padding: 0; margin: 2em 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid #44474e; padding-top: 22px; }
.facts strong { display: block; font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--white); }
.facts span { color: var(--mist); font-size: .95rem; }

/* More */
.more { padding: clamp(56px, 8vw, 104px) 0; }
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.more figure { margin: 0; }
.more .img-wrap { overflow: hidden; border-radius: 16px; }
.more img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 16px; }
.more figcaption { padding-top: 12px; display: grid; gap: 2px; }
.more figcaption strong { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; line-height: 1.05; }
.more figcaption span { color: var(--iron-soft); font-size: .98rem; }

/* How it works (secuencia real → numerado) */
.how { background: var(--saffron-pale); padding: clamp(56px, 8vw, 104px) 0; }
.steps { list-style: none; margin: 2em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 4px solid var(--iron); padding-top: 18px; }
.steps li::before { content: counter(s); font-family: var(--f-display); font-weight: 900; font-size: 3.4rem; line-height: 1; color: var(--pimenton); display: block; margin-bottom: 8px; }

/* Gallery */
.gallery { padding: clamp(56px, 8vw, 104px) 0 0; }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.gallery-head h2 { margin: 0; }
.gallery-nav { display: flex; gap: 10px; }
/* Tira a todo el ancho de la pantalla (borde a borde, con el margen lateral normal), sin barra de scroll visible:
   se mueve con las flechas, arrastrando en el celular o con el trackpad. */
.gallery-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { height: clamp(260px, 38vw, 460px); width: auto; flex: none; border-radius: 16px; scroll-snap-align: start; object-fit: cover; }

/* Redes sociales */
.social { background: var(--iron); color: var(--white); padding: clamp(56px, 8vw, 96px) 0; margin-top: clamp(56px, 8vw, 104px); }
.social-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.social h2 { margin-bottom: .2em; }
.social .section-lead { color: #E6E7EA; margin: 0; }
.social-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.social-list a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 20px; border-radius: 16px; border: 2px solid #3a3d44;
  color: var(--white); text-decoration: none; transition: border-color .2s, transform .2s var(--ease), background .2s; }
.social-list a:hover, .social-list a:focus-visible { border-color: var(--saffron); background: var(--iron-2); transform: translateY(-3px); }
.social-list svg { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--saffron); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-list strong { display: block; font-family: var(--f-display); font-size: 1.5rem; line-height: 1; }
.social-list small { display: block; color: var(--mist); font-size: .92rem; margin-top: 4px; }
.social-list a.sin-link { cursor: default; }
.social-list a.sin-link:hover { border-color: #3a3d44; background: none; transform: none; }
.social + .area { padding-top: clamp(48px, 7vw, 88px); }
@media (max-width: 760px) { .social-row { grid-template-columns: 1fr; } }

/* Area + final CTA */
.area { padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.area p { font-size: 1.15rem; }
.final-cta { background: var(--saffron); padding: clamp(40px, 6vw, 72px) 0; margin-top: clamp(24px, 4vw, 48px); }
.final-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.final-row h2 { margin: 0; }

/* Footer */
.site-footer { background: var(--iron); color: #d9d9dc; padding: 40px 0; font-size: .95rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.footer-row p { margin: 0; }
.site-footer a { color: var(--white); }
.footer-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-langs button { font: 500 .88rem var(--f-body); color: #d9d9dc; background: none; border: 1.5px solid #4A4D55; border-radius: 999px;
  padding: .3em .8em; cursor: pointer; transition: border-color .2s, color .2s; }
.footer-langs button:hover { border-color: var(--saffron); color: var(--white); }
.footer-langs button[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: var(--iron); font-weight: 700; }

/* Mobile action bar */
.mobile-bar { display: none; }

/* Contact page */
.contact { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); overflow-x: clip; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact h1 { font-size: clamp(3rem, 7vw, 5rem); }
.contact .lead { font-size: 1.15rem; }
.contact-direct { list-style: none; padding: 0; margin: 1.4em 0 2.4em; display: grid; gap: 8px; font-weight: 500; }
.contact-direct a { font-weight: 600; }
.pan-md { width: min(78%, 340px); margin-left: 24px; }
.pan-md img { animation: spin 90s linear infinite; }

.quote-form { background: var(--white); border: 3px solid var(--iron); box-shadow: 8px 8px 0 var(--iron); border-radius: 28px; padding: clamp(20px, 4vw, 40px); }
.progress { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: p; }
.progress li { counter-increment: p; font-weight: 600; font-size: .95rem; color: var(--iron-soft); padding-top: 12px; border-top: 6px solid #E8E2CC; transition: border-color .3s, color .3s; }
.progress li::before { content: counter(p) ". "; }
.progress li.is-active, .progress li.is-done { color: var(--iron); border-color: var(--saffron); }
.progress li.is-done { border-color: var(--iron); }
.step { display: none; gap: 18px; }
.step.is-active { display: grid; animation: stepIn .35s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { font-weight: 600; font-size: .95rem; }
input:not([type=range]):not([type=checkbox]), select, textarea {
  font: 400 1rem var(--f-body); color: var(--iron); width: 100%; padding: .8em .9em;
  border: 2px solid #D8D2BC; border-radius: 12px; background: var(--white);
}
input:focus, select:focus, textarea:focus { border-color: var(--iron); outline: none; box-shadow: 0 0 0 3px rgba(15,107,115,.35); }
[aria-invalid="true"] { border-color: var(--pimenton) !important; }
.step-actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 26px; }
.step-actions [data-next], .step-actions [data-submit] { margin-left: auto; }
.summary { background: var(--saffron-pale); border-radius: 16px; padding: 16px 18px; font-size: .95rem; }
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.summary dt { font-weight: 600; }
.summary dd { margin: 0; }
.form-status { margin: 14px 0 0; font-weight: 500; }
.form-status.is-error { color: var(--pimenton); }

/* Responsive */
@media (max-width: 960px) {
  .pans, .more-grid { grid-template-columns: repeat(2, 1fr); }
  .planner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav > a { display: none; }
  .hero-grid, .live-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { min-height: 0; padding-top: 24px; }
  .hero-pan { order: -1; padding: 4px 40px 0; }
  .pan-xl { width: min(60vw, 260px, 25vh); width: min(60vw, 260px, 25svh); }
  .hero-title { font-size: clamp(1.9rem, min(10vw, 5.1vh), 3.4rem); font-size: clamp(1.9rem, min(10vw, 5.1svh), 3.4rem); }
  .hero .lead { font-size: 1rem; line-height: 1.5; }
  .hero-kicker { font-size: .95rem; }
  .hero .ticker-track span { font-size: 1.3rem; }
  /* Botones del hero lado a lado en todos los idiomas (textos largos en ES/PT/FR/HT parten en 2 líneas dentro del botón) */
  .hero .cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero .cta-row .btn { white-space: normal; text-align: center; line-height: 1.15; padding: .8em .7em; font-size: .95rem; }
  .pan-xl img { border-width: 10px; }
  .pan-xl::before, .pan-xl::after { width: 40px; height: 22px; border-width: 8px; }
  .pan-xl::before { left: -32px; }
  .pan-xl::after { right: -32px; }
  .live img { aspect-ratio: 4 / 3; }
  .steps, .facts { grid-template-columns: 1fr; gap: 20px; }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .facts strong { font-size: 1.9rem; }
  .field-row { grid-template-columns: 1fr; }
  .brand-name { font-size: 1.35rem; }
  .pan-md { display: none; }
  .gallery-nav { display: none; }

  .mobile-bar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30;
    background: var(--iron); border-radius: 999px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  }
  .mobile-bar a { color: var(--white); text-align: center; text-decoration: none; font-weight: 600; padding: .8em .4em; border-radius: 999px; }
  .mobile-bar .mb-quote { background: var(--pimenton); }
  .mobile-bar { transform: translateY(140%); transition: transform .3s var(--ease); }
  .show-bar .mobile-bar, .page-contact .mobile-bar { transform: none; }
  body { padding-bottom: 84px; }
}
@media (max-width: 760px) and (max-height: 720px) {   /* celulares bajos (iPhone SE): el texto largo cede su lugar */
  .hero .lead { display: none; }
  .pan-xl { width: min(52vw, 210px, 23svh); }
  .hero-grid { gap: 14px; }
}
@media (max-width: 420px) {
  .pans { gap: 28px 20px; }
  .pans .pan::before, .pans .pan::after { width: 22px; height: 14px; border-width: 5px; }
  .pans .pan::before { left: -14px; }
  .pans .pan::after { right: -14px; }
  .pans .pan img { border-width: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero-title .line > span, .js .hero-kicker, .js .hero .lead, .js .hero .cta-row, .js .hero-pan { opacity: 1; transform: none; }
}

/* ===== Portada: postal de la Gran Vía (Madrid) + bandera de España ===== */
/* Alto disponible para postal + paellera: la franja amarilla debe verse en la primera pantalla */
.hero-pan { --hp: min(620px, calc(100vh - 210px)); --hp: min(620px, calc(100svh - 210px)); height: var(--hp); min-height: 0; }
.postal { position: absolute; right: 0; top: -2%; z-index: 0; width: min(72%, 400px, calc(var(--hp) * .6)); margin: 0; padding: 12px 12px 44px;
  background: #FBF8F1; border-radius: 6px; transform: rotate(3deg); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.postal img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.postal figcaption { position: absolute; right: 18px; bottom: 9px; font-family: var(--f-script); font-size: 1.35rem; color: var(--iron); }
.sello { position: absolute; top: -14px; right: -14px; width: 78px; height: 92px; padding: 6px; background: #fff; border-radius: 4px;
  outline: 3px dashed #FBF8F1; outline-offset: -2px; box-shadow: 0 6px 16px rgba(0,0,0,.35); transform: rotate(8deg); }
.sello i { display: block; height: 58px; background: linear-gradient(#AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%); }
.sello b { display: block; margin-top: 6px; text-align: center; font: 800 .8rem/1 var(--f-display); letter-spacing: .08em; color: var(--iron); }
.hero-pan .pan-xl { position: relative; z-index: 1; width: min(78%, 400px, calc(var(--hp) * .62)); transform: translate(-34%, 24%); }
.hero-pan .steam { z-index: 2; }
/* Franja rojigualda sobre la cinta de eventos */
/* La cinta amarilla es el centro de la bandera: listón rojo arriba y abajo */
.hero .ticker { border-top: 12px solid #AA151B; border-bottom: 12px solid #AA151B; }
.site-footer .credit { font-size: .78rem; color: var(--mist); }
@media (max-width: 760px) {
  .hero-pan { --hp: 268px; height: 268px; padding: 0; }
  .postal { width: 48%; max-width: 210px; right: 2%; top: 4px; padding: 7px 7px 26px; }
  .postal figcaption { right: 10px; bottom: 4px; font-size: .9rem; }
  .sello { width: 48px; height: 58px; top: -10px; right: -8px; padding: 4px; }
  .sello i { height: 34px; }
  .sello b { margin-top: 4px; font-size: .52rem; }
  .hero-pan .pan-xl { width: min(50vw, 220px); transform: translate(-30%, 14%); }
}

/* ===== De la Gran Vía a Miami ===== */
/* Línea de origen bajo el titular */
.hero-origin { font-family: var(--f-script); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--saffron); margin: -.1em 0 .7em; }
.js .hero-origin { opacity: 0; transform: translateY(14px); }
.is-loaded .hero-origin { opacity: 1; transform: none; transition: opacity .7s .3s, transform .7s .3s var(--ease); }

/* Matasellos sobre la postal */
.matasellos { position: absolute; left: -34px; top: 26px; width: 112px; height: 112px; transform: rotate(-14deg); z-index: 2; color: #AA151B; overflow: visible; }
.matasellos .m-fondo { fill: rgba(251, 248, 241, .82); }
.matasellos .m-linea { fill: none; stroke: currentColor; stroke-width: 2.4; }
.matasellos .m-anillo { font: 800 11.5px var(--f-display); letter-spacing: 1.6px; fill: currentColor; }
.matasellos .m-centro { font: 900 15px var(--f-display); fill: currentColor; text-anchor: middle; letter-spacing: 1px; }
.matasellos .m-chico { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; }

/* Sección */
.origen { background: var(--iron); color: var(--white); padding: clamp(56px, 8vw, 104px) 0; overflow-x: clip; }
.origen h2 { color: var(--saffron); }
.origen .section-lead { color: #E6E7EA; margin-bottom: 1.2em; }
.ruta { max-width: 900px; margin: 0 auto 8px; }
.ruta svg { width: 100%; height: auto; display: block; overflow: visible; }
.ruta-base { fill: none; stroke: #5A5D66; stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.ruta-hecha { fill: none; stroke: var(--saffron); stroke-width: 4; stroke-linecap: round; }
.ruta .punto circle { fill: var(--saffron); }
.ruta .punto .halo { fill: none; stroke: var(--saffron); stroke-width: 2; opacity: .35; }
.ruta .ciudad { font: 800 26px var(--f-display); fill: var(--white); letter-spacing: .02em; }
.ruta .banderin line { stroke: #C9CBD1; stroke-width: 3; stroke-linecap: round; }
.ruta-pasos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: r; }
.ruta-pasos li { counter-increment: r; border-top: 4px solid var(--saffron); padding-top: 16px; }
.ruta-pasos .lugar { display: block; font-weight: 600; color: var(--saffron); margin-bottom: 6px; }
.ruta-pasos .lugar::before { content: counter(r) ". "; }
.ruta-pasos h3 { color: var(--white); }
.ruta-pasos p { color: #D9DADD; margin: 0; }
.origen-cierre { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); padding-top: 28px; border-top: 1px solid #44474e; }
.origen-frase { font-family: var(--f-script); font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--saffron); margin: 0; }

@media (max-width: 760px) {
  .matasellos { width: 64px; height: 64px; left: -20px; top: 14px; }
  .ruta-pasos { grid-template-columns: 1fr; gap: 22px; }
  .ruta .ciudad { font-size: 52px; }
}

/* ===== Videos ===== */
.live .loop-video { border-radius: 24px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; background: #1b1c20; display: block; }
.origen-cierre { display: grid; grid-template-columns: minmax(0, 240px) 1fr; align-items: center; gap: clamp(20px, 4vw, 48px); }
.origen-video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: #1b1c20; box-shadow: 0 0 0 4px var(--saffron); }
.origen-cierre-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.gal-video { position: relative; flex: none; margin: 0; height: clamp(260px, 38vw, 460px); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; scroll-snap-align: start; background: #1b1c20; }
.gal-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--pimenton); box-shadow: 0 0 0 6px rgba(255,255,255,.85), 0 10px 30px rgba(0,0,0,.4); display: grid; place-items: center; transition: transform .15s var(--ease); }
.gal-play:hover { transform: scale(1.06); }
.gal-play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.gal-video figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: #fff; font-weight: 600; font-size: .92rem;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.gal-video.is-playing .gal-play, .gal-video.is-playing figcaption { opacity: 0; pointer-events: none; transition: opacity .3s; }
@media (max-width: 760px) {
  .live .loop-video { aspect-ratio: 4 / 3; }
  .origen-cierre { grid-template-columns: 120px 1fr; }
}

/* ===== PROPUESTA A: portada con Carlitin delante de la Gran Vía al atardecer ===== */
.hero-granvia { background: #1b1c20; isolation: isolate; }
.hero-granvia::before { content: ""; position: absolute; inset: -6% 0 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(22,23,27,.96) 0%, rgba(22,23,27,.86) 30%, rgba(22,23,27,.3) 52%, rgba(22,23,27,.08) 75%, rgba(22,23,27,.25) 100%),
    linear-gradient(0deg, rgba(22,23,27,.9) 0%, rgba(22,23,27,0) 32%),
    linear-gradient(180deg, rgba(22,23,27,.75) 0%, rgba(22,23,27,0) 22%),
    url("../img/gran-via-atardecer.jpg") 0% 38% / 165% auto no-repeat;
  transform: translateY(calc(var(--py, 0) * 1px)); will-change: transform; }
.hero-granvia .hero-grid { align-items: end; padding-bottom: 0; }
.hero-granvia .hero-copy { align-self: center; padding-bottom: clamp(24px, 4vh, 48px); }
.hero-chef { position: relative; justify-self: end; width: min(100%, 640px, calc((100vh - 76px - 64px) * 1.05)); width: min(100%, 640px, calc((100svh - 76px - 64px) * 1.05)); }
.chef-img { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.mostrador { position: absolute; z-index: 1; left: -14%; right: -40vw; bottom: 0; height: 9%;
  background: linear-gradient(180deg, #5b4636 0%, #3a2c22 22%, #2a201a 100%); box-shadow: 0 -2px 0 rgba(255,214,150,.35) inset, 0 -18px 40px rgba(0,0,0,.35); border-radius: 6px 0 0 0; }
.hero-chef .steam { position: absolute; z-index: 3; left: 30%; top: 10%; width: 72%; height: 70%; inset: auto; left: 30%; top: 8%; }
.hero-chef .matasellos { left: -2%; top: 6%; width: 120px; height: 120px; z-index: 4; }
.js .hero-chef { opacity: 0; transform: translateY(40px); }
.is-loaded .hero-chef { opacity: 1; transform: none; transition: opacity 1s .15s, transform 1.2s .15s var(--ease); }
@media (max-width: 760px) {
  .hero-granvia::before { background:
      linear-gradient(0deg, rgba(22,23,27,1) 0%, rgba(22,23,27,.92) 42%, rgba(22,23,27,.2) 70%, rgba(22,23,27,.55) 100%),
      url("../img/gran-via-atardecer-1200.jpg") 22% 0 / auto 62% no-repeat, #1b1c20; }
  .hero-granvia .hero-grid { align-items: start; }
  .hero-chef { order: -1; justify-self: center; width: min(92vw, 420px); margin-top: 6px; }
  .hero-chef .matasellos { width: 68px; height: 68px; left: -2%; top: 2%; }
  .mostrador { left: -10vw; right: -10vw; }
}
@media (prefers-reduced-motion: reduce) { .js .hero-chef { opacity: 1; transform: none; } .hero-granvia::before { transform: none; } }
/* Integración del recorte con la luz del atardecer */
.hero-chef::before { content: ""; position: absolute; z-index: 0; left: 10%; right: -10%; top: 5%; bottom: 0;
  background: radial-gradient(50% 55% at 55% 45%, rgba(255,150,60,.38), transparent 70%); }
.chef-img { filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)) saturate(1.06) sepia(.06); }
.mostrador { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
@media (max-width: 760px) { .hero-chef { width: min(84vw, 370px); } }

/* ===== Escena 2 de la portada: Carlitin cocinando junto al mar (foto 19) ===== */
.fondo-evento { position: absolute; inset: -6% 0 0; z-index: -1; opacity: 0; transition: opacity 1.4s ease;
  transform: translateY(calc(var(--py, 0) * 1px)); will-change: opacity, transform; overflow: hidden; }
.fe-blur { position: absolute; inset: -40px; background: url("../img/hero-chef-waterfront.jpg") center 30% / cover no-repeat; filter: blur(28px) brightness(.55) saturate(1.15); }
.fe-foto { position: absolute; top: 6%; bottom: 0; right: 0; width: min(58%, 820px);
  background: url("../img/hero-chef-waterfront.jpg") center 22% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.fondo-evento::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22,23,27,.95) 0%, rgba(22,23,27,.8) 32%, rgba(22,23,27,.15) 60%, transparent 100%),
              linear-gradient(0deg, rgba(22,23,27,.85) 0%, transparent 30%); }
.hero-chef { transition: opacity 1.2s ease; }
.escena-2 .fondo-evento.e2, .escena-3 .fondo-evento.e3 { opacity: 1; }
.escena-2 .hero-chef, .escena-3 .hero-chef { opacity: 0 !important; }
/* Escena 3: foto 18 (Carlitin removiendo dos paelleras gigantes) */
.e3 .fe-blur, .e3 .fe-foto { background-image: url("../img/live-cooking.jpg"); }
.e3 .fe-foto { background-position: center 40%; }
/* Etiqueta de lugar (cambia con la escena) */
.escena-label { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 92px; z-index: 5; margin: 0; min-width: 9em;
  font: 600 .85rem var(--f-body); color: #fff; background: rgba(22,23,27,.6); backdrop-filter: blur(6px);
  padding: .45em .9em; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); transition: min-width .8s; }
.escena-label span { transition: opacity .8s; white-space: nowrap; }
.escena-label .el-2, .escena-label .el-3 { position: absolute; left: .9em; top: .45em; opacity: 0; }
.escena-2 .escena-label { min-width: 15.5em; }
.escena-3 .escena-label { min-width: 15em; }
.escena-2 .escena-label .el-1, .escena-3 .escena-label .el-1 { opacity: 0; }
.escena-2 .escena-label .el-2, .escena-3 .escena-label .el-3 { opacity: 1; }
@media (max-width: 760px) {
  .fe-foto { top: 64px; left: 0; right: 0; width: auto; height: 46%; bottom: auto; background-position: center 25%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%); mask-image: linear-gradient(0deg, transparent 0, #000 22%); }
  .fondo-evento::after { background: linear-gradient(0deg, rgba(22,23,27,1) 0%, rgba(22,23,27,.9) 45%, transparent 70%); }
  .escena-label { bottom: auto; top: 76px; right: auto; left: 12px; font-size: .75rem; }
}

/* Escena 1: paellera de langosta girando sobre el mostrador, en perspectiva */
.pan-mesa { position: absolute; z-index: 3; left: 27%; width: 82%; aspect-ratio: 1; top: 86%;
  transform: translateY(-50%) perspective(1400px) rotateX(64deg); transform-style: preserve-3d; }
.pan-mesa .pan img { animation: spin 40s linear infinite; border-width: 14px; box-shadow: 0 0 0 4px #3a3d44, 0 40px 60px rgba(0,0,0,.6); }
.pan-mesa .pan::before, .pan-mesa .pan::after { width: 70px; height: 40px; border-width: 13px; border-color: #3a3d44; }
.pan-mesa .pan::before { left: -54px; } .pan-mesa .pan::after { right: -54px; }
.hero-chef .steam { z-index: 4; }
.hero-chef .matasellos { z-index: 5; }
@media (prefers-reduced-motion: reduce) { .pan-mesa .pan img { animation: none; } }
/* Etiqueta de lugar: los 3 textos apilados en la misma celda; la caja toma el ancho del más largo */
.escena-label { display: inline-grid; min-width: 0 !important; transition: none; }
.escena-label span, .escena-label .el-2, .escena-label .el-3 { grid-area: 1 / 1; position: static; }
/* Ajustes: la caja de la etiqueta se ajusta al texto visible; paellera sin pisar la cinta */
.escena-label span { display: none; }
.hero-granvia:not(.escena-2):not(.escena-3) .escena-label .el-1,
.escena-2 .escena-label .el-2, .escena-3 .escena-label .el-3 { display: inline; opacity: 1; }
.escena-label { animation: none; }
.pan-mesa { left: 31%; width: 72%; top: 82%; }
@media (min-width: 761px) { .escena-label { bottom: auto; top: 92px; } }

/* Móvil: la primera pantalla siempre termina con la cinta de la bandera visible */
@media (max-width: 760px) {
  .hero-granvia { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 520px; }
  .hero-granvia .hero-grid { flex: 1 1 auto; min-height: 0; gap: 8px; padding-top: 4px; padding-bottom: 12px; align-content: start; }
  .hero-granvia .hero-chef { width: min(80vw, 340px, calc(33svh * 1.124)); margin-top: 0; }
  .hero-granvia .hero-copy { padding-bottom: 0; }
  .hero-granvia .hero-kicker { font-size: .82rem; margin-bottom: .35em; }
  .hero-granvia .hero-title { font-size: clamp(2rem, 5.6svh, 2.8rem); margin-bottom: .2em; }
  .hero-granvia .hero-origin { font-size: 1rem; margin: 0 0 .5em; }
  .hero-granvia .lead { display: none; }
  .hero-granvia .cta-row { margin-top: .5em; gap: 8px; flex-wrap: nowrap; }
  .hero-granvia .cta-row .btn { padding: .8em 1em; font-size: .92rem; white-space: nowrap; }
  .hero-granvia .ticker { flex: none; }
}
@media (max-width: 760px) {
  .hero-granvia .hero-copy { min-width: 0; }
  .hero-granvia .cta-row .btn { flex: 1 1 0; white-space: normal; text-align: center; line-height: 1.2; min-width: 0; }
  .hero-granvia .hero-chef .matasellos { left: auto; right: -2%; top: 4%; }
}
@media (max-width: 760px) and (min-height: 820px) {
  .hero-granvia .hero-chef { width: min(88vw, 380px, calc(38svh * 1.124)); }
  .hero-granvia .lead { display: block; font-size: .98rem; margin-bottom: .2em; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .hero-granvia .hero-origin { display: none; }
  .hero-granvia .hero-chef { width: min(70vw, calc(30svh * 1.124)); }
}

/* Controles de la portada: ‹ pausa ›, casi invisibles hasta que se usan */
.escena-ctrl { position: absolute; z-index: 6; right: clamp(16px, 3vw, 40px); bottom: 100px; display: flex; gap: 6px;
  opacity: .32; transition: opacity .3s; }
.escena-ctrl:hover, .escena-ctrl:focus-within { opacity: 1; }
.esc-btn { width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.4); background: rgba(22,23,27,.45); }
.esc-btn:hover { background: rgba(22,23,27,.85); }
.esc-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.escena-pausa svg { fill: #fff; stroke: none; }
.escena-pausa .i-play { display: none; }
.escena-pausa.is-paused .i-pausa { display: none; }
.escena-pausa.is-paused .i-play { display: inline; }
.fondo-evento { transition-duration: 1.5s; }
@media (max-width: 760px) { .escena-ctrl { bottom: 88px; right: 10px; opacity: .45; } .esc-btn { width: 32px; height: 32px; } }

/* Vapor de las escenas 2 y 3 */
.fe-steam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 760px) { .escena-ctrl { bottom: auto; top: 74px; right: 10px; } }

/* Selector de idiomas del footer como enlaces (cada idioma tiene su URL) */
.footer-langs a { font: 500 .88rem var(--f-body); color: #d9d9dc; text-decoration: none; border: 1.5px solid #4A4D55; border-radius: 999px; padding: .35em .85em; }
.footer-langs a:hover { border-color: var(--saffron); color: var(--white); }
.footer-langs a[aria-current="true"] { background: var(--saffron); border-color: var(--saffron); color: var(--iron); font-weight: 700; }

/* Botones flotantes (abajo a la derecha): WhatsApp y Compartir.
   Círculos con icono; al pasar el mouse (o con foco) se expanden hacia la izquierda mostrando el texto. */
.compartir { position: fixed; z-index: 40; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; }
.fab { display: inline-flex; align-items: center; justify-content: flex-start; height: 50px; min-width: 50px; padding: 0 13px; border-radius: 999px;
  cursor: pointer; text-decoration: none; font: 600 .92rem var(--f-body); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  border: 2px solid #fff; transition: box-shadow .2s; }
.fab svg { width: 22px; height: 22px; flex: none; }
.fab span { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .35s var(--ease), opacity .25s, margin .35s var(--ease); }
.fab:hover span, .fab:focus-visible span { max-width: 15em; opacity: 1; margin-left: 8px; }
.fab:hover { box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.fab-wa { background: #25D366; color: #fff; }
.fab-wa svg { fill: #fff; width: 24px; height: 24px; }
.compartir-btn { background: var(--iron); color: #fff; }
.compartir-btn svg { fill: none; stroke: var(--saffron); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.compartir-menu { position: absolute; right: 0; bottom: 60px; min-width: 220px; background: #fff; color: var(--iron); border-radius: 16px; padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35); border: 2px solid var(--iron); display: grid; gap: 2px; }
.compartir-menu[hidden] { display: none; }
.compartir-menu a, .compartir-menu button { display: flex; align-items: center; gap: 10px; padding: .7em .8em; border-radius: 10px; font: 500 .95rem var(--f-body);
  color: var(--iron); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.compartir-menu a:hover, .compartir-menu button:hover { background: var(--saffron-pale); }
.compartir-menu i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
@media (hover: none) { .fab:hover span { max-width: 0; opacity: 0; margin-left: 0; } }
@media (max-width: 760px) {
  .compartir { right: 12px; bottom: 12px; gap: 8px; transition: bottom .3s var(--ease); }
  .show-bar .compartir { bottom: 84px; }
  .fab { height: 46px; min-width: 46px; padding: 0 11px; }
  /* en móvil la barra inferior ya tiene WhatsApp: se oculta el botón flotante mientras se ve */
  .show-bar .fab-wa { display: none; }
}

/* Vapor sobre las paellas de "Nuestras paellas" */
.pans .pan-steam { position: absolute; left: -10%; width: 120%; top: -55%; height: 110%; pointer-events: none; z-index: 2; }
.pans .pan-steam { top: -32%; height: 90%; }
.escena-label { width: max-content; }
@media (max-width: 760px) { .hero-granvia .hero-chef .matasellos { top: 24%; right: -4%; } }
/* Vapor dentro de la paellera (recortado al círculo) */
.pans .pan-steam { left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 50%; }

/* Preguntas frecuentes */
.faq { padding: clamp(48px, 7vw, 88px) 0; background: var(--saffron-pale); }
.faq-list { display: grid; gap: 10px; max-width: 860px; margin-top: 1.4em; }
.faq-item { background: #fff; border: 2px solid var(--iron); border-radius: 16px; padding: 0 20px; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font: 700 1.25rem/1.25 var(--f-display); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 900 1.6rem var(--f-display); color: var(--pimenton); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 18px; color: var(--iron-soft); }
.area p { max-width: 75ch; }

/* Franja "buen provecho" en las lenguas de España */
.provecho { margin-top: clamp(36px, 5vw, 56px); text-align: center; }
.provecho-cap { margin: 0 0 14px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.provecho-lista { list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 0;
  border-top: 4px solid #AA151B; border-bottom: 4px solid #AA151B; background: linear-gradient(90deg, transparent, rgba(241,191,0,.08), transparent); }
.provecho-lista li { display: flex; flex-direction: column; align-items: center; padding: 0 clamp(16px, 3vw, 36px); }
.provecho-lista li + li { border-left: 1px solid #44474e; }
.provecho-lista b { font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--f-script); color: var(--saffron); }
.provecho-lista small { margin-top: 4px; font-size: .78rem; color: #B9BBC1; }
@media (max-width: 600px) {
  .provecho-lista { display: grid; grid-template-columns: 1fr 1fr; }
  .provecho-lista li + li { border-left: 0; }
  .provecho-lista li:nth-child(even) { border-left: 1px solid #44474e; }
  .provecho-lista b { font-size: 1.3rem; white-space: nowrap; }
}

/* Ruta: los ingredientes salen de Madrid y arman la paella en Miami */
.ruta .paellera .asa { fill: none; stroke: #4A4D55; stroke-width: 5; }
.ruta .paellera .borde { fill: #2E3036; stroke: #4A4D55; stroke-width: 3; }
.ruta .paellera .fondo { fill: #17181C; }
.ruta .capa { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .45s var(--ease); }
.ruta .capa.on { opacity: 1; transform: none; }
.ruta .vapor path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.ruta .paellera.lista .vapor path { animation: vapor-ruta 2.4s ease-in-out infinite; }
.ruta .paellera.lista .vapor path:nth-child(2) { animation-delay: .8s; }
.ruta .paellera.lista .vapor path:nth-child(3) { animation-delay: 1.6s; }
@keyframes vapor-ruta { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-14px); } }
.ruta .paellera.lista .borde { stroke: var(--saffron); filter: drop-shadow(0 0 10px rgba(242,179,0,.55)); transition: stroke .5s; }
.ruta .ing { opacity: 0; }
.ruta .ing text { font: 700 11px var(--f-body); fill: #E6E7EA; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .ruta .capa { transition: none; } .ruta .paellera.lista .vapor path { animation: none; opacity: .4; } }
.ruta .ing text { transition: opacity .2s; }
.ruta-nota { margin: 4px 0 26px; text-align: center; font: 400 clamp(1.3rem, 2.6vw, 1.8rem)/1.3 var(--f-script); color: var(--saffron); }
.social-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }