/* ==========================================================================
   Style variations to move the site away from the original layout.
   Each one is enabled with <html data-tema="...">. Without the attribute, the original stays.
   Keeps the logo, text, photos and products; changes palette, fonts, shapes and composition.
   ========================================================================== */

/* ---------- shared across variations: body font follows the theme vars ---------- */
html[data-tema] body { font-family: var(--sans); }
html[data-tema] em.s, html[data-tema] .s { font-family: var(--serif); }
html[data-tema] .hc-preco, html[data-tema] .hc-quando, html[data-tema] .hc-fav blockquote, html[data-tema] .hc-nota blockquote, html[data-tema] .hc-total b { font-family: var(--serif); }

/* ==========================================================================
   A · AREIA: warm terracotta, Fraunces + Manrope, round shapes,
   asymmetric hero with text on the left
   ========================================================================== */
html[data-tema="areia"] {
  --tinta: #2A1D17; --tinta-2: #362720; --tinta-3: #4A372D;
  --marfim: #F4EDE4; --papel: #FBF7F1; --blush: #E7CDB4; --blush-2: #F3E6D8;
  --rosa: #B5532F; --texto: #2A1D17; --suave: #7B6A5E;
  --linha: rgba(42, 29, 23, .14); --linha-clara: rgba(244, 237, 228, .18);
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --borda: 22px;
}
html[data-tema="areia"] .btn { border-radius: 999px; letter-spacing: .08em; }
html[data-tema="areia"] .topo .barra > .btn { border-radius: 999px; }
html[data-tema="areia"] .topo.solido { background: rgba(42, 29, 23, .92); }
html[data-tema="areia"] .nav a { text-transform: none; letter-spacing: .01em; font-size: 14.5px; }
/* hero: one large panel and two narrow ones; text bottom-left */
html[data-tema="areia"] .abertura .midia { grid-template-columns: 2.2fr 1fr 1fr; gap: 6px; background: var(--tinta); }
html[data-tema="areia"] .abertura .painel + .painel { border: 0; }
html[data-tema="areia"] .abertura .painel { border-radius: 0 0 var(--borda) var(--borda); }
html[data-tema="areia"] .abertura .veu { background: linear-gradient(90deg, rgba(42, 29, 23, .82) 0%, rgba(42, 29, 23, .35) 45%, rgba(42, 29, 23, .05) 70%), linear-gradient(0deg, rgba(42, 29, 23, .6), transparent 40%); }
html[data-tema="areia"] .abertura .meio { place-content: end start; justify-items: start; text-align: left; padding: 96px var(--lado) 26vh; }
html[data-tema="areia"] .abertura .acoes { justify-items: start; }
html[data-tema="areia"] .titulo { font-family: var(--serif); font-weight: 300; letter-spacing: -.03em; font-size: clamp(46px, 6.6vw, 104px); }
html[data-tema="areia"] .titulo .s { font-style: italic; color: var(--blush); }
html[data-tema="areia"] .espia { justify-content: flex-end; padding-right: var(--lado); }
html[data-tema="areia"] .espia a { --y: 0px !important; border-radius: 999px 999px var(--borda) var(--borda); width: clamp(120px, 11vw, 170px); }
/* headings: left-aligned with a rule */
html[data-tema="areia"] .cab { text-align: left; margin-left: var(--lado); margin-right: var(--lado); max-width: none; padding: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px 60px; align-items: end; }
html[data-tema="areia"] .cab p { margin: 0; max-width: 460px; }
html[data-tema="areia"] .cab h2, html[data-tema="areia"] .h2 { font-family: var(--serif); letter-spacing: -.025em; }
html[data-tema="areia"] .cab > .hc-rot { grid-column: 1 / -1; margin: 0; }
html[data-tema="areia"] .numeros strong { font-family: var(--serif); }
html[data-tema="areia"] .abas button { border-radius: 999px; }

/* ==========================================================================
   B · SÁLVIA: sage green and off-white, Cormorant + DM Sans, straight lines,
   full-screen hero with a single video
   ========================================================================== */
html[data-tema="salvia"] {
  --tinta: #1B2620; --tinta-2: #24322A; --tinta-3: #34463B;
  --marfim: #EEF0E8; --papel: #F7F8F3; --blush: #CAD6C0; --blush-2: #E3E9DA;
  --rosa: #4E6B48; --texto: #1B2620; --suave: #6A7468;
  --linha: rgba(27, 38, 32, .14); --linha-clara: rgba(238, 240, 232, .18);
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --borda: 0px;
}
html[data-tema="salvia"] .btn { --bg: transparent; --fg: currentColor; --bg2: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px currentColor; }
html[data-tema="salvia"] .btn.escuro { --bg: var(--tinta); --fg: var(--marfim); box-shadow: none; }
html[data-tema="salvia"] .topo .barra > .btn { --bg: var(--marfim); --fg: var(--tinta); box-shadow: none; }
html[data-tema="salvia"] .topo.solido { background: rgba(27, 38, 32, .94); }
html[data-tema="salvia"] .topo .barra { border-bottom: 1px solid var(--linha-clara); }
/* hero: just the middle video, full width; huge title */
html[data-tema="salvia"] .abertura .midia { grid-template-columns: 1fr; }
html[data-tema="salvia"] .abertura .p1, html[data-tema="salvia"] .abertura .p3 { display: none; }
html[data-tema="salvia"] .abertura .veu { background: linear-gradient(180deg, rgba(27, 38, 32, .5), rgba(27, 38, 32, .25) 40%, rgba(27, 38, 32, .85)); }
html[data-tema="salvia"] .titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 9vw, 150px); letter-spacing: -.02em; line-height: .9; }
html[data-tema="salvia"] .titulo .s { font-weight: 300; }
html[data-tema="salvia"] .abertura .rot { letter-spacing: .3em; }
html[data-tema="salvia"] .espia { gap: 0; }
html[data-tema="salvia"] .espia a { --y: 0px !important; border-radius: 0; box-shadow: none; border: 4px solid var(--papel); margin-left: -4px; }
/* headings: small numbered eyebrow and serif title */
html[data-tema="salvia"] .cab h2, html[data-tema="salvia"] .h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(42px, 5.6vw, 80px); }
html[data-tema="salvia"] .cab::before { content: '— Live Colours —'; display: block; margin-bottom: 18px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--rosa); }
html[data-tema="salvia"] .escuro-sec .cab::before { color: var(--blush); }
html[data-tema="salvia"] .cab:has(.hc-rot)::before { display: none; }
html[data-tema="salvia"] .numeros strong { font-family: var(--serif); font-weight: 400; }
html[data-tema="salvia"] .hc-wa, html[data-tema="salvia"] .abas button { border-radius: 0; }
html[data-tema="salvia"] .hc-fav-img { border-radius: 0; }

/* ==========================================================================
   C · AMEIXA: plum and nude, Playfair Display + Jost, framed hero
   with rounded panels and spacing between them
   ========================================================================== */
html[data-tema="ameixa"] {
  /* plum swapped for black */
  --tinta: #0E0E0E; --tinta-2: #1A1A1A; --tinta-3: #2E2C2A;
  /* nude #EDDDCE as the main light colour; papel and blush-2 are lighter tints of it */
  --marfim: #EDDDCE; --papel: #F7EFE8; --blush: #EDDDCE; --blush-2: #F3E8DE;
  --rosa: #0E0E0E; --texto: #0E0E0E; --suave: #6F6862;
  --linha: rgba(14, 14, 14, .13); --linha-clara: rgba(247, 238, 240, .18);
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --borda: 28px;
}
html[data-tema="ameixa"] .btn { border-radius: 14px; }
html[data-tema="ameixa"] .topo.solido { background: rgba(14, 14, 14, .9); }
/* hero: panels framed inside the page, rounded, with spacing */
html[data-tema="ameixa"] .abertura { background: var(--tinta); }
html[data-tema="ameixa"] .abertura .midia { inset: 84px 14px 14px; gap: 14px; border-radius: var(--borda); }
html[data-tema="ameixa"] .abertura .painel { border-radius: var(--borda); }
html[data-tema="ameixa"] .abertura .painel + .painel { border: 0; }
html[data-tema="ameixa"] .abertura .veu { inset: 84px 14px 14px; border-radius: var(--borda); background: radial-gradient(ellipse at center, rgba(14, 14, 14, .25), rgba(14, 14, 14, .75)); }
html[data-tema="ameixa"] .titulo { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(44px, 6.4vw, 100px); }
html[data-tema="ameixa"] .titulo .s { font-style: italic; color: var(--blush); }
html[data-tema="ameixa"] .espia { display: none; }
html[data-tema="ameixa"] .abertura .meio { padding-bottom: 12vh; }
/* headings: italic serif, accent in the plum colour */
html[data-tema="ameixa"] .cab h2, html[data-tema="ameixa"] .h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
html[data-tema="ameixa"] .cab h2 .s, html[data-tema="ameixa"] .h2 .s { color: var(--rosa); }
html[data-tema="ameixa"] .escuro-sec .cab h2 .s { color: var(--blush); }
html[data-tema="ameixa"] .numeros strong { font-family: var(--serif); font-weight: 400; }
html[data-tema="ameixa"] .numeros { background: var(--tinta-2); }

/* ---------- style switcher (test only) ---------- */
.temas { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 4px; padding: 5px; background: rgba(17, 13, 14, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; font: 500 12px/1 'Geist', Arial, sans-serif; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.temas span { padding: 0 8px 0 10px; color: rgba(255, 255, 255, .6); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.temas button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.temas button i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.temas button[aria-pressed="true"] { background: #fff; color: #111; }
@media (max-width: 760px) {
  .temas { left: 50%; transform: translateX(-50%); bottom: auto; top: 80px; }
  .temas span { display: none; }
  .temas button { padding: 7px 9px; font-size: 11px; }
}

/* ---------- "numbers" band without the numbers: the sentence becomes a statement ---------- */
.numeros p { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 40px); line-height: 1.22; letter-spacing: -.01em; max-width: 820px; margin: 0 auto; padding-inline: 20px; text-align: center; opacity: .95; }
html:not([data-tema]) .numeros p, html[data-tema="areia"] .numeros p { font-style: italic; }
html[data-tema="ameixa"] .numeros { padding: clamp(70px, 8vw, 120px) 0; }
html[data-tema="salvia"] .numeros { padding-bottom: clamp(70px, 8vw, 120px); }
html[data-tema="areia"] .numeros { padding-bottom: clamp(70px, 8vw, 120px); }

/* ---------- Noivas: bridal off-white background (all styles) ---------- */
:root { --branco-noiva: #FBF9F5; }
html[data-tema="ameixa"] { --branco-noiva: #FCFAF6; }
.noivas-clara { background: var(--branco-noiva); color: var(--texto); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.noivas-clara .rot { color: var(--rosa); }
.noivas-clara .cab p { color: var(--suave); }
.noivas-clara blockquote { color: var(--texto); opacity: .88; }
.noivas-clara blockquote cite { color: var(--suave); }
.noivas-clara .passo .n { color: var(--rosa); }
.noivas-clara .passo p { color: var(--suave); }
.noivas-clara .esteira .m { background: var(--blush-2); }
.noivas-clara .esteira figcaption { color: var(--suave); }
.noivas-clara .esteira figcaption b { color: var(--texto); }
.noivas-clara .rostos img { border-color: var(--branco-noiva); }
.noivas-clara .aprovado small { color: var(--suave); }
.noivas-clara .btn { --bg: var(--tinta); --fg: var(--marfim); --bg2: var(--tinta-3); }
html[data-tema="salvia"] .noivas-clara .btn { box-shadow: none; }
html[data-tema] .numeros p strong, html:not([data-tema]) .numeros p strong { display: inline; font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: 600; font-variant-numeric: normal; }