/* Florería Brisa: editorial romántico. Crema cálido, verde tinta profundo, acento pétalo. Fraunces + Hanken Grotesk. */
@font-face { font-family: 'Fraunces'; src: url('../_shared/fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../_shared/fonts/fraunces-latin-opsz-italic.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../_shared/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  --bg: #faf6f0;
  --fg: #223225;
  --muted: #5c6957;
  --line: rgba(34, 50, 37, 0.16);
  --surface: #f3e6e1;
  --accent: #b3506c;
  --accent-fg: #fff8f5;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --display-weight: 420;
  --display-tracking: -0.01em;
  --radius: 16px;
  --radius-lg: 26px;
  --item-ratio: 4 / 5;
}

h1, h2, h3 { font-optical-sizing: auto; }
.brand { font-style: italic; font-weight: 500; font-size: 1.9rem; }
.brand small { font-style: normal; }

/* Héroe a sangre: la foto ocupa el ancho completo; el titular sube sobre ella. Cada línea lleva su propio
   fondo crema con esquinas suaves (ya no un recuadro de esquina recta) y la foto está encuadrada para que
   esa línea caiga sobre la corteza o el papel del ramo, no sobre una flor. */
.hero-bloom { position: relative; }
.hero-bloom-photo { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%; }
.hero-bloom-copy { position: relative; z-index: 1; margin-top: clamp(-4.5rem, -16vw, -2.75rem); padding-top: 0; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.hero-bloom h1 { font-size: clamp(2.6rem, 1.6rem + 6vw, 5.2rem); line-height: 1.22; max-width: 14ch; }
.hero-bloom h1 span {
  display: inline;
  background: var(--bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 0.3em;
  padding: 0.22em 0.45em;
}
.hero-bloom .lead { margin-top: 1.5rem; max-width: 32rem; font-size: var(--step-1); line-height: 1.5; color: var(--fg-soft); }
.hero-bloom .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero-bloom .facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1.75rem; color: var(--muted); font-size: var(--step--1); }
@media (min-width: 900px) {
  .hero-bloom-photo { aspect-ratio: 21 / 10; object-position: 50% 8%; }
  .hero-bloom-copy { margin-top: clamp(-9rem, -14vw, -6rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-bloom h1, .js .hero-bloom .lead, .js .hero-bloom .actions, .js .hero-bloom .facts { animation: rise 0.9s var(--ease) both; }
  .js .hero-bloom .lead { animation-delay: 0.12s; }
  .js .hero-bloom .actions { animation-delay: 0.24s; }
  .js .hero-bloom .facts { animation-delay: 0.36s; }
  .js .hero-bloom-photo { animation: settle 1.3s var(--ease) both; }
}

/* Franja de corte: banda oscura, hora grande, estado de horario en vivo. */
.cutoff { background: var(--fg); color: var(--bg); padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.cutoff-inner { display: grid; gap: 1.5rem; align-items: center; }
.cutoff-time { display: flex; align-items: baseline; gap: 0.35rem; color: var(--bg); }
.cutoff-time .display-xl { color: var(--bg); font-size: clamp(3.5rem, 2.4rem + 6vw, 6rem); line-height: 0.9; }
.cutoff-time .display-xl small { font-size: 0.42em; font-weight: 500; color: color-mix(in srgb, var(--bg) 70%, transparent); }
.cutoff-unit { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); }
.cutoff h2 { color: var(--bg); font-size: var(--step-3); max-width: 20ch; }
.cutoff p { margin-top: 0.6rem; color: color-mix(in srgb, var(--bg) 78%, transparent); max-width: 34rem; }
.cutoff-status { margin-top: 1rem; font-weight: 600; color: var(--bg); }
.cutoff-status[data-open='true']::before { content: '● '; color: #8fbf9a; }
.cutoff-status[data-open='false']::before { content: '● '; color: color-mix(in srgb, var(--accent) 80%, var(--bg)); }
@media (min-width: 700px) { .cutoff-inner { grid-template-columns: auto 1fr; gap: 3.5rem; } }

/* Menú por ocasión: acordeón nativo, sin JS obligatorio. */
.menu { border-top: 1px solid var(--line); }
.occasion { border-bottom: 1px solid var(--line); }
.occasion summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1.5rem; padding: 1.5rem 0; list-style: none; cursor: pointer; }
.occasion summary::-webkit-details-marker { display: none; }
.occasion-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-3); color: var(--fg); letter-spacing: var(--display-tracking); }
.occasion-note { color: var(--muted); font-size: var(--step-0); }
.occasion[open] summary { padding-bottom: 1rem; }
.occasion .items { padding-bottom: 2.25rem; }
@media (min-width: 640px) { .occasion .items { grid-template-columns: repeat(2, 1fr); } }
.items-single { max-width: 20rem; grid-template-columns: 1fr !important; }
.menu-note { margin-top: 2.5rem; max-width: 40rem; color: var(--fg-soft); }
.menu-note a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }

/* Cómo llega tu arreglo: tres fotos de distinto recorte, con numeral. */
.journey { display: grid; gap: 2.25rem; }
.journey-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg); margin-bottom: 1rem; }
.journey-media img { width: 100%; object-fit: cover; }
.journey-wide img { aspect-ratio: 4 / 3; }
.journey-tall img { aspect-ratio: 4 / 5; }
.journey .num { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 1; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 999px; background: var(--bg); color: var(--fg); font-family: var(--font-display); font-size: 1.05rem; }
.journey h3 { font-size: var(--step-1); }
.journey p { margin-top: 0.4rem; color: var(--fg-soft); }
@media (min-width: 800px) {
  .journey { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; align-items: start; }
}
.pull-quote { max-width: 42rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: center; }
.pull-quote::before { content: '\201C'; display: block; margin-bottom: 0.5rem; color: var(--accent); font-family: var(--font-display); font-size: var(--step-4); line-height: 0.6; }
.pull-quote p { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1.3; color: var(--fg); }
.pull-quote cite { display: block; margin-top: 1.1rem; font-style: normal; color: var(--muted); font-size: var(--step--1); }

/* Zonas: tabla del scaffold con el numeral en verde tinta. */
.table .price, .table td.num { font-family: var(--font-display); }

.faq summary::after { color: var(--accent); }
.site-footer { background: var(--surface); border: 0; }

/* Botón de menú móvil como <summary> de un <details>: con JS se comporta igual que antes (demo.js gobierna .is-open);
   sin JS, el navegador abre y cierra el <details> solo y esta regla revela el panel. */
.nav-drawer > summary.nav-toggle { list-style: none; }
.nav-drawer > summary.nav-toggle::-webkit-details-marker,
.nav-drawer > summary.nav-toggle::marker { display: none; content: ''; }
:root:not(.js) .site-header:has(.nav-drawer[open]) .nav-panel { display: block; }
@media (min-width: 900px) { .nav-drawer { display: none; } }

/* El menú móvil cubre toda la pantalla; si queda abierto, la barra flotante de abajo no debe asomarse encima
   (con JS por la clase .is-open; sin JS por el <details> nativo abierto). */
body:has(.nav-panel.is-open) .sticky-cta,
:root:not(.js) body:has(.nav-drawer[open]) .sticky-cta { display: none; }

/* Área táctil ≥44px en los enlaces de pedido por arreglo, sin mover el precio junto al que viven. */
.item-foot { align-items: center; }
.item-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.6rem; margin-block: -0.6rem; }