/* ==========================================================================
   Recuerdi — new look "Crema" (WED-357, chosen by David from WED-356 variant 2)
   with the corner radii of variant 1 "Nítido": much less rounded buttons and cards.
   Loaded after site.css + pages.css, and only where MarketingConfig.newLook is on
   (test host now; recuerdi.com once NEW_LOOK_PUBLIC in src/server/public-site.ts is true).
   Light cream paper; Crimson Violet #5B1E32 for headings, prices, buttons and script words;
   Ice Sky #B7D1EA only as a fill (cards, pills) with crimson text on top, never as text on light ground.
   ========================================================================== */

/* Cormorant Garamond: the same files the gallery templates use (public/site/fonts); the other two are the site's own */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/site/fonts/cormorantgaramond-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/site/fonts/cormorantgaramond-italic.woff2) format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/marketing/fonts/nunito-sans.woff2) format("woff2"); }
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url(/marketing/fonts/great-vibes.woff2) format("woff2"); }

:root {
  /* the one accent token (DESIGN-RULES): everything else derives from it or is fixed for this light page */
  --brand-accent: #5B1E32;
  --crimson: var(--brand-accent);
  --crimson-deep: #4A1628; --crimson-ink: #2A0E19;
  --ice: #B7D1EA; --ice-deep: #8FB0D1; --ice-light: #DCE8F4; --ice-mist: #EEF4FA; --ice-white: #F7FAFD;

  --paper:   #FCF9F4;   /* zartes Creme */
  --paper-2: #F8F3EB;
  --paper-3: #F1EAE0;
  --ivory:   #FFFDF9;
  --ink:     #2A1A1E;   /* 16:1 on paper */
  --ink-2:   #4E3C40;   /* 9.6:1 */
  --ink-3:   #6F5E60;   /* 6.0:1 */
  --rule:        rgba(91, 30, 50, .12);
  --rule-strong: rgba(91, 30, 50, .3);

  --accent: var(--brand-accent);
  --accent-text: var(--brand-accent);    /* 11.8:1 on paper */
  --accent-hover: var(--crimson-deep);
  --accent-ink: #FFFFFF;
  --accent-soft: var(--ice-mist);
  --champagne: var(--ice-deep); --champagne-soft: var(--ice-light);
  --ring: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 30%, transparent);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Great Vibes", cursive;
  --tracking-display: -.01em;
  --tracking-caps: .14em;

  --shadow-2: 0 2px 6px rgba(42,26,30,.04), 0 18px 36px -16px rgba(42,26,30,.16);

  /* corners of "Nítido": barely rounded */
  --radius-2: 6px;
  --radius-3: 12px;
  --radius-btn: 8px;
  --radius-block: 20px;
}
::selection { background: var(--ice-light); color: var(--crimson-ink); }

/* ---------- Type ---------- */
h1, h2, h3 { color: var(--crimson); font-weight: 500; }
em, .it { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.hero h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 6rem); line-height: 1; max-width: 18ch; }
/* the phone hero headline pins Fraunces in site.css */
@media (max-width: 600px) { .hero h1 { font-family: var(--font-display); } }
/* Great Vibes only on the short endings of the big headlines; long italic sentences stay in the serif italic */
.hero h1 em, #momentos h2.rv em, #estilos h2.rv em, #precios h2.rv em, .cta h2 em {
  font-family: var(--font-script); font-style: normal; font-weight: 400; letter-spacing: 0;
  font-size: 1.2em; line-height: .9; color: var(--crimson);
}
.hero h1 em { font-size: 1.24em; }
.mo-board .gv-sec__t { font-family: var(--font-display); font-weight: 500; }
summary { font-weight: 500; }

/* ---------- Wordmark "RECUERdi" + seal "Rd" ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; letter-spacing: 0; color: var(--crimson); }
.wordmark .mono { width: 40px; height: 40px; flex: none; }
.bm { display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; }
.bm__caps { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 1.55em; }
.bm__script { font-family: var(--font-script); font-weight: 400; font-size: 2.25em; line-height: 0; margin-left: -.06em; color: var(--crimson); transform: translateY(.05em); text-transform: none; letter-spacing: 0; }
.mono text { font-weight: 400; }
.mono__r { font-family: var(--font-display); font-size: 62px; fill: currentColor; }
.mono__d { font-family: var(--font-script); font-size: 78px; fill: var(--crimson); }
.mono__ring, .mono__ring2 { fill: none; stroke: var(--crimson); stroke-width: 1.2; opacity: .55; }
.mono__ring2 { stroke-width: .6; }
.ftr__mark, .ftr__mark[data-team] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); width: 100%;
  font-size: clamp(1.6rem, .6rem + 3.6vw, 4.4rem); letter-spacing: 0; line-height: 1; color: var(--crimson); }
.ftr__mark .mono { width: clamp(64px, 3rem + 4vw, 132px); height: auto; flex: none; }
@media (max-width: 600px) { .wordmark .mono { display: none; } .bm { font-size: .82rem; } }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-btn); font-weight: 700; }
.btn--ghost { --fg: var(--crimson); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--ice-light); border-color: var(--ice-light); color: var(--crimson); }
.nav a:not(.btn) { font-weight: 600; }
.menu-btn { border-radius: var(--radius-btn); }

/* ---------- Header, sections ---------- */
.hdr, .hdr.is-scrolled { background: var(--paper); }
.hdr.is-scrolled { background: color-mix(in srgb, var(--paper) 92%, transparent); }
.eyebrow .num { font-family: var(--font-ui); font-style: normal; font-weight: 700; font-size: var(--step--2); letter-spacing: .08em; text-transform: none;
  color: var(--crimson); background: var(--ice-light); padding: 6px 14px; border-radius: 999px; }
.eyebrow::after { display: none; }
.steps-sec, .events { background: var(--paper); }
.guest-sec { background: var(--paper-2); }
.section.rule-top { border-top: 0; }
.trust li::before { background: var(--crimson); }
.step { border-top: 0; padding: var(--space-5); background: var(--ice-mist); border-radius: var(--radius-3); }
.step__when .n { font-style: italic; color: var(--crimson); }
.feat-card { background: var(--ice-mist); border-color: transparent; }
.feat-card__ico { color: var(--crimson); }
.feat-card__vis { border-radius: var(--radius-2); }
.chip-s { border-color: var(--rule-strong); }
.chip-s.is-on { background: var(--ice); color: var(--crimson-ink); border-color: var(--ice); }
.domain { background: var(--ice-mist); }
.mo-board { border: 0; box-shadow: var(--shadow-2); background: var(--ivory); }
.mo-board .gv-sec { border-radius: var(--radius-3); }
.gtoast { background: var(--ice-white); color: var(--crimson-ink); border-radius: var(--radius-3); }
.gtoast b { color: var(--crimson-ink); }
.gcode { background: var(--ice-light); color: var(--crimson-ink); transform: none; box-shadow: var(--shadow-2); border-radius: var(--radius-3); }
.gbook__private { background: var(--ice-mist); }
.guest-flow__cap .n { box-shadow: none; }

/* ---------- Prices ---------- */
.offer { background: var(--ivory); border-color: var(--rule); }
.offer--hi { background: var(--ice-light); border-color: var(--ice); }
.offer--hi .offer__price, .offer--hi h3, .offer__price { color: var(--crimson); }
.offer__tag { background: var(--crimson); border-color: var(--crimson); color: #FFFFFF; font-weight: 700; }

/* ---------- FAQ ---------- */
.faq__list { border-top-color: var(--rule-strong); }
.faq details { border-color: var(--rule); }

/* ---------- Closing block: a soft ice card on cream (not a full-width band) ---------- */
.cta { background: var(--paper); color: var(--ink); padding-block: var(--space-8); }
.cta::before { display: none; }
.cta .wrap { background: var(--ice-light); border-radius: var(--radius-block); padding: var(--space-9) var(--space-6); max-width: calc(var(--max-w) - 2 * var(--gutter)); margin-inline: auto; }
@media (max-width: 760px) { .cta .wrap { margin-inline: var(--gutter); width: auto; padding: var(--space-8) var(--space-5); } }
.cta h2, .cta h2 em { color: var(--crimson); }
.cta .lede { color: var(--crimson-ink); }
.cta .btn { --bg: var(--crimson); --fg: #FFFFFF; border-color: var(--crimson); }
.cta .btn:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); color: #FFFFFF; }

/* ---------- Footer ---------- */
.ftr { background: var(--paper); border-top: 1px solid var(--rule); }
.ftr__cols h3 { color: var(--ink-3); font-weight: 700; }
.ftr__cols .serif { font-weight: 400 !important; color: var(--crimson); }

/* ---------- Small parts shared by every page ---------- */
.events .eyebrow::before { display: none; }
.lang-sw__menu { border-radius: var(--radius-3); }
.lang-sw__menu a { border-radius: var(--radius-2); }
.tb-stars i.on svg { fill: var(--crimson); }
.c-quote::before { color: var(--crimson); }
.emb .cta h2 em { color: var(--crimson); }

/* the guides' closing start block: the same soft ice card as the page's closing block, no dark panel */
.g-end { background: var(--ice-light); color: var(--ink); border-radius: var(--radius-block); }
.g-end__k, .g-end__t, .g-end__t em { color: var(--crimson); }
.g-end__t { font-weight: 500; }
.g-end__x, .g-end__free { color: var(--ink-2); }
.g-end .g-end__btn { --bg: var(--crimson); --fg: #FFFFFF; color: #FFFFFF; border-color: var(--crimson); }
.g-end .g-end__btn:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); }
.g-end__demo, .g-end__prices a { color: var(--crimson); }
.g-end__demo:hover, .g-end__prices a:hover { color: var(--crimson-ink); }

/* between tablet and wide desktop the menu gets tight: no wrapping words, the seal steps aside first */
.nav a { white-space: nowrap; }
@media (min-width: 921px) and (max-width: 1180px) {
  .wordmark .mono { display: none; }
  .nav { gap: var(--space-5); }
}

/* "Muy pronto" (WED-359): what recuerdi.com shows for checkout and sign-in until they open there */
.soon { padding-block: clamp(72px, 12vw, 140px) !important; }
.soon h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1.02; margin: 0 0 var(--space-5); text-wrap: balance; }
.soon p { color: var(--ink-2); text-wrap: pretty; margin: 0 0 var(--space-3); }
.soon p:first-of-type { font-size: var(--step-1); }
.soon .link-u { color: var(--crimson); font-weight: 700; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; }
.soon .link-u:hover { text-decoration-color: var(--crimson); }
.soon p:last-child { margin-top: var(--space-6); }
.soon p:last-child .link-u { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-btn); background: var(--crimson); color: #FFFFFF; text-decoration: none; }
.soon p:last-child .link-u:hover { background: var(--crimson-deep); }

/* ==========================================================================
   Guides, comparisons, event and country texts (WED-361): the hero, the contents and the building blocks of
   content-blocks.ts / guide-shell.ts in the new look. Headings and display titles crimson, ice only as a fill
   (crimson text on top), corners of "Nítido", buttons 8px. Class names stay those of pages.css, so every guide
   gets this at once; nothing here is loaded on recuerdi.com until NEW_LOOK_PUBLIC.
   ========================================================================== */
.prose h2, .prose h3, .prose .g-faq h2 { color: var(--crimson); }
.guide .prose > h3 { font-family: var(--font-ui); font-weight: 700; }
.guide .prose:not(.prose--plain) > h2[id]::before, .toc a::before, .toc-m__list a::before { color: var(--crimson); font-weight: 500; }
.guide .prose > ul:not([role]) > li::before { background: var(--crimson); opacity: .55; }
.guide .prose > ol:not([role]) > li::marker { color: var(--crimson); font-weight: 500; }

/* hero: Cormorant is narrower than Fraunces, so the column may hold more characters (at most 3 lines on desktop) */
.g-hero h1 { max-width: 24ch; }
.g-hero--event h1 { max-width: 18ch; }
.g-hero__kicker { font-weight: 700; color: var(--crimson); }
.g-hero--event .g-hero__kicker span:first-child { font-weight: 500; }
.g-hero__visual::before { background: var(--ice-mist); border-radius: var(--radius-block); }
.g-hero--event .g-hero__visual::before { background: var(--paper); }
.g-hero__visual::after { border-color: var(--ice-deep); }
.g-hero__phone, .c-phone__frame, .c-product__img--phone { background: var(--crimson-ink); }
.g-answer, .c-answer { background: var(--ivory); border-color: var(--rule); }
.g-answer__label, .c-answer__label { color: var(--crimson); font-weight: 700; }
.g-answer__label::before, .c-answer__label::before { background: var(--crimson); }

/* contents: the side list, the side start card and the phone's "Contenido" bar */
.guide .toc a[aria-current], .toc-m__list a[aria-current] { color: var(--crimson); }
.toc .caps, .toc-m__l { color: var(--crimson); font-weight: 700; }
.side-cta { background: var(--ice-light); border-radius: var(--radius-3); }
.side-cta .serif { color: var(--crimson); font-weight: 500; }
.side-cta .serif em { color: var(--crimson); }
.side-cta .muted { color: var(--ink-2); }
.toc-m { background: var(--paper); }
.toc-m__panel { border-radius: var(--radius-3); }

/* section labels of the blocks: Nunito bold in crimson */
.c-steps__t, .c-check__t, .c-docs__t, .c-tip > .c-tip__label, .c-product__k { color: var(--crimson); font-weight: 700; }

/* steps: the number on an ice disc (like the landing's step pills), upright serif */
.c-step::before { background: var(--ice-light); color: var(--crimson); font-style: normal; font-weight: 600; }
.c-step:not(:last-child)::after { background: var(--ice-deep); opacity: .7; }
.c-steps--timeline .c-step::before { background: var(--paper); border-color: var(--crimson); }
.prose .c-steps--timeline .c-step__t { color: var(--crimson); font-weight: 500; }
.c-step__img img { border-radius: var(--radius-2); }

/* boxes: tip on ice, "Ojo" on a soft crimson tint, "Bueno saber" on warm paper, deadline framed all round */
.c-tip { background: var(--ice-mist); }
.c-tip > .c-tip__i { color: var(--crimson); }
.c-tip--warn { background: color-mix(in srgb, var(--crimson) 6%, var(--paper)); }
.c-tip--warn .c-tip__i, .c-tip--warn .c-tip__label { color: var(--crimson); }
.c-tip--info { background: var(--paper-2); }
.c-tip--info .c-tip__i, .c-tip--info .c-tip__label { color: var(--crimson); }
.c-tip--date { background: var(--ivory); border: 1px solid var(--rule-strong); }

/* checklist, documents */
.c-check, .c-docs { background: var(--ivory); border-color: var(--rule); }
.c-check__i { color: var(--crimson); }
.c-docs__i { background: var(--ice-light); color: var(--crimson); }

/* copy cards: square-ish button like every button of the look */
.c-copy { background: var(--ivory); border-color: var(--rule); }
.c-copy__btn { border-radius: var(--radius-btn); border-color: var(--rule-strong); color: var(--crimson); font-weight: 700; }
.c-copy__btn:hover { background: var(--ice-light); border-color: var(--ice-light); color: var(--crimson); }
.c-copy__btn.is-done { background: var(--crimson); border-color: var(--crimson); color: #FFFFFF; }
.c-ph { background: var(--ice-light); color: var(--crimson-ink); border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .c-copy__btn { transition: none; } }

/* pull quote, list ideas, product insert, inline start card: display titles in crimson */
.c-quote blockquote { color: var(--crimson); font-weight: 500; }
.c-quote figcaption { color: var(--ink-3); }
.prose .c-idea__t { color: var(--crimson); font-weight: 500; }
.c-idea__n { color: var(--crimson); font-weight: 500; }
.c-product { background: var(--ice-mist); }
.prose .c-product__t { color: var(--crimson); font-weight: 500; }
.c-cta { background: var(--ivory); border-color: var(--rule); }
.c-cta__t { color: var(--crimson); font-weight: 500; }

/* pictures in the text: warm paper behind the phones, framed screenshots with the card radius */
.guide .c-phone { background: var(--paper-2); }
.c-fig img { border-radius: var(--radius-3); }

/* tables: Recuerdi's column on ice, its header crimson */
.guide--comparar .c-table th:last-child, .guide--comparar .c-table td:last-child { background: var(--ice-mist); }
.guide--comparar .c-table thead th:last-child { background: var(--ice-light); color: var(--crimson); }
.prose .c-table thead th { color: var(--crimson); font-weight: 700; }
@media (max-width: 600px) {
  .prose .c-table--stack td:first-child { color: var(--crimson); font-weight: 500; }
  .guide--comparar .c-table--stack td:last-child { background: var(--ice-light); }
}

/* questions */
.g-faq { border-top-color: var(--rule-strong); }
.g-faq summary { color: var(--ink); }
.g-faq details[open] summary, .g-faq summary:hover { color: var(--crimson); }
.g-faq details[open] summary .pm { border-color: var(--crimson); }

/* the closing start block: the phone in the dark plum of the other frames, a soft shadow on the ice card */
.g-end__phone { background: var(--crimson-ink); box-shadow: 0 -8px 28px rgba(42, 14, 25, .18); }

/* italic words in running text (titles of media, terms): the serif italic of the look, scaled to Nunito's x-height */
.prose :is(p, li, td) em { font-size: 1.12em; line-height: 1; }
/* on the phone the side start card would sit right under the closing block with the same offer: the closing block suffices */
@media (max-width: 1000px) { .guide .article__side .side-cta { display: none; } }

/* WED-398 (David 2026-11-10): "Ingresar" / "Mi cuenta" is the same secondary button as "Ver una galería de ejemplo"
   (btn btn--ghost, layout.ts). site.css's older text-link rule ".nav a.nav__login" (0,2,1) would still shrink its padding
   and recolour it, so it is reset here to the button's own values. */
.nav a.nav__login.btn { display: inline-flex; min-height: 48px; padding: 0 1.5em; margin-inline: 0; color: var(--crimson); font-weight: 700; text-decoration: none; }
.nav a.nav__login.btn:hover { background: var(--ice-light); border-color: var(--ice-light); color: var(--crimson); text-decoration: none; }
.nav a.nav__login.btn:focus-visible { border-radius: var(--radius-btn); }

/* WED-395: Cormorant's default figures are old-style (1 looks like "I", 3/4/5 hang below the line), so numbers in
   circles looked dropped. Lining figures sit on the line and centre in the circle; tabular keeps 1-9 equally wide. */
.guest-flow__cap .n, .c-step::before { font-variant-numeric: lining-nums tabular-nums; }
.emb-facts b, .emb-ex__total b { font-variant-numeric: lining-nums; }

/* ---------- Estilos: the own style card below the six styles (WED-394, David 2026-11-10: variant A) ----------
   src/modules/marketing/own-style.ts. Ice fill with crimson text, a full border (DESIGN-RULES). */
.own-k { display: inline-flex; align-items: center; gap: 8px; color: var(--crimson); font-weight: 700; }
.own-k svg { width: 16px; height: 16px; }
.own-pin { position: relative; display: block; padding: 5px 5px 14px; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(42,26,30,.08), 0 10px 22px -12px rgba(42,26,30,.35); }
.own-pin img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.own-pin__dot { position: absolute; top: -5px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--crimson); box-shadow: inset -2px -2px 0 rgba(0,0,0,.18), 0 2px 3px rgba(0,0,0,.2); }
.own-mini { display: grid; gap: 8px; padding: 12px 12px 14px; border-radius: var(--radius-3); background: #F6EDE6; border: 1px solid rgba(74,44,37,.14); box-shadow: var(--shadow-2); }
.own-mini__t { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1; text-align: center; color: #4A2C25; }
.own-mini__t em { color: #7F8C5E; }
.own-mini__g { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.own-mini__g img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.own-tile { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; margin-top: var(--space-5);
  padding: var(--space-5); border-radius: var(--radius-3); background: var(--ice-light); border: 1px solid var(--ice); color: var(--ink); text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease; }
.own-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.own-tile:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; }
.own-tile__vis { display: grid; grid-template-columns: minmax(0, 1.2fr) 34px minmax(0, 1fr); align-items: center; gap: 6px; }
.own-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; padding: 6px 4px 0; }
.own-pins .own-pin--0 { transform: rotate(-4deg); } .own-pins .own-pin--1 { transform: rotate(3deg) translateY(6px); }
.own-pins .own-pin--2 { transform: rotate(2deg); } .own-pins .own-pin--3 { transform: rotate(-3deg) translateY(4px); }
.own-tile__arr { color: var(--crimson); } .own-tile__arr svg { width: 34px; height: 14px; display: block; }
.own-tile__txt { display: grid; gap: 8px; justify-items: start; }
.own-tile__h { display: block; font-family: var(--font-script); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1; color: var(--crimson); }
.own-tile__p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; text-wrap: pretty; }
.own-tile__cta { margin-top: 4px; font-weight: 700; color: var(--crimson); }
@media (max-width: 640px) {
  .own-tile { grid-template-columns: 1fr; padding: var(--space-4); }
  .own-tile__vis { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) { .own-tile { transition: none; } .own-tile:hover { transform: none; } }
/* WED-407 (David 2026-11-10): "Ingresar" and "Crear galería gratis" belong together: a smaller gap between the two
   buttons than between the menu links (nav gap 2rem → 0.75rem). Desktop only; in the mobile menu they stack. */
@media (min-width: 921px) { .nav a.nav__login.btn { margin-inline-end: calc(var(--space-3) - var(--space-6)); } }