/* Oro gifts page, /chocolate/regalos/ (2026-10-21). Loads only on that page, after experiences.css.
   Reuses the experience card (.exp, .exp-in, .exp-valid), the four-step loop (.ed-loop), the band (.ed-band) and the
   buttons; this file only sets what they do not: square photo slots (so no bar is cropped), the feature card, the
   price line, the tiers and the custom-mix tile. */

.rg-hero-alt { color: var(--cal); border-color: var(--cal); }

.rg-grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .rg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rg-grid { grid-template-columns: repeat(3, 1fr); } }

/* The product photos are square (1400 x 1400) and show the whole pack: the slot is square too, never 3:2 */
.rg-card .exp-ph { aspect-ratio: 1 / 1; }
.rg-card .exp-in { gap: var(--space-4); }
.rg-head, .rg-body { display: grid; gap: var(--space-2); align-content: start; }
.rg-body { gap: var(--space-3); }
.rg-foot { margin-top: auto; }
.rg-head h3 { margin: 0; }
.rg-head p { margin: 0; }
.rg-kicker { color: var(--ink-muted); }
.rg-price { margin-top: var(--space-2) !important; border-top: var(--stroke-rule) solid var(--ink); padding-top: var(--space-3); font-variant-numeric: tabular-nums; }
.rg-price b { font: 800 clamp(28px, 3.4vw, 36px)/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.rg-price span { font-weight: 600; color: var(--ink-muted); }
.rg-price-quote b { font-size: clamp(22px, 2.6vw, 28px); }
.rg-block { display: grid; gap: 4px; }
.rg-block .label { color: var(--ink-muted); margin: 0; }
.rg-block p, .rg-block ul { margin: 0; }
.rg-block ul { padding-left: 1.1em; display: grid; gap: 2px; }

/* El Recorrido leads the grid: its photo is the five bars in a row (2:1), so the card is wide. The photo runs the
   full width of the card at its own shape; the text sits under it in three columns. */
.rg-feature { grid-column: 1 / -1; }
.rg-feature .exp-ph { aspect-ratio: 2 / 1; }
@media (min-width: 900px) {
  .rg-feature .exp-in { display: grid; grid-template-columns: 5fr 4fr 3fr; column-gap: var(--space-7); padding: var(--space-6); align-items: start; }
  .rg-feature .rg-foot { align-self: end; margin-top: 0; }
}

/* The sixth cell: another mix */
.rg-tile { background: var(--cacao); color: var(--on-dark); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.rg-tile > * { margin: 0; }
.rg-tile .label { color: var(--oro); }
.rg-tile .t-lead { max-width: 34rem; }
.rg-tile ul { padding-left: 1.1em; display: grid; gap: var(--space-1); }
.rg-tile .co-btn { align-self: flex-start; margin-top: var(--space-2); }
@media (min-width: 700px) { .rg-tile { grid-column: span 2; } }
@media (min-width: 1100px) { .rg-tile { padding: var(--space-7); } }
.rg-photo-note { margin: var(--space-4) 0 0; font-size: 14px; }

/* Para empresas */
.rg-steps { margin-top: 0; }
.rg-terms { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 900px) { .rg-terms { grid-template-columns: 7fr 5fr; gap: var(--space-8); } }
.rg-terms .label { margin: 0 0 var(--space-3); color: var(--ink-muted); }
.rg-terms ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-2); }
.rg-terms .rg-tiers { list-style: none; padding: 0; gap: 0; }
.rg-tiers li { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.rg-tiers b { font: 800 40px/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; min-width: 3.2ch; font-variant-numeric: tabular-nums; }
.rg-terms .exp-valid { margin-top: var(--space-3); }

/* Para negocios: one line and one button, no prices */
.rg-wholesale { display: grid; gap: var(--space-5); align-items: center; }
.rg-wholesale > div > * { margin: 0; }
.rg-wholesale > div { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .rg-wholesale { grid-template-columns: 7fr 5fr; gap: var(--space-8); } .rg-wholesale .x-actions { justify-content: flex-end; } }

/* ---- Round 2 (2026-10-22): the buyer's journey, from Chicago's pages (CHICAGO-TO-NI-SPEC.md) ---- */

/* Hero: three facts a buyer checks before writing */
.rg-trust { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: 600 14px/1.3 var(--font-text); color: var(--cal); }
.rg-trust li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); margin-right: 8px; vertical-align: middle; }

/* Who are you: three doors, one prefilled WhatsApp message each */
.rg-number { font-weight: 700; white-space: nowrap; color: var(--ink); }
.rg-doors { display: grid; gap: var(--space-4); }
@media (min-width: 800px) { .rg-doors { grid-template-columns: repeat(3, 1fr); } }
.rg-door { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line-strong, var(--ink)); }
.rg-door > * { margin: 0; }
.rg-door .label { color: var(--ink-muted); }
.rg-door-foot { margin-top: auto; padding-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.rg-door-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Gift card: what it is worth, what you pay */
.rg-worth { font-size: 15px; color: var(--ink); }
.rg-worth b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Questions */
.rg-faq-wrap { display: grid; gap: var(--space-5); }
.rg-faq-wrap > div > * { margin: 0; }
.rg-faq-wrap .label { margin-bottom: var(--space-3); color: var(--ink-muted); }
@media (min-width: 900px) { .rg-faq-wrap { grid-template-columns: 4fr 8fr; gap: var(--space-8); } }
.rg-faq details { border-top: 1px solid var(--line-strong, var(--ink)); }
.rg-faq details:last-child { border-bottom: 1px solid var(--line-strong, var(--ink)); }
.rg-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) 0; font: 700 18px/1.35 var(--font-text); }
.rg-faq summary::-webkit-details-marker { display: none; }
.rg-faq summary::after { content: "+"; font: 400 28px/1 var(--font-text); flex: none; }
.rg-faq details[open] summary::after { content: "\2212"; }
.rg-faq details p { margin: 0 0 var(--space-4); max-width: 60ch; color: var(--ink); }

/* Dónde encontrar Oro: country outline, pins as links, list grouped by city */
.rg-where-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .rg-where-grid { grid-template-columns: 5fr 6fr; gap: var(--space-8); } }
.pl-map { margin: 0; }
.pl-map-in { position: relative; border: 1px solid var(--line); background: #f5ecd8; }
.pl-map-in img { display: block; width: 100%; height: auto; }
.pl-map figcaption { margin-top: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.pl-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; }
.pl-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sol); border: 3px solid #fffaf0; box-shadow: 0 0 0 2px var(--ink); font: 700 11px/1 var(--font-text); color: var(--on-light, var(--ink)); transition: transform var(--duration-quick, .15s) var(--ease-out, ease-out); }
.pl-pin:hover .pl-dot, .pl-pin:focus-visible .pl-dot { transform: scale(1.18); }
.pl-label { display: none; }
.pl-pin.has-label .pl-label { display: block; position: absolute; left: calc(50% + 20px); white-space: nowrap; padding: 2px 8px; background: #fffaf0; border: 1px solid var(--line-strong, var(--ink)); font: 600 14px/1.4 var(--font-text); }
.pl-list { display: grid; gap: var(--space-5); }
.pl-city h3 { margin: 0 0 var(--space-2); color: var(--ink-muted); }
.pl-city ul { list-style: none; margin: 0; padding: 0; }
.pl-place { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) 0; border-top: var(--stroke-rule) solid var(--ink); }
.pl-place > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 14rem; }
.pl-place b { font: 800 22px/1.15 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.pl-place p { margin: 0; }
.pl-kind { font-size: 14px; color: var(--ink-muted); }
.rg-where-side { display: grid; gap: var(--space-5); }
.rg-tour { margin: 0; color: var(--ink-muted); }
.rg-tour a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: one WhatsApp button that stays in reach (the consent card measures it, see consent.js) */
.rg-sticky { display: none; }
@media (max-width: 699px) {
  .rg-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: var(--shadow-float); }
  .rg-sticky .co-btn { display: flex; width: 100%; justify-content: center; }
}

/* Cards in a row: kickers of one or two lines, so the price rules line up across the row */
@media (min-width: 700px) { .rg-card:not(.rg-feature) .rg-kicker { min-height: 3.4em; } }

/* Owner 2026-10-22: no Casa Oro booking bar on this page, so a gift buyer sees one WhatsApp number (the footer stays). */
.book-bar { display: none; }
body.has-bar { padding-bottom: 0; }

/* Phones: keep the end of the page clear of the fixed WhatsApp bar. After the has-bar override above, which would otherwise
   cancel it; this file loads only on /chocolate/regalos/. */
@media (max-width: 699px) { body.has-bar, body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }