/* 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; }
.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(190px, 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; }
}