/* Storefront, purchase journey and organizer dashboard — the brand's wine, gold, ivory and night blue
   (fixtures/ventures/social-first/brand/BRAND.md), mobile first. Nothing external: the fonts are our own files served
   under style-src 'self' — the brand's headline face (brand-display.woff2: Prata, SIL OFL, one weight, never faked
   bold), the serif the photo story invitations use as its fallback, and their script for the envelope. The page has
   one moment of motion, the hero envelope opening, and none under prefers-reduced-motion. */

@font-face { font-family: "Brand Display"; src: url("brand-display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "VF Serif"; src: url("vip-serif.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "VF Script"; src: url("vip-script.woff2") format("woff2"); font-display: swap; }

:root {
  --font-display: "Brand Display", "VF Serif", Gabriola, "Sitka Display", "Palatino Linotype", Palatino, Georgia, serif;
  /* Numbers: the display face's 1 reads like an l, so prices, counts and step numbers use the classic serif. */
  --font-numbers: "VF Serif", "Palatino Linotype", Palatino, Georgia, serif;
  --font-script: "VF Script", "Segoe Script", "Apple Chancery", Gabriola, cursive;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg: #FBF7F2;
  --bg-2: #F5E6E1;
  --surface: #FFFFFF;
  --ink: #2A1F2D;
  --muted: #5E5362;
  --gold: #B08A45;
  --gold-text: #7A5A1E;
  --accent: #6E2F3E;
  --accent-hover: #5A2432;
  --accent-ink: #FFFFFF;
  --midnight: #1E2A4A;
  --midnight-ink: #F5F0E4;
  --midnight-gold: #E6CD8F;
  --midnight-deep: #141D35;
  --midnight-muted: #C9CFE3;
  --phone-frame: #0E1426;
  --line: #EADDD3;
  --line-strong: #D9C4B5;
  --focus: #1B4E9B;
  --success: #1F6B45;
  --success-bg: #E7F4EC;
  --error: #A3261F;
  --error-bg: #FBEAE8;
  --ribbon-bg: #FFF4D6;
  --ribbon-ink: #5A4300;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(42, 31, 45, 0.06);
  --shadow: 0 1px 2px rgba(42, 31, 45, 0.05), 0 14px 36px -18px rgba(42, 31, 45, 0.28);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
html[data-active-lang="en"] [data-lang="es"], html[data-active-lang="es"] [data-lang="en"] { display: none !important; }

body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Type scale 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 / 60; headings in the brand's face (its one weight), tight and balanced. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; margin: 0 0 0.6rem; color: var(--ink); text-wrap: balance; }
/* The fallback serif's old-style figures make a 1 look like an I: numbers are set as lining figures. */
h1, h2, h3, h4, .price-amount, .summary-pkg, .totals .total dd { font-variant-numeric: lining-nums; }
h1 { font-size: clamp(2rem, 5.5vw + 0.5rem, 3.75rem); }
h2 { font-size: clamp(1.875rem, 4.4vw, 2.5rem); }
h3, .h3 { font-size: 1.5rem; }
.h4 { font-size: 1.25rem; }
p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85em; background: var(--bg-2); padding: 0.1em 0.35em; border-radius: 6px; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.fine { font-size: 0.875rem; color: var(--muted); }
.eyebrow { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.7rem; }
.lead { font-size: clamp(1.125rem, 2.4vw, 1.25rem); color: var(--muted); max-width: 38rem; }
.lead-sm { color: var(--muted); max-width: 44rem; margin-left: auto; margin-right: auto; }
.section { padding: 3.5rem 0; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* ---------------------------------------------------------------- sandbox ribbon, header, footer ---------------------------------------------------------------- */
.sandbox-ribbon {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 0.6rem; padding: 0.45rem var(--gutter);
  background: var(--ribbon-bg); color: var(--ribbon-ink); font-size: 0.82rem; text-align: center; border-bottom: 1px dashed #C9A449;
}
.sandbox-ribbon strong { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.74rem; }

.site-header { position: sticky; top: 0; z-index: 30; background: rgba(251, 247, 242, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; margin-right: auto; min-height: 44px; }
.brand-mark { color: var(--gold); }
.brand-name { font-family: var(--font-display); font-size: 1.65rem; letter-spacing: 0.02em; line-height: 1; }
/* The Fiestrella wordmark (outlined letters, gold star over the i): never re-set in a font (BRAND.md §5). */
.brand-wordmark { display: block; width: auto; height: 30px; }
.site-footer .brand-wordmark { height: 34px; }
.site-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; }
.site-nav a:hover { background: var(--bg-2); }
.nav-toggle { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 0.9rem var(--font-body); cursor: pointer; }
.has-nav-toggle .site-nav { display: none; order: 10; width: 100%; flex-direction: column; padding: 0.5rem 0 1rem; }
.has-nav-toggle .site-nav.is-open { display: flex; }
.lang-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; background: var(--surface); }
.lang-switch button { min-width: 44px; min-height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 0.8rem var(--font-body); letter-spacing: 0.08em; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.site-footer { background: var(--midnight); color: var(--midnight-ink); padding: 3rem 0 2.5rem; margin-top: 2rem; }
.site-footer a { color: var(--midnight-ink); }
.site-footer .fine { color: #C9CFE3; }
.site-footer code { background: rgba(255, 255, 255, 0.1); color: var(--midnight-ink); }
.footer-grid { display: grid; gap: 2rem; }
.footer-brand .brand { color: var(--midnight-ink); }
.footer-brand .brand-mark { color: var(--midnight-gold); }
.footer-tagline { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.4; color: var(--midnight-gold); }
.footer-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-notices { display: grid; gap: 0.6rem; }
.site-footer .notice { background: rgba(255, 255, 255, 0.07); border-color: rgba(230, 205, 143, 0.45); color: var(--midnight-ink); }
.site-footer-min { background: transparent; color: var(--muted); padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); }
.site-footer-min a { color: var(--muted); }

.notice { border: 1px solid var(--line-strong); border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 0.75rem 1rem; background: var(--surface); font-size: 0.92rem; }
.notice-private { border-left-color: var(--accent); }
.notice-sandbox, .notice-draft { border-left-color: #C9A449; background: var(--ribbon-bg); color: var(--ribbon-ink); }
.tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tag-sandbox { background: var(--ribbon-bg); color: var(--ribbon-ink); border: 1px dashed #C9A449; }
.chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin: 0; }
.chip-proposed { background: var(--bg-2); color: var(--gold-text); }
.chip-demo { background: rgba(30, 42, 74, 0.86); color: var(--midnight-ink); }
.sandbox-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); margin-bottom: 1.2rem; }

/* ---------------------------------------------------------------- buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; max-width: 100%; padding: 0.75rem 1.4rem; border-radius: 999px;
  border: 1px solid transparent; font: 600 0.98rem/1.2 var(--font-body); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; text-align: center; touch-action: manipulation;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 24px -14px rgba(110, 47, 62, 0.9); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); border-color: var(--gold); }
.btn-outline { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn-outline:hover { background: var(--bg-2); }
/* On the night-blue bands: the gold of the brand's star, and a light outline. */
.btn-gold { background: var(--midnight-gold); color: var(--midnight); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.7); }
.btn-gold:hover { background: #F0DCA8; transform: translateY(-1px); }
.btn-light { background: transparent; color: var(--midnight-ink); border-color: rgba(245, 240, 228, 0.55); }
.btn-light:hover { background: rgba(245, 240, 228, 0.08); border-color: var(--midnight-ink); }
.btn-lg { min-height: 54px; padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.btn-sm { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; transform: none; }
.text-link { font-weight: 600; }

/* ---------------------------------------------------------------- home ---------------------------------------------------------------- */
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 1.1rem; }
.section-intro { max-width: 44rem; margin-bottom: 2rem; }
.section-intro h2 { font-size: clamp(1.875rem, 4.6vw, 3rem); line-height: 1.06; }
.section-intro p { color: var(--muted); font-size: 1.125rem; }
.section-intro-center { margin-left: auto; margin-right: auto; text-align: center; }
/* A section's title beside its one-paragraph introduction (stacked on phones). */
.section-head { display: grid; gap: 0.75rem 3rem; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.875rem, 4.6vw, 3rem); line-height: 1.06; margin: 0; }
.section-head p { color: var(--muted); font-size: 1.125rem; margin: 0; max-width: 36rem; }

/* The screenshots of the samples, in a plain phone frame. */
.phone-shot {
  width: min(250px, 64vw); aspect-ratio: 390 / 700; padding: 8px; border-radius: 34px; background: var(--phone-frame);
  box-shadow: 0 34px 60px -30px rgba(14, 20, 38, 0.75), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
}
.phone-shot-img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; background: #FBF7F2; }
.phone-shot-sm { width: min(200px, 56vw); }

/* The night-blue band at the top: the promise, two buttons, the price, and the envelope that opens. */
.home-hero {
  position: relative; overflow: hidden; color: var(--midnight-ink); padding-block: 2.5rem 3.25rem;
  background: radial-gradient(110% 80% at 88% 0%, #2B3A66 0%, transparent 58%), radial-gradient(80% 70% at 0% 100%, var(--midnight-deep) 0%, transparent 60%), var(--midnight);
}
.home-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.home-hero h1 { color: var(--midnight-ink); font-size: clamp(2rem, 5vw + 0.5rem, 3.25rem); line-height: 1.08; max-width: 12em; margin-bottom: 1rem; }
.home-hero-sub { font-size: 1.125rem; line-height: 1.55; color: #DDE2F0; max-width: 34rem; }
.home-hero .hero-cta { margin: 1.5rem 0 1rem; }
.home-hero-price { font-size: 0.875rem; color: var(--midnight-muted); margin: 0; }
.home-hero-price strong { color: var(--midnight-gold); font-size: 1rem; }
/* What we are, in four lines under the hero: for whom, done for you, in both languages, made for WhatsApp. */
.home-pillars { background: var(--surface); border-bottom: 1px solid var(--line); }
.pillar-list { list-style: none; margin: 0; padding: 1.5rem 0; display: grid; gap: 1.1rem 2rem; }
.pillar-list li { display: grid; gap: 0.2rem; padding-left: 1rem; border-left: 2px solid var(--gold); }
.pillar-list strong { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.25; color: var(--ink); }
.pillar-list span:not([data-lang]) { font-size: 0.9375rem; color: var(--muted); line-height: 1.45; }
.home-hero :focus-visible, .home-designs :focus-visible, .home-final :focus-visible, .site-footer :focus-visible, .pkg-card.is-featured :focus-visible { outline-color: var(--midnight-gold); }

/* The signature moment: the sealed envelope, built like the invitation's own (envelope.css), opens and the real
   sample rises out of it. The static rules below are the finished, open state; the opening animation is declared
   only for people who have not asked for reduced motion (further down). Paper, liner and wax are the Ivory & Gold
   palette of the sample it holds. */
.hero-scene { margin: 0; display: grid; justify-items: center; gap: 0.6rem; width: 100%; }
.hero-greeting { margin: 0; font-family: var(--font-script); font-size: clamp(2rem, 6.4vw, 2.75rem); line-height: 1.1; color: var(--midnight-gold); text-align: center; }
.hero-env-link { display: block; width: min(100%, 400px); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hero-env-link:focus-visible { outline: 3px solid var(--midnight-gold); outline-offset: 8px; border-radius: 12px; }
.hero-env { position: relative; margin-top: 50%; aspect-ratio: 1.42; clip-path: inset(-300% -40% 0 -40%); }
.hero-env-back { position: absolute; inset: 0; z-index: 0; border-radius: 8px; background-color: #7A5A1E; background-image: repeating-linear-gradient(135deg, transparent 0 14px, #9C7A36 14px 15px); box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.85); }
.hero-env-card { position: absolute; left: 10%; width: 80%; bottom: 7%; z-index: 2; border-radius: 6px; overflow: hidden; background: #FFFDF7; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45); transform: translateY(0); }
.hero-env-img { width: 100%; height: auto; }
/* The pocket's V notch (down to 57% at the centre) and its lower shade (up to 43%) are painted with hard-stop
   gradients, one per half, rather than clipped: a clip-path here is dropped by the browser while the layers over it
   animate. The angles and stops follow from the envelope's 1.42 aspect (each half is 0.71 of its height). */
.hero-env-pocket {
  position: absolute; inset: 0; z-index: 3; border-radius: 8px; background-repeat: no-repeat; background-size: 50% 100%;
  background-position: left top, right top, left top, right top;
  background-image: linear-gradient(141.2deg, transparent 63.6%, #E8DCC1 63.85%), linear-gradient(218.8deg, transparent 63.6%, #E8DCC1 63.85%),
    linear-gradient(218.8deg, transparent 36.2%, #F3EAD6 36.45%), linear-gradient(141.2deg, transparent 36.2%, #F3EAD6 36.45%);
}
/* The flap is two triangles over the same crease: the closed one (paper, over the pocket) folds flat (scaleY 1 → 0)
   and hides; the open one (the lined inside, behind the card) unfolds upward (scaleY 0 → −1), its tip at the top like
   a real opened flap. Only 2D transforms, which every browser composites reliably. */
.hero-env-flap { position: absolute; left: 0; right: 0; top: 0; height: 63%; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hero-env-flap-closed { z-index: 4; visibility: hidden; transform: scaleY(0); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.06)), #EDE2CA; }
.hero-env-flap-open { z-index: 1; transform: scaleY(-1); background-color: #7A5A1E; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 55%), repeating-linear-gradient(135deg, transparent 0 14px, #9C7A36 14px 15px); }
.hero-env-seal { position: absolute; left: 50%; top: 63%; width: 24%; min-width: 64px; aspect-ratio: 1; z-index: 5; transform: translate(-50%, -50%); }
.hero-env-seal-half { position: absolute; inset: 0; opacity: 0; }
.hero-env-seal-left { clip-path: polygon(0 0, 53% 0, 47% 38%, 54% 62%, 49% 100%, 0 100%); transform: translate(-16%, 14%) rotate(-16deg); }
.hero-env-seal-right { clip-path: polygon(53% 0, 100% 0, 100% 100%, 49% 100%, 54% 62%, 47% 38%); transform: translate(16%, 14%) rotate(16deg); }
.hero-seal-art { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-seal-letter { font-family: var(--font-script); text-anchor: middle; fill: #F7E9C9; opacity: 0.92; }
.hero-seal-shadow { fill: #4E380C; opacity: 0.85; }
.hero-seal-n1 .hero-seal-letter { font-size: 44px; }
.hero-seal-n2 .hero-seal-letter { font-size: 34px; }
.hero-seal-n3 .hero-seal-letter { font-size: 27px; }
.hero-scene figcaption { font-size: 0.8125rem; color: var(--midnight-muted); text-align: center; max-width: 26rem; margin-top: 0.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-env-seal-left { animation: hero-seal-left 0.55s var(--ease) 0.8s both; }
  .hero-env-seal-right { animation: hero-seal-right 0.55s var(--ease) 0.8s both; }
  .hero-env-flap-closed { animation: hero-flap-close 0.45s cubic-bezier(0.55, 0.05, 0.85, 0.5) 1.15s both; }
  .hero-env-flap-open { animation: hero-flap-open 0.5s cubic-bezier(0.15, 0.5, 0.35, 1) 1.6s both; }
  .hero-env-card { animation: hero-card 1.1s cubic-bezier(0.18, 0.8, 0.24, 1) 1.85s both; }
  .hero-env-link:hover .hero-env-card { translate: 0 -2%; transition: translate 0.25s var(--ease); }
}
@keyframes hero-seal-left { from { transform: none; opacity: 1; } to { transform: translate(-16%, 14%) rotate(-16deg); opacity: 0; } }
@keyframes hero-seal-right { from { transform: none; opacity: 1; } to { transform: translate(16%, 14%) rotate(16deg); opacity: 0; } }
@keyframes hero-flap-close { 0% { transform: scaleY(1); visibility: visible; } 99% { visibility: visible; } 100% { transform: scaleY(0); visibility: hidden; } }
@keyframes hero-flap-open { from { transform: scaleY(0); } to { transform: scaleY(-1); } }
@keyframes hero-card { from { transform: translateY(54%); } to { transform: translateY(0); } }

/* Samples: three working invitations, each with its own first screen. */
.home-samples { background: var(--surface); border-bottom: 1px solid var(--line); }
.sample-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sample-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.75rem 1.1rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.sample-shot { display: block; position: relative; aspect-ratio: 390 / 420; border-radius: 10px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-sm); }
.sample-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sample-body { min-width: 0; }
.sample-body h3 { font-size: 1.5rem; margin: 0 0 0.3rem; }
.sample-pkg { font-size: 0.875rem; font-weight: 600; color: var(--gold-text); margin: 0 0 0.15rem; }
.sample-body > p:not(.sample-pkg) { color: var(--muted); font-size: 0.95rem; }
.sample-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.75rem; }
.sample-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.sample-card .state { margin-top: 0.75rem; }

/* What guests get, then what the hosts get: a phone beside each list, the hosts' block on the rose ground. */
.experience-block { display: grid; gap: 1.5rem; padding: 2rem 0 0; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.experience-block-hosts { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); background: var(--bg-2); border-top: 0; }
.experience-shot { margin: 0; display: grid; justify-items: center; gap: 0.6rem; }
.experience-shot .phone-shot { width: min(220px, 60vw); }
.experience-shot figcaption { font-size: 0.8125rem; color: var(--muted); text-align: center; }
.experience-copy { min-width: 0; }
.experience-copy h3 { font-size: clamp(1.5rem, 3.4vw, 1.875rem); margin-bottom: 0.9rem; }
.features + .tier-label { margin-top: 1.25rem; }
.tier-label { font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }

/* The designs: every palette as a real screenshot of the same sample, on the night blue. */
.home-designs { background: var(--midnight); color: var(--midnight-ink); }
.home-designs h2, .home-designs h3 { color: var(--midnight-ink); }
.home-designs .section-head p, .home-designs .design-story p { color: #DDE2F0; }
.design-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.9rem; }
.design-tile { margin: 0; min-width: 0; }
.design-shot { position: relative; aspect-ratio: 39 / 56; border-radius: 12px; overflow: hidden; background: var(--midnight-deep); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.design-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.design-name { margin: 0.6rem 0 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.2; text-align: center; }
.design-note { margin: 0.1rem 0 0; font-size: 0.8125rem; color: var(--midnight-muted); text-align: center; }
.design-caption { margin: 1.5rem auto 0; font-size: 0.875rem; color: var(--midnight-muted); text-align: center; max-width: 38rem; }
.design-story { margin: 2.5rem auto 0; max-width: 40rem; text-align: center; }
.design-story h3 { font-size: clamp(1.5rem, 3.4vw, 1.875rem); }

/* How it works: an ordered process, so the steps keep their numbers (small, in the serif). */
.home-steps { background: var(--surface); border-top: 1px solid var(--line); }
.steps-grid { display: grid; gap: 1.5rem; }
.steps-intro { margin-bottom: 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: step; }
.timeline-step { position: relative; padding-left: 3.25rem; }
.timeline-step::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: -0.2rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-text); font: 600 1.125rem/2.25rem var(--font-numbers); font-variant-numeric: lining-nums; text-align: center;
}
.timeline-step h3 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.timeline-step p { color: var(--muted); }

/* We are new (no reviews), next to the first questions. */
.home-trust { background: var(--bg); }
.trust-grid { display: grid; gap: 2.5rem; }
.honest-note { padding: 1.5rem 1.4rem; border: 1px solid var(--line-strong); border-left: 4px solid var(--gold); border-radius: var(--radius-md); background: var(--surface); align-self: start; }
.honest-note h2, .home-trust .faq-teaser h2 { font-size: clamp(1.5rem, 3.6vw, 1.875rem); }
.honest-note p { color: var(--muted); }

.home-final { background: var(--accent); color: #FFFFFF; padding-block: 3.5rem; text-align: center; }
.home-final h2 { color: #FFFFFF; font-size: clamp(1.875rem, 4.6vw, 3rem); }
.home-final p { color: #F3E4E8; font-size: 1.125rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.home-final .hero-cta { justify-content: center; margin-bottom: 0; }
.home-final .btn-gold { color: var(--accent); }

/* The sample pages keep their illustrated phone. */
.phone {
  position: relative; width: min(280px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 12px; background: #1A1420;
  box-shadow: 0 40px 70px -30px rgba(42, 31, 45, 0.55), inset 0 0 0 2px #3A3040;
}
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 999px; background: #1A1420; z-index: 2; }
.phone-lg { width: min(300px, 80vw); }
.phone-screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #FBF3EF; }
.phone-screen.theme-noche-azul { background: #0D1532; }
.phone-screen.theme-jardin-esmeralda { background: #F3F6EE; }
.phone-art { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- packages ---------------------------------------------------------------- */
.home-packages { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.pkg-grid { display: grid; gap: 1.25rem; align-items: stretch; }
.pkg-card {
  display: flex; flex-direction: column; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem; box-shadow: var(--shadow); position: relative; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pkg-card.is-highlighted { outline: 3px solid var(--gold); outline-offset: 4px; }
.pkg-card-head h3 { font-size: 2rem; margin-bottom: 0.25rem; }
.tagline { color: var(--muted); font-size: 0.95rem; margin: 0; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.5rem; }
.price-amount { font-family: var(--font-numbers); font-weight: 600; font-size: 3rem; line-height: 1; color: var(--ink); }
.price-large .price-amount { font-size: 3.75rem; }
.price-note { font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.04em; }
.pkg-card-body { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.mini-heading { font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; color: var(--gold-text); margin: 0.2rem 0 0.1rem; }
/* The four limits families ask about first, as numbers (also on the package page's hero). */
.pkg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0; }
.pkg-stats > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.pkg-stats dd { margin: 0; font-family: var(--font-numbers); font-weight: 600; font-size: 1.875rem; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.pkg-stats dt { font-size: 0.8125rem; line-height: 1.3; color: var(--muted); }
.pkg-stats-hero { margin: 1.25rem 0 0; max-width: 34rem; }
/* The package with the most in it, in the night blue of the brand (its label says only that). */
.pkg-flag { display: inline-block; margin: 0 0 0.6rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--midnight-gold); color: var(--midnight); font-size: 0.75rem; font-weight: 700; }
.pkg-card.is-featured { background: var(--midnight); color: var(--midnight-ink); border-color: transparent; box-shadow: 0 34px 64px -34px rgba(14, 20, 38, 0.8); }
.pkg-card.is-featured h3, .pkg-card.is-featured .price-amount { color: var(--midnight-ink); }
.pkg-card.is-featured .tagline, .pkg-card.is-featured .price-note, .pkg-card.is-featured .more, .pkg-card.is-featured .more a { color: var(--midnight-muted); }
.pkg-card.is-featured .mini-heading { color: var(--midnight-gold); }
.pkg-card.is-featured .pkg-stats > div, .pkg-card.is-featured .limits li { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: var(--midnight-ink); }
.pkg-card.is-featured .pkg-stats dd { color: var(--midnight-gold); }
.pkg-card.is-featured .pkg-stats dt { color: var(--midnight-muted); }
.pkg-card.is-featured .icon-check { color: var(--midnight-gold); }
.pkg-card.is-featured .chip-proposed { background: rgba(230, 205, 143, 0.14); color: var(--midnight-gold); }
.pkg-card.is-featured .not-included, .pkg-card.is-featured .pkg-limits { border-top-color: rgba(255, 255, 255, 0.16); }
.pkg-card.is-featured .not-included summary, .pkg-card.is-featured .not-included li, .pkg-card.is-featured .pkg-limits summary { color: var(--midnight-muted); }
.pkg-card.is-featured .not-included summary::before, .pkg-card.is-featured .pkg-limits summary::before { border-color: rgba(255, 255, 255, 0.3); }
.limits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.limits li { font-size: 0.8125rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.features li { display: grid; grid-template-columns: 20px 1fr; gap: 0.55rem; align-items: start; font-size: 0.95rem; }
.features-lg li { font-size: 1.02rem; }
.icon-check { color: var(--success); margin-top: 0.25rem; }
.more { font-size: 0.875rem; color: var(--muted); margin: 0; }
.more a { display: inline-flex; align-items: center; min-height: 44px; }
.not-included, .pkg-limits { margin-top: 0.4rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.not-included summary, .pkg-limits summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); list-style: none; }
.not-included summary::-webkit-details-marker, .pkg-limits summary::-webkit-details-marker { display: none; }
.not-included summary::before, .pkg-limits summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 0.9rem; flex: none; }
.not-included[open] summary::before, .pkg-limits[open] summary::before { content: "−"; }
.pkg-limits .limits { margin-top: 0.5rem; }
.not-included ul, .not-list { margin: 0.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.not-included li, .not-list li { font-size: 0.875rem; color: var(--muted); padding-left: 1.3rem; position: relative; }
.not-included li::before, .not-list li::before { content: "—"; position: absolute; left: 0; color: var(--line-strong); }

/* ---------------------------------------------------------------- FAQ ---------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: 0.8rem 0; font-weight: 600; font-size: 1.02rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--gold-text); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 0 1.1rem; color: var(--muted); }
.faq-teaser .text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; }

/* ---------------------------------------------------------------- package and sample pages ---------------------------------------------------------------- */
.breadcrumb ol { list-style: none; margin: 0; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.875rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); }
.pkg-hero, .sample-hero { padding: 1.5rem 0 3rem; }
.pkg-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.pkg-hero { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.pkg-kicker { font-size: 0.875rem; font-weight: 600; color: var(--gold-text); margin-bottom: 0.25rem; }
.pkg-hero h1 { font-size: clamp(2.25rem, 7vw, 3.75rem); line-height: 1.04; margin-bottom: 0.5rem; }
.pkg-hero .lead { margin-bottom: 0.25rem; }
.order-box { margin-top: 1.5rem; display: grid; gap: 0.6rem; max-width: 28rem; }
.order-box .form-status:empty { min-height: 0; }
.pkg-sample-link { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pkg-sample-link .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.pkg-hero-shot { margin: 0; display: grid; justify-items: center; gap: 0.75rem; }
.pkg-hero-shot .phone-shot { width: min(270px, 70vw); }
.pkg-hero-shot figcaption { font-size: 0.875rem; color: var(--muted); text-align: center; max-width: 22rem; }
.pkg-detail-grid { display: grid; gap: 2rem; }
.pkg-main h2 { font-size: 2rem; margin-top: 1.8rem; }
.pkg-main h2:first-child { margin-top: 0; }
.limit-table { margin: 0 0 1rem; display: grid; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.limit-table > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); }
.limit-table > div:last-child { border-bottom: 0; }
.limit-table dt { color: var(--muted); font-size: 0.92rem; }
.limit-table dd { margin: 0; font-weight: 600; }
.pkg-aside { display: grid; gap: 1rem; align-content: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm); display: grid; gap: 0.7rem; align-content: start; }
.card-soft { background: #FDF8F4; box-shadow: none; }
.pkg-story-card { margin: 0; justify-items: center; text-align: center; }
.pkg-story-card figcaption { font-size: 0.875rem; color: var(--muted); }
/* Every package side by side; the page's own package is marked, and the feature names stay put while the table scrolls sideways. */
.compare-section { background: var(--surface); border-top: 1px solid var(--line); }
/* position: relative keeps the table's visually hidden labels (absolutely positioned) inside the scroll box; without
   it they escaped it and widened the page on phones (found in Codex's review, 2026-09-27). */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; font-size: 0.92rem; }
.compare th, .compare td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; background: var(--bg); }
.compare tbody th { font-weight: 500; color: var(--muted); }
.compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 11rem; box-shadow: inset -1px 0 0 var(--line); }
.compare thead th:first-child { background: var(--bg); }
.compare td { font-weight: 600; }
.compare .is-current { background: #FBF1F3; }
.compare thead .is-current { box-shadow: inset 0 3px 0 var(--accent); }
.yes { color: var(--success); display: inline-flex; }
.no { color: var(--muted); }

/* ---------------------------------------------------------------- legal ---------------------------------------------------------------- */
.page-head { padding-top: 2.5rem; }
.prose { margin-top: 1.5rem; }
.prose h2 { font-size: 1.5rem; margin-top: 1.8rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-left: 1.3rem; }

/* ---------------------------------------------------------------- journey: checkout ---------------------------------------------------------------- */
.sandbox-panel { border: 2px dashed #C9A449; background: var(--ribbon-bg); color: var(--ribbon-ink); border-radius: var(--radius-md); padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.sandbox-panel-title { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 1rem; margin-bottom: 0.3rem; }
.checkout-grid { display: grid; gap: 1.2rem; margin-top: 1rem; }
.summary-pkg { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; margin: 0; }
.totals { margin: 0.4rem 0 0; display: grid; gap: 0.4rem; }
.totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 600; }
.totals .total dd { font-family: var(--font-numbers); font-size: 1.8rem; font-weight: 600; }
.pay-actions { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.form-status { min-height: 1.4rem; font-weight: 600; margin: 0; }
.form-status[data-tone="success"], .copy-status[data-tone="success"] { color: var(--success); }
.form-status[data-tone="error"], .copy-status[data-tone="error"] { color: var(--error); }
.form-status[data-tone="info"] { color: var(--muted); }
.state { border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-size: 0.95rem; }
.state-empty { background: var(--bg); border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; }
.state-info { background: #EEF2FA; border: 1px solid #CBD5EA; color: #26324F; }

/* ---------------------------------------------------------------- journey: intake form ---------------------------------------------------------------- */
.intake-form { display: grid; gap: 1.2rem; margin-top: 1.5rem; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem 1.1rem 1.4rem; margin: 0; background: var(--surface); display: grid; gap: 1rem; min-width: 0; }
.fieldset legend { font-family: var(--font-display); font-size: 1.45rem; padding: 0 0.4rem; color: var(--ink); }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field label { display: flex; gap: 0.25rem; align-items: baseline; }
.field-label { font-weight: 600; font-size: 0.93rem; }
.req { color: var(--error); font-weight: 700; }
.hint { font-size: 0.83rem; color: var(--muted); margin: 0; }
.field-error { font-size: 0.85rem; color: var(--error); font-weight: 600; margin: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: #FFFFFF;
  color: var(--ink); font: 400 1rem/1.4 var(--font-body); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea { min-height: 104px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(27, 78, 155, 0.2); outline: none; }
[aria-invalid="true"] { border-color: var(--error) !important; background: var(--error-bg) !important; }
input[type="file"] { width: 100%; min-height: 48px; padding: 0.6rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); font: inherit; }
.field-pair { display: grid; gap: 1rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.choice-option { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.55rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #FFFFFF; cursor: pointer; }
.choice-option:has(input:checked) { border-color: var(--accent); background: #FBF1F3; }
.choice-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.choice-option.consent { align-items: flex-start; }
.choice-option.consent input { margin-top: 0.2rem; }
.repeat-row { display: grid; gap: 0.8rem; padding: 0.9rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.repeat-group { display: grid; gap: 0.8rem; }
.repeat-group > .field-label { margin: 0; }
fieldset.repeat-group { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.repeat-group > legend { padding: 0; margin-bottom: 0.4rem; }
/* A choice question's options: a nested list inside the question's row, as wide as the row. */
.repeat-row > .repeat-options { grid-column: 1 / -1; }
.repeat-options > .repeat-row { background: var(--surface); padding: 0.7rem; }
.repeat-options > [data-repeat-add] { justify-self: start; }
.photo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.photo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.photo-name { font-weight: 600; overflow-wrap: anywhere; flex: 1 1 10rem; }
.photo-state { font-size: 0.85rem; color: var(--muted); }
.photo-state[data-tone="success"] { color: var(--success); }
.photo-state[data-tone="error"] { color: var(--error); }
/* The invitation style (Premium quinceañeras) and each photo's place in the story. */
.design-grid { display: grid; gap: 0.7rem; }
.design-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; align-items: start; min-height: 48px; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #FFFFFF; cursor: pointer; }
.design-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.design-option input { grid-row: span 2; width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--accent); }
.design-name { font-weight: 600; }
.design-note { font-size: 0.86rem; color: var(--muted); }
.photo-role { display: grid; gap: 0.3rem; flex: 1 1 100%; }
.photo-role label { font-weight: 600; font-size: 0.88rem; }
.photo-role select { min-height: 44px; }
.theme-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.theme-option { display: grid; gap: 0.5rem; padding: 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #FFFFFF; cursor: pointer; position: relative; }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-option input { position: absolute; top: 0.9rem; right: 0.9rem; width: 20px; height: 20px; accent-color: var(--accent); }
.swatch { display: block; height: 72px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(135deg, #FBF3EF, #F6E6E0); }
.swatch-rosa-dorada { background: radial-gradient(circle at 30% 35%, #D9919E 0 14%, transparent 15%), radial-gradient(circle at 70% 60%, #C2994B 0 8%, transparent 9%), linear-gradient(135deg, #FFF9F6, #F6E6E0); }
.swatch-noche-azul { background: radial-gradient(circle at 72% 30%, #DCC07E 0 12%, transparent 13%), radial-gradient(circle at 30% 65%, #9AAEE3 0 6%, transparent 7%), linear-gradient(135deg, #22306A, #0D1532); }
.swatch-jardin-esmeralda { background: radial-gradient(circle at 30% 40%, #7FA78E 0 14%, transparent 15%), radial-gradient(circle at 68% 62%, #E3A9A1 0 9%, transparent 10%), linear-gradient(135deg, #FFFFFA, #E4ECDF); }
.swatch-marfil-oro { background: radial-gradient(circle at 30% 35%, #E8D3A8 0 14%, transparent 15%), radial-gradient(circle at 70% 60%, #B8964D 0 8%, transparent 9%), linear-gradient(135deg, #FFFDF7, #F1E8D4); }
.swatch-azul-cielo { background: radial-gradient(circle at 30% 35%, #A9C8E6 0 14%, transparent 15%), radial-gradient(circle at 70% 60%, #C2A15A 0 8%, transparent 9%), linear-gradient(135deg, #FFFFFF, #DFEAF5); }
.swatch-lavanda { background: radial-gradient(circle at 30% 35%, #C9B0E3 0 14%, transparent 15%), radial-gradient(circle at 70% 60%, #C2A15A 0 8%, transparent 9%), linear-gradient(135deg, #FFFFFF, #E9E0F3); }
.swatch-borgona { background: radial-gradient(circle at 72% 30%, #E5BE86 0 12%, transparent 13%), radial-gradient(circle at 30% 65%, #D99AA6 0 6%, transparent 7%), linear-gradient(135deg, #4A1A28, #1E0910); }
.theme-name { font-weight: 600; font-size: 0.92rem; }
.form-actions { display: grid; gap: 0.6rem; justify-items: start; }
.error-summary { border: 2px solid var(--error); background: var(--error-bg); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.error-summary h2 { color: var(--error); }
.error-summary ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.error-summary a { color: var(--error); font-weight: 600; }
.intake-done { margin-top: 1.5rem; }
.organizer-once { display: grid; gap: 0.7rem; }

/* ---------------------------------------------------------------- journey: order status ---------------------------------------------------------------- */
.order-card { gap: 1rem; }
.order-state { font-size: 1.1rem; margin: 0; }
.order-state-label { color: var(--muted); }
.payment-text { margin: 0; padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.payment-text[data-payment-msg="verified_test_payment"] { background: var(--success-bg); border-color: #BFE0CB; color: #174F33; }
.payment-text[data-payment-msg="failed"] { background: var(--error-bg); border-color: #F0C6C1; color: #7E1E18; }
.progress { list-style: none; margin: 0.4rem 0; padding: 0; display: grid; gap: 0.55rem; }
.step-item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; color: var(--muted); }
.step-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); flex: none; }
.step-item[data-status="done"] { color: var(--ink); }
.step-item[data-status="done"] .step-dot { background: var(--success); border-color: var(--success); }
.step-item[data-status="current"] { color: var(--ink); font-weight: 700; }
.step-item[data-status="current"] .step-dot { border-color: var(--accent); background: #FBF1F3; box-shadow: 0 0 0 4px rgba(110, 47, 62, 0.12); }
.order-links, .next-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.poll-status { font-size: 0.85rem; color: var(--muted); min-height: 1.3rem; margin: 0; }
.poll-status[data-tone="error"] { color: var(--error); }
.timeline-card { margin-top: 1.2rem; }
.timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.timeline-list li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.8rem; font-size: 0.92rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.timeline-list time { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- organizer dashboard ---------------------------------------------------------------- */
.organizer h1 { margin-bottom: 0.8rem; }
.organizer .notice-private { margin-bottom: 1.4rem; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.1rem 1rem; box-shadow: var(--shadow-sm); }
.tile-value { font-family: var(--font-numbers); font-weight: 600; font-size: 2.6rem; line-height: 1; margin: 0 0 0.3rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.tile-label { font-weight: 600; font-size: 0.9rem; margin: 0; }
.tile-sub { font-size: 0.8rem; color: var(--muted); margin: 0.2rem 0 0; }
.capacity { display: grid; gap: 0.3rem; margin: 1rem 0 1.6rem; }
.capacity meter { width: 100%; height: 12px; }
.org-grid { display: grid; gap: 1.2rem; }
.org-main, .org-aside { display: grid; gap: 1.2rem; align-content: start; min-width: 0; }
.org-section { gap: 0.9rem; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; }
.section-head h2 { margin: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.data-table th, .data-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: var(--bg); font-weight: 700; }
.data-table tbody th { font-weight: 600; }
.cell-label { display: none; }
.pill { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.pill-yes { background: var(--success-bg); border-color: #BFE0CB; color: #174F33; }
.pill-no { background: #F3EFF3; border-color: #DCD3DC; color: #4A3F4C; }
.pill-state { white-space: nowrap; }
.household-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.household { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem 1rem; display: grid; gap: 0.6rem; background: var(--bg); }
.household-new { border-color: var(--gold); background: #FFFBF1; }
.household-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem; }
.household-name { font-weight: 700; margin: 0; }
.household-meta { font-size: 0.85rem; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.link-once { margin: 0; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: start; }
.copy-source { font-size: 0.88rem !important; background: #FFFFFF; min-height: 44px; }
textarea.copy-source { min-height: 96px; }
.copy-status { grid-column: 1 / -1; font-size: 0.82rem; font-weight: 600; min-height: 1.1rem; }
.household-form { display: grid; gap: 0.9rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.form-grid { display: grid; gap: 0.8rem; }
.created-links { display: grid; gap: 0.7rem; }
.subsection { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.wa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.reminder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.reminder { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.reminder-kind { font-weight: 600; margin: 0 0 0.1rem; font-size: 0.93rem; }
.reminder p.muted { margin: 0; font-size: 0.85rem; }
/* Guest needs (answers to the event's extra RSVP questions) */
.needs-grid { display: grid; gap: 1rem; }
/* Guest groups on the organizer page. */
.household-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0.3rem 0 0.5rem; }
.household-group select { min-height: 40px; }
.group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.group-item { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); display: grid; gap: 0.35rem; }
/* Seating: a table next to each family, and each table with its families. */
.household-table { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0 0 0.5rem; }
.household-table input { min-height: 40px; max-width: 14rem; }
.table-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.table-item { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); display: grid; gap: 0.35rem; align-content: start; }
/* Co-hosts and family links (organizer page) and a relative's family link page. */
.access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.access-item { padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); display: grid; gap: 0.3rem; }
.access-item .reminder-actions:empty { display: none; }
.access-form { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.family-form { display: grid; gap: 0.9rem; }
.family-more > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.family-more[open] > summary { margin-bottom: 0.6rem; }
.family-more > .family-row + .family-row { margin-top: 0.9rem; }
/* The note on the invitation (organizer page). */
.update-current { display: grid; gap: 0.35rem; margin: 0.4rem 0 0; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-sm); background: var(--bg); }
.update-texts { display: grid; gap: 0.3rem; }
.update-text { margin: 0; overflow-wrap: anywhere; }
.update-text .pill { margin-right: 0.3rem; }
.update-form { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.update-form textarea { width: 100%; min-height: 4.5rem; resize: vertical; }
/* A family's answer the hosts recorded (received by message), and the form to record it. */
.pill-host { background: #FFF6E3; border-color: #E8D3A6; color: #6B4E12; margin-left: 0.3rem; }
.record-reply { border-top: 1px dashed var(--line); padding-top: 0.5rem; display: grid; gap: 0.6rem; }
.record-reply > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.record-reply textarea { width: 100%; min-height: 3.5rem; resize: vertical; }
.record-choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.record-choice legend { margin-bottom: 0.3rem; }
.choice-inline { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; }
/* Questions from guests (organizer page). */
.question-text { margin: 0; overflow-wrap: anywhere; }
.answered-questions > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.answered-questions[open] > summary { margin-bottom: 0.6rem; }
/* Suggestions for the kind of celebration (event-details form): a typical program, questions guests often ask. */
.preset-start { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.preset-chip { min-height: 44px; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.95rem; line-height: 1.3; text-align: left; cursor: pointer; }
.preset-chip:hover { border-color: var(--accent); }
.preset-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The door on the day (for the phone of whoever greets the guests). */
.door .door-totals { font-weight: 600; color: var(--ink); }
.door-filters { margin: 0.4rem 0 0.8rem; }
.door-list { display: grid; gap: 0.6rem; }
.door-party { display: grid; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem 1rem; background: var(--bg); }
.door-party.is-arrived { background: var(--success-bg); border-color: var(--success); }
.door-state { margin: 0; color: var(--success); font-weight: 600; }
.door-state:empty { display: none; }
.door-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Every button at the door is a one-handed tap target: 48px, "Undo" too. */
.door-actions .btn { min-height: 48px; }
.door-step { min-width: 48px; min-height: 48px; padding: 0; font-size: 1.3rem; line-height: 1; }
/* The hosts' printable lists (by table, by name). Wide tables scroll inside their own box on a phone. */
.lists .lists-table { margin: 0 0 1.4rem; break-inside: avoid; }
.lists .lists-table h3 { margin: 0 0 0.4rem; }
.lists h2 { margin: 1.6rem 0 0.8rem; }
.lists-actions { margin: 0.8rem 0; }
.lists-scroll { overflow-x: auto; }
.lists-grid { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.lists-grid th, .lists-grid td { text-align: left; vertical-align: top; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); }
.lists-grid th { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); }
.lists-grid td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lists-entrance td:last-child { white-space: nowrap; font-weight: 600; }
/* Host command center: replies open or closed, filters, reminders, many families at once. */
.reply-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 0.8rem; }
.reply-filters { display: grid; gap: 0.6rem; margin: 0 0 0.8rem; }
.reply-filters [aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.reminder-item { display: grid; gap: 0.4rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.reminder-body { display: grid; gap: 0.4rem; }
.reminder-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
/* While replies are closed (by the host or the deadline) the names stay and the reminders are put away. */
[data-waiting]:not([data-replies="open"]) .reminder-body { display: none; }
.bulk-add { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; display: grid; gap: 0.6rem; }
.bulk-add > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.bulk-add textarea { width: 100%; font: inherit; }
.needs-block { display: grid; gap: 0.5rem; align-content: start; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.needs-block .h4 { margin: 0; }
.needs-list, .needs-notes, .answer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.needs-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; font-size: 0.93rem; }
.need-count { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.needs-notes li, .answer-list li { font-size: 0.9rem; }
.answer-key { font-weight: 600; }
@media (min-width: 640px) { .needs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Responsive reply table: rows become cards on phones. */
@media (max-width: 639px) {
  .table-wrap:has(.responsive) { border: 0; background: transparent; overflow: visible; }
  .data-table.responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table.responsive, .data-table.responsive tbody, .data-table.responsive tr, .data-table.responsive th, .data-table.responsive td { display: block; width: 100%; }
  .data-table.responsive tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 0.6rem; padding: 0.4rem 0.2rem; background: var(--surface); }
  .data-table.responsive th, .data-table.responsive td { border: 0; padding: 0.35rem 0.8rem; }
  .data-table.responsive tbody th { font-size: 1.02rem; }
  .data-table.responsive .cell-label { display: inline-block; min-width: 6.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .copy-row { grid-template-columns: 1fr; }
  .timeline-list li { grid-template-columns: 1fr; gap: 0.1rem; }
}


/* ---------------------------------------------------------------- wider screens ---------------------------------------------------------------- */
@media (min-width: 640px) {
  :root { --gutter: 1.75rem; }
  .field-pair { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .repeat-row { grid-template-columns: repeat(3, 1fr); }
  .repeat-row.repeat-row-pairs { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .progress { grid-template-columns: repeat(5, 1fr); }
  .step-item { flex-direction: column; text-align: center; gap: 0.4rem; font-size: 0.85rem; }
  .fieldset { padding: 1.6rem 1.6rem 1.7rem; }
  .footer-grid { grid-template-columns: 1.3fr 0.7fr 1.4fr; }
  .design-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .pillar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.75rem 0; }
  .sample-card { grid-template-columns: 150px minmax(0, 1fr); }
  .pkg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pkg-card .pkg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-block-hosts { padding: 2rem 1.75rem; }
}
@media (min-width: 900px) {
  .has-nav-toggle .nav-toggle { display: none !important; }
  .has-nav-toggle .site-nav { display: flex; order: 0; width: auto; flex-direction: row; padding: 0; }
  .section { padding: 5rem 0; }
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; margin-bottom: 2.75rem; }
  .home-hero { padding-block: 4rem 4.5rem; }
  .home-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; }
  .hero-scene { justify-self: end; }
  .pillar-list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 2rem 0; gap: 2.5rem; }
  .sample-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
  /* The picture row keeps its size; the text takes the rest, so every ticket's label starts on the same line. */
  .sample-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1rem; padding: 0; border: 0; background: transparent; }
  .sample-shot { aspect-ratio: 1; border-radius: var(--radius-md); }
  .sample-body h3 { font-size: 1.75rem; }
  .experience-block { grid-template-columns: 300px minmax(0, 1fr); gap: 3.5rem; align-items: center; padding-top: 3rem; margin-top: 2rem; }
  .experience-block-hosts { grid-template-columns: minmax(0, 1fr) 300px; padding: 2.5rem 3rem; }
  .experience-block-hosts .experience-shot { order: 2; }
  .experience-shot .phone-shot { width: 230px; }
  .steps-grid { gap: 2.5rem; }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
  .trust-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; }
  .pkg-grid { grid-template-columns: repeat(3, 1fr); }
  .pkg-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(42, 31, 45, 0.05), 0 24px 44px -20px rgba(42, 31, 45, 0.35); }
  .pkg-hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; }
  .pkg-detail-grid { grid-template-columns: 1.6fr 1fr; gap: 3rem; }
  .checkout-grid { grid-template-columns: 1fr 1fr; }
  .org-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .home-hero-grid { gap: 4rem; }
  .design-grid { gap: 1.75rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* The hero envelope stays open and still: no seal breaking, no flap, no rising card. */
  .hero-env-seal-half, .hero-env-flap, .hero-env-card { animation: none !important; }
}
@media (forced-colors: active) {
  .btn, .lang-switch button, .choice-option, .theme-option, .design-option { border: 1px solid ButtonText; }
}
@media print {
  .site-header, .sandbox-ribbon, .skip-link { position: static; }
  .nav-toggle { display: none !important; }
  /* The printable lists: black on white, no header, buttons or site links, every table's columns lined up with the
     next, the entrance list on its own page. */
  .page-lists .site-header, .page-lists .skip-link, .page-lists [data-print], .page-lists .lists-screen-only, .page-lists .site-footer { display: none !important; }
  .page-lists body, .page-lists .lists { background: #FFFFFF; color: #000000; }
  .page-lists .muted, .page-lists .lists-grid th { color: #333333; }
  .page-lists .lists-grid th, .page-lists .lists-grid td { border-bottom-color: #999999; }
  .page-lists .lists-scroll { overflow: visible; }
  .page-lists .lists-grid { table-layout: fixed; }
  .page-lists .lists-table .lists-grid th:nth-child(1) { width: 30%; }
  .page-lists .lists-table .lists-grid th:nth-child(2) { width: 13%; }
  .page-lists .lists-table .lists-grid th:nth-child(3) { width: 32%; }
  .page-lists .lists-table .lists-grid th:nth-child(4) { width: 25%; }
  .page-lists .lists-entrance th:nth-child(1) { width: 75%; }
  .page-lists .lists-break { break-before: page; }
}