/* ============================================================
   Médico Amigo — shared stylesheet (index, legal & support pages)
   Externalized from inline <style> blocks so CSP can run without
   'unsafe-inline' on style-src. See ../nginx.conf and ../CLAUDE.md.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand anchor — kept identical to the product apps (favicon, mobile/desktop UI) */
  --brand: #1B4F72;
  --brand-ink: #16324A;
  --brand-dark: #0F2536;
  --brand-hover: #123D59;
  --brand-light: #EAF1F5;
  --brand-mid: #C7DCE6;
  --brand-border: #AFC9D6;

  /* Clay — warm accent that replaces the generic bright-blue/violet template feel */
  --clay: #A6543A;
  --clay-dark: #7E3C29;
  --clay-light: #F3E4DD;
  --clay-border: #E3BFAE;

  /* Status hues — deepened/muted, not the default SaaS neon set */
  --pine: #2F5D4F;
  --pine-light: #E4EEE9;
  --ochre: #93641C;
  --ochre-light: #F3E9D6;
  --plum: #55467F;
  --plum-light: #EAE6F5;

  /* Neutrals — warm stone scale */
  --ink: #1C1917;
  --text-secondary: #57534E;
  --text-muted: #78716C;
  --surface: #FFFFFF;
  --surface-alt: #FAF9F5;
  --border: #E7E3DC;
  --border-light: #F1EEE8;

  --green: #25D366;

  --font: 'Manrope', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(28,25,23,.05), 0 1px 1px rgba(28,25,23,.03);
  --shadow-card: 0 2px 5px rgba(28,25,23,.04), 0 14px 32px -10px rgba(22,50,74,.12);
  --shadow-card-hover: 0 6px 14px rgba(28,25,23,.05), 0 28px 56px -16px rgba(22,50,74,.20);
  --shadow-float: 0 14px 36px rgba(28,25,23,.16);
  --shadow-modal: 0 24px 64px rgba(15,20,25,.22);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--surface); line-height: 1.7; font-size: 15.5px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -.01em; }
.is-hidden { display: none; }

/* ── UTILITIES (replace one-off inline style="" attributes) ── */
.brand-mark { fill: var(--brand); }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.text-brand { color: var(--brand); }
.icon-wrap-brand { background: var(--brand-light); }
.icon-wrap-pine { background: var(--pine-light); }
.icon-wrap-ochre { background: var(--ochre-light); }
.icon-wrap-plum { background: var(--plum-light); }
.card-accent-brand { background: linear-gradient(90deg, var(--brand), var(--brand-ink)); }
.card-accent-pine { background: linear-gradient(90deg, var(--pine), #3E7C69); }
.card-accent-ochre { background: linear-gradient(90deg, var(--ochre), #B98A34); }
.card-accent-plum { background: linear-gradient(90deg, var(--plum), #7B6AA8); }

/* ── SCROLL ANIMATIONS ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s cubic-bezier(.22,.68,0,1.2), transform .65s cubic-bezier(.22,.68,0,1.2); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .6s ease, transform .6s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .6s ease, transform .6s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.delay-1 { transition-delay: .10s; } .delay-2 { transition-delay: .18s; }
.delay-3 { transition-delay: .26s; } .delay-4 { transition-delay: .34s; }

/* ── MOBILE APP BANNER (index.html only, phone-width viewports only) ──
   Deliberately NOT position:fixed: a fixed banner fights the sticky nav
   for the same top:0 slot the moment you scroll (nav has no idea it needs
   to dock below the banner, since a fixed element reserves no flow space)
   — that's what caused the scroll glitch. Normal flow avoids that
   entirely: the banner just sits above nav in the document, nav sticks
   right below it once scrolled past, everywhere, with zero JS/CSS
   coordination needed. No entrance animation — a fade timed against
   requestAnimationFrame turned out to be timing-fragile (and gains very
   little), so it just appears, at full opacity, the moment it's due. */
.app-banner { display: none; align-items: center; gap: 10px; background: white; border-bottom: 1px solid var(--border-light); box-shadow: var(--shadow-sm); padding: 12px 14px; }
@media (max-width: 640px) {
  .app-banner.is-visible { display: flex; }
}
.app-banner-close { background: none; border: none; padding: 6px; margin: -6px -2px -6px -6px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; display: flex; }
.app-banner-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(160deg, var(--brand), var(--brand-ink)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(22,50,74,.3); }
.app-banner-icon svg { width: 24px; height: 24px; }
.app-banner-text { flex: 1 1 auto; min-width: 0; }
.app-banner-text p, .app-banner-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-banner-text p { font-size: 14px; font-weight: 700; color: var(--ink); }
.app-banner-text span { font-size: 11.5px; color: var(--text-muted); display: block; margin-top: 1px; }
.app-banner-cta { flex-shrink: 0; background: var(--clay); color: white; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.app-banner-cta:hover { background: var(--clay-dark); }

/* Smallest phones (older/budget Android, iPhone SE-class): tighten further
   so the row never runs out of room. */
@media (max-width: 360px) {
  .app-banner { gap: 8px; padding: 10px 12px; }
  .app-banner-icon { width: 38px; height: 38px; border-radius: 10px; }
  .app-banner-icon svg { width: 21px; height: 21px; }
  .app-banner-text p { font-size: 13px; }
  .app-banner-text span { font-size: 11px; }
  .app-banner-cta { padding: 7px 13px; font-size: 12.5px; }
}

/* ── HEADER SLOT (index.html only) ──
   app-banner and nav are both direct children placed in the same grid
   cell, so they visually occupy the exact same spot instead of stacking
   into two bars. Only one is ever actually rendered at a time — JS hides
   nav (adds .is-hidden) while the banner is shown, and un-hides it when
   the banner is dismissed — so there's no overlap to resolve, just a
   single sticky slot whose content swaps. */
.header-slot { position: sticky; top: 0; z-index: 200; display: grid; }
.header-slot > * { grid-area: 1 / 1; }
.header-slot nav { position: static; }

/* ── NAV (shared) ── */
nav { position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,.90); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border-light); padding: 0 2rem; box-shadow: var(--shadow-sm); transition: box-shadow .3s; }
nav.scrolled { box-shadow: 0 6px 24px rgba(22,50,74,.09); }
.nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; height: 68px; gap: 1rem; }
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.logo-icon { width: 37px; height: 37px; background: var(--brand); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.nav-logo:hover .logo-icon { transform: rotate(-6deg) scale(1.05); }
.logo-icon svg { width: 20px; height: 20px; fill: white; }
.logo-name { font-family: var(--font-heading); font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.logo-name span { color: var(--brand); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-ghost { text-decoration: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font); }
.btn-ghost:hover { background: var(--surface-alt); color: var(--ink); border-color: var(--brand-border); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; border: none; background: transparent; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: white; border-bottom: 1px solid var(--border-light); padding: 18px 24px 26px; z-index: 199; box-shadow: var(--shadow-float); flex-direction: column; gap: 6px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { text-decoration: none; color: var(--text-secondary); font-size: 15px; font-weight: 500; padding: 11px 0; border-bottom: 1px solid var(--border-light); }
.mobile-menu a:last-child { border: none; }

/* ── SHARED BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--brand); color: white; padding: 13px 26px; border-radius: 11px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s; font-family: var(--font); }
.btn-primary:hover { background: var(--brand-hover); color: white; box-shadow: 0 8px 20px rgba(22,50,74,.24); }

/* ── HERO ── */
.hero { padding: 96px 2rem 100px; overflow: hidden; position: relative; background: var(--surface); }
.hero::before { content: ''; position: absolute; top: -180px; right: -220px; width: 640px; height: 640px; background: radial-gradient(ellipse at center, var(--brand-light) 0%, transparent 70%); pointer-events: none; opacity: .8; }
@media (max-width: 960px) { .hero::before { display: none; } }

.hero-grid { max-width: 1200px; margin: 0 auto; position: relative; }
.hero-copy { position: relative; z-index: 1; max-width: 620px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-light); color: var(--brand-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 16px; border-radius: 20px; margin-bottom: 22px; border: 1px solid var(--brand-mid); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); animation: blink 2s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

h1 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 500; line-height: 1.14; letter-spacing: -.02em; color: var(--ink); margin-bottom: 22px; }
h1 span { color: var(--brand); font-style: italic; }
.hero-sub { font-size: 17px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 34px; max-width: 480px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.btn-hero-primary { text-decoration: none; background: var(--brand); color: white; padding: 15px 30px; border-radius: 12px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 4px 14px rgba(22,50,74,.16); }
.btn-hero-primary:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(22,50,74,.28); }
.btn-hero-secondary { text-decoration: none; background: white; color: var(--ink); padding: 15px 30px; border-radius: 12px; font-size: 15px; font-weight: 600; border: 1.5px solid var(--border); cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 9px; }
.btn-hero-secondary:hover { background: var(--surface-alt); border-color: var(--clay-border); transform: translateY(-1px); }

/* ── TRUST STRIP ── */
.trust-strip { background: var(--brand-ink); padding: 44px 2rem; }
.trust-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 2.25rem; text-align: center; }
.trust-icon { display: flex; justify-content: center; margin-bottom: 12px; }
.trust-icon svg { width: 30px; height: 30px; }
.trust-label { font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: white; display: block; margin-bottom: 5px; }
.trust-sub { font-size: 12.5px; color: rgba(255,255,255,.68); line-height: 1.45; }

/* ── FEATURES ── */
.features { padding: 120px 2rem; background: var(--surface); }
.section-header { text-align: center; margin-bottom: 72px; }
.section-tag { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--clay-dark); margin-bottom: 14px; }
h2 { font-size: clamp(1.75rem, 2.9vw, 2.4rem); font-weight: 500; letter-spacing: -.018em; margin-bottom: 16px; }
.section-sub { font-size: 16.5px; color: var(--text-secondary); max-width: 560px; margin: 0 auto; line-height: 1.7; }
.features-inner { max-width: 1200px; margin: 0 auto; }

/* Asymmetric bento grid: card 1 wide/featured on top, 2/3/4 in a row below */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bento-grid > .card:nth-child(1) { grid-column: 1 / -1; }
.card-wide { display: flex; align-items: flex-start; gap: 24px; }
.card-wide .card-icon-wrap { margin-bottom: 0; flex-shrink: 0; }
.card-wide .card-tags { margin-top: 12px; }

.card-soon-badge { position: absolute; top: 16px; right: 18px; background: var(--plum-light); color: var(--plum); font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 20px; border: 1px solid #D3CBE8; }
.card.card-soon { opacity: 0.9; }
.card.card-soon .card-icon-wrap { opacity: 0.75; }

.card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-card); padding: 32px 30px 30px; transition: box-shadow .25s, transform .25s, border-color .25s; cursor: default; position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(22,50,74,.03) 0%, transparent 60%); opacity: 0; transition: opacity .3s; }
.card:hover::before { opacity: 1; }
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: var(--brand-border); }
.card-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.card:hover .card-icon-wrap { transform: scale(1.1) rotate(-3deg); }
.card-icon-wrap svg { width: 24px; height: 24px; }
.card h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 500; margin-bottom: 11px; letter-spacing: -.01em; }
.card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.7; }
.card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.tag { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 20px; background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border-light); transition: all .2s; }
.card:hover .tag { background: var(--brand-light); color: var(--brand-ink); border-color: var(--brand-border); }

/* ── HOW IT WORKS ── */
.how { padding: 108px 2rem; background: var(--surface-alt); }
.how-inner { max-width: 1100px; margin: 0 auto; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 64px; position: relative; }
.steps::before { content: ''; position: absolute; top: 28px; left: 16.7%; right: 16.7%; height: 2px; background: linear-gradient(90deg, var(--brand-mid), var(--brand), var(--brand-mid)); }
.step { text-align: center; padding: 0 18px; position: relative; }
.step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: white; font-family: var(--font-heading); font-size: 19px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--surface-alt), 0 0 0 8px var(--brand-mid); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.step:hover .step-num { transform: scale(1.1); }
.step h4 { font-size: 16px; font-weight: 600; margin-bottom: 9px; }
.step p { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }

/* ── DOWNLOAD SECTION ── */
.download { padding: 112px 2rem; background: var(--surface); }
.download-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.download-card { background: white; border-radius: 26px; border: 1px solid var(--border-light); box-shadow: 0 10px 48px rgba(22,50,74,.08), 0 2px 10px rgba(0,0,0,.04); padding: 60px 52px; position: relative; overflow: hidden; }
.download-card::before { content: ''; position: absolute; top: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, var(--brand-light) 0%, transparent 70%); }
.download-card::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 200px; height: 200px; background: radial-gradient(circle, var(--clay-light) 0%, transparent 70%); }
.download-icon { width: 66px; height: 66px; border-radius: 18px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; position: relative; z-index: 1; }
.download-icon svg { width: 30px; height: 30px; }
.download-card h2 { position: relative; z-index: 1; margin-bottom: 14px; }
.download-card .section-sub { position: relative; z-index: 1; margin-bottom: 40px; }
.store-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.store-btn { display: inline-flex; align-items: center; gap: 11px; padding: 13px 24px; border-radius: 13px; background: var(--ink); color: white; text-decoration: none; transition: all .2s; border: 1.5px solid transparent; }
.store-btn:hover { background: #2A2622; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.store-btn svg { width: 22px; height: 22px; fill: white; flex-shrink: 0; }
.store-btn-text { text-align: left; }
.store-btn-text small { display: block; font-size: 10px; color: rgba(255,255,255,.6); }
.store-btn-text span { display: block; font-size: 14px; font-weight: 700; }
.download-note { margin-top: 22px; font-size: 12px; color: var(--text-muted); position: relative; z-index: 1; text-align: center; }
.download-alt { margin-top: 6px; font-size: 13px; color: var(--text-secondary); position: relative; z-index: 1; text-align: center; }
.download-alt a { color: var(--brand); font-weight: 600; text-decoration: none; }
.download-alt a:hover { text-decoration: underline; }

/* ── SECURITY ── */
.security { background: var(--surface-alt); padding: 100px 2rem; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.security-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: center; }
.security-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sec-badge { background: white; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 22px; display: flex; gap: 14px; align-items: flex-start; transition: all .2s; }
.sec-badge:hover { border-color: var(--brand-border); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.sec-badge-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sec-badge p { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.sec-badge span { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.security-text .section-tag { text-align: left; }
.security-text h2 { text-align: left; }
.security-text .section-sub { text-align: left; margin: 0 0 28px; }
.security-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.security-list li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--text-secondary); }
.security-list li::before { content: ''; width: 19px; height: 19px; border-radius: 50%; background: var(--pine-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D4F' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center; }

/* ── WHATSAPP FLOAT ── */
.wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 10001; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: bottom .2s ease; }
.wa-float.banner-open { bottom: 118px; }
@media (max-width: 480px) { .wa-float.banner-open { bottom: 260px; } }
.wa-bubble { background: white; border-radius: 15px; padding: 15px 19px; box-shadow: var(--shadow-float); max-width: 240px; border: 1px solid var(--border-light); animation: bubble-in .4s cubic-bezier(.34,1.56,.64,1) both; display: none; }
.wa-bubble.show { display: block; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.8) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.wa-bubble p { font-size: 13.5px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.wa-bubble span { font-size: 12px; color: var(--text-muted); }
.wa-btn { width: 58px; height: 58px; border-radius: 50%; background: var(--green); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,.4); cursor: pointer; border: none; transition: transform .2s, box-shadow .2s; animation: wa-appear .6s cubic-bezier(.34,1.56,.64,1) 1.5s both; position: relative; }
@keyframes wa-appear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.wa-btn:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,.5); }
.wa-btn svg { width: 28px; height: 28px; fill: white; }
.wa-pulse { position: absolute; top: 0; right: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--clay); border: 2px solid white; animation: wa-pulse 2s infinite; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(166,84,58,.5); } 70% { box-shadow: 0 0 0 8px rgba(166,84,58,0); } 100% { box-shadow: 0 0 0 0 rgba(166,84,58,0); } }

/* ── FOOTER — full (homepage) ── */
footer { background: #14171B; color: #8B909B; padding: 68px 2rem 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 52px; }
.footer-brand .logo-name { color: white; font-size: 18px; }
.footer-brand p { font-size: 13.5px; line-height: 1.7; margin-top: 14px; max-width: 260px; color: #8B909B; }
.footer-brand .footer-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.footer-col h4 { font-family: var(--font-heading); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: #D8DAE0; margin-bottom: 18px; }
.footer-col a { display: block; text-decoration: none; color: #8B909B; font-size: 13.5px; margin-bottom: 11px; transition: color .15s; }
.footer-col a:hover { color: white; }
.footer-bottom { border-top: 1px solid #262A31; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 12.5px; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 12.5px; color: #8B909B; text-decoration: none; transition: color .15s; background: none; border: none; cursor: pointer; font-family: var(--font); padding: 0; }
.footer-bottom-links a:hover { color: white; }
.footer-wa { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 13.5px; font-weight: 600; text-decoration: none; margin-top: 16px; transition: opacity .2s; }
.footer-wa:hover { opacity: .8; }
.footer-wa svg { width: 18px; height: 18px; fill: var(--green); }

/* ── FOOTER — simple (legal/support pages) ── */
footer.footer-simple { padding: 40px 2rem; text-align: center; font-size: 13px; }
footer.footer-simple > .footer-logo-row { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 14px; }
.footer-brand-name { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: white; letter-spacing: -.01em; }
.footer-brand-name span { color: var(--brand-mid); }
.footer-desc { margin-bottom: 18px; font-size: 13px; }
.footer-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
footer.footer-simple a { color: #8B909B; text-decoration: none; transition: color .15s; }
footer.footer-simple a:hover { color: white; }
.logo-icon-sm { width: 30px; height: 30px; border-radius: 8px; }

/* ── COOKIE CONSENT BANNER ── */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: white; border-top: 1px solid var(--border); box-shadow: 0 -6px 36px rgba(0,0,0,.1); padding: 20px 26px; display: none; }
.cookie-banner.is-open { display: block; }
.cookie-banner-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cookie-banner-text { flex: 1; min-width: 240px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.cookie-banner-text strong { color: var(--ink); }
.cookie-banner-text a { color: var(--brand); text-decoration: underline; }
.cookie-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.cookie-btn { font-size: 13px; font-weight: 600; padding: 10px 19px; border-radius: var(--radius-sm); cursor: pointer; border: none; transition: all .15s; white-space: nowrap; font-family: var(--font); }
.cookie-manage { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.cookie-manage:hover { background: var(--surface-alt); color: var(--ink); }
.cookie-reject { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.cookie-reject:hover { background: var(--surface-alt); color: var(--ink); }
.cookie-accept { background: var(--brand); color: white; }
.cookie-accept:hover { background: var(--brand-hover); }

/* ── COOKIE PREFERENCES MODAL ── */
.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(15,20,25,.55); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
.cookie-modal-overlay.open { display: flex; }
.cookie-modal { background: white; border-radius: var(--radius-lg); max-width: 500px; width: 100%; padding: 34px; box-shadow: var(--shadow-modal); }
.cookie-modal h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 500; margin-bottom: 9px; }
.cookie-modal > p { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 26px; }
.cookie-category { border: 1px solid var(--border-light); border-radius: var(--radius); padding: 17px 19px; margin-bottom: 13px; }
.cookie-category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cookie-category-header strong { font-size: 14px; font-weight: 700; }
.toggle-switch { position: relative; width: 42px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background: #D3D0C9; border-radius: 24px; cursor: pointer; transition: background .2s; }
.toggle-track::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.toggle-switch input:checked + .toggle-track { background: var(--brand); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-track { opacity: .6; cursor: not-allowed; }
.cookie-category p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.cookie-modal-actions { display: flex; gap: 9px; margin-top: 26px; }
.cookie-modal-actions button { flex: 1; font-family: var(--font); }

/* ── PAGE HERO (legal/support pages) ── */
.page-hero { background: var(--surface-alt); border-bottom: 1px solid var(--border-light); padding: 60px 2rem 46px; }
.page-hero-inner { max-width: 760px; margin: 0 auto; }
.page-tag { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--clay-dark); margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 500; letter-spacing: -.015em; margin-bottom: 14px; }
.page-hero p { font-size: 15.5px; color: var(--text-secondary); line-height: 1.65; }
.page-hero time { font-size: 13px; color: var(--text-muted); margin-top: 18px; display: block; }

/* ── LEGAL CONTENT ── */
.content-wrap { max-width: 760px; margin: 0 auto; padding: 60px 2rem 92px; }
.content-wrap h2 { font-size: 1.25rem; font-weight: 500; margin: 50px 0 16px; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
.content-wrap h2:first-of-type { margin-top: 0; }
.content-wrap h3 { font-size: 1rem; font-weight: 600; font-family: var(--font); margin: 26px 0 9px; color: var(--ink); }
.content-wrap p { margin-bottom: 15px; color: var(--text-secondary); }
.content-wrap ul, .content-wrap ol { margin: 0 0 18px 22px; color: var(--text-secondary); }
.content-wrap li { margin-bottom: 8px; }
.content-wrap a { color: var(--brand); text-decoration: underline; }
.content-wrap a:hover { color: var(--brand-hover); }
.content-wrap table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 13.5px; }
.content-wrap th { background: var(--surface-alt); font-weight: 600; text-align: left; padding: 11px 15px; border: 1px solid var(--border); font-family: var(--font); }
.content-wrap td { padding: 11px 15px; border: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
.content-wrap code { font-family: monospace; font-size: 13px; background: var(--surface-alt); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-light); }
.highlight-box { background: var(--brand-light); border: 1px solid var(--brand-mid); border-radius: var(--radius); padding: 20px 22px; margin: 26px 0; font-size: 14px; color: var(--ink); line-height: 1.6; }
.highlight-box strong { color: var(--brand-ink); }
.warn-box { background: var(--ochre-light); border: 1px solid #D8B36A; border-radius: var(--radius); padding: 20px 22px; margin: 26px 0; font-size: 14px; color: #5C4211; display: block; line-height: 1.6; }
.warn-box strong { color: var(--ochre); display: block; margin-bottom: 6px; }
.contact-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin: 26px 0; }
.contact-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; margin-bottom: 11px; }
.contact-row:last-child { margin-bottom: 0; }
.contact-label { color: var(--text-muted); font-weight: 600; min-width: 150px; flex-shrink: 0; }
.contact-value { color: var(--ink); }
.contact-value a { color: var(--brand); }
.manage-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--brand); color: white; padding: 12px 24px; border-radius: 11px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; font-family: var(--font); transition: background .15s; margin-top: 10px; }
.manage-btn:hover { background: var(--brand-hover); }
.note-fine { font-size: 13px; color: var(--text-muted); }

/* ── ACCORDION (native <details>/<summary>, no JS needed) ── */
.accordion { margin: 20px 0 28px; display: flex; flex-direction: column; gap: 10px; }
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius); background: white; overflow: hidden; }
.accordion-item summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s; }
.accordion-item[open] summary::after { transform: rotate(-135deg); }
.accordion-item summary:hover { background: var(--surface-alt); }
.accordion-body { padding: 0 20px 18px; font-size: 14px; color: var(--text-secondary); line-height: 1.65; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hero { padding: 60px 1.5rem 52px; }
  .hero-sub { max-width: 100%; }
  .features, .how, .download, .security { padding: 76px 1.5rem; }
  .section-header { margin-bottom: 48px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-grid > .card:nth-child(1) { grid-column: auto; }
  .card-wide { flex-direction: column; }
  .security-inner { grid-template-columns: 1fr; gap: 3rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-ghost span { display: none; }
  .steps::before { display: none; }
  .trust-inner { grid-template-columns: repeat(2,1fr); }
  .download-card { padding: 44px 28px; }
  .store-btns { flex-direction: column; align-items: center; }
  .cookie-banner { padding: 16px 18px; }
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cookie-actions { flex-direction: column; width: 100%; }
  .cookie-btn { width: 100%; text-align: center; }
  .security-badges { grid-template-columns: 1fr; }
  .page-hero { padding: 44px 1.5rem 32px; }
  .content-wrap { padding: 44px 1.5rem 64px; }
  .content-wrap table { font-size: 12px; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 480px) {
  .hero { padding: 48px 1.25rem 36px; }
  .footer-top { grid-template-columns: 1fr; }
  .features, .how, .download, .security { padding: 56px 1.25rem; }
  .cookie-modal { padding: 26px 20px; }
  .cookie-modal-actions { flex-direction: column; }
  .page-hero { padding: 36px 1.25rem 26px; }
  .content-wrap { padding: 36px 1.25rem 52px; }
  .content-wrap h2 { font-size: 1.1rem; }
  .contact-label { min-width: 110px; font-size: 13px; }
  .contact-row { font-size: 13px; }
}

/* ── PDF DOWNLOAD LINK (legal pages) ── */
.pdf-download { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand); text-decoration: none; margin-top: 4px; }
.pdf-download:hover { color: var(--brand-hover); text-decoration: underline; }
.pdf-download svg { flex-shrink: 0; }

/* ── PRINT (used both for Ctrl+P and for headless "print to PDF") ──
   Strips the site chrome so only the legal document itself prints:
   no nav, no cookie banner, no mobile menu, no WhatsApp float, no
   decorative shadows/gradients. See scripts/generate-pdfs.sh. */
@media print {
  nav, .cookie-banner, .cookie-modal-overlay, .mobile-menu, .wa-float, .pdf-download { display: none !important; }
  body { font-size: 12pt; }
  .page-hero { background: none; border-bottom: 2px solid var(--border); padding: 0 0 16px; }
  .page-hero-inner, .content-wrap { max-width: 100%; padding: 0; }
  .content-wrap { padding-top: 24px; }
  .highlight-box, .warn-box, .contact-card, .accordion-item { box-shadow: none; break-inside: avoid; }
  .accordion-item summary::after { display: none; }
  .accordion-item { border: 1px solid var(--border); }
  /* <details> hides its body unless [open] is set. Current Chrome/Edge do
     this via `content-visibility: hidden` on the non-summary content (not
     plain display:none), so display:block alone does NOT reveal it —
     content-visibility must be overridden too. Force every accordion open
     for print/PDF so the legal text isn't hidden behind a click. */
  .accordion-item:not([open]) .accordion-body {
    content-visibility: visible !important;
    display: block !important;
  }
  a { color: var(--brand); text-decoration: underline; }
  footer.footer-simple { background: white; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 32px; }
  footer.footer-simple a { color: var(--text-muted); }
  /* .footer-brand-name/span are styled white-on-dark for the on-screen
     footer — invisible on the white print background unless overridden. */
  footer.footer-simple .footer-brand-name,
  footer.footer-simple .footer-brand-name span { color: var(--ink) !important; }
}