/* ============================================================
   CRYZMA — Rediseño desde cero · Hoja de estilos
   Fase 1: Fundaciones · Header · Hero · Bloque de confianza
   Paleta: fresca, alegre, premium (crema · azul tinta · coral · blush)
   Vanilla CSS. Sin dependencias. Funciona con file://
   ============================================================ */

/* ── 1. Tokens ──────────────────────────────────────────────── */
:root {
  /* Paleta CRYZMA — catering corporativo fresco, alegre y premium */
  --crema:        #FFF6ED;  /* fondo principal cálido */
  --crema-2:      #FCEADD;  /* crema más profunda para bandas */
  --blanco:       #FFFFFF;  /* cards, formularios, catálogo */
  --blush:        #F7CFC8;  /* fondos suaves, detalles, cards secundarias */
  --blush-soft:   #FCE6E2;  /* blush muy diluido */
  --coral:        #D94F45;  /* CTA principal, precios, acentos de apetito */
  --coral-h:      #C2403A;  /* hover coral */
  --azul:         #123B5D;  /* header, footer, textos fuertes, confianza */
  --azul-2:       #0E2E49;  /* azul más oscuro (top bar) */
  --cielo:        #DDECF7;  /* fondos secundarios frescos, beneficios */
  --cielo-soft:   #EEF6FC;  /* cielo diluido */
  --terracota:    #B96A4A;  /* acentos cálidos, hover, etiquetas */
  --carbon:       #252525;  /* texto principal */
  --gris-calido:  #706A64;  /* texto secundario */

  /* Sistema de fondos por sección — planos, limpios, sin manchas.
     Un solo color de apoyo por sección; alternancia elegante. */
  --bg-marfil:     #FFFBF6;  /* marfil limpio: secciones claras y respiradas */
  --bg-azul-hielo: #EAF4FA;  /* azul hielo suave: secciones informativas/proceso */
  --bg-blush:      #FBE1DD;  /* blush suave: secciones visuales y momentos */
  --bg-crema:      #FFF6ED;  /* crema cálida base */

  /* Bordes cálidos */
  --border:       #F0E1D3;
  --border-2:     #E4D5C6;

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala fluida */
  --fs-xs:    0.78rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.375rem;
  --fs-2xl:   clamp(1.6rem, 3.5vw, 2.1rem);
  --fs-3xl:   clamp(2.1rem, 5vw, 3rem);
  --fs-hero:  clamp(2.5rem, 5.8vw, 4.1rem);

  /* Layout */
  --maxw:        1200px;
  --gutter:      clamp(1.1rem, 4vw, 2.5rem);
  --header-h:    72px;
  --topbar-h:    38px;

  /* Radios */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* Elevación sutil */
  --elev:    0 1px 2px rgba(37,37,37,.04), 0 8px 24px rgba(18,59,93,.07);
  --elev-h:  0 2px 4px rgba(37,37,37,.05), 0 16px 40px rgba(18,59,93,.13);

  /* Transiciones */
  --t-fast: 140ms ease;
  --t-base: 230ms cubic-bezier(.4,.1,.2,1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);  /* easing premium */
}

/* ── 2. Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--crema);
  color: var(--carbon);
  font-size: var(--fs-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* ── 3. Tipografía ──────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--azul);
}
.font-display { font-family: var(--font-display); }

/* ── 4. Layout helpers ──────────────────────────────────────── */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--coral); border-radius: 2px;
}

/* ── 5. Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  transition: transform var(--t-fast), background var(--t-base), color var(--t-base), box-shadow var(--t-base);
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--coral); color: #fff; }
.btn--primary:hover { background: var(--coral-h); transform: translateY(-2px); box-shadow: var(--elev-h); }

.btn--dark { background: var(--azul); color: #fff; }
.btn--dark:hover { background: var(--azul-2); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 1.5px var(--border-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--coral); color: var(--coral); }

.btn--wa { background: #1FA855; color: #fff; }
.btn--wa:hover { background: #18904A; transform: translateY(-2px); }

.btn--sm { padding: 10px 18px; font-size: var(--fs-xs); }
.btn--lg { padding: 17px 30px; font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* ── 6. Top bar ─────────────────────────────────────────────── */
.topbar {
  background: var(--azul-2);
  color: rgba(255,255,255,.82);
  font-size: var(--fs-xs);
  height: var(--topbar-h);
}
.topbar__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar__note { letter-spacing: .01em; }
.topbar__note b { color: var(--blush); font-weight: 600; }
.topbar__wa {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-weight: 700; font-size: var(--fs-xs);
  transition: color var(--t-fast);
}
.topbar__wa:hover { color: var(--blush); }
.topbar__wa svg { color: #4ED27E; }
@media (max-width: 640px) {
  .topbar__note { display: none; }
  .topbar__inner { justify-content: center; }
}

/* ── 7. Header ──────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--azul);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-base), background var(--t-base);
}
.header.scrolled { box-shadow: 0 6px 26px rgba(18,59,93,.22); }
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1;
}
.logo b { color: var(--coral); font-weight: 600; }
/* Logo real (imagen). Reemplaza el texto de relleno. Blanco sobre header/footer oscuros. */
.logo img { height: 34px; width: auto; display: block; }
@media (max-width: 480px) { .logo img { height: 30px; } }
.logo small {
  display: block;
  font-family: var(--font-body);
  font-size: .56rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
  font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 30px; margin-left: 14px; }
.nav a {
  font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.82);
  position: relative; padding: 4px 0; transition: color var(--t-base);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--coral); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .42s var(--ease-out);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(.55); }
/* Indicador de página activa */
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"]:hover::after { transform: scaleX(1); }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.req-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 700; color: #fff;
  padding: 11px 16px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
  transition: box-shadow var(--t-base), background var(--t-fast);
}
.req-btn:hover { box-shadow: inset 0 0 0 1.5px var(--coral); background: rgba(255,255,255,.08); }
.req-btn__count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--coral); color: #fff; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 800;
}
.req-btn__count[hidden] { display: none; }

.hamburger { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); }
.hamburger span {
  display: block; width: 22px; height: 2px; background: #fff;
  margin: 4px auto; border-radius: 2px; transition: transform var(--t-base), opacity var(--t-fast);
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--crema);
  padding: calc(var(--header-h) + var(--topbar-h) + 24px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%); transition: transform var(--t-base);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--azul);
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.mobile-menu .btn { margin-top: 20px; }

/* ── 8. Hero ────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -130px; right: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle, var(--blush-soft) 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; bottom: -90px; left: -110px; width: 360px; height: 360px;
  background: radial-gradient(circle, var(--cielo-soft) 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__content { max-width: 560px; }
.hero h1 {
  font-size: var(--fs-hero);
  margin: 18px 0 0;
}
.hero h1 em { font-style: italic; color: var(--coral); }
.hero__desc {
  font-size: var(--fs-lg); color: var(--gris-calido); margin-top: 20px; max-width: 52ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__badges {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 32px;
  padding-top: 26px; border-top: 1px solid var(--border);
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--azul);
}
.hero__badge svg { color: var(--coral); flex: none; }

/* ── 8b. Hero visual — collage editorial de 3 cards ─────────── */
.hero__visual { position: relative; }
.hero__visual::before {
  content: ""; position: absolute; inset: -18px -14px -22px -18px; z-index: 0;
  background: var(--blush); border-radius: var(--r-xl);
  transform: rotate(-2.2deg); opacity: .55;
}
.hero__collage {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.hcard {
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.hcard:hover { transform: translateY(-4px); box-shadow: var(--elev-h); }
.hcard--main { grid-column: 1 / -1; }

.hcard__img {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: end start; padding: 12px;
  color: var(--azul);
}
.hcard--main .hcard__img { aspect-ratio: 3 / 2; }
.hcard__img--cielo  { background: linear-gradient(150deg, var(--cielo) 0%, #CFE4F4 100%); }
.hcard__img--blush  { background: linear-gradient(150deg, var(--blush) 0%, #F2BDB4 100%); color: var(--terracota); }
.hcard__img--coral  { background: linear-gradient(150deg, #F6C9BE 0%, #ECA493 100%); color: var(--coral-h); }
.hcard__watermark {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(68px, 36%, 110px); height: auto; z-index: 0;
  opacity: .14; pointer-events: none;
}
.hcard__imgtag {
  position: relative; z-index: 1;
  font-size: .66rem; font-weight: 700; letter-spacing: .03em;
  background: rgba(255,255,255,.82); color: var(--azul);
  padding: 5px 9px; border-radius: var(--r-pill);
}
.hcard__flag {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--coral); color: #fff; padding: 5px 10px; border-radius: var(--r-pill);
}
.hcard__body { padding: 12px 14px 14px; }
.hcard__cat {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--terracota); text-transform: uppercase;
}
.hcard__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--azul); margin-top: 2px; line-height: 1.15;
}
.hcard--main .hcard__name { font-size: 1.3rem; }
.hcard__price {
  margin-top: 8px; font-weight: 800; font-size: var(--fs-sm); color: var(--coral);
}
.hcard__price small { color: var(--gris-calido); font-weight: 600; }

/* Dato de confianza discreto bajo el collage — ya no flota sobre las cards */
.hero__proof {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 9px; width: fit-content;
  margin: 16px auto 0; padding: 9px 15px;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-pill); box-shadow: var(--elev);
  font-size: var(--fs-sm); color: var(--gris-calido);
}
.hero__proof svg { color: var(--coral); flex: none; }
.hero__proof b { color: var(--azul); font-weight: 700; }

/* ── 8c. Secciones genéricas ────────────────────────────────── */
.section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section h2 { font-size: var(--fs-3xl); margin-top: 12px; }
.section-cta {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.section-cta--left { justify-content: flex-start; margin-top: 8px; }

/* Intro "Qué hacemos" — texto + collage visual de placeholders */
.intro { background: var(--bg-marfil); padding-top: clamp(3rem, 7vw, 5rem); }
.intro__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.intro__text h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin-top: 14px; max-width: 16ch; }
.intro__lede { font-size: var(--fs-lg); color: var(--gris-calido); margin-top: 18px; }
.intro__points { display: grid; gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.intro__points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-weight: 600; color: var(--azul); font-size: var(--fs-base);
}
.intro__points svg { flex: none; margin-top: 3px; color: var(--coral); }

/* Collage de placeholders: 1 grande arriba + 2 medianos abajo */
.intro__collage {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 14px);
}
.intro__shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  box-shadow: var(--elev); aspect-ratio: 1 / 1;
}
.intro__shot--main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.intro__shot--cielo { background: linear-gradient(150deg, var(--cielo) 0%, #CFE4F4 100%); }
.intro__shot--blush { background: linear-gradient(150deg, var(--blush) 0%, #F2BDB4 100%); }
.intro__shot--coral { background: linear-gradient(150deg, #F6C9BE 0%, #ECA493 100%); }
.intro__shottag {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  background: rgba(255,255,255,.85); color: var(--azul);
  padding: 4px 9px; border-radius: var(--r-pill);
}

/* Soluciones para empresas */
.solutions { background: var(--crema-2); }
.solutions__head { max-width: 680px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.solutions__head h2 { font-size: var(--fs-3xl); margin-top: 12px; }
.solutions__head p { color: var(--gris-calido); font-size: var(--fs-lg); margin-top: 14px; }
.solutions__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 20px);
}
.solution {
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 2.6vw, 1.7rem);
  box-shadow: var(--elev); transition: transform var(--t-base), box-shadow var(--t-base);
}
.solution:hover { transform: translateY(-4px); box-shadow: var(--elev-h); }
.solution__icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--r-md);
  background: var(--cielo); color: var(--azul); margin-bottom: 14px;
  transition: transform .4s var(--ease-out), background var(--t-base);
}
.solution:hover .solution__icon { transform: scale(1.08) rotate(-3deg); }
.solution h3 { font-size: 1.15rem; color: var(--azul); }
.solution p { color: var(--gris-calido); font-size: var(--fs-sm); margin-top: 7px; }
.solution--cta { background: var(--azul); border-color: var(--azul); }
.solution--cta h3 { color: #fff; }
.solution--cta p { color: rgba(255,255,255,.8); }
.solution__link {
  margin-top: auto; padding-top: 14px; font-weight: 700; font-size: var(--fs-sm); color: var(--blush);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Elige por tipo de ocasión — entrada visual por necesidad */
.occasions { background: var(--bg-blush); }
.occasions__head { max-width: 640px; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.occasions__head h2 { font-size: var(--fs-3xl); margin-top: 12px; }
.occasions__head p { color: var(--gris-calido); font-size: var(--fs-lg); margin-top: 14px; }
.occasions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px); }
.occasion {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--elev);
}
.occasion__ph {
  position: relative; display: block; aspect-ratio: 16 / 9;
}
/* Gradiente en el elemento real (no en ::before) para que el zoom se vea */
.occasion__ph--cielo { background: linear-gradient(150deg, var(--cielo) 0%, #CFE4F4 100%); }
.occasion__ph--blush { background: linear-gradient(150deg, var(--blush) 0%, #F2BDB4 100%); }
.occasion__ph--coral { background: linear-gradient(150deg, #F6C9BE 0%, #ECA493 100%); }
.occasion__ph--azul  { background: linear-gradient(150deg, var(--azul) 0%, var(--azul-2) 100%); }
.occasion__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  background: rgba(255,255,255,.85); color: var(--azul);
  padding: 4px 9px; border-radius: var(--r-pill);
}
/* Foto real: <img class="occasion__img"> dentro de .occasion__ph se recorta
   sin deformar y llena el área de imagen completa. */
.occasion__ph img,
.occasion__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.occasion__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.occasion__body h3 { font-size: 1.2rem; color: var(--azul); }
.occasion__body p { color: var(--gris-calido); font-size: var(--fs-sm); margin: 7px 0 14px; }
.occasion__cta {
  margin-top: auto; font-weight: 700; font-size: var(--fs-sm); color: var(--coral);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── Elige por ocasión: mosaico editorial de formas variadas ─────
   3 columnas. Cada tarjeta define la proporción de su foto según su
   orientación (sin recortes agresivos):
     · Junta  → .occasion--wide  : ancha (2 columnas), foto 16/9 apaisada.
     · Coffee → .occasion--tall  : alta (2 filas),     foto 4/5 vertical.
     · Capacitación / Comida     : normales,           foto 3/2 apaisada.
     · Pedido urgente → .occasion--urgent : franja CTA a todo lo ancho.
   El orden del HTML hace que embonen sin huecos. */
.occasions__grid--mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 20px);
  align-items: stretch;
}
.occasions__grid--mosaic .occasion__ph { aspect-ratio: 3 / 2; }
.occasions__grid--mosaic .occasion__body { padding: 15px 17px 16px; }
.occasions__grid--mosaic .occasion__body p { margin: 6px 0 12px; }
.occasions__grid--mosaic > .occasion--wide { grid-column: span 2; }
.occasions__grid--mosaic > .occasion--wide .occasion__ph { aspect-ratio: 16 / 9; }
.occasions__grid--mosaic > .occasion--tall { grid-row: span 2; }
.occasions__grid--mosaic > .occasion--tall .occasion__ph { aspect-ratio: 4 / 5; flex: 1 1 auto; min-height: 0; }
.occasions__grid--mosaic > .occasion--urgent { grid-column: 1 / -1; }
.occasion--urgent .occasion__ph { aspect-ratio: auto; }

/* Móvil: una sola columna, sin spans (evita huecos en pantallas chicas). */
@media (max-width: 700px) {
  .occasions__grid--mosaic { grid-template-columns: 1fr; }
  .occasions__grid--mosaic > .occasion--wide { grid-column: auto; }
  .occasions__grid--mosaic > .occasion--tall { grid-row: auto; }
  .occasions__grid--mosaic > .occasion--wide .occasion__ph,
  .occasions__grid--mosaic > .occasion--tall .occasion__ph { aspect-ratio: 3 / 2; }
}

/* Card "Pedido urgente · 12 h": franja CTA horizontal (visual lateral + texto). */
.occasion--urgent { flex-direction: row; align-items: stretch; }
.occasion--urgent .occasion__ph { flex: 0 0 34%; align-self: stretch; min-height: 172px; }
.occasion--urgent .occasion__body {
  flex: 1 1 auto; justify-content: center;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 40px);
}
.occasion--urgent .occasion__body h3 { font-size: 1.5rem; }
.occasion--urgent .occasion__body p { max-width: 58ch; }

/* Productos destacados — vitrina premium con pedido rápido */
.featured { background: var(--bg-marfil); }
.featured__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}
.featured__head h2 { font-size: var(--fs-3xl); margin-top: 12px; }
.featured__all { flex: none; }
.featured__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 20px); }
.fprod {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--elev);
}
.fprod__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.fprod__ph { position: absolute; inset: 0; display: block; }
.fprod__ph--cielo { background: linear-gradient(150deg, var(--cielo) 0%, #CFE4F4 100%); }
.fprod__ph--blush { background: linear-gradient(150deg, var(--blush) 0%, #F2BDB4 100%); }
.fprod__ph--coral { background: linear-gradient(150deg, #F6C9BE 0%, #ECA493 100%); }
.fprod__tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  font-size: .64rem; font-weight: 700; background: rgba(255,255,255,.85); color: var(--azul);
  padding: 4px 8px; border-radius: var(--r-pill);
}
.fprod__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.fprod__cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--terracota); }
.fprod__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--azul); margin-top: 3px; }
.fprod__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fprod__price { font-weight: 800; color: var(--coral); font-size: var(--fs-sm); }
.fprod__price small { color: var(--gris-calido); font-weight: 600; }
.fprod__desc { color: var(--gris-calido); font-size: var(--fs-sm); margin-top: 7px; }
.fprod__flag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--coral); color: #fff; padding: 4px 9px; border-radius: var(--r-pill);
}

/* Vitrina uniforme del Home: 4 tarjetas del mismo tamaño, foto vertical 4/5
   (calza con las fotos de producto 720x900 sin recorte). Reemplaza la vitrina
   "1 grande + 3" que hacía una tarjeta gigantesca. */
.featured__grid--uniform { grid-template-columns: repeat(4, 1fr); }
.featured__grid--uniform .fprod__img { aspect-ratio: 4 / 5; }
@media (max-width: 980px) { .featured__grid--uniform { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .featured__grid--uniform { grid-template-columns: 1fr; } }

/* Vitrina: 1 producto destacado grande + 3 secundarios compactos */
.featured__grid--vitrina {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
.fprod--lg { grid-column: 1; grid-row: 1 / 4; }
/* Foto vertical 4/5 para calzar las fotos de producto (720x900) sin recorte. */
.fprod--lg .fprod__img { aspect-ratio: 4 / 5; flex: none; min-height: 0; }
.fprod--lg .fprod__body { padding: 20px 22px 22px; }
.fprod--lg .fprod__name { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
/* Secundarios: tarjeta horizontal (foto izquierda + datos derecha). La foto
   se centra en su columna con proporción 4/5 para no recortar de más. */
.fprod--row { flex-direction: row; align-items: stretch; }
.fprod--row .fprod__img { aspect-ratio: 4 / 5; width: clamp(116px, 30%, 150px); flex: none; align-self: center; }
.fprod--row .fprod__body { padding: 13px 16px; }
.fprod--row .fprod__name { font-size: 1.08rem; }
.fprod--row .fprod__foot { padding-top: 10px; }

/* Accesos rápidos */
.quick { background: var(--bg-crema); }
.quick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 22px); }
.qcard {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 3vw, 1.8rem);
  box-shadow: var(--elev); transition: transform var(--t-base), box-shadow var(--t-base);
}
.qcard:hover { transform: translateY(-4px); box-shadow: var(--elev-h); }
.qcard__icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--r-md);
  background: var(--cielo); color: var(--azul); margin-bottom: 14px;
}
.qcard--accent .qcard__icon { background: var(--blush); color: var(--coral-h); }
.qcard h3 { font-size: 1.3rem; }
.qcard p { color: var(--gris-calido); font-size: var(--fs-sm); margin: 8px 0 14px; }
.qcard__link { margin-top: auto; font-weight: 700; font-size: var(--fs-sm); color: var(--coral); }

/* Beneficios — banda compacta y elegante (no pesada) */
.benefits { background: var(--bg-azul-hielo); padding: clamp(2rem, 4.5vw, 3.4rem) 0; }
.benefits__head { text-align: center; max-width: 620px; margin: 0 auto clamp(1.4rem, 3.4vw, 2.1rem); }
.benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 18px); }
.benefit {
  display: grid; grid-template-columns: 42px 1fr; column-gap: 13px; align-items: start;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 17px;
}
.benefit__icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--blush-soft); color: var(--coral); margin-bottom: 0; grid-row: 1 / span 2;
}
.benefit h3 { font-size: 1.02rem; align-self: center; }
.benefit p { color: var(--gris-calido); font-size: var(--fs-sm); margin-top: 4px; grid-column: 2; }
/* Microinteracción al pasar el mouse: elevación sutil + borde de acento y el
   ícono se "rellena" de coral. Sin sombras genéricas (elevación por translateY). */
.benefit__icon { transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out); }
.benefit:hover { transform: translateY(-4px); border-color: var(--coral); box-shadow: var(--elev-h); }
.benefit:hover .benefit__icon { transform: scale(1.08) rotate(-3deg); background: var(--coral); color: #fff; }

/* Momentos CRYZMA — galería editorial de placeholders */
.moments { background: var(--bg-crema); }
.moments__head { max-width: 640px; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.moments__head h2 { font-size: var(--fs-3xl); margin-top: 12px; }
.moments__head p { color: var(--gris-calido); font-size: var(--fs-lg); margin-top: 14px; }
.moments__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(118px, 17vw, 196px);
  gap: clamp(10px, 1.6vw, 16px);
}
.moment {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  box-shadow: var(--elev);
}
.moment--lg { grid-column: span 2; grid-row: span 2; }
.moment__ph {
  position: absolute; inset: 0; display: block;
}
.moment__ph--cielo { background: linear-gradient(150deg, var(--cielo) 0%, #CFE4F4 100%); }
.moment__ph--blush { background: linear-gradient(150deg, var(--blush) 0%, #F2BDB4 100%); }
.moment__ph--coral { background: linear-gradient(150deg, #F6C9BE 0%, #ECA493 100%); }
.moment__ph--azul  { background: linear-gradient(150deg, var(--azul) 0%, var(--azul-2) 100%); }
.moment__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  font-size: .66rem; font-weight: 700; letter-spacing: .03em;
  background: rgba(255,255,255,.85); color: var(--azul);
  padding: 5px 10px; border-radius: var(--r-pill);
}

/* Galería editorial: 1 grande horizontal + 2 medianos + 3 pequeños */
.moments__grid--editorial {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 19vw, 244px);
  grid-template-areas:
    "big big big big md1 md1"
    "big big big big md2 md2"
    "sm1 sm1 sm2 sm2 sm3 sm3";
}
.moments__grid--editorial > :nth-child(1) { grid-area: big; }
.moments__grid--editorial > :nth-child(2) { grid-area: md1; }
.moments__grid--editorial > :nth-child(3) { grid-area: md2; }
.moments__grid--editorial > :nth-child(4) { grid-area: sm1; }
.moments__grid--editorial > :nth-child(5) { grid-area: sm2; }
.moments__grid--editorial > :nth-child(6) { grid-area: sm3; }

/* Preview cómo funciona — separación limpia respecto al bloque anterior */
.howto-preview { background: var(--azul); color: #fff; border-radius: 0; margin-top: clamp(1rem, 3vw, 2.2rem); }
.howto-preview__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.howto-preview h2 { color: #fff; font-size: var(--fs-3xl); margin: 12px 0 14px; }
.howto-preview .eyebrow { color: var(--blush); }
.howto-preview .eyebrow::before { background: var(--blush); }
.howto-preview__text p { color: rgba(255,255,255,.8); margin-bottom: 24px; }
/* Flujo guiado: número + ícono + texto, conectados por flecha animada abajo. */
.steps-mini { display: grid; gap: clamp(28px, 4vw, 36px); counter-reset: step; margin: 0; padding: 0; }
.steps-mini li {
  position: relative; counter-increment: step;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md); padding: 14px 18px 14px 16px; font-weight: 600;
  transition: transform .4s var(--ease-out), background var(--t-base), border-color var(--t-base);
}
.steps-mini li:hover { transform: translateX(4px); background: rgba(255,255,255,.1); border-color: rgba(247,207,200,.4); }
/* Número del paso */
.steps-mini li::before {
  content: counter(step); flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral); color: #fff; font-size: .82rem; font-weight: 800;
}
/* Flecha animada hacia abajo entre pasos */
.steps-mini li:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; z-index: 1;
  bottom: calc(-1 * (clamp(28px, 4vw, 36px) / 2) - 6px);
  width: 12px; height: 12px;
  border-right: 3px solid var(--blush); border-bottom: 3px solid var(--blush);
  transform: translate(-50%, 0) rotate(45deg);
  animation: procArrow 1.5s ease-in-out infinite;
}
.steps-mini__ic {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: var(--r-md); background: rgba(247,207,200,.16); color: var(--blush);
  transition: transform .4s var(--ease-out), background var(--t-base);
}
.steps-mini li:hover .steps-mini__ic { transform: scale(1.08); background: var(--coral); color: #fff; }
.steps-mini__tx { line-height: 1.35; }
.steps-mini__tx b { color: #fff; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .steps-mini li:not(:last-child)::after { animation: none; opacity: .7; }
}

/* Testimonios — prueba social premium y corporativa */
.testimonials { background: var(--bg-azul-hielo); }
.testimonials__head { max-width: 700px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); text-align: center; }
.testimonials__head h2 { font-size: var(--fs-3xl); margin-top: 12px; }
.testimonials__head p { color: var(--gris-calido); font-size: var(--fs-lg); margin-top: 14px; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 22px); }
.tcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 2.8vw, 1.9rem);
  box-shadow: var(--elev);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--elev-h); }
.tcard__quote {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 2.6rem; line-height: 1; color: var(--coral); margin-bottom: 6px;
}
.tcard__text { color: var(--carbon); font-size: var(--fs-base); line-height: 1.6; }
/* Estrellas de reseña (rating) */
.tcard__stars { display: flex; gap: 2px; margin-bottom: 12px; font-size: 1.05rem; line-height: 1; }
.tstar { color: var(--border); }
.tstar.is-on { color: #F4B400; }
.tcard__foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tcard__who { display: flex; flex-direction: column; gap: 3px; }
.tcard__name { font-weight: 700; color: var(--azul); font-size: var(--fs-sm); }
.tcard__org { color: var(--gris-calido); font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 5px; }
.tcard__g { flex: none; vertical-align: middle; }
.tcard__badge {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  background: var(--blush-soft); color: var(--coral-h);
  padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.testimonials__foot {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.testimonials__note {
  text-align: center; color: var(--gris-calido); font-size: var(--fs-xs);
  font-style: italic; opacity: .8; margin: 0;
}

/* CTA final */
.cta-final { background: var(--bg-blush); }
.cta-final__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.cta-final h2 { font-size: var(--fs-3xl); }
.cta-final p { color: var(--gris-calido); font-size: var(--fs-lg); margin-top: 12px; }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* ── Page hero (páginas internas) ───────────────────────────── */
.page-hero {
  background: var(--bg-marfil);
  padding: clamp(2.4rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--border);
}
/* Cómo funciona: alternancia azul hielo / crema */
body[data-page="como-funciona"] .page-hero { background: var(--bg-azul-hielo); }
/* Contacto: página marfil limpia con cards blancas */
body[data-page="contacto"] .section { background: var(--bg-marfil); }
/* Tienda: base marfil tipo vitrina, cards blancas */
.catalog { background: var(--bg-marfil); }
.page-hero h1 { font-size: var(--fs-3xl); margin: 14px 0 0; max-width: 16ch; }
.page-hero p { font-size: var(--fs-lg); color: var(--gris-calido); margin-top: 16px; max-width: 60ch; }

/* ── Servicios ──────────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 22px); }
.svc {
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 1.9rem); box-shadow: var(--elev);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--elev-h); }
.svc__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--cielo); color: var(--azul); margin-bottom: 14px;
}
.svc h3 { font-size: 1.25rem; }
.svc p { color: var(--gris-calido); font-size: var(--fs-sm); margin: 8px 0 14px; }
.svc__price { font-weight: 800; color: var(--coral); font-size: var(--fs-base); }
.svc__price small { color: var(--gris-calido); font-weight: 600; }

/* ── Catálogo ───────────────────────────────────────────────── */
.cat-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.cat-filter {
  font-size: var(--fs-sm); font-weight: 600; color: var(--azul);
  padding: 9px 18px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--border-2); transition: all var(--t-fast);
}
.cat-filter:hover { box-shadow: inset 0 0 0 1.5px var(--coral); color: var(--coral); }
.cat-filter.is-active { background: var(--azul); color: #fff; box-shadow: none; }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 20px); }
.prod {
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev);
  display: flex; flex-direction: column; transition: transform var(--t-base), box-shadow var(--t-base);
}
.prod:hover { transform: translateY(-4px); box-shadow: var(--elev-h); }
.prod__img {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; display: grid; place-items: end start; padding: 10px;
}
.prod__img--cielo { background: linear-gradient(150deg, var(--cielo) 0%, #CFE4F4 100%); }
.prod__img--blush { background: linear-gradient(150deg, var(--blush) 0%, #F2BDB4 100%); }
.prod__img--coral { background: linear-gradient(150deg, #F6C9BE 0%, #ECA493 100%); }
/* Foto real opcional: <img class="prod__photo"> llena el área sin deformar.
   Solo se renderiza si CRYZMA_SHOW_PRODUCT_IMAGES = true en data/products.js. */
.prod__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.prod__imgtag {
  position: relative; z-index: 1;
  font-size: .64rem; font-weight: 700; background: rgba(255,255,255,.82); color: var(--azul);
  padding: 4px 8px; border-radius: var(--r-pill);
}
.prod__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.prod__cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--terracota); }
.prod__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--azul); margin-top: 3px; }
.prod__desc { font-size: var(--fs-sm); color: var(--gris-calido); margin: 8px 0 14px; }
.prod__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prod__price { font-weight: 800; color: var(--coral); font-size: var(--fs-sm); }
.prod__price small { color: var(--gris-calido); font-weight: 600; }
.btn.is-added { background: #1FA855; }
/* Bloque informativo discreto (guarniciones/postres CRYZMA Daily). Solo info. */
.daily-info {
  background: var(--bg-marfil, #FFFBF6); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 18px; margin-bottom: clamp(1.1rem, 3vw, 1.6rem); color: var(--carbon);
}
.daily-info > summary {
  cursor: pointer; font-weight: 700; color: var(--azul); font-size: var(--fs-sm);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.daily-info > summary::-webkit-details-marker { display: none; }
.daily-info > summary::before { content: "+"; color: var(--coral); font-weight: 800; }
.daily-info[open] > summary::before { content: "–"; }
.daily-info__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin-top: 12px; }
.daily-info__grid h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--terracota); margin-bottom: 4px; }
.daily-info__grid ul { list-style: none; }
.daily-info__grid li { color: var(--gris-calido); font-size: var(--fs-sm); padding: 1px 0; }

.catalog__note { text-align: center; color: var(--gris-calido); margin-top: clamp(2rem, 4vw, 3rem); }
.catalog__note a { color: var(--coral); font-weight: 700; }

/* Contexto por ocasión: bloque discreto sobre los filtros de la Tienda. */
.occ-context {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  background: var(--blanco); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--elev); padding: 14px 18px;
  margin-bottom: clamp(1.1rem, 3vw, 1.6rem);
}
.occ-context__txt { display: flex; flex-direction: column; gap: 3px; }
.occ-context__label { font-weight: 700; color: var(--azul); font-size: var(--fs-base); }
.occ-context__label b { color: var(--coral); }
.occ-context__sub { color: var(--gris-calido); font-size: var(--fs-sm); }
.occ-context__clear {
  flex: none; cursor: pointer; font: inherit; font-weight: 700; font-size: var(--fs-sm);
  color: var(--azul); background: transparent; border: 1px solid var(--border-2);
  padding: 9px 16px; border-radius: var(--r-pill);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.occ-context__clear:hover { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Estado vacío del catálogo (red de seguridad si una ocasión no tiene match). */
.catalog-empty {
  grid-column: 1 / -1; text-align: center; color: var(--gris-calido);
  font-size: var(--fs-base); padding: clamp(28px, 6vw, 56px) 20px;
}
.catalog-empty a { color: var(--coral); font-weight: 700; }

/* ── Cómo funciona (página) ─────────────────────────────────── */
.steps { display: grid; gap: 16px; max-width: 760px; }
.step { display: flex; gap: 18px; align-items: flex-start;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.2rem, 3vw, 1.6rem); box-shadow: var(--elev); }
.step__num {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--coral); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
}
.step__body h3 { font-size: 1.2rem; }
.step__body p { color: var(--gris-calido); font-size: var(--fs-sm); margin-top: 6px; }

/* Flujo guiado vertical (4 pasos): tarjeta por paso (ícono + texto) conectada
   por una flecha animada hacia abajo. Cada paso entra con scroll (.reveal). */
.process {
  list-style: none; position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(40px, 6vw, 58px);
  max-width: 640px; margin: clamp(1.4rem, 4vw, 2.4rem) auto 0;
}
.process__step {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; row-gap: 2px;
  align-items: center; text-align: left;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 22px; box-shadow: var(--elev);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.process__step:hover { transform: translateY(-4px); box-shadow: var(--elev-h); border-color: var(--coral); }
/* Flecha animada hacia abajo entre pasos */
.process__step:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; z-index: 1;
  bottom: calc(-1 * (clamp(40px, 6vw, 58px) / 2) - 8px);
  width: 16px; height: 16px;
  border-right: 3px solid var(--coral); border-bottom: 3px solid var(--coral);
  transform: translate(-50%, 0) rotate(45deg);
  animation: procArrow 1.5s ease-in-out infinite;
}
@keyframes procArrow {
  0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: .55; }
  50%      { transform: translate(-50%, 7px) rotate(45deg); opacity: 1; }
}
.process__icon {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: var(--r-lg); background: var(--cielo); color: var(--azul);
  transition: transform .45s var(--ease-out), background var(--t-base), color var(--t-base);
}
.process__step:hover .process__icon { transform: scale(1.06); background: var(--azul); color: #fff; }
.process__index {
  grid-column: 2; grid-row: 1; margin: 0;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--coral);
}
.process__body { grid-column: 2; grid-row: 2; }
.process__body h3 { font-size: 1.18rem; color: var(--azul); margin-top: 2px; }
.process__body p { color: var(--gris-calido); font-size: var(--fs-sm); margin-top: 5px; max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .process__step:not(:last-child)::after { animation: none; opacity: .7; }
}

/* Después de enviar tu solicitud (bloque editorial + mockup) */
.after-send { background: var(--bg-azul-hielo); }
.after-send__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.after-send__text h2 { font-size: var(--fs-2xl); margin: 12px 0 12px; }
.after-send__text > p { color: var(--gris-calido); font-size: var(--fs-lg); margin-bottom: 22px; }
.after-send__list { display: grid; gap: 16px; }
.after-send__list li { display: flex; align-items: flex-start; gap: 14px; }
.after-send__ic {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--r-md); background: var(--blush-soft); color: var(--coral);
}
.after-send__list b { display: block; color: var(--azul); font-size: var(--fs-base); }
.after-send__list span { color: var(--gris-calido); font-size: var(--fs-sm); }

.mockup {
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow: var(--elev-h); max-width: 380px; margin: 0 auto;
}
.mockup__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.mockup__head strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--azul); }
.mockup__head span { font-size: var(--fs-xs); color: var(--gris-calido); }
.mockup__badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; font-size: var(--fs-sm); }
.mockup__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.mockup__cat { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--terracota); }
.mockup__name { display: block; font-weight: 600; color: var(--azul); font-size: var(--fs-sm); margin-top: 2px; }
.mockup__sub { font-weight: 800; color: var(--azul); font-size: var(--fs-sm); }
.mockup__total { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 4px; }
.mockup__total span { color: var(--gris-calido); font-size: var(--fs-sm); }
.mockup__total b { font-size: 1.3rem; color: var(--coral); }
.mockup__send {
  margin-top: 14px; text-align: center; font-weight: 700; font-size: var(--fs-sm);
  background: #1FA855; color: #fff; padding: 12px; border-radius: var(--r-pill);
}

.faq { max-width: 760px; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.faq h2 { font-size: var(--fs-2xl); margin-bottom: 16px; }
.faq__item {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--blanco); padding: 4px 18px; margin-bottom: 10px;
}
.faq__item summary {
  list-style: none; cursor: pointer; font-weight: 700; color: var(--azul);
  padding: 14px 0; display: flex; justify-content: space-between; align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.4rem; color: var(--coral); font-weight: 400; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { color: var(--gris-calido); font-size: var(--fs-sm); padding-bottom: 16px; }

/* ── Cotizar (formulario) ───────────────────────────────────── */
.quote { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.quote__form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3.5vw, 2.2rem); box-shadow: var(--elev);
}
.field { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--azul); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--carbon); background: var(--crema);
  border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color var(--t-fast), background var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--coral); background: var(--blanco);
}
.quote__disc { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--gris-calido); }
.quote__aside { display: grid; gap: 16px; }
.quote__card { background: var(--blanco); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--elev); }
.quote__card h3 { font-size: 1.2rem; }
.quote__card p { color: var(--gris-calido); font-size: var(--fs-sm); margin: 8px 0 16px; }
.quote__card--dark { background: var(--azul); }
.quote__card--dark h3 { color: #fff; }
.quote__card--dark p { color: rgba(255,255,255,.78); }

/* ── Contacto ───────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.contact__info { display: grid; gap: 12px; }
.contact__item {
  display: flex; align-items: center; gap: 14px;
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 18px;
}
.contact__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: var(--r-md); background: var(--cielo); color: var(--azul); }
.contact__item b { display: block; color: var(--azul); }
.contact__item span { font-size: var(--fs-sm); color: var(--gris-calido); }
.contact__map { display: grid; gap: 16px; align-content: start; }
/* Mapa de cobertura: mapa real de Google embebido. Relación estable para que
   no salte el layout; fondo neutro de respaldo mientras carga / si no hay red. */
.map-embed {
  position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 300px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--cielo);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.coverage {
  background: var(--blanco); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(16px, 3vw, 22px);
}
.coverage__title { font-size: var(--fs-lg); color: var(--azul); margin: 0 0 14px; }
/* Tarifa única de envío */
.coverage__ship {
  display: flex; align-items: center; gap: 12px;
  background: var(--cielo); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 14px;
}
.coverage__ship-price { font-family: var(--font-mono, var(--font-ui, inherit)); font-weight: 800; font-size: 1.7rem; color: var(--coral); line-height: 1; flex: none; }
.coverage__ship-txt { font-size: var(--fs-sm); color: var(--azul); }
.coverage__ship-txt b { font-weight: 700; }
.coverage__ship-txt small { color: var(--gris-calido); font-weight: 600; }
.coverage__zones {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.coverage__zones li {
  font-size: var(--fs-sm); font-weight: 600; color: var(--azul);
  background: var(--cielo); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 13px;
}
.coverage__note { font-size: var(--fs-sm); color: var(--gris-calido); margin: 0; }
.coverage__note a { color: var(--coral); font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer { background: var(--azul); color: rgba(255,255,255,.78); padding: clamp(2.6rem, 6vw, 4rem) 0 1.6rem; margin-top: clamp(2rem, 5vw, 3rem); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(1.6rem, 4vw, 2.6rem); }
.footer .logo { color: #fff; }
.footer__brand p { font-size: var(--fs-sm); margin: 14px 0 18px; max-width: 38ch; }
.footer__col h4 { color: #fff; font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.footer__col ul { display: grid; gap: 10px; }
.footer__col li, .footer__col a { font-size: var(--fs-sm); }
.footer__col a:hover { color: var(--blush); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: clamp(2rem, 4vw, 2.6rem); padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs);
}

/* ── Drawer: Mi solicitud ───────────────────────────────────── */
.mobile-menu__req {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--azul);
  padding: 14px 0; border-bottom: 1px solid var(--border); text-align: left; width: 100%;
}
.mobile-menu__req .req-btn__count { background: var(--coral); color: #fff; }
.drawer-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(18,59,93,.4);
  opacity: 0; transition: opacity var(--t-base);
}
.drawer-overlay.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 85;
  width: min(420px, 92vw); background: var(--crema);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t-base);
  box-shadow: -16px 0 48px rgba(18,59,93,.18);
}
.drawer.open { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px; background: var(--azul); color: #fff;
}
.drawer__head h3 { color: #fff; font-size: 1.4rem; }
.drawer__sub { font-size: var(--fs-xs); color: rgba(255,255,255,.72); margin-top: 2px; }
.drawer__close { color: #fff; width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; }
.drawer__close:hover { background: rgba(255,255,255,.12); }
.drawer__body { flex: 1; overflow-y: auto; padding: 14px 18px; display: grid; gap: 10px; align-content: start; }
.drawer__empty { text-align: center; padding: 2.5rem 1rem; color: var(--gris-calido); display: grid; gap: 8px; justify-items: center; }
.drawer__empty svg { color: var(--border-2); }
.drawer__empty p { font-weight: 700; color: var(--azul); font-size: var(--fs-lg); }
.drawer__empty span { font-size: var(--fs-sm); max-width: 30ch; }
.drawer__empty .btn { margin-top: 10px; }

.ditem { background: var(--blanco); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 12px; }
.ditem__top { display: flex; justify-content: space-between; gap: 10px; }
.ditem__cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--terracota); }
.ditem__name { font-family: var(--font-display); font-weight: 600; color: var(--azul); font-size: 1.05rem; }
.ditem__price { font-size: var(--fs-xs); color: var(--coral); font-weight: 700; margin-top: 2px; }
.ditem__price small { color: var(--gris-calido); font-weight: 600; }
.ditem__remove { color: var(--gris-calido); width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.ditem__remove:hover { color: var(--coral); background: var(--blush-soft); }
.ditem__row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border-2); border-radius: var(--r-pill); overflow: hidden; }
.qty__btn { width: 32px; height: 34px; font-size: 1.2rem; color: var(--azul); display: grid; place-items: center; }
.qty__btn:hover { background: var(--cielo-soft); color: var(--coral); }
.qty__input { width: 44px; height: 34px; text-align: center; border: none; border-inline: 1.5px solid var(--border-2); font: inherit; font-weight: 700; color: var(--azul); -moz-appearance: textfield; background: var(--blanco); }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ditem__sub { font-weight: 800; color: var(--azul); }
.ditem__note { width: 100%; margin-top: 10px; font: inherit; font-size: var(--fs-sm); padding: 9px 12px; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); background: var(--crema); }
.ditem__note:focus { outline: none; border-color: var(--coral); background: var(--blanco); }

/* Pie del cajón COMPACTO: deja el máximo espacio para ver los productos. */
.drawer__foot { padding: 11px 18px 13px; border-top: 1px solid var(--border); background: var(--crema-2); display: grid; gap: 7px; }
.drawer__foot:empty { display: none; }
.drawer__gnote { display: grid; gap: 4px; }
.drawer__gnote span { font-size: var(--fs-xs); font-weight: 700; color: var(--azul); }
.drawer__gnote textarea { font: inherit; font-size: var(--fs-sm); padding: 8px 11px; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); background: var(--blanco); resize: vertical; }
.drawer__gnote textarea:focus { outline: none; border-color: var(--coral); }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); }
.drawer__total b { font-family: var(--font-display); font-size: 1.2rem; color: var(--coral); }
.drawer__disc { font-size: 10.5px; line-height: 1.3; color: var(--gris-calido); margin: 0; }
/* Desglose de cobro (subtotal, IVA, envío, total) — líneas finas */
.drawer__summary { display: grid; gap: 2px; padding-bottom: 0; }
.drawer__line { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); color: var(--gris-calido); }
.drawer__line b { color: var(--azul); font-weight: 700; }
.drawer__summary .drawer__total { margin-top: 3px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--azul); font-weight: 700; }
/* Total plegable (compacto): muestra solo el Total; el desglose se despliega. */
.drawer__det { margin: 0; }
.drawer__totrow { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--azul); padding: 1px 0; }
.drawer__totrow::-webkit-details-marker { display: none; }
.drawer__totrow b { font-family: var(--font-display); font-size: 1.25rem; color: var(--coral); }
.drawer__detx { font-size: var(--fs-xs); font-weight: 600; color: var(--coral); opacity: .85; }
.drawer__detx::after { content: ' \25BE'; }
.drawer__det[open] .drawer__detx::after { content: ' \25B4'; }
.drawer__lines { display: grid; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
/* Botones del pie más bajos (menos alto = más espacio para productos) */
.drawer__foot .btn--block { padding: 10px 14px; font-size: var(--fs-sm); }
.drawer__foot .btn--block svg { width: 15px; height: 15px; }
/* Fila secundaria: enlace WhatsApp + vaciar (ahorra alto vs 2º botón grande) */
.drawer__alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer__link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; color: var(--verde, #1FA855); padding: 3px 2px; }
.drawer__link:hover { text-decoration: underline; }
.drawer__link svg { flex: none; }
/* Checkout (datos de entrega dentro del drawer) */
/* ── Página de checkout completa (checkout.html) ─────────────── */
.co__back { display: inline-block; font-size: var(--fs-sm); font-weight: 700; color: var(--coral); margin-bottom: 18px; }
.co__back:hover { text-decoration: underline; }
.co { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 4vw, 40px); align-items: start; }
.co__h { font-size: 1.25rem; color: var(--azul); margin: 0 0 16px; }
/* Formulario de entrega */
.co__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.co__field { display: grid; gap: 6px; align-content: start; }
.co__field--full { grid-column: 1 / -1; }
.co__field > span { font-size: var(--fs-sm); font-weight: 700; color: var(--azul); }
.co__field input, .co__field select, .co__field textarea {
  font: inherit; font-size: var(--fs-base); color: var(--carbon);
  padding: 12px 14px; border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  background: var(--blanco); width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.co__field input:focus, .co__field select:focus, .co__field textarea:focus {
  outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(216,107,86,.14);
}
.co__field textarea { resize: vertical; }
.co__hint { font-size: var(--fs-xs); color: var(--gris-calido); align-self: end; padding-bottom: 12px; }
/* Resumen del pedido (columna derecha, pegajosa en desktop) */
.co__aside { position: sticky; top: calc(var(--header-h, 72px) + 16px); }
.co__card { background: var(--blanco); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 26px); box-shadow: var(--elev); }
.co__items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; max-height: 320px; overflow-y: auto; }
.co__item { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.co__item:last-child { border-bottom: 0; padding-bottom: 0; }
.co__item-name { font-weight: 700; color: var(--azul); font-size: var(--fs-sm); }
.co__item-meta { font-size: var(--fs-xs); color: var(--gris-calido); margin-top: 2px; }
.co__item-sub { font-weight: 700; color: var(--carbon); font-size: var(--fs-sm); white-space: nowrap; }
.co__totals { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); }
.co__line { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--gris-calido); }
.co__line b { color: var(--azul); font-weight: 700; }
.co__grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.co__grand span { font-weight: 700; color: var(--azul); }
.co__grand b { font-family: var(--font-display); font-size: 1.7rem; color: var(--coral); }
.co__card .btn { margin-top: 10px; }
.co__secure { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: var(--fs-xs); color: var(--gris-calido); margin: 14px 0 0; text-align: center; }
.co__secure svg { color: var(--verde, #1FA855); flex: none; }
/* Carrito vacío */
.co-empty { max-width: 460px; margin: clamp(1rem, 6vw, 3rem) auto; text-align: center; color: var(--gris-calido); display: grid; justify-items: center; gap: 6px; }
.co-empty svg { color: var(--border-2); margin-bottom: 8px; }
.co-empty h2 { font-size: var(--fs-2xl); color: var(--azul); margin: 0; }
.co-empty p { margin: 0 0 18px; }
@media (max-width: 860px) {
  .co { grid-template-columns: 1fr; }
  .co__aside { position: static; order: -1; }  /* resumen arriba en móvil */
}
@media (max-width: 480px) {
  .co__form { grid-template-columns: 1fr; }
}
/* Página de gracias / error */
.thanks { max-width: 560px; margin: clamp(1rem, 6vw, 3rem) auto; text-align: center; }
.thanks__icon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--cielo); color: var(--azul); margin-bottom: 18px; }
.thanks__icon--err { background: var(--blush-soft); color: var(--coral); }
.thanks h1 { font-size: var(--fs-3xl); color: var(--azul); }
.thanks p { color: var(--gris-calido); font-size: var(--fs-lg); margin: 14px auto 24px; max-width: 46ch; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.drawer__clear { font-size: var(--fs-sm); font-weight: 700; color: var(--gris-calido); padding: 6px; }
.drawer__clear:hover { color: var(--coral); }

/* ── 9. Tira de confianza ───────────────────────────────────── */
.trust { border-top: 1px solid var(--border); }
.trust__label {
  text-align: center; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris-calido);
}
.trust__logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 5vw, 56px); margin-top: 22px;
}
.trust__logo {
  height: 30px; min-width: 96px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--gris-calido); opacity: .55;
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(112,106,100,.05) 8px 9px);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 0 14px;
  transition: opacity var(--t-base);
}
.trust__logo:hover { opacity: .85; }

.stats {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--azul); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stat { text-align: center; color: #fff; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: -10px; top: 10%; height: 80%; width: 1px;
  background: rgba(255,255,255,.14);
}
.stat__num {
  font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600; color: var(--blush); line-height: 1;
}
.stat__label { font-size: var(--fs-sm); color: rgba(255,255,255,.78); margin-top: 8px; }

/* ── 10. WhatsApp flotante ──────────────────────────────────── */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%;
  background: #1FA855; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(31,168,85,.4);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 36px rgba(31,168,85,.5); }
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(31,168,85,.45); animation: wa-pulse 2.6s infinite;
}
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,168,85,.4);} 70% { box-shadow: 0 0 0 16px rgba(31,168,85,0);} 100% { box-shadow: 0 0 0 0 rgba(31,168,85,0);} }

/* ── 11. Animaciones de entrada (reveal) ────────────────────── */
/* El estado OCULTO (opacity:0) se aplica SOLO bajo .js-reveal, una clase
   que añade script.js al <html> cuando el JS realmente corre. Si el script
   no carga, falla o el usuario tiene JS deshabilitado, .js-reveal nunca
   aparece y todo el contenido .reveal queda visible por defecto.
   (Mismo principio que body.motion-ready en las cards de la tienda.) */
.reveal { transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.js-reveal .reveal { opacity: 0; transform: translateY(20px); }
.js-reveal .reveal.visible { opacity: 1; transform: none; }

/* ── 11b. Sistema de motion premium ─────────────────────────── */

/* Botones: lift senior, sombra suave, estado activo controlado */
.btn { transition: transform .22s var(--ease-out), background var(--t-base), color var(--t-base), box-shadow .3s var(--ease-out); }
.btn--primary:hover { background: var(--coral-h); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,79,69,.28); }
.btn--dark:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,59,93,.26); }
.btn--wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,168,85,.3); }
.btn:active { transform: translateY(0) scale(.985); }

/* Header: compactación sutil al hacer scroll */
.header { transition: box-shadow .35s var(--ease-out), background var(--t-base); }
.header__inner { transition: height .35s var(--ease-out); }
.header.scrolled { box-shadow: 0 6px 26px rgba(18,59,93,.22); }
.header.scrolled .header__inner { height: calc(var(--header-h) - 8px); }

/* Cards de producto / hero: elevación de la card + zoom de la IMAGEN
   interna dentro de un contenedor con overflow:hidden (nunca escala el
   contenedor, así la foto no "se sale del marco"). Solo puntero fino. */
.prod, .hcard, .qcard, .svc, .benefit { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.hcard__img { overflow: hidden; }
.prod__photo, .hcard__img img { transition: transform .6s var(--ease-out); will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .prod:hover .prod__photo, .hcard:hover .hcard__img img { transform: scale(1.06); }
}

/* Botón "Agregar": feedback de confirmación */
.btn.is-added { background: #1FA855; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(31,168,85,.32); }

/* Contador "Mi solicitud": pulso al sumar */
.req-btn__count, .num-pulse { transition: background var(--t-fast); }
.num-pulse { animation: numPulse .5s var(--ease-out); }
@keyframes numPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* Accesos rápidos: flecha que se desliza + acento superior al hover */
.qcard { position: relative; overflow: hidden; }
.qcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--coral); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.qcard:hover::before { transform: scaleX(1); }
.qcard__icon { transition: transform .4s var(--ease-out), background var(--t-base); }
.qcard:hover .qcard__icon { transform: scale(1.08) rotate(-3deg); }
.qcard__arrow { display: inline-block; font-style: normal; transition: transform .35s var(--ease-out); }
.qcard:hover .qcard__arrow { transform: translateX(5px); }

/* Filtros tienda: producto entra con fade/slide al cambiar categoría */
.prod--in { animation: prodIn .5s var(--ease-out) both; }
@keyframes prodIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.cat-filter { transition: color var(--t-fast), background .3s var(--ease-out), box-shadow var(--t-fast), transform .2s var(--ease-out); }
.cat-filter:active { transform: scale(.96); }
.cat-filter.is-active { background: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(18,59,93,.2); }

/* Drawer: entrada/salida de items con stagger */
.ditem--in { animation: ditemIn .45s var(--ease-out) both; }
@keyframes ditemIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
.ditem--out { opacity: 0; transform: translateX(16px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.ditem__sub, .drawer__total b { transition: color var(--t-fast); display: inline-block; }

/* Footer: subrayado deslizante sutil en links */
.footer__col a { position: relative; transition: color var(--t-base); }
.footer__col a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--blush); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.footer__col a:hover::after { transform: scaleX(1); }

/* ── 11b-bis. Motion del Home = copia 1:1 del patrón de Tienda ───
   Mismos valores que .prod / .prod__img:
     card  : overflow hidden + transition transform/box-shadow var(--t-base)
     hover : translateY(-4px) + box-shadow var(--elev-h)
     media : transition transform .6s var(--ease-out) + will-change
     zoom  : scale(1.05)
   Clave: el estado VISIBLE del reveal NO declara transform, así el
   :hover nunca pierde la cascada (antes lo anulaba con transform:none).
   El stagger solo retrasa la opacidad, nunca el hover. */

/* Card: elevación y sombra idénticas a la Tienda */
.store-motion-card {
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base),
              opacity .55s var(--ease-out) var(--stagger, 0ms);
}
.store-motion-card:hover { transform: translateY(-4px); box-shadow: var(--elev-h); }

/* Visual/placeholder: zoom suave idéntico al de .prod__img */
.store-motion-media { transition: transform .6s var(--ease-out); will-change: transform; }
.store-motion-card:hover .store-motion-media { transform: scale(1.05); }

/* Acción/CTA: micro movimiento + color fino */
.store-motion-action { transition: color var(--t-fast); }
.store-motion-card:hover .store-motion-action { color: var(--coral-h); }
.store-motion-card:hover .store-motion-action .qcard__arrow { transform: translateX(5px); }

/* Scroll reveal — gated por body.motion-ready (sin JS => visibles).
   El estado oculto vive en :not(.is-inview); el visible NO toca
   transform, por eso el hover-lift siempre gana la cascada. */
body.motion-ready .store-motion-card:not(.is-inview) {
  opacity: 0;
  transform: translateY(20px);
}
body.motion-ready .store-motion-card.is-inview { opacity: 1; }

/* ── 11c. Entrada escalonada del hero (Inicio) ──────────────── */
/* Importante: NO se oculta el hero con opacity base. El estado oculto
   inicial lo aporta el relleno "both" del keyframe solo mientras anima,
   así el hero nunca queda invisible si la animación no llega a correr. */
body.is-ready .hero__content > * { animation: heroUp .7s var(--ease-out) both; }
body.is-ready .hero__content > .eyebrow   { animation-delay: .05s; }
body.is-ready .hero__content > h1          { animation-delay: .14s; }
body.is-ready .hero__content > .hero__desc { animation-delay: .24s; }
body.is-ready .hero__content > .hero__actions { animation-delay: .34s; }
body.is-ready .hero__content > .hero__badges  { animation-delay: .44s; }
body.is-ready .hero__visual { animation: heroVisual .8s var(--ease-out) .2s both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroVisual { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
/* Las cards del collage entran con un leve desfase editorial */
body.is-ready .hcard { animation: heroCard .7s var(--ease-out) both; }
body.is-ready .hcard:nth-child(1) { animation-delay: .30s; }
body.is-ready .hcard:nth-child(2) { animation-delay: .42s; }
body.is-ready .hcard:nth-child(3) { animation-delay: .52s; }
@keyframes heroCard { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Suaviza el retorno del micro-parallax */
.hero__collage, .hero__notecard { transition: transform .5s var(--ease-out); }

/* ── 11d. Movimiento reducido (accesibilidad) ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  body.motion-ready .store-motion-card { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__content > *, .hero__visual, .hcard { opacity: 1 !important; transform: none !important; }
  .wa-float::after { animation: none !important; }
}

/* ── 12. Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav { display: none; }
  .req-btn span.req-btn__text { display: none; }
  .hamburger { display: block; }
  .hero__grid { grid-template-columns: 1fr; }
  /* Celular: primero el título y los botones, luego las fotos (texto-primero). */
  .hero__visual { max-width: 480px; margin: 18px auto 0; width: 100%; }
  .header__actions .btn--primary { display: none; }
}
@media (max-width: 980px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .solutions__grid { grid-template-columns: repeat(2, 1fr); }
  .occasions__grid { grid-template-columns: repeat(2, 1fr); }
  .featured__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .intro__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .intro__text h2 { max-width: none; }
  .quick__grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .howto-preview__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .after-send__inner { grid-template-columns: 1fr; gap: 2rem; }
  .quote { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* Cómo funciona: pasos un poco más compactos en móvil (el flujo vertical
     con flechas ya es el layout base). */
  .process__step { grid-template-columns: 52px 1fr; column-gap: 14px; padding: 15px 16px; }
  .process__icon { width: 52px; height: 52px; }
}
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .stat + .stat:nth-child(odd)::before { display: none; }
  .stat:nth-child(3)::before { display: none; }
  .hero__notecard { right: 0; }
  .svc-grid { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .benefits__grid { grid-template-columns: 1fr; }
  .solutions__grid { grid-template-columns: 1fr; }
  .occasions__grid { grid-template-columns: 1fr; }
  .quote__form { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .moments__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(108px, 32vw, 168px); }
}
@media (max-width: 420px) {
  /* El catálogo (.prod-grid) se mantiene en 2 columnas compactas; solo pasa
     a 1 columna en pantallas muy angostas (<=360px, ver bloque 13.5). */
  .featured__grid { grid-template-columns: 1fr; }
}

/* ── Composición editorial del Home: apilado responsive ─────── */
/* Las grids bento/vitrina/editorial usan grid-template-areas en
   desktop; aquí se neutralizan y se apilan limpio en tablet/móvil. */
@media (max-width: 980px) {
  /* Ocasiones (editorial) → tablet 2 columnas: principal a todo el ancho,
     secundarias en 2×2 y "Pedido urgente" a todo el ancho. */
  .occasions__grid--editorial {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: clamp(300px, 44vw, 380px) clamp(224px, 32vw, 290px) clamp(224px, 32vw, 290px) auto;
    grid-template-areas:
      "feature feature"
      "cap     coffee"
      "evento  comida"
      "urgent  urgent";
  }

  /* Vitrina: destacado a todo el ancho + secundarios uniformes (3 col) */
  .featured__grid--vitrina {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
  .featured__grid--vitrina > .fprod--lg { grid-column: 1 / -1; grid-row: auto; }
  .fprod--lg .fprod__img { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
  .fprod--row { flex-direction: column; }
  .fprod--row .fprod__img { width: auto; aspect-ratio: 4 / 3; }

  /* Momentos: editorial → grid uniforme 3 col, destacado 2x2 */
  .moments__grid--editorial {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: none;
    grid-auto-rows: clamp(118px, 17vw, 196px);
  }
  .moments__grid--editorial > :nth-child(n) { grid-area: auto; }
  .moments__grid--editorial > .moment--lg { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 620px) {
  /* Ocasiones (editorial) → móvil 1 columna apilada. La imagen vuelve a
     aspect-ratio para que cada card se ajuste a su contenido; la principal
     mantiene imagen grande y "Pedido urgente" se apila como CTA final. */
  .occasions__grid--editorial {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    grid-auto-rows: auto;
  }
  .occasions__grid--editorial > :nth-child(n) { grid-area: auto; }
  .occasions__grid--editorial .occasion__ph { aspect-ratio: 16 / 10; flex: none; min-height: 0; }
  .occasion--feature .occasion__ph { aspect-ratio: 4 / 3; }
  .occasion--urgent { flex-direction: column; }
  .occasion--urgent .occasion__ph { aspect-ratio: 16 / 10; flex: none; min-height: 0; }

  .featured__grid--vitrina { grid-template-columns: 1fr 1fr; }
  .moments__grid--editorial { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(108px, 32vw, 168px); }
  .moments__grid--editorial > .moment--lg { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 420px) {
  .featured__grid--vitrina { grid-template-columns: 1fr; }
  .fprod--row { flex-direction: row; }
  .fprod--row .fprod__img { width: clamp(104px, 32%, 150px); aspect-ratio: auto; }
}

/* Testimonios: tablet 2+1, móvil 1 columna */
@media (max-width: 980px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .testimonials__grid { grid-template-columns: 1fr; } }

/* ── Imágenes reales en placeholders del Home ───────────────────
   Se inserta un <img> dentro de los placeholders existentes (hero,
   momentos; ocasiones ya tienen su regla). Se recortan con
   object-fit: cover sin deformar. Cuando hay imagen real se ocultan
   las etiquetas "Foto: ..." y el watermark decorativo (el markup no
   se borra, solo se oculta). El badge "Más pedido" se conserva. */
.hcard__img img,
.moment__ph img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
/* Oculta el watermark decorativo del hero cuando hay imagen real. */
.hcard__img:has(img) .hcard__watermark { display: none; }

/* Fotos reales en Destacados ("Lo más pedido"): la imagen llena la card
   y se muestra por encima del gradiente placeholder, que se oculta cuando
   sí hay foto. Antes el gradiente tapaba las fotos (fajitas, wrap, mix). */
.fprod__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1;
  transition: transform .6s var(--ease-out);
}
.fprod__img:has(.fprod__photo) .fprod__ph { display: none; }
@media (hover: hover) and (pointer: fine) {
  .store-motion-card:hover .fprod__photo { transform: scale(1.06); }
}

/* ── Quitar todas las etiquetas/pestañas "Foto: ..." ─────────────
   Eran captions de placeholder y tapaban imágenes/placeholders. Se
   ocultan en TODA la página (catálogo, destacados, qué hacemos,
   ocasiones, momentos, hero). No se borra el markup ni el alt text;
   solo se ocultan visualmente. No afecta layout (eran overlays). */
.hcard__imgtag,
.intro__shottag,
.occasion__tag,
.moment__tag,
.prod__imgtag,
.fprod__tag { display: none !important; }

/* ── Área táctil en móvil ────────────────────────────────────────
   En móvil, los botones pequeños (".btn--sm", p. ej. "Agregar") suben a
   un mínimo de 44px de alto para mejor tap target. Solo afecta móvil;
   desktop, colores, tipografía y layout no cambian. */
@media (max-width: 620px) {
  .btn--sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. MOBILE UX — Auditoría mobile-first (CRYZMA)
   Celular rápido, compacto y fácil de cotizar, SIN tocar desktop.
   Todo vive en media queries / capacidades. Orden: capacidades →
   768 → 620 → 360.
   ═══════════════════════════════════════════════════════════════ */

/* 13.0 · Red anti-overflow + offset de anclas bajo el header sticky */
:where(section[id], [id]) { scroll-margin-top: calc(var(--header-h) + 12px); }
img, svg, video { max-width: 100%; }

/* 13.1 · Táctil: sin hover-lift/zoom (evita estados "pegados") y sin
   el pulso infinito del botón de WhatsApp. */
@media (hover: none) {
  .prod:hover, .hcard:hover, .qcard:hover, .svc:hover,
  .solution:hover, .store-motion-card:hover, .benefit:hover { transform: none; }
  .store-motion-card:hover .store-motion-media,
  .prod:hover .prod__photo, .hcard:hover .hcard__img img,
  .benefit:hover .benefit__icon { transform: none; }
  .wa-float::after { animation: none; }
}

/* 13.2 · WhatsApp flotante: más chico, respeta safe-area de iPhone y
   NO tapa botones; se oculta cuando el menú o el drawer están abiertos. */
@media (max-width: 768px) {
  .wa-float {
    width: 50px; height: 50px;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    box-shadow: 0 6px 18px rgba(31,168,85,.38);
  }
}
body.nav-open .wa-float,
body.drawer-open .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }

/* 13.3 · Hero móvil: CTAs a ancho completo (mejor tap target). */
@media (max-width: 620px) {
  .hero__actions { gap: 10px; margin-top: 22px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .section-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero__collage { gap: 10px; }
}

/* 13.4 · Catálogo — filtros tipo chips en scroll horizontal, con buen
   tap target (dejan de apilarse en varias filas). */
@media (max-width: 768px) {
  .cat-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px; padding-bottom: 10px;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .cat-filters::-webkit-scrollbar { display: none; }
  .cat-filter { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; }
}

/* 13.5 · Catálogo compacto — 2 columnas reales en teléfonos: card
   escaneable (imagen cuadrada + nombre + precio + Agregar), descripción
   recortada a 2 líneas para no alargar. 1 columna SOLO en <=360px. */
@media (max-width: 620px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod__img { aspect-ratio: 4 / 5; }
  .prod__body { padding: 11px; }
  .prod__name { font-size: 1rem; line-height: 1.15; }
  .prod__desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin: 6px 0 10px; font-size: var(--fs-xs);
  }
  .prod__foot { flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; }
  .prod__foot .btn { width: 100%; }
}
@media (max-width: 340px) {
  /* Solo teléfonos muy pequeños (iPhone SE 1ª gen ~320px). 360/375/390/414/430
     mantienen 2 columnas. */
  .prod-grid { grid-template-columns: 1fr; }
}

/* 13.6 · Momentos compactos + Ocasiones tipo "menú" (fila) ─────
   Ocasiones en móvil: miniatura + texto en fila (como la card
   "Pedido urgente" en desktop). Convierte 6 tarjetas altas en 6
   filas cortas -> mucho menos scroll y elección más rápida. */
@media (max-width: 620px) {
  .moments__grid--editorial { grid-auto-rows: clamp(96px, 30vw, 148px); gap: 8px; }

  .occasions__grid--editorial { grid-template-columns: 1fr; gap: 10px; grid-auto-rows: auto; }
  .occasions__grid--editorial > .occasion {
    grid-area: auto;
    flex-direction: row; align-items: stretch; min-height: 90px;
  }
  .occasions__grid--editorial > .occasion > .occasion__ph {
    flex: 0 0 94px; width: 94px; aspect-ratio: auto; min-height: 0; align-self: stretch;
  }
  .occasions__grid--editorial > .occasion > .occasion__body {
    flex: 1 1 auto; min-width: 0; justify-content: center;
    padding: 11px 14px; gap: 3px;
  }
  .occasions__grid--editorial > .occasion > .occasion__body h3 { font-size: 1.02rem; }
  .occasions__grid--editorial > .occasion > .occasion__body p {
    font-size: var(--fs-xs); margin: 0; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .occasions__grid--editorial > .occasion > .occasion__body .occasion__cta {
    margin-top: 3px; font-size: var(--fs-xs);
  }
}

/* 13.7 · Testimonios — 1 columna, padding vertical moderado. */
@media (max-width: 620px) {
  .testimonials { padding-top: clamp(2rem, 6vw, 2.6rem); padding-bottom: clamp(2rem, 6vw, 2.6rem); }
}

/* 13.8 · Tap targets mínimos en el stepper del drawer. */
@media (max-width: 768px) {
  .qty__btn { width: 40px; height: 40px; }
  .qty__input { height: 40px; }
}

/* 13.9 · Destacados ("Lo más pedido") — cuadrícula compacta 2×2 en
   móvil (misma card que el catálogo). La card grande deja de acaparar
   ~440px de alto; los 4 productos quedan uniformes y escaneables. */
@media (max-width: 620px) {
  .featured__grid--vitrina { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 12px; }
  .featured__grid--vitrina > .fprod--lg { grid-column: auto; grid-row: auto; }
  .featured__grid--vitrina > .fprod--lg,
  .featured__grid--vitrina > .fprod--row { flex-direction: column; }
  .featured__grid--vitrina .fprod__img,
  .featured__grid--vitrina .fprod--lg .fprod__img,
  .featured__grid--vitrina .fprod--row .fprod__img {
    width: auto; aspect-ratio: 1 / 1; flex: none; min-height: 0;
  }
  .featured__grid--vitrina .fprod__body,
  .featured__grid--vitrina .fprod--lg .fprod__body,
  .featured__grid--vitrina .fprod--row .fprod__body { padding: 11px; }
  .featured__grid--vitrina .fprod__name,
  .featured__grid--vitrina .fprod--lg .fprod__name,
  .featured__grid--vitrina .fprod--row .fprod__name { font-size: 1rem; line-height: 1.15; }
  .featured__grid--vitrina .fprod--lg .fprod__desc { display: none; }
  .featured__grid--vitrina .fprod__foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .featured__grid--vitrina .fprod__foot .btn { width: 100%; }
}

/* ── Página legal (términos, cancelaciones, privacidad) ─────── */
.legal { max-width: 780px; margin: 0 auto; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.legal__nav a { font-size: var(--fs-sm); font-weight: 700; color: var(--azul); background: var(--cielo); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
.legal__nav a:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.legal__doc { margin-bottom: clamp(2rem, 5vw, 3rem); scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
.legal__doc h2 { font-size: var(--fs-2xl); color: var(--azul); padding-bottom: 10px; border-bottom: 2px solid var(--coral); margin-bottom: 18px; }
.legal__doc h3 { font-size: 1.05rem; color: var(--azul); margin: 20px 0 6px; }
.legal__doc p, .legal__doc li { color: var(--carbon); font-size: var(--fs-base); line-height: 1.65; }
.legal__doc ul { margin: 8px 0 0 20px; display: grid; gap: 6px; }
.legal__todo { background: var(--blush-soft); border-left: 3px solid var(--coral); padding: 10px 14px; font-size: var(--fs-sm); color: var(--coral-h, var(--coral)); border-radius: var(--r-sm); }
.legal__upd { margin-top: 18px; font-size: var(--fs-xs); color: var(--gris-calido); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   CORRECCIONES PRE-MIGRACIÓN A cryzma.com  (bloque añadido al final
   a propósito: va después de todo, así gana por orden de cascada y
   no hay que tocar las reglas originales de arriba).
   ═══════════════════════════════════════════════════════════════ */

/* FIX 1 · CTA del menú móvil ilegible.
   `.mobile-menu a` (especificidad 0,2,0) pisaba el color blanco de
   `.btn--primary` (0,1,0) y "Cotizar ahora" salía azul marino sobre
   coral: contraste ~2.3:1, reprueba WCAG AA. */
.mobile-menu a.btn--primary,
.mobile-menu .btn--primary { color: #fff; border-bottom: 0; }
.mobile-menu a.btn { border-bottom: 0; }

/* FIX 2 · En móvil el botón "Pagar" quedaba ARRIBA del formulario:
   el usuario veía el cobro antes de escribir su nombre y tenía que
   volver a subir para pagar. Ahora: datos primero, pago al final. */
@media (max-width: 980px) {
  .co { display: flex; flex-direction: column; }
  .co__main  { order: 1; }
  .co__aside { order: 2; position: static; }
}

/* FIX 3 · El botón flotante de WhatsApp tapaba "Subtotal" e "IVA" en
   el resumen del checkout. Se oculta en la pantalla de pago, donde el
   canal correcto ya está dentro de la tarjeta ("Prefiero cotizar por
   WhatsApp"). */
body[data-page="checkout"] .wa-float { display: none; }

/* FIX 4 · Los chips de categoría se metían debajo del header fijo. */
@media (max-width: 768px) {
  .cat-filters {
    position: sticky;
    top: calc(var(--header-h) + 4px);
    z-index: 40;
    background: var(--bg-marfil);
    padding-top: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
}

/* FIX 5 · Toast de "agregado" (sustituye la apertura automática del
   carrito en cada clic). */
.cz-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px);
  z-index: 90; display: flex; align-items: center; gap: 14px;
  max-width: min(92vw, 460px);
  padding: 13px 16px; border-radius: var(--r-pill);
  background: var(--azul); color: #fff;
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 12px 34px rgba(18, 59, 93, .32);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.cz-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cz-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-toast__btn {
  flex: none; color: #fff; font-weight: 800; font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .cz-toast { transition: none; } }