/* Ilumina: identidade "campo inglês". Linho e marfim, verde-azeitona, castanho profundo e bordô.
Camada final: serifada elegante nos títulos, itálico para as histórias, filetes finos e molduras de papel. */
:root {
--bg: #f5efe3;
--paper: #faf6ec;
--cream-y: #f8f2e6;
--beige: #ebe2d0;
--beige-2: #e0d4bc;
--butter: #ebe2d0;
--butter-2: #e6dcc6;
--line: #ddd0b8;
--ink: #33281f;
--brown: #4d3b2e;
--muted: #7d6e5c;
--olive: #565a3a;
--olive-deep: #3d4128;
--bordo: #6a2634;
--gold: #a8884a;
--serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
body { background: var(--bg); color: var(--ink); }
::selection { background: var(--olive); color: var(--paper); }
/* ---- aviso e cabeçalho ---- */
.announce { background: var(--beige); color: var(--olive-deep); font-style: italic; font-size: 1rem; letter-spacing: .03em; }
.announce-x { color: var(--olive-deep); }
.site-header { background: var(--cream-y); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--paper) inset; }
.hnav a { font-size: .68rem; letter-spacing: .28em; }
.hnav a:hover, .hnav a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--olive-deep); }
.cart-count { background: var(--bordo); color: #fbf3e4; }
/* ---- tipografia ---- */
h1, h2 { font-weight: 400; }
.eyebrow { font-size: .64rem; letter-spacing: .3em; color: var(--gold); }
.btn, button.btn { background: var(--olive); border-color: var(--olive); color: #f7f0de; letter-spacing: .26em; }
.btn:hover { background: var(--bordo); border-color: var(--bordo); color: #fbf3e4; }
.btn.ghost { background: transparent; color: var(--olive-deep); border-color: var(--olive); }
.btn.ghost:hover { background: var(--olive); color: #f7f0de; }
.textlink, .sec-head a, .aroma a { color: var(--bordo); border-bottom-color: var(--gold); }
/* ---- herói: o nome da coleção como título ---- */
.hero .slide::after { background: linear-gradient(rgba(40, 30, 20, .42), rgba(40, 30, 20, .55)); }
.hero-cta { gap: 0; padding-bottom: 56px; }
.hero-kicker { font-size: .68rem; letter-spacing: .42em; text-transform: uppercase; opacity: .92; margin-bottom: 18px; }
.hero-kicker::before, .hero-kicker::after { content: ""; display: inline-block; width: 38px; height: 1px; background: currentColor; opacity: .6; vertical-align: middle; margin: 0 16px; }
.hero-cta .hero-title { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 11vw, 7.2rem); letter-spacing: .12em; text-transform: uppercase; line-height: 1; margin: 0; padding-left: .12em; white-space: normal; max-width: none; }
.hero-cta .hero-sub { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 3.4vw, 2rem); margin: 14px 0 30px; max-width: 26ch; white-space: normal; line-height: 1.2; }
.hero-cta .btn { background: transparent; border-color: #f7f0de; color: #f7f0de; min-width: 220px; }
.hero-cta .btn:hover { background: #f7f0de; color: var(--olive-deep); border-color: #f7f0de; }
/* ---- vídeos de fundo: entram com um fade quando começam a tocar ---- */
.card-vid, .events-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.card-vid { z-index: 0; }
.events-vid { z-index: -2; }
.card-vid.on, .events-vid.on { opacity: 1; }
.events-banner > img { z-index: -3; }
/* ---- prateleiras de produtos ---- */
.shelf { padding: clamp(48px, 7vw, 84px) 0 clamp(36px, 5vw, 56px); background: var(--bg); }
.shelf.alt { background: transparent; border-top: 0; }
.shelf-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.shelf-head .eyebrow { margin-bottom: 6px; }
.shelf-head h2 { margin: 0; font-style: italic; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.shelf-all { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bordo); border-bottom: 1px solid var(--gold); padding-bottom: 3px; flex-shrink: 0; }
.shelf-intro { max-width: 56ch; color: var(--brown); font-size: .88rem; margin: 0 0 28px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-head + .shelf-row { margin-top: 24px; }
.shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: none; }
.shelf-row::-webkit-scrollbar, .scent-cards::-webkit-scrollbar { display: none; }
.shelf-row > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .shelf-row { grid-auto-columns: 38%; } }
@media (min-width: 1000px) { .shelf-row { grid-auto-columns: calc((100% - 72px) / 4.35); } }
/* ---- cartões: moldura de papel e nomes em serifada ---- */
.card .media { background: var(--beige); padding: 0; position: relative; }
.card .media::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(250, 246, 236, .75); pointer-events: none; transition: inset .45s ease, border-color .45s ease; }
.card:hover .media::after { inset: 14px; border-color: #faf6ec; }
.card h3 { font-size: 1.3rem; font-weight: 500; margin: 14px 0 3px; color: var(--ink); }
.card .price { font-size: .76rem; letter-spacing: .12em; color: var(--olive); }
.badge { left: 14px; top: 14px; background: var(--paper); color: var(--bordo); border: 1px solid var(--gold); z-index: 1; }
/* ---- O universo Ilumina: etiqueta vintage com moldura dupla, a gota da marca e três gestos ---- */
.story { background: var(--beige); padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.story-frame { position: relative; border: 1px solid var(--gold); outline: 1px solid rgba(168, 136, 74, .4); outline-offset: 5px; padding: clamp(22px, 3vw, 34px) clamp(18px, 4vw, 48px) clamp(20px, 3vw, 30px); background: var(--paper); }
.story-head { text-align: center; max-width: 820px; margin: 0 auto 22px; }
.story-drop { width: 18px; color: var(--bordo); margin-bottom: 8px; }
.story-head .eyebrow { margin-bottom: 8px; }
.story-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.3; color: var(--olive-deep); margin: 0; text-wrap: balance; }
.rituals { list-style: none; margin: 0; padding: 20px 0 0; display: grid; gap: 18px; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .rituals { grid-template-columns: repeat(3, 1fr); gap: 0; } .rituals li + li { border-left: 1px solid var(--line); } }
.rituals li { display: flex; align-items: center; gap: 16px; padding: 0 clamp(8px, 2vw, 28px); }
.rituals b { font-family: var(--serif); font-weight: 400; font-size: .8rem; letter-spacing: .3em; color: var(--gold); }
.rituals h3 { font-style: italic; font-size: 1.35rem; margin: 2px 0 4px; color: var(--olive-deep); }
.rituals p { margin: 0; color: var(--brown); font-size: .8rem; line-height: 1.5; max-width: 30ch; }
/* ---- guia de aromas ---- */
.scent-guide.block { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 84px) 0; }
.scent-heading h2 { font-style: italic; }
.scent-card h3 { font-style: italic; }
.scent-arrow { background: var(--paper); color: var(--olive-deep); border: 1px solid var(--gold); }
.scent-card:hover .scent-arrow { background: var(--olive); color: #f7f0de; }
.scent-card p { color: var(--muted); letter-spacing: .06em; }
/* ---- eventos e Instagram ---- */
.events-copy h2 { font-style: italic; font-weight: 300; }
.events-copy .btn { background: #f7f0de; color: var(--olive-deep); border-color: #f7f0de; }
.events-copy .btn:hover { background: #fff; }
/* ---- rodapé escuro, como o interior de uma casa ao fim do dia ---- */
.site-footer { background: var(--olive-deep); color: #d9cfb6; border-top: 0; padding-top: 64px; }
.site-footer a { color: #efe6d0; }
.site-footer .foot h3 { color: var(--gold); letter-spacing: .3em; }
.site-footer .logo .mark { color: #efe6d0; }
.site-footer .brand p, .site-footer .legal { color: #a99f86; }
.site-footer .ig-ico { color: var(--gold); }
.site-footer .legal { border-top: 1px solid rgba(239, 230, 208, .16); padding-top: 22px; }
/* ---- páginas interiores: títulos de história ---- */
.page-heading h1, .story-copy h1, .aroma-top h1, .pdp h1 { font-style: italic; }
.sec-head h2, .collection-index .card h3 { font-style: italic; }
.crumbs { color: var(--muted); }
.summary, .alert { background: var(--beige); }
/* ---- tipografia clássica: Playfair Display (mais assente e contrastada que a Cormorant) ---- */
h1, h2, h3 { letter-spacing: -.005em; }
.hero-cta .hero-title { font-weight: 400; font-size: clamp(2.4rem, 8.6vw, 5.8rem); letter-spacing: .1em; }
.hero-cta .hero-sub { font-size: clamp(1.05rem, 2.8vw, 1.6rem); line-height: 1.35; max-width: 30ch; }
.shelf-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.card h3 { font-size: 1.08rem; line-height: 1.3; font-weight: 400; }
.scent-heading h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.scent-card h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); }
.sc figcaption { font-size: .95rem; }
.announce { font-size: .92rem; }
.page-heading h1, .story-copy h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
.pdp h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.pdp .price { font-size: 1.3rem; }
/* ===== Telemóvel: menos scroll, navegação ao alcance do polegar ===== */
.tabbar { display: none; }
@media (max-width: 899px) {
body { padding-bottom: 62px; }
.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--cream-y); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgba(51, 40, 31, .07); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; color: var(--muted); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.tabbar a[aria-current="page"] { color: var(--bordo); }
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 26px; height: 2px; background: var(--gold); }
.tab-count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--bordo); color: #fbf3e4; font: 500 .6rem/16px var(--sans); text-align: center; padding: 0 4px; }
/* o cesto já está na barra de baixo */
.htools { display: none; }
}
@media (max-width: 759px) {
.shelf { padding: 36px 0 18px; }
.shelf-intro { -webkit-line-clamp: 2; margin-bottom: 4px; font-size: .82rem; }
.shelf-head h2 { font-size: 1.6rem; }
.shelf-row { grid-auto-columns: 46%; gap: 12px; padding-bottom: 10px; }
.card h3 { font-size: .98rem; }
.scent-guide.block { padding: 36px 0 30px; }
.events-banner { min-height: 340px; }
.events-copy { padding-top: 44px; padding-bottom: 44px; }
.events-copy h2 { font-size: 1.7rem; margin: 10px 0 14px; }
.events-copy p { margin-bottom: 20px; font-size: .84rem; }
.site-footer { padding: 36px 0 22px; }
.foot { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.foot > div:last-child { grid-column: 1 / -1; }
.foot .brand { margin-bottom: 0; }
.foot ul { gap: 5px; }
.site-footer .legal { margin-top: 22px; }
}
/* ===== Cabeçalho em duas linhas: pesquisa | logo | cesto, e por baixo os separadores centrados ===== */
.hmain, .hsearch { display: none; }
.site-header .logo .mark { color: var(--olive-deep); }
@media (min-width: 900px) {
.site-header, .is-home .site-header { position: sticky; top: 0; opacity: 1; visibility: visible; pointer-events: auto; background: var(--cream-y); border-bottom: 1px solid var(--line); }
.is-home .site-header.at-top, .site-header.at-top .htools, .site-header.at-top .hnav { opacity: 1; visibility: visible; pointer-events: auto; }
.site-header .hbar { max-width: var(--max); min-height: 86px; padding: 0 var(--gutter); grid-template-columns: 1fr auto 1fr; }
.site-header .hbar .hnav, .site-header .hbar .menu { display: none; }
.hsearch { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--olive-deep); }
.site-header .hbar .logo { grid-column: 2; }
.site-header .hbar .mark { width: 210px; }
.site-header .hbar .hright { grid-column: 3; justify-self: end; padding: 0; width: auto; }
.htools { display: flex !important; }
.htools .cart-link { color: var(--olive-deep); }
.hmain { display: flex; justify-content: center; gap: clamp(26px, 3.4vw, 52px); max-width: var(--max); padding: 0 var(--gutter); border-top: 1px solid var(--line); }
.hmain a { padding: 15px 0 14px; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--olive-deep); border-bottom: 1px solid transparent; white-space: nowrap; }
.hmain a:hover, .hmain a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--bordo); }
.is-home .hero { height: calc(100svh - 190px); min-height: 480px; }
}
/* ===== Instagram: carrossel de publicações que gira, cada fotografia leva à publicação ===== */
.insta-cta { background: var(--bg); border-top: 1px solid var(--line); padding: clamp(36px, 6vw, 72px) 0 clamp(36px, 5vw, 60px); text-align: center; }
.insta-head { position: relative; padding-top: 26px; margin-bottom: clamp(20px, 3vw, 34px); }
.insta-head::before { content: ""; position: absolute; top: 0; left: 50%; width: min(320px, 50vw); height: 1px; background: var(--olive-deep); transform: translateX(-50%); opacity: .7; }
.insta-cta h2 { margin: 0; font-style: normal; font-weight: 400; font-size: clamp(1.25rem, 3vw, 2.1rem); letter-spacing: .08em; text-transform: uppercase; color: var(--olive-deep); }
.igc { position: relative; }
.igc-track { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
.igc-track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .igc-track { grid-auto-columns: calc((100% - 2 * var(--gutter) - 40px) / 5); } }
.igc-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; scroll-snap-align: start; background: var(--beige); }
.igc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.igc-tile:hover img, .igc-tile:focus-visible img { transform: scale(1.05); }
.igc-ig { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(250, 246, 236, .92); color: var(--olive-deep); opacity: .85; transition: opacity .2s, background .2s, color .2s; }
.igc-tile:hover .igc-ig { opacity: 1; background: var(--bordo); color: #fbf3e4; }
.igc-ig svg { width: 16px; height: 16px; }
.igc-btn { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%; background: rgba(250, 246, 236, .94); color: var(--olive-deep); font: 400 1.7rem/1 var(--serif); cursor: pointer; box-shadow: 0 4px 14px rgba(51, 40, 31, .18); display: grid; place-items: center; padding: 0 0 4px; }
.igc-btn:hover { background: var(--olive); color: #f7f0de; }
.igc-btn.prev { left: 14px; } .igc-btn.next { right: 14px; }
@media (max-width: 899px) { .igc-btn { display: none; } }
.insta-follow { margin: clamp(22px, 3vw, 34px) 0 0; }
.insta-cta .btn { gap: 10px; }
/* Faixa de eventos: o logótipo e o trocadilho "Ilumina os teus dias especiais" */
.events-logo { display: block; width: min(210px, 52vw); aspect-ratio: 237 / 59.8; background: #f7f0de; -webkit-mask: url(/img/logo-full.svg) left center / contain no-repeat; mask: url(/img/logo-full.svg) left center / contain no-repeat; margin-bottom: 8px; }
.events-copy h2 { margin-top: 14px; }
@media (max-width: 859px) {
.rituals { grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 16px; }
.rituals li { flex-direction: column; text-align: center; gap: 8px; padding: 0 2px; }
.rituals li > div { display: flex; flex-direction: column; align-items: center; }
.rituals p { display: none; }
.rituals h3 { font-size: 1.1rem; margin: 0; }
.story-frame { padding: 20px 16px 18px; }
}
/* ===== A navbar nunca se recolhe: logótipo, menu e cesto sempre à vista, em qualquer ecrã ===== */
.site-header, .is-home .site-header, .is-home .site-header.at-top { position: sticky; top: 0; left: auto; right: auto; opacity: 1; visibility: visible; pointer-events: auto; background: var(--cream-y); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.site-header .logo, .site-header .menu, .site-header .hnav, .site-header .htools,
.is-home .site-header.at-top .logo, .is-home .site-header.at-top .menu, .is-home .site-header.at-top .htools { opacity: 1; visibility: visible; color: inherit; }
.is-home .site-header.at-top summary svg { filter: none; }
@media (max-width: 899px) {
.is-home .hero { height: calc(100svh - 170px); min-height: 440px; }
.is-home.has-ann .site-header.at-top { top: 0; }
}
/* ===== Loja: barra de filtros em menus pendentes, contagem, ordenar e tamanho da grelha ===== */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 0; margin: 8px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fb-left, .fb-right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.fb-search input { width: 150px; min-height: 36px; padding: 6px 2px; font-size: .86rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.fb-search input:focus { border-bottom-color: var(--bordo); box-shadow: none; }
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: .98rem; color: var(--ink); }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.2px 1.2px 0; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s; }
.dd[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.dd > summary:hover { color: var(--bordo); }
.dd-on { width: 6px; height: 6px; border-radius: 50%; background: var(--bordo); }
.dd-panel { position: absolute; z-index: 25; left: 0; top: calc(100% + 8px); min-width: 230px; padding: 16px 18px 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(51, 40, 31, .14); display: grid; gap: 4px; }
.dd.right .dd-panel { left: auto; right: 0; }
.dd-panel .opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; margin: 0; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.dd-panel input[inputmode] { border: 1px solid var(--line); padding: 8px 10px; background: var(--bg); min-height: 40px; }
.dd-apply { margin-top: 10px; min-height: 38px; padding: 0 20px; font-size: .62rem; }
.fb-clear { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bordo); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.fb-count { color: var(--muted); font-size: .98rem; }
.fb-view { display: none; align-items: center; gap: 4px; }
.fb-view button { all: unset; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 3px; color: var(--muted); }
.fb-view button[aria-pressed="true"] { background: var(--beige); color: var(--ink); }
.fb-view button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 760px) { .fb-view { display: inline-flex; } }
.shop-grid { padding-bottom: 60px; }
@media (min-width: 1040px) { .shop-grid.dense { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 759px) {
.filterbar { padding: 8px 0; gap: 4px 14px; }
.fb-left { gap: 2px 16px; width: 100%; }
.fb-search { width: 100%; }
.fb-search input { width: 100%; }
.fb-right { width: 100%; justify-content: space-between; }
.dd-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 74px; max-height: 60vh; overflow: auto; }
.dd.right .dd-panel { left: 12px; right: 12px; }
}
/* Carrossel do Instagram em movimento contínuo: sem encaixe, para o deslize ser suave */
.igc-live .igc-track { scroll-snap-type: none; overflow-x: hidden; }
.igc-live .igc-track.touching, .igc-live:hover .igc-track { overflow-x: auto; }
@media (max-width: 899px) { .igc-live .igc-track { overflow-x: auto; } }
/* ===== Texturas e imagens de fundo: linho, veludo, pinheiro, madeira e lareira ===== */
:root {
--tex-linen: url(/img/tex/linen.jpg);
--arrow: url("data:image/svg+xml;utf8,");
--drop: url("data:image/svg+xml;utf8,");
}
/* Linho em todo o fundo da loja; as secções com cor própria cobrem-no */
body { background-color: var(--bg); background-image: linear-gradient(rgba(247, 242, 234, .55), rgba(247, 242, 234, .55)), var(--tex-linen); background-size: auto, 360px auto; background-blend-mode: normal, multiply; }
.shelf, .insta-cta { background: transparent; }
.shelf.alt { background: transparent; border-top: 0; }
/* Barra de aviso em verde-escuro, a juntar com o rodapé */
.announce { background: var(--beige); color: var(--olive-deep); text-shadow: none; box-shadow: none; }
.announce-x { color: var(--olive-deep); }
/* Pinheiro no rodapé, em verde-escuro */
.site-footer { position: relative; overflow: hidden; background: linear-gradient(rgba(31, 39, 21, .84), rgba(24, 31, 16, .92)), url(/img/tex/pine.jpg) center / cover; }
.site-footer::after { content: ""; position: absolute; right: -30px; bottom: -50px; width: 280px; height: 316px; background: #f1d9a0; opacity: .07; -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; pointer-events: none; }
.site-footer > * { position: relative; z-index: 1; }
/* Guia de aromas sobre o linho da página */
.scent-guide.block { background: transparent; border-top: 0; }
/* ===== A gota da Ilumina como ornamento ===== */
.eyebrow::before { content: ""; display: inline-block; width: 9px; height: 11px; margin-right: 10px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; }
.story-head .eyebrow::before { display: none; }
.insta-head::before { background: linear-gradient(90deg, var(--olive-deep) 0 calc(50% - 18px), transparent calc(50% - 18px) calc(50% + 18px), var(--olive-deep) calc(50% + 18px) 100%); width: min(360px, 60vw); opacity: .75; }
.insta-head::after { content: ""; position: absolute; top: -7px; left: 50%; width: 11px; height: 14px; margin-left: -5.5px; background: var(--bordo); -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; }
.dd-on { width: 8px; height: 10px; border-radius: 0; -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; }
.shelf-head h2::after, .scent-heading h2::after { content: ""; display: inline-block; width: 10px; height: 12px; margin-left: 12px; background: var(--gold); -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; vertical-align: .08em; }
.card .media::before { content: ""; position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 12px; height: 14px; background: rgba(250, 246, 236, .85); -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; pointer-events: none; }
@media (max-width: 759px) { .site-footer::after { width: 200px; height: 226px; right: -40px; } }
/* ===== O universo Ilumina: logótipo bordô, frase e infográfico dos três gestos em tecidos ===== */
.story { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); border-top: 0; padding: clamp(44px, 6vw, 84px) 0 clamp(52px, 7vw, 96px); }
.story-head { text-align: center; max-width: 820px; margin: 0 auto clamp(54px, 7vw, 84px); }
.story-title { display: block; margin: 0 0 20px; font-family: var(--sans); font-weight: 400; font-style: normal; font-size: .64rem; line-height: 1.65; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.story-title::before { content: ""; display: inline-block; width: 9px; height: 11px; margin-right: 10px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; }
.story-logo { display: inline-block; height: .92em; aspect-ratio: 237 / 35; vertical-align: -.1em; background: var(--bordo); -webkit-mask: url(/img/logo.svg) center / contain no-repeat; mask: url(/img/logo.svg) center / contain no-repeat; }
.story-quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.35; color: var(--olive-deep); margin: 0; text-wrap: balance; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; counter-reset: gesto; }
@media (min-width: 860px) {
.steps { grid-template-columns: repeat(3, 1fr); gap: 44px; }
/* a linha tracejada que liga os três gestos, por trás dos arcos */
.steps::before { content: ""; position: absolute; top: 53px; left: 17%; right: 17%; border-top: 2px dashed var(--gold); opacity: .8; }
}
.step { position: relative; text-align: center; padding: 30px 26px 34px; color: #f1e6d0; background: linear-gradient(rgba(30, 18, 10, .28), rgba(30, 18, 10, .28)), url(/img/tex/brown-linen.jpg) center / cover; box-shadow: 0 14px 34px rgba(51, 40, 31, .22); border: 1px solid rgba(220, 191, 134, .6); outline: 1px solid rgba(168, 136, 74, .3); outline-offset: 4px; }
.step-num { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border: 1px solid #dcbf86; border-radius: 50%; font-family: var(--serif); letter-spacing: .12em; font-size: .95rem; color: #dcbf86; }
.step h3 { font-style: italic; font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 8px; color: #f8f0e0; }
.step p { margin: 0 auto; max-width: 26ch; font-size: .88rem; line-height: 1.6; }
/* a gota a marcar a passagem de um gesto para o seguinte */
.step:not(:last-child)::after { content: ""; position: absolute; z-index: 3; width: 28px; height: 28px; background: #c9a45c; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
@media (min-width: 860px) { .step:not(:last-child)::after { top: 39px; right: -36px; } }
@media (max-width: 859px) {
/* telemóvel: os três gestos deslizam para o lado, em vez de ocuparem três ecrãs */
.steps { grid-auto-flow: column; grid-auto-columns: 78%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px var(--gutter) 22px; margin: 0 calc(var(--gutter) * -1); }
.steps::-webkit-scrollbar { display: none; }
.step { scroll-snap-align: center; padding: 26px 20px 28px; }
.step:not(:last-child)::after { display: none; }
.story-head { margin-bottom: 28px; }
}
/* ===== Fita de veludo entre duas secções de linho ===== */
.ribbon { position: relative; height: 20px; background: #4d1220 url(/img/tex/velvet.jpg) center / 420px auto; border-block: 1px solid #36091a; box-shadow: inset 0 4px 6px -4px rgba(0, 0, 0, .55), inset 0 -4px 6px -4px rgba(0, 0, 0, .5), 0 2px 6px rgba(51, 40, 31, .15); }
/* Fotografia de produto nítida à esquerda (ou em faixa no topo) e setas douradas redondas entre os cartões */
.story { padding-top: clamp(44px, 6vw, 84px); }
.story-bg { position: relative; inset: auto; width: 100%; height: 220px; z-index: 0; margin-bottom: 30px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.story-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55% !important; filter: none; }
.story::before { display: none; }
@media (max-width: 1099px) { .story { padding-top: 0; } }
@media (min-width: 1100px) {
.story-bg { position: absolute; inset: 0 auto 0 0; width: 36%; height: auto; margin: 0; -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent); mask-image: linear-gradient(90deg, #000 66%, transparent); }
.story > .wrap { width: 64%; max-width: none; margin-left: auto; padding-left: 0; padding-right: clamp(20px, 3vw, 56px); }
}
.steps::before { display: none; }
.step:not(:last-child)::after { content: ""; position: absolute; z-index: 3; width: 34px; height: 34px; border-radius: 50%; background: #c9a45c url("data:image/svg+xml;utf8,") center / 18px no-repeat; -webkit-mask: none; mask: none; box-shadow: 0 3px 10px rgba(51, 40, 31, .28); filter: none; }
@media (min-width: 860px) { .story .step:not(:last-child)::after { top: calc(50% - 17px); right: -39px; } }
/* Secção escura: fotografia escurecida e textos claros */
.story { background: #1c130d; }
.story-bg img { filter: brightness(.58) saturate(.95); }
.story-title { color: #e0c68c; }
.story-quote { color: #f6ecd8; }
.story-logo { background: #e0c68c; }
.step { border-color: rgba(224, 198, 140, .75); outline-color: rgba(224, 198, 140, .35); box-shadow: 0 16px 38px rgba(0, 0, 0, .5); }
/* "Ilumina" no título do Instagram é o logótipo, em verde */
.insta-logo { display: inline-block; height: .98em; aspect-ratio: 237 / 35; vertical-align: -.12em; margin: 0 .1em; background: var(--olive-deep); -webkit-mask: url(/img/logo.svg) center / contain no-repeat; mask: url(/img/logo.svg) center / contain no-repeat; }
/* ===== O universo Ilumina: bouquet de cera em fundo total, escurecido e com grão, e mais baixo ===== */
.story { padding: clamp(28px, 3.6vw, 46px) 0 clamp(32px, 4vw, 52px); background: #1c130d; }
.story-bg, .story-bg img { -webkit-mask-image: none; mask-image: none; }
.story-bg { position: absolute; inset: 0; width: 100%; height: auto; margin: 0; z-index: -3; }
.story-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38% !important; filter: brightness(.5) saturate(.9) contrast(1.05); }
.story::before { display: block; content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(rgba(18, 10, 6, .38), rgba(18, 10, 6, .52)); }
/* grão de filme por cima da fotografia */
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: overlay;
background: url("data:image/svg+xml;utf8,"); }
.story > .wrap { width: auto; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.story-head { margin-bottom: clamp(26px, 3.4vw, 40px); }
.story-title { margin-bottom: 12px; }
.story-quote { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.25; }
.steps { gap: 40px; }
.step { padding: 22px 22px 26px; }
.step-num { width: 38px; height: 38px; margin-bottom: 8px; font-size: .85rem; }
.step h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); margin-bottom: 6px; }
.step p { font-size: .84rem; line-height: 1.5; }
@media (min-width: 860px) { .story .step:not(:last-child)::after { right: -37px; } }
@media (max-width: 859px) { .steps { padding-top: 6px; padding-bottom: 14px; } .step { padding: 20px 18px 22px; } }
/* Fita simples, só com veludo */
.ribbon { box-shadow: none; border-block: 0; height: 18px; }
.scent-cards { scrollbar-width: none; }
/* ===== Fundos neutros e clássicos, secções curtas e tiras de tecido entre elas ===== */
:root { --ivory: #faf7f1; --sand: #f1ebe0; --bg: #faf7f1; }
body { background-color: var(--ivory); background-image: none; }
.shelf { background: var(--ivory); padding: clamp(30px, 4.4vw, 52px) 0 clamp(24px, 3.4vw, 38px); }
.shelf.alt { background: var(--sand); }
.scent-guide.block { background: var(--ivory); padding: clamp(30px, 4.4vw, 52px) 0; }
.insta-cta { background: var(--sand); padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px); }
.shelf-head { margin-bottom: 14px; }
/* tira de tecido com pesponto, como a bainha de uma toalha */
.seam { position: relative; height: 18px; background: var(--tex-linen) center / 300px auto; border-block: 1px solid rgba(120, 100, 70, .22); }
.seam-jute { background-image: url(/img/tex/jute.jpg); background-size: 260px auto; }
.ribbon { display: none; }
/* vídeo de fundo no hero, por cima da fotografia e por baixo da sombra */
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; z-index: 0; }
.hero-vid.on { opacity: 1; }
.hero .slide::after { z-index: 1; }
/* ===== Orientação: vertical no telemóvel, horizontal no computador ===== */
@media (max-width: 759px) {
.events-banner { min-height: 0; aspect-ratio: 6 / 7; }
.scent-image { aspect-ratio: 4 / 5; height: auto; }
.scent-image img, .scent-fallback { height: 100%; object-fit: cover; }
.igc-tile { aspect-ratio: 4 / 5; height: auto; }
.igc-tile img { height: 100%; object-fit: cover; }
.hero-vid, .events-vid, .card-vid { object-position: center; }
}
@media (min-width: 760px) {
.events-banner { min-height: 0; aspect-ratio: 12 / 5; max-height: 500px; }
.scent-image { aspect-ratio: 3 / 2; }
.scent-image img, .scent-fallback { height: 100%; object-fit: cover; }
}
/* ===== Ritmo das secções: favoritos em marfim, coleção em verde-escuro, aromas em areia, universo em castanho, Instagram em marfim ===== */
.shelf { background: var(--ivory); color: var(--ink); padding: clamp(36px, 5vw, 64px) 0 clamp(30px, 4vw, 52px); }
.shelf-head { flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 8px; position: relative; }
.shelf-head .eyebrow { display: inline-block; margin: 0 0 14px; padding: 12px 26px; border-radius: 999px; background: var(--sand); color: var(--olive-deep); font-size: .74rem; letter-spacing: .3em; }
.shelf-head .eyebrow::before { display: none; }
.shelf-intro { margin-left: auto; margin-right: auto; text-align: center; }
.shelf .card { text-align: center; }
.shelf .card h3 { font-style: normal; font-weight: 400; font-size: 1.02rem; margin: 16px 0 4px; }
.shelf .card .price { font-size: .84rem; letter-spacing: .04em; }
.shelf .badge { background: #fff; color: #34403d; border: 1px solid var(--line); border-radius: 0; letter-spacing: .2em; }
.shelf.alt .card .media::before { display: none; }
.shelf.dark { background: #34403d; color: #f3ede0; }
.shelf.dark .shelf-head .eyebrow { background: #2b3533; color: #f3ede0; }
.shelf.dark .shelf-head h2 { color: #f6f0e3; }
.shelf.dark .shelf-head h2::after { background: #d9bd7e; }
.shelf.dark .shelf-all { color: #f3ede0; border-bottom-color: rgba(243, 237, 224, .5); }
.shelf.dark .shelf-intro { color: #d5d0c2; }
.shelf.dark .card .media { background: #e9e6df; }
.shelf.dark .card .media::before, .shelf.dark .card .media::after { display: none; }
.shelf.dark .card h3 { color: #f6f0e3; }
.shelf.dark .card .price { color: #d5d0c2; }
.shelf.dark .badge { border: 0; }
.scent-guide.block { background: var(--sand); }
.insta-cta { background: var(--ivory); }
/* ===== O universo Ilumina: infográfico leve, sem cartões nem tecido ===== */
.step { background: none; border: 0; outline: 0; box-shadow: none; padding: 6px 18px 0; }
.step-num { width: 44px; height: 44px; margin-bottom: 14px; border: 1px solid rgba(224, 198, 140, .8); background: rgba(28, 19, 13, .35); }
.step h3 { margin-bottom: 8px; }
.step p { color: #eadfc8; }
@media (min-width: 860px) {
.steps { gap: 28px; }
/* fio fino a ligar os três números */
.steps::before { display: block; content: ""; position: absolute; top: 28px; left: 17%; right: 17%; border-top: 1px solid rgba(224, 198, 140, .45); z-index: 0; }
.step { z-index: 1; }
.step-num { position: relative; }
.story .step:not(:last-child)::after { display: none; }
}
@media (max-width: 859px) {
.steps { grid-auto-columns: 70%; }
.step { border-left: 1px solid rgba(224, 198, 140, .35); text-align: left; }
.step-num { margin-left: 0; }
.step p { margin-left: 0; }
}
.shelf.alt { background: var(--ivory); }
/* hero: vídeo horizontal no computador e vertical no telemóvel */
.hero-vid.hv-v { display: none; }
@media (max-width: 759px) { .hero-vid.hv-h { display: none; } .hero-vid.hv-v { display: block; } }
.events-banner { width: 100%; }
.shelf-head .insta-logo { background: var(--ink); height: .9em; vertical-align: -.08em; margin-left: .15em; }
/* ===== Favoritos e coleção: mais baixos e com layouts diferentes ===== */
.shelf, .shelf.alt, .shelf.dark { padding: clamp(24px, 3vw, 40px) 0; }
.shelf .card .media { aspect-ratio: 1 / 1; }
/* Favoritos: faixa clara, título à esquerda e quatro quadrados iguais */
.shelf.alt .shelf-head { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: left; gap: 16px; margin-bottom: 18px; }
.shelf.alt .shelf-head .eyebrow { display: none; }
.shelf.alt .shelf-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.shelf.alt .shelf-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; gap: 18px; padding-bottom: 0; }
.shelf.alt .card { text-align: left; }
.shelf.alt .card h3 { font-size: .98rem; margin: 10px 0 2px; }
.shelf.alt .card .price { font-size: .78rem; }
@media (max-width: 759px) {
.shelf.alt .shelf-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* Coleção: texto à esquerda, cartões a deslizar à direita */
@media (min-width: 1000px) {
.shelf.dark > .wrap { display: grid; grid-template-columns: minmax(240px, 27%) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
.shelf.dark .shelf-head { grid-column: 1; grid-row: 1; align-items: flex-start; text-align: left; margin: 0; }
.shelf.dark .shelf-intro { grid-column: 1; grid-row: 2; text-align: left; margin: 14px 0 0; -webkit-line-clamp: 5; }
.shelf.dark .shelf-row { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-bottom: 6px; grid-auto-columns: calc((100% - 36px) / 3.3); }
.shelf.dark .card { text-align: left; }
.shelf.dark .card .media { aspect-ratio: 4 / 5; }
.shelf.dark .card h3 { font-size: .98rem; margin: 10px 0 2px; }
}
@media (max-width: 999px) {
.shelf.dark .shelf-head { margin-bottom: 4px; }
.shelf.dark .shelf-intro { margin-bottom: 12px; }
.shelf.dark .shelf-row { grid-auto-columns: 44%; }
.shelf.dark .card .media { aspect-ratio: 4 / 5; }
}
/* ===== Hero em ecrã inteiro: clips em fundo, grão de filme e cabeçalho transparente ===== */
.is-home .hero { height: calc(100svh - var(--ah, 0px)); min-height: 560px; background: #1c130d; }
.hero .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.hero .slide video.on { opacity: 1; }
.hero .hv-v { display: none; }
@media (max-width: 759px) { .hero .hv-h { display: none; } .hero .hv-v { display: block; } }
.hero .slide::after { z-index: 1; background: radial-gradient(ellipse at center, rgba(22, 14, 8, .18), rgba(22, 14, 8, .62) 100%), linear-gradient(rgba(40, 26, 14, .28), rgba(22, 14, 8, .5)); }
.hero-grain { position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .38; mix-blend-mode: overlay; animation: grao 1s steps(6) infinite;
background: url("data:image/svg+xml;utf8,"); }
@keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .hero-grain { animation: none; } }
.hero-cta { z-index: 3; }
.hero-ctl { z-index: 4; }
/* cabeçalho da página inicial: transparente por cima do hero e simples; sólido depois de descer */
.is-home .site-header { margin-bottom: calc(var(--hh, 0px) * -1); z-index: 30; transition: background .35s ease, border-color .35s ease; }
body.is-home .site-header:not(.scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.is-home .site-header:not(.scrolled) .hsearch { display: none; }
.is-home .site-header:not(.scrolled) .hmain { border-top: 0; }
.is-home .site-header:not(.scrolled) .site-header .hbar { min-height: 0; }
.is-home .site-header:not(.scrolled) .logo .mark { color: #f7f0de; }
.is-home .site-header:not(.scrolled) .hmain a, .is-home .site-header:not(.scrolled) .htools .cart-link, .is-home .site-header:not(.scrolled) summary { color: #f7f0de; }
.is-home .site-header:not(.scrolled) .hmain a:hover, .is-home .site-header:not(.scrolled) .hmain a[aria-current="page"] { color: #fff; border-bottom-color: #e0c68c; }
.is-home .site-header:not(.scrolled) .cart-count { background: #f7f0de; color: var(--olive-deep); }
.is-home .site-header:not(.scrolled) svg { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); }
@media (min-width: 900px) {
.is-home .site-header:not(.scrolled) .hbar { min-height: 64px; }
.is-home .site-header:not(.scrolled) .hbar .mark { width: 150px; }
}
@media (max-width: 899px) {
.is-home .site-header:not(.scrolled) .logo { opacity: 0; visibility: hidden; }
}
@media (min-width: 1000px) { .shelf.dark .shelf-head .eyebrow { letter-spacing: .2em; font-size: .66rem; padding: 10px 18px; white-space: nowrap; } }
@media (max-width: 899px) { body.is-home .site-header:not(.scrolled), body.is-home.has-ann .site-header:not(.scrolled) { background: transparent !important; border-bottom-color: transparent; top: 0; } }
.hero .slide .hero-cta { z-index: 3; }
.hero-title { max-width: 18ch; text-wrap: balance; }
.hero .slide::after { background: radial-gradient(ellipse at center, rgba(22, 14, 8, .1), rgba(22, 14, 8, .5) 100%), linear-gradient(rgba(40, 26, 14, .22), rgba(22, 14, 8, .42)); }
@media (max-width: 759px) {
.shelf.alt .shelf-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; }
}
/* ===== Hero: frases curtas, botão sólido e claro, logótipo no lugar do nome, separação nítida da navbar ===== */
.hero-cta { padding-top: calc(var(--hh, 0px) + 24px); }
.hero-cta .hero-title { font-size: clamp(2.3rem, 7vw, 5rem); max-width: 16ch; line-height: 1.08; letter-spacing: .08em; }
.hero-cta .hero-sub { font-size: clamp(1.1rem, 2.6vw, 1.5rem); max-width: 30ch; margin: 12px 0 28px; }
.hero-cta .btn, .hero-cta .btn:visited { min-width: 0; min-height: 54px; padding: 0 40px; background: #f7f0de; border-color: #f7f0de; color: #2a1c10; font-weight: 600; letter-spacing: .24em; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.hero-cta .btn:hover { background: #fff; border-color: #fff; color: #2a1c10; }
.hl { display: inline-block; height: .74em; aspect-ratio: 237 / 35; vertical-align: .02em; margin: 0 .08em; background: #f7f0de; -webkit-mask: url(/img/logo.svg) center / contain no-repeat; mask: url(/img/logo.svg) center / contain no-repeat; }
/* sombra por baixo da navbar e filete claro a separá-la do vídeo */
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(150px, 26vh, 240px); z-index: 2; pointer-events: none; background: linear-gradient(rgba(12, 7, 3, .7), rgba(12, 7, 3, 0)); }
body.is-home .site-header:not(.scrolled) { border-bottom: 1px solid rgba(247, 240, 222, .28); }
body.is-home .site-header:not(.scrolled) .hmain { border-top: 1px solid rgba(247, 240, 222, .22); }
body.is-home .site-header:not(.scrolled) .hmain a { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
/* ===== Hero só com vídeo e transições suaves: o clip novo entra por cima do anterior, sem escurecer a meio ===== */
.hero .slide { opacity: 0; visibility: hidden; z-index: 0; transition: opacity 0s linear 2.2s, visibility 0s linear 2.2s; }
.hero .slide.on { opacity: 1; visibility: visible; z-index: 1; transition: opacity 2.2s cubic-bezier(.4, 0, .2, 1); }
.hero .slide video { transition: opacity 1.6s ease; }
.hero .slide .hero-cta { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
.hero .slide.on .hero-cta { opacity: 1; transform: none; transition: opacity 1.6s ease .9s, transform 1.6s cubic-bezier(.2, .7, .2, 1) .9s; }
.hero-ctl .dots button { transition: background .6s ease, width .6s ease, opacity .6s ease; }
@media (prefers-reduced-motion: reduce) { .hero .slide, .hero .slide.on, .hero .slide .hero-cta, .hero .slide.on .hero-cta { transition-duration: .01s; transition-delay: 0s; } }
.events-copy h2 .hl { height: .74em; vertical-align: .04em; margin-right: .12em; }
/* ===== Rodapé minimalista: cor lisa, sem pinheiro nem gota ===== */
.site-footer { background: #1d2515; padding-top: clamp(36px, 5vw, 56px); }
.site-footer::after { display: none; }
/* ===== Guia de aromas: vídeo de fundo e, ao passar o rato, a fotografia do produto ===== */
.scent-image .scent-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.scent-image .scent-vid.on { opacity: 1; }
.scent-image .scent-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; z-index: 1; }
.scent-card:hover .scent-hover, .scent-card:focus-visible .scent-hover { opacity: 1; }
.scent-image .scent-arrow { z-index: 2; }
@media (hover: none) { .scent-image .scent-hover { display: none; } }
/* ===== Telemóvel: o hero cabe acima da barra de separadores e as secções ocupam menos ecrã ===== */
@media (max-width: 759px) {
.is-home .hero { height: calc(100svh - var(--ah, 0px) - 60px - env(safe-area-inset-bottom)); min-height: 440px; }
.hero-ctl { bottom: 14px; }
.hero-cta .hero-title { font-size: clamp(2rem, 10vw, 2.8rem); }
.hero-cta .btn { min-height: 50px; padding: 0 30px; }
.shelf, .shelf.alt, .shelf.dark { padding: 22px 0 18px; }
.shelf.dark .shelf-head .eyebrow { padding: 9px 16px; font-size: .62rem; letter-spacing: .2em; margin-bottom: 8px; }
.shelf-head h2 { font-size: 1.45rem; }
.shelf.alt .shelf-head { margin-bottom: 12px; }
.scent-cards { grid-auto-columns: 46%; gap: 12px; }
.scent-image { aspect-ratio: 4 / 5; }
.scent-card h3 { font-size: 1.05rem; margin-top: 10px; }
.scent-card p { font-size: .72rem; }
.scent-guide.block { padding: 24px 0 20px; }
.events-banner { aspect-ratio: 1 / 1; }
.insta-cta { padding: 24px 0 24px; }
.site-footer { padding: 28px 0 90px; }
}
/* ===== Páginas interiores: faixa de vídeo no topo, no mesmo estilo da página inicial ===== */
.is-home .hero.phero { height: clamp(340px, 52svh, 520px); min-height: 0; }
.phero .hero-cta { padding-top: calc(var(--hh, 0px) + 6px); padding-bottom: 28px; }
.phero .hero-cta .hero-title { font-size: clamp(2rem, 6vw, 3.8rem); }
.phero .hero-cta .hero-sub { margin-bottom: 0; }
.phero .hero-cta .btn { margin-top: 22px; }
.shop-wrap { padding-top: 18px; padding-bottom: 60px; }
.crumbs { display: none; }
.story-h { font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 .3em; }
.aroma-page { padding-top: 28px !important; }
@media (max-width: 759px) {
.is-home .hero.phero { height: clamp(260px, 38svh, 340px); }
.phero .hero-cta .hero-title { font-size: clamp(1.8rem, 9vw, 2.4rem); }
}
/* ===== Telemóvel: página inicial mais minimalista ===== */
@media (max-width: 759px) {
.hero-ctl [data-prev], .hero-ctl [data-next] { display: none; }
.hero-cta .hero-kicker { font-size: .6rem; margin-bottom: 12px; }
.hero-cta .hero-kicker::before, .hero-cta .hero-kicker::after { width: 22px; margin: 0 10px; }
.hero-cta .hero-sub { font-size: 1.05rem; margin: 8px 0 22px; }
.shelf-head .eyebrow, .shelf.dark .shelf-head .eyebrow, .shelf.alt .shelf-head .eyebrow { display: block; background: none; padding: 0; margin: 0 0 6px; font-size: .6rem; letter-spacing: .26em; color: var(--gold); border-radius: 0; }
.shelf.alt .shelf-head .eyebrow { display: none; }
.shelf.dark .shelf-head .eyebrow { color: #d9bd7e; }
.shelf.dark .shelf-intro, .scent-heading .textlink { display: none; }
.shelf-head h2::after, .scent-heading h2::after { display: none; }
.shelf .badge { font-size: .5rem; padding: 3px 7px; letter-spacing: .14em; left: 8px; top: 8px; }
.scent-card p, .step p { display: none; }
.scent-card h3 { margin-bottom: 0; }
.story { padding: 26px 0 28px; }
.step { padding-top: 0; }
.insta-cta .insta-follow { margin-top: 14px; }
.site-footer .foot > div:nth-child(3) { display: none; }
}
@media (max-width: 759px) { .phero .hero-kicker::before, .phero .hero-kicker::after { display: none; } }
/* ===== Telemóvel: sem barra de separadores em baixo; a navegação fica no menu e no cesto do cabeçalho ===== */
.tabbar { display: none !important; }
@media (max-width: 759px) {
body { padding-bottom: 0 !important; }
.is-home .hero:not(.phero) { height: calc(100svh - var(--ah, 0px)); }
.hero-ctl { bottom: 22px; }
.site-footer { padding-bottom: 28px; }
}
@media (max-width: 899px) {
.site-header .hbar .hright { display: flex !important; justify-content: flex-end; }
.site-header .hbar .htools { display: flex !important; opacity: 1; visibility: visible; }
.site-header .hbar .htools .cart-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
}
/* ===== Formulário de eventos: passos guiados, opções em cartões, fundo liso ===== */
.event-page { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 72px); background: var(--ivory); }
.event-form[data-steps], .event-page .event-form { max-width: 720px; margin: 0 auto; padding: clamp(22px, 4vw, 40px); background: #fff; border: 1px solid var(--line); box-shadow: none; }
.event-form .form-heading { display: block !important; margin-bottom: 22px; text-align: center; }
.event-form .form-heading h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 8px; }
.event-form .form-heading p { margin: 0 auto; max-width: 52ch; font-size: .86rem; }
.event-form.is-stepped .form-heading p { display: none; }
.steps-bar { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0 0 26px; padding: 0; counter-reset: none; }
.steps-bar li { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; color: var(--muted); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.steps-bar li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 1px; background: var(--line); }
.steps-bar li:first-child::before { display: none; }
.steps-bar li b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; font: 500 .8rem var(--sans); letter-spacing: 0; position: relative; z-index: 1; transition: all .3s ease; }
.steps-bar li.on { color: var(--olive-deep); }
.steps-bar li.on b { background: #34403d; border-color: #34403d; color: #f3ede0; }
.steps-bar li.done b { background: #e9e6df; border-color: #34403d; color: #34403d; }
.steps-bar li.done::before, .steps-bar li.on::before { background: #34403d; }
@media (max-width: 540px) { .steps-bar li span { display: none; } .steps-bar li.on span { display: block; position: absolute; top: 38px; white-space: nowrap; } .steps-bar { margin-bottom: 44px; } }
.event-form.is-stepped .form-section.on { animation: ev-in .45s ease both; }
@keyframes ev-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .event-form.is-stepped .form-section.on { animation: none; } }
.event-form .q { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0 0 16px; color: var(--ink); text-align: center; }
.event-form .q.small { font-size: 1.05rem; margin: 22px 0 12px; text-align: left; }
.event-form .q em, .event-form label em { font-style: normal; font-family: var(--sans); font-size: .72rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips.big { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.chip { position: relative; display: block; cursor: pointer; margin: 0 !important; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip > span { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .86rem; letter-spacing: 0; text-transform: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; border-radius: 999px; }
.chips.big .chip > span { border-radius: 4px; padding: 16px 18px; min-height: 84px; justify-content: center; }
.chip strong { font-weight: 500; font-size: .95rem; }
.chip small { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.chip:hover > span { border-color: #34403d; }
.chip input:checked + span { background: #34403d; border-color: #34403d; color: #f3ede0; box-shadow: 0 6px 18px rgba(40, 52, 49, .25); }
.chip input:checked + span small { color: #cfd6cf; }
.chip input:focus-visible + span { outline: 2px solid #34403d; outline-offset: 2px; }
@media (max-width: 540px) { .chips.big { grid-template-columns: 1fr; } .chips.big .chip > span { min-height: 0; padding: 14px 16px; } }
.event-form .field { margin-bottom: 16px; }
.event-form input:not([type="checkbox"]):not([type="radio"]), .event-form textarea { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.event-form input:focus, .event-form textarea:focus { border-color: #34403d; outline: 2px solid rgba(52, 64, 61, .15); }
.event-form textarea { min-height: 150px; }
.event-form .more { margin-top: 6px; }
.event-form .more summary { cursor: pointer; font-size: .82rem; color: var(--olive-deep); padding: 8px 0; }
.event-form .more textarea { min-height: 96px; margin-top: 8px; }
.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.step-nav .btn { min-width: 140px; }
.event-form.is-stepped.last .step-nav { margin-top: 18px; }
.event-form .event-consent { margin-top: 8px; }
.event-form .form-submit .btn { background: #34403d; border-color: #34403d; color: #f3ede0; }
.event-form .form-submit .btn:hover { background: #2b3533; border-color: #2b3533; }
.event-form .step-nav [data-next] { background: #34403d; border-color: #34403d; color: #f3ede0; }
.event-form .step-nav .ghost { background: transparent; color: #34403d; border-color: #34403d; }
/* ===== Contactos: minimalista, sem fotografia ===== */
.contacts-min { max-width: 860px; text-align: center; padding-top: clamp(36px, 6vw, 72px); background: var(--ivory); }
.contacts-lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--ink); max-width: 30ch; margin: 0 auto clamp(26px, 4vw, 44px); line-height: 1.35; }
.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.contact-cards a { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 28px 18px; border: 1px solid var(--line); background: #fff; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.contact-cards a:hover { border-color: #34403d; background: #34403d; transform: translateY(-2px); }
.contact-cards a:hover .cc-k, .contact-cards a:hover .cc-h { color: #cfd6cf; }
.contact-cards a:hover .cc-v { color: #f3ede0; }
.cc-k { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.cc-v { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); overflow-wrap: anywhere; }
.cc-h { font-size: .76rem; color: var(--muted); }
.contacts-note { margin: clamp(26px, 4vw, 40px) 0 0; font-size: .86rem; color: var(--brown); }
.steps-bar li span { flex: none; height: auto; background: none; }
.contact-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 320px)); justify-content: center; }
/* ===== Telemóvel: o aviso do topo corre em linha, para se ler a mensagem inteira ===== */
@media (max-width: 759px) {
.announce { padding: 8px 40px 8px 0; text-overflow: clip; overflow: hidden; }
.announce > span { display: inline-block; padding-left: 100%; white-space: nowrap; animation: aviso-corre 17s linear infinite; }
.announce:hover > span { animation-play-state: paused; }
}
@keyframes aviso-corre { to { transform: translateX(-100%); } }
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
.announce { padding: 7px 40px 7px 14px; white-space: normal; text-align: left; }
.announce > span { padding-left: 0; white-space: normal; animation: none; }
}
/* Nomes dos produtos sempre em 2 linhas de altura, para os preços ficarem alinhados */
.card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }
.shelf .card h3 { min-height: 2.6em; }
.collection-index .card h3 { display: block; min-height: 0; -webkit-line-clamp: unset; }
/* ===== Guia de aromas: escolher no topo, ver o aroma em grande por baixo ===== */
.aroma-page { max-width: 1080px; }
.ap-hint { text-align: center; color: var(--muted); font-size: .88rem; margin: 0 0 14px; }
.aroma-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto 26px; max-width: none; }
.aroma-tile { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.aroma-tile:hover { border-color: #34403d; }
.aroma-tile:focus-visible { outline: 2px solid #34403d; outline-offset: 3px; }
.aroma-tile .aroma-thumb { width: 40px; height: 40px; aspect-ratio: 1; border-radius: 50%; border: 0; flex: none; }
.aroma-tile .aroma-thumb img { transform: none; }
.aroma-tile .aroma-name { margin: 0; font-size: 1rem; color: var(--ink); white-space: nowrap; }
.aroma-tile.on { background: #34403d; border-color: #34403d; }
.aroma-tile.on .aroma-name { color: #f3ede0; }
.aroma-details { max-width: none; margin: 0 auto 30px; }
.aroma-detail { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; background: #fff; border: 1px solid var(--line); overflow: hidden; }
@media (min-width: 860px) { .aroma-detail { grid-template-columns: 1.05fr 1fr; padding: 0; } }
.ad-media { position: relative; min-height: 260px; background: var(--beige); }
.ad-media img, .ad-media .ad-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-media .ad-vid { opacity: 0; transition: opacity .9s ease; }
.ad-media .ad-vid.on { opacity: 1; }
.ad-info { padding: clamp(22px, 4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ad-k { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.ad-info h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-style: italic; }
.ad-notes { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ad-notes li { padding: 6px 14px; border-radius: 999px; background: var(--sand); color: var(--olive-deep); font-size: .8rem; }
.ad-info p { margin: 0; color: var(--brown); font-size: .92rem; line-height: 1.7; max-width: 46ch; }
.ad-info .aroma-prods { margin-top: 2px; }
.ad-info .aroma-prods a { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: .78rem; letter-spacing: .02em; }
.ad-info .aroma-prods a:hover { background: #34403d; border-color: #34403d; color: #f3ede0; }
.ad-cta { margin-top: 12px; background: #34403d; border-color: #34403d; color: #f3ede0; }
.js .aroma-detail.on { animation: ev-in .45s ease both; }
@media (max-width: 859px) { .ad-media { min-height: 0; aspect-ratio: 4 / 3; } .aroma-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; } .aroma-grid::-webkit-scrollbar { display: none; } }
/* ===== Página inicial mais limpa: faixa de produtos, aromas, Instagram e eventos ===== */
.shelf.alt { padding: clamp(40px, 5vw, 64px) 0; }
.insta-cta { background: var(--ivory); }
.aroma-detail { align-items: stretch !important; }
/* ===== Loja no telemóvel: filtros numa só linha de etiquetas, sem linhas nem espaço a mais ===== */
@media (max-width: 759px) {
.filterbar { border: 0; margin: 0 0 14px; padding: 4px 0 0; gap: 8px; flex-direction: column; align-items: stretch; }
.fb-left { flex-wrap: nowrap; overflow-x: auto; gap: 8px; width: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scrollbar-width: none; }
.fb-left::-webkit-scrollbar { display: none; }
.fb-left > * { flex: none; }
.fb-search { width: 150px; }
.fb-search input { width: 100%; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .85rem; }
.dd > summary { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .85rem; white-space: nowrap; }
.dd[open] > summary, .dd > summary:has(.dd-on) { border-color: #34403d; }
.fb-right { justify-content: space-between; padding: 0 2px; }
.fb-count { font-size: .8rem; }
.fb-right .dd > summary { border: 0; background: none; padding: 0; min-height: 30px; font-size: .85rem; }
.fb-clear { align-self: center; }
.dd-panel { bottom: 16px; }
.shop-wrap { padding-top: 12px; }
}
/* ===== Sobre a Ilumina: só texto, com tipos de letra diferentes para cada voz ===== */
.sobre { max-width: 760px; text-align: center; padding-top: clamp(40px, 7vw, 88px); background: var(--ivory); }
.sobre-lead { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 4.4vw, 2.7rem); line-height: 1.3; color: var(--ink); margin: 0 auto clamp(26px, 4vw, 44px); max-width: 24ch; text-wrap: balance; }
.sobre-lead::before { content: ""; display: block; width: 14px; height: 17px; margin: 0 auto 22px; background: var(--gold); -webkit-mask: var(--drop) center / contain no-repeat; mask: var(--drop) center / contain no-repeat; }
.sobre-body { font-family: "Cormorant", Georgia, serif; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 400; line-height: 1.65; color: var(--brown); max-width: 36ch; margin: 0 auto clamp(26px, 4vw, 44px); }
.sobre-note { font-family: var(--sans); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; line-height: 2; color: var(--olive-deep); max-width: 44ch; margin: 0 auto; padding-top: 26px; border-top: 1px solid var(--line); }
.sobre-cta { margin-top: clamp(28px, 4vw, 44px); background: #34403d; border-color: #34403d; color: #f3ede0; }
/* ===== Sem deslize horizontal na página: só os carrosséis deslizam dentro da sua faixa ===== */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 759px) {
.filterbar { min-width: 0; max-width: 100%; }
.fb-left { min-width: 0; width: calc(100% + 2 * var(--gutter)); max-width: none; }
}
/* ===== Formulário de eventos no telemóvel: ordem clara e botões em largura total ===== */
.event-form.is-stepped { display: flex; flex-direction: column; }
.event-form.is-stepped > .form-heading { order: 0; }
.event-form.is-stepped > .steps-bar { order: 1; }
.event-form.is-stepped > .form-section { order: 2; }
.event-form.is-stepped > .step-nav { order: 3; }
.event-form.is-stepped > .event-consent { order: 4; }
.event-form.is-stepped > .form-submit { order: 5; }
.event-form.is-stepped.last > .step-nav { order: 6; justify-content: center; margin-top: 4px; }
.event-form.is-stepped.last .step-nav [data-back] { background: none; border: 0; min-width: 0; min-height: 36px; padding: 0 8px; color: var(--muted); letter-spacing: .16em; text-decoration: underline; text-underline-offset: 4px; }
.event-form .form-submit { flex-direction: column-reverse; align-items: stretch; gap: 10px; margin-top: 18px; }
.event-form .form-submit .btn { width: 100%; justify-content: center; min-height: 54px; }
.event-form .form-submit .hint { text-align: center; max-width: none; font-size: .74rem; }
@media (max-width: 759px) {
.event-form .row.two, .event-form .row.three { gap: 0; grid-template-columns: 1fr; }
.event-form .field { margin-bottom: 12px; }
.event-form .field label { margin-bottom: 6px; }
.event-form .hint { margin: -2px 0 6px; }
.event-form .event-consent { margin-top: 10px; padding: 12px 14px; background: var(--sand); border-radius: 4px; font-size: .8rem; }
.step-nav .btn { min-width: 0; flex: 1; }
.event-form.is-stepped:not(.last) .step-nav [data-back][style*="hidden"] + [data-next] { flex: 1; }
}
.event-form.is-stepped.last .form-submit { display: flex; }
/* Sobre: a história da Vanessa */
.sobre-story { display: grid; gap: clamp(28px, 5vw, 56px); max-width: 1080px; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(48px, 8vw, 96px); background: var(--ivory); }
.ss-photo { margin: 0; position: relative; }
.ss-photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); border-radius: 200px 200px 6px 6px; z-index: 0; }
.ss-photo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 200px 200px 6px 6px; }
.ss-text { max-width: 560px; }
.ss-text p { font-family: "Cormorant", Georgia, serif; font-size: clamp(1.2rem, 2.2vw, 1.4rem); line-height: 1.65; color: var(--brown); margin: 0 0 1.1em; }
.ss-eyebrow { display: inline-block; font-family: var(--sans); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.ss-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.25; color: var(--olive-deep); margin: 0 0 clamp(20px, 3vw, 30px); text-wrap: balance; }
.ss-text .ss-lead { font-size: clamp(1.35rem, 2.6vw, 1.65rem); color: var(--ink); padding-bottom: 1.1em; border-bottom: 1px solid var(--line); }
.ss-text .ss-pull { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--olive-deep); margin: 1.2em 0; }
.ss-quote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.4; color: var(--olive-deep); }
.ss-text .ss-thanks { margin-bottom: .3em; }
.ss-text .ss-sign { font-family: var(--sans); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ss-sign span { display: block; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 1.8rem; color: var(--olive-deep); margin-bottom: 2px; }
@media (min-width: 860px) {
.sobre-story { grid-template-columns: 5fr 6fr; align-items: start; }
.ss-photo { position: sticky; top: 110px; }
}
@media (max-width: 859px) { .ss-photo { max-width: 420px; margin: 0 auto; width: calc(100% - 14px); } .ss-text { margin: 0 auto; } }