/* ═══════════════════════════════════════════════════════════════
   toup.es — Capa de diseño 2026
   Se carga DESPUÉS de style.css y toup-fix.css.

   Idea rectora: "ficha técnica de un hotel bonito".
   Fondo cálido y hospitalario; cada dato renderizado con el rigor
   de un cuadro de mando de revenue — monoespaciada, cifras
   tabulares, filetes de un píxel y color semántico.

   Lenguaje de color semántico (se usa igual en toda la web):
     azul   → canal directo (tuyo)
     menta  → dinero que te quedas
     coral  → comisión que se fuga a la OTA
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. TOKENS — redefinen los de style.css
   ───────────────────────────────────────────── */
:root {
  /* Tintas */
  --ink:          #0A0E1A;
  --ink-2:        #121829;
  --ink-3:        #1B2233;

  /* Papel */
  --paper:        #F4F4F1;
  --paper-2:      #FAFAF8;

  /* Semánticos */
  --direct:       #2B5CFF;
  --direct-600:   #1E45D6;
  --direct-tint:  #E9EFFF;
  --signal:       #00C48C;
  --signal-tint:  #E3FAF3;
  --leak:         #FF6A45;
  --leak-tint:    #FFEDE7;

  /* Compatibilidad con style.css */
  --bg:           var(--paper);
  --white:        #FFFFFF;
  --dark:         var(--ink);
  --mid:          #3B4252;
  --muted:        #646C7C;
  --muted-2:      #AEB4BF;
  --accent:       var(--direct);
  --accent-light: var(--direct-tint);
  --accent-mid:   #BFD1FF;
  --green:        var(--signal);
  --green-light:  var(--signal-tint);
  --border:       #E3E3DE;
  --border-dark:  #CFCFC8;

  /* Elevación — sombras más suaves y de tinte frío */
  --shadow-sm: 0 1px 2px rgba(10,14,26,.05), 0 2px 6px rgba(10,14,26,.04);
  --shadow:    0 2px 6px rgba(10,14,26,.05), 0 10px 30px rgba(10,14,26,.06);
  --shadow-lg: 0 12px 48px rgba(10,14,26,.14);
  --shadow-xl: 0 24px 70px rgba(10,14,26,.18);

  /* Forma */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Tipografía */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Movimiento */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ─────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────── */
body {
  background: var(--paper);
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

/* Cifras tabulares en todo lo que sea un dato: las columnas cuadran */
.hero-stat-value, .metric-value, .problem-pct, .case-metric-value,
.formador-stat-val, .price-amount, .project-result-value,
.kpi-value, .calc-out-value, .t-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

::selection { background: var(--direct); color: #fff; }

/* Foco visible y consistente en toda la web */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--direct);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto al contenido para teclado y lectores de pantalla */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font: 600 14px/1 var(--font-body);
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ─────────────────────────────────────────────
   3. TIPOGRAFÍA
   ───────────────────────────────────────────── */

/* La monoespaciada es la voz de los datos: etiquetas, unidades, índices */
.section-eyebrow,
.blog-cat, .case-tag, .tag, .org-badge,
.breadcrumb, .metric-label, .hero-stat-label,
.partner-item, .partners-label {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .06em;
}

.section-eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--direct);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
/* Filete corto que ancla el eyebrow a la retícula */
.section-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  opacity: .5;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.9vw, 50px);
  letter-spacing: -.028em;
  line-height: 1.08;
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--direct);
}
.section-sub {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--muted);
  max-width: 54ch;
  text-wrap: pretty;
}

/* Secciones oscuras: la menta marca el eyebrow, no el gris */
#problema .section-eyebrow,
.section-resultados .section-eyebrow,
#contacto .section-eyebrow,
.page-hero .section-eyebrow { color: var(--signal); }

/* ─────────────────────────────────────────────
   4. RITMO Y SUPERFICIES
   ───────────────────────────────────────────── */
section { padding: clamp(72px, 9vw, 116px) 40px; }
.container { max-width: 1140px; }

#calculadora { background: var(--paper-2); }
#servicios { background: var(--paper); }
#casos     { background: var(--paper); }
#blog      { background: var(--paper-2); }
#precio    { background: var(--paper); }
#faq       { background: var(--paper-2); }
#metodologia { background: var(--paper) !important; }

/* Las secciones oscuras dejan de ser negro plano: aurora índigo muy tenue */
#problema, .section-resultados, #contacto, .page-hero, .quote-strip, footer {
  position: relative;
  background: var(--ink);
  isolation: isolate;
}
#problema::before, .section-resultados::before,
#contacto::before, .page-hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 12% 0%,  rgba(43,92,255,.20),  transparent 62%),
    radial-gradient(50% 70% at 92% 12%, rgba(0,196,140,.11),  transparent 60%),
    radial-gradient(70% 60% at 60% 108%, rgba(255,106,69,.09), transparent 62%);
  animation: auroraDrift 26s var(--ease-soft) infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0)      scale(1);    opacity: .85; }
  100% { transform: translate3d(-3%,2%,0)   scale(1.14); opacity: 1;   }
}

/* Filete de grano fino que separa claro de oscuro */
#problema, .section-resultados, #contacto {
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ─────────────────────────────────────────────
   5. NAVEGACIÓN
   ───────────────────────────────────────────── */
nav[aria-label="Navegación principal"] {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(10,14,26,.07) !important;
  box-shadow: none !important;
  transition: height .3s var(--ease-out),
              background .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
/* Al bajar, la barra se compacta y gana sombra: indica que hay página arriba */
nav[aria-label="Navegación principal"].is-scrolled {
  height: 62px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 1px 24px rgba(10,14,26,.09) !important;
}
nav[aria-label="Navegación principal"].is-scrolled img { height: 42px !important; }
nav[aria-label="Navegación principal"] img { transition: height .3s var(--ease-out); }

/* Subrayado que crece desde la izquierda */
.nav-links > li > a {
  position: relative;
  padding-block: 6px;
  transition: color .2s var(--ease-soft);
}
.nav-links > li > a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--direct);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease-out);
}
.nav-links > li > a:hover::after,
.nav-links > li > a:focus-visible::after,
.nav-links > li > a.active::after { transform: scaleX(1); }
.nav-links > li > a:hover { color: var(--ink) !important; }

.nav-dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  overflow: hidden;
}
.nav-dropdown-menu li a {
  border-radius: 9px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  transition: background .18s var(--ease-soft), padding-left .18s var(--ease-soft);
}
.nav-ico { flex-shrink: 0; font-size: 15px; line-height: 1; }
.nav-dropdown-menu li a:hover {
  background: var(--direct-tint) !important;
  color: var(--direct) !important;
  padding-left: 18px !important;
}

/* Barra de progreso de lectura */
.read-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--direct), var(--signal));
  z-index: 10000;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   6. BOTONES
   ───────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-white, .btn-accent,
.form-submit, .footer-btn-primary, .footer-btn-outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .3s var(--ease-out),
              box-shadow .3s var(--ease-out),
              background .25s var(--ease-soft),
              color .25s var(--ease-soft),
              border-color .25s var(--ease-soft);
}
.btn-primary, .btn-accent, .form-submit {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(10,14,26,.16);
}
/* El brillo barre el botón al pasar por encima */
.btn-primary::before, .btn-accent::before, .form-submit::before,
.btn-white::before, .footer-btn-primary::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-out);
}
.btn-primary:hover::before, .btn-accent:hover::before, .form-submit:hover::before,
.btn-white:hover::before, .footer-btn-primary:hover::before { transform: translateX(130%); }

.btn-primary:hover, .btn-accent:hover, .form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(10,14,26,.26);
  opacity: 1;
}
.btn-accent { background: var(--direct); box-shadow: 0 2px 10px rgba(43,92,255,.32); }
.btn-accent:hover { background: var(--direct-600); box-shadow: 0 10px 30px rgba(43,92,255,.42); }

.btn-secondary {
  border: 1px solid var(--border-dark);
  background: transparent;
  color: var(--ink);
}
.btn-secondary:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.22); }

.footer-btn-primary { background: var(--direct) !important; }
.footer-btn-primary:hover { background: var(--direct-600) !important; transform: translateY(-2px); }
.footer-btn-outline:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }

/* Los botones del nav y del footer llevan estilo inline: hay que forzarlos */
nav[aria-label="Navegación principal"] a[href="/contacto/"] {
  border-radius: 100px !important;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
nav[aria-label="Navegación principal"] a[href="/contacto/"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(10,14,26,.28);
}
.nav-phone { transition: background .2s, color .2s, transform .25s var(--ease-out); }
.nav-phone:hover { background: var(--ink) !important; color: #fff !important; transform: translateY(-1px); }

/* ─────────────────────────────────────────────
   7. HERO
   ───────────────────────────────────────────── */
#hero {
  background:
    radial-gradient(120% 90% at 50% -20%, #FFFFFF 0%, transparent 60%),
    var(--paper);
}
#hero::before {
  background: radial-gradient(circle, rgba(43,92,255,.16), transparent 66%) !important;
  animation: blobFloat 18s var(--ease-soft) infinite alternate;
}
#hero::after {
  background: radial-gradient(circle, rgba(0,196,140,.13), transparent 66%) !important;
  animation: blobFloat 22s var(--ease-soft) 1.5s infinite alternate-reverse;
}
@keyframes blobFloat {
  from { transform: translate3d(0,0,0)     scale(1);   }
  to   { transform: translate3d(4%,-5%,0)  scale(1.2); }
}

/* Retícula finísima de fondo: la "hoja de cálculo" bajo la hospitalidad */
#hero .hero-grid-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(10,14,26,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,14,26,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(78% 62% at 50% 38%, #000 0%, transparent 78%);
          mask-image: radial-gradient(78% 62% at 50% 38%, #000 0%, transparent 78%);
}
.hero-inner { position: relative; z-index: 1; }

.hero-badge {
  border-radius: 100px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-color: rgba(10,14,26,.09);
  box-shadow: 0 2px 14px rgba(10,14,26,.06);
}
.hero-badge span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
}
.hero-badge-dot { background: var(--signal); }

/* La keyword vive dentro del H1, en la voz de los datos */
.hero-title { font-weight: 400; letter-spacing: -.032em; }
.hero-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.15vw, 13px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--direct);
  margin-bottom: 18px;
  line-height: 1.5;
}
.hero-title em { font-weight: 300; }

.hero-stats {
  gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--border);
}
.hero-stat-value { font-weight: 400; letter-spacing: -.03em; }
.hero-stat-label {
  font-size: 11px;
  letter-spacing: .05em;
  line-height: 1.45;
  max-width: 20ch;
  color: var(--muted);
}

/* Tarjeta flotante: cristal, no papel */
.hero-float-card {
  background: rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
          backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-xl) !important;
  animation: cardFloat 7s var(--ease-soft) infinite alternate;
}
@keyframes cardFloat {
  from { transform: translateY(0)    rotate(-.4deg); }
  to   { transform: translateY(-14px) rotate(.5deg); }
}

/* ─────────────────────────────────────────────
   8. TIRA DE PARTNERS — marquesina
   ───────────────────────────────────────────── */
.partners-strip {
  background: var(--paper-2);
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.partners-label {
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--muted-2);
}
.partner-item {
  font-size: 13px;
  color: var(--mid);
  white-space: nowrap;
  transition: color .2s;
}
.partner-item:hover { color: var(--direct); }

/* ─────────────────────────────────────────────
   9. TARJETAS
   ───────────────────────────────────────────── */
.service-card, .case-card, .blog-card, .diferencia-card, .method-step {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  transition: transform .4s var(--ease-out),
              box-shadow .4s var(--ease-out),
              border-color .3s var(--ease-soft);
}

/* Foco de luz que sigue al cursor — se alimenta de --mx/--my desde JS */
.service-card, .case-card, .blog-card, .diferencia-card {
  position: relative;
  overflow: hidden;
}
.service-card::after, .diferencia-card::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease-soft);
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              rgba(43,92,255,.09), transparent 62%);
}
.service-card:hover::after, .diferencia-card:hover::after { opacity: 1; }

.service-card { border-top: 2px solid transparent; }
.service-card:hover, .diferencia-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-top-color: var(--direct);
}
.service-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--direct-tint);
  font-size: 24px;
  transition: transform .4s var(--ease-out), background .3s;
}
.service-card:hover .service-icon {
  transform: scale(1.08) rotate(-6deg);
  background: var(--direct);
}
.service-card h3 { font-size: 20px; letter-spacing: -.02em; }

.tag, .case-tag {
  font-size: 10.5px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--mid);
  padding: 5px 11px;
}

.case-card:hover, .blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-dark);
}
.case-img { transition: transform .8s var(--ease-out) !important; }
.case-card:hover .case-img { transform: scale(1.06) !important; }
.case-metric {
  background: var(--signal-tint);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,196,140,.22);
}
.case-metric-value { color: var(--ink); font-weight: 400; }
.case-link, .blog-link {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--direct);
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap .25s var(--ease-out);
}
.case-link:hover, .blog-link:hover { gap: 13px; opacity: 1; }

.blog-cat {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--direct-tint);
  color: var(--direct-600);
  border-radius: 100px;
  padding: 4px 10px;
}
.blog-card-img { transition: transform .6s var(--ease-out); }
.blog-card:hover .blog-card-img { transform: scale(1.05); }

/* ─────────────────────────────────────────────
   10. DATOS — el corazón del lenguaje visual
   ───────────────────────────────────────────── */
.problem-grid, .metrics-grid {
  gap: 1px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  overflow: hidden;
}
.problem-card, .metric-card {
  background: rgba(255,255,255,.028);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  transition: background .35s var(--ease-soft);
}
.problem-card:hover, .metric-card:hover { background: rgba(255,255,255,.06); }

.problem-pct, .metric-value {
  font-weight: 400;
  letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.62));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* El símbolo cuenta la historia: coral si se fuga, menta si se queda */
.problem-pct span { color: var(--leak); -webkit-text-fill-color: var(--leak); }
.problem-card:nth-child(2) .problem-pct span,
.problem-card:nth-child(3) .problem-pct span { color: var(--signal); -webkit-text-fill-color: var(--signal); }
.problem-card:nth-child(4) .problem-pct span { color: var(--signal); -webkit-text-fill-color: var(--signal); }

.metric-label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
}
.metric-card::after { background: linear-gradient(90deg, var(--direct), var(--signal)) !important; }

.problem-cta-row {
  background: linear-gradient(120deg, var(--direct) 0%, var(--direct-600) 60%, #12309B 100%);
  border-radius: var(--radius);
}

/* ─────────────────────────────────────────────
   11. FIRMA — Calculadora de fuga de comisiones
   ───────────────────────────────────────────── */
.calc {
  position: relative;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 40px);
  overflow: hidden;
  isolation: isolate;
}
.calc::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 8% 0%,   rgba(43,92,255,.24), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(255,106,69,.16), transparent 60%);
}
.calc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.calc-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 27px);
  font-weight: 400;
  letter-spacing: -.025em;
  color: #fff;
  line-height: 1.2;
}
.calc-tag {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal);
  border: 1px solid rgba(0,196,140,.35);
  background: rgba(0,196,140,.1);
  border-radius: 100px;
  padding: 5px 12px;
  white-space: nowrap;
}

.calc-controls { display: grid; gap: 22px; margin-bottom: 30px; }
.calc-field label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em;
  color: rgba(255,255,255,.62);
  margin-bottom: 12px;
}
.calc-field label b {
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.calc-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,.16);
  outline: none;
  cursor: grab;
}
.calc-field input[type="range"]:active { cursor: grabbing; }
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--direct);
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  cursor: grab;
  transition: transform .2s var(--ease-out), border-color .2s;
}
.calc-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.calc-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--direct);
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  cursor: grab;
}
.calc-field input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--signal); }

/* La barra: dos tramos que se disputan el mismo ancho */
.calc-bar {
  display: flex; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.14);
}
.calc-bar-seg {
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  transition: width .55s var(--ease-out);
}
.calc-bar-leak   { background: linear-gradient(135deg, var(--leak), #E2482A); }
.calc-bar-direct { background: linear-gradient(135deg, var(--direct), var(--direct-600)); }
.calc-legend {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-bottom: 28px;
}
.calc-legend i {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 3px; margin-right: 7px;
}

.calc-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 26px;
}
.calc-out-cell { background: rgba(10,14,26,.5); padding: 20px 18px; }
.calc-out-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 9px;
}
.calc-out-value {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
}
.calc-out-value.is-leak   { color: var(--leak); }
.calc-out-value.is-signal { color: var(--signal); }
.calc-out-note {
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  margin-top: 7px;
  line-height: 1.45;
}
.calc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.calc-foot p {
  font-size: 13.5px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
}

/* ─────────────────────────────────────────────
   12. METODOLOGÍA — la numeración es real (es una secuencia)
   ───────────────────────────────────────────── */
.method-steps { counter-reset: step; }
.method-step {
  position: relative;
  padding-top: 44px;
  background: #fff;
  border-radius: var(--radius);
  overflow: visible;
}
.method-step::before {
  content: '';
  position: absolute; top: 0; left: 28px; right: 28px;
  height: 2px;
  background: var(--border);
}
.method-step::after {
  content: '';
  position: absolute; top: 0; left: 28px;
  width: 0; height: 2px;
  background: var(--direct);
  transition: width 1s var(--ease-out);
}
.method-step.in-view::after { width: 46px; }
.step-num {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  background: transparent !important;
  color: var(--direct) !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important;
  margin-bottom: 14px !important;
}
.method-step h3 { font-size: 17px; letter-spacing: -.015em; }

/* ─────────────────────────────────────────────
   13. CITA
   ───────────────────────────────────────────── */
.quote-strip { border-block: 1px solid rgba(255,255,255,.07); }
.quote-strip q {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.35;
}
.quote-strip cite {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  font-style: normal;
}
.quote-strip cite strong { color: var(--signal); }

/* ─────────────────────────────────────────────
   14. PRECIO
   ───────────────────────────────────────────── */
.price-card {
  border-radius: var(--radius-lg);
  background: var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.price-card::before {
  background: linear-gradient(90deg, var(--direct), var(--signal)) !important;
  height: 3px !important;
}
.price-card::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 70% at 100% 0%, rgba(43,92,255,.26), transparent 62%);
}
.price-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
}
.price-amount { font-weight: 400; letter-spacing: -.035em; }
.price-period { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; }
.price-includes li::before { color: var(--signal) !important; }
.guarantee {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.guarantee:hover { transform: translateX(5px); box-shadow: var(--shadow-sm); }
.guarantee-icon {
  background: var(--direct-tint);
  border-radius: 12px;
  display: grid; place-items: center;
}

/* ─────────────────────────────────────────────
   15. FAQ
   ───────────────────────────────────────────── */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover { border-color: var(--border-dark); }
.faq-item.open { border-color: var(--direct); box-shadow: 0 6px 22px rgba(43,92,255,.1); }
.faq-q { padding: 20px 22px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.faq-a { padding-inline: 22px; color: var(--muted); line-height: 1.75; }
.faq-item.open .faq-a { padding-bottom: 22px; }
.faq-icon { color: var(--direct); transition: transform .3s var(--ease-out); }

/* ─────────────────────────────────────────────
   16. FORMULARIO
   ───────────────────────────────────────────── */
.contact-form-wrap { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.form-row label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-row input, .form-row textarea, .form-row select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--paper-2);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  border-color: var(--direct);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(43,92,255,.11);
  outline: none;
}
.form-submit { width: 100%; }
.contact-icon { background: rgba(255,255,255,.07); border-radius: 12px; display: grid; place-items: center; }
.contact-note { border-radius: var(--radius); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }

/* ─────────────────────────────────────────────
   17. FORMADOR / PROYECTOS / BLOG-POST
   ───────────────────────────────────────────── */
.formador-stat-val { font-weight: 400; letter-spacing: -.03em; color: var(--direct); }
.formador-stat-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; line-height: 1.45; }
.org-badge {
  font-size: 10.5px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  transition: border-color .2s, color .2s, transform .2s;
}
.org-badge:hover { border-color: var(--direct); color: var(--direct); transform: translateY(-2px); }
.formador-photo { border-radius: var(--radius); overflow: hidden; }
.formador-photo img { transition: transform .8s var(--ease-out); }
.formador-photo:hover img { transform: scale(1.05); }

.project-hero-img, .project-info, .project-cta-box, .project-result-card {
  border-radius: var(--radius);
}
.project-result-card { background: var(--signal-tint); border: 1px solid rgba(0,196,140,.22); }
.project-result-value { color: var(--ink); font-weight: 400; }

.breadcrumb { font-size: 11.5px; letter-spacing: .04em; }

.seo-content h2, .post-layout h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--ink);
}
.seo-content li::before, .post-layout li::before { color: var(--direct); }
.post-layout blockquote {
  border-left: 2px solid var(--direct);
  background: var(--direct-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-layout p, .seo-content p { color: #4A5162; }
.post-layout li, .seo-content li { color: #4A5162; }

/* Enlaces dentro del cuerpo del texto: subrayado que reacciona */
.post-layout p a, .seo-content p a, .post-layout li a, .seo-content li a {
  color: var(--direct);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(43,92,255,.35);
  transition: text-decoration-color .2s;
}
.post-layout p a:hover, .seo-content p a:hover,
.post-layout li a:hover, .seo-content li a:hover { text-decoration-color: var(--direct); }

/* ─────────────────────────────────────────────
   18. CAJA DE AUTOR — señal E-E-A-T
   ───────────────────────────────────────────── */
.author-box {
  display: flex; gap: 20px; align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 24px;
  margin: 44px 0;
}
.author-box-avatar {
  width: 58px; height: 58px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.02em;
}
.author-box-name {
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 3px;
}
.author-box-role {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--direct);
  margin-bottom: 10px;
}
.author-box-bio { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin: 0; }

/* ─────────────────────────────────────────────
   19. ENLAZADO INTERNO — clúster temático
   ───────────────────────────────────────────── */
.cluster {
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  padding: clamp(56px, 7vw, 84px) 40px;
}
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.cluster-link {
  display: flex; align-items: flex-start; gap: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 17px 19px;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s;
}
.cluster-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--direct);
}
.cluster-link-idx {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em;
  color: var(--direct);
  padding-top: 2px;
  flex-shrink: 0;
}
.cluster-link > span:last-child { display: block; }
.cluster-link-txt {
  display: block;
  font-size: 14px; font-weight: 600;
  color: var(--ink); line-height: 1.45;
}
.cluster-link-sub {
  display: block;
  font-size: 12.5px; color: var(--muted);
  margin-top: 4px; line-height: 1.5;
}

/* ─────────────────────────────────────────────
   20. PIE
   ───────────────────────────────────────────── */
footer { border-top: 1px solid rgba(255,255,255,.07); }
footer a { transition: color .2s, opacity .2s; }
/* Los enlaces del pie llevan color inline al 0.3 de alfa — insuficiente para leerse */
.footer-seo a { color: rgba(255,255,255,.5) !important; }
.footer-seo a:hover { color: var(--signal) !important; }
footer nav a:hover, .footer-nav a:hover { color: #fff !important; }
.footer-seo a:hover, footer a[href^="/sectores/"]:hover { color: var(--signal) !important; }

/* WhatsApp: menos ruido, más presencia */
.whatsapp-float {
  box-shadow: 0 6px 24px rgba(37,211,102,.42) !important;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out) !important;
  animation: none !important;
}
.whatsapp-float:hover { transform: scale(1.09) translateY(-3px) !important; }

/* ─────────────────────────────────────────────
   21. MOVIMIENTO AL SCROLL
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }

/* Los hijos de una rejilla entran escalonados */
.services-grid > .reveal,
.cases-grid > .reveal,
.blog-grid > .reveal,
.method-steps > .reveal,
.diferencias-grid > .reveal { transition-delay: var(--reveal-delay, 0ms); }

/* Título que se revela línea a línea.
   El padding/margin compensado evita que overflow:hidden recorte
   los trazos descendentes de la cursiva. */
.hero-title-lines { display: block; }
.line-reveal {
  display: block;
  overflow: hidden;
  padding-block: .2em;
  margin-block: -.2em;
}
.line-reveal > span {
  display: block;
  transform: translateY(105%);
  transition: transform .95s var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}
.line-reveal.visible > span { transform: none; }

/* ─────────────────────────────────────────────
   22. RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  section { padding: 68px 22px; }
  .hero-kicker { letter-spacing: .14em; }
  .calc { padding: 22px 18px; }
  .calc-out { grid-template-columns: 1fr 1fr; }
  .author-box { flex-direction: column; gap: 14px; }
}
@media (max-width: 600px) {
  .problem-grid, .metrics-grid { grid-template-columns: 1fr !important; }
  .calc-out { grid-template-columns: 1fr; }
  .calc-bar-seg { font-size: 10.5px; }
  .hero-stats { gap: 22px 28px; }
  .hero-stat-label { font-size: 10.5px; }
  #hero .hero-grid-overlay { background-size: 48px 48px; }

  /* La cursiva de Fraunces desborda a tamaños grandes en pantalla estrecha */
  .hero-title      { font-size: clamp(34px, 9.2vw, 46px) !important; letter-spacing: -.02em; }
  .page-hero-title { font-size: clamp(30px, 8.4vw, 42px) !important; letter-spacing: -.018em; }
  .hero-sub        { font-size: 16px; }
  .hero-kicker     { font-size: 10.5px; letter-spacing: .12em; }
  .hero-badge span { font-size: 10.5px; }

  /* Recortar por línea corta los trazos de la cursiva aquí: mejor fundido simple */
  .line-reveal        { overflow: visible; padding-block: 0; margin-block: 0; }
  .line-reveal > span { transform: none; }
}

/* ─────────────────────────────────────────────
   23. MOVIMIENTO REDUCIDO
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .line-reveal > span { transform: none !important; }
  .hero-float-card { animation: none !important; }
  .read-progress { display: none; }
}

/* ─────────────────────────────────────────────
   24. IMPRESIÓN
   ───────────────────────────────────────────── */
@media print {
  nav, footer, .whatsapp-float, .read-progress, .calc, .cookie-banner { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1 !important; transform: none !important; }
}