/* ============================================================
   Ramos Labs — "Quiet Engineering" design system
   Light-first · one accent · hairlines over glow · calm motion
   ============================================================ */

/* Self-hosted fonts (latin, variable) — no render-blocking 3rd-party request */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-latin-var.woff2') format('woff2');
}

:root {
  /* Neutral scale — the brand is ~95% this */
  --ink-900:#0B0E11;   /* primary text / near-black */
  --ink-800:#16191D;
  --ink-700:#2A2F36;   /* strong body / icon stroke */
  --ink-600:#3F454D;
  --ink-500:#5A626C;   /* secondary text */
  --ink-400:#828B96;   /* muted (large/decorative only) */
  --line:#E4E7EC;      /* hairline border */
  --line-strong:#D3D8DF;
  --paper:#FFFFFF;     /* page background */
  --paper-2:#F7F8FA;   /* subtle section band */
  --paper-3:#EEF1F4;   /* deeper band / inset */

  /* One accent — ink-teal (ownable, calm, AA on white at 5.07:1) */
  --accent:#0E7C71;
  --accent-strong:#0A5F57;   /* hover / pressed */
  --accent-tint:#E6F2F0;     /* faint fill behind icons */
  --accent-tint-2:#D3E8E4;

  /* Functional only — never decorative */
  --positive:#1E8E5A;
  --warning:#B45309;
  --danger:#B42318;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;

  /* Elevation = hairline + soft NEUTRAL shadow. No colored glow. */
  --shadow-1:0 1px 2px rgba(11,14,17,.05);
  --shadow-2:0 8px 24px -8px rgba(11,14,17,.12), 0 2px 6px rgba(11,14,17,.05);
  --shadow-3:0 24px 60px -20px rgba(11,14,17,.18);

  --ease:cubic-bezier(0.22,1,0.36,1);
  --t-fast:140ms var(--ease);
  --t-base:240ms var(--ease);

  --header-h:4.9rem;
  --container:72rem;
  --pad:1.25rem;

  --font-sans:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@media (min-width:640px){ :root{ --pad:1.75rem; } }
@media (min-width:1024px){ :root{ --pad:2rem; --header-h:5.25rem; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--ink-900);
  line-height:1.6;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--accent-tint-2); color:var(--ink-900); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Section anchor offset so the fixed header never hides titles */
section[id]{ scroll-margin-top:calc(var(--header-h) + 1.25rem); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:absolute; top:-100%; left:1rem; z-index:200;
  padding:.6rem 1rem; background:var(--accent); color:#fff;
  font-weight:600; border-radius:var(--radius-sm);
  transition:top var(--t-fast);
}
.skip-link:focus{ top:1rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-base), background var(--t-base);
}
.site-header.scrolled{
  border-bottom-color:var(--line);
  background:rgba(255,255,255,.9);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:100%; }

/* Logo — static, calm wordmark + geometric RS mark */
.logo{ display:flex; align-items:center; gap:.6rem; }
.logo-mark{ width:42px; height:42px; flex-shrink:0; }
.logo-mark rect{ fill:none; stroke:var(--accent); stroke-width:2.2; }
.logo-mark path{ stroke:var(--ink-900); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.logo-text{ display:flex; flex-direction:column; line-height:1.04; }
.logo-word{ font-weight:650; font-size:1.14rem; letter-spacing:-0.01em; color:var(--ink-900); }
.logo-word--sub{ font-weight:500; font-size:.74rem; letter-spacing:.01em; color:var(--ink-500); }
@media (max-width:480px){ .logo-word--sub{ display:none; } }

.primary-nav .nav-list{ display:flex; align-items:center; gap:.35rem; list-style:none; }
.primary-nav a{
  display:inline-block; padding:.5rem .7rem; border-radius:var(--radius-sm);
  font-size:.92rem; font-weight:500; color:var(--ink-600);
  transition:color var(--t-fast), background var(--t-fast);
}
.primary-nav a:hover{ color:var(--ink-900); background:var(--paper-2); }
.primary-nav a.is-active{ color:var(--accent); }
.primary-nav a.nav-cta{
  margin-left:.4rem; padding:.5rem 1rem; color:#fff; background:var(--accent);
  font-weight:600;
}
.primary-nav a.nav-cta:hover{ background:var(--accent-strong); color:#fff; }

.header-tools{ display:flex; align-items:center; gap:.6rem; }

.language-switch{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.language-switch__button{
  padding:.32rem .62rem; font-size:.76rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-500); transition:color var(--t-fast), background var(--t-fast);
}
.language-switch__button.is-active{ background:var(--ink-900); color:#fff; }

.menu-toggle{ display:none; width:42px; height:42px; border-radius:var(--radius-sm); align-items:center; justify-content:center; }
.menu-toggle:hover{ background:var(--paper-2); }
.hamburger, .hamburger::before, .hamburger::after{
  content:''; display:block; width:20px; height:2px; background:var(--ink-900); border-radius:2px;
  transition:transform var(--t-base), opacity var(--t-fast);
}
.hamburger{ position:relative; }
.hamburger::before{ position:absolute; top:-6px; }
.hamburger::after{ position:absolute; top:6px; }
.menu-toggle[aria-expanded="true"] .hamburger{ background:transparent; }
.menu-toggle[aria-expanded="true"] .hamburger::before{ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */
.section{ padding-block:clamp(4rem, 8vw, 7rem); }
.section--band{ background:var(--paper-2); border-block:1px solid var(--line); }

.section-header{ max-width:42rem; margin-bottom:3rem; }
.section-header--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500); margin-bottom:1rem;
}
.eyebrow::before{ content:''; display:inline-block; width:1.4rem; height:1px; background:var(--accent); vertical-align:middle; margin-right:.55rem; transform:translateY(-2px); }
.section-title{
  font-size:clamp(1.7rem, 3.6vw, 2.5rem); font-weight:600; line-height:1.12;
  letter-spacing:-0.02em; color:var(--ink-900);
}
.section-sub{ margin-top:1rem; font-size:1.08rem; color:var(--ink-500); max-width:40rem; }
.section-header--center .section-sub{ margin-inline:auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.25rem; border-radius:var(--radius-sm);
  font-size:.95rem; font-weight:600; letter-spacing:-0.005em;
  border:1px solid transparent; transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.btn:active{ transform:scale(.985); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; color:var(--ink-900); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink-900); background:var(--paper-2); }
.btn-lg{ padding:.9rem 1.6rem; font-size:1rem; }
.btn-full{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem)); padding-bottom:clamp(3rem,7vw,6rem); overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 75% -10%, var(--accent-tint) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  opacity:.9;
}
.hero-grid{ display:grid; gap:3rem; align-items:center; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:4rem; } }

.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem;
  border:1px solid var(--line); background:var(--paper); border-radius:999px;
  font-size:.82rem; color:var(--ink-600); box-shadow:var(--shadow-1);
}
.badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.hero-title{
  margin-top:1.4rem; font-size:clamp(2.1rem, 5vw, 3.4rem); font-weight:650;
  line-height:1.08; letter-spacing:-0.025em; color:var(--ink-900);
}
@media (min-width:980px){ .hero-title{ font-size:4.4rem; line-height:1.04; } }
.hero-title .accent{ color:var(--accent); }
.hero-lead{ margin-top:1.4rem; font-size:1.18rem; color:var(--ink-500); max-width:34rem; }
/* subtle scroll-down link (replaces the hero buttons) */
.hero-jump{ margin-top:2rem; display:inline-flex; align-items:center; gap:.45rem; font-size:1rem; font-weight:600; color:var(--accent); width:max-content; }
.hero-jump span{ transition:transform var(--t-fast); }
.hero-jump:hover{ color:var(--accent-strong); }
.hero-jump:hover span{ transform:translateY(3px); }
/* Hero 3D object render — portrait on mobile (top), landscape on desktop (right).
   Loaded as CSS background so each viewport fetches only its own image; a soft
   radial mask feathers the render's backdrop into the hero (object "floats"). */
.hero-art{ display:none; }
/* multiply blends the render's light backdrop into the light hero; the mask
   feathers what's left so no rectangle edge shows. */
.hero-art img{ display:block; width:100%; height:auto; object-fit:contain; mix-blend-mode:multiply; }
@media (max-width:979px){
  .hero{ min-height:100dvh; padding-top:calc(var(--header-h) + .4rem); padding-bottom:1.25rem; }
  .hero-grid{ gap:0; }
  .hero-title{ font-size:3rem; line-height:1.05; margin-top:-2.5rem; position:relative; z-index:1; }
  .hero-art{ display:block; order:-1; max-width:min(82vw, 360px); margin:0 auto -2.5rem; }
  .hero-art img{ aspect-ratio:823 / 1100;
    -webkit-mask:radial-gradient(60% 52% at 50% 46%, #000 40%, transparent 78%);
    mask:radial-gradient(60% 52% at 50% 46%, #000 40%, transparent 78%); }
}
@media (min-width:980px){
  .hero-art{ display:block; order:2; }
  .hero-art img{ aspect-ratio:1400 / 1047;
    -webkit-mask:radial-gradient(60% 62% at 50% 50%, #000 42%, transparent 80%);
    mask:radial-gradient(60% 62% at 50% 50%, #000 42%, transparent 80%); }
}
@media (prefers-reduced-motion:no-preference){
  .hero-art img{ animation:artFloat 6s ease-in-out infinite; }
}
@keyframes artFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.hero-proof{ margin-top:1.25rem; font-size:1rem; color:var(--ink-700); max-width:34rem; padding-left:1rem; border-left:2px solid var(--accent); }
.hero-proof strong{ color:var(--ink-900); font-weight:650; }
.hero-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.85rem; }
.hero-trust{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.65rem 1.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.hero-trust span{ display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; color:var(--ink-500); }
.hero-trust span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); }

/* Hero product panel — calm, realistic UI preview (no neon, no glow) */
.hero-visual{ position:relative; }
.product-panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); overflow:hidden;
}
.product-panel__bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--paper-2); }
.product-panel__bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.product-panel__bar span{ margin-left:.5rem; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-400); }
.product-panel__body{ padding:1.1rem; display:grid; gap:.85rem; }
.pp-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.pp-stat{ border:1px solid var(--line); border-radius:var(--radius); padding:.85rem; background:var(--paper); }
.pp-stat span{ font-size:.74rem; color:var(--ink-500); }
.pp-stat strong{ display:block; margin-top:.25rem; font-size:1.5rem; font-weight:650; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.pp-stat strong em{ font-style:normal; color:var(--accent); font-size:.9rem; margin-left:.3rem; }
.pp-chart{ border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1rem 1.1rem; }
.pp-chart h4{ font-size:.78rem; font-weight:600; color:var(--ink-600); margin-bottom:.7rem; }
.pp-chart svg{ width:100%; height:64px; }
.pp-list{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.pp-list div{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; font-size:.82rem; color:var(--ink-600); border-top:1px solid var(--line); }
.pp-list div:first-child{ border-top:none; }
.pp-tag{ font-family:var(--font-mono); font-size:.7rem; padding:.12rem .5rem; border-radius:999px; background:var(--accent-tint); color:var(--accent-strong); }
.pp-tag--muted{ background:var(--paper-3); color:var(--ink-500); }

/* Hero before/after replaced by the 3D object render — hidden on all viewports. */
.hero-visual{ display:none; }

/* Hero ambient background: dot grid + soft teal glow + animated connection flow */
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(62% 48% at 86% 6%, var(--accent-tint) 0%, transparent 70%),
    radial-gradient(circle at 1.5px 1.5px, rgba(130,139,150,.10) 1.5px, transparent 0) 0 0 / 26px 26px;
}
.hero > .container{ position:relative; z-index:1; }
.hero-bg__flow{ position:absolute; inset:0; width:100%; height:100%; }
.hero-bg__flow .flow{ stroke:var(--accent); stroke-width:2.5; opacity:.16; stroke-linecap:round; stroke-dasharray:16 13; animation:heroFlow 10s linear infinite; }
.hero-bg__flow .flow--2{ opacity:.11; animation-duration:14s; }
.hero-bg__flow .flow--3{ opacity:.09; animation-duration:12s; animation-direction:reverse; }
.hero-bg__flow .node{ fill:var(--accent); opacity:.22; }
.hero-bg__flow .node--2{ fill:var(--accent-strong); opacity:.18; }
@keyframes heroFlow{ to{ stroke-dashoffset:-290; } }
@media (prefers-reduced-motion:reduce){ .hero-bg__flow .flow{ animation:none; } }
.ba__label{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.ba__label--before{ color:var(--ink-400); }
.ba__label--after{ color:var(--accent-strong); }
.ba__dot{ width:7px; height:7px; border-radius:50%; background:var(--warning); }
.ba__mess{ margin-top:.85rem; display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.mess-chip{
  display:inline-flex; align-items:center; gap:.5rem; max-width:100%;
  padding:.5rem .75rem; border-radius:10px; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow-1);
  font-size:.82rem; color:var(--ink-500); white-space:nowrap;
}
.mess-chip svg{ width:15px; height:15px; stroke:var(--ink-400); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.mess-chip:nth-child(1){ transform:rotate(-2deg); margin-left:.1rem; }
.mess-chip:nth-child(2){ transform:rotate(1.6deg); margin-left:2.4rem; }
.mess-chip:nth-child(3){ transform:rotate(-1deg); margin-left:1rem; }
.ba__bridge{ position:relative; display:flex; justify-content:center; padding:.95rem 0; }
.ba__bridge::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:repeating-linear-gradient(var(--line-strong) 0 4px, transparent 4px 9px); z-index:0; }
.ba__bridge-pill{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.45rem; background:var(--ink-900); color:#fff; font-size:.76rem; font-weight:600; letter-spacing:.01em; padding:.45rem .9rem; border-radius:999px; box-shadow:var(--shadow-2); }
.ba__bridge-pill svg{ width:14px; height:14px; stroke:var(--accent-tint-2); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ba__after{ margin-top:.2rem; }
.ba__after .ba__label{ margin-bottom:.7rem; }
.ba__after .product-panel{
  box-shadow:var(--shadow-3);
  transform: perspective(1500px) rotateX(var(--rx, 3.5deg)) rotateY(var(--ry, -9deg));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.hero-visual:hover .ba__after .product-panel{
  box-shadow: 0 46px 92px -30px rgba(11,14,17,.34), 0 16px 36px -14px rgba(11,14,17,.16);
}
/* the "before" mess chips get a touch of depth too */
.ba__before .mess-chip{ box-shadow: 0 10px 22px -14px rgba(11,14,17,.22); }
@media (prefers-reduced-motion:reduce){
  .ba__after .product-panel{ transform:none; transition:box-shadow .2s var(--ease); }
}

/* ============================================================
   SYMPTOM / SIGNAL SELECTOR
   ============================================================ */
.symptom-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .symptom-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .symptom-grid{ grid-template-columns:repeat(3,1fr); } }

.symptom-card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.3rem; background:var(--paper); transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.symptom-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-1); }
.symptom-card__control{ position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; z-index:1; }
.symptom-card__control:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.symptom-card > span{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-400); }
.symptom-card h3{ margin-top:.5rem; font-size:1.05rem; font-weight:600; color:var(--ink-900); letter-spacing:-0.01em; }
.symptom-card p{ margin-top:.5rem; font-size:.92rem; color:var(--ink-500); }
.symptom-card__check{
  position:absolute; top:1.1rem; right:1.1rem; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.symptom-card__check svg{ width:12px; height:12px; stroke:#fff; stroke-width:3; opacity:0; transition:opacity var(--t-fast); }
.symptom-card__control[aria-pressed="true"] ~ .symptom-card__check{ background:var(--accent); border-color:var(--accent); }
.symptom-card__control[aria-pressed="true"] ~ .symptom-card__check svg{ opacity:1; }
.symptom-card:has(.symptom-card__control[aria-pressed="true"]){ border-color:var(--accent); background:var(--accent-tint); }

.symptom-card--feedback{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; display:flex; flex-direction:column; }
.symptom-card--feedback span{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent-tint-2); }
.symptom-card--feedback h3{ color:#fff; }
.symptom-card--feedback p{ color:#C3CAD3; }
.symptom-card--feedback a{ margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:#fff; }
.symptom-card--feedback a::after{ content:'→'; transition:transform var(--t-fast); }
.symptom-card--feedback a:hover::after{ transform:translateX(3px); }
.symptom-card--feedback.is-hot span{ color:#fff; }

/* ============================================================
   TRANSFORMATION (before / after)
   ============================================================ */
.transformation-panel{ display:grid; gap:1rem; align-items:stretch; }
@media (min-width:860px){ .transformation-panel{ grid-template-columns:1fr auto 1fr; gap:1.5rem; } }
.transform-column{ border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; background:var(--paper); }
.transform-column--after{ border-color:var(--accent); background:var(--accent-tint); }
.transform-label{ font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }
.transform-column--after .transform-label{ color:var(--accent-strong); }
.transform-column h3{ margin-top:.6rem; font-size:1.2rem; font-weight:600; letter-spacing:-0.01em; }
.transform-column ul{ margin-top:1rem; list-style:none; display:grid; gap:.65rem; }
.transform-column li{ position:relative; padding-left:1.4rem; font-size:.95rem; color:var(--ink-600); }
.transform-column--before li::before{ content:'–'; position:absolute; left:.2rem; color:var(--ink-400); }
.transform-column--after li::before{ content:'✓'; position:absolute; left:.1rem; color:var(--accent); font-weight:700; }
.transform-arrow{ display:flex; align-items:center; justify-content:center; color:var(--ink-400); }
.transform-arrow svg{ width:28px; height:28px; }
@media (max-width:859px){ .transform-arrow{ transform:rotate(90deg); } }

/* Compare widget (Transformación — side by side, no toggle) */
.fd-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.fd-dot--warn{ background:var(--warning); }
.fd-dot--ok{ background:var(--accent); }

.compare{ display:grid; gap:1.25rem; align-items:stretch; }
@media (min-width:880px){ .compare{ grid-template-columns:1fr auto 1fr; gap:1.5rem; } }
.compare__side{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.4rem; display:flex; flex-direction:column; }
.compare__side--hoy{ background:var(--paper-2); }
.compare__side--rl{ background:var(--paper); border-color:var(--accent-tint-2); box-shadow:var(--shadow-2); }
.compare__tag{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.1rem; }
.compare__tag--hoy{ color:var(--ink-400); }
.compare__tag--rl{ color:var(--accent-strong); }
.compare__arrow{ display:flex; align-items:center; justify-content:center; color:var(--accent); }
.compare__arrow svg{ width:26px; height:26px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:879px){ .compare__arrow{ transform:rotate(90deg); } }
.compare__cap{ margin-top:1.1rem; font-size:.85rem; color:var(--ink-500); display:flex; align-items:center; gap:.5rem; }

/* 3D: forward-facing panels with REAL depth — inner widgets float above the surface
   like a diorama (no sideways skew). A subtle cursor parallax (JS) brings it alive. */
@media (min-width:880px){
  .compare{ perspective:1300px; }
  .compare__side{
    transform-style:preserve-3d; will-change:transform;
    transform:rotateX(var(--rx, 5deg)) rotateY(var(--ry, 0deg));
    transition:transform .35s var(--ease), box-shadow .45s var(--ease);
    box-shadow:0 40px 72px -34px rgba(11,14,17,.34);
  }
  .compare__side .minis, .compare__side .demos{ transform-style:preserve-3d; }
  .compare__side .mini, .compare__side .demo{ transition:box-shadow .4s var(--ease); }
  /* extrude the inner widgets to staggered Z heights so they hover off the surface */
  .minis .mini:nth-child(1), .demos .demo:nth-child(1){ transform:translateZ(12px); box-shadow:0 14px 24px -16px rgba(11,14,17,.22); }
  .minis .mini:nth-child(2), .demos .demo:nth-child(2){ transform:translateZ(26px); box-shadow:0 20px 32px -16px rgba(11,14,17,.24); }
  .minis .mini:nth-child(3), .demos .demo:nth-child(3){ transform:translateZ(42px); box-shadow:0 28px 44px -18px rgba(11,14,17,.26); }
  .compare__side .compare__tag{ transform:translateZ(8px); }
  .compare__side:hover{ box-shadow:0 58px 108px -34px rgba(11,14,17,.42); }
  .compare__arrow{ transform:translateZ(85px); }
}
@media (prefers-reduced-motion:reduce){
  .compare__side, .minis .mini, .demos .demo, .compare__arrow, .compare__side .compare__tag{ transform:none !important; }
}
.minis, .demos{ display:flex; flex-direction:column; gap:.85rem; flex:1; }

/* mini tool widgets (Hoy) — intentionally dull */
.mini{ border:1px solid var(--line); border-radius:10px; background:var(--paper); overflow:hidden; filter:grayscale(.3) opacity(.92); }
.mini__bar{ display:flex; align-items:center; gap:.45rem; padding:.45rem .6rem; background:var(--paper-3); border-bottom:1px solid var(--line); font-size:.72rem; color:var(--ink-500); font-family:var(--font-mono); }
.mini__bar svg{ width:13px; height:13px; stroke:var(--ink-400); fill:none; stroke-width:1.6; flex-shrink:0; }
.mini__dotrow{ display:inline-flex; gap:3px; }
.mini__dotrow i{ width:6px; height:6px; border-radius:50%; background:var(--line-strong); }
.mini__wa{ width:9px; height:9px; border-radius:50%; background:#9AA3AE; }
.xls{ display:grid; grid-template-columns:repeat(3,1fr); }
.xls__cell{ padding:.3rem .45rem; font-size:.72rem; color:var(--ink-500); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.xls__cell--h{ background:var(--paper-2); font-weight:600; color:var(--ink-400); text-align:center; }
.xls__cell--bad{ background:#FBF3EA; color:var(--warning); font-weight:600; }
.chat{ padding:.7rem; display:flex; flex-direction:column; gap:.4rem; }
.bubble{ font-size:.78rem; padding:.4rem .6rem; border-radius:10px; max-width:88%; }
.bubble--in{ background:var(--paper-3); color:var(--ink-600); align-self:flex-start; border-bottom-left-radius:3px; }
.bubble--out{ background:#E7ECE9; color:var(--ink-600); align-self:flex-end; border-bottom-right-radius:3px; }
.inbox{ list-style:none; padding:.4rem .2rem; }
.inbox li{ display:flex; align-items:center; gap:.5rem; padding:.32rem .6rem; font-size:.78rem; color:var(--ink-600); }
.inbox .unread{ width:7px; height:7px; border-radius:50%; background:var(--ink-400); flex-shrink:0; }
.inbox__muted{ color:var(--ink-400); font-style:italic; }

/* live demos (Con Ramos Labs) */
.demo{ border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:.85rem .9rem; }
.demo__head{ font-size:.74rem; font-weight:600; color:var(--ink-500); margin-bottom:.6rem; }
.demo__kpis{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.55rem; }
.demo__kpis span{ font-size:.7rem; color:var(--ink-500); }
.demo__kpis strong{ display:block; font-size:1.15rem; font-weight:650; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.demo__kpis em{ font-style:normal; color:var(--accent); font-size:.72rem; margin-left:.25rem; }
.demo__spark{ width:100%; height:36px; }
.demo--row{ display:flex; align-items:center; gap:.7rem; }
.demo__ico{ width:34px; height:34px; border-radius:8px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.demo__ico svg{ width:17px; height:17px; stroke:var(--accent-strong); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.demo--row > div{ flex:1; }
.demo--row strong{ display:block; font-size:.85rem; font-weight:600; }
.demo--row span{ font-size:.74rem; color:var(--ink-500); }
.demo__badge{ font-size:.68rem; font-family:var(--font-mono); padding:.18rem .5rem; border-radius:999px; background:var(--accent-tint); color:var(--accent-strong); white-space:nowrap; }
.feed{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.feed li{ display:flex; align-items:center; gap:.55rem; font-size:.8rem; color:var(--ink-700); }
.feed__ico{ width:22px; height:22px; border-radius:6px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feed__ico svg{ width:13px; height:13px; stroke:var(--ink-500); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.feed__ico--ok{ background:var(--accent-tint); }
.feed__ico--ok svg{ stroke:var(--accent-strong); }

/* ============================================================
   LADDER (Cómo empezamos — escalera de compromiso)
   ============================================================ */
.ladder{ list-style:none; display:grid; gap:1rem; }
@media (min-width:900px){ .ladder{ grid-template-columns:repeat(4,1fr); gap:1.4rem; } }
.step{ position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:1.5rem 1.35rem; display:flex; flex-direction:column; box-shadow:var(--shadow-1); }
.step__ring{ display:none; } /* legacy element, no longer used */
.step__num{ position:absolute; top:1.3rem; right:1.35rem; font-family:var(--font-mono); font-size:.78rem; color:var(--line-strong); }
.step__icon{ position:relative; width:42px; height:42px; border-radius:50%; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; opacity:0; transform:scale(.78); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.step__icon svg{ width:21px; height:21px; stroke:var(--accent-strong); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.is-visible .step__icon{ opacity:1; transform:none; }
.is-visible .step:nth-child(2) .step__icon{ transition-delay:.1s; }
.is-visible .step:nth-child(3) .step__icon{ transition-delay:.2s; }
.is-visible .step:nth-child(4) .step__icon{ transition-delay:.3s; }
.step__tag{ align-self:flex-start; font-size:.66rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:.26rem .6rem; border-radius:999px; background:var(--paper-2); color:var(--ink-500); margin-bottom:.9rem; }
.step--free .step__tag{ background:var(--accent); color:#fff; }
.step__title{ font-size:1.08rem; font-weight:600; letter-spacing:-0.01em; }
.step__desc{ margin-top:.5rem; font-size:.92rem; color:var(--ink-500); flex:1; }
.step__cta{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.9rem; font-weight:600; color:var(--accent); }
.step__cta::after{ content:'→'; transition:transform var(--t-fast); }
.step__cta:hover{ color:var(--accent-strong); }
.step__cta:hover::after{ transform:translateX(3px); }

/* ===== PULSE-WAVE: a wave of activation flows L->R through the phases (pure CSS) ===== */
/* Only animates while the section is in view (perf), pauses on hover/focus. */
.ladder.is-visible .step{ animation:phaseWave 7s var(--ease) infinite; }
.ladder.is-visible .step__icon::before{ content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--accent); opacity:0; animation:phasePulse 7s ease-out infinite; }
.ladder.is-visible .step:nth-child(1){ animation-delay:0s; }
.ladder.is-visible .step:nth-child(2){ animation-delay:-5.25s; }
.ladder.is-visible .step:nth-child(3){ animation-delay:-3.5s; }
.ladder.is-visible .step:nth-child(4){ animation-delay:-1.75s; }
.ladder.is-visible .step:nth-child(1) .step__icon::before{ animation-delay:0s; }
.ladder.is-visible .step:nth-child(2) .step__icon::before{ animation-delay:-5.25s; }
.ladder.is-visible .step:nth-child(3) .step__icon::before{ animation-delay:-3.5s; }
.ladder.is-visible .step:nth-child(4) .step__icon::before{ animation-delay:-1.75s; }
@keyframes phaseWave{
  0%, 13%  { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 16px 34px -12px rgba(11,14,17,.20); }
  30%, 100%{ transform:translateY(0); border-color:var(--line); box-shadow:0 1px 2px rgba(11,14,17,.05); }
}
@keyframes phasePulse{
  0%   { opacity:.6; transform:scale(1); }
  16%  { opacity:0; transform:scale(2.2); }
  100% { opacity:0; transform:scale(2.2); }
}

/* connectors: a teal dot streaks to the next phase in sequence (desktop) */
.step__flow{ display:none; }
@media (min-width:900px){
  .step__flow{ display:block; position:absolute; right:-1.4rem; top:2.7rem; width:1.4rem; height:2px; transform:translateY(-50%); background:var(--line-strong); z-index:1; pointer-events:none; }
  .ladder.is-visible .step__flow::before{ content:''; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent); opacity:0; animation:phaseConn 7s var(--ease) infinite; }
  .ladder.is-visible .step:nth-child(1) .step__flow::before{ animation-delay:-6.1s; }
  .ladder.is-visible .step:nth-child(2) .step__flow::before{ animation-delay:-4.35s; }
  .ladder.is-visible .step:nth-child(3) .step__flow::before{ animation-delay:-2.6s; }
}
@keyframes phaseConn{
  0%   { left:-3px; opacity:0; }
  4%   { opacity:1; }
  12%  { left:calc(100% - 3px); opacity:0; }
  100% { left:calc(100% - 3px); opacity:0; }
}

.ladder:hover .step, .ladder:focus-within .step,
.ladder:hover .step__icon::before, .ladder:focus-within .step__icon::before,
.ladder:hover .step__flow::before, .ladder:focus-within .step__flow::before{ animation-play-state:paused; }

.ladder__punch{ margin-top:2.2rem; text-align:center; font-size:1.05rem; color:var(--ink-500); max-width:46rem; margin-inline:auto; }
.ladder__punch strong{ color:var(--ink-900); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .step__icon{ opacity:1 !important; transform:none !important; transition:none; }
  .ladder.is-visible .step,
  .ladder.is-visible .step__icon::before,
  .ladder.is-visible .step__flow::before{ animation:none; }
  .step--free{ border-color:var(--accent); }
}

/* ============================================================
   CASES — Reel: soft B&W carousel, reveals color on hover/tap
   ============================================================ */
.reel{ margin-top:1.5rem; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.reel__track{ display:flex; width:max-content; list-style:none; animation:reelDrift 50s linear infinite; }
.reel:hover .reel__track, .reel:focus-within .reel__track{ animation-play-state:paused; }
@keyframes reelDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.reel__card{ flex:0 0 300px; margin-right:1.25rem; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper); display:flex; flex-direction:column; transition:box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base); }
.reel__card:hover{ box-shadow:var(--shadow-2); border-color:var(--line-strong); transform:translateY(-4px); }
.reel__shot{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--paper-2); cursor:pointer; }
.reel__shot:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.reel__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(1) contrast(1.02); transition:filter .5s var(--ease), transform .6s var(--ease); }
.reel__card:hover .reel__shot img, .reel__card.is-color .reel__shot img{ filter:none; transform:scale(1.04); }
.reel__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.reel__label{ font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); }
.reel__title{ margin-top:.3rem; font-size:1.15rem; font-weight:650; letter-spacing:-0.01em; color:var(--ink-900); }
.reel__desc{ margin-top:.4rem; font-size:.86rem; color:var(--ink-500); flex:1; }
.reel__scope{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.reel__scope span{ font-size:.64rem; font-weight:600; padding:.2rem .5rem; border-radius:999px; background:var(--accent-tint); color:var(--accent-strong); }
.reel__visit{ margin-top:.9rem; display:inline-flex; align-items:center; gap:.3rem; font-size:.84rem; font-weight:600; color:var(--accent); }
.reel__visit:hover{ color:var(--accent-strong); }
.reel__lab{ margin-top:1.5rem; text-align:center; font-size:.9rem; color:var(--ink-500); }
.reel__lab strong{ color:var(--ink-900); font-weight:600; }
@media (hover:none){
  .reel{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; -webkit-mask:none; mask:none; }
  .reel__track{ animation:none; }
  .reel__card{ scroll-snap-align:center; }
  .reel__card[aria-hidden]{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .reel{ overflow-x:auto; -webkit-mask:none; mask:none; }
  .reel__track{ animation:none; }
}

/* ============================================================
   AUTHORITY BEAT (founder + engineering standard)
   ============================================================ */
.authority-grid{ display:grid; gap:2.5rem; }
@media (min-width:900px){ .authority-grid{ grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; } }
.founder-quote{ border-left:2px solid var(--accent); padding-left:1.5rem; }
.founder-quote p{ font-size:1.25rem; line-height:1.5; color:var(--ink-800); letter-spacing:-0.01em; }
.founder-meta{ margin-top:1.3rem; display:flex; align-items:center; gap:.85rem; }
.founder-avatar{ width:44px; height:44px; border-radius:50%; background:var(--accent-tint); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-weight:650; font-size:.95rem; }
.founder-name{ font-weight:600; color:var(--ink-900); }
.founder-role{ font-size:.88rem; color:var(--ink-500); }
.founder-role a{ color:var(--accent); }
.standard-list{ list-style:none; display:grid; gap:1.1rem; }
.standard-list li{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; }
.standard-list .std-ico{ width:34px; height:34px; border-radius:var(--radius-sm); background:var(--accent-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.standard-list .std-ico svg{ width:18px; height:18px; stroke:var(--accent-strong); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.standard-list strong{ display:block; font-size:.98rem; font-weight:600; color:var(--ink-900); }
.standard-list span{ font-size:.9rem; color:var(--ink-500); }

/* ============================================================
   PROCESS CARDS (line icons)
   ============================================================ */
.process-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:600px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .process-grid{ grid-template-columns:repeat(3,1fr); } }
.card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem 1.5rem; background:var(--paper); transition:border-color var(--t-base), box-shadow var(--t-base); display:flex; flex-direction:column; }
.card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-2); }
.process-icon{ width:42px; height:42px; border-radius:var(--radius-sm); background:var(--accent-tint); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.process-icon svg{ width:22px; height:22px; stroke:var(--accent-strong); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.card-title{ font-size:1.08rem; font-weight:600; letter-spacing:-0.01em; }
.card-text{ margin-top:.55rem; font-size:.93rem; color:var(--ink-500); flex:1; }
.card-link{ margin-top:1.3rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.9rem; font-weight:600; color:var(--accent); }
.card-link::after{ content:'→'; transition:transform var(--t-fast); }
.card-link:hover{ color:var(--accent-strong); }
.card-link:hover::after{ transform:translateX(3px); }

/* ============================================================
   BUILDER (arma tu operación → transforma)
   ============================================================ */
.builder{ max-width:60rem; margin-inline:auto; }
.builder__stage{ display:grid; gap:1.25rem; }
.builder__stage[hidden], .builder__action[hidden]{ display:none; }
@media (min-width:760px){ .builder__stage{ grid-template-columns:1fr 1fr; } }
.builder__hint{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-bottom:.9rem; }
.builder__palette{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:1.4rem; }
.tool-list{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; }
.tool{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .85rem; border:1px solid var(--line-strong); border-radius:999px; background:var(--paper); font-size:.9rem; font-weight:500; color:var(--ink-700); cursor:grab; transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast), opacity var(--t-fast); }
.tool svg{ width:16px; height:16px; stroke:var(--accent-strong); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover{ border-color:var(--accent); background:var(--accent-tint); }
.tool:active{ cursor:grabbing; transform:scale(.96); }
.tool:disabled, .tool.is-used{ opacity:.35; pointer-events:none; }
.builder__drop{ position:relative; border:1.5px dashed var(--line-strong); border-radius:var(--radius); background:var(--paper-2); padding:1.4rem; min-height:9.5rem; transition:border-color var(--t-fast), background var(--t-fast); }
.builder__drop.is-over{ border-color:var(--accent); background:var(--accent-tint); }
.builder__drop-empty{ font-size:.92rem; color:var(--ink-400); max-width:22rem; }
.drop-list{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.6rem; }
.drop-item{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .55rem .55rem .85rem; border:1px solid var(--accent); border-radius:999px; background:var(--paper); font-size:.9rem; font-weight:500; color:var(--ink-900); cursor:pointer; animation:fdFadeUp .3s var(--ease); }
.drop-item svg{ width:16px; height:16px; stroke:var(--accent-strong); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.drop-item__x{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--paper-3); color:var(--ink-500); font-size:.85rem; line-height:1; }
.drop-item:hover .drop-item__x{ background:var(--accent); color:#fff; }
.builder__action{ text-align:center; margin-top:1.5rem; }
@keyframes fdFadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* workflow result — animated canvas demo */
.builder__result{ margin-top:.5rem; }
.wfx{ position:relative; margin:1rem 0 0; border:1px solid var(--line); border-radius:var(--radius-lg); background:radial-gradient(120% 120% at 50% 0%, var(--paper) 0%, var(--paper-2) 100%); box-shadow:var(--shadow-2); overflow:hidden; opacity:0; transform:translateY(10px); }
.builder__result.is-playing .wfx{ animation:wfIn .55s var(--ease) forwards; }
.wfx__canvas{ display:block; width:100%; height:380px; }
@media (max-width:600px){ .wfx__canvas{ height:430px; } }
.wfx__cap{ position:absolute; left:1rem; right:1rem; bottom:.8rem; text-align:center; font-size:.78rem; letter-spacing:.02em; color:var(--ink-400); pointer-events:none; }
.wfx__done{ text-align:center; margin-top:1.8rem; opacity:0; transform:translateY(8px); }
.builder__result.is-playing .wfx__done{ animation:wfIn .5s var(--ease) .35s forwards; }
.wfx__done-text{ font-size:1rem; color:var(--ink-700); margin-bottom:1.1rem; }
.wfx__done .btn{ box-shadow:var(--shadow-2); }
.wfx__reset{ display:block; margin:1rem auto 0; font-size:.85rem; color:var(--ink-500); text-decoration:underline; text-underline-offset:3px; }
.wfx__reset:hover{ color:var(--ink-900); }
@keyframes wfIn{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .wfx, .wfx__done{ opacity:1 !important; transform:none !important; animation:none !important; }
  .drop-item{ animation:none; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ max-width:46rem; margin-inline:auto; }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list summary{ list-style:none; cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0; position:relative; font-size:1.05rem; font-weight:600; color:var(--ink-900); }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:'+'; position:absolute; right:.3rem; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; color:var(--accent); transition:transform var(--t-fast); }
.faq-list details[open] summary::after{ content:'–'; }
.faq-list details p{ padding:0 2rem 1.4rem 0; color:var(--ink-500); font-size:.98rem; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-section{ padding-block:clamp(4rem,8vw,6.5rem); background:var(--ink-900); color:#fff; }
.cta-inner{ max-width:44rem; margin-inline:auto; text-align:center; }
.cta-title{ font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:650; line-height:1.15; letter-spacing:-0.02em; }
.cta-desc{ margin-top:1.2rem; font-size:1.1rem; color:#C3CAD3; }
.cta-section .btn-primary{ margin-top:2rem; background:#fff; color:var(--ink-900); }
.cta-section .btn-primary:hover{ background:var(--accent-tint); }
.cta-micro{ margin-top:1.2rem; font-size:.88rem; color:#9AA3AE; }

/* ============================================================
   CONTACT
   ============================================================ */
.contacto-grid{ display:grid; gap:2.5rem; }
@media (min-width:900px){ .contacto-grid{ grid-template-columns:.85fr 1.15fr; gap:3.5rem; } }
.contacto-info{ display:grid; gap:1.6rem; align-content:start; }
.contacto-item{ display:flex; gap:1rem; align-items:flex-start; }
.contacto-icon{ width:40px; height:40px; border-radius:var(--radius-sm); background:var(--accent-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contacto-icon svg{ width:20px; height:20px; stroke:var(--accent-strong); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.contacto-item strong{ display:block; font-size:.95rem; font-weight:600; color:var(--ink-900); }
.contacto-item a, .contacto-item span{ font-size:.92rem; color:var(--ink-500); }
.contacto-item a:hover{ color:var(--accent); }

.contacto-form{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; background:var(--paper); box-shadow:var(--shadow-2); }
.form-group{ margin-bottom:1.1rem; }
.form-group label{ display:block; font-size:.88rem; font-weight:600; color:var(--ink-700); margin-bottom:.45rem; }
.required-mark{ color:var(--accent); }
.contacto-form input, .contacto-form textarea{
  width:100%; padding:.72rem .85rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font:inherit; font-size:.95rem; color:var(--ink-900); background:var(--paper); transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.contacto-form input::placeholder, .contacto-form textarea::placeholder{ color:var(--ink-400); }
.contacto-form input:focus, .contacto-form textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.contacto-form input[aria-invalid="true"], .contacto-form textarea[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(180,35,24,.1); }
.field-error{ display:block; margin-top:.35rem; font-size:.82rem; color:var(--danger); min-height:0; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ margin-top:1rem; font-size:.84rem; color:var(--ink-400); text-align:center; }
.form-status{ margin-top:1rem; padding:.85rem 1rem; border-radius:var(--radius-sm); font-size:.92rem; display:none; }
.form-status.is-success{ display:block; background:rgba(30,142,90,.1); color:#15623e; border:1px solid rgba(30,142,90,.3); }
.form-status.is-error{ display:block; background:rgba(180,35,24,.08); color:#8a1b13; border:1px solid rgba(180,35,24,.25); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); background:var(--paper-2); padding-block:2.5rem; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; }
.footer-copyright{ font-size:.85rem; color:var(--ink-500); }
.footer-love{ font-size:.85rem; color:var(--ink-500); }
.footer-love .accent{ color:var(--accent); font-weight:600; }

/* ============================================================
   REVEAL MOTION (one-shot, triggered, settles)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
/* Hero is above the fold: paint it immediately so the LCP (h1) isn't gated on
   deferred JS. It stays fully opaque and only does a CSS-only slide (no opacity
   fade), so LCP registers at first paint. */
.hero .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  .hero .reveal{ animation:heroRise .6s var(--ease) both; }
}
@keyframes heroRise{ from{ transform:translateY(12px); } to{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media (max-width:859px){
  .menu-toggle{ display:flex; }
  .primary-nav{
    /* fixed, but the header's backdrop-filter is its containing block,
       so use an explicit height instead of inset bottom:0 */
    position:fixed; top:var(--header-h); left:0; right:0;
    height:calc(100dvh - var(--header-h)); z-index:90;
    background:var(--paper); border-top:1px solid var(--line);
    transform:translateX(100%); transition:transform var(--t-base);
    padding:1.5rem var(--pad); overflow-y:auto;
  }
  .primary-nav.open{ transform:none; }
  .primary-nav .nav-list{ flex-direction:column; align-items:stretch; gap:.25rem; }
  .primary-nav a{ padding:.85rem .5rem; font-size:1.05rem; border-bottom:1px solid var(--line); border-radius:0; }
  .primary-nav a.nav-cta{ margin-top:1rem; margin-left:0; border-radius:var(--radius-sm); justify-content:center; border-bottom:none; }
  body.nav-open{ overflow:hidden; }
}
@media (min-width:860px){ .menu-toggle{ display:none; } }