/* Recuerdi · gallery viewer (WED-122): themed profile header, view tabs, dense square grid, lightbox.
   Themes live under [data-theme] on <html>: paper, ink and --brand-accent (all accent shades derive from it, see
   tokens.css). The grid stays calm so the photos dominate. Rule: no one-sided borders on rounded elements. */

/* ---------- themes ---------- */
[data-theme] {
  --gv-title-font: "Cormorant Garamond", Georgia, serif;
  --gv-amp-font: var(--gv-title-font);
  --gv-meta-font: "Cormorant Garamond", Georgia, serif;
  --gv-orn: var(--brand-accent);
  --gv-tile: color-mix(in oklab, var(--ink) 7%, var(--paper));
  --gv-gap-base: 2px;
  --gv-gap: var(--gv-gap-base);
  --gv-tabs-h: 46px;
  --font-display: var(--gv-title-font);
  /* shapes and buttons per theme (WED-123): buttons, fields, cards, tiles; the tab mark; the heart */
  --gv-r-btn: 999px; --gv-r-field: 12px; --gv-r-card: 18px; --gv-r-tile: 0px;
  --gv-btn-font: var(--font-ui); --gv-btn-style: normal; --gv-btn-case: none; --gv-btn-track: .02em; --gv-btn-size: 14px;
  --gv-mark: var(--ink);
  --gv-heart: color-mix(in oklab, #E0475F 78%, var(--brand-accent));
  --gv-ts: 37; /* title size in px on a 390 px phone, for previews that scale the gallery (landing, style cards) */
}
/* A theme inside a page of another look (landing mocks, style cards): derive the accent shades here, like tokens.css
   does at the root of the gallery itself (zero specificity, so a theme's own values win). */
:where([data-theme]) {
  --accent: var(--brand-accent); --accent-ink: #FBF8F2; --accent-hover: oklch(from var(--brand-accent) calc(l + .08) c h);
  --accent-text: oklch(from var(--brand-accent) clamp(.32, calc(l + .06), .42) calc(c * 1.1 + .01) h);
  --accent-soft: color-mix(in oklab, var(--accent-text) 8%, var(--paper));
}
[data-theme="toile"] {
  --paper: #F3F0EA; --paper-2: #EAE6DD; --paper-3: #DFDACF; --ivory: #FAF8F3;
  --ink: #26324A; --ink-2: #44506A; --ink-3: #66718A;
  --rule: rgba(38, 50, 74, .16); --rule-strong: rgba(38, 50, 74, .4);
  --brand-accent: #3F5677; --gv-orn: #6F86A6; --champagne: #9AABC4; --champagne-soft: #DCE2EC;
  /* classic engraving: italic serif buttons, soft fields, hairline grid */
  --gv-btn-font: var(--gv-meta-font); --gv-btn-style: italic; --gv-btn-size: 17px; --gv-btn-track: 0;
  --gv-r-field: 10px; --gv-r-card: 14px; --gv-mark: var(--brand-accent);
}
[data-theme="toscana"] {
  --gv-ts: 30;
  --paper: #F2EEE3; --paper-2: #E9E3D3; --paper-3: #DDD5C1; --ivory: #F9F6EE;
  --ink: #343D25; --ink-2: #4C563A; --ink-3: #6B7357;
  --rule: rgba(52, 61, 37, .16); --rule-strong: rgba(52, 61, 37, .4);
  --brand-accent: #5C6A3B; --gv-orn: #7D8B5A; --gv-wax: #B0603C; --champagne: #B9AE86; --champagne-soft: #E6DFC9;
  /* rustic: small radii, spaced capitals, a wider grid with soft corners */
  --gv-r-btn: 5px; --gv-r-field: 5px; --gv-r-card: 8px; --gv-r-tile: 3px; --gv-gap-base: 4px;
  --gv-btn-case: uppercase; --gv-btn-track: .16em; --gv-btn-size: 12px; --gv-mark: var(--brand-accent);
}
[data-theme="taupe"] {
  --gv-ts: 43;
  --paper: #F1ECE4; --paper-2: #E8E1D6; --paper-3: #DCD3C5; --ivory: #F8F5F0;
  --ink: #3B342D; --ink-2: #554C43; --ink-3: #6B6156; /* 5.2:1 on paper (E8, WED-203) */
  --rule: rgba(59, 52, 45, .16); --rule-strong: rgba(59, 52, 45, .4);
  --brand-accent: #6F5D49; --gv-orn: #A8937A; --champagne: #C3B39C; --champagne-soft: #E7DFD3;
  --gv-title-font: "Pinyon Script", "Cormorant Garamond", cursive; --gv-amp-font: "Cormorant Garamond", Georgia, serif;
  /* minimal: square everything, wide tracking, the tightest grid */
  --gv-r-btn: 0px; --gv-r-field: 0px; --gv-r-card: 0px; --gv-gap-base: 1px;
  --gv-btn-case: uppercase; --gv-btn-track: .26em; --gv-btn-size: 11.5px;
}
[data-theme="burdeos"] {
  --gv-ts: 46;
  --paper: #561520; --paper-2: #4A111B; --paper-3: #3E0E16; --ivory: #621A26;
  --ink: #F6EEE8; --ink-2: #EBD3CC; --ink-3: #D3AFA6;
  --rule: rgba(246, 238, 232, .18); --rule-strong: rgba(246, 238, 232, .45);
  --brand-accent: #EBCFC8; --accent-text: #F3DCD5; --accent-ink: #4A111B; --accent-hover: #F6E2DC;
  --accent-soft: rgba(246, 238, 232, .1); --gv-orn: #E9C9C2; --champagne: #D9B3AA; --champagne-soft: #6B2330;
  --gv-tile: #4A111B; --danger: #F2A08F; --success: #C9DDB3; --on-photo: #FBF8F2;
  --gv-title-font: "Bodoni Moda", "Didot", Georgia, serif; --gv-meta-font: "Bodoni Moda", Georgia, serif;
  color-scheme: dark;
  /* editorial: square, Bodoni capitals, a light accent mark */
  --gv-r-btn: 0px; --gv-r-field: 0px; --gv-r-card: 0px; --gv-gap-base: 3px;
  --gv-btn-font: var(--gv-meta-font); --gv-btn-case: uppercase; --gv-btn-track: .14em; --gv-btn-size: 13px;
  --gv-mark: var(--brand-accent); --gv-heart: #F2A1AE;
}
[data-theme="orquidea"] {
  --gv-ts: 26;
  --paper: #F6F3F5; --paper-2: #EDE8EE; --paper-3: #E1DAE3; --ivory: #FCFAFC;
  --ink: #433D52; --ink-2: #5A536B; --ink-3: #7A738B;
  --rule: rgba(67, 61, 82, .15); --rule-strong: rgba(67, 61, 82, .38);
  --brand-accent: #6E5D93; --gv-orn: #A898C2; --champagne: #C9BEDB; --champagne-soft: #ECE6F3;
  /* soft and airy: round fields and cards, rounded tiles with room between them */
  --gv-r-field: 999px; --gv-r-card: 26px; --gv-r-tile: 8px; --gv-gap-base: 5px;
  --gv-btn-case: uppercase; --gv-btn-track: .2em; --gv-btn-size: 11.5px; --gv-mark: var(--brand-accent);
}
[data-theme="blush"] {
  --gv-ts: 27;
  --paper: #F7EEE9; --paper-2: #F0E3DC; --paper-3: #E6D4CA; --ivory: #FCF7F4;
  --ink: #5B4038; --ink-2: #6F544B; --ink-3: #8E7268;
  --rule: rgba(91, 64, 56, .15); --rule-strong: rgba(91, 64, 56, .38);
  --brand-accent: #96604F; /* WED-411: a touch darker, 4.8:1 for the button's text */ --gv-orn: #C99A8E; --champagne: #D9B7AA; --champagne-soft: #F1E1D9;
  --gv-amp-font: "Parisienne", cursive;
  /* romantic: italic serif buttons, round fields, softly rounded tiles */
  --gv-btn-font: var(--gv-meta-font); --gv-btn-style: italic; --gv-btn-size: 17px; --gv-btn-track: 0;
  --gv-r-field: 999px; --gv-r-card: 22px; --gv-r-tile: 5px; --gv-gap-base: 3px; --gv-mark: var(--brand-accent);
}
[data-theme="toscana"] { --gv-amp-font: "Cormorant Garamond", Georgia, serif; }

/* ---------- page ---------- */
.gv-body { min-height: 100dvh; background: var(--paper); }
.gv-head { max-width: 760px; margin: 0 auto; padding: calc(6px + env(safe-area-inset-top)) var(--gutter) 18px; text-align: center; color: var(--ink); }
.gv-top { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 8px; }
.gv-back { font-size: 12px; color: var(--ink-3); text-decoration: none; letter-spacing: .02em; }
.gv-back:hover { color: var(--ink); }
.gv-preview { font-size: 11px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); }
.gv-orn { display: block; margin: 6px auto 4px; color: var(--gv-orn); overflow: visible; }
.gv-mono { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 26px; fill: var(--ink); stroke: none; }
.gv-title { font-family: var(--gv-title-font); font-weight: 400; font-size: clamp(2.3rem, 9.5vw, 3.6rem); line-height: 1.04; letter-spacing: 0; margin: 4px 0 0; color: var(--ink); text-wrap: balance; }
.gv-amp { font-family: var(--gv-amp-font); font-style: italic; font-weight: 400; color: var(--gv-orn); font-size: .8em; padding: 0 .05em; }
.gv-meta { margin-top: 10px; font-family: var(--gv-meta-font); font-style: var(--gv-meta-style, italic); font-size: 1.12rem; line-height: 1.35; color: var(--ink-2); }
.gv-counts { margin-top: 8px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gv-acts { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; }
.gv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 18px; border-radius: var(--gv-r-btn); border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font-family: var(--gv-btn-font); font-style: var(--gv-btn-style); text-transform: var(--gv-btn-case); letter-spacing: var(--gv-btn-track); font-size: calc(var(--gv-btn-size) - 1px); font-weight: 500; cursor: pointer; text-decoration: none; list-style: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-1), color var(--dur-1); }
.gv-btn::-webkit-details-marker { display: none; }
.gv-btn:hover { background: var(--paper-2); }
.gv-btn--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gv-btn--solid:hover { background: var(--accent-hover); }
.gv-btn--icon { width: 38px; padding: 0; letter-spacing: .08em; font-family: var(--font-ui); font-style: normal; }
.gv-menu { position: relative; }
.gv-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; display: grid; padding: 6px; border-radius: var(--radius-3); background: var(--ivory); border: 1px solid var(--rule); box-shadow: var(--shadow-3); text-align: left; }
.gv-menu__list > a, .gv-menu__list > button { display: block; padding: 10px 12px; border-radius: var(--radius-2); background: none; border: 0; text-align: left; font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer; }
.gv-menu__list > a:hover, .gv-menu__list > button:hover { background: var(--paper-2); }
.gv-menu__list .switch { padding: 10px 12px; font-size: 13px; }
@media (min-width: 560px) { .gv-menu__list { right: 50%; transform: translateX(50%); } }

/* theme headers */
[data-theme="toile"] .gv-head { padding-bottom: 26px; }
[data-theme="toile"] .gv-title { font-style: italic; font-weight: 500; }
[data-theme="toscana"] .gv-title { text-transform: uppercase; letter-spacing: .1em; font-weight: 500; font-size: clamp(1.75rem, 7.6vw, 2.7rem); }
[data-theme="toscana"] .gv-amp { text-transform: none; letter-spacing: 0; font-size: 1.15em; display: block; line-height: .9; margin: .02em 0 .06em; }
[data-theme="taupe"] .gv-title { font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1.1; }
[data-theme="taupe"] .gv-amp { font-style: normal; color: var(--ink-3); }
[data-theme="taupe"] .gv-mono { font-style: normal; font-size: 30px; font-weight: 400; fill: var(--gv-orn); }
[data-theme="burdeos"] .gv-head { padding-bottom: 28px; }
[data-theme="burdeos"] .gv-title { text-transform: uppercase; font-weight: 500; font-size: clamp(2.5rem, 12vw, 4.4rem); line-height: .92; letter-spacing: -.01em; }
[data-theme="burdeos"] .gv-name { display: block; }
[data-theme="burdeos"] .gv-amp { display: block; text-transform: none; font-size: .5em; line-height: 1.3; color: var(--gv-orn); }
[data-theme="burdeos"] .gv-meta { font-style: normal; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 500; }
[data-theme="burdeos"] .gv-orn { margin-top: 22px; margin-bottom: 14px; }
[data-theme="orquidea"] .gv-title { text-transform: uppercase; letter-spacing: .2em; font-weight: 500; font-size: clamp(1.55rem, 6.6vw, 2.4rem); line-height: 1.25; }
[data-theme="orquidea"] .gv-amp { text-transform: none; letter-spacing: 0; font-size: .9em; display: block; line-height: 1; }
[data-theme="orquidea"] .gv-orn { margin-bottom: 0; }
[data-theme="blush"] .gv-title { text-transform: uppercase; letter-spacing: .16em; font-weight: 500; font-size: clamp(1.65rem, 7vw, 2.5rem); line-height: 1.2; }
[data-theme="blush"] .gv-amp { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 1.05em; display: block; line-height: .95; }
.gv-pearl { fill: #FFFDFB; stroke: var(--gv-orn); stroke-width: .7; }
.gv-leaf { fill: currentColor; fill-opacity: .16; stroke-width: .8; }
.gv-petal { fill: var(--paper); }
.gv-olive { fill: color-mix(in oklab, var(--gv-orn) 80%, #2f3a1c); stroke: none; }
.gv-seal__wax { fill: var(--gv-wax, var(--brand-accent)); stroke: none; }
.gv-seal__ring { stroke: rgba(255, 240, 225, .45); stroke-width: .8; }
.gv-seal__txt { font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; font-weight: 600; fill: rgba(255, 238, 222, .9); stroke: none; letter-spacing: .04em; }

/* ---------- trip and party templates (WED-408) ----------
   Only offered for trips (Viaje) and parties (Fiesta), before the six classic styles. Same tokens as above, plus
   --gv-orn-2/-3/-4: the second, third and fourth colours of the ornaments (classes gv-o2 … in occasion-ornaments.ts).
   Small lines in Jost where the title face is loud. Dark ones (Neón, Halloween, Navidad, Año Nuevo) as Burdeos. */
[data-theme="caribe"], [data-theme="road_trip"], [data-theme="girls_trip"], [data-theme="boys_trip"], [data-theme="neon"], [data-theme="tropical"],
[data-theme="halloween"], [data-theme="ano_nuevo"], [data-theme="despedida"], [data-theme="carnaval"], [data-theme="amor_amistad"], [data-theme="ciudad"], [data-theme="confeti"] {
  --gv-meta-font: "Jost", system-ui, sans-serif; --gv-meta-style: normal; --gv-amp-font: "Jost", system-ui, sans-serif;
}
[data-theme="caribe"] {
  --gv-ts: 36;
  --paper: #F4EEE1; --paper-2: #EBE3D2; --paper-3: #DFD5C0; --ivory: #FBF8F1;
  --ink: #123C3E; --ink-2: #2B5254; --ink-3: #4A6C6D;
  --rule: rgba(18, 60, 62, .16); --rule-strong: rgba(18, 60, 62, .4);
  --brand-accent: #136E74; --gv-orn: #2AA3A8; --gv-orn-2: #8A6A3E; --gv-orn-3: #F2BE5C; --champagne: #9FD3CF; --champagne-soft: #DCEFEC;
  --gv-title-font: "Kaushan Script", cursive;
  --gv-r-field: 14px; --gv-r-card: 20px; --gv-r-tile: 6px; --gv-gap-base: 4px; --gv-mark: var(--brand-accent);
}
[data-theme="montana"] {
  --gv-ts: 32;
  --paper: #EDEFEA; --paper-2: #E2E6DF; --paper-3: #D4DAD1; --ivory: #F7F8F5;
  --ink: #1F2B2E; --ink-2: #3A484B; --ink-3: #56656A;
  --rule: rgba(31, 43, 46, .16); --rule-strong: rgba(31, 43, 46, .4);
  --brand-accent: #3D5A4C; --gv-orn: #4F6E5E; --gv-orn-2: #D9A55B; --gv-orn-3: #FFFFFF; --champagne: #AEC0B3; --champagne-soft: #DDE6DF;
  --gv-title-font: "Fraunces", Georgia, serif; --gv-meta-font: "Fraunces", Georgia, serif;
  --gv-r-btn: 6px; --gv-r-field: 6px; --gv-r-card: 10px; --gv-r-tile: 2px; --gv-gap-base: 3px;
  --gv-btn-case: uppercase; --gv-btn-track: .14em; --gv-btn-size: 12px; --gv-mark: var(--brand-accent);
}
[data-theme="road_trip"] {
  --gv-ts: 31;
  --paper: #F6EBD9; --paper-2: #EEDFC8; --paper-3: #E3D0B3; --ivory: #FCF6EC;
  --ink: #3A2618; --ink-2: #56402E; --ink-3: #73604E;
  --rule: rgba(58, 38, 24, .16); --rule-strong: rgba(58, 38, 24, .42);
  --brand-accent: #9A4A1C; --gv-orn: #6B4A2E; --gv-orn-2: #E39A2D; --champagne: #E6C38A; --champagne-soft: #F2E2C6;
  --gv-title-font: "Rye", Georgia, serif;
  --gv-r-btn: 4px; --gv-r-field: 4px; --gv-r-card: 6px; --gv-gap-base: 3px;
  --gv-btn-case: uppercase; --gv-btn-track: .12em; --gv-btn-size: 12.5px; --gv-mark: var(--brand-accent);
}
[data-theme="ciudad"] {
  --gv-ts: 30;
  --paper: #ECEBE8; --paper-2: #E2E0DC; --paper-3: #D5D2CC; --ivory: #F6F5F3;
  --ink: #1C2029; --ink-2: #363B47; --ink-3: #565C69;
  --rule: rgba(28, 32, 41, .16); --rule-strong: rgba(28, 32, 41, .42);
  --brand-accent: #2F4A8A; --gv-orn: #3A4766; --gv-orn-2: #E7B547; --champagne: #AFB9D3; --champagne-soft: #DFE3EE;
  --gv-title-font: "Jost", system-ui, sans-serif;
  --gv-r-btn: 0px; --gv-r-field: 0px; --gv-r-card: 0px; --gv-gap-base: 2px;
  --gv-btn-case: uppercase; --gv-btn-track: .22em; --gv-btn-size: 11.5px; --gv-mark: var(--brand-accent);
}
[data-theme="girls_trip"] {
  --gv-ts: 34;
  --paper: #FBEDE8; --paper-2: #F5E0DA; --paper-3: #EDD0C8; --ivory: #FFF7F4;
  --ink: #4A2232; --ink-2: #643A4A; --ink-3: #82586A;
  --rule: rgba(74, 34, 50, .15); --rule-strong: rgba(74, 34, 50, .38);
  --brand-accent: #B8355B; --gv-orn: #4A2232; --gv-orn-2: #E9A93A; --gv-orn-3: #F59AA8; --champagne: #F5C2C8; --champagne-soft: #FBE3E4;
  --gv-title-font: "Yeseva One", Georgia, serif;
  --gv-r-field: 999px; --gv-r-card: 24px; --gv-r-tile: 10px; --gv-gap-base: 5px; --gv-mark: var(--brand-accent);
}
[data-theme="boys_trip"] {
  --gv-ts: 50;
  --paper: #E9E8DF; --paper-2: #DEDDD1; --paper-3: #CFCDBE; --ivory: #F4F3EC;
  --ink: #1E2A22; --ink-2: #384539; --ink-3: #546253;
  --rule: rgba(30, 42, 34, .16); --rule-strong: rgba(30, 42, 34, .42);
  --brand-accent: #2F4A35; --gv-orn: #2F4A35; --gv-orn-2: #C2662D; --champagne: #B9C1A6; --champagne-soft: #E1E4D6;
  --gv-title-font: "Bebas Neue", "Jost", sans-serif;
  --gv-r-btn: 4px; --gv-r-field: 4px; --gv-r-card: 6px; --gv-gap-base: 3px;
  --gv-btn-case: uppercase; --gv-btn-track: .12em; --gv-btn-size: 12.5px; --gv-mark: var(--gv-orn-2);
}
[data-theme="confeti"] {
  --gv-ts: 36;
  --paper: #FFF9F0; --paper-2: #FBEFDF; --paper-3: #F3E2CB; --ivory: #FFFDF8;
  --ink: #2B2540; --ink-2: #463F5C; --ink-3: #645D78;
  --rule: rgba(43, 37, 64, .14); --rule-strong: rgba(43, 37, 64, .36);
  --brand-accent: #C42A50; --gv-orn: #3F6FD8; --gv-orn-2: #F2A93B; --gv-orn-3: #E8476B; --gv-orn-4: #2FB59A; --champagne: #F7CBD5; --champagne-soft: #FCE7EC;
  --gv-title-font: "Fredoka", system-ui, sans-serif;
  --gv-r-field: 16px; --gv-r-card: 22px; --gv-r-tile: 12px; --gv-gap-base: 6px; --gv-mark: var(--brand-accent);
}
[data-theme="neon"] {
  --gv-ts: 38;
  --paper: #15102A; --paper-2: #1D1736; --paper-3: #271F45; --ivory: #1F1838;
  --ink: #F5F1FF; --ink-2: #DCD3F7; --ink-3: #B8ADDD;
  --rule: rgba(245, 241, 255, .16); --rule-strong: rgba(245, 241, 255, .42);
  --brand-accent: #FF5FBA; --accent-text: #FF8FCE; --accent-ink: #1A0F2E; --accent-hover: #FF85CB; --accent-soft: rgba(255, 95, 186, .14);
  --gv-orn: #46E6FF; --gv-orn-2: #FF5FBA; --gv-orn-3: #FFE45C; --champagne: #8F7BD8; --champagne-soft: #2E2652;
  --gv-tile: #1D1736; --danger: #FF8A8A; --success: #9BF0C4; --on-photo: #FBF8F2;
  --gv-title-font: "Tilt Neon", "Jost", sans-serif;
  color-scheme: dark;
  --gv-r-field: 12px; --gv-r-card: 18px; --gv-r-tile: 6px; --gv-gap-base: 4px; --gv-mark: var(--gv-orn); --gv-heart: #FF5FBA;
}
[data-theme="cocteles"] {
  --gv-ts: 38;
  --paper: #F3EEE4; --paper-2: #EAE2D4; --paper-3: #DDD2BF; --ivory: #FAF7F0;
  --ink: #1E3B37; --ink-2: #36524D; --ink-3: #56706B;
  --rule: rgba(30, 59, 55, .16); --rule-strong: rgba(30, 59, 55, .4);
  --brand-accent: #1F4E47; --gv-orn: #1F4E47; --gv-orn-2: #C27B42; --gv-orn-3: #8DA14B; --gv-orn-4: #F0C54E; --champagne: #D8B48F; --champagne-soft: #EFE1D0;
  --gv-title-font: "DM Serif Display", Georgia, serif; --gv-meta-font: "DM Serif Display", Georgia, serif;
  --gv-r-field: 10px; --gv-r-card: 14px; --gv-gap-base: 3px; --gv-btn-font: var(--gv-meta-font); --gv-btn-style: italic; --gv-btn-size: 16px; --gv-btn-track: 0; --gv-mark: var(--gv-orn-2);
}
[data-theme="tropical"] {
  --gv-ts: 34;
  --paper: #EEF6F1; --paper-2: #E1EEE7; --paper-3: #CFE3D8; --ivory: #F8FCFA;
  --ink: #0F3B34; --ink-2: #2A554D; --ink-3: #49706A;
  --rule: rgba(15, 59, 52, .15); --rule-strong: rgba(15, 59, 52, .38);
  --brand-accent: #B8462A; --gv-orn: #2A8A61; --gv-orn-3: #F4B63E; --champagne: #F7B79E; --champagne-soft: #FCE4DA;
  --gv-title-font: "Pacifico", cursive;
  --gv-r-field: 999px; --gv-r-card: 24px; --gv-r-tile: 10px; --gv-gap-base: 5px; --gv-mark: var(--brand-accent);
}
[data-theme="halloween"] {
  --gv-ts: 46;
  --paper: #1B1622; --paper-2: #231C2C; --paper-3: #2E2539; --ivory: #241D2E;
  --ink: #F4EBDD; --ink-2: #DED1BF; --ink-3: #BBAC9A;
  --rule: rgba(244, 235, 221, .16); --rule-strong: rgba(244, 235, 221, .42);
  --brand-accent: #F28A2E; --accent-text: #F6A85F; --accent-ink: #1B1622; --accent-hover: #F7A052; --accent-soft: rgba(242, 138, 46, .14);
  --gv-orn: #F28A2E; --gv-orn-2: #E9DFC9; --gv-orn-3: #7FA05A; --champagne: #8E6BB8; --champagne-soft: #3A2E4A;
  --gv-tile: #231C2C; --danger: #FF9C8A; --success: #B9DD9A; --on-photo: #FBF8F2;
  --gv-title-font: "Creepster", "Jost", sans-serif;
  color-scheme: dark;
  --gv-r-btn: 6px; --gv-r-field: 6px; --gv-r-card: 10px; --gv-r-tile: 2px; --gv-gap-base: 3px;
  --gv-btn-case: uppercase; --gv-btn-track: .1em; --gv-btn-size: 12.5px; --gv-mark: var(--gv-orn); --gv-heart: #F28A2E;
}
[data-theme="navidad"] {
  --gv-ts: 38;
  --paper: #1D3B2F; --paper-2: #183326; --paper-3: #132B20; --ivory: #22443A;
  --ink: #F7F1E3; --ink-2: #E6DCC6; --ink-3: #C9BEA5;
  --rule: rgba(247, 241, 227, .16); --rule-strong: rgba(247, 241, 227, .42);
  --brand-accent: #E2C178; --accent-text: #EBD09A; --accent-ink: #163024; --accent-hover: #EBCF92; --accent-soft: rgba(226, 193, 120, .13);
  --gv-orn: #A9C9A0; --gv-orn-2: #E2C178; --gv-orn-3: #D9524B; --champagne: #C9A964; --champagne-soft: #2B4A3D;
  --gv-tile: #183326; --danger: #FF9C8A; --success: #C1E0A8; --on-photo: #FBF8F2;
  --gv-title-font: "Berkshire Swash", Georgia, serif;
  color-scheme: dark;
  --gv-r-field: 10px; --gv-r-card: 14px; --gv-r-tile: 3px; --gv-gap-base: 3px;
  --gv-btn-font: var(--gv-meta-font); --gv-btn-style: italic; --gv-btn-size: 17px; --gv-btn-track: 0; --gv-mark: var(--brand-accent); --gv-heart: #E86B63;
}
[data-theme="ano_nuevo"] {
  --gv-ts: 34;
  --paper: #121419; --paper-2: #0D0F13; --paper-3: #08090C; --ivory: #1A1D24;
  --ink: #F6EFDD; --ink-2: #E3D8BC; --ink-3: #BFB394;
  --rule: rgba(246, 239, 221, .16); --rule-strong: rgba(246, 239, 221, .42);
  --brand-accent: #D8B56A; --accent-text: #E4C88B; --accent-ink: #121419; --accent-hover: #E4C687; --accent-soft: rgba(216, 181, 106, .12);
  --gv-orn: #D8B56A; --gv-orn-2: #F2DDA6; --champagne: #B39654; --champagne-soft: #262A33;
  --gv-tile: #0D0F13; --danger: #FF9C8A; --success: #C9DDB3; --on-photo: #FBF8F2;
  --gv-title-font: "Poiret One", "Jost", sans-serif;
  color-scheme: dark;
  --gv-r-btn: 0px; --gv-r-field: 0px; --gv-r-card: 0px; --gv-gap-base: 2px;
  --gv-btn-case: uppercase; --gv-btn-track: .24em; --gv-btn-size: 11.5px; --gv-mark: var(--brand-accent); --gv-heart: #F2C97A;
}
[data-theme="despedida"] {
  --gv-ts: 38;
  --paper: #FBEAF0; --paper-2: #F6DCE6; --paper-3: #EECAD8; --ivory: #FFF6F9;
  --ink: #3A1A2B; --ink-2: #5A3247; --ink-3: #7A5065;
  --rule: rgba(58, 26, 43, .15); --rule-strong: rgba(58, 26, 43, .38);
  --brand-accent: #B0215F; --gv-orn: #E0448C; --gv-orn-2: #E8B64A; --gv-orn-3: #3A1A2B; --champagne: #F2B4CF; --champagne-soft: #FADDE9;
  --gv-title-font: "Abril Fatface", Georgia, serif;
  --gv-r-field: 999px; --gv-r-card: 22px; --gv-r-tile: 8px; --gv-gap-base: 4px; --gv-mark: var(--brand-accent);
}
[data-theme="carnaval"] {
  --gv-ts: 36;
  --paper: #FFF6E5; --paper-2: #FCEBCE; --paper-3: #F5DCB2; --ivory: #FFFCF4;
  --ink: #2A1846; --ink-2: #45306A; --ink-3: #64528A;
  --rule: rgba(42, 24, 70, .15); --rule-strong: rgba(42, 24, 70, .38);
  --brand-accent: #B0156E; --gv-orn: #5B2C9A; --gv-orn-2: #F2B600; --gv-orn-3: #E2287F; --gv-orn-4: #12A06A; --champagne: #F6C7DD; --champagne-soft: #FCE6F0;
  --gv-title-font: "Shrikhand", Georgia, serif;
  --gv-r-field: 14px; --gv-r-card: 20px; --gv-r-tile: 8px; --gv-gap-base: 5px; --gv-mark: var(--brand-accent);
}
[data-theme="amor_amistad"] {
  --gv-ts: 40;
  --paper: #FDF0EE; --paper-2: #F8E2DF; --paper-3: #F0D0CC; --ivory: #FFF8F7;
  --ink: #4A1C24; --ink-2: #6A3640; --ink-3: #87525C;
  --rule: rgba(74, 28, 36, .15); --rule-strong: rgba(74, 28, 36, .38);
  --brand-accent: #B4243A; --gv-orn: #C8304A; --gv-orn-2: #E9A93A; --gv-orn-3: #F6B3BE; --champagne: #F2B9C1; --champagne-soft: #FBE1E4;
  --gv-title-font: "Lobster", cursive;
  --gv-r-field: 999px; --gv-r-card: 22px; --gv-r-tile: 6px; --gv-gap-base: 4px; --gv-mark: var(--brand-accent);
}
/* their headers */
[data-theme="caribe"] .gv-title, [data-theme="tropical"] .gv-title, [data-theme="amor_amistad"] .gv-title { font-size: clamp(2.1rem, 9vw, 3.3rem); line-height: 1.2; }
[data-theme="montana"] .gv-title { text-transform: uppercase; letter-spacing: .08em; font-weight: 500; font-size: clamp(1.8rem, 7.8vw, 2.8rem); }
[data-theme="road_trip"] .gv-title { text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1.7rem, 7.4vw, 2.7rem); line-height: 1.12; }
[data-theme="ciudad"] .gv-title { text-transform: uppercase; letter-spacing: .26em; font-weight: 400; font-size: clamp(1.6rem, 7vw, 2.5rem); line-height: 1.2; }
[data-theme="girls_trip"] .gv-title { font-size: clamp(2rem, 8.6vw, 3.1rem); line-height: 1.1; }
[data-theme="boys_trip"] .gv-title { text-transform: uppercase; letter-spacing: .04em; font-size: clamp(2.8rem, 12.8vw, 4.6rem); line-height: .95; }
[data-theme="confeti"] .gv-title { font-weight: 600; font-size: clamp(2.1rem, 9vw, 3.3rem); line-height: 1.08; }
[data-theme="neon"] .gv-title { font-size: clamp(2.2rem, 9.6vw, 3.5rem); line-height: 1.1; color: #FFF6FD; text-shadow: 0 0 6px rgba(255, 95, 186, .9), 0 0 18px rgba(255, 95, 186, .55); }
[data-theme="neon"] .gv-orn { filter: drop-shadow(0 0 3px rgba(70, 230, 255, .85)) drop-shadow(0 0 8px rgba(70, 230, 255, .45)); }
[data-theme="cocteles"] .gv-title { font-size: clamp(2.2rem, 9.6vw, 3.5rem); line-height: 1.06; }
[data-theme="halloween"] .gv-title { font-size: clamp(2.7rem, 11.8vw, 4.3rem); line-height: 1; letter-spacing: .02em; color: var(--brand-accent); }
[data-theme="navidad"] .gv-title { font-size: clamp(2.2rem, 9.6vw, 3.5rem); line-height: 1.1; }
[data-theme="ano_nuevo"] .gv-title { text-transform: uppercase; letter-spacing: .14em; font-weight: 400; font-size: clamp(1.9rem, 8.4vw, 3rem); line-height: 1.16; }
[data-theme="ano_nuevo"] .gv-meta, [data-theme="ciudad"] .gv-meta { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 500; }
[data-theme="despedida"] .gv-title { font-size: clamp(2.2rem, 9.6vw, 3.5rem); line-height: 1.06; }
[data-theme="carnaval"] .gv-title { font-size: clamp(2.1rem, 9vw, 3.3rem); line-height: 1.12; color: var(--gv-orn); }
/* ---------- "Otro" templates (WED-433) ----------
   Neutral, for any occasion: calm colours, quiet type, an abstract or botanical line drawing, no symbol of one occasion.
   Light ones, Grafito the one dark (as Burdeos). Comunión last: David's pick from the proposals, with its own small line
   above the title (gv-kicker). */
[data-theme="salvia"] {
  --gv-ts: 40;
  --paper: #F1F2EC; --paper-2: #E6E8E0; --paper-3: #D8DCD1; --ivory: #F9FAF6;
  --ink: #26332B; --ink-2: #3E4C43; --ink-3: #56645A;
  --rule: rgba(38, 51, 43, .15); --rule-strong: rgba(38, 51, 43, .38);
  --brand-accent: #4E6A57; --gv-orn: #7E9884; --gv-orn-2: #C9B48A; --champagne: #B8C7B9; --champagne-soft: #E1E8E0;
  --gv-title-font: "Cormorant Garamond", Georgia, serif; --gv-amp-font: "Cormorant Garamond", Georgia, serif;
  --gv-btn-font: var(--gv-meta-font); --gv-btn-style: italic; --gv-btn-size: 17px; --gv-btn-track: 0;
  --gv-r-field: 999px; --gv-r-card: 22px; --gv-r-tile: 6px; --gv-gap-base: 4px; --gv-mark: var(--brand-accent);
}
[data-theme="arena"] {
  --gv-ts: 30;
  --paper: #F5EFE6; --paper-2: #ECE4D7; --paper-3: #E0D5C4; --ivory: #FBF8F2;
  --ink: #352B22; --ink-2: #4F4337; --ink-3: #6A5B4C;
  --rule: rgba(53, 43, 34, .15); --rule-strong: rgba(53, 43, 34, .38);
  --brand-accent: #7A5D42; --gv-orn: #A88660; --gv-orn-2: #E3CDAE; --gv-orn-3: #D9A57A; --champagne: #D8C2A3; --champagne-soft: #EFE4D4;
  --gv-title-font: "Marcellus", Georgia, serif; --gv-meta-font: "Cormorant Garamond", Georgia, serif;
  --gv-r-btn: 2px; --gv-r-field: 2px; --gv-r-card: 4px; --gv-r-tile: 2px; --gv-gap-base: 3px;
  --gv-btn-font: "Marcellus", Georgia, serif; --gv-btn-case: uppercase; --gv-btn-track: .18em; --gv-btn-size: 12px; --gv-mark: var(--brand-accent);
}
[data-theme="niebla"] {
  --gv-ts: 27;
  --paper: #EEF1F4; --paper-2: #E3E8EE; --paper-3: #D5DDE5; --ivory: #F7F9FB;
  --ink: #1F2C3A; --ink-2: #3A4858; --ink-3: #55636F;
  --rule: rgba(31, 44, 58, .15); --rule-strong: rgba(31, 44, 58, .38);
  --brand-accent: #45617D; --gv-orn: #6F87A0; --gv-orn-2: #A9BACB; --gv-orn-3: #EBDCC6; --champagne: #B9C7D5; --champagne-soft: #E1E8EF;
  --gv-title-font: "Jost", system-ui, sans-serif; --gv-meta-font: "Instrument Serif", Georgia, serif; --gv-amp-font: "Instrument Serif", Georgia, serif;
  --gv-r-btn: 10px; --gv-r-field: 12px; --gv-r-card: 16px; --gv-r-tile: 4px; --gv-gap-base: 4px;
  --gv-btn-font: "Jost", system-ui, sans-serif; --gv-btn-case: uppercase; --gv-btn-track: .16em; --gv-btn-size: 11.5px; --gv-mark: var(--brand-accent);
}
[data-theme="terracota"] {
  --gv-ts: 38;
  --paper: #F6EEE8; --paper-2: #EEE2D9; --paper-3: #E3D3C7; --ivory: #FCF8F5;
  --ink: #3B2620; --ink-2: #573E35; --ink-3: #71564C;
  --rule: rgba(59, 38, 32, .15); --rule-strong: rgba(59, 38, 32, .38);
  --brand-accent: #9C5840; --gv-orn: #8E5A44; --gv-orn-2: #D49A7C; --gv-orn-3: #CDBBA4; --champagne: #E2B8A2; --champagne-soft: #F3E0D5;
  --gv-title-font: "DM Serif Display", Georgia, serif; --gv-meta-font: "DM Serif Display", Georgia, serif; --gv-amp-font: "DM Serif Display", Georgia, serif;
  --gv-btn-font: var(--gv-meta-font); --gv-btn-style: italic; --gv-btn-size: 16px; --gv-btn-track: 0;
  --gv-r-field: 999px; --gv-r-card: 24px; --gv-r-tile: 10px; --gv-gap-base: 5px; --gv-mark: var(--brand-accent);
}
[data-theme="lavanda"] {
  --gv-ts: 29;
  --paper: #F3F1F5; --paper-2: #E9E6EE; --paper-3: #DCD8E3; --ivory: #FAF9FB;
  --ink: #2F2A3A; --ink-2: #48425A; --ink-3: #635D70;
  --rule: rgba(47, 42, 58, .15); --rule-strong: rgba(47, 42, 58, .38);
  --brand-accent: #665C80; --gv-orn: #7E7896; --gv-orn-2: #A79FBC; --champagne: #C9C3D8; --champagne-soft: #E9E6F0;
  --gv-title-font: "Italiana", Georgia, serif; --gv-meta-font: "Cormorant Garamond", Georgia, serif; --gv-amp-font: "Cormorant Garamond", Georgia, serif;
  --gv-r-field: 999px; --gv-r-card: 26px; --gv-r-tile: 8px; --gv-gap-base: 5px;
  --gv-btn-case: uppercase; --gv-btn-track: .2em; --gv-btn-size: 11.5px; --gv-mark: var(--brand-accent);
}
[data-theme="grafito"] {
  --gv-ts: 44;
  --paper: #2B2C2E; --paper-2: #232426; --paper-3: #1C1D1F; --ivory: #333436;
  --ink: #F1ECE2; --ink-2: #DCD5C8; --ink-3: #BDB6AA;
  --rule: rgba(241, 236, 226, .16); --rule-strong: rgba(241, 236, 226, .42);
  --brand-accent: #E4D8C3; --accent-text: #EDE3D1; --accent-ink: #232426; --accent-hover: #EEE5D5; --accent-soft: rgba(228, 216, 195, .12);
  --gv-orn: #C2B399; --gv-orn-2: #E4D8C3; --champagne: #A89C86; --champagne-soft: #3A3B3E;
  --gv-tile: #232426; --danger: #F2A08F; --success: #C9DDB3; --on-photo: #FBF8F2;
  --gv-title-font: "Instrument Serif", Georgia, serif; --gv-meta-font: "Instrument Serif", Georgia, serif; --gv-amp-font: "Instrument Serif", Georgia, serif;
  color-scheme: dark;
  --gv-r-btn: 2px; --gv-r-field: 2px; --gv-r-card: 4px; --gv-r-tile: 0px; --gv-gap-base: 2px;
  --gv-btn-font: "Jost", system-ui, sans-serif; --gv-btn-case: uppercase; --gv-btn-track: .2em; --gv-btn-size: 11.5px; --gv-mark: var(--brand-accent); --gv-heart: #E8B7A8;
}
[data-theme="comunion"] {
  --gv-ts: 46;
  --paper: #FAF8F3; --paper-2: #F2EEE4; --paper-3: #E7E1D3; --ivory: #FFFDF9;
  --ink: #3A3428; --ink-2: #544D3F; --ink-3: #6E6656;
  --rule: rgba(58, 52, 40, .15); --rule-strong: rgba(58, 52, 40, .38);
  --brand-accent: #866A33; /* the proposal's #9C7B3A, a touch darker: 4.8:1 for the button's text (as Blush, WED-411) */ --gv-orn: #B39352; --gv-orn-2: #EFE5CC; --champagne: #DCCBA0; --champagne-soft: #F2EAD6;
  --gv-title-font: "Cormorant Garamond", Georgia, serif; --gv-meta-font: "Jost", system-ui, sans-serif; --gv-meta-style: italic; --gv-amp-font: "Cormorant Garamond", Georgia, serif;
  --gv-btn-font: "Jost", system-ui, sans-serif; --gv-btn-size: 14px; --gv-btn-track: 0;
  --gv-r-btn: 999px; --gv-r-field: 14px; --gv-r-card: 18px; --gv-r-tile: 4px; --gv-gap-base: 4px; --gv-mark: var(--brand-accent);
}
/* their headers */
[data-theme="salvia"] .gv-title, [data-theme="comunion"] .gv-title { font-style: italic; font-weight: 500; line-height: 1.08; }
[data-theme="salvia"] .gv-title { font-size: clamp(2.3rem, 10vw, 3.7rem); }
[data-theme="arena"] .gv-title { text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.7rem, 7.6vw, 2.7rem); line-height: 1.18; }
[data-theme="arena"] .gv-amp, [data-theme="lavanda"] .gv-amp { text-transform: none; letter-spacing: 0; }
[data-theme="niebla"] .gv-title { text-transform: uppercase; letter-spacing: .24em; font-weight: 300; font-size: clamp(1.55rem, 6.9vw, 2.45rem); line-height: 1.25; }
[data-theme="niebla"] .gv-meta { font-size: 1.2rem; }
[data-theme="terracota"] .gv-title { font-size: clamp(2.2rem, 9.6vw, 3.5rem); line-height: 1.06; }
[data-theme="lavanda"] .gv-title { text-transform: uppercase; letter-spacing: .16em; font-size: clamp(1.9rem, 8.2vw, 3rem); line-height: 1.15; }
[data-theme="grafito"] .gv-title { font-size: clamp(2.5rem, 11vw, 4rem); line-height: 1; letter-spacing: -.01em; }
[data-theme="grafito"] .gv-orn { margin-top: 18px; margin-bottom: 10px; }
[data-theme="comunion"] .gv-title { font-size: clamp(2.6rem, 11.5vw, 4.1rem); line-height: 1; }
[data-theme="comunion"] .gv-meta { font-size: 1rem; }
.gv-kicker { margin: 2px 0 0; font-family: var(--gv-meta-font); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.gv-lf { fill: currentColor; fill-opacity: .22; stroke-width: .8; }
.gv-o2l { fill: var(--gv-orn-2, currentColor); fill-opacity: .55; stroke: var(--gv-orn-2, currentColor); stroke-width: .7; }
.gv-o1 { fill: currentColor; }
.gv-o2 { fill: var(--gv-orn-2, currentColor); }
.gv-o3 { fill: var(--gv-orn-3, var(--paper)); }
.gv-o4 { fill: var(--gv-orn-4, currentColor); }
.gv-o2s { stroke: var(--gv-orn-2, currentColor); fill: none; }
.gv-o3s { stroke: var(--gv-orn-3, currentColor); fill: none; }
.gv-o4s { stroke: var(--gv-orn-4, currentColor); fill: none; }
.gv-op { fill: var(--paper); }
.gv-ops { stroke: var(--paper); }

/* ---------- guest entry and upload (WED-123): the code gate and the upload card in the theme ----------
   gallery.js renders them with these classes; the landing's phone mocks use the same markup. */
.gv-card { background: var(--ivory); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--gv-r-card); box-shadow: 0 1px 2px rgba(20, 16, 12, .05); }
.gv-gate { text-align: center; }
.gv-gate h2 { font-family: var(--gv-meta-font); font-style: var(--gv-meta-style, italic); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: balance; }
.gv-gate h2 em { color: var(--gv-orn); }
.gv-label { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.gv-field { display: block; width: 100%; min-height: 46px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: var(--gv-r-field); background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 16px; }
.gv-field--code { text-align: center; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.gv-cta { display: flex; align-items: center; justify-content: center; gap: .5em; width: 100%; min-height: 48px; padding: 0 1.2em; border: 1px solid var(--accent); border-radius: var(--gv-r-btn); background: var(--accent); color: var(--accent-ink);
  font-family: var(--gv-btn-font); font-style: var(--gv-btn-style); text-transform: var(--gv-btn-case); letter-spacing: var(--gv-btn-track); font-size: var(--gv-btn-size); font-weight: 500; }
.gv-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ---------- style cards (WED-123): the six themes to choose from, on the landing and in the checkout ----------
   src/modules/gallery/style-cards.ts renders them: native radios in one group, each with a preview in its theme. */
.gsc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.gsc { position: relative; display: grid; gap: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; }
.gsc[hidden] { display: none; } /* trip and party templates for another kind (WED-408) */
.gsc__in { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.gsc__frame { display: block; border-radius: 14px; transition: box-shadow 200ms ease, transform 200ms ease; }
.gsc__card { container-type: inline-size; position: relative; display: grid; justify-items: center; align-content: center; gap: 7px; aspect-ratio: 5 / 4; padding: 12px 10px;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); overflow: hidden; }
.gsc__card .gv-orn { width: calc(var(--ow) / 170 * 52cqi); height: auto; max-height: 30cqi; margin: 0; }
.gsc__card .gsc__names { margin: 0; text-align: center; font-size: calc(var(--gv-ts) / 37 * 13.5cqi); line-height: 1.05; font-family: Georgia, "Times New Roman", serif; }
.gsc__card .gv-amp { font-family: Georgia, "Times New Roman", serif; }
.gsc-grid.is-fonts .gsc__card .gsc__names { font-family: var(--gv-title-font); }
.gsc-grid.is-fonts .gsc__card .gv-amp { font-family: var(--gv-amp-font); }
.gsc__btn { width: 40cqi; height: 4.5cqi; border-radius: var(--gv-r-btn); background: var(--accent); }
.gsc__meta { display: grid; gap: 1px; padding: 0 2px; }
.gsc__meta b { font-weight: 600; font-size: 14px; }
.gsc__meta small { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.gsc:hover .gsc__frame { transform: translateY(-2px); }
.gsc__in:checked + .gsc__frame { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent), 0 10px 24px -14px rgba(20, 16, 12, .45); }
.gsc__in:focus-visible + .gsc__frame { outline: 2px solid var(--accent-text); outline-offset: 5px; }
@media (max-width: 640px) {
  .gsc-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: manipulation; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 4px 10px; margin: 0 -4px; }
  .gsc-grid::-webkit-scrollbar { display: none; }
  .gsc { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .gsc__frame { transition: none; } .gsc:hover .gsc__frame, .gsc__in:checked + .gsc__frame { transform: none; } }

/* ---------- occasion cards (WED-120, WED-154): the checkout's step 1 (radios) and the landing (links to /empezar?tipo=…).
   One large wedding card, the other occasions as quiet cards. Radius, border and shadow as the style cards above. ---------- */
.gk-evs { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; }
.gk-evs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* an odd number of occasions (nine since trip and party, WED-408): the last one ("Otro") takes the whole row */
.gk-evs__grid > .gk-ev:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gk-ev { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; }
.gk-ev__in { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.gk-ev__card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 40px 12px 16px;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; }
.gk-ev__ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink-2); transition: color 200ms ease; }
.gk-ev__ic svg { width: 24px; height: 24px; stroke-width: 1.4; }
.gk-ev__name { min-width: 0; font-family: var(--font-ui, inherit); font-weight: 500; font-size: 15px; line-height: 1.25; overflow-wrap: break-word; hyphens: manual; }
/* the radio mark: a full ring, filled with an accent dot when chosen (same place in every card, nothing moves) */
.gk-ev__dot { position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--paper); transition: border-color 200ms ease; }
.gk-ev__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 200ms ease; }

.gk-ev--hero .gk-ev__card { flex-direction: column; justify-content: center; gap: 6px; min-height: 168px; padding: 22px 48px 24px; text-align: center; }
.gk-ev__orn { display: block; color: var(--accent-text); }
.gk-ev__orn svg { display: block; width: 120px; height: 56px; stroke-width: 1.1; }
.gk-ev__txt { display: grid; gap: 4px; }
.gk-ev--hero .gk-ev__name { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3, 34px); line-height: 1.05; }
.gk-ev--hero small { font-size: var(--step--1); color: var(--ink-2); text-wrap: pretty; }
.gk-ev--hero .gk-ev__dot { top: 16px; right: 16px; margin-top: 0; }

.gk-ev:hover .gk-ev__card { transform: translateY(-2px); }
.gk-ev__in:checked + .gk-ev__card { transform: translateY(-3px); border-color: transparent; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent), 0 10px 24px -14px rgba(20, 16, 12, .45); }
.gk-ev__in:checked + .gk-ev__card .gk-ev__ic { color: var(--accent-text); }
.gk-ev__in:checked + .gk-ev__card .gk-ev__dot { border-color: var(--accent); }
.gk-ev__in:checked + .gk-ev__card .gk-ev__dot::after { transform: scale(1); }
.gk-ev__in:focus-visible + .gk-ev__card { outline: 2px solid var(--accent-text); outline-offset: 5px; }
@media (max-width: 420px) {
  .gk-evs, .gk-evs__grid { gap: 10px; }
  /* the radio mark moves to the corner, so names like "Cumpleaños" keep the whole width */
  .gk-ev__card { gap: 10px; padding: 14px 22px 14px 12px; }
  .gk-ev__dot { top: 9px; right: 9px; width: 14px; height: 14px; margin-top: 0; }
  .gk-ev--hero .gk-ev__card { min-height: 150px; padding: 18px 40px 20px; }
  .gk-ev--hero .gk-ev__dot { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gk-ev__card, .gk-ev__dot::after { transition: none; } .gk-ev:hover .gk-ev__card, .gk-ev__in:checked + .gk-ev__card { transform: none; } }
/* as links (landing): an arrow where the radio mark sits, the same lift on hover and a visible focus ring */
a.gk-ev { color: inherit; text-decoration: none; }
.gk-ev__go { position: absolute; top: 50%; right: 14px; margin-top: -.6em; font-size: 15px; line-height: 1.2; color: var(--ink-3); transition: transform 200ms ease, color 200ms ease; }
.gk-ev--hero .gk-ev__go { top: auto; bottom: 16px; right: 18px; margin-top: 0; }
.gk-ev__txt small { display: block; }
.gk-ev:not(.gk-ev--hero) .gk-ev__txt { display: grid; gap: 2px; min-width: 0; }
.gk-ev:not(.gk-ev--hero) .gk-ev__txt small { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); text-wrap: pretty; }
a.gk-ev:hover .gk-ev__go { transform: translateX(3px); color: var(--accent-text); }
a.gk-ev:hover .gk-ev__ic { color: var(--accent-text); }
a.gk-ev:focus-visible { outline: none; }
a.gk-ev:focus-visible .gk-ev__card { outline: 2px solid var(--accent-text); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .gk-ev__go { transition: none; } a.gk-ev:hover .gk-ev__go { transform: none; } }

/* ---------- phone previews (WED-123, WED-120): the landing's phones and the checkout's style step ----------
   Moved from public/marketing/site.css so both pages draw the same phones. */
/* phone frames */
.mock-phone { width: min(320px, 100%); margin-inline: auto; }
.phone-f { position: relative; background: #1C1A16; border-radius: 46px; padding: 9px; box-shadow: 0 2px 0 rgba(255,255,255,.06) inset, var(--shadow-3); }
.phone-f__screen { position: relative; aspect-ratio: 9 / 19.2; border-radius: 37px; overflow: hidden; background: #F1ECE4; isolation: isolate; }
.phone-f__screen > * { height: 100%; }
.phone-f__screen::before { content: ""; position: absolute; z-index: 3; top: 9px; left: 50%; width: 30%; height: 21px; transform: translateX(-50%); background: #1C1A16; border-radius: var(--radius-pill); }
.phone-f--dark .phone-f__screen { background: #0E0D0B; }
.mock-phone--sm { width: min(260px, 100%); }
.mock-phone--sm .phone-f { border-radius: 38px; padding: 7px; }
.mock-phone--sm .phone-f__screen { border-radius: 31px; }
.mock-phone--sm .phone-f__screen::before { top: 7px; height: 17px; }

/* ---------- Gallery mock: the real gallery (public/media/viewer.css, served as /marketing/gallery.css) ----------
   The phones show the gallery's own markup (gv-* classes) under [data-theme], so each of the six styles looks exactly
   like the hosts' gallery: colours, type, ornament, buttons, fields, tab mark, tile gap and radius all come from the
   theme. Only the scale differs: the viewer sizes for a real phone (390 px, vw); here 1 "phone px" is --u = 1/390 of
   the screen width (container units), and the grid stays at three columns. */
.phone-f__screen { container-type: inline-size; }
.phone-f__screen .gm { min-height: 100%; }
.gm { --u: calc(100cqi / 390); --tp: var(--paper); --ti: var(--ink); --ta: var(--gv-orn); position: relative; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 11px; line-height: 1.35; transition: background-color var(--dur-3) var(--ease-soft), color var(--dur-3) var(--ease-soft); }
.gm__url { padding: max(calc(40 * var(--u)), 38px) 14px 0; text-align: center; font-family: var(--font-mono); font-size: 9px; opacity: .55; }
.gm .gv-head { max-width: none; padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.gm .gv-orn { width: calc(var(--ow) * var(--u)); height: auto; margin: calc(6 * var(--u)) auto calc(4 * var(--u)); }
.gm .gm-orn > svg { display: none; }
.gm[data-theme="toile"] .gv-orn--toile, .gm[data-theme="toscana"] .gv-orn--toscana, .gm[data-theme="taupe"] .gv-orn--taupe,
.gm[data-theme="burdeos"] .gv-orn--burdeos, .gm[data-theme="orquidea"] .gv-orn--orquidea, .gm[data-theme="blush"] .gv-orn--blush { display: block; }
/* WED-408: the trip and party templates (only the checkout's phones carry their ornaments) */
.gm[data-theme="caribe"] .gv-orn--caribe, .gm[data-theme="montana"] .gv-orn--montana, .gm[data-theme="road_trip"] .gv-orn--road_trip,
.gm[data-theme="ciudad"] .gv-orn--ciudad, .gm[data-theme="girls_trip"] .gv-orn--girls_trip, .gm[data-theme="boys_trip"] .gv-orn--boys_trip,
.gm[data-theme="confeti"] .gv-orn--confeti, .gm[data-theme="neon"] .gv-orn--neon, .gm[data-theme="cocteles"] .gv-orn--cocteles,
.gm[data-theme="tropical"] .gv-orn--tropical, .gm[data-theme="halloween"] .gv-orn--halloween, .gm[data-theme="navidad"] .gv-orn--navidad,
.gm[data-theme="ano_nuevo"] .gv-orn--ano_nuevo, .gm[data-theme="despedida"] .gv-orn--despedida, .gm[data-theme="carnaval"] .gv-orn--carnaval,
.gm[data-theme="amor_amistad"] .gv-orn--amor_amistad,
/* WED-433: the "Otro" templates */
.gm[data-theme="salvia"] .gv-orn--salvia, .gm[data-theme="arena"] .gv-orn--arena, .gm[data-theme="niebla"] .gv-orn--niebla,
.gm[data-theme="terracota"] .gv-orn--terracota, .gm[data-theme="lavanda"] .gv-orn--lavanda, .gm[data-theme="grafito"] .gv-orn--grafito,
.gm[data-theme="comunion"] .gv-orn--comunion { display: block; }
.gm .gv-title { font-size: calc(var(--gv-ts) * var(--u)); margin-top: calc(4 * var(--u)); }
.gm[data-theme="burdeos"] .gv-head { padding-bottom: calc(22 * var(--u)); }
.gm[data-theme="burdeos"] .gv-orn { margin: calc(16 * var(--u)) auto calc(10 * var(--u)); }
.gm .gv-meta { margin-top: calc(8 * var(--u)); font-size: calc(18 * var(--u)); }
.gm[data-theme="burdeos"] .gv-meta { font-size: calc(12.5 * var(--u)); }
.gm .gv-counts { margin-top: calc(8 * var(--u)); font-size: calc(11 * var(--u)); }
.gm .gv-tabs { position: static; }
.gm .gv-tabs__in { justify-content: center; padding: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.gm .gv-tabs span { height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u)); display: inline-flex; align-items: center; border-bottom: 1.5px solid transparent;
  font-size: calc(10.5 * var(--u)); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; transition: color var(--dur-2), border-color var(--dur-2); }
.gm .gv-tabs .is-on { color: var(--ink); border-bottom-color: var(--gv-mark); }
.gm .gv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gv-gap-base); content-visibility: visible; contain-intrinsic-size: none; margin-top: var(--gv-gap-base); }
.gm .gv-tile { cursor: default; }
.gm .gv-badge { right: 5px; top: 5px; font-size: 9px; padding: 1px 6px 1px 5px; }
.gm__heart { position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; color: var(--gv-heart); filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.gm__heart svg { display: block; width: 100%; height: 100%; }
.gf__pick img, .gf__collage img, .gf__thumb img, .lb__photo img { width: 100%; height: 100%; object-fit: cover; }
.gm__welcome { display: block; margin-top: calc(6 * var(--u)); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* The guests' entry (real gate markup: gv-card, gv-field, gv-cta), scaled like the gallery. */
.gm--gate .gv-head { padding-bottom: calc(10 * var(--u)); }
.gm--gate .gv-gate { display: grid; gap: calc(7 * var(--u)); margin: 0 calc(18 * var(--u)); padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)); }
.gm--gate .gv-gate h2 { font-size: calc(25 * var(--u)); line-height: 1.15; margin-bottom: calc(6 * var(--u)); }
.gm--gate .gv-label { font-size: calc(10.5 * var(--u)); margin-top: calc(4 * var(--u)); }
.gm--gate .gv-field { display: flex; align-items: center; min-height: calc(46 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(15 * var(--u)); }
.gm--gate .gv-field--code { justify-content: center; }
.gm--gate .gv-cta { min-height: calc(48 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(var(--gv-btn-size) * 1.05 * var(--u)); }

/* ---------- notes, locked banner ---------- */
.gv-notes:empty, .gv-upload:empty { display: none; }
.gv-notes { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter); }
.gv-upload { max-width: 640px; margin: 0 auto 18px; padding: 0 var(--gutter); }
.gv-upload .up { margin-bottom: 0; }
.gv-unlock { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 0 auto 16px; padding: 12px 14px 12px 18px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 14px; text-decoration: none; }
.gv-unlock b { font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: 13px; }
.gv-unlock, .gv-locknote { width: calc(100% - 2 * var(--gutter)); }
.gv-locknote { max-width: 560px; margin: 0 auto 16px; text-align: center; font-family: var(--gv-meta-font); font-style: var(--gv-meta-style, italic); color: var(--ink-2); }
/* Free tier (WED-152): the small "Hecho con Recuerdi" note at the end of the gallery. */
.gv-foot { margin: 32px auto 24px; text-align: center; font-size: 12px; letter-spacing: .04em; }
.gv-foot a { color: var(--ink-2); text-decoration: none; opacity: .8; }
.gv-foot a:hover, .gv-foot a:focus-visible { opacity: 1; text-decoration: underline; }

/* ---------- tabs ---------- */
.gv-tabs { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gv-tabs__in { display: flex; justify-content: center; gap: 2px; max-width: 1080px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: manipulation; scrollbar-width: none; padding: 0 8px; }
.gv-tabs__in::-webkit-scrollbar { display: none; }
.gv-tabs button { flex: none; height: var(--gv-tabs-h); padding: 0 12px; background: none; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; white-space: nowrap; transition: color var(--dur-1), border-color var(--dur-1); -webkit-tap-highlight-color: transparent; }
.gv-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gv-mark); }
@media (max-width: 520px) {
  .gv-tabs__in { justify-content: flex-start; padding: 0 4px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .gv-tabs button { padding: 0 9px; letter-spacing: .06em; font-size: 10.5px; }
}
.gv-sub:empty { display: none; }
.gv-sub { max-width: 1080px; margin: 0 auto; padding: 10px 10px 8px; display: grid; gap: 8px; }
.gv-chips { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: manipulation; scrollbar-width: none; justify-content: center; }
.gv-chips::-webkit-scrollbar { display: none; }
@media (max-width: 520px) { .gv-chips { justify-content: flex-start; } }
.gv-chip { flex: none; min-height: 30px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: transparent; font-size: 12px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gv-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gv-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 600; }

/* ---------- grid ---------- */
.gv-feed { max-width: 1080px; margin: 0 auto; padding-bottom: calc(40px + env(safe-area-inset-bottom)); min-height: 60vh; }
.gv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gv-gap); content-visibility: auto; contain-intrinsic-size: auto calc(2000vw / 3 + 40px); }
.gv-grid + .gv-grid { margin-top: var(--gv-gap); }
@media (min-width: 700px) { .gv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); contain-intrinsic-size: auto 2400px; } [data-theme] { --gv-gap: calc(var(--gv-gap-base) + 1px); } }
@media (min-width: 1100px) { .gv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gv-feed { padding-left: 12px; padding-right: 12px; } }
.gv-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--gv-r-tile); background: color-mix(in oklab, var(--c, var(--gv-tile)) 16%, var(--gv-tile)); cursor: zoom-in; -webkit-tap-highlight-color: transparent; contain: layout paint style; }
.gv-tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity 260ms var(--ease-soft), transform 600ms var(--ease-out); }
.gv-tile.is-new img:not(.in) { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .gv-tile:hover img { transform: scale(1.03); } }
.gv-tile:active img { opacity: .86; }
.gv-tile.is-dim img { opacity: .45; }
/* WED-368: without its image a tile stays a calm square in its own colour (the photo's dominant colour, else the
   theme's), always in the HTML with its size. viewer.js fades each thumbnail in once it has loaded (.is-wait, only
   the image, never a container); without JavaScript images show as they arrive. A thumbnail that fails shows a quiet
   picture icon instead of the browser's broken image: img::before/::after paint only on a broken image (Chrome,
   Firefox, also without JavaScript), .is-err from viewer.js covers the rest (Safari). */
.gv-tile img { color: transparent; font-size: 0; }
.gv-tile img.is-wait { opacity: 0; }
.gv-tile img::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--c, var(--gv-tile)) 16%, var(--gv-tile)); }
.gv-tile img::after, .gv-tile.is-err::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: color-mix(in oklab, var(--ink) 20%, transparent); pointer-events: none;
  -webkit-mask: var(--gv-pic) center / contain no-repeat; mask: var(--gv-pic) center / contain no-repeat; }
.gv-tile { --gv-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M4 17l4.5-4.5 3.5 3.5 2.5-2.5L20 19'/%3E%3C/svg%3E"); }
.gv-tile.is-err img { visibility: hidden; }
.gv-tile.is-locked img::after, .gv-tile.is-locked.is-err::after { content: none; }
.gv-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.gv-badge { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 6px; border-radius: var(--radius-pill); background: rgba(16, 14, 12, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; pointer-events: none; }
.gv-play { width: 0; height: 0; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.gv-tile.is-locked img { filter: blur(14px) saturate(.85); transform: scale(1.2); }
.gv-lock, .lb2__lock::before { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 252, 248, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23574d44' stroke-width='1.6'%3E%3Crect x='6' y='11' width='12' height='9' rx='2'/%3E%3Cpath d='M9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / 15px no-repeat; pointer-events: none; }
.gv-tile.is-skel { cursor: default; animation: gvPulse 1.4s var(--ease-soft) infinite alternate; }
@keyframes gvPulse { from { opacity: .55; } to { opacity: 1; } }
.gv-badge--review { left: 6px; right: auto; background: var(--accent); color: var(--accent-ink); }
.gv-badge--priv { top: auto; bottom: 6px; left: 6px; right: auto; max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lb2__priv { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, .78); }
.gv-empty { text-align: center; color: var(--ink-3); padding: 72px 24px; font-family: var(--gv-meta-font); font-style: italic; font-size: 1.2rem; max-width: 34ch; margin: 0 auto; }
/* WED-365: scroll sentinel plus "Cargar más" (a link to the next page, also without JavaScript) */
.gv-more { min-height: 1px; display: flex; justify-content: center; }
.gv-more__btn { margin: 24px auto 32px; }
.gv-more__btn[hidden] { display: none; }
.gv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gv-retry { display: block; margin: 20px auto; background: none; border: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: 14px; }

/* grouped view: one section per moment/day, its header sticks under the tabs */
.gv-sec__h { font-family: var(--font-ui); position: sticky; top: calc(var(--gv-tabs-h) + 2px); z-index: 10; display: flex; align-items: baseline; gap: 10px; padding: 14px 14px 8px; margin: 0; background: color-mix(in oklab, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gv-sec__t { font-family: var(--gv-meta-font); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.2; color: var(--ink); }
[data-theme="taupe"] .gv-sec__t, [data-theme="toscana"] .gv-sec__t, [data-theme="orquidea"] .gv-sec__t, [data-theme="blush"] .gv-sec__t { font-family: "Cormorant Garamond", Georgia, serif; }
.gv-sec__time { font-size: 11px; letter-spacing: .08em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gv-sec__sub { margin-left: auto; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* people: like Instagram highlights */
/* "Por persona" (WED-300): the circles stay on top, the picked one gets a thick accent ring, its photos follow below.
   Phones: one row that scrolls sideways; wider screens: centred rows. */
.gv-peoplebar { max-width: 1080px; margin: 0 auto; }
.gv-people { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; padding: 20px 14px 14px; }
.gv-who { flex: none; width: 92px; display: grid; justify-items: center; align-content: start; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--ink); text-align: center; padding: 4px 0; -webkit-tap-highlight-color: transparent; transition: opacity var(--dur-1); }
.gv-who__ring { width: 76px; height: 76px; border-radius: 50%; padding: 3px; border: 1px solid var(--gv-orn); transition: border-color var(--dur-1), padding var(--dur-1), border-width var(--dur-1); }
.gv-who__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--c, var(--gv-tile)); }
.gv-who__n { font-size: 13px; line-height: 1.25; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.gv-who__c { font-size: 11px; color: var(--ink-3); margin-top: -4px; }
.gv-who[aria-pressed="true"] .gv-who__ring { border: 3px solid var(--brand-accent); padding: 1px; }
.gv-who[aria-pressed="true"] .gv-who__n { font-weight: 600; color: var(--accent-text, var(--ink)); }
.gv-people:has([aria-pressed="true"]) .gv-who[aria-pressed="false"] { opacity: .62; }
.gv-people:has([aria-pressed="true"]) .gv-who[aria-pressed="false"]:hover { opacity: 1; }
.gv-who:focus-visible { outline: none; }
.gv-who:focus-visible .gv-who__ring { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
/* WED-396: under "Por invitado", what the circles mean (who uploaded, not who is in the photo). */
.gv-peoplebar__sub { margin: 16px 0 -8px; padding: 0 14px; text-align: center; font-family: var(--gv-meta-font); font-style: italic; font-size: 1rem; color: var(--ink-3); }
.gv-faces__demo { max-width: 46ch; margin: 2px auto 10px; }
.gv-peoplebar__say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gv-empty--pick { padding-top: 40px; }
@media (max-width: 699px) {
  .gv-people { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; gap: 6px; padding: 16px 10px 12px; }
  .gv-people::-webkit-scrollbar { display: none; }
  .gv-people > :first-child { margin-left: auto; } /* centred while the row fits, scrolls from the start once it does not */
  .gv-people > :last-child { margin-right: auto; }
  .gv-who { width: 84px; }
}

/* ---------- lightbox ---------- */
.lb2 { position: fixed; inset: 0; z-index: 60; color: #F7F4EF; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; font-family: var(--font-ui); }
.lb2__bg { position: absolute; inset: 0; background: #0C0B0A; opacity: 1; transition: opacity 220ms var(--ease-soft); }
.lb2.is-in .lb2__bg { animation: lbFade 220ms var(--ease-soft); }
@keyframes lbFade { from { opacity: 0; } }
.lb2__track { position: absolute; inset: 0; will-change: transform; }
.lb2__slide { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.lb2__media { position: relative; width: 100%; height: 100%; display: grid; place-items: center; will-change: transform; transform-origin: 0 0; }
.lb2__media img, .lb2__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.lb2__media .lo { filter: blur(8px); transform: scale(1.02); }
.lb2__media .hi { opacity: 0; transition: opacity 220ms var(--ease-soft); }
.lb2__media .hi.in, .lb2__media video { opacity: 1; }
.lb2__media.is-sharp .lo { visibility: hidden; }
.lb2 :focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.lb2__media.is-locked .lo { filter: blur(26px) saturate(.8); transform: scale(1.12); }
.lb2__lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(78vw, 340px); padding: 52px 20px 18px; text-align: center; font-size: 14px; line-height: 1.45; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.lb2__lock::before { content: ""; top: 18px; }
.lb2__top, .lb2__foot { position: absolute; left: 0; right: 0; z-index: 2; transition: opacity 200ms var(--ease-soft), transform 200ms var(--ease-soft); }
.lb2__top { top: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 10px 24px; background: linear-gradient(rgba(0, 0, 0, .45), transparent); }
.lb2__n { font-size: 12px; opacity: .75; padding-left: 8px; font-variant-numeric: tabular-nums; }
.lb2__foot { bottom: 0; padding: 28px 14px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); display: grid; gap: 8px; }
.lb2.is-bare .lb2__top, .lb2.is-bare .lb2__foot { opacity: 0; pointer-events: none; }
.lb2__row { display: flex; align-items: center; gap: 4px; }
.lb2__row .sp { flex: 1; }
.lb2__ib { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb2__ib:hover { background: rgba(255, 255, 255, .12); }
.lb2__ib svg { width: 25px; height: 25px; }
.lb2__like.is-on svg { fill: var(--gv-heart); stroke: var(--gv-heart); }
.lb2__like.pop svg { animation: lbPop 380ms var(--ease-out); }
@keyframes lbPop { 40% { transform: scale(1.28); } }
.lb2__likes { font-size: 13.5px; font-weight: 600; min-width: 1px; }
.lb2__by { font-size: 13px; opacity: .92; padding: 0 6px; line-height: 1.4; }
.lb2__by button { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.lb2__by time { opacity: .7; }
.lb2__mod { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.lb2__mod button { min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; font-size: 12px; cursor: pointer; }
.lb2__mod button.is-main { background: #fff; color: #1C1A16; border-color: #fff; }
/* WED-380: "Visible para" on the guest's own upload, a two-way switch sized for thumbs */
.lb2__who { display: grid; gap: 6px; padding: 0 4px; min-width: 0; }
.lb2__who-l { font-size: 12px; opacity: .78; padding: 0 2px; }
.lb2__seg { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; padding: 3px; max-width: 420px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
.lb2__seg button { min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.15; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 160ms var(--ease-soft), color 160ms var(--ease-soft); }
.lb2__seg button[aria-pressed="true"] { background: #fff; color: #1C1A16; }
.lb2__seg button:disabled { cursor: progress; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .lb2__seg button { transition: none; } }
.lb2__nav { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: none; place-items: center; }
.lb2__nav:hover { background: rgba(255, 255, 255, .22); }
.lb2__prev { left: 14px; } .lb2__next { right: 14px; }
@media (hover: hover) and (pointer: fine) { .lb2__nav { display: grid; } }
.lb2__sound { position: absolute; right: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb2__sound svg { width: 18px; height: 18px; }
.lb2__burst { position: absolute; z-index: 4; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; animation: lbBurst 760ms var(--ease-out) forwards; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); }
@keyframes lbBurst { 0% { transform: scale(.2); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 32% { transform: scale(.94); } 46% { transform: scale(1); opacity: 1; } 100% { transform: scale(1) translateY(-26px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lb2__burst { animation-duration: 1ms; } .gv-tile img { transition: none; } .gv-tile.is-skel { animation: none; } }
.gv-lb-open { overflow: hidden; }

/* ---- guestbook card (WED-133): video, voice or text for the hosts ---- */
.gb { padding: 22px 20px 20px; text-align: center; }
.gb__t { margin: 0 0 6px; font-family: var(--gv-title-font, var(--font-display)); font-weight: 400; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.15; text-wrap: balance; hyphens: manual; }
.gb__lede { margin: 0 auto 18px; max-width: 34ch; color: var(--ink-2); font-size: 15px; text-wrap: pretty; }
.gb__form { display: grid; gap: 12px; text-align: left; }
.gb__kinds { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
/* WED-391: an icon left of each kind's label, so the three read apart at a glance */
.gb__kind { gap: 7px; padding: 0 14px 0 11px; }
.gb__ic { flex: none; display: block; width: 17px; height: 17px; }
.gb__box { display: grid; justify-items: center; gap: 10px; padding: 14px 0 2px; }
.gb__live, .gb__play[data-v] { width: min(100%, 320px); border-radius: var(--gv-r-card); background: #111; }
.gb__live { aspect-ratio: 3 / 4; object-fit: cover; transform: scaleX(-1); }
video.gb__play { aspect-ratio: 3 / 4; object-fit: cover; }
audio.gb__play { background: none; }
.gb__rec { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 15px; cursor: pointer; }
.gb__rec i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.gb__rec.is-rec { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gb__rec.is-rec i { background: var(--accent-ink); border-radius: 2px; animation: gbPulse 1.2s ease-in-out infinite; }
@keyframes gbPulse { 50% { opacity: .35; } }
.gb__time { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink-2); }
.gb__row { display: flex; gap: 16px; justify-content: center; }
.gb__msg { min-height: 1.2em; margin: 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.gb__msg.is-err { color: var(--danger, #9b2c2c); }
.gb__box .up__hint { margin-top: 0; }
.gb__text { min-height: 140px; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.gb__send { margin-top: 4px; }
.gb__done { display: grid; justify-items: center; gap: 14px; padding: 6px 0 4px; }
.gb__thanks { margin: 0; font-family: var(--gv-title-font, var(--font-display)); font-size: 1.35rem; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .gb__rec.is-rec i { animation: none; } }
.gv-top:empty { min-height: 0; }

/* ---------- thank-you page while the hosts closed the gallery (WED-219) ---------- */
.gv-thanks { display: grid; place-items: center; }
.gv-thanks__in { padding-top: calc(40px + env(safe-area-inset-top)); padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.gv-thanks .gv-orn { margin-bottom: 14px; }
.gv-thanks__line { margin: 28px auto 0; max-width: 22ch; font-family: var(--gv-meta-font); font-style: italic; font-size: clamp(1.5rem, 5.6vw, 2.1rem); line-height: 1.2; color: var(--ink); text-wrap: balance; hyphens: manual; }
.gv-thanks__lede { margin: 14px auto 0; max-width: 40ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.gv-thanks__hosts { display: inline-block; margin-top: 40px; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.gv-thanks__hosts:hover { color: var(--ink); }

/* WED-288: "Subir fotos" greyed out while the owners have not confirmed their e-mail, with the reason below. */
.gv-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.gv-upwhy { max-width: 34ch; margin: 10px auto 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }

/* WED-286: the guestbook's own page, the gallery's look, the way back at the top. */
.gv-gbpage__in { max-width: 640px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.gv-gbpage .gb { margin: 0; }

/* WED-363: the upload button never wraps ("Enviar fotos" broke into two lines on phones). */
#upToggle { white-space: nowrap; }

/* WED-374: guests' note on the code screen while the hosts group photos by face. */
.gv-facenote { margin: 14px 0 0; font-size: .82rem; line-height: 1.45; color: var(--muted, #6b5b5f); text-wrap: pretty; }
/* WED-402: the same note inside the gallery for guests, quiet, under the header. */
.gv-faces__more { margin: 6px 0 12px; font-size: 13px; }
.gv-facenote--in { width: calc(100% - 2 * var(--gutter)); max-width: 560px; margin: 0 auto 16px; text-align: center; }

/* WED-374: "Por rostro" for the hosts, above the uploaders' circles. */
.gv-faces { max-width: 640px; margin: 0 auto; padding: 18px 14px 4px; text-align: center; }
.gv-faces[hidden] { display: none; }
.gv-faces__card { background: var(--accent-soft, #f6eef0); border-radius: 14px; padding: 18px 18px 20px; display: grid; gap: 10px; justify-items: center; }
.gv-faces__card h3 { margin: 0; font-family: var(--gv-meta-font); font-style: italic; font-weight: 400; font-size: 1.25rem; text-wrap: balance; hyphens: manual; }
.gv-faces__card p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2, var(--ink)); text-wrap: pretty; }
.gv-faces__ok { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: .85rem; line-height: 1.45; cursor: pointer; }
.gv-faces__ok input { flex: none; margin-top: 3px; }
.gv-faces__h { margin: 14px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.gv-faces__busy, .gv-faces__note { margin: 8px 0 0; font-size: .85rem; color: var(--ink-3); text-wrap: pretty; }
.gv-faces__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 6px 0 0; }
.gv-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .82rem; color: var(--accent-text, var(--ink)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gv-link[hidden] { display: none; }
.gv-who__crop { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--gv-tile); }
.gv-who__face { position: absolute; max-width: none; }

/* WED-388: guests' "Salir" is a quiet icon in the top-right corner of the page (44 px target), outside .gv-top so the
   header keeps its height; .gv-top makes room on its right in case it holds the theme preview label. */
.gv-leave { position: absolute; z-index: 5; top: calc(2px + env(safe-area-inset-top)); right: max(4px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-1), color var(--dur-1); }
/* WED-391: a soft round wash on hover and focus, tinted from the icon's own colour so it reads on every theme */
.gv-leave:hover { background: color-mix(in srgb, currentColor 9%, transparent); color: var(--ink); }
.gv-leave:active { background: color-mix(in srgb, currentColor 14%, transparent); }
.gv-leave:focus-visible { outline: none; background: color-mix(in srgb, currentColor 9%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent); }
.gv-leave svg { display: block; }
.gv-leave + .gv-top { padding-right: 40px; }
@media (min-width: 760px) { .gv-leave { top: calc(10px + env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); } }