/* =============================================================
   CEDRAVA CORPORATIVO — styles.css
   Archetype: Cinematic Editorial — full-bleed hero video, generous
   negative space, restrained chrome. Azul Medianoche as the stage,
   Cobre Antiguo + Verde Pizarra as quiet accents, italic serif
   captions for an editorial voice. Signature effect: a cursor-
   reactive glow in the hero (same technique as Predictivo, re-tuned
   to this palette) instead of an animated background wash — calmer,
   more deliberate, closer to the ICELEND/KARELIA reference than to
   a SaaS dashboard.
   =============================================================
   1. Tokens
   2. Reset & base
   3. Utilities
   4. Typography
   5. Atmosphere (aurora, grain, glow)
   6. Components (nav, btn, glass, form, accordion, badge)
   7. Sections (hero, diferenciadores, anexos, proceso, testimonios, CTA, footer)
   8. Cookie banner
   9. Responsive
   10. Motion toggle gating
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root {
  --bg:            #1B2430; /* Azul Medianoche — dominant stage */
  --bg-rgb:        27, 36, 48;
  --bg-deep:       #11161D; /* deepest layer — footer, final CTA */
  --bg-deep-rgb:   17, 22, 29;
  --bg-elevated:   #232F3D; /* card surface lifted off the stage */
  --bg-elevated-2: #2A3847;

  --ink:           #EDEFF1; /* Hueso Frío — primary text on dark */
  --ink-rgb:       237, 239, 241;
  --ink-soft:      rgba(237, 239, 241, .78);
  --ink-dim:       rgba(237, 239, 241, .52);

  --stone:         #B1B2B5; /* Gris Piedra — secondary text */
  --stone-rgb:     177, 178, 181;

  --secondary:     #3E6158; /* Verde Pizarra, brightened for dark-bg legibility */
  --secondary-rgb: 62, 97, 88;

  --accent:        #C99569; /* Cobre Antiguo, lifted for dark-bg glow */
  --accent-rgb:    201, 149, 105;
  --accent-deep:   #9C7048;
  --accent-deep-rgb: 156, 112, 72;

  --glow-cool-rgb: 62, 92, 122; /* cool lift of Azul Medianoche — ambient corner glow */

  --line:          rgba(237, 239, 241, .12);
  --line-strong:   rgba(237, 239, 241, .22);
  --glass-fill:    rgba(237, 239, 241, .045);
  --glass-fill-hi: rgba(237, 239, 241, .085);
  --glass-border:  rgba(237, 239, 241, .14);

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h: 92px;
  --container: 1280px;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --radius: 3px;
  --radius-sm: 2px;
  --radius-pill: 2px;
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  color-scheme: dark;
}
.is-reduced-motion html { scroll-behavior: auto; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  position: relative;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}
h3, h4 { letter-spacing: -0.01em; font-weight: 600; }
::selection { background: var(--accent); color: var(--bg-deep); }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .65rem 1.1rem; background: var(--ink); color: var(--bg);
  font-weight: 600; border-radius: var(--radius-sm);
  transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------
   3. Utilities
   ------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hairline { height: 1px; background: var(--line); border: 0; }
.hairline-strong { height: 1px; background: var(--line-strong); border: 0; }
.section { position: relative; padding-block: clamp(5rem, 10vw, 9rem); }
.section-tight { padding-block: clamp(3.2rem, 6vw, 5.5rem); }

/* Ambient corner glow for text-only sections — anywhere without its
   own photo/video or cursor effect. Two fixed, low-opacity radial
   glows (cool navy-lift + warm copper) matching the site's real
   photography grading; kept faint enough to never fight legibility.
   .cta-final already has its own atmosphere (aurora + grain), so it
   opts out here to avoid stacking two glow effects. */
.section:not(.cta-final)::before, .section:not(.cta-final)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(100px); opacity: .28;
}
.section:not(.cta-final)::before {
  width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
  left: -10%; top: -6%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--glow-cool-rgb), .6), transparent 70%);
}
.section:not(.cta-final)::after {
  width: 36vw; height: 36vw; max-width: 500px; max-height: 500px;
  right: -8%; bottom: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .55), transparent 70%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .65em;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(.92rem, 1.1vw, 1.02rem); letter-spacing: .01em;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 14px; height: 1px;
  background: var(--accent); flex: none;
}
.mute { color: var(--stone); }
.center { text-align: center; }
.va-cloak { opacity: 0; }

/* -------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------- */
.display-1 { font-size: clamp(1.9rem, 3vw, 2.75rem); }
.display-2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 600; color: var(--ink); }
h4 { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
p.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--stone); max-width: 58ch; line-height: 1.55; }
.grad-text { color: var(--accent); }
a.text-link {
  position: relative; font-weight: 600; color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
  padding-bottom: 2px; transition: background-size .3s var(--ease-out), color .3s var(--ease-out);
}
a.text-link:hover { background-size: 0% 1px; color: var(--accent); }

/* -------------------------------------------------------------
   5. Atmosphere — quiet static wash (page headers, CTA) + the
   hero's cursor-reactive glow (signature effect, homepage only)
   ------------------------------------------------------------- */
.aurora {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: .38;
}
.aurora::before {
  width: 56vw; height: 56vw; max-width: 820px; max-height: 820px;
  left: -14%; top: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .5), transparent 68%);
}
.aurora::after {
  width: 48vw; height: 48vw; max-width: 680px; max-height: 680px;
  right: -12%; bottom: -24%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--secondary-rgb), .5), transparent 70%);
}

/* Hero cursor-reactive glow — same lerp technique as Predictivo's
   .hero-gradient (main.js:initMouseGradient), re-tuned to CEDRAVA's
   Cobre Antiguo. No CSS transition here on purpose: the JS rAF loop
   already smooths --mx/--my every frame, and a CSS transition on
   top of that double-smooths the motion into lag.
   Deliberately restrained: one small, low-opacity light — not a
   broad colored wash — so it reads as a subtle cinematic highlight
   on the footage rather than a decorative "AI gradient mesh". */
.hero-gradient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 30%), rgba(var(--accent-rgb), .16) 0%, transparent 70%);
  filter: blur(30px);
}

.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(var(--bg-deep-rgb), .5) 100%);
}

/* -------------------------------------------------------------
   6. Components
   ------------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1rem 1.9rem; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
  white-space: nowrap; position: relative;
}
.btn-primary { background: var(--accent); color: #1A1410; }
.btn-primary:hover { background: #DBA97D; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-line {
  padding: 0; border: 0; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: .5em;
  border-bottom: 1px solid var(--line-strong);
}
.btn-line:hover { border-color: var(--accent); color: var(--accent); }
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn-sm { padding: .65rem 1.25rem; font-size: .85rem; }

/* Flat surfaces — no backdrop-filter anywhere in this file. Solid
   elevated fill + a hairline border reads as considered/editorial;
   frosted glass reads as generic AI-template chrome. Kept the class
   name "glass" so no markup changes were needed when this shifted. */
.glass {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.glass-hover { transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out); }
.glass-hover:hover { background: var(--bg-elevated-2); border-color: var(--line-strong); }

/* Tags */
.tag {
  display: inline-flex; align-items: center; padding: .4rem .85rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: var(--radius-sm);
  background: transparent;
}
.tag-price { border-color: rgba(var(--accent-rgb), .45); color: var(--accent); }
.tag-quote { border-color: var(--line-strong); color: var(--stone); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }
.reveal[data-split] { opacity: 1; transform: none; filter: none; }

/* Nav */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  min-height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
}
/* Fixed nav takes no space in flow, so every page compensates with this
   padding-top on <main> — and .hero / .page-hero cancel it right back out
   with their own negative margin-top, so their photo still reaches y:0
   behind the (transparent) nav. Deterministic box-model math instead of
   relying on margin-collapse through multiple ancestors. */
/* No global main{padding-top} here on purpose — .hero and .page-hero
   are meant to start at the true top of the page with nothing to
   cancel out (their own padding-top below just clears space for the
   TEXT under the overlaid nav, it doesn't move the section itself).
   Pages without their own hero photo add that clearance on their
   .page-header instead (see below). */
.site-nav.is-solid {
  background: var(--bg-deep);
  border-color: var(--line);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1.5rem; padding-block: .9rem; }
.brand-mark { display: flex; align-items: center; height: 34px; }
.brand-mark img { height: 100%; width: auto; }
.nav-links { display: none; align-items: center; gap: clamp(1.4rem, 2vw, 2.3rem); }
.nav-links a {
  position: relative; font-size: .92rem; font-weight: 500; padding-block: .4rem; color: var(--ink-soft);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right .35s var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-cta { display: none; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; align-items: center;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 490;
  background: rgba(var(--bg-deep-rgb), .98);
  /* Closed: fully clear the viewport above y:0 — moving up by only this
     element's own height (translateY(-100%)) merely brings its bottom
     edge back to y:nav-h, which still overlaps the (transparent) nav
     and bled through visibly. The extra var(--nav-h) guarantees it
     clears past the top entirely regardless of content height. */
  transform: translateY(calc(-100% - var(--nav-h)));
  transition: transform .45s var(--ease-out);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu .container { padding-block: 2rem; display: flex; flex-direction: column; gap: 0; }
.mobile-menu a {
  display: block; padding: 1.2rem 0; font-size: 1.5rem; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .mobile-cta { margin-top: 1.5rem; }

/* Forms */
.form-grid { display: grid; gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .78rem; color: var(--stone); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: .95rem 1.1rem; font: inherit; font-size: .95rem;
  background: rgba(237,239,241,.04); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--ink); transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s var(--ease-out);
}
select { color-scheme: dark; }
textarea { resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: var(--ink-dim); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); outline: none;
  background: rgba(237,239,241,.06);
}
.checkbox-row { display: flex; align-items: flex-start; gap: .65rem; font-size: .85rem; color: var(--stone); }
.checkbox-row input { margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cta-form-spinner {
  display: none; width: 15px; height: 15px; border: 2px solid rgba(26,20,16,.35);
  border-top-color: #1A1410; border-radius: 50%;
}
.is-sending .cta-form-label { opacity: .5; }
.is-sending .cta-form-spinner { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-success, .form-error {
  display: none; padding: 1.2rem 1.4rem; border: 1px solid var(--line-strong);
  margin-top: 1rem; font-size: .92rem; border-radius: var(--radius-sm);
}
.form-success { border-color: rgba(var(--secondary-rgb),.7); background: rgba(var(--secondary-rgb), .12); }
.form-error { border-color: #a3392c; background: rgba(163,57,44,.12); }
.form-success[aria-hidden="false"], .form-error[aria-hidden="false"] { display: block; }
.form-error a { font-weight: 600; text-decoration: underline; }

/* Accordion (FAQ) */
.faq-item {
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: var(--glass-fill); margin-bottom: .75rem; overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.25rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 600; font-size: 1rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] { border-color: rgba(var(--accent-rgb), .4); }
.faq-item .faq-icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq-item .faq-icon::before, .faq-item .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent);
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.faq-item .faq-icon::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq-item .faq-icon::after { width: 2px; height: 14px; transform: translate(-50%,-50%); }
.faq-item[open] .faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-item .faq-body { padding: 0 1.4rem 1.4rem; color: var(--stone); max-width: 68ch; }
.faq-item .faq-body p + p { margin-top: .8rem; }

/* -------------------------------------------------------------
   7. Sections
   ------------------------------------------------------------- */

/* Hero — the video/image is the protagonist: it runs from the very
   top of the page, behind the (transparent) sticky nav, instead of
   starting below a separate solid header bar. */
.hero {
  position: relative; overflow: hidden;
  min-height: 92svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 3.5rem)); padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--bg);
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--bg); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: .94; }
/* Art-directed scrim: strong on the left where the headline/stats sit
   (so text stays legible over any part of the photo), fading out to
   the right so the real photo detail reads clearly there — plus a
   light top/bottom fade so the nav and the next section stay clean. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(var(--bg-rgb),.22) 0%, rgba(var(--bg-rgb),.48) 22%, rgba(var(--bg-rgb),.28) 42%, rgba(var(--bg-rgb),.08) 62%, rgba(var(--bg-rgb),.26) 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.1) 0%, transparent 26%, transparent 68%, var(--bg) 100%);
}
.hero-content { position: relative; z-index: 2; width: 100%; max-width: 520px; margin-inline: 0; }
/* Text-shadow carries legibility now instead of a heavy scrim, so the
   photo itself (wood-slat backlight, top-left) stays visible and warm
   like the reference — not washed out by a dark overlay. */
.hero-title { margin-block: 0; max-width: 22ch; line-height: 1.28; text-shadow: 0 2px 28px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.6); }
.hero-stats .stat-value, .hero-stats .stat-label { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero-title em, .hero-title .grad-text { font-style: normal; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero-foot { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.8rem; }

/* Hero stats — a compact trio with thin vertical dividers between them */
.hero-stats {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.6rem 1.8rem;
  margin-inline: var(--gutter); margin-top: clamp(2rem, 5vw, 2.8rem);
}
.hero-stats .stat-item:not(:first-child) { padding-left: 1.8rem; border-left: 1px solid var(--line-strong); }
.stat-item { display: flex; flex-direction: column; justify-content: center; gap: .3rem; }
.stat-item .stat-value { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.stat-item .stat-label { font-size: .72rem; color: var(--stone); text-transform: uppercase; letter-spacing: .06em; }

/* Hero section index — quiet "01 / 04" position marker, desktop only */
.hero-index { display: none; }
.hero-index-line { flex: 1; width: 1px; background: var(--line-strong); }

/* Page header (interior pages without a dedicated photo) */
.page-header { position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 3.5rem)); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--stone); margin-bottom: 1.4rem; }
.breadcrumb a:hover { color: var(--accent); }

/* Page hero — full-width photo banner with the title overlaid directly
   on the image (same principle as the homepage hero: real photo, text
   readable over it via a scrim), for interior pages that DO have a
   dedicated photo. Bottom-anchored text keeps the top of the photo
   uncovered so the composition still reads. */
.page-hero {
  position: relative; overflow: hidden;
  min-height: 64svh; display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 3rem));
  padding-bottom: clamp(2.6rem, 5vw, 3.6rem);
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--bg); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.1) 0%, rgba(var(--bg-rgb),.38) 45%, rgba(var(--bg-rgb),.88) 82%, var(--bg) 100%);
}
.page-hero-content { position: relative; z-index: 2; width: 100%; }
.page-hero-content .breadcrumb { color: var(--ink-dim); }
.page-hero-content .breadcrumb a:hover { color: var(--accent); }

/* Diferenciadores — no card/frame, just a hairline rule per item
   (same frameless convention as .anexo-row / .clause below). */
.dif-grid { display: grid; gap: 0 2rem; grid-template-columns: 1fr; }
.dif-item { padding-block: clamp(1.8rem, 2.6vw, 2.4rem); border-top: 1px solid var(--line); }
.dif-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .12); color: var(--accent); margin-bottom: 1.4rem;
}
.dif-icon svg { width: 22px; height: 22px; }
.dif-item h3 { margin-bottom: .7rem; }
.dif-item p { color: var(--stone); font-size: .95rem; }

/* Servicios (anexos) — bold feature rows */
.anexo-row {
  position: relative; display: grid; grid-template-columns: 56px 1fr;
  gap: 1.2rem 1.6rem; align-items: start;
  padding-block: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.anexo-row:last-child { border-bottom: 1px solid var(--line); }
.anexo-row h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.anexo-row ul { display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; color: var(--stone); margin-top: 1rem; }
.anexo-row ul li { display: flex; gap: .6rem; align-items: baseline; }
.anexo-row ul li::before { content: "—"; color: var(--accent); flex: none; }
.anexo-row .anexo-foot { margin-top: 1.4rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.anexo-card {
  position: relative; padding-block: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.anexo-roman { font-size: 2.4rem; font-weight: 500; color: var(--accent); line-height: 1; }
.anexo-card ul { display: flex; flex-direction: column; gap: .5rem; font-size: .88rem; color: var(--stone); }
.anexo-card ul li { display: flex; gap: .55rem; align-items: baseline; }
.anexo-card ul li::before { content: "—"; color: var(--accent); flex: none; }
.anexo-card .anexo-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }

/* Service detail — includes / pricing panel */
.service-includes { display: grid; gap: .9rem; }
.service-includes li { display: flex; gap: .8rem; align-items: flex-start; font-size: .97rem; color: var(--ink-soft); }
.service-includes li .check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .16); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.service-includes li .check svg { width: 12px; height: 12px; }
.price-panel { padding: clamp(1.8rem, 2.4vw, 2.2rem); position: sticky; top: calc(var(--nav-h) + 24px); }
.price-panel .price-value { font-size: 2.1rem; font-weight: 500; margin-block: .4rem .15rem; color: var(--ink); }
.price-panel .price-note { font-size: .84rem; color: var(--stone); margin-bottom: 1.3rem; }
.price-panel .btn { width: 100%; }

/* Risk gate */
.risk-gate { border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 1.5rem 1.6rem; margin-top: 1.4rem; background: rgba(237,239,241,.03); }
.risk-gate .risk-question { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-weight: 600; font-size: .92rem; color: var(--ink); }
.risk-toggle-group { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.risk-toggle-group button { padding: .5rem 1.1rem; font-size: .84rem; font-weight: 600; color: var(--stone); }
.risk-toggle-group button[aria-pressed="true"] { background: var(--accent); color: #1A1410; }
.risk-warning { display: none; margin-top: 1.1rem; padding: 1.1rem 1.2rem; border-left: 3px solid #d9695a; background: rgba(163,57,44,.14); border-radius: var(--radius-sm); font-size: .88rem; color: var(--ink-soft); }
.risk-warning.is-visible { display: block; }
.risk-warning p + p { margin-top: .6rem; }

/* Proceso — plain numbered list, quiet connecting line */
.process-list { max-width: 780px; position: relative; }
.process-list::before {
  content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 1px;
  background: var(--line-strong);
}
.clause { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.6rem; padding-block: 1.8rem; }
.clause-num, .anexo-num {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--bg-deep); border: 1px solid var(--line-strong);
  font-size: 1.15rem; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums;
}
.clause h3 { margin-bottom: .5rem; }

/* Media placeholder — full-bleed premium treatment */
.media-frame {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--glass-border); aspect-ratio: var(--ph-ratio, 16/9);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); pointer-events: none; }

/* Testimonials — no card, no frame. One quote floats at a time;
   it crossfades into the next on a slow loop, with a slight
   continuous drift while active. Signature effect, not a carousel. */
.testi-float {
  position: relative; max-width: 760px;
  min-height: clamp(200px, 28vw, 260px);
}
.testi-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  pointer-events: none;
}
.testi-slide.is-active {
  position: relative;
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
  animation: testiDrift 9s ease-in-out infinite;
}
@keyframes testiDrift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
.testi-quote-float {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.45;
  color: var(--ink); font-weight: 400; max-width: 40ch;
}
.testi-quote-float::before { content: "\201C"; color: var(--accent); margin-right: .08em; }
.testi-slide figcaption { display: flex; align-items: baseline; gap: .7rem; margin-top: 1.6rem; }
.testi-name { font-weight: 600; font-size: .88rem; color: var(--ink); }
.testi-role { font-size: .8rem; color: var(--stone); }
.is-reduced-motion .testi-slide { transition: opacity .3s var(--ease-out); }
.is-reduced-motion .testi-slide.is-active { animation: none; }

/* CTA final */
.cta-final { position: relative; overflow: hidden; text-align: center; background: var(--bg-deep); }
.cta-final h2 { max-width: 20ch; margin-inline: auto; }
.cta-final .hero-actions { justify-content: center; }

/* Footer */
.site-footer { background: var(--bg-deep); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.footer-brand .brand-mark { height: 30px; margin-bottom: 1.1rem; }
.footer-brand p { color: var(--ink-dim); font-size: .88rem; max-width: 36ch; }
.footer-col h4 { color: var(--ink); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .7rem; }
.footer-col a { font-size: .9rem; color: var(--stone); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: .8rem; color: var(--ink-dim);
}
.footer-bottom a { color: var(--stone); }
.footer-bottom a:hover { color: var(--accent); }

.motion-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; padding: .55rem 1rem; font-weight: 500;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--stone);
}
.motion-toggle[aria-pressed="true"] { background: var(--accent); color: #1A1410; border-color: var(--accent); }
.motion-toggle-icon { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .65; flex: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon { opacity: 1; }

/* Legal pages */
.legal-content { max-width: 76ch; }
.legal-content h2 { font-size: 1.35rem; margin-top: 2.6rem; margin-bottom: .9rem; color: var(--ink); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; margin-top: 1.6rem; margin-bottom: .6rem; }
.legal-content p { margin-bottom: 1rem; color: var(--stone); }
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content ul, .legal-content ol { margin-bottom: 1rem; padding-left: 1.3rem; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin-bottom: .5rem; color: var(--stone); }
.legal-content li::marker { color: var(--accent); }
.legal-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.legal-content .legal-updated { font-size: .85rem; color: var(--ink-dim); margin-bottom: 2rem; }
.legal-table-wrap { overflow-x: auto; margin-bottom: 1.4rem; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 480px; }
.legal-table th, .legal-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg-elevated); font-weight: 600; color: var(--ink); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-note { border-left: 3px solid var(--secondary); background: rgba(var(--secondary-rgb), .14); padding: 1rem 1.2rem; margin-bottom: 1.4rem; font-size: .9rem; border-radius: var(--radius-sm); }
.legal-note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------
   8. Cookie banner + preferences panel
   ------------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 800;
  max-width: 640px; margin-inline: auto;
  padding: 1.6rem 1.7rem;
  transform: translateY(140%); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner p { font-size: .87rem; color: var(--stone); margin-bottom: 1.2rem; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.cookie-modal-backdrop {
  position: fixed; inset: 0; background: rgba(6,8,11,.65); z-index: 900;
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.cookie-modal-backdrop.is-open { display: flex; }
.cookie-modal {
  background: var(--bg-elevated); max-width: 580px; width: 100%; max-height: 86vh; overflow-y: auto;
  border: 1px solid var(--glass-border); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.4rem);
}
.cookie-modal h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.cookie-modal > p { color: var(--stone); font-size: .9rem; margin-bottom: 1.4rem; }
.cookie-cat { padding-block: 1.2rem; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.cookie-cat:last-of-type { border-bottom: 1px solid var(--line); }
.cookie-cat h3 { font-size: .95rem; margin-bottom: .35rem; }
.cookie-cat p { font-size: .82rem; color: var(--stone); }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--line-strong); border-radius: 999px; transition: background-color .25s var(--ease-out); }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .25s var(--ease-out); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track + .thumb { transform: translateX(18px); background: #1A1410; }
.switch input:disabled + .track { background: var(--line-strong); opacity: .6; }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* -------------------------------------------------------------
   9. View transitions
   ------------------------------------------------------------- */
@keyframes fadeOutUp { to { opacity: 0; transform: translateY(-10px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .5s var(--ease-out) both fadeOutUp; }
::view-transition-new(root) { animation: .5s var(--ease-out) both fadeInUp; }

/* -------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------- */
@media (min-width: 540px) {
  .cookie-banner { left: auto; right: 1.5rem; bottom: 1.5rem; }
}

@media (min-width: 720px) {
  .dif-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .dif-grid { grid-template-columns: repeat(4, 1fr); }
  .service-detail-grid { display: grid; grid-template-columns: 1.5fr .85fr; gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }

  /* Hero: switch the stats/index from stacked-flow (mobile) to
     edge-anchored placement (reference layout) — top-left headline,
     bottom-left stats, right-edge index; no floating card. */
  .hero-stats { position: absolute; left: var(--gutter); bottom: clamp(2.5rem, 5vw, 3.2rem); margin: 0; max-width: 480px; }
  .hero-index {
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
    position: absolute; right: clamp(1.5rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%);
    height: clamp(120px, 16vw, 180px); z-index: 2;
  }
  .hero-index a { font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .hero-index a:first-child { color: var(--ink); }
  .hero-index a:last-child { color: var(--ink-dim); }
  .hero-index a:hover { color: var(--accent); }
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--gutter); }
}

/* -------------------------------------------------------------
   11. Motion toggle — the ONLY mechanism that gates intrusive effects.
   This file has no OS-level reduced-motion media query anywhere.
   ------------------------------------------------------------- */
.is-reduced-motion .parallax-strong { transform: none !important; }
.is-reduced-motion .reveal { transition-duration: .2s !important; filter: none !important; }