/* ============================================================
Gentle Laughter — styles.css
Light only. Single source of truth for the visual system.
============================================================ */
/* Album drench (agenciamento.html only — burgundy reservation) */
.album-drench {
background: var(--burgundy);
color: #f4ede6;
padding: clamp(4rem, 9vw, 7rem) 0;
margin-block: clamp(2rem, 5vw, 4rem);
}
.album-drench__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.album-drench__eyebrow {
font-family: var(--font-sans);
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.92;
margin: 0 0 1.2rem;
}
.album-drench__title {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5.5vw, 4.2rem);
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 1.4rem;
color: inherit;
}
.album-drench__title em {
font-style: italic;
opacity: 0.85;
}
.album-drench__lede {
font-family: var(--font-sans);
font-size: 1.05rem;
line-height: 1.6;
max-width: 38ch;
opacity: 0.92;
margin: 0 0 2rem;
}
.album-drench__aside {
font-family: var(--font-sans);
font-size: 0.85rem;
opacity: 0.92;
margin-top: 2rem;
max-width: 42ch;
}
.album-drench__media {
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 20px 60px color-mix(in srgb, var(--ink) 35%, transparent);
}
.album-drench__media iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 820px) {
.album-drench__grid { grid-template-columns: 1fr; }
}
/* Capabilities grid (prestacao.html) */
.capabilities-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--rule);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin-top: 2rem;
}
.capabilities-grid > article {
background: var(--paper);
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
min-height: 180px;
}
.capabilities-grid > article .num {
font-family: var(--font-serif);
font-size: 0.95rem;
letter-spacing: 0.16em;
color: var(--ink-soft);
}
.capabilities-grid > article h3 {
font-family: var(--font-serif);
font-size: 1.35rem;
line-height: 1.15;
margin: 0;
letter-spacing: -0.01em;
}
.capabilities-grid > article p {
font-size: 0.92rem;
opacity: 0.78;
line-height: 1.5;
margin: auto 0 0;
}
@media (max-width: 880px) {
.capabilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
.capabilities-grid { grid-template-columns: 1fr; }
}
/* Split block — alternating text + image (prestacao.html) */
.split-block {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
margin-block: clamp(3rem, 6vw, 5rem);
}
.split-block--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split-block--reverse > :first-child { order: 2; }
.split-block__media {
display: grid;
gap: 0.8rem;
}
.split-block__media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
display: block;
}
.split-block__media--stack {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 220px;
}
.split-block__media--stack figure:first-child {
grid-column: 1 / -1;
}
.split-block__media figure {
margin: 0;
overflow: hidden;
border-radius: 4px;
}
.split-block__media figcaption {
font-size: 0.78rem;
color: var(--ink-soft);
margin-top: 0.4rem;
font-family: var(--font-sans);
letter-spacing: 0.04em;
}
@media (max-width: 820px) {
.split-block,
.split-block--reverse { grid-template-columns: 1fr; }
.split-block--reverse > :first-child { order: 0; }
.split-block__media--stack { grid-auto-rows: 180px; }
}
/* Fleet cards (prestacao.html) */
.fleet-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
margin-top: 2rem;
}
.fleet-card {
background: var(--paper-soft);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.fleet-card__media {
aspect-ratio: 4 / 3;
background: #000;
overflow: hidden;
}
.fleet-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fleet-card__body {
padding: 1.4rem 1.4rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fleet-card__name {
font-family: var(--font-serif);
font-size: 1.15rem;
margin: 0;
letter-spacing: -0.01em;
}
.fleet-card__role {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.fleet-card ul {
margin: 0.6rem 0 0;
padding-left: 1rem;
font-size: 0.88rem;
line-height: 1.55;
opacity: 0.82;
}
@media (max-width: 880px) {
.fleet-cards { grid-template-columns: 1fr; }
}
/* Paired cards (segurança + emergência médica) */
.paired-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
margin-top: 2rem;
}
.paired-card {
background: var(--paper-soft);
border-top: 1px solid var(--rule);
padding: 1.6rem 1.6rem 1.8rem;
border-radius: 0;
}
.paired-card h3 {
font-family: var(--font-serif);
font-size: 1.3rem;
margin: 0 0 0.6rem;
}
.paired-card p {
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
opacity: 0.85;
}
@media (max-width: 720px) {
.paired-cards { grid-template-columns: 1fr; }
}
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/switzer-300.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/switzer-400.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/switzer-500.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/switzer-600.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/switzer-700.woff2') format('woff2'); }
@font-face { font-family: 'Gambarino'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/gambarino-400.woff2') format('woff2'); }
/* ===== Tokens ===== */
:root {
--paper: #eae0d5;
--paper-soft: #f4ede6;
--cal: #e8ddc9;
--ink: #1F1B16;
--ink-soft: #555645;
--rule: rgba(39, 36, 28, 0.1);
--burgundy: #3d1820;
--accent: var(--ink);
--accent-ink: var(--paper);
--shadow-1: 0 4px 20px rgba(39, 36, 28, 0.04);
--shadow-2: 0 10px 40px rgba(39, 36, 28, 0.08);
--font-sans: 'Switzer', system-ui, sans-serif;
--font-serif: 'Gambarino', Georgia, serif;
--text-xs: clamp(0.78rem, 0.76rem + 0.10vw, 0.85rem);
--text-sm: clamp(0.88rem, 0.85rem + 0.16vw, 0.98rem);
--text-base: clamp(0.96rem, 0.93rem + 0.18vw, 1.06rem);
--text-lg: clamp(1.06rem, 1.00rem + 0.38vw, 1.24rem);
--text-xl: clamp(1.26rem, 1.14rem + 0.75vw, 1.64rem);
--text-2xl: clamp(1.56rem, 1.28rem + 1.35vw, 2.18rem);
--text-3xl: clamp(1.96rem, 1.50rem + 2.10vw, 3.00rem);
--text-display: clamp(3.20rem, 2.50rem + 6.00vw, 7.50rem);
--measure: 68ch;
--content-width: 1080px;
--space-1: 0.75rem;
--space-2: 1.5rem;
--space-3: 1.6rem;
--space-4: 2.3rem;
--space-5: 3.3rem;
--space-6: 4.8rem;
--space-7: 7rem;
--space-8: 9rem;
--silence: clamp(4rem, 10vw, 9rem);
--pad-x: clamp(1.15rem, 4.5vw, 3rem);
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
/* ===== Dark mode (theatrical parchment-on-ink, stage at night) ===== */
@media (prefers-color-scheme: dark) {
:root {
--paper: #13110e;
--paper-soft: #1f1a15;
--cal: #3a302a;
--ink: #f3eadc;
--ink-soft: #b8ad9a;
--rule: rgba(243, 234, 220, 0.22);
--burgundy: #7a2230;
--shadow-1: 0 4px 20px rgba(0, 0, 0, 0.6);
--shadow-2: 0 16px 48px rgba(0, 0, 0, 0.7);
}
}
:root[data-theme="dark"] {
--paper: #13110e;
--paper-soft: #1f1a15;
--cal: #3a302a;
--ink: #f3eadc;
--ink-soft: #b8ad9a;
--rule: rgba(243, 234, 220, 0.22);
--burgundy: #7a2230;
--shadow-1: 0 4px 20px rgba(0, 0, 0, 0.6);
--shadow-2: 0 16px 48px rgba(0, 0, 0, 0.7);
}
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
background: var(--paper);
color: var(--ink);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.55;
font-feature-settings: "kern", "liga";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
}
p {
font-family: var(--font-sans);
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
/* ===== Spine — vertical rule device (P. drink, hanging label) ===== */
.spine {
position: relative;
padding-left: 1.5rem;
}
.spine::before {
content: "";
position: absolute;
left: 0;
top: 0.4em;
bottom: 0.4em;
width: 1px;
background: var(--ink);
}
.spine__label {
display: block;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 0.4rem;
}
/* ===== Type primitives ===== */
.eyebrow {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.lede {
font-size: var(--text-lg);
line-height: 1.45;
max-width: var(--measure);
color: var(--ink);
font-weight: 400;
}
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; }
.prose p + p { margin-top: 1em; }
.prose a,
.page-hero__lede a,
.contact-slab__lede a,
.service-card__desc a,
.faq .answer a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: color-mix(in srgb, var(--ink) 24%, transparent);
transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}
.prose a:hover,
.page-hero__lede a:hover,
.contact-slab__lede a:hover,
.service-card__desc a:hover,
.faq .answer a:hover {
color: var(--ink);
text-decoration-color: currentColor;
}
.prose h2 {
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: 500;
margin: 2.5em 0 0.8em;
letter-spacing: -0.02em;
}
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.35em; }
/* ===== Layout shells ===== */
.shell {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding-inline: var(--pad-x);
}
.index-page .shell {
max-width: none;
}
.rule {
border: 0;
height: 1px;
background: var(--rule);
margin: 0;
}
/* ===== Reveal on scroll ===== */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 1.2s var(--ease-out-quart), transform 1.2s var(--ease-out-quart);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--lg { transform: translateY(48px); transition-duration: 1.4s; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.muted-note { opacity: 0.65; }
.pill-row {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.pill-credential {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--rule);
border-radius: 999px;
font-size: 0.82rem;
letter-spacing: 0.06em;
background: var(--paper);
}
/* ===== Header ===== */
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding-inline: var(--pad-x);
background: transparent;
transition: transform 0.4s var(--ease-out-quart);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: clamp(5rem, 8vw, 7rem);
max-width: none;
margin: 0;
}
.header-tools {
order: 2;
display: inline-flex;
gap: 0.5rem;
align-items: center;
position: relative;
z-index: 2;
}
.logo-link {
order: 0;
display: inline-flex;
align-items: center;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
position: relative;
z-index: 2;
}
.logo {
height: clamp(38px, 4.8vw, 54px);
width: auto;
display: block;
}
.top-nav {
order: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.72rem 1rem;
border-radius: 999px;
background: color-mix(in srgb, var(--paper-soft) 72%, transparent);
border: 1px solid var(--rule);
box-shadow:
0 12px 32px color-mix(in srgb, var(--ink) 10%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--paper-soft) 70%, transparent);
backdrop-filter: saturate(170%) blur(20px);
-webkit-backdrop-filter: saturate(170%) blur(20px);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.top-nav ul {
list-style: none;
display: flex;
gap: clamp(1.4rem, 3vw, 2.6rem);
align-items: center;
margin: 0;
padding: 0;
}
.top-nav a {
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ink-soft);
position: relative;
padding-block: 0.18rem;
padding-inline: 0.1rem;
transition: color 0.25s var(--ease-out);
}
.top-nav a:hover {
color: var(--ink);
}
.top-nav a.nav-cta {
display: inline-flex;
align-items: center;
min-height: 36px;
background: var(--ink);
color: var(--paper) !important;
padding: 0.4rem 1.1rem;
border-radius: 999px;
margin-left: 0.5rem;
transition: background 0.2s;
}
.top-nav a.nav-cta:hover {
background: var(--paper);
color: var(--ink) !important;
box-shadow: inset 0 0 0 1px var(--ink);
}
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border-radius: 12px;
background: transparent;
align-items: center;
justify-content: center;
transition: background 0.2s;
color: var(--ink);
}
.nav-toggle:hover { background: var(--paper-soft); }
.nav-toggle::before {
content: "";
width: 20px;
height: 1.5px;
background: currentColor;
box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.nav-toggle[aria-expanded="true"]::before {
background: transparent;
box-shadow: none;
}
.nav-toggle[aria-expanded="true"]::after {
content: "";
position: absolute;
width: 20px;
height: 1.5px;
background: currentColor;
transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"]::before {
transform: rotate(-45deg);
background: currentColor;
box-shadow: none;
}
/* ===== Hero (Impeccable Editorial) ===== */
.hero {
position: relative;
isolation: isolate;
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: var(--pad-x);
padding-block: 8rem 5rem;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, color-mix(in srgb, var(--paper) 78%, transparent) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 100%),
url("../assets/hero-background.webp") center/cover no-repeat;
background-color: var(--paper);
z-index: 0;
}
@media (prefers-color-scheme: dark) {
.hero::before {
background:
linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, transparent) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 100%),
url("../assets/hero-background.webp") center/cover no-repeat;
background-color: var(--paper);
}
}
.hero > * {
position: relative;
z-index: 2;
max-width: 100%;
}
.hero__wordmark {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: -0.05em;
font-size: var(--text-display);
line-height: 0.82;
color: var(--ink);
margin: 0;
text-align: left;
transform: translateX(-0.03em);
}
.hero__lede {
margin-top: 2.5rem;
font-size: clamp(1.1rem, 1.2vw, 1.4rem);
max-width: 48ch;
color: var(--ink-soft);
line-height: 1.45;
text-align: left;
}
.hero__meta {
margin-top: 4rem;
display: flex;
flex-wrap: wrap;
gap: 3rem;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--ink-soft);
}
.hero__meta div {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.hero__meta strong {
color: var(--ink);
font-family: var(--font-serif);
font-style: italic;
text-transform: none;
font-size: var(--text-base);
letter-spacing: -0.01em;
font-weight: 500;
}
/* ===== Index of seven ===== */
.index {
border-top: 1px solid var(--ink);
margin-top: clamp(2.4rem, 5vw, 4rem);
}
.index-row {
border-bottom: 1px solid var(--rule);
padding-block: clamp(1.25rem, 2.2vw, 1.9rem);
transition: background 0.3s var(--ease-out);
}
.index-row:hover { background: var(--paper-soft); }
.index-row[open] { background: var(--paper-soft); }
.index-row > summary {
display: grid;
grid-template-columns: 4ch 1fr auto;
gap: clamp(1rem, 3vw, 2rem);
align-items: baseline;
cursor: pointer;
list-style: none;
}
.index-row > summary::-webkit-details-marker { display: none; }
.index-row__num {
font-variant-numeric: tabular-nums;
font-weight: 500;
font-size: var(--text-sm);
color: var(--ink-soft);
letter-spacing: 0.04em;
align-self: start;
padding-top: 0.6em;
}
.index-row__name {
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
display: block;
}
.index-row__hint {
display: block;
margin-top: 0.35rem;
font-size: var(--text-base);
color: var(--ink-soft);
font-weight: 400;
letter-spacing: 0;
max-width: 56ch;
}
.index-row__sigil {
align-self: center;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid var(--rule);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
font-size: 1.1rem;
line-height: 1;
transition: transform 0.4s var(--ease-out), border-color 0.2s, color 0.2s;
}
.index-row[open] .index-row__sigil {
transform: rotate(45deg);
border-color: var(--ink);
color: var(--ink);
}
/* Anchor variant — for the home services index */
a.index-row {
display: grid;
grid-template-columns: 4ch 1fr auto;
gap: clamp(1rem, 3vw, 2rem);
align-items: baseline;
text-decoration: none;
color: inherit;
}
a.index-row:hover .index-row__sigil {
border-color: var(--ink);
color: var(--ink);
transform: translateX(3px);
}
@media (max-width: 480px) {
a.index-row { grid-template-columns: 3ch 1fr auto; gap: 0.8rem; }
.index-row__name { font-size: var(--text-xl); }
.index-row__hint { font-size: var(--text-sm); }
}
.index-row__body {
padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
padding-left: calc(4ch + clamp(1rem, 3vw, 2rem));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-4);
align-items: end;
animation: fadeIn 0.32s var(--ease-out) both;
}
.index-row__sublist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
column-gap: var(--space-4);
row-gap: 0.4rem;
}
.index-row__sublist li {
font-size: var(--text-base);
color: var(--ink);
font-weight: 500;
}
.index-row__sublist li::before {
content: "·";
color: var(--accent);
margin-right: 0.5rem;
}
.index-row__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: gap 0.25s var(--ease-out);
}
.index-row__cta:hover { gap: 0.7rem; }
.index-row__cta svg { width: 14px; height: 14px; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===== Page hero (interior pages) ===== */
.page-hero {
padding-block: clamp(4rem, 8vw, 7rem) clamp(2rem, 4vw, 3.5rem);
border-bottom: 1px solid var(--rule);
}
.page-hero__num {
font-variant-numeric: tabular-nums;
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-soft);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.page-hero__title {
font-family: var(--font-serif);
font-size: var(--text-display);
font-weight: 500;
letter-spacing: -0.04em;
line-height: 0.9;
margin: clamp(0.6rem, 2vw, 1.2rem) 0 0;
max-width: 15ch;
}
.page-hero__lede {
margin-top: clamp(1rem, 2.5vw, 1.6rem);
font-size: var(--text-lg);
color: var(--ink-soft);
max-width: 56ch;
line-height: 1.4;
}
.page-hero--compact .page-hero__title { max-width: 12ch; }
.page-hero--compact .page-hero__lede { max-width: 48ch; }
/* ===== Section ===== */
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.section + .section { border-top: 1px solid var(--rule); }
.section__title {
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}
/* ===== Line page progressive sections ===== */
.line-section {
padding-block: clamp(3rem, 7vw, 6rem);
border-top: 1px solid var(--rule);
}
.line-section__label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 clamp(1rem, 2.5vw, 1.6rem);
}
.line-section__heading {
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 clamp(0.8rem, 2vw, 1.2rem);
max-width: 22ch;
}
.line-section__body {
font-size: var(--text-base);
color: var(--ink);
max-width: 60ch;
line-height: 1.6;
}
.line-section__body p { margin: 0 0 1em; }
.line-section__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.line-section__list li {
font-size: var(--text-lg);
color: var(--ink);
font-weight: 500;
padding-left: 1.2em;
position: relative;
}
.line-section__list li::before {
content: "·";
color: var(--accent);
position: absolute;
left: 0;
font-size: 1.4em;
line-height: 1;
top: 0.05em;
}
/* ===== Two-column ===== */
.two-col {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
.two-col h2 { margin-top: 0; }
@media (max-width: 760px) {
.two-col { grid-template-columns: 1fr; gap: 1.25rem; }
}
/* ===== Buttons ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 44px;
font-size: var(--text-sm);
font-weight: 600;
padding: 0.75rem 1.2rem;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
letter-spacing: 0.01em;
transition: transform 0.18s var(--ease-out), background 0.2s var(--ease-out);
}
.btn:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--rule);
}
.btn--ghost:hover { background: var(--paper-soft); border-color: var(--ink); color: var(--ink); }
.btn--accent { background: var(--cal); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--accent:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
/* ===== Contact slab (icon-left, value-right) ===== */
.contact-slab {
padding-block: clamp(4rem, 8vw, 6rem);
border-top: 1px solid var(--rule);
}
.contact-slab__inner {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
gap: clamp(1.8rem, 4vw, 3.6rem);
align-items: start;
}
.contact-slab__info {
padding: 1.25rem 1.4rem 1.4rem 0;
border-right: 1px solid var(--rule);
}
.contact-slab__heading {
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
max-width: 14ch;
}
.contact-slab__lede {
margin-top: 0.85rem;
color: var(--ink-soft);
max-width: 38ch;
}
.contact-slab__cta {
margin-top: clamp(1.2rem, 2.2vw, 1.7rem);
display: inline-flex;
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: clamp(1rem, 3vw, 1.6rem);
padding-block: 1rem;
border-bottom: 1px solid var(--rule);
font-size: var(--text-base);
}
.contact-list li:first-child { border-top: 1px solid var(--rule); }
.contact-list__lhs {
display: inline-flex;
align-items: center;
gap: 0.8rem;
color: var(--ink-soft);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.contact-list__lhs svg {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--ink);
}
.contact-list__value {
text-align: right;
font-weight: 600;
color: var(--ink);
word-break: break-word;
}
.contact-list a:hover { color: var(--accent); }
/* ===== Transfer gallery ===== */
.transfer-gallery {
padding-top: 0;
}
.transfer-gallery__intro {
max-width: 42rem;
margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.transfer-gallery__title {
margin: 0.5rem 0 0;
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
}
.transfer-gallery__lede {
margin: 0.9rem 0 0;
color: var(--ink-soft);
max-width: 34rem;
}
.transfer-gallery__grid {
display: grid;
grid-template-columns: 1.35fr 1fr 1fr;
gap: 1rem;
align-items: stretch;
}
.transfer-gallery__item {
margin: 0;
background: color-mix(in srgb, var(--paper-soft) 55%, transparent);
border: 1px solid var(--rule);
border-radius: 22px;
overflow: hidden;
}
.transfer-gallery__item img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center;
}
.transfer-gallery__item--wide img {
aspect-ratio: 5 / 4;
}
.transfer-gallery__item figcaption {
padding: 0.9rem 1rem 1rem;
font-size: var(--text-sm);
color: var(--ink-soft);
}
/* ===== Effects proof ===== */
.effects-proof {
padding-top: 0;
}
.effects-proof__grid {
display: grid;
grid-template-columns: minmax(0, 4.4fr) minmax(0, 5.6fr);
gap: clamp(1.6rem, 4vw, 3rem);
align-items: center;
}
.effects-proof__media {
margin: 0;
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--rule);
background: color-mix(in srgb, var(--paper-soft) 55%, transparent);
}
.effects-proof__media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: top center;
}
.effects-proof__title {
margin: 0.5rem 0 0;
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.06;
max-width: 18ch;
}
.effects-proof__lede {
margin: 0.9rem 0 0;
color: var(--ink-soft);
max-width: 40ch;
}
.effects-proof__list {
list-style: none;
margin: 1.2rem 0 0;
padding: 0;
display: grid;
gap: 0.7rem;
}
.effects-proof__list li {
position: relative;
padding-left: 1.1rem;
color: var(--ink);
}
.effects-proof__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ink);
}
@media (max-width: 760px) {
.hero {
min-height: auto;
padding-block: 4rem 3rem;
}
.hero::before {
background: var(--paper);
}
.hero > * { max-width: 100%; }
.hero__meta { grid-template-columns: 1fr; }
.contact-slab__inner { grid-template-columns: 1fr; }
.contact-slab__info {
padding: 0 0 1rem;
border-right: 0;
border-bottom: 1px solid var(--rule);
}
.transfer-gallery__grid {
grid-template-columns: 1fr;
}
.transfer-gallery__item img,
.transfer-gallery__item--wide img {
aspect-ratio: 4 / 3;
}
.effects-proof__grid {
grid-template-columns: 1fr;
}
.effects-proof__title,
.effects-proof__lede {
max-width: 100%;
}
}
@media (max-width: 480px) {
.contact-list li { grid-template-columns: 1fr; gap: 0.4rem; }
.contact-list__value { text-align: left; }
}
/* ===== Form ===== */
.form-page { padding-block: clamp(3rem, 6vw, 6rem); }
.form-grid {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 760px) {
.form-grid { grid-template-columns: 1fr; }
}
.form-aside h1 {
font-family: var(--font-serif);
font-size: var(--text-3xl);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
margin: 0 0 1rem;
}
.form-aside p { color: var(--ink-soft); max-width: 38ch; }
.form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.form label {
display: block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 0.5rem;
}
.form input,
.form select,
.form textarea {
width: 100%;
font: inherit;
font-size: var(--text-base);
color: var(--ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule);
padding: 0.5rem 0 0.7rem;
border-radius: 0;
transition: border-color 0.2s var(--ease-out);
}
.form textarea { min-height: 7em; resize: vertical; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-bottom-color: var(--ink);
}
.form .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.form .row--single { grid-template-columns: 1fr; }
@media (max-width: 560px) {
.form .row { grid-template-columns: 1fr; }
}
.form .field { margin-bottom: var(--space-3); }
.form .check {
display: flex;
gap: 0.7rem;
align-items: flex-start;
font-size: var(--text-sm);
color: var(--ink-soft);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
margin-block: var(--space-3);
}
.form .check input { width: auto; margin-top: 0.3em; }
.form .check a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.form .actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
align-items: center;
}
.form .note {
font-size: var(--text-xs);
color: var(--ink-soft);
letter-spacing: 0;
text-transform: none;
font-weight: 400;
}
/* ===== FAQ ===== */
.faq { max-width: 56rem; }
.faq details {
border-top: 1px solid var(--rule);
padding-block: clamp(1rem, 2vw, 1.4rem);
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: baseline;
cursor: pointer;
list-style: none;
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
font-size: 1.4rem;
font-weight: 400;
color: var(--ink-soft);
transition: transform 0.3s var(--ease-out);
align-self: center;
}
.faq details[open] summary::after { content: "−"; }
.faq details[open] { background: var(--paper-soft); margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); }
.faq .answer {
margin-top: 0.8rem;
color: var(--ink-soft);
max-width: var(--measure);
animation: fadeIn 0.3s var(--ease-out) both;
}
/* ===== Interior page editorial helpers ===== */
.surface-panel {
background: color-mix(in srgb, var(--paper-soft) 70%, transparent);
border: 1px solid var(--rule);
border-radius: 28px;
padding: clamp(1.35rem, 3vw, 2rem);
box-shadow: var(--shadow-1);
}
.book-facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.book-facts li {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--rule);
font-size: var(--text-sm);
}
.book-facts li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.book-facts strong {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: -0.02em;
}
.book-facts span {
color: var(--ink-soft);
text-align: right;
}
.partner-directory {
display: grid;
gap: 1rem;
margin-top: 2rem;
}
.partner-entry {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
gap: clamp(1rem, 3vw, 2rem);
align-items: start;
padding: clamp(1.2rem, 2.2vw, 1.6rem) 0;
border-top: 1px solid var(--rule);
}
.partner-entry:last-child {
border-bottom: 1px solid var(--rule);
}
.partner-entry h2 {
margin: 0;
}
.partner-entry p {
margin: 0;
color: var(--ink-soft);
max-width: 44ch;
}
.inline-note {
color: var(--ink-soft);
font-weight: 400;
font-size: var(--text-base);
}
.cta-inline {
margin-top: clamp(3rem, 6vw, 5rem);
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
align-items: center;
}
@media (max-width: 760px) {
.partner-entry {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.book-facts li {
grid-template-columns: 1fr;
display: grid;
}
.book-facts span {
text-align: left;
}
}
/* ===== Floating WhatsApp ===== */
.whatsapp-float {
position: fixed;
bottom: clamp(1rem, 3vw, 1.5rem);
right: clamp(1rem, 3vw, 1.5rem);
width: 54px;
height: 54px;
border-radius: 50%;
background: #25d366;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-2);
z-index: 40;
transition: transform 0.2s var(--ease-out);
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.whatsapp-float svg { width: 26px; height: 26px; }
/* ===== Footer ===== */
.site-footer {
border-top: 1px solid var(--ink);
padding-block: clamp(2.5rem, 4vw, 3.5rem) 1.5rem;
margin-top: clamp(4rem, 8vw, 7rem);
}
.footer-shell { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.footer-top {
display: grid;
grid-template-columns: minmax(0, auto) 1fr;
align-items: center;
gap: clamp(1rem, 3vw, 2rem);
}
.footer-logo { display: inline-block; }
.footer-logo .logo { height: clamp(48px, 6vw, 60px); display: block; }
.footer-tagline {
margin: 0;
color: var(--ink-soft);
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
max-width: 48ch;
line-height: 1.45;
}
.footer-channels {
list-style: none;
margin: 0;
padding-block: clamp(1rem, 2vw, 1.4rem);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
display: flex;
flex-wrap: wrap;
gap: clamp(1rem, 3vw, 2.2rem) clamp(1.5rem, 4vw, 3rem);
}
.footer-channels li {
font-family: var(--font-sans);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.footer-channels a {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
color: var(--ink-soft);
text-decoration: none;
transition: color 0.2s;
}
.footer-channels a:hover { color: var(--ink); }
.footer-channels a span {
font-family: var(--font-serif);
font-size: clamp(1rem, 1.4vw, 1.15rem);
letter-spacing: 0;
text-transform: none;
color: var(--ink);
}
.footer-meta {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.6rem;
font-size: var(--text-xs);
color: var(--ink-soft);
letter-spacing: 0.04em;
}
.footer-legal { display: inline-flex; gap: 1rem; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-soft); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }
@media (max-width: 600px) {
.footer-top { grid-template-columns: 1fr; gap: 1rem; }
.footer-channels { flex-direction: column; gap: 0.8rem; }
.footer-channels a span { font-size: 1rem; }
}
/* ===== Cookie banner ===== */
#cookie-banner {
position: fixed;
inset: auto 0 0 0;
z-index: 9999;
background: var(--paper);
border-top: 1px solid var(--ink);
padding: 0.9rem var(--pad-x);
animation: cookieSlide 0.4s var(--ease-out) both;
}
#cookie-banner.cookie-hiding { animation: cookieSlideOut 0.32s var(--ease-out) both; }
@keyframes cookieSlide {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cookieSlideOut {
to { opacity: 0; transform: translateY(40px); }
}
.cookie-inner {
max-width: var(--content-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: center;
}
@media (max-width: 640px) {
.cookie-inner { grid-template-columns: 1fr; }
.cookie-actions { justify-self: end; }
}
.cookie-text { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.cookie-text strong { color: var(--ink); font-weight: 600; }
.cookie-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.cookie-link { font-size: var(--text-xs); color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.cookie-link:hover { color: var(--ink); border-color: var(--ink); }
.cookie-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
font-size: var(--text-sm);
font-weight: 600;
padding: 0.55rem 1.1rem;
border-radius: 999px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
}
.cookie-btn--primary { background: var(--ink); color: var(--paper); }
.cookie-btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cookie-btn--secondary:hover { background: var(--paper-soft); }
/* ===== Mobile + tablet nav: hamburger links to /menu.html ===== */
@media (max-width: 1100px) {
.top-nav { display: none; }
.nav-toggle {
display: inline-flex;
position: relative;
z-index: 101;
}
.site-header {
position: sticky;
top: 0;
padding: 0;
background: var(--paper);
z-index: 100;
}
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.75rem;
justify-content: unset;
min-height: auto;
padding: 0.65rem clamp(1rem, 4vw, 1.5rem);
border-bottom: 1px solid var(--rule);
max-width: none;
}
.header-langs { justify-self: start; grid-column: 1; align-self: center; order: 0; margin: 0; }
.logo-link {
justify-self: center;
grid-column: 2;
align-self: center;
order: 0;
line-height: 0;
display: inline-flex;
align-items: center;
}
.header-tools { justify-self: end; grid-column: 3; align-self: center; display: inline-flex; order: 0; }
.logo {
height: 42px;
transform: translateY(-4px);
}
}
/* ===== Spacing adjustments ===== */
.section { padding-block: var(--space-6); }
.hero__meta { margin-top: var(--space-5); }
.index { margin-top: var(--space-6); }
.index-row { padding-block: var(--space-4); }
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ===== Services Grid (Refactor) ===== */
.section-header {
margin-bottom: clamp(3.5rem, 8vw, 6rem);
}
.section-lede {
font-size: var(--text-lg);
color: var(--ink-soft);
max-width: 42ch;
margin-top: 1rem;
line-height: 1.4;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--rule);
margin-top: 2rem;
border: 1px solid var(--rule);
}
@media (max-width: 960px) {
.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.services-grid { grid-template-columns: 1fr; }
}
.service-card {
position: relative;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
padding-left: clamp(3.2rem, 6vw, 4.8rem);
background: var(--paper);
display: flex;
flex-direction: column;
gap: 1.5rem;
transition: background 0.4s var(--ease-out-quart);
}
.service-card:hover {
background: var(--paper-soft);
}
.service-card__num {
position: absolute;
top: clamp(2.5rem, 5vw, 4rem);
left: clamp(1rem, 2vw, 1.5rem);
font-family: var(--font-serif);
font-size: var(--text-sm);
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
color: var(--ink-soft);
letter-spacing: 0.04em;
}
.service-card__title {
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: 500;
margin: 0;
letter-spacing: -0.03em;
line-height: 1.1;
}
.service-card__desc {
font-size: var(--text-base);
color: var(--ink-soft);
line-height: 1.6;
margin: 0;
max-width: 32ch;
}
.service-card__cta {
margin-top: auto;
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--ink-soft);
transition: color 0.3s;
}
.service-card:hover .service-card__cta { color: var(--ink); }
/* ===== Lead Magnet ===== */
.lead-magnet {
background: var(--ink);
color: var(--paper);
padding: clamp(3rem, 7vw, 5rem);
border-radius: 4px;
text-align: center;
}
.lead-magnet__content {
max-width: 52ch;
margin: 0 auto;
}
.lead-magnet__title {
font-family: var(--font-serif);
font-size: var(--text-3xl);
font-weight: 500;
letter-spacing: -0.03em;
margin: 0 0 1.5rem;
color: white;
}
.lead-magnet p {
font-size: var(--text-lg);
line-height: 1.5;
color: var(--paper);
opacity: 0.9;
margin-bottom: 2rem;
}
/* ===== Case studies (casos.html) ===== */
.case-study {
border-top: 1px solid var(--rule);
padding-block: clamp(2.5rem, 6vw, 5rem);
}
.case-study--alt {
background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%);
}
.case-study__inner {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.case-study__head {
display: grid;
gap: 0.8rem;
max-width: 64ch;
}
.case-study__title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0;
}
.case-study__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.8rem 1.6rem;
margin: 0.8rem 0 0;
font-family: var(--font-sans);
font-size: 0.9rem;
}
.case-study__meta > div { display: grid; gap: 0.15rem; }
.case-study__meta dt {
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 60%, transparent);
margin: 0;
}
.case-study__meta dd { margin: 0; color: var(--ink); }
.case-study__prose {
max-width: 64ch;
font-size: 1rem;
line-height: 1.6;
}
.case-study__prose p { margin: 0; }
.case-study__gallery {
column-count: 4;
column-gap: 0.8rem;
}
.case-study__gallery figure {
margin: 0 0 0.8rem;
overflow: hidden;
background: transparent;
border-radius: 4px;
break-inside: avoid;
display: block;
}
.case-study__gallery img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 960px) {
.case-study__gallery { column-count: 3; }
}
@media (max-width: 720px) {
.case-study__gallery { column-count: 2; }
}
@media (max-width: 480px) {
.case-study__gallery { column-count: 1; }
}
.case-study__video {
display: grid;
gap: 1rem;
max-width: 920px;
}
.case-study__video video {
width: 100%;
height: auto;
background: var(--ink);
border-radius: 4px;
display: block;
}
.case-study__video--grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
max-width: none;
}
/* ===== Case-card (home tease) ===== */
.case-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.5rem;
max-width: 760px;
margin-inline: auto;
}
.case-card {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 4px;
background: var(--ink);
text-decoration: none;
}
.case-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.case-card:hover img { transform: scale(1.03); }
.case-card__label {
position: absolute;
inset: auto 1rem 1rem;
color: #f4ede6;
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.2;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.case-card__eyebrow {
display: block;
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.85;
margin-bottom: 0.3rem;
}
@media (max-width: 720px) {
.case-cards { grid-template-columns: 1fr; }
}
/* ===== Inline video grid (case studies + mais-momentos) ===== */
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.video-card {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.video-card video {
width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
background: #000;
border-radius: 4px;
display: block;
}
.video-card figcaption {
font-family: var(--font-sans);
font-size: 0.85rem;
line-height: 1.4;
color: color-mix(in srgb, var(--ink) 80%, transparent);
}
#transfers-paradise .video-grid {
grid-template-columns: minmax(220px, 320px);
justify-content: start;
}
.people-contacts {
margin: 1.5rem 0 0;
padding: 0;
display: grid;
gap: 1rem;
}
.people-contacts > div {
display: grid;
gap: 0.15rem;
padding-block: 0.85rem;
border-top: 1px solid var(--rule);
}
.people-contacts > div:last-child { border-bottom: 1px solid var(--rule); }
.people-contacts dt {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
align-items: baseline;
}
.people-contacts__role {
font-size: 0.7rem;
letter-spacing: 0.08em;
color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
}
.people-contacts dd {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
}
.people-contacts a { color: var(--ink); }
/* ===== Instagram link card (legacy, kept for compatibility) ===== */
.ig-embed {
position: relative;
display: block;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 4px;
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
text-decoration: none;
color: #fff;
isolation: isolate;
transition: transform 0.3s ease;
}
.ig-embed:hover { transform: translateY(-2px); }
.ig-embed--square { aspect-ratio: 1 / 1; }
.ig-embed__poster {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
}
.ig-embed__poster img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.ig-embed__eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.9;
display: flex;
align-items: center;
gap: 0.4rem;
}
.ig-embed__eyebrow::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.ig-embed__caption {
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.25;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
margin-top: auto;
}
.ig-embed__caption::after {
content: "Ver no Instagram →";
display: block;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.04em;
margin-top: 0.6rem;
opacity: 0.95;
}
.ig-embed__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #c13584;
display: grid;
place-items: center;
font-size: 1.3rem;
padding-left: 3px;
transition: transform 0.3s ease;
pointer-events: none;
}
.ig-embed:hover .ig-embed__play { transform: translate(-50%, -50%) scale(1.08); }
.ig-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.ig-grid--reels {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* ===== Partner entries (parceiros.html) ===== */
.partner-entry {
padding-block: clamp(3.5rem, 8vw, 6rem);
border-top: 1px solid var(--rule);
}
.partner-entry--alt {
background: var(--paper-soft);
}
.partner-entry__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
.partner-entry__media {
margin: 0;
width: min(100%, 640px);
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--ink);
border-radius: 4px;
}
@media (min-width: 1024px) {
.partner-entry__media { aspect-ratio: 3 / 4; }
}
.partner-entry__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.partner-entry__body {
max-width: 64ch;
display: flex;
flex-direction: column;
align-items: center;
}
.partner-entry__num {
display: block;
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5.5vw, 3.8rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: lining-nums;
opacity: 0.4;
margin-bottom: 0.8rem;
}
.partner-entry__role {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 0.6rem;
}
.partner-entry__name {
font-family: var(--font-serif);
font-size: clamp(1.7rem, 3.6vw, 2.6rem);
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0 0 1.2rem;
}
.partner-entry__prose {
font-size: 1rem;
line-height: 1.65;
margin: 0 0 1.4rem;
}
.partner-entry__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem 1.4rem;
font-family: var(--font-sans);
font-size: 0.88rem;
}
.partner-entry__links a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
text-underline-offset: 0.25em;
transition: text-decoration-color 0.3s ease;
}
.partner-entry__links a:hover {
text-decoration-color: var(--ink);
}
@media (max-width: 480px) {
.partner-entry__media { aspect-ratio: 3 / 4; width: 100%; }
.partner-entry { padding-block: clamp(2.5rem, 7vw, 4rem); }
.partner-entry__name { font-size: clamp(1.5rem, 7vw, 2rem); }
}
/* ===== Spine list (categorias adjacentes) ===== */
.spine-list {
list-style: none;
margin: 2rem 0 0;
padding: 0;
display: grid;
gap: 1.2rem;
max-width: 64ch;
}
.spine-list > li {
position: relative;
padding-left: 1.5rem;
padding-block: 0.4rem;
}
.spine-list > li::before {
content: "";
position: absolute;
left: 0;
top: 0.4em;
bottom: 0.4em;
width: 1px;
background: var(--ink);
}
.spine-list__label {
display: block;
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 0.3rem;
}
.spine-list__name {
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.3;
}
.spine-list__note {
font-family: var(--font-sans);
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-soft);
margin: 0.4rem 0 0;
max-width: 52ch;
}
.spine-list > li.spine-list__feature {
padding-block: 0.8rem;
}
.spine-list > li.spine-list__feature .spine-list__name {
font-size: 1.35rem;
}
.spine-list > li.spine-list__feature .spine-list__note {
font-size: 0.95rem;
max-width: 60ch;
}
/* ===== Logbook (parceiros) — dated ledger row ===== */
.logbook {
margin: clamp(2rem, 5vw, 3.2rem) 0 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
}
.logbook__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.7rem;
}
.logbook__list > li {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: 1.2rem;
align-items: baseline;
}
.logbook__date {
font-family: var(--font-sans);
font-variant-numeric: lining-nums tabular-nums;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.logbook__entry {
font-family: var(--font-serif);
font-size: clamp(0.98rem, 1.6vw, 1.1rem);
line-height: 1.4;
}
.logbook__entry em {
font-style: normal;
color: var(--ink-soft);
font-family: var(--font-sans);
font-size: 0.85em;
letter-spacing: 0.04em;
}
@media (max-width: 520px) {
.logbook__list > li {
grid-template-columns: 1fr;
gap: 0.15rem;
}
}
/* ===== Pull-quote (Célio interstitial) ===== */
.pull-quote {
padding-block: clamp(3rem, 7vw, 5rem);
text-align: center;
}
.pull-quote__body {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 3.4vw, 2.2rem);
line-height: 1.25;
letter-spacing: -0.012em;
max-width: 28ch;
margin: 0 auto;
color: var(--ink);
}
.pull-quote__attr {
margin-top: 1.4rem;
font-family: var(--font-sans);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* ===== Partner entry ledger (inline date proof) ===== */
.partner-entry__ledger {
margin: 0 0 1.2rem;
font-family: var(--font-sans);
font-variant-numeric: lining-nums tabular-nums;
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* ===== Asymmetric terreno gallery ===== */
.terreno-asym {
margin-top: 1.5rem;
display: grid;
grid-template-columns: 1.2fr 1fr;
grid-template-rows: auto auto;
gap: 0.6rem;
}
.terreno-asym figure {
margin: 0;
overflow: hidden;
background: var(--ink);
border-radius: 4px;
}
.terreno-asym figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.terreno-asym__tall {
grid-row: 1 / span 2;
aspect-ratio: 3 / 4;
}
.terreno-asym__wide {
aspect-ratio: 16 / 10;
}
.terreno-asym__detail {
aspect-ratio: 4 / 3;
}
@media (max-width: 640px) {
.terreno-asym {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.terreno-asym__tall { grid-row: auto; aspect-ratio: 4 / 5; }
}
/* ===== Contact slab — CTA pair ===== */
.contact-slab__cta--pair {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
/* ===== Logo tint for dark mode (logo file is dark on transparent) ===== */
/* Filter chain tints logo to approx --ink (#f3eadc) cream tone */
@media (prefers-color-scheme: dark) {
.logo,
.menu-logo img { filter: brightness(0) invert(1) sepia(1) saturate(0.25) hue-rotate(-5deg) brightness(0.96); }
}
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] .menu-logo img { filter: brightness(0) invert(1) sepia(1) saturate(0.25) hue-rotate(-5deg) brightness(0.96); }
/* ===== Top-nav active link ===== */
.top-nav a.active {
color: var(--ink);
position: relative;
}
.top-nav > ul > li > a.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 1px;
background: currentColor;
}
/* ===== Top-nav dropdown (Serviços) ===== */
.top-nav .has-dropdown {
position: relative;
}
.top-nav .has-dropdown > a {
display: inline-flex;
align-items: center;
gap: 0.6rem;
white-space: nowrap;
padding-inline-end: 0.3rem;
}
.top-nav .has-dropdown > a::after {
content: "";
width: 10px;
height: 10px;
border-right: 1.5px solid var(--ink-soft);
border-bottom: 1.5px solid var(--ink-soft);
transform: rotate(45deg) translateY(-2px);
transform-origin: 50% 50%;
transition: transform 0.3s var(--ease-out), border-color 0.2s var(--ease-out);
opacity: 1;
margin-left: 0.1rem;
}
.top-nav .has-dropdown:hover > a::after,
.top-nav .has-dropdown:focus-within > a::after,
.top-nav .has-dropdown[aria-expanded="true"] > a::after {
transform: rotate(-135deg) translateY(2px);
border-color: var(--ink);
}
.top-nav .dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
min-width: 220px;
margin: 0;
padding: 0.6rem 0.5rem 0.5rem;
list-style: none;
background: var(--paper-soft);
border: 1px solid var(--rule);
border-radius: 6px;
box-shadow: var(--shadow-2);
display: flex;
flex-direction: column;
gap: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
z-index: 60;
}
/* Invisible hover bridge so cursor can cross from to dropdown without losing :hover */
.top-nav .has-dropdown::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 0.6rem;
display: none;
}
.top-nav .has-dropdown:hover::after,
.top-nav .has-dropdown:focus-within::after { display: block; }
.top-nav .has-dropdown:hover > .dropdown,
.top-nav .has-dropdown:focus-within > .dropdown,
.top-nav .has-dropdown.is-open > .dropdown {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.top-nav .dropdown li {
display: block;
margin: 0;
}
.top-nav .dropdown a {
display: block;
padding: 0.6rem 0.9rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--ink);
text-decoration: none;
border-radius: 3px;
white-space: nowrap;
transition: background 0.2s var(--ease-out);
}
.top-nav .dropdown a:hover,
.top-nav .dropdown a:focus-visible {
background: var(--cal);
}
.top-nav .dropdown a[aria-current="page"] {
color: var(--ink-soft);
font-weight: 600;
}
/* Mobile: dropdown becomes static expanded list inside open menu */
@media (max-width: 760px) {
.top-nav .has-dropdown > a::after { display: none; }
.top-nav .dropdown {
position: static;
transform: none;
opacity: 1;
pointer-events: auto;
background: transparent;
border: 0;
box-shadow: none;
padding: 0 0 0.5rem 1.2rem;
margin: 0.4rem 0 0.6rem;
min-width: 0;
border-left: 1px solid var(--rule);
border-radius: 0;
}
.top-nav .dropdown a {
padding: 0.4rem 0;
font-size: 0.95rem;
}
}
/* ===== Selection ===== */
::selection { background: var(--accent); color: var(--accent-ink); }
/* ============ MENU PAGE (standalone /menu.html) ============ */
.menu-page {
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--ink);
}
.menu-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.75rem;
padding: 1.25rem clamp(1rem, 4vw, 1.5rem);
border-bottom: 1px solid var(--rule);
}
.menu-langs {
position: relative;
justify-self: start;
font-family: var(--font-sans);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.menu-langs > summary {
list-style: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 44px;
padding: 0.55rem 0.65rem;
cursor: pointer;
color: var(--ink);
font-weight: 600;
border-radius: 999px;
}
.menu-langs > summary::-webkit-details-marker { display: none; }
.menu-langs > summary::after {
content: "";
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.2s ease;
}
.menu-langs[open] > summary::after { transform: rotate(180deg); }
.menu-langs[open] > summary { background: var(--paper-soft); }
.menu-langs > ul {
position: absolute;
top: calc(100% + 0.35rem);
left: 0;
margin: 0;
padding: 0.3rem 0;
list-style: none;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
width: 100%;
min-width: max-content;
z-index: 10;
}
.menu-langs > ul li a {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.5rem 0.65rem;
color: var(--ink-soft);
text-decoration: none;
font-weight: 600;
}
.menu-langs > ul li a:hover,
.menu-langs > ul li a:focus-visible { background: var(--paper-soft); color: var(--ink); outline: none; }
.menu-langs > ul li.is-current { display: none; }
.menu-logo { justify-self: center; display: block; line-height: 0; }
.menu-logo img { height: clamp(56px, 11vw, 80px); width: auto; display: block; }
.menu-close {
justify-self: end;
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; cursor: pointer; color: var(--ink);
padding: 0;
}
.menu-close svg { width: 24px; height: 24px; }
.menu-nav { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; padding-block: 0.5rem 1rem; }
.menu-nav ul { list-style: none; margin: 0; padding: 0; }
.menu-nav > ul > li > a,
.menu-nav > ul > li > details > summary {
display: flex;
align-items: center;
padding: 0.9rem clamp(1rem, 4vw, 1.5rem);
border-bottom: 1px solid var(--rule);
font-family: var(--font-serif);
font-size: clamp(1.6rem, 7vw, 2rem);
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--ink);
min-height: 56px;
cursor: pointer;
text-decoration: none;
}
.menu-nav summary { list-style: none; }
.menu-nav summary::-webkit-details-marker { display: none; }
.menu-nav summary::after {
content: "+";
margin-left: auto;
font-family: var(--font-sans);
font-size: 1.25rem;
line-height: 1;
opacity: 0.6;
}
.menu-nav details[open] summary::after { content: "−"; }
.menu-nav details > ul {
padding: 0.3rem clamp(1rem, 4vw, 1.5rem) 0.75rem 2.75rem;
border-bottom: 1px solid var(--rule);
}
.menu-nav details > ul li a {
display: flex;
align-items: center;
padding: 0.4rem 0;
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--ink-soft);
min-height: 44px;
text-decoration: none;
}
.menu-nav details > ul li a:hover,
.menu-nav details > ul li a:focus-visible { color: var(--ink); }
.menu-nav > ul > li > a:hover,
.menu-nav > ul > li > a:focus-visible,
.menu-nav summary:hover,
.menu-nav summary:focus-visible {
color: var(--ink);
background: var(--paper-soft);
outline: none;
}
.menu-footer {
padding: 1.5rem clamp(1rem, 4vw, 1.5rem) calc(1.75rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--rule);
display: flex;
justify-content: center;
align-items: center;
gap: clamp(2.5rem, 12vw, 4rem);
font-family: var(--font-sans);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.menu-footer a {
color: var(--ink);
padding: 0.5rem 0;
min-height: 44px;
display: inline-flex;
align-items: center;
text-decoration: none;
}
.menu-footer a:hover { color: var(--ink-soft); }
/* ============ MOBILE BUTTON BUMP (all pages) ============ */
@media (max-width: 760px) {
.btn {
min-height: 52px;
padding: 0.95rem 1.4rem;
font-size: var(--text-base);
border-radius: 999px;
letter-spacing: 0.005em;
}
.btn--ghost { padding: 0.9rem 1.4rem; }
.cta-inline {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-top: clamp(2rem, 6vw, 3rem);
}
.cta-inline .btn { width: 100%; }
.top-nav a.nav-cta {
min-height: 48px;
padding: 0.75rem 1.25rem;
}
.whatsapp-float { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
/* Header: lang switcher left, logo center, hamburger right — sticky on all pages */
.site-header {
position: sticky;
top: 0;
padding: 0;
background: var(--paper);
z-index: 100;
}
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.75rem;
justify-content: unset;
min-height: auto;
padding: 0.65rem clamp(1rem, 4vw, 1.5rem);
border-bottom: 1px solid var(--rule);
max-width: none;
}
.logo {
height: clamp(48px, 12vw, 64px);
transform: translateY(-5px);
}
.header-langs { justify-self: start; grid-column: 1; align-self: center; }
.logo-link { justify-self: center; grid-column: 2; align-self: center; }
.header-tools { justify-self: end; grid-column: 3; align-self: center; }
/* Hero stack: background image top, text below, all left-aligned */
.hero {
min-height: auto;
padding-top: clamp(2.5rem, 7vw, 4rem);
padding-bottom: clamp(2rem, 5vw, 3rem);
justify-content: flex-start;
text-align: left;
align-items: stretch;
}
.hero::before { display: none; }
.hero-cta--mobile {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 2rem;
}
.hero-cta__row { display: flex; flex-direction: row; gap: 0.75rem; }
.hero-cta__row .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.6rem; }
.hero-cta--mobile .btn--accent {
background: var(--ink);
color: var(--paper);
box-shadow: none;
border-color: var(--ink);
}
.hero-cta--mobile .btn--accent:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.hero-cta--mobile .btn--ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
}
.hero-cta--mobile .btn--ghost:hover { background: var(--paper-soft); }
}
/* Hide mobile hero CTA on desktop */
.hero-cta--mobile { display: none; }
@media (max-width: 760px) {
.hero-cta--mobile { display: flex; }
.hero > * { text-align: left; max-width: 100%; }
.hero__wordmark { text-align: left; transform: none; }
.hero__lede { text-align: left; margin-top: 1.5rem; }
.hero__meta { display: none; }
}
/* Hero lede mobile/desktop swap */
.hero__lede--mobile { display: none; }
@media (max-width: 760px) {
.hero__lede--desktop { display: none; }
.hero__lede--mobile { display: block; }
}
/* ============ LIVRO FEATURE ============ */
.livro-feature {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.livro-feature__title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.1;
margin: 0.5rem 0 1rem;
}
.livro-feature__lede { line-height: 1.7; margin: 0 0 1.2rem; }
.livro-feature__quote {
font-family: var(--font-serif);
font-size: 1.5rem;
line-height: 1.4;
font-style: italic;
max-width: 38ch;
margin: 0;
padding-left: 1.5rem;
position: relative;
color: var(--ink-soft);
}
.livro-feature__quote::before {
content: "\201C";
position: absolute;
left: 0;
top: -0.15em;
font-size: 2.6rem;
line-height: 1;
color: var(--ink);
}
@media (max-width: 760px) {
.livro-feature { grid-template-columns: 1fr; gap: 1.5rem; }
.livro-feature__quote { font-size: 1.15rem; max-width: 100%; padding-left: 1.25rem; }
.livro-feature__quote::before { font-size: 2rem; top: -0.1em; }
}
/* ============ CASE-CARDS MOBILE DISTILL — show 2 ============ */
@media (max-width: 760px) {
.case-cards { grid-template-columns: 1fr; gap: 1rem; }
.case-cards > a:nth-child(n+3) { display: none; }
}
/* ============ A11Y SCOPE: CTAs on burgundy album-drench ============ */
/* Primary (.btn): paper fill + burgundy text — matches drench color palette */
.album-drench .btn,
.album-drench a.btn {
background: #f4ede6;
color: #3d1820;
border-color: #f4ede6;
box-shadow: none;
}
.album-drench .btn:hover,
.album-drench a.btn:hover {
background: #ffffff;
color: #3d1820;
border-color: #ffffff;
box-shadow: none;
}
/* Ghost: paper outline only */
.album-drench .btn--ghost,
.album-drench a.btn--ghost {
background: transparent;
color: #f4ede6;
border-color: #f4ede6;
}
.album-drench .btn--ghost:hover,
.album-drench a.btn--ghost:hover {
background: rgba(244, 237, 230, 0.14);
color: #f4ede6;
border-color: #f4ede6;
}
/* ============ BENTO — 9-tile editorial index (home) ============ */
.bento {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(0, auto);
gap: 1px;
background: var(--rule);
margin-top: clamp(2rem, 4vw, 3rem);
}
.bento__tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.6rem;
padding: clamp(1.4rem, 2.4vw, 2.2rem);
padding-top: clamp(2.8rem, 4.5vw, 3.6rem);
padding-bottom: clamp(2.8rem, 4.5vw, 3.6rem);
min-height: 12rem;
background: var(--paper);
text-decoration: none;
color: inherit;
transition: background 0.3s var(--ease-out);
}
.bento__tile:hover { background: var(--paper-soft); }
.bento__tile:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.bento__tile-num {
position: absolute;
top: clamp(1.1rem, 2vw, 1.6rem);
left: clamp(1.4rem, 2.4vw, 2.2rem);
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: clamp(0.85rem, 1vw, 1rem);
letter-spacing: 0.08em;
color: var(--ink-soft);
font-weight: 500;
}
.bento__tile-name {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 2.6vw, 2.25rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
}
.bento__tile-hint {
font-family: var(--font-sans);
font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.5;
color: var(--ink-soft);
max-width: 38ch;
}
.bento__tile-sigil {
position: absolute;
bottom: clamp(1.1rem, 2vw, 1.6rem);
right: clamp(1.4rem, 2.4vw, 2.2rem);
font-size: 1.1rem;
color: var(--ink-soft);
transition: transform 0.3s var(--ease-out), color 0.2s;
}
.bento__tile:hover .bento__tile-sigil { transform: translateX(4px); color: var(--ink); }
.bento__tile--hero { grid-column: span 2; grid-row: span 2; min-height: clamp(18rem, 28vw, 24rem); }
.bento__tile--hero .bento__tile-hint { max-width: 42ch; }
.bento__tile--medium { grid-column: span 2; min-height: 10rem; }
.bento__tile--small .bento__tile-hint { max-width: 28ch; }
.bento__tile--wide { grid-column: 1 / -1; min-height: 10rem; }
.bento__tile--wide .bento__tile-hint { max-width: 50ch; }
.bento__tile-name em { font-style: italic; color: var(--ink-soft); }
.bento__masthead {
margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
padding-bottom: clamp(1rem, 2vw, 1.4rem);
border-bottom: 1px solid var(--rule);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.8rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.85rem;
color: var(--ink-soft);
}
.bento__masthead-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.bento__masthead-venues {
font-family: var(--font-serif);
font-size: 0.98rem;
color: var(--ink);
}
.bento__masthead-venues span + span::before {
content: " · ";
color: var(--ink-soft);
margin: 0 0.2rem;
}
.bento__masthead-link {
margin-left: auto;
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--ink-soft);
padding-bottom: 1px;
transition: border-color 0.2s, color 0.2s;
}
.bento__masthead-link:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 960px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento__tile--hero { grid-column: span 2; grid-row: span 1; min-height: 16rem; }
.bento__tile--medium { grid-column: span 2; }
.bento__tile--small { grid-column: span 1; }
.bento__tile--wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
.bento {
display: block;
border: 0;
background: transparent;
border-top: 1px solid var(--ink);
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.bento__tile {
display: block;
background: transparent;
border-bottom: 1px solid var(--rule);
padding: clamp(1.2rem, 4vw, 1.6rem) 0 clamp(1.4rem, 4vw, 1.8rem);
min-height: 0;
}
.bento__tile:hover { background: transparent; }
.bento__tile-num {
position: static;
display: block;
margin-bottom: 0.4rem;
font-size: clamp(0.78rem, 2.5vw, 0.88rem);
}
.bento__tile-name {
display: block;
font-size: clamp(1.35rem, 5vw, 1.65rem);
padding-bottom: 0.55rem;
margin-bottom: 0.55rem;
border-bottom: 1px solid var(--rule);
}
.bento__tile-hint {
display: block;
font-size: clamp(0.95rem, 3.5vw, 1.05rem);
max-width: 100%;
margin-top: 0;
}
.bento__tile-sigil {
position: static;
display: inline-block;
margin-top: 0.6rem;
color: var(--ink-soft);
}
.bento__masthead {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 1.4rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--ink);
}
.bento__masthead-eyebrow {
font-size: clamp(0.72rem, 2.4vw, 0.82rem);
letter-spacing: 0.18em;
}
.bento__masthead-venues {
font-size: clamp(1.05rem, 4.2vw, 1.3rem);
line-height: 1.25;
}
.bento__masthead-link { margin-left: 0; font-size: clamp(0.92rem, 3vw, 1rem); }
}
/* ============ HAMBURGER LABEL ============ */
.nav-toggle__label { display: none; }
/* ============ NAV OVERLAY (mobile in-place menu) ============ */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 90;
background: var(--paper);
overflow-y: auto;
padding: clamp(7rem, 24vw, 9rem) clamp(1.5rem, 6vw, 3rem) clamp(2rem, 6vw, 3rem);
-webkit-overflow-scrolling: touch;
}
.nav-overlay[hidden] { display: none; }
body.nav-open { overflow: hidden; }
.nav-overlay ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(1rem, 3vw, 1.4rem);
}
.nav-overlay > ul {
max-width: 720px;
margin: 0 auto;
}
.nav-overlay a {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 6vw, 2.4rem);
line-height: 1.1;
color: var(--ink);
text-decoration: none;
display: inline-block;
padding: 0.35rem 0;
}
.nav-overlay a[aria-current="page"] {
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
}
.nav-overlay .has-dropdown > a[aria-haspopup="true"] {
pointer-events: none;
opacity: 0.7;
font-size: clamp(0.78rem, 2.5vw, 0.92rem);
font-family: var(--font-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.nav-overlay .dropdown {
margin-top: 0.4rem;
padding-left: 0;
border-left: none;
gap: clamp(0.6rem, 2vw, 0.9rem);
}
.nav-overlay .dropdown a {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 4.5vw, 1.7rem);
color: var(--ink-soft);
}
.nav-overlay .nav-cta {
font-family: var(--font-sans);
font-size: clamp(0.95rem, 3vw, 1.1rem);
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--ink);
color: var(--paper);
padding: 0.85rem 1.6rem;
border-radius: 999px;
margin-top: 1rem;
align-self: flex-start;
}
/* ============ SKIP-NAV ============ */
.skip-nav {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
background: var(--ink);
color: var(--paper);
padding: 0.75rem 1rem;
font-family: var(--font-sans);
font-size: 0.9rem;
text-decoration: none;
}
.skip-nav:focus,
.skip-nav:focus-visible {
left: 0.5rem;
top: 0.5rem;
}
/* ============ HERO MOBILE — row of two CTAs + standalone Ligar ============ */
@media (max-width: 760px) {
.hero > .eyebrow { display: none; }
.hero-cta__row .btn { flex: 1 1 0; min-width: 0; }
.hero-cta__quick {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
font-family: var(--font-sans);
font-size: clamp(1.1rem, 4vw, 1.35rem);
font-weight: 500;
color: var(--ink);
text-decoration: none;
padding: 0.85rem 0;
min-height: 52px;
align-self: stretch;
}
.hero-cta__quick svg { width: 22px; height: 22px; }
.hero-cta__quick:hover { color: var(--ink-soft); }
}
/* ============ DESKTOP HEADER — logo left, nav center, langs flush right ============ */
@media (min-width: 1101px) {
.site-header__inner { display: flex; justify-content: space-between; align-items: center; }
.logo-link { order: 0; flex: 0 0 auto; }
.top-nav { order: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 10; }
.header-tools { order: 2; display: none; }
.header-langs { order: 3; margin-left: auto; position: relative; z-index: 20; }
.header-langs > ul { left: auto; right: 0; z-index: 20; }
}
/* ============ APPLICATIONS LIST (numbered editorial) ============ */
.applications-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--rule);
}
.applications-row {
display: grid;
grid-template-columns: 4ch 1fr;
gap: clamp(1rem, 3vw, 1.5rem);
padding: clamp(1.4rem, 3vw, 2rem) 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
}
.applications-row__num {
font-family: var(--font-sans);
font-feature-settings: 'tnum';
font-variant-numeric: tabular-nums lining-nums;
font-size: 0.85rem;
color: var(--ink-soft);
letter-spacing: 0.05em;
}
.applications-row__name {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2.4vw, 1.6rem);
line-height: 1.15;
margin: 0 0 0.4rem;
color: var(--ink);
}
.applications-row__hint {
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
}
/* ============ FOOTER SIGNOFF ============ */
.footer-signoff {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: var(--ink);
margin: clamp(2rem, 4vw, 3rem) 0 1.5rem;
text-align: center;
letter-spacing: -0.005em;
}
@media (max-width: 760px) {
.footer-signoff { text-align: left; }
}
/* ============ FORM FIELD ERRORS ============ */
.field-error {
display: block;
min-height: 0;
margin-top: 0.4rem;
font-family: var(--font-sans);
font-size: 0.82rem;
color: #a83a3a;
line-height: 1.4;
}
.field-error:empty { display: none; }
.form input[aria-invalid="true"],
.form select[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
border-color: #a83a3a;
background: color-mix(in srgb, #a83a3a 6%, transparent);
}
@media (prefers-color-scheme: dark) {
.field-error { color: #e89797; }
.form input[aria-invalid="true"],
.form select[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
border-color: #e89797;
background: color-mix(in srgb, #e89797 8%, transparent);
}
}
/* ============ UTILITY CLASSES — extracted from inline-style hotspots ============ */
/* Used across prestacao.html / aluguer.html / producao.html (and any future page) */
.section-h2 {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.1;
margin: 0.5rem 0 0.8rem;
}
.section-h2--lg {
font-size: clamp(1.8rem, 3vw, 2.8rem);
margin: 0.5rem 0 1rem;
}
.section-h2--sm {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
line-height: 1.15;
margin: 0.5rem 0 1rem;
}
.section--band {
background: var(--paper-soft);
padding-block: clamp(3rem, 5vw, 4.5rem);
}
.section--ruled {
border-top: 1px solid var(--rule);
padding-top: clamp(3rem, 5vw, 4rem);
}
.section--compact {
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.prose-narrow {
max-width: 62ch;
margin: 0 auto;
}
.prose-narrow--left { text-align: left; }
.prose-relaxed { line-height: 1.7; }
.list-tight {
margin: 0;
padding-left: 1.1rem;
}
.list-spec {
margin-top: 0.8rem;
padding-left: 1.1rem;
font-size: 0.88rem;
line-height: 1.6;
opacity: 0.85;
}
.link-bare { color: var(--ink); }
.more-toggle {
margin-top: 2.5rem;
border-top: 1px solid var(--rule);
padding-top: 1.2rem;
}
.more-toggle > summary {
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.9rem;
letter-spacing: 0.06em;
opacity: 0.75;
list-style: none;
}
.more-toggle > summary::-webkit-details-marker { display: none; }
/* Hero trust strip — small-caps credentials row under page-hero (efeitos-especiais.html) */
.hero-trust {
margin-top: 1.4rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.4rem;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
.hero-trust > span { position: relative; padding-right: 1.4rem; }
.hero-trust > span + span { padding-left: 0; }
.hero-trust > span:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 1px;
height: 0.8rem;
background: var(--rule);
transform: translateY(-50%);
}
.hero-trust > span:last-child { padding-right: 0; }
/* Spec card — bordered top stat block (prestacao, aluguer fleet/contact rows) */
.spec-card {
border-top: 1px solid var(--rule);
padding-top: 0.8rem;
}
.spec-card__label {
display: block;
margin-bottom: 0.3rem;
}
.spec-card__value {
font-size: 0.88rem;
opacity: 0.8;
}
/* Spec grid container (prestacao fleet spec rows) */
.spec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1.8rem;
}
.measure-48 { max-width: 48ch; }
.link-plain { color: inherit; text-decoration: none; }
.case-link {
margin-top: 1.2rem;
font-size: 0.92rem;
}
.spec-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.4rem 1.4rem;
margin-top: 1.5rem;
font-size: 0.92rem;
line-height: 1.75;
}