/* ============================================================
   ERA · Harinas ecológicas molidas a la piedra
   "Un viaje en el tiempo" — Almudena Monzó · Altura (Castelló)
   ------------------------------------------------------------
   Sistema de diseño. Una sola hoja para toda la web.
   Marca: naranja + tinta + papel/kraft. Cercanía de artesano
   con la frescura de un proyecto joven. Mucha foto real,
   serif cálida (Fraunces) para los titulares y grotesca
   (Archivo) para etiquetas, datos y UI (como el packaging).
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Naranja Era — el color (muestreado del logo) */
  --orange-50:#FEF1EC; --orange-100:#FBDED2; --orange-200:#F8C2AD;
  --orange-300:#F59C7B; --orange-400:#F37550; --orange-500:#F0512A;
  --orange-600:#E03E15; --orange-700:#BB3010; --orange-800:#8E250D;

  /* Tinta — negro cálido de grabado */
  --ink-900:#161210; --ink-800:#2A2421; --ink-700:#423A35;
  --ink-600:#5E544D; --ink-500:#837871; --ink-400:#A99F98;
  --ink-300:#CFC7C1; --ink-200:#E6E0DB; --ink-100:#F1ECE8;

  /* Papel — el stock de la bolsa */
  --paper:#FFFFFF; --paper-warm:#FBF7F1; --kraft:#F3EADC; --kraft-deep:#E9DCC7;

  /* Roles */
  --bg:var(--paper);
  --fg:var(--ink-900);
  --fg-soft:var(--ink-700);
  --fg-mut:var(--ink-500);
  --line:rgba(22,18,16,.12);
  --line-soft:rgba(22,18,16,.08);

  --success:#3F7A4F; --success-bg:#E7F0E8;

  /* Tipografía */
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --grotesk:"Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --maxw:1180px;
  --gut:clamp(20px, 5vw, 48px);
  --radius:6px;
  --radius-lg:14px;

  /* Sombras (sutiles, la marca es plana/gráfica) */
  --sh-sm:0 2px 10px rgba(22,18,16,.07);
  --sh-md:0 14px 38px -14px rgba(22,18,16,.20);
  --sh-lg:0 30px 70px -22px rgba(22,18,16,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.28s;
}

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--grotesk);
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul { list-style:none; }
input,textarea,select { font-family:inherit; font-size:16px; }
:focus-visible { outline:2.5px solid var(--orange-400); outline-offset:2px; border-radius:3px; }

/* ---------- TIPOGRAFÍA ---------- */
.serif { font-family:var(--serif); }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; line-height:1.06; letter-spacing:-.01em; color:var(--ink-900); text-wrap:balance; }
.h-display { font-size:clamp(2.4rem, 5.4vw, 4.1rem); line-height:1.04; letter-spacing:-.02em; }
.h1 { font-size:clamp(2.1rem, 5vw, 3.4rem); }
.h2 { font-size:clamp(1.7rem, 3.6vw, 2.6rem); }
.h3 { font-size:clamp(1.25rem, 2.4vw, 1.7rem); }
p { color:var(--fg-soft); }
.lead { font-size:clamp(1.05rem, 1.6vw, 1.3rem); line-height:1.6; color:var(--fg-soft); }

/* Etiqueta superior (eyebrow) — grotesca, mayúsculas, naranja */
.eyebrow {
  font-family:var(--grotesk); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange-600);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow--light { color:var(--orange-300); }
.eyebrow::before {
  content:""; width:26px; height:1.5px; background:currentColor; opacity:.7;
}
.eyebrow.no-rule::before { display:none; }

/* Marca de acento (cuando queremos voz cercana, manuscrita-serif en cursiva) */
.script { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--orange-600); }

/* ---------- LAYOUT ---------- */
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow { max-width:780px; margin-inline:auto; padding-inline:var(--gut); }
.section { padding-block:clamp(56px, 9vw, 110px); }
.section--tight { padding-block:clamp(40px, 6vw, 72px); }
.bg-kraft { background:var(--kraft); }
.bg-warm  { background:var(--paper-warm); }
.bg-ink   { background:var(--ink-900); color:var(--paper-warm); }
.bg-ink h1,.bg-ink h2,.bg-ink h3 { color:#fff; }
.bg-orange{ background:var(--orange-500); color:#fff; }
.bg-orange h1,.bg-orange h2,.bg-orange h3 { color:#fff; }

.grid { display:grid; gap:clamp(28px, 5vw, 64px); }
.grid-2 { grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:820px){ .grid-2 { grid-template-columns:1fr; } }

.stack-sm > * + * { margin-top:.8rem; }
.center { text-align:center; }
.measure { max-width:54ch; }
.measure-narrow { max-width:42ch; }
/* Para envolver un TITULAR centrado (no un párrafo): 54ch pensado para texto de cuerpo
   dejaba encabezados largos partidos en 4-5 líneas estrechas incluso en pantallas anchas
   (confirmado a 1920px: "Descubre la red de profesionales..." en 5 líneas con toda la
   pantalla vacía a los lados). Los títulos necesitan más ancho que un párrafo de lectura. */
.measure-wide { max-width:800px; }

/* ---------- BOTONES ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--grotesk); font-weight:700; font-size:.98rem;
  padding:.85em 1.5em; border-radius:var(--radius); border:1.6px solid transparent;
  transition:transform var(--dur) var(--ease), background var(--dur), color var(--dur), border-color var(--dur);
  white-space:nowrap; line-height:1;
}
.btn svg { width:1.1em; height:1.1em; }
.btn--primary { background:var(--orange-500); color:#fff; }
.btn--primary:hover { background:var(--orange-600); transform:translateY(-2px); }
.btn--outline { border-color:var(--orange-500); color:var(--orange-700); background:transparent; }
.btn--outline:hover { background:var(--orange-50); transform:translateY(-2px); }
.btn--light { background:#fff; color:var(--ink-900); }
.btn--light:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn--ghost { color:var(--orange-700); padding-inline:.4em; }
.btn--ghost:hover { color:var(--orange-500); }
.btn--lg { font-size:1.05rem; padding:1em 1.8em; }
.btn--block { width:100%; }

/* ---------- HEADER / NAV ---------- */
.header {
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.header__inner {
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  height:70px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.header__logo img { height:26px; }
.nav { display:flex; align-items:center; gap:2px; }
.nav a {
  font-family:var(--grotesk); font-weight:600; font-size:.95rem; color:var(--fg-soft);
  padding:.55em .7em; border-radius:5px; transition:color var(--dur);
}
.nav a:hover { color:var(--orange-600); }
.nav a.is-active { color:var(--orange-600); }
.header__actions { display:flex; align-items:center; gap:8px; }
.icon-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--radius);
  border:1.6px solid var(--orange-500); color:var(--orange-600); background:transparent;
  transition:background var(--dur), color var(--dur);
}
.icon-btn:hover { background:var(--orange-50); }
.icon-btn svg { width:20px; height:20px; }
.cart-count {
  position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--ink-900); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
  font-family:var(--grotesk);
}
.cart-count:empty,
.cart-count[data-count="0"] { display:none; }
.nav-toggle { display:none; }

@media (max-width:920px){
  .nav, .header__actions .btn { display:none; }
  .nav-toggle { display:flex; }
  .nav.is-open {
    display:flex; position:fixed; inset:70px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--paper-warm); padding:14px var(--gut) 26px; gap:2px; border-bottom:1px solid var(--line);
    box-shadow:var(--sh-md);
  }
  .nav.is-open a { font-size:1.15rem; padding:.7em 0; border-bottom:1px solid var(--line-soft); }
}

/* ---------- HERO ---------- */
.hero { position:relative; }
.hero::before {
  content:""; position:absolute; top:-8px; left:0; right:0; bottom:-8px; z-index:-1;
  background:radial-gradient(120% 100% at 82% 0%, var(--kraft) 0%, var(--paper-warm) 46%, var(--paper) 78%);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.hero__kicker {
  display:flex; align-items:center; gap:16px; margin-bottom:26px;
}
.hero__kicker::after { content:""; flex:1; height:1.5px; background:var(--orange-200); }
.hero__grid { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(30px,5vw,60px); align-items:center; }
@media (max-width:860px){ .hero__grid { grid-template-columns:1fr; } }
.hero__media {
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--kraft);
  box-shadow:var(--sh-lg); border:6px solid #fff; outline:1px solid var(--line-soft);
}
.hero__media img { width:100%; height:100%; object-fit:cover; }
.hero__badge {
  position:absolute; right:18px; bottom:-22px; background:#fff; border-radius:50%;
  width:132px; height:132px; box-shadow:var(--sh-lg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:14px;
  border:1.5px dashed var(--orange-300); transform:rotate(-8deg);
}
.hero__badge .num { font-family:var(--grotesk); font-weight:800; font-size:1.02rem; line-height:1.15; color:var(--ink-900); }
.hero__badge .note { font-size:.68rem; margin-top:3px; }
/* Grid de 2 columnas SIEMPRE (no 4): la columna de texto del hero es como mucho la mitad
   del ancho del `.wrap` (1180px), así que 4 columnas de estadística nunca tienen sitio de
   sobra en ningún ancho de pantalla real — probado: incluso a 1440px de viewport, con 4
   columnas "Tradición"/"Soberanía" partían a mitad de palabra por falta de espacio. Con 2
   columnas cada palabra tiene el doble de sitio en cualquier ancho. */
.hero__stats {
  display:grid; grid-template-columns:repeat(2,1fr); column-gap:24px; row-gap:16px;
  margin-top:40px; border-top:1.6px solid var(--orange-200); padding-top:22px;
}
.hero__stats > div { min-width:0; }
.hero__stats > div:nth-child(odd) { border-right:1px solid var(--orange-200); padding-right:18px; }
.hero__stats .num {
  font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.65rem); color:var(--ink-900);
  line-height:1.15;
}
.hero__stats .lbl { font-size:.76rem; color:var(--fg-mut); font-weight:600; margin-top:6px; line-height:1.3; }

/* ---------- TARJETAS / CARACTERÍSTICAS ---------- */
.feature {
  display:flex; flex-direction:column; gap:12px;
}
.feature__ic {
  width:48px; height:48px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  color:var(--orange-600); border:1.6px solid var(--orange-300); background:var(--orange-50);
}
.feature__ic svg { width:24px; height:24px; }
.bg-ink .feature__ic { color:var(--orange-300); border-color:rgba(243,117,80,.5); background:rgba(240,81,42,.1); }
.feature h3 { font-family:var(--grotesk); font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:-.01em; }
.feature p { font-size:.95rem; }
.bg-ink .feature p { color:rgba(255,255,255,.74); }
.feature__tag {
  display:inline-block; align-self:flex-start; font-family:var(--grotesk); font-weight:700; font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--orange-700); background:var(--orange-50);
  border:1px solid var(--orange-200); border-radius:999px; padding:.3em .8em; order:-1; margin-bottom:2px;
}

.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px); }
.cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,28px); }
.cards-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,28px); }
@media (max-width:900px){ .cards-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .cards-3 { grid-template-columns:1fr; } .cards-2 { grid-template-columns:1fr; } }
@media (max-width:480px){ .cards-4 { grid-template-columns:1fr; } }

/* Para grupos cuyo número de tarjetas no encaja limpio en una rejilla fija (p.ej. 5) —
   fluyen y se centran en vez de dejar una fila incompleta colgando a la izquierda. */
.cards-flow { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,3vw,32px); }
/* Ancho fijo por el mismo motivo que en .products: flex-grow variable hacía que las
   tarjetas de una fila incompleta salieran más anchas que las de una fila llena. */
.cards-flow > * { flex:0 0 290px; width:290px; }
@media (max-width:520px){ .cards-flow > * { flex-basis:100%; width:100%; max-width:420px; } }

/* Pasos del proceso — "el viaje del grano", con foto por paso */
.steps { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
@media (max-width:760px){ .steps { grid-template-columns:1fr; } }
.step { border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft); display:flex; flex-direction:column; }
.step__photo { aspect-ratio:16/10; overflow:hidden; background:var(--kraft); }
.step__photo img { width:100%; height:100%; object-fit:cover; display:block; }
.step__body { padding:24px 26px 26px; }
.step__n { font-family:var(--serif); font-weight:600; font-size:1.6rem; color:var(--orange-500); line-height:1; }
.step h3 { font-family:var(--grotesk); font-weight:800; font-size:1.05rem; text-transform:uppercase; margin:10px 0 4px; letter-spacing:-.01em; }
.step .sub { font-style:italic; color:var(--orange-600); font-family:var(--serif); font-size:.98rem; margin-bottom:8px; }
.step p { font-size:.92rem; }
.step__why {
  margin-top:12px; padding:10px 13px; border-left:2.5px solid var(--orange-400); background:var(--orange-50);
  border-radius:0 4px 4px 0; font-size:.85rem; font-style:italic; color:var(--orange-800); line-height:1.5;
}

/* ---------- HARINAS (catálogo) ---------- */
.shop-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:30px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  font-family:var(--grotesk); font-weight:700; font-size:.82rem; padding:.5em 1.1em; border-radius:999px;
  border:1.6px solid var(--ink-200); color:var(--fg-soft); background:#fff; transition:all var(--dur);
}
.chip:hover { border-color:var(--orange-300); }
.chip.is-active { background:var(--orange-500); border-color:var(--orange-500); color:#fff; }

/* Flex en vez de grid: cuando el número de fichas no llena la última fila (p.ej. 6 en
   4 columnas, u 8 en 3), la fila incompleta se centra en vez de quedar colgada a la
   izquierda con un hueco vacío al final. */
.products { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,2vw,22px); }
/* Ancho FIJO (flex:0 0, no flex:1 1) — con flex-grow las tarjetas de una fila con menos
   huecos (p.ej. 2) crecían más que las de una fila llena (p.ej. 4), dando tarjetas de
   tamaño distinto entre filas del mismo grid (confirmado: 254px vs 271px a 1920px). */
.products > .card { flex:0 0 271px; width:271px; }
@media (max-width:420px){ .products > .card { flex-basis:100%; width:100%; max-width:360px; } }

.card {
  position:relative; background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.card:hover { border-color:var(--orange-400); transform:translateY(-4px); box-shadow:var(--sh-md); }
.card__media {
  height:170px; display:flex; align-items:center; justify-content:center; padding:18px; cursor:pointer;
  background:radial-gradient(120% 120% at 50% 15%, #fff 40%, var(--kraft) 130%);
}
.card__media img { max-height:100%; max-width:80%; object-fit:contain; transition:transform .42s var(--ease); }
.card:hover .card__media img { transform:scale(1.06) rotate(-1deg); }
.tag-gf {
  position:absolute; top:12px; right:12px; font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--orange-700); background:var(--orange-50);
  border:1px solid var(--orange-200); border-radius:999px; padding:.35em .7em;
}
.card__body { padding:16px 18px 18px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; flex:1; }
.card__name { font-family:var(--grotesk); font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; cursor:pointer; }
.card:hover .card__name { color:var(--orange-600); }
.card__nick { font-family:var(--serif); font-style:italic; color:var(--orange-600); font-size:.95rem; margin-top:3px; }
.card__meta { font-size:.8rem; color:var(--fg-mut); font-weight:600; margin-top:7px; }
.card__foot { margin-top:auto; padding-top:12px; }

/* Selector de formato en la propia tarjeta — 1kg vs 5kg, con precio/kg y ahorro visibles */
.size-pick { display:flex; gap:7px; margin-top:12px; }
.size-opt {
  flex:1; min-width:0; text-align:left; padding:8px 9px; border-radius:var(--radius);
  border:1.5px solid var(--ink-200); background:#fff; cursor:pointer; transition:all var(--dur);
}
.size-opt:hover { border-color:var(--orange-300); }
.size-opt.is-on { border-color:var(--orange-500); background:var(--orange-50); box-shadow:inset 0 0 0 1px var(--orange-500); }
.size-opt__kg {
  display:flex; align-items:baseline; gap:5px; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-mut);
}
.size-opt.is-on .size-opt__kg { color:var(--orange-700); }
.size-opt__save { font-weight:800; color:var(--success); text-transform:none; letter-spacing:0; }
.size-opt__price { display:block; font-family:var(--grotesk); font-weight:800; font-size:1rem; color:var(--ink-900); margin-top:1px; white-space:nowrap; }
.size-opt__unit { display:block; font-size:.66rem; color:var(--fg-mut); margin-top:2px; }

/* Selector de formato compacto para "también elaboramos" (pasta, copos, granos) */
.xsize-pick { display:flex; gap:6px; flex-wrap:wrap; }
.xsize-opt {
  display:inline-flex; align-items:baseline; gap:5px; font-family:var(--grotesk); font-size:.76rem; font-weight:700;
  padding:.4em .65em; border-radius:4px; border:1.4px solid var(--ink-200); background:#fff; color:var(--fg-soft); cursor:pointer; transition:all var(--dur);
}
.xsize-opt:hover { border-color:var(--orange-300); }
.xsize-opt.is-on { border-color:var(--orange-500); background:var(--orange-50); color:var(--orange-700); }
.xsize-opt__price { font-weight:800; color:var(--ink-900); }
.xsize-opt.is-on .xsize-opt__price { color:var(--orange-700); }

.add-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4em; height:40px; padding:0 .9em; border-radius:var(--radius);
  border:1.6px solid var(--orange-500); color:var(--orange-600); background:transparent;
  font-weight:700; font-size:.85rem; transition:all var(--dur); white-space:nowrap;
}
.add-btn:hover { background:var(--orange-500); color:#fff; }
.add-btn.is-done { background:var(--success); border-color:var(--success); color:#fff; }
.add-btn--block { width:100%; }
.add-btn svg { width:16px; height:16px; }

/* ---------- DETALLE DE PRODUCTO (modal) ---------- */
.modal-back {
  position:fixed; inset:0; z-index:200; background:rgba(22,18,16,.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:clamp(12px,4vw,48px); overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity var(--dur);
}
.modal-back.is-open { opacity:1; pointer-events:auto; }
.modal {
  width:100%; max-width:900px; background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--sh-lg); display:grid; grid-template-columns:.9fr 1.1fr; margin:auto;
  transform:translateY(12px); transition:transform var(--dur) var(--ease);
}
.modal-back.is-open .modal { transform:none; }
@media (max-width:720px){ .modal { grid-template-columns:1fr; } }
.modal__media { background:radial-gradient(120% 120% at 50% 10%, #fff 45%, var(--kraft) 130%); display:flex; align-items:center; justify-content:center; padding:36px; min-height:260px; }
.modal__media img { max-height:280px; max-width:78%; object-fit:contain; }
.modal__media img.is-photo { max-width:100%; width:100%; height:100%; max-height:none; object-fit:cover; border-radius:var(--radius-lg); }
.modal__body { padding:clamp(22px,3vw,34px); position:relative; }
.modal__close { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:999px; background:var(--ink-100); display:flex; align-items:center; justify-content:center; color:var(--ink-700); }
.modal__close:hover { background:var(--ink-200); }
.taglist { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.taglist span { font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--orange-700); border:1px solid var(--orange-200); border-radius:999px; padding:.35em .7em; }
.meta-row { display:flex; gap:24px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); margin:16px 0; }
.meta-row .k { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mut); }
.meta-row .v { font-size:.92rem; font-weight:600; color:var(--ink-800); margin-top:2px; }
.opt-label { font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-mut); margin-bottom:8px; }
.opt-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.opt {
  font-family:var(--grotesk); font-weight:700; font-size:.85rem; padding:.6em 1em; border-radius:var(--radius);
  border:1.6px solid var(--ink-200); color:var(--fg-soft); background:#fff; transition:all var(--dur);
}
.opt.is-on { border-color:var(--orange-500); background:var(--orange-50); color:var(--orange-700); }
.qty { display:inline-flex; align-items:center; border:1.6px solid var(--ink-200); border-radius:var(--radius); overflow:hidden; }
.qty button { width:40px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--ink-700); }
.qty button:hover { background:var(--ink-100); }
.qty span { min-width:42px; text-align:center; font-weight:700; }

/* ---------- CESTA (drawer) ---------- */
.drawer-back { position:fixed; inset:0; z-index:300; background:rgba(22,18,16,.5); opacity:0; pointer-events:none; transition:opacity var(--dur); }
.drawer-back.is-open { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; right:0; height:100%; width:min(430px,100%); background:#fff; z-index:301;
  display:flex; flex-direction:column; box-shadow:var(--sh-lg); transform:translateX(100%);
  transition:transform .34s var(--ease);
}
.drawer.is-open { transform:none; }
.drawer__head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1.6px solid var(--orange-500); }
.drawer__head h3 { font-family:var(--grotesk); font-weight:800; text-transform:uppercase; font-size:1.15rem; display:flex; align-items:center; gap:10px; }
.drawer__items { flex:1; overflow-y:auto; padding:6px 22px; }
.drawer__empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:0 30px; color:var(--fg-mut); }
.line { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.line__img { width:58px; height:58px; flex:none; border:1px solid var(--orange-200); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; background:var(--paper-warm); }
.line__img img { max-height:74%; max-width:74%; object-fit:contain; }
.line__name { font-family:var(--grotesk); font-weight:800; font-size:.92rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.15; }
.line__opt { font-size:.78rem; color:var(--fg-mut); margin-top:2px; }
.line__ctrl { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.line .qty button { width:30px; height:30px; }
.line .qty span { min-width:28px; font-size:.85rem; }
.icon-trash { color:var(--ink-400); padding:4px; }
.icon-trash:hover { color:var(--orange-600); }
.drawer__foot { border-top:1.6px solid var(--orange-500); padding:18px 22px 22px; }
.row { display:flex; justify-content:space-between; font-size:.95rem; margin-bottom:6px; }
.row .v { font-weight:700; }
.row--total { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); align-items:baseline; }
.row--total .k { font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; color:var(--fg-soft); }
.row--total .v { font-family:var(--grotesk); font-weight:800; font-size:1.5rem; }
.note { font-size:.75rem; color:var(--fg-mut); }
.free-ship { font-size:.78rem; color:var(--success); font-weight:600; }

/* ---------- CHECKOUT ---------- */
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.pay {
  border:1.8px solid var(--ink-200); border-radius:var(--radius); padding:16px; text-align:left;
  display:flex; flex-direction:column; gap:6px; transition:all var(--dur); background:#fff;
}
.pay.is-on { border-color:var(--orange-500); background:var(--orange-50); }
.pay__top { display:flex; align-items:center; gap:9px; font-weight:800; font-size:.95rem; }
.pay__dot { width:14px; height:14px; border-radius:50%; border:1.6px solid var(--ink-300); flex:none; }
.pay.is-on .pay__dot { border:4.5px solid var(--orange-500); }
.pay small { color:var(--fg-mut); font-size:.78rem; }
.field { display:block; margin-bottom:14px; }
.field > span { display:block; font-size:.8rem; font-weight:600; color:var(--fg-soft); margin-bottom:6px; }
.input {
  width:100%; padding:.75em .8em; border:1.6px solid var(--ink-200); border-radius:var(--radius);
  background:#fff; color:var(--ink-900); transition:border-color var(--dur); outline:none;
}
.input:focus { border-color:var(--orange-400); }
textarea.input { resize:vertical; min-height:90px; }
.callout {
  border:1.5px solid var(--orange-200); background:var(--orange-50); color:var(--orange-800);
  border-radius:var(--radius); padding:12px 14px; font-size:.85rem; display:flex; gap:10px; align-items:flex-start;
}
.callout svg { width:18px; height:18px; flex:none; color:var(--orange-600); margin-top:1px; }

/* ---------- TABLA PRECIOS (profesionales) ---------- */
.ptable { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.ptable__head, .ptable__row { display:grid; grid-template-columns:2.2fr 1.2fr 1fr 1fr; align-items:center; }
.ptable__head { background:var(--ink-900); color:#fff; }
.ptable__head > div { padding:13px 16px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.ptable__head > div.num { text-align:right; color:var(--orange-300); }
.ptable__row { border-top:1px solid var(--line-soft); }
.ptable__row:nth-child(even){ background:var(--paper-warm); }
.ptable__row > div { padding:12px 16px; font-size:.9rem; }
.ptable__row .name { display:flex; align-items:center; gap:10px; font-family:var(--grotesk); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:.85rem; }
.ptable__row .name img { width:30px; height:30px; object-fit:contain; border-radius:4px; }
.ptable__row .name img.is-photo { object-fit:cover; }
.ptable__row .num { text-align:right; font-weight:800; }
.ptable__row .num.soft { font-weight:600; color:var(--fg-mut); }
/* Fila de "también elaboramos" (pasta/cereales): nombre + selector de formato + añadir.
   Clase propia (en vez de estilo inline) para que SÍ pueda responder a breakpoints — un
   estilo inline habría ganado siempre a cualquier media query de esta hoja. */
/* Selector compuesto (.ptable__row.ptable__row--extras) a propósito: sube la especificidad
   por encima de la regla genérica ".ptable__head, .ptable__row" de más abajo, para no
   depender de qué bloque @media aparezca después en el archivo. */
.ptable__row.ptable__row--extras { grid-template-columns:1.6fr 1.6fr auto; }
@media (max-width:620px){
  .ptable__row.ptable__row--extras { grid-template-columns:1fr; row-gap:6px; }
  .ptable__row.ptable__row--extras > div:last-child { text-align:left; }
}
@media (max-width:620px){
  .ptable__head, .ptable__row { grid-template-columns:1.6fr 1fr 1fr; }
  .ptable__head .hide-sm, .ptable__row .hide-sm { display:none; }
}
.tarifa-dash { display:inline-block; width:2.6em; height:.85em; border-radius:3px; background:var(--ink-200); }

/* ---------- FRANJA / CITA ---------- */
.quote { font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.22; }
.quote--orange { color:#fff; }
.attrib { font-family:var(--grotesk); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-top:18px; }
.bg-orange .attrib { color:rgba(255,255,255,.85); }

/* Cita enmarcada como bloque propio (no texto centrado "suelto") */
.quote-block {
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(34px,5vw,54px) clamp(28px,5vw,64px); box-shadow:var(--sh-sm);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(8px,2vw,20px); align-items:start;
}
@media (max-width:640px){ .quote-block { grid-template-columns:1fr; text-align:center; } }
.quote-block__mark {
  font-family:var(--serif); font-weight:600; font-size:4.4rem; line-height:1; color:var(--orange-300);
  flex:none; margin-top:-.28em;
}
@media (max-width:640px){ .quote-block__mark { justify-self:center; margin-top:0; } }
.quote-block .quote { color:var(--ink-900); }
.quote-block .attrib { display:flex; align-items:center; gap:10px; color:var(--fg-mut); }
@media (max-width:640px){ .quote-block .attrib { justify-content:center; } }
.quote-block .attrib::before { content:""; width:22px; height:1.5px; background:var(--orange-400); }
@media (max-width:640px){ .quote-block .attrib::before { display:none; } }

/* ---------- MOLTURACIÓN: franja de credenciales (distinta de las tarjetas, para no repetir forma) ---------- */
.molino-cred { display:flex; flex-wrap:wrap; gap:14px; border-top:1.5px solid var(--line); padding-top:26px; }
.molino-cred__item {
  flex:1 1 220px; display:flex; align-items:center; gap:12px; font-family:var(--grotesk); font-weight:700;
  font-size:.88rem; color:var(--ink-800);
}
.molino-cred__ic {
  width:38px; height:38px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--orange-600); background:var(--orange-50); border:1.4px solid var(--orange-200);
}

/* ---------- BANNER FOTO (full bleed) ---------- */
.photo-band { position:relative; min-height:clamp(280px,42vw,480px); display:flex; align-items:center; overflow:hidden; }
.photo-band img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.photo-band .scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(22,18,16,.78) 0%, rgba(22,18,16,.45) 55%, rgba(22,18,16,.1) 100%); }
.photo-band .wrap { position:relative; z-index:2; color:#fff; }
.photo-band h2 { color:#fff; }
.photo-band p { color:rgba(255,255,255,.88); }

/* ---------- INSTAGRAM ---------- */
.ig-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
@media (max-width:760px){ .ig-grid { grid-template-columns:repeat(3,1fr); } }
.ig-tile { aspect-ratio:1; overflow:hidden; border-radius:var(--radius); position:relative; }
.ig-tile img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.ig-tile:hover img { transform:scale(1.07); }

/* ---------- DIARIO / BLOG ---------- */
.post { display:flex; flex-direction:column; background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--dur), border-color var(--dur), box-shadow var(--dur); }
.post:hover { transform:translateY(-4px); border-color:var(--orange-300); box-shadow:var(--sh-md); }
.post__img { aspect-ratio:16/10; overflow:hidden; background:var(--kraft); }
.post__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post:hover .post__img img { transform:scale(1.05); }
.post__body { padding:18px 20px 22px; }
.post__kicker { font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--orange-600); margin-bottom:8px; }
.post h3 { font-size:1.2rem; margin-bottom:7px; }

/* ---------- FORM ---------- */
.form-card { background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px); }
.field-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .field-grid-2 { grid-template-columns:1fr; } }

/* Bloque de cierre con CTA (texto + botones) — colapsa a 1 columna en móvil en vez de
   aplastar el titular y los botones en una franja estrecha. */
.cta-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:36px; align-items:center; }
@media (max-width:640px){ .cta-grid { grid-template-columns:1fr; } }

/* contacto items */
.contact-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--ink-200); border-radius:var(--radius); transition:border-color var(--dur); width:100%; text-align:left; background:#fff; }
.contact-item:hover { border-color:var(--orange-300); }
.contact-item .ic { width:42px; height:42px; flex:none; border:1.6px solid var(--orange-300); border-radius:var(--radius); color:var(--orange-600); display:flex; align-items:center; justify-content:center; }
.contact-item .k { display:block; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-mut); }
.contact-item .v { display:block; font-weight:700; color:var(--ink-900); margin-top:1px; }

/* ---------- FOOTER ---------- */
.footer { background:var(--ink-900); color:var(--paper-warm); padding-top:60px; }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.14); }
@media (max-width:760px){ .footer__grid { grid-template-columns:1fr; gap:30px; } }
.footer img.logo { height:28px; margin-bottom:14px; }
.footer h4 { font-family:var(--grotesk); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-300); margin-bottom:14px; }
.footer a.flink { display:block; color:rgba(255,255,255,.78); padding:5px 0; font-size:.95rem; }
.footer a.flink:hover { color:#fff; }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:22px 0; font-size:.8rem; color:rgba(255,255,255,.5); }
.footer__bottom a { color:rgba(255,255,255,.7); }
.footer__bottom a:hover { color:#fff; }

/* ---------- TOAST ---------- */
.toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink-900); color:#fff; padding:12px 18px; border-radius:999px; font-size:.9rem; font-weight:600;
  display:flex; align-items:center; gap:9px; box-shadow:var(--sh-lg); z-index:500; opacity:0; pointer-events:none;
  transition:opacity var(--dur), transform var(--dur);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg { width:18px; height:18px; color:var(--orange-400); }

/* spinner del checkout */
.spinner { width:46px; height:46px; border:3px solid var(--orange-200); border-top-color:var(--orange-500); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- INFO POPUP (tipo de molienda / qué harina elijo) ---------- */
.info-btn {
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  border:1.4px solid var(--ink-300); color:var(--fg-mut); flex:none; transition:all var(--dur);
}
.info-btn:hover { border-color:var(--orange-500); color:var(--orange-600); }
.modal--info { max-width:640px; padding:clamp(24px,4vw,38px); grid-template-columns:1fr; }
.info-row { padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:.92rem; color:var(--fg-soft); }
.info-row:last-child { border-bottom:none; }
.nutri-line { font-size:.76rem; font-style:italic; color:var(--fg-mut); line-height:1.5; }

/* ---------- PROMO DEL TEST "¿QUÉ HARINA ELIJO?" (entrada grande y visible en la tienda) ---------- */
.quiz-promo {
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,48px); align-items:center;
  background:var(--kraft); border-radius:var(--radius-lg); padding:clamp(30px,4vw,50px);
}
@media (max-width:760px){ .quiz-promo { grid-template-columns:1fr; } }
.quiz-promo__chips { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quiz-chip {
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius);
  padding:14px 14px; font-family:var(--grotesk); font-weight:700; font-size:.85rem; color:var(--ink-800);
  transition:all var(--dur); text-align:left;
}
.quiz-chip:hover { border-color:var(--orange-400); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.quiz-chip__ic { width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--orange-600); background:var(--orange-50); }

/* ---------- CUESTIONARIO ¿QUÉ HARINA ELIJO? ---------- */
.quiz-opts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .quiz-opts { grid-template-columns:1fr; } }
.quiz-opt {
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left;
  border:1.6px solid var(--ink-200); border-radius:var(--radius); padding:16px; background:#fff; transition:all var(--dur);
}
.quiz-opt:hover { border-color:var(--orange-400); background:var(--orange-50); transform:translateY(-2px); }
.quiz-opt__ic { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--orange-600); background:var(--orange-50); }
.quiz-opt__label { font-family:var(--grotesk); font-weight:800; font-size:.92rem; }
.quiz-opt--wide { flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.quiz-opt--wide strong { font-family:var(--grotesk); font-size:.95rem; }
.quiz-opt--wide span { font-size:.82rem; color:var(--fg-mut); }
.quiz-back {
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--fg-mut);
  margin-bottom:14px; transition:color var(--dur);
}
.quiz-back:hover { color:var(--orange-600); }
.quiz-result { display:flex; gap:16px; align-items:flex-start; background:var(--orange-50); border:1px solid var(--orange-200); border-radius:var(--radius); padding:18px; }
.quiz-result__ic { width:40px; height:40px; flex:none; border-radius:50%; background:var(--success); color:#fff; display:flex; align-items:center; justify-content:center; }
.quiz-alt__row { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:.85rem; }
.quiz-alt__row:last-child { border-bottom:none; }
.quiz-alt__row strong { font-family:var(--grotesk); flex:none; white-space:nowrap; }
.quiz-alt__row span { color:var(--fg-mut); text-align:right; }

.cmp-table__hint { display:flex; align-items:center; gap:6px; }
@media (min-width:900px){ .cmp-table__hint { display:none; } }
.cmp-table { border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp-table__head, .cmp-table__row {
  display:grid; grid-template-columns:1.3fr .9fr 1.4fr .8fr .8fr .7fr .8fr .9fr 1.6fr;
  min-width:820px;
}
.cmp-table__head { background:var(--ink-900); color:#fff; }
.cmp-table__head > div { padding:9px 10px; font-size:.64rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.cmp-table__row { border-top:1px solid var(--line-soft); font-size:.78rem; color:var(--fg-soft); }
.cmp-table__row:nth-child(even) { background:var(--paper-warm); }
.cmp-table__row > div { padding:8px 10px; }
.cmp-table__row .name { font-weight:800; color:var(--ink-900); font-family:var(--grotesk); font-size:.8rem; }

/* ---------- MATRIZ DE IMPACTO (página ¿Por qué Era?) ---------- */
.impact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
@media (max-width:760px){ .impact-grid { grid-template-columns:1fr; } }
.impact-card { background:#fff; padding:clamp(24px,3vw,34px); }
.impact-card__ic { width:52px; height:52px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--orange-600); border:1.6px solid var(--orange-300); background:var(--orange-50); margin-bottom:16px; }
.impact-card__ic svg { width:26px; height:26px; }
.impact-card h3 { font-family:var(--grotesk); font-weight:800; font-size:1.1rem; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:4px; }
.impact-card .sub { font-style:italic; color:var(--orange-600); font-family:var(--serif); font-size:.98rem; margin-bottom:10px; }
.impact-card p { font-size:.92rem; }
.impact-card ul { margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.impact-card ul li { font-size:.85rem; color:var(--fg-soft); display:flex; gap:8px; align-items:flex-start; }
.impact-card ul li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--orange-400); flex:none; margin-top:7px; }

/* ---------- RED DE COLABORADORES ---------- */
.colab-map-wrap { margin-top:8px; margin-bottom:34px; }
.colab-search {
  display:flex; align-items:center; gap:10px; background:#fff; border:1.6px solid var(--ink-200); border-radius:var(--radius);
  padding:.7em 1em; margin-bottom:16px; max-width:420px; transition:border-color var(--dur);
}
.colab-search:focus-within { border-color:var(--orange-400); }
.colab-search__ic { color:var(--fg-mut); flex:none; display:flex; }
.colab-search input { border:none; outline:none; flex:1; background:transparent; font-size:.92rem; color:var(--ink-900); }
.colab-map { height:min(56vw,420px); min-height:280px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--kraft); z-index:0; }
.colab-legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
.colab-legend span { display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:var(--fg-soft); }
.colab-legend i { width:11px; height:11px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(22,18,16,.3); }
.colab-pin span {
  display:block; width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(22,18,16,.35);
}
.leaflet-popup-content { font-family:var(--grotesk); font-size:.85rem; line-height:1.5; }
.leaflet-popup-content a { color:var(--orange-600); font-weight:700; }

.colab-group { scroll-margin-top:90px; }
.colab-group + .colab-group { margin-top:28px; }
.colab-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.colab-card {
  flex:0 0 254px; width:254px; border:1px solid var(--ink-200); border-radius:var(--radius);
  padding:14px 16px; background:#fff; cursor:pointer; transition:border-color var(--dur), transform var(--dur);
}
@media (max-width:560px){ .colab-card { flex-basis:100%; width:100%; } }
.colab-card:hover { border-color:var(--orange-400); transform:translateY(-2px); }
.colab-card__name { font-family:var(--grotesk); font-weight:800; font-size:.9rem; letter-spacing:-.01em; }
.colab-card__loc { font-size:.8rem; color:var(--fg-mut); margin-top:2px; }
.colab-card__venta { font-size:.76rem; font-style:italic; color:var(--orange-700); margin-top:5px; }
.colab-card__links { display:flex; gap:8px; margin-top:10px; }
.colab-card__links a { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--radius); border:1.4px solid var(--orange-300); color:var(--orange-600); transition:all var(--dur); }
.colab-card__links a:hover { background:var(--orange-50); }

/* ---------- UTIL / ANIM ---------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}
.hidden { display:none !important; }
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:2.5rem}
.gap-btns{ display:flex; gap:12px; flex-wrap:wrap; }