/* ═══════════════════════════════════════════════════════════════
   UKKOO · hoja de estilos compartida (bundle único, cacheado entre páginas)
   ───────────────────────────────────────────────────────────────
   Filosofía: un solo CSS = una sola petición que el navegador cachea
   y reutiliza al cambiar de página (más rápido que varios archivos
   render-blocking en un sitio estático).

   ÍNDICE
     1. Tokens (:root · color, tipografía, escala fluida, espaciado)
     2. Base (reset, body, foco a11y)
     3. Componentes (botones, logo, nav, eyebrows, h2)
     4. Secciones home (hero, trust, pricing, process, faq, cta, footer)
     5. SUPERFICIES translúcidas (antes "liquid glass")
     6. Páginas internas (servicios, portafolio, nosotros, privacidad)
     7. Estados (modo borrador, placeholders, reveal)

   RENDIMIENTO: el efecto cristal usa relleno translúcido + borde
   luminoso + sombra interior. NO usa backdrop-filter salvo en la
   barra fija (.nav), único elemento que se superpone al contenido
   al hacer scroll. Antes había ~45 capas de blur en vivo que se
   recalculaban en cada repintado → causa del lag entre secciones.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Agua de Páramo palette ── */
  --laguna:       #0D2826;   /* Fondo Laguna  · profundo */
  --agua-honda:   #156B58;   /* Agua Honda    · primario */
  --glaciar:      #3EA58A;   /* Glaciar       · medio   */
  --espuma:       #AEDFCA;   /* Espuma        · suave   */
  --vapor:        #ECF3EE;   /* Vapor         · fondo   */

  --bg:           var(--vapor);
  --surface:      #FFFFFF;
  --fg:           var(--laguna);
  --muted:        #5A7370;                  /* derivado del laguna, desaturado */
  --border:       #D6E3DC;                  /* derivado del vapor/espuma */
  --primary:      var(--agua-honda);
  --primary-dark: var(--laguna);
  --accent:       var(--espuma);
  --accent-soft:  #F4F8F5;                  /* vapor ↑ */
  --accent-mid:   var(--glaciar);
  --success:      var(--glaciar);
  --error:        oklch(60% 0.18 25);

  --gutter:    clamp(20px, 6vw, 80px);
  --maxw:      1440px;
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --font-display: "Geist", ui-sans-serif, system-ui;
  --font-body:    "Geist", ui-sans-serif, system-ui;
  --font-accent:  "Spectral", Georgia, serif;
  --font-mono:    "Geist Mono", monospace;

  /* ── Escala proporcional fluida ──
     Todo el sitio escala con el viewport (rem + vw), no en px fijos.
     Cada token crece/decrece de forma proporcional entre un mín. y un máx. */
  --fs-h1:     clamp(2.125rem, 1.35rem + 2.7vw, 4.5rem);    /* 34 → 72px */
  --fs-h2:     clamp(1.75rem,  1.25rem + 1.7vw, 2.875rem);  /* 28 → 46px */
  --fs-h3:     clamp(1.25rem,  1.05rem + 0.7vw, 1.625rem);  /* 20 → 26px */
  --fs-sub:    clamp(1rem,     0.9rem  + 0.45vw, 1.25rem);  /* 16 → 20px */
  --fs-body:   clamp(0.95rem,  0.88rem + 0.28vw, 1.0625rem);/* 15 → 17px */
  --fs-small:  clamp(0.8rem,   0.76rem + 0.18vw, 0.9375rem);/* 13 → 15px */
  --fs-eyebrow:clamp(0.65rem,  0.62rem + 0.12vw, 0.75rem);  /* 10 → 12px */

  /* Ritmo vertical de secciones y bloques */
  --space-section: clamp(2.5rem, 1.3rem + 4vw, 5.25rem);   /* 40 → 84px */
  --space-block:   clamp(1.5rem,  1.05rem + 1.6vw, 2.75rem);/* 24 → 44px */
}

*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

/* [hidden] siempre gana, incluso sobre reglas con display propio (p. ej. .demo-card). */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Anclas: el destino no queda oculto bajo el nav fijo (scroll nativo / teclado) */
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Sin retardo de 300ms ni doble-tap zoom en controles interactivos (móvil fluido) */
a, button, .btn, .nav-link, .nav-mobile-btn, .faq-q, .toggle-btn, .wa-float,
summary, label, input, select, .reviews-dot, .review-arrow, .compare-head {
  touch-action: manipulation;
}
body { font-size: var(--fs-body); }

::selection { background: var(--accent); color: var(--primary-dark); }

/* ─────────── FOCUS RING (a11y) ─────────── */
:where(a, button, input, textarea, select, summary, [tabindex]):focus { outline: none; }
:where(a, button, .btn, .nav-link, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.nav-link:focus-visible { border-radius: 999px; }
.wa-float:focus-visible { outline-offset: 5px; }

/* ─────────── BUTTONS ─────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 500; font-size: 14px; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:active { transform: scale(0.98); }

.btn-primary  { background: var(--primary);  color: var(--surface);       border-color: var(--primary);  box-shadow: 0 4px 12px -4px rgb(21 107 88 / 0.4); }
.btn-primary:hover  { background: var(--accent-mid); border-color: var(--accent-mid); }

.btn-ghost    { background: transparent;      color: var(--primary);       border-color: var(--border); }
.btn-ghost:hover    { border-color: var(--primary); background: var(--accent-soft); }

.btn-on-dark  { background: var(--accent);    color: var(--primary-dark);  border-color: var(--accent); }
.btn-on-dark:hover  { background: var(--surface); border-color: var(--surface); }

.btn-ghost-dark { background: transparent; color: var(--surface); border-color: oklch(100% 0 0 / 0.2); }
.btn-ghost-dark:hover { border-color: var(--surface); background: oklch(100% 0 0 / 0.05); }

.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─────────── LOGO ─────────── */
.logo {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.04em;
  color: var(--primary-dark); text-decoration: none; line-height: 1;
}
.logo .lt { display: inline-flex; align-items: center; }
/* Las dos "O" de UKKOO son el oso de anteojos, al mismo tamaño que tenían los círculos de referencia */
.logo .o-mark {
  display: inline-block;
  width: 0.76em; height: 0.76em;
  margin: 0 1px;
  color: var(--primary-dark);
  fill: currentColor;
  vertical-align: middle;
}

/* ─────────── NAV ─────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: oklch(100% 0 0 / 0.85);
  border-bottom: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* El nav es fijo y sale del flujo → reservamos su alto para que el
   contenido no quede oculto debajo. JS ajusta --nav-h al alto real. */
body { padding-top: var(--nav-h, 88px); }
/* Oculto al bajar; reaparece al subir (clase aplicada por JS) */
.nav.nav--hidden { transform: translateY(-100%); }
.nav-inner {
  display: flex; align-items: stretch; justify-content: space-between;
  height: 64px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}
.nav-logo  { display: flex; align-items: center; }
.nav-links { display: flex; align-items: stretch; gap: 0; }
.nav-link {
  display: flex; align-items: center;
  padding: 0 20px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border-left: 1px solid var(--border);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover { color: var(--primary); background: var(--bg); }
.nav-link.active { color: var(--primary); background: var(--bg); box-shadow: inset 0 -2px 0 var(--primary); }
.nav-link.cta { background: var(--primary); color: var(--surface); border-left: 1px solid var(--primary); }
.nav-link.cta:hover { background: var(--primary-dark); }

/* Mobile hamburger */
.nav-mobile-btn {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; align-items: center; justify-content: center;
  color: var(--fg); align-self: center; flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-mobile-btn:hover { border-color: var(--primary); color: var(--primary); }
.nav-mobile-btn svg { display: block; pointer-events: none; }

@media (max-width: 768px) {
  .nav-mobile-btn { display: flex; }
  .nav-links {
    display: none;
    position: fixed; top: 64px; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch;
    padding: 8px 0 16px;
    box-shadow: 0 8px 32px -8px oklch(0% 0 0 / 0.1);
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-link {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 15px 24px;
    height: auto; min-height: 52px;
    box-shadow: none !important;
  }
  .nav-link.cta {
    margin: 8px 16px 0;
    border-radius: 999px;
    border-top: none;
    justify-content: center;
  }
}

/* ─────────── H2 ─────────── */
.h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--primary-dark); max-width: 18em; margin: 0; text-wrap: balance;
}

/* ─────────── HERO ─────────── */
.hero-wrap { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 0; }
.hero {
  position: relative;
  background-color: var(--primary-dark);
  /* Fondo del hero: gradiente base listo para reemplazar por un
     <video> o GIF de fondo más adelante. */
  /* El resplandor inferior-derecho se hornea aquí como gradiente CSS
     (antes era una capa <svg> .hero-flourish con object-fit:cover +
     radialGradient interno, que en algunas GPUs Android pintaba
     basura/estática). Ahora se pinta en la propia capa del hero. */
  background-image:
    radial-gradient(58% 58% at 86% 92%,
      rgb(174 223 202 / 0.13) 0%,
      rgb(174 223 202 / 0) 70%
    ),
    linear-gradient(135deg,
      rgb(13 40 38 / 0.98) 0%,
      rgb(13 40 38 / 0.86) 50%,
      rgb(21 107 88 / 0.55) 100%
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--accent-soft);
  /* border-radius redondea el fondo y la sombra por sí mismo (los fondos CSS
     respetan el radio). NO usamos overflow:hidden: recortar una imagen ráster
     en una capa compositada redondeada que se repinta (animación del titular)
     corrompe la GPU de los Xiaomi/MIUI en Chrome. */
  border-radius: var(--radius-lg);
  min-height: clamp(420px, 64svh, 640px);
  padding: clamp(36px, 4.5vw, 72px) clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 3vw, 40px);
}
/* .hero::after retirado: era un brillo decorativo duplicado (ya existe el mismo
   resplandor horneado en el background-image del .hero). Sobresalía del borde y
   obligaba a usar overflow:hidden, lo que reintroducía el glitch de GPU en
   Xiaomi/Chrome. */
/* Capa decorativa retirada: provocaba corrupción de GPU en Android.
   El resplandor ahora vive en el background-image del .hero. */
.hero-flourish { display: none; }

/* — HERO DE INICIO : foto de fondo (paisaje de páramo) —
   La foto + el degradado de contraste se apilan en el background-image
   del propio .hero (una sola capa de pintura, sin capa compositada
   aparte) para no reintroducir el bug de corrupción GPU en Android.
   El degradado oscuro encima mantiene legible el texto blanco. */
.hero-wrap > .hero {
  background-image:
    linear-gradient(100deg,
      rgb(13 40 38 / 0.96) 0%,
      rgb(13 40 38 / 0.90) 40%,
      rgb(13 40 38 / 0.74) 66%,
      rgb(13 40 38 / 0.40) 100%
    ),
    url("../assets/hero-paramo.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.hero-body  {
  position: relative; z-index: 1; max-width: 840px;
  display: flex; flex-direction: column; gap: 24px;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.04; letter-spacing: -0.04em; font-weight: 500;
  color: var(--surface); margin: 0;
}
.hero-h1 em {
  font-style: normal; font-weight: 600;
  color: var(--accent);
  display: block; line-height: 1.04; padding-bottom: 0;
}

/* ─────────── TYPE-FILL · frases ancla (hero + CTAs) ───────────
   La frase nace en un acento tenue y se "teclea" llenándose de
   color letra por letra al entrar en pantalla.
   · Las letras se agrupan en .tf-word (white-space:nowrap) para que una
     palabra NUNCA se parta entre letras al envolver → sin saltos de renglón.
   · El cursor es de ancho CERO (la barra la pinta un ::before absoluto), así
     que no empuja el texto: la frase ocupa el mismo lugar rellena o no, y el
     tecleo no provoca reflow (se sentía como lag). */
.type-fill { white-space: normal; }
.type-fill .tf-word { white-space: nowrap; }
.type-fill .tf-ch {
  color: color-mix(in oklab, currentColor 30%, transparent);
  transition: color 0.18s ease;
}
.type-fill .tf-ch.on { color: currentColor; transition-duration: 0.1s; }
/* Caret de ancho 0 que viaja con el llenado, sin afectar la maquetación */
.type-fill .tf-caret {
  display: none;
  position: relative;
  width: 0;
  vertical-align: baseline;
}
.type-fill .tf-caret::before {
  content: "";
  position: absolute;
  /* El box del caret tiene altura 0 y su base se asienta sobre la línea
     base del texto, así que la barra debe crecer HACIA ARRIBA (top negativo)
     para quedar a la altura de la letra y no caer al renglón siguiente. */
  left: -0.015em; top: -0.78em;
  width: 0.06em; height: 0.84em;
  background: currentColor; border-radius: 1px;
}
.type-fill.is-typing .tf-caret { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .type-fill .tf-ch { color: currentColor; transition: none; }
  .type-fill .tf-caret { display: none !important; }
}
.hero-sub {
  font-size: var(--fs-sub); line-height: 1.5;
  color: rgb(236 243 238 / 0.72); max-width: 32em; text-wrap: pretty; margin: 0;
}
.hero-ctas { display: flex; gap: 16px; margin-top: clamp(8px, 1.5vw, 24px); flex-wrap: wrap; }

/* ─────────── TRUST ─────────── */
.trust-section { max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 2.4vw, 44px) var(--gutter) 8px; }

/* — Strip de cifras verificables · sueltas, sin tarjeta — */
.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 5vw, 64px);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.metric {
  padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  text-align: center; align-items: center;
  position: relative;
}
.metric-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--primary-dark);
  margin: 0;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.metric-sym {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 500;
  font-size: 0.5em;
  letter-spacing: -0.01em;
  color: var(--primary);
  opacity: 0.78;
}
.metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 880px) {
  .metrics-strip { grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 48px); }
}
@media (max-width: 520px) {
  .metrics-strip { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}

/* ─────────── PRICING ─────────── */
.pricing       { padding: 64px 0; }
.pricing-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.pricing-card  {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px);
}
.pricing-head  { text-align: left; margin-bottom: 48px; }
.pricing-lede  { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 520px; }

.pricing-toggle {
  display: flex; align-items: center; gap: 4px;
  margin: 32px 0 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px; width: fit-content;
}
.toggle-btn {
  padding: 8px 24px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--muted); background: transparent; border: none; border-radius: 999px;
  cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease;
}
.toggle-btn.active {
  background: var(--surface); color: var(--primary-dark);
  box-shadow: 0 2px 8px -2px oklch(0% 0 0 / 0.1);
}

.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface); margin-top: 48px;
}
.price {
  padding: 40px; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; background: var(--surface);
}
@media (min-width: 1000px) {
  .price:last-child { border-right: none; }
  .price { border-bottom: none; }
}
.price.featured { background: var(--bg); box-shadow: inset 0 2px 0 var(--accent-mid); }
.pricing-fineprint {
  margin-top: 20px; color: var(--muted);
  font-size: 13px; line-height: 1.6; text-wrap: pretty;
}

/* Resalte breve al llegar a una tarjeta desde un enlace #card-* de otra página */
.price.is-flagged {
  animation: priceFlag 1.6s ease-out;
}
@keyframes priceFlag {
  0%, 100% { box-shadow: 0 0 0 0 rgb(21 107 88 / 0); }
  18%      { box-shadow: 0 0 0 3px rgb(21 107 88 / 0.55); }
  60%      { box-shadow: 0 0 0 3px rgb(21 107 88 / 0.35); }
}
.price.featured.is-flagged {
  animation: priceFlagFeatured 1.6s ease-out;
}
@keyframes priceFlagFeatured {
  0%, 100% { box-shadow: inset 0 2px 0 var(--accent-mid), 0 0 0 0 rgb(21 107 88 / 0); }
  18%      { box-shadow: inset 0 2px 0 var(--accent-mid), 0 0 0 3px rgb(21 107 88 / 0.55); }
  60%      { box-shadow: inset 0 2px 0 var(--accent-mid), 0 0 0 3px rgb(21 107 88 / 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .price.is-flagged, .price.featured.is-flagged { animation: none; }
}
.price .name {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.price .plant-ico {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent); border-radius: 50%; background: var(--accent-soft);
  color: var(--primary); flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
  padding-bottom: 2px;
}
.price .desc    { font-size: 14px; color: var(--muted); line-height: 1.6; min-height: 48px; margin-bottom: 24px; }
.price .amt     { display: flex; align-items: baseline; gap: 4px; margin-top: auto; color: var(--primary-dark); }
.price .amt .num { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .amt .per { font-size: 14px; color: var(--muted); }
.price .billing {
  font-size: 13.5px; color: var(--primary-dark); font-weight: 500;
  margin: 14px 0 28px; padding-top: 12px;
  border-top: 1px dashed color-mix(in oklch, var(--primary) 30%, transparent);
  display: flex; align-items: baseline; gap: 8px;
}
.price .billing::before {
  content: "+"; color: var(--primary); font-weight: 600;
  font-family: var(--font-mono); font-size: 14px;
}
.price ul  { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.price li  { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--fg); line-height: 1.5; }
.price li svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); opacity: 0.6; }
.price li b { font-weight: 600; color: var(--primary-dark); }
.price .badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--primary); color: var(--surface);
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.price-cta { width: 100%; }
.roadmap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.road-item {
  display: flex; align-items: flex-start; gap: 24px; padding: 40px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) {
  .road-item:last-child { border-right: none; }
  .road-item { border-bottom: none; }
}
.road-icon {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--primary-dark); color: var(--accent);
  display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.road-icon.alt { background: var(--bg); color: var(--primary); border: 1px solid var(--border); }
.road-title {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--primary-dark); letter-spacing: -0.01em; margin: 0 0 8px;
}
.road-desc  { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; text-wrap: pretty; }

/* ─────────── FINAL CTA ─────────── */
.final-cta-section { max-width: var(--maxw); margin: 0 auto; padding: var(--space-section) var(--gutter); }
.final-cta {
  background: var(--primary-dark); color: var(--surface);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 56px);
  text-align: center; position: relative; overflow: hidden; border-radius: var(--radius-lg);
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='1' fill='%23AEDFCA' fill-opacity='0.16'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.final-cta .inner { position: relative; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.final-cta h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--surface); margin: 0; text-wrap: balance;
}
.final-cta h3 em { font-style: normal; font-weight: 600; color: var(--accent); }
.final-cta p    { color: rgb(236 243 238 / 0.78); font-size: 16px; line-height: 1.6; margin: 0; text-wrap: pretty; max-width: 520px; }
.final-cta .small   { color: rgb(236 243 238 / 0.5); font-size: 13px; margin-top: 8px; }

/* ─────────── FOOTER — full-width ─────────── */
footer.foot {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 80px 0 40px;
}
.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 48px;
}
.foot-col h4 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 20px;
}
.foot-col p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 20px 0; max-width: 300px; }
.foot-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-links a   { font-size: 14px; color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.foot-links a:hover { color: var(--primary); }
.socials { display: flex; gap: 10px; margin-top: 4px; }
.socials a {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--bg); color: var(--primary);
  display: grid; place-items: center; text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.socials a:hover { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.foot-bot {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  color: var(--muted); font-size: 13px;
}

/* ─────────── PROCESS (Cómo trabajamos) ─────────── */
.process-section { max-width: var(--maxw); margin: 0 auto; padding: var(--space-section) var(--gutter) 0; }
.process-head { margin-bottom: 40px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.process-head h2 { margin-top: 12px; font-size: clamp(28px, 4vw, 40px); }

/* ─────────── FAQ ─────────── */
.faq-section { max-width: var(--maxw); margin: 0 auto; padding: var(--space-section) var(--gutter) 0; }
.faq-layout {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .faq-layout { grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
}
.faq-head h2 { margin-top: 12px; font-size: clamp(28px, 4vw, 40px); }
.faq-head p {
  margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.6;
  max-width: 320px; text-wrap: pretty;
}
.faq-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; background: transparent; border: none; cursor: pointer;
  padding: 28px 32px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 17px;
  color: var(--primary-dark); letter-spacing: -0.01em; line-height: 1.3;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--primary); }
.faq-q .faq-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.faq-q .faq-icon svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.open .faq-q .faq-icon { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.faq-item.open .faq-q .faq-icon svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-a-inner {
  padding: 0 32px 28px;
  font-size: 15px; line-height: 1.65; color: var(--muted); text-wrap: pretty;
  max-width: 640px;
}
.faq-a-inner b { color: var(--primary-dark); font-weight: 600; }

/* ─────────── FLOATING WHATSAPP ─────────── */
.wa-float {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  background: var(--agua-honda);
  color: var(--surface);
  border-radius: 50%; text-decoration: none;
  box-shadow: 0 10px 28px -8px rgb(21 107 88 / 0.5), 0 4px 12px -4px rgb(13 40 38 / 0.18);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--glaciar);
}
.wa-float .wa-label { display: none; }
.wa-float svg { width: 26px; height: 26px; }
.wa-float:hover {
  background: var(--glaciar);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgb(62 165 138 / 0.55), 0 6px 16px -4px rgb(13 40 38 / 0.22);
}
.wa-float svg { width: 26px; height: 26px; flex-shrink: 0; }
.wa-float .wa-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none;
}
.wa-float .wa-pulse::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid rgb(174 223 202 / 0.6);
  animation: wa-pulse 1.8s ease-out 3 both;
  animation-delay: 1.2s;
}
.wa-float:hover .wa-pulse::before {
  animation: wa-pulse 1.8s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float .wa-pulse::before,
  .wa-float:hover .wa-pulse::before { animation: none; }
}
@media (max-width: 520px) {
  .wa-float { bottom: 16px; right: 16px; }
}

/* ─────────── MOBILE NAV JS hook ─────────── */

/* ═══════════════════════════════════════════════════════════════
   5. SUPERFICIES TRANSLÚCIDAS  (antes "LIQUID GLASS LAYER")
   Relleno translúcido + borde luminoso + sombra interior sobre los
   5 tonos de Agua de Páramo. Sin backdrop-filter (salvo .nav) para
   no recalcular blur en cada frame.
   ═══════════════════════════════════════════════════════════════ */

/* — Fondo refractivo: dos focos sutiles para que el cristal tenga algo que refractar — */
body {
  background:
    radial-gradient(70vw 55vh at 12% -8%,  rgb(174 223 202 / 0.45), transparent 60%),
    radial-gradient(60vw 55vh at 95% 105%, rgb( 62 165 138 / 0.16), transparent 60%),
    var(--vapor);
}

/* — NAV : sin barra sólida, pastillas flotantes sobre degradado — */
.nav {
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.65) 0%,
    rgb(255 255 255 / 0.32) 55%,
    rgb(255 255 255 / 0) 100%
  );
  border-bottom: none;
  box-shadow: none;
  /* Sin backdrop-filter NI mask en la barra completa: el blur de un rectángulo
     deja un borde inferior DURO que la máscara no difumina (limitación de
     Chromium con backdrop-filter+mask). Se veía como un "renglón" cuando el
     hero subía bajo ese borde en ventanas pequeñas. El blur ahora vive en las
     pastillas redondeadas (abajo) → autocontenido, sin bordes horizontales.
     El degradado de fondo se desvanece solo, sin crear bordes. */
}
.nav-inner {
  height: auto;
  padding-top: 14px;
  padding-bottom: 22px;
  gap: 12px;
  align-items: center;
}

/* Logo flotante */
.nav-logo .logo {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.6);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    0 8px 22px -10px rgb(13 40 38 / 0.18),
    0 2px 6px -2px rgb(13 40 38 / 0.08);
}

/* Grupo de enlaces flotante */
.nav-links {
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.82);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 8px 22px -10px rgb(13 40 38 / 0.18),
    0 2px 6px -2px rgb(13 40 38 / 0.08);
}
.nav-link {
  border-left: none !important;
  padding: 0 16px;
  height: 38px;
  border-radius: 999px;
  color: var(--fg);
}
.nav-link:hover {
  background: rgb(255 255 255 / 0.7);
  box-shadow: none;
}
.nav-link.active {
  color: var(--primary-dark);
  background: rgb(255 255 255 / 0.92);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -2px 0 var(--primary),
    0 2px 8px -2px rgb(13 40 38 / 0.12);
}
.nav-link.cta {
  background: linear-gradient(180deg, rgb(62 165 138 / 0.98), rgb(21 107 88 / 0.98));
  color: var(--surface);
  border: 1px solid rgb(21 107 88 / 0.5);
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.55),
    inset 0 -1px 0 rgb(13 40 38 / 0.3),
    0 6px 16px -6px rgb(21 107 88 / 0.5);
}
.nav-link.cta:hover {
  background: linear-gradient(180deg, rgb(62 165 138 / 1), rgb(13 40 38 / 0.98));
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.65),
    0 10px 22px -6px rgb(21 107 88 / 0.6);
}

/* Botón móvil flotante a juego */
.nav-mobile-btn {
  background: rgb(255 255 255 / 0.6);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 8px 22px -10px rgb(13 40 38 / 0.18);
}

@media (max-width: 768px) {
  .nav-inner { padding-top: 12px; padding-bottom: 16px; }
  .nav { -webkit-mask-image: none; mask-image: none; }
  .nav-links {
    top: 72px;
    left: var(--gutter); right: var(--gutter);
    padding: 12px;
    border-radius: 22px;
    background: rgb(255 255 255 / 0.96);
    border: 1px solid rgb(255 255 255 / 0.7);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.95),
      0 18px 40px -12px rgb(13 40 38 / 0.25);
  }
  .nav-link {
    border-top: none;
    border-radius: 12px;
    height: 44px;
  }
}

/* — BOTONES : píldoras líquidas (relleno sólido translúcido, sin blur en vivo por rendimiento) — */
.btn-primary {
  background: linear-gradient(180deg, rgb(62 165 138 / 0.95), rgb(21 107 88 / 0.98));
  border-color: rgb(21 107 88 / 0.6);
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.55),
    inset 0 -1px 0 rgb(13 40 38 / 0.3),
    0 8px 22px -6px rgb(21 107 88 / 0.45);
}
.btn-primary:hover {
  background: linear-gradient(180deg, rgb(62 165 138 / 1), rgb(21 107 88 / 1));
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.65),
    inset 0 -1px 0 rgb(13 40 38 / 0.35),
    0 12px 28px -6px rgb(21 107 88 / 0.55);
}
.btn-ghost {
  background: rgb(255 255 255 / 0.5);
  border-color: rgb(255 255 255 / 0.7);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 4px 12px -4px rgb(13 40 38 / 0.1);
}
.btn-ghost:hover {
  background: rgb(255 255 255 / 0.75);
  border-color: rgb(62 165 138 / 0.5);
}
.btn-on-dark {
  background: rgb(174 223 202 / 0.9);
  border-color: rgb(174 223 202 / 0.9);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -1px 0 rgb(21 107 88 / 0.2),
    0 8px 22px -6px rgb(13 40 38 / 0.45);
}
.btn-on-dark:hover {
  background: rgb(255 255 255 / 0.95);
  border-color: rgb(255 255 255 / 0.95);
}
.btn-ghost-dark {
  background: rgb(174 223 202 / 0.12);
  border-color: rgb(174 223 202 / 0.55);
  color: var(--surface);
  box-shadow: inset 0 1px 0 rgb(174 223 202 / 0.3);
}
.btn-ghost-dark:hover {
  background: rgb(174 223 202 / 0.22);
  border-color: rgb(174 223 202 / 0.85);
}

/* — TARJETAS / CELDAS : glass cells con borde luminoso — */
.roadmap,
.faq-list,
.pricing-card {
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    inset 0 -1px 0 rgb(13 40 38 / 0.04),
    0 18px 50px -18px rgb(13 40 38 / 0.18);
}
.road-item {
  border-color: rgb(255 255 255 / 0.55);
}
.price-grid {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.price {
  background: rgb(255 255 255 / 0.74);
  border-color: rgb(255 255 255 / 0.5);
}
.price.featured {
  background: rgb(174 223 202 / 0.22);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    inset 0 -1px 0 rgb(62 165 138 / 0.18);
}

/* — ICONOS ORBE : esferas de cristal — */
.faq-q .faq-icon,
.price .plant-ico {
  background: rgb(255 255 255 / 0.65);
  border: 1px solid rgb(174 223 202 / 0.55);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(62 165 138 / 0.15),
    0 4px 12px -4px rgb(21 107 88 / 0.18);
}
.faq-item.open .faq-q .faq-icon {
  background: linear-gradient(180deg, rgb(62 165 138 / 0.95), rgb(21 107 88 / 0.95));
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.5),
    inset 0 -1px 0 rgb(13 40 38 / 0.3),
    0 4px 12px -4px rgb(21 107 88 / 0.4);
}

/* — PRICING TOGGLE : switch de cristal — */
.pricing-toggle {
  background: rgb(255 255 255 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}
.toggle-btn.active {
  background: rgb(255 255 255 / 0.92);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 1),
    0 2px 8px -2px rgb(13 40 38 / 0.18);
}

/* — BADGES PRICING : pill de cristal (diferenciada del CTA primario) — */
.price .badge {
  background: rgb(255 255 255 / 0.85);
  color: var(--primary);
  border: 1px solid color-mix(in oklch, var(--primary) 38%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    0 2px 8px -2px rgb(13 40 38 / 0.12);
}
.price .badge::before {
  content: "★ "; letter-spacing: 0.02em;
}

/* — ROADMAP ICONS — */
.road-icon {
  background: linear-gradient(180deg, rgb(21 107 88 / 0.92), rgb(13 40 38 / 0.95));
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.4),
    inset 0 -1px 0 rgb(13 40 38 / 0.4),
    0 6px 14px -4px rgb(13 40 38 / 0.3);
}
.road-icon.alt {
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(174 223 202 / 0.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
}

/* — WHATSAPP FLOTANTE : píldora líquida — */
.wa-float {
  background: linear-gradient(180deg, rgb(62 165 138 / 0.92), rgb(21 107 88 / 0.95));
  border: 1px solid rgb(174 223 202 / 0.4);
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.5),
    inset 0 -1px 0 rgb(13 40 38 / 0.3),
    0 12px 32px -8px rgb(21 107 88 / 0.5);
}
.wa-float:hover {
  background: linear-gradient(180deg, rgb(62 165 138 / 1), rgb(21 107 88 / 1));
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.6),
    inset 0 -1px 0 rgb(13 40 38 / 0.35),
    0 16px 38px -8px rgb(21 107 88 / 0.55);
}

/* — LOGO mark (oso de anteojos) — */
.logo .o-mark { filter: drop-shadow(0 1px 1px rgb(13 40 38 / 0.18)); }

/* — HERO : reflejo sutil de cristal en la parte superior — */
.hero {
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.18),
    inset 0 -1px 0 rgb(13 40 38 / 0.4),
    0 30px 60px -24px rgb(13 40 38 / 0.4);
}

/* — FOOTER : glass sutil — */
footer.foot {
  background: rgb(255 255 255 / 0.82);
  border-top: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
}
.socials a {
  background: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(174 223 202 / 0.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7);
}
.socials a:hover {
  background: linear-gradient(180deg, rgb(62 165 138 / 0.95), rgb(21 107 88 / 0.98));
  border-color: rgb(21 107 88 / 0.6);
  color: var(--surface);
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.5),
    inset 0 -1px 0 rgb(13 40 38 / 0.3);
}

/* — Borrar fondos sólidos heredados que matarían el cristal — */
.faq-list .faq-item { background: transparent; }
.road-item { background: transparent; }
.about-card {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 18px 50px -18px rgb(13 40 38 / 0.18);
}
@media (min-width: 900px) { .about-card { grid-template-columns: 1.2fr 1fr; } }
.about-body {
  padding: clamp(40px, 5vw, 64px);
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
}
.about-body h2 { font-size: clamp(28px, 4vw, 40px); margin-top: 12px; }
.about-body p {
  font-size: 16px; line-height: 1.65; color: var(--muted);
  margin: 0; max-width: 520px; text-wrap: pretty;
}
.about-visual {
  position: relative; min-height: 320px;
  background:
    linear-gradient(135deg, rgb(13 40 38 / 0.92) 0%, rgb(21 107 88 / 0.82) 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.about-visual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 0l80 80M80 0L0 80' stroke='%23AEDFCA' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.about-visual::after {
  content: ""; position: absolute; top: -20%; right: -20%;
  width: 80%; height: 80%; border-radius: 50%;
  background: radial-gradient(circle at center, rgb(174 223 202 / 0.18), transparent 70%);
}
.about-monogram {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 32px; text-align: center;
}
.about-monogram-glyph {
  width: 120px; height: 120px; border-radius: 50%;
  background: rgb(174 223 202 / 0.18);
  border: 1px solid rgb(174 223 202 / 0.5);
  display: grid; place-items: center;
  font-family: var(--font-accent); font-style: normal; font-weight: 500;
  font-size: 64px; color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.4),
    0 12px 32px -8px rgb(13 40 38 / 0.4);
}
.about-art {
  display: block; width: 100%; max-width: 320px; height: auto;
}
.about-monogram-tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); opacity: 0.85;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.audience-card {
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 8px 24px -10px rgb(13 40 38 / 0.12);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.audience-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 14px 30px -10px rgb(13 40 38 / 0.18);
}
.audience-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgb(174 223 202 / 0.35);
  border: 1px solid rgb(174 223 202 / 0.55);
  color: var(--primary);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}
.audience-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--primary-dark); letter-spacing: -0.01em; margin: 0; line-height: 1.25;
}
.audience-desc {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  margin: 0; text-wrap: pretty;
}

/* — Pedir info CTA dentro de audience-card (complementos) — */
.audience-card .audience-desc { flex: 1 1 auto; }
.addon-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 8px 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 13px; letter-spacing: -0.005em;
  color: var(--primary); text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid rgb(21 107 88 / 0.25);
  transition: color .15s ease, border-color .15s ease, gap .15s ease;
}
.addon-cta:hover {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  gap: 10px;
}
.addon-cta svg { transition: transform .15s ease; flex-shrink: 0; }

/* ─── Pricing: comparison table ─── */
.compare-wrap { margin-top: 48px; }
.compare-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  width: 100%;
  padding: 18px 22px;
  background: rgb(255 255 255 / 0.80);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius);
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.compare-head:hover {
  background: rgb(255 255 255 / 0.65);
  border-color: rgb(62 165 138 / 0.35);
}
.compare-head:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.compare-head-text {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.compare-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; color: var(--primary-dark);
  letter-spacing: -0.01em; margin: 0;
  display: block;
}
.compare-hint {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.05em;
}
.compare-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--primary-dark); letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgb(62 165 138 / 0.12);
  border: 1px solid rgb(62 165 138 / 0.3);
  flex-shrink: 0;
}
.compare-toggle-label-open { display: none; }
.compare-head[aria-expanded="true"] .compare-toggle-label-closed { display: none; }
.compare-head[aria-expanded="true"] .compare-toggle-label-open { display: inline; }
.compare-chevron {
  transition: transform 220ms ease;
}
.compare-head[aria-expanded="true"] .compare-chevron {
  transform: rotate(180deg);
}
.compare-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 320ms ease;
  margin-top: 0;
}
.compare-head[aria-expanded="true"] + .compare-panel {
  margin-top: 18px;
}
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%; min-width: 640px;
  border-collapse: separate; border-spacing: 0;
  background: rgb(255 255 255 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}
.compare-table th, .compare-table td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid rgb(255 255 255 / 0.5);
  vertical-align: middle;
}
.compare-table thead th {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; color: var(--primary-dark);
  background: rgb(174 223 202 / 0.18);
  letter-spacing: -0.01em;
}
.compare-table thead th:first-child {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase;
  background: rgb(255 255 255 / 0.78);
}
.compare-table thead th.featured { color: var(--primary); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody th {
  font-weight: 500; color: var(--fg);
  font-family: var(--font-display);
  background: rgb(255 255 255 / 0.25);
}
.compare-table td {
  text-align: center; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.compare-table td.featured-col { background: rgb(174 223 202 / 0.08); }
/* Modo Personal: oculta la 4.ª columna (Frailejón / e-commerce) */
.compare-table.hide-frailejon th:nth-child(4),
.compare-table.hide-frailejon td:nth-child(4) { display: none; }
.compare-no {
  display: inline-block;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--muted); opacity: 0.55;
  letter-spacing: 0;
}
.compare-no::before { content: "—"; }
.compare-val {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--primary-dark); font-weight: 500;
}
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 18px 50px -18px rgb(13 40 38 / 0.18);
}
.guarantee-cell {
  padding: 32px;
  border-right: 1px solid rgb(255 255 255 / 0.55);
  border-bottom: 1px solid rgb(255 255 255 / 0.55);
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 900px) {
  .guarantee-cell:last-child { border-right: none; }
  .guarantee-cell { border-bottom: none; }
}
.guarantee-ico {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgb(255 255 255 / 0.65);
  border: 1px solid rgb(174 223 202 / 0.55);
  color: var(--primary);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    0 4px 10px -4px rgb(21 107 88 / 0.15);
}
.guarantee-title {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--primary-dark); letter-spacing: -0.01em; line-height: 1.3; margin: 0;
}
.guarantee-desc {
  font-size: 13px; line-height: 1.55; color: var(--muted);
  margin: 0; text-wrap: pretty;
}

/* ─── Lead form ─── */
.lead-form {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  width: 100%; max-width: 560px; margin: 0 auto;
  text-align: left;
}
@media (min-width: 600px) {
  .lead-form { grid-template-columns: 1fr 1fr; }
  .lead-form .full { grid-column: 1 / -1; }
}
.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(174 223 202 / 0.85);
}
.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%; padding: 14px 16px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(174 223 202 / 0.25);
  border-radius: 12px;
  color: var(--surface);
  font-family: var(--font-display); font-size: 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.lead-field input::placeholder,
.lead-field textarea::placeholder { color: rgb(236 243 238 / 0.4); }
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: rgb(174 223 202 / 0.7);
  background: rgb(255 255 255 / 0.18);
  box-shadow: 0 0 0 4px rgb(174 223 202 / 0.1);
}
.lead-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AEDFCA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.lead-field select option { background: var(--laguna); color: var(--surface); }
.lead-actions {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

/* ─── Final CTA refinements ─── */
.final-cta .inner { gap: 24px; }
.final-cta .form-wrap {
  width: 100%; max-width: 560px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(174 223 202 / 0.2);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.15),
    0 12px 32px -12px rgb(0 0 0 / 0.3);
}

/* ─── Subtle scroll reveal ───
   IMPORTANTE: el contenido SOLO se oculta cuando JS está activo (html.js).
   Si el JavaScript no carga / está bloqueado, el contenido es visible por
   defecto en vez de quedar en blanco. Antes esto dependía de que main.js
   se ejecutara, y cualquier fallo de carga dejaba páginas enteras vacías. */
html.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js [data-reveal].in {
  opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   INTERNAL PAGES · v2
   Page-hero · Page-section · Demo-grid · Timeline · Page-CTA
   ═══════════════════════════════════════════════════════════════ */

/* ─── Slim hero para páginas internas ─── */
.page-hero {
  max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 0;
}
/* Banner compacto: conserva la caja verde (le da fuerza a cada sección)
   pero con una fracción de la altura de un hero completo. Es una franja,
   no una portada. */
.page-hero .hero {
  min-height: clamp(148px, 19vh, 208px);
  padding: clamp(26px, 3.6vw, 44px) clamp(24px, 5vw, 56px);
  gap: clamp(10px, 1.2vw, 16px);
}
.page-hero .hero-h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  margin: 0;
}
.page-hero .hero-h1 em { line-height: 1.04; display: inline; }
.page-hero .hero-sub { font-size: clamp(15px, 1.6vw, 18px); max-width: 60ch; }

/* ─── Page section wrapper ─── */
.page-section {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-section) var(--gutter) 0;
}

/* ─── Dock de secciones (navegación interna en Servicios) ───
   Pastilla flotante pegajosa que sigue al usuario bajo el nav, para que las
   secciones que viven tras el largo bloque de precios sean descubribles en
   móvil sin tener que adivinar que existen más abajo. */
.svc-dock {
  position: sticky;
  top: clamp(72px, 8vh, 88px);
  z-index: 80;
  max-width: var(--maxw);
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
  pointer-events: none;          /* el hueco lateral no captura clics */
}
.svc-dock-inner {
  pointer-events: auto;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: rgb(255 255 255 / 0.92);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow:
    0 8px 22px -10px rgb(13 40 38 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.8);
  max-width: 100%;
}
.svc-dock-link {
  appearance: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.svc-dock-link:hover { color: var(--primary); background: var(--bg); }
.svc-dock-link.active {
  color: var(--surface);
  background: var(--primary);
  box-shadow: 0 4px 12px -4px rgb(21 107 88 / 0.5);
}
/* Que el salto de ancla no quede oculto tras nav + dock */
.svc-anchor { scroll-margin-top: clamp(128px, 16vh, 152px); }

/* Pestañas: sólo se muestra la sección activa, las demás se ocultan.
   Así el largo bloque de precios deja de enterrar a Complementos y Próximamente.
   Se activa con .svc-tabs en <html> (lo pone el JS) — sin JS, todo se apila. */
html.svc-tabs .svc-anchor { display: none; }
html.svc-tabs .svc-anchor.is-current { display: block; }
/* Con una sola sección a la vista, recortamos el aire superior gigante */
html.svc-tabs .svc-anchor.is-current { padding-top: clamp(22px, 3.5vw, 44px); }

@media (max-width: 768px) {
  .svc-dock {
    top: 76px;
    padding: 0 var(--gutter);
  }
  .svc-dock-inner {
    display: flex;
    width: 100%;
    gap: 3px;
  }
  .svc-dock-link {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    font-size: 12.5px;
  }
}
.page-section-head {
  margin-bottom: 32px;
}
.page-section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-top: 12px;
}
.page-section-head p {
  color: var(--muted); font-size: 15px; line-height: 1.6;
  max-width: 560px; margin-top: 16px; text-wrap: pretty;
}


/* ─── Demo grid (portafolio) ─── */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.demo-card {
  display: flex; flex-direction: column;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 12px 32px -12px rgb(13 40 38 / 0.16);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 18px 40px -12px rgb(13 40 38 / 0.22);
}

/* Faux browser frame */
.demo-preview {
  position: relative;
  background:
    linear-gradient(135deg, rgb(21 107 88 / 0.95) 0%, rgb(13 40 38 / 0.95) 100%);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.demo-preview::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 0l80 80M80 0L0 80' stroke='%23AEDFCA' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.demo-preview::after {
  content: ""; position: absolute; bottom: -30%; right: -10%;
  width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle at center, rgb(62 165 138 / 0.3), transparent 70%);
  pointer-events: none;
}
.demo-chrome {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: rgb(13 40 38 / 0.4);
  border-bottom: 1px solid rgb(174 223 202 / 0.15);
}
.demo-chrome i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(174 223 202 / 0.4);
  flex-shrink: 0;
}
.demo-chrome i:nth-child(1) { background: rgb(255 99 99 / 0.6); }
.demo-chrome i:nth-child(2) { background: rgb(255 191 73 / 0.6); }
.demo-chrome i:nth-child(3) { background: rgb(62 165 138 / 0.8); }
.demo-chrome .url {
  flex: 1; margin-left: 10px;
  font-family: var(--font-mono); font-size: 10px;
  color: rgb(174 223 202 / 0.6);
  letter-spacing: 0.02em;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* ─── Demo card variants by category ─── */
/* Gastronomía — atmósfera nocturna, dorado serif */
.demo-card[data-category="gastronomia"] .demo-preview {
  background: linear-gradient(135deg, #2A1F1A 0%, #4A2E1F 100%);
}
.demo-card[data-category="gastronomia"] .demo-preview::before { opacity: 0.5; }
.demo-card[data-category="gastronomia"] .demo-preview::after {
  background: radial-gradient(circle at center, rgb(216 178 117 / 0.22), transparent 70%);
}
.demo-card[data-category="gastronomia"] .demo-chrome {
  background: rgb(20 12 8 / 0.4); border-bottom-color: rgb(216 178 117 / 0.12);
}
.demo-card[data-category="gastronomia"] .demo-chrome .url { color: rgb(216 178 117 / 0.55); }

/* Turismo — páramo con neblina */
.demo-card[data-category="turismo"] .demo-preview {
  background: linear-gradient(135deg, #0D2826 0%, #156B58 100%);
}
.demo-card[data-category="turismo"] .demo-preview::before { opacity: 0.45; }
.demo-card[data-category="turismo"] .demo-preview::after {
  background: radial-gradient(circle at center, rgb(174 223 202 / 0.42), transparent 70%);
}

/* Negocio — utility limpio */
.demo-card[data-category="negocio"] .demo-preview {
  background: linear-gradient(135deg, #F4F6F4 0%, #E1E8E2 100%);
}
.demo-card[data-category="negocio"] .demo-preview::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0h40v40' fill='none' stroke='%23156B58' stroke-opacity='0.08'/%3E%3C/svg%3E");
}
.demo-card[data-category="negocio"] .demo-preview::after {
  background: radial-gradient(circle at center, rgb(21 107 88 / 0.16), transparent 70%);
}
.demo-card[data-category="negocio"] .demo-chrome {
  background: rgb(13 40 38 / 0.05); border-bottom-color: rgb(13 40 38 / 0.09);
}
.demo-card[data-category="negocio"] .demo-chrome .url { color: rgb(13 40 38 / 0.5); }

/* E-commerce — minimal limpio, vapor */
.demo-card[data-category="ecommerce"] .demo-preview {
  background: linear-gradient(135deg, #FAFAF7 0%, #EFEFEA 100%);
}
.demo-card[data-category="ecommerce"] .demo-preview::before { opacity: 0.5; }
.demo-card[data-category="ecommerce"] .demo-preview::after {
  background: radial-gradient(circle at center, rgb(13 40 38 / 0.1), transparent 70%);
}
.demo-card[data-category="ecommerce"] .demo-chrome {
  background: rgb(255 255 255 / 0.6); border-bottom-color: rgb(13 40 38 / 0.07);
}
.demo-card[data-category="ecommerce"] .demo-chrome .url { color: rgb(13 40 38 / 0.42); }

.demo-info {
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.demo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.demo-chip {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary);
  background: rgb(174 223 202 / 0.35);
  border: 1px solid rgb(174 223 202 / 0.55);
  padding: 4px 10px; border-radius: 999px;
}
.demo-plan {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; color: var(--muted);
}
.demo-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; color: var(--primary-dark);
  letter-spacing: -0.01em; line-height: 1.2; margin: 0;
}
.demo-desc {
  font-size: 13px; color: var(--muted); line-height: 1.55;
  margin: 0; text-wrap: pretty;
}
.demo-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.demo-features li {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--primary-dark);
  background: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.6);
  padding: 4px 9px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.demo-actions {
  margin-top: 8px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.demo-actions .btn { height: 38px; padding: 0 14px; font-size: 13px; }

/* ─── Page-end CTA (mid-page, no es el final del home) ─── */
.page-cta {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-block) var(--gutter) var(--space-section);
}
.page-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  padding: clamp(28px, 4vw, 48px);
  background:
    linear-gradient(135deg, rgb(21 107 88 / 0.96) 0%, rgb(13 40 38 / 0.96) 100%);
  border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgb(174 223 202 / 0.2),
    0 20px 50px -20px rgb(13 40 38 / 0.35);
}
.page-cta-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='1' fill='%23AEDFCA' fill-opacity='0.18'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.page-cta-text {
  position: relative; z-index: 2;
  flex: 1; min-width: 280px;
}
.page-cta-text h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em;
  color: var(--surface); margin: 0 0 8px; line-height: 1.15;
  text-wrap: balance;
}
.page-cta-text h3 em {
  font-style: normal; font-weight: 600;
  color: var(--accent);
}
.page-cta-text p {
  color: rgb(236 243 238 / 0.7);
  font-size: 14px; line-height: 1.55; margin: 0; max-width: 480px;
}
.page-cta-actions {
  position: relative; z-index: 2;
  display: flex; gap: 12px; flex-wrap: wrap;
}

.about-card .about-body {
  gap: 22px;
}


/* — Timeline mini: 4 hitos horizontales sin descripción — */
.timeline-mini {
  list-style: none; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 0;
  padding: 40px clamp(20px, 4vw, 56px) 8px;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 12px 32px -12px rgb(13 40 38 / 0.12);
  position: relative;
}
.timeline-mini-step {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  position: relative;
  padding: 8px 12px 24px;
  text-align: center;
}
.timeline-mini-step > .timeline-mini-label { margin-top: 18px; }
.timeline-mini-step > .timeline-mini-sub   { margin-top: 6px; }
.timeline-mini-step::before {
  content: "";
  position: absolute;
  top: 17px; /* alinea con centro del dot (h=14, padding-top 8 + 7) */
  left: -50%; right: 50%;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0,
    rgb(21 107 88 / 0.35) 8px,
    rgb(21 107 88 / 0.35) calc(100% - 8px),
    transparent 100%
  );
  z-index: 0;
}
.timeline-mini-step:first-child::before { display: none; }
.timeline-mini-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
  position: relative; z-index: 1;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 0 0 4px rgb(174 223 202 / 0.35),
    0 2px 6px -2px rgb(21 107 88 / 0.3);
  flex-shrink: 0;
}
.timeline-mini-dot::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--primary);
}
.timeline-mini-step:last-child .timeline-mini-dot {
  border-color: var(--accent-mid);
}
.timeline-mini-step:last-child .timeline-mini-dot::after {
  background: var(--accent-mid);
}
.timeline-mini-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(15px, 1.6vw, 18px); letter-spacing: -0.01em;
  color: var(--primary-dark);
  line-height: 1.2; margin: 0;
}
.timeline-mini-sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--muted);
  line-height: 1.3; margin: 0;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .timeline-mini {
    grid-template-columns: 1fr;
    padding: 28px 32px;
    gap: 0;
  }
  .timeline-mini-step {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 16px;
    padding: 14px 0;
    text-align: left;
  }
  .timeline-mini-step > .timeline-mini-dot {
    grid-row: 1 / span 2;
  }
  .timeline-mini-step > .timeline-mini-label,
  .timeline-mini-step > .timeline-mini-sub { margin-top: 0; }
  .timeline-mini-step::before {
    top: -50%; bottom: 50%;
    left: 8px; right: auto;
    width: 1.5px; height: 100%;
    background: linear-gradient(
      to bottom,
      transparent 0,
      rgb(21 107 88 / 0.35) 8px,
      rgb(21 107 88 / 0.35) calc(100% - 8px),
      transparent 100%
    );
  }
}

/* ═══════════════════════════════════════════════════════════════
   MISIÓN + VISIÓN · 2 tarjetas pareadas
   ═══════════════════════════════════════════════════════════════ */
.mv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-card {
  padding: clamp(28px, 4vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 12px 32px -12px rgb(13 40 38 / 0.12);
  position: relative;
}
.mv-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary);
  display: inline-flex; align-items: center; gap: 10px;
}
.mv-label::before {
  display: none;
}
.mv-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--primary-dark); margin: 0;
  text-wrap: balance;
}
.mv-card p {
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
  margin: 0; text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   RESEÑAS · banner 50/50 con carrusel
   ═══════════════════════════════════════════════════════════════ */
.reviews-section {
  max-width: var(--maxw); margin: 0 auto; padding: var(--space-section) var(--gutter) 0;
}
.reviews-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.reviews-head h2 { font-size: clamp(28px, 4vw, 40px); margin-top: 12px; }

/* Flechas laterales · sutiles, flotando a los costados de la reseña */
.reviews-rail-wrap { position: relative; }
.review-arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 12px)); /* compensa padding-bottom del rail */
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.6);
  border: 1px solid rgb(255 255 255 / 0.65);
  color: var(--primary-dark);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0.7;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 6px 18px -8px rgb(13 40 38 / 0.18);
  transition: opacity .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}
.review-arrow--prev { left: -20px; }
.review-arrow--next { right: -20px; }
.reviews-rail-wrap:hover .review-arrow--side { opacity: 0.9; }
.review-arrow--side:hover {
  opacity: 1;
  background: rgb(255 255 255 / 0.95);
  color: var(--primary);
}
.review-arrow--side:focus-visible {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .review-arrow--side { display: none; }
}
.review-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--primary-dark);
  transition: background .15s ease, color .15s ease;
  flex-shrink: 0;
}
.review-arrow:hover { background: rgb(255 255 255 / 0.8); color: var(--primary); }
.review-arrow:disabled { opacity: .3; cursor: not-allowed; }

.reviews-rail {
  position: relative;
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.reviews-rail::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 18px 50px -18px rgb(13 40 38 / 0.18);
}
@media (max-width: 760px) {
  .review-card { grid-template-columns: 1fr; min-height: 0; }
}

/* Imagen del negocio: placeholder con franjas + tag mono */
.review-image {
  position: relative; min-height: 280px;
  background:
    linear-gradient(135deg, rgb(174 223 202 / 0.42) 0%, rgb(62 165 138 / 0.32) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  overflow: hidden;
}
.review-image::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 18px,
      rgb(13 40 38 / 0.05) 18px 19px
    );
}
.review-image::after {
  content: ""; position: absolute; top: -25%; right: -15%;
  width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle at center, rgb(255 255 255 / 0.35), transparent 70%);
  pointer-events: none;
}
.review-image[data-bg] {
  background-size: cover; background-position: center;
}
.review-image[data-bg]::before {
  background: linear-gradient(135deg, rgb(13 40 38 / 0.18), rgb(13 40 38 / 0.42));
}
/* Cuando hay foto real, ocultamos el placeholder icon */
.review-image[data-bg] .review-image-stage { display: none; }

.review-image-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.review-image-ico {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgb(255 255 255 / 0.7);
  border: 1px solid rgb(255 255 255 / 0.85);
  display: grid; place-items: center;
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    0 6px 16px -6px rgb(21 107 88 / 0.25);
}
.review-image-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary-dark);
  background: rgb(255 255 255 / 0.85);
  border: 1px solid rgb(255 255 255 / 0.7);
  padding: 5px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.review-image-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); opacity: 0.45;
}

/* Cuerpo de la reseña */
.review-body {
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(28px, 4vw, 48px);
  justify-content: center;
}
.review-stars {
  color: var(--primary); font-size: 13px; letter-spacing: 4px;
  line-height: 1;
}
.review-quote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.85vw, 21px); line-height: 1.45; letter-spacing: -0.02em;
  color: var(--primary-dark); margin: 0;
  border-left: 2px solid var(--primary); padding-left: 18px;
  text-wrap: pretty;
}
.review-who {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 0.7);
}
.review-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; color: var(--primary-dark);
  letter-spacing: -0.005em;
}
.review-meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--muted);
}

/* Dots indicator */
.reviews-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 18px;
}
.reviews-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgb(13 40 38 / 0.18);
  border: none; padding: 0; cursor: pointer;
  transition: background .2s ease, transform .2s ease, width .2s ease;
}
.reviews-dot:hover { background: rgb(13 40 38 / 0.4); }
.reviews-dot[aria-current="true"] {
  background: var(--primary);
  width: 22px; border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════
   PORTAFOLIO · vista previa de cada tarjeta
   Una imagen SVG ilustrativa por categoría (assets/previews/*.svg).
   Para usar un pantallazo real basta cambiar el src del <img>.
   ═══════════════════════════════════════════════════════════════ */
.demo-stage {
  position: relative; z-index: 2; flex: 1;
  display: block; min-height: 200px;
}
.demo-stage > img,
.demo-stage > picture,
.demo-stage > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: none;
}

/* Footer coverage/hours list items */
.foot-muted-li      { color: var(--muted); font-size: 14px; }
.foot-muted-li--dim { color: var(--muted); font-size: 13px; opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════
   FORM HARDENING · v5
   Honeypot · Ley 1581 consent · Estado de éxito · A11y polish
   ═══════════════════════════════════════════════════════════════ */

/* — Honeypot: visualmente oculto pero accesible para bots — */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* — Consent checkbox (Ley 1581) — */
.lead-consent {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 4px 2px 0;
}
.lead-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0;
  border: 1.5px solid rgb(174 223 202 / 0.6);
  border-radius: 5px;
  background: rgb(255 255 255 / 0.1);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  display: grid; place-content: center;
}
.lead-consent input[type="checkbox"]:hover {
  border-color: rgb(174 223 202 / 0.9);
}
.lead-consent input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px;
  transform: scale(0);
  transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
.lead-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.lead-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lead-consent label {
  font-family: var(--font-display);
  font-size: 12.5px; line-height: 1.5;
  color: rgb(236 243 238 / 0.78);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.lead-consent label a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.lead-consent label a:hover { color: var(--surface); }

/* — A11y refinement: disabled review arrows con mejor contraste — */
.review-arrow:disabled { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════
   PRICING TEASER · v5 (home — strip compacto que enlaza a /servicios)
   ═══════════════════════════════════════════════════════════════ */
.plans-teaser-section {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--space-section) var(--gutter) 0;
}
.plans-teaser-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px; margin-bottom: 32px;
}
.plans-teaser-head h2 { font-size: clamp(28px, 4vw, 40px); margin-top: 12px; }
.plans-teaser-head p {
  color: var(--muted); font-size: 15px; line-height: 1.6;
  max-width: 420px; margin: 0; text-wrap: pretty;
}
.plans-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.75),
    0 18px 50px -18px rgb(13 40 38 / 0.18);
}
.plan-tease {
  position: relative;
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid rgb(255 255 255 / 0.55);
  border-bottom: 1px solid rgb(255 255 255 / 0.55);
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background .25s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 900px) {
  .plan-tease:last-child { border-right: none; }
  .plan-tease { border-bottom: none; }
}
.plan-tease:hover {
  background: rgb(255 255 255 / 0.78);
}
.plan-tease.featured {
  background: rgb(174 223 202 / 0.18);
  box-shadow: inset 0 2px 0 var(--accent-mid);
}
.plan-tease.featured:hover { background: rgb(174 223 202 / 0.28); }
.plan-tease-head {
  display: flex; align-items: center; gap: 12px;
}
.plan-tease .plant-ico {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  padding-bottom: 2px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    0 4px 12px -4px rgb(21 107 88 / 0.18);
}
/* Íconos botánicos de los planes (orquídea · bromelia · frailejón) */
.plant-ico { padding-bottom: 0; }
.plant-ico .plant-svg { width: 19px; height: 19px; display: block; color: var(--primary); }
.price .plant-ico .plant-svg { width: 17px; height: 17px; }
.plan-tease-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--primary-dark);
  letter-spacing: -0.01em; line-height: 1.2; margin: 0;
}
.plan-tease-badge {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary);
  background: rgb(255 255 255 / 0.7);
  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
  padding: 4px 9px; border-radius: 999px;
}
.plan-tease-desc {
  font-size: 13.5px; color: var(--muted); line-height: 1.55;
  margin: 0; text-wrap: pretty;
}
.plan-tease-price {
  display: flex; align-items: baseline; gap: 4px;
  color: var(--primary-dark);
  margin-top: auto;
}
.plan-tease-price .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 32px; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-tease-price .per { font-size: 13px; color: var(--muted); }
.plan-tease-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 13px; color: var(--primary);
  letter-spacing: -0.005em;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in oklch, var(--primary) 22%, transparent);
}
.plan-tease-cta svg { transition: transform 0.2s ease; }
.plan-tease:hover .plan-tease-cta svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════
   LEGAL DOC · privacidad.html
   ═══════════════════════════════════════════════════════════════ */
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
}
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding: 14px 18px;
  background: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--muted); letter-spacing: 0.02em;
  margin: 0 0 28px;
}
.legal-meta-item b {
  color: var(--primary-dark); font-weight: 500;
  margin-right: 4px;
}
.legal-lede {
  font-size: 16.5px; line-height: 1.7;
  color: var(--fg); margin: 0 0 32px;
  text-wrap: pretty;
}
.legal-lede b { font-weight: 600; color: var(--primary-dark); }
.legal-toc {
  list-style: none; padding: 24px 28px; margin: 0 0 12px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
  background: rgb(174 223 202 / 0.16);
  border: 1px solid rgb(174 223 202 / 0.4);
  border-radius: var(--radius);
  counter-reset: toc;
}
.legal-toc li { counter-increment: toc; font-size: 14px; }
.legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--primary);
  margin-right: 8px;
}
.legal-toc a {
  color: var(--primary-dark); text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s ease, color .15s ease;
}
.legal-toc a:hover { color: var(--primary); border-bottom-color: var(--primary); }

.legal-block { margin: 48px 0 0; scroll-margin-top: 96px; }
.legal-h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em;
  color: var(--primary-dark); margin: 0 0 14px;
  line-height: 1.2;
}
.legal-block p {
  font-size: 15px; line-height: 1.7; color: var(--fg);
  margin: 0 0 14px; text-wrap: pretty;
}
.legal-block p b { font-weight: 600; color: var(--primary-dark); }
.legal-block a {
  color: var(--primary); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.legal-block a:hover { color: var(--primary-dark); }
.legal-list {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.legal-list li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; line-height: 1.6; color: var(--fg);
  text-wrap: pretty;
}
.legal-list li::before {
  content: ""; position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1.5px;
  background: var(--primary);
  opacity: 0.55;
}
.legal-list li b { font-weight: 600; color: var(--primary-dark); }
.legal-note {
  font-size: 13.5px; line-height: 1.6;
  color: var(--muted); font-style: italic;
  padding: 12px 16px;
  background: rgb(255 255 255 / 0.78);
  border-left: 2px solid var(--accent-mid);
  border-radius: 4px;
  margin: 8px 0 16px !important;
}
.legal-footnote {
  margin: 48px 0 0; padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
  text-wrap: pretty;
}