/* ==========================================================================
   ALLORA — Sistema de diseño de la web nueva (nueva.allora.es)
   Tokens extraídos del home real (home-elementor-final.html).
   El home usa su propio CSS embebido (.allora-root); este archivo da
   header, footer, modal global y componentes de las páginas interiores.
   ========================================================================== */

:root {
  --blue: #1B5EF7;
  --blue-h: #1248D6;
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-900: #0A1F4A;
  --blue-light: #6EA8FF;
  --green: #16A34A;
  --green-light: #4ADE80;
  --red: #DC2626;
  --gray-900: #0F172A;
  --gray-800: #1E293B;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748B;
  --gray-400: #94A3B8;
  --gray-300: #CBD5E1;
  --gray-200: #E2E8F0;
  --gray-100: #F1F5F9;
  --gray-50: #F8FAFC;
  --white: #FFFFFF;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, .10);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);
  --shadow-blue: 0 10px 32px rgba(27, 94, 247, .30);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-hand: 'Caveat', cursive;

  --container: 1200px;
  --header-wide: 1440px;
  --header-h: 86px;
}

/* ── Reset mínimo ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray-700);
  background: var(--white);
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-h); }
h1, h2, h3, h4 { color: var(--gray-900); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ── Tipografía utilitaria ────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.h-xl { font-size: clamp(40px, 5.5vw, 64px); font-weight: 900; letter-spacing: -.02em; }
.h-lg { font-size: clamp(30px, 4.2vw, 46px); font-weight: 900; letter-spacing: -.02em; }
.h-md { font-size: clamp(24px, 3vw, 32px); }
.h-lg em, .h-xl em, .h-md em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--blue);
}
/* Sobre fondo azul u oscuro, el em azul no se lee → azul claro legible */
.section-blue .h-lg em, .section-blue .h-xl em, .section-blue .h-md em,
.section-blue h2 em, .cta-band h2 em { color: #CFE0FF; }
.section-dark .h-lg em, .section-dark .h-xl em, .section-dark .h-md em,
.page-hero--dark .h-lg em, .page-hero--dark .h-xl em, .page-hero--dark .h-md em { color: #6EA8FF; }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--gray-600); }
.text-center { text-align: center; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  padding: 17px 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease-bounce), box-shadow .25s, background .2s, color .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-blue); }
@media (hover: hover) and (pointer: fine) {
  /* Hover: el fondo azul se oscurece un poco y ya (como el Contactar del header). */
  .btn-primary:hover { background: var(--blue-h); color: var(--white); box-shadow: var(--shadow-blue); transform: translateY(-2px) scale(1.02); }
}
.btn-outline { background: transparent; color: var(--gray-900); border-color: var(--gray-300); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-white { background: var(--white); color: var(--blue); box-shadow: var(--shadow-md); }
.btn-white:hover { transform: translateY(-2px); color: var(--blue-h); }
.btn-lg { font-size: 18px; padding: 20px 40px; }
.btn-sm { font-size: 15px; padding: 12px 22px; }
/* Móvil: los botones nunca desbordan — ajustan padding y envuelven si hace falta */
@media (max-width: 560px) {
  .btn { max-width: 100%; white-space: normal; }
  .btn-lg { padding: 16px 26px; font-size: 16px; }
}

@keyframes btn-pulse {
  0% { box-shadow: 0 10px 32px rgba(27,94,247,.30), 0 0 0 0 rgba(27,94,247,.35); }
  70% { box-shadow: 0 10px 32px rgba(27,94,247,.30), 0 0 0 16px rgba(27,94,247,0); }
  100% { box-shadow: 0 10px 32px rgba(27,94,247,.30), 0 0 0 0 rgba(27,94,247,0); }
}
.btn-pulse { animation: btn-pulse 2.4s infinite; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.header-inner {
  max-width: var(--header-wide);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}
.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo img { height: 38px; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: clamp(26px, 3vw, 48px); margin-left: auto; }
.main-nav > a, .nav-drop > button {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-700);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.main-nav > a:hover, .nav-drop > button:hover, .main-nav > a[aria-current="page"] { color: var(--blue); }
.nav-drop { position: relative; }
/* Puente invisible que cubre el hueco botón→panel para no cortar el hover */
@media (min-width: 1001px) {
  .nav-drop::after {
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: 100%;
    height: 18px;
  }
}
.nav-drop .caret { transition: transform .2s; font-size: 11px; }
.nav-drop.open .caret { transform: rotate(180deg); }
.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  box-shadow: 0 28px 70px -28px rgba(15, 23, 42, .32), 0 4px 18px -8px rgba(27, 94, 247, .12);
  padding: 10px;
  min-width: 270px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .25s var(--ease-smooth);
}
.nav-drop.open .nav-panel, .nav-drop:hover .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-panel a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  transition: color .2s;
}
.nav-panel a:hover { color: var(--blue); }
/* Resaltado suave que se DESLIZA entre los items (lo crea main.js) */
.np-hl {
  position: absolute;
  z-index: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #EFF6FF, #E2EDFF);
  box-shadow: inset 0 0 0 1px rgba(27, 94, 247, .14), 0 6px 16px -10px rgba(27, 94, 247, .35);
  opacity: 0;
  transition: transform .28s var(--ease-smooth), width .28s var(--ease-smooth), height .28s var(--ease-smooth), opacity .2s;
  pointer-events: none;
}
.np-hl.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .np-hl { transition: opacity .2s; } }
.nav-panel a span { display: block; font-size: 12.5px; font-weight: 500; color: var(--gray-500); margin-top: 2px; }
@media (min-width: 1001px) {
  .nav-panel.nav-panel-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; min-width: 560px; }
}
/* ── Nav en píldora con resaltado azul deslizante (AnimatedTabs) ── */
@media (min-width: 1001px) {
  .nav-pill { position: relative; margin-left: auto; display: flex; align-items: center; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 999px; padding: 5px; }
  .nav-pill .main-nav { margin-left: 0; gap: 0; }
  .nav-pill .main-nav > a, .nav-pill .nav-drop > button { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; transition: color .25s; }
  .nav-pill .main-nav > a.is-hl, .nav-pill .nav-drop > button.is-hl { color: #fff !important; }
  .nav-hl { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); width: 0; background: var(--blue); border-radius: 999px; z-index: 0; opacity: 0; transition: transform .3s cubic-bezier(.22, .61, .36, 1), width .3s cubic-bezier(.22, .61, .36, 1), opacity .2s; box-shadow: 0 6px 16px -8px rgba(27, 94, 247, .65); }
  .nav-hl.on { opacity: 1; }
}
@media (max-width: 1000px) { .nav-pill { display: contents; } .nav-hl { display: none; } }

/* ── CTA Contactar con borde orbitante (MovingBorder, azul) ── */
.header-cta.cta-orbita {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  margin-left: 14px;
  padding: 3px;              /* grosor del anillo orbitante */
  border-radius: 999px;
  overflow: hidden;
  font-weight: 800;
  font-size: 16px;
  isolation: isolate;
  background: rgba(27, 94, 247, .12);  /* pista del anillo, visible sobre header blanco */
}
.header-cta.cta-orbita i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  aspect-ratio: 1;
  z-index: -1;
  background: conic-gradient(transparent 0 50%, rgba(110, 168, 255, .6) 66%, #9CC1FF 78%, #E4EEFF 88%, rgba(110, 168, 255, .6) 96%, transparent 100%);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: ctaOrbita 3.4s linear infinite;
}
@keyframes ctaOrbita { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .header-cta.cta-orbita i { animation: none; } }
.header-cta.cta-orbita span {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--blue);   /* el azul Allora de siempre */
  color: #fff;
  border-radius: 999px;
  padding: 14px 38px;        /* más cuerpo, misma tipografía: destaca sobre el nav */
  border: 1px solid rgba(255, 255, 255, .25);
  transition: background .25s, color .25s;
}
.header-cta.cta-orbita:hover span { background: var(--blue-h); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  background: var(--gray-900);
  border-radius: 2px;
  margin: 5px 0;
  transition: transform .3s var(--ease-smooth), opacity .2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 24px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s var(--ease-smooth);
  }
  body.nav-open .main-nav { transform: translateX(0); }
  .main-nav > a, .nav-drop > button {
    padding: 15px 4px;
    font-size: 18px;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray-100);
  }
  .nav-panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: hidden;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 12px;
    min-width: 0;
    display: none;
  }
  .nav-drop.open .nav-panel { display: block; visibility: visible; transform: none; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .main-nav .header-cta-movil { display: inline-flex; margin-top: 18px; width: 100%; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 1001px) { .main-nav .header-cta-movil { display: none; } }

main { padding-top: var(--header-h); }

/* ── Secciones ────────────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 110px) 0; }
.section-gray { background: var(--gray-50); }
.section-dark { background: var(--gray-900); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: var(--gray-300); }
.section-dark .eyebrow { color: var(--blue-light); }
.section-blue {
  background: linear-gradient(135deg, #1B5EF7 0%, #2A6DF8 55%, #1248D6 100%);
}
.section-blue h2, .section-blue p { color: var(--white); }
.section-blue .eyebrow { color: var(--blue-100); }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }

/* Hero interior (páginas que no son el home) */
.page-hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(27, 94, 247, .07), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(27, 94, 247, .05), transparent 60%),
    var(--white);
}
.page-hero .breadcrumbs {
  font-size: 13.5px;
  color: var(--gray-500);
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.page-hero .breadcrumbs a { color: var(--gray-500); font-weight: 500; }
.page-hero .breadcrumbs a:hover { color: var(--blue); }
.page-hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 900; letter-spacing: -.02em; max-width: 900px; }
.page-hero .lead { max-width: 720px; }

/* ── Tarjetas y grids ─────────────────────────────────────────────────── */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-smooth), box-shadow .3s;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
}
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--gray-600); margin: 0; }
.card .card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
}
.card-img { overflow: hidden; padding: 0; }
.card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.card-img .card-body { padding: 24px 26px 28px; }

.section-dark .card {
  background: var(--gray-800);
  border-color: rgba(255, 255, 255, .06);
}
.section-dark .card h3 { color: var(--white); }
.section-dark .card p { color: var(--gray-400); }

/* Lista de checks */
/* Checklist: puntos AZULES discretos (Pedro tachó los checks verdes: rompían la estética) */
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checklist li { position: relative; padding: 8px 0 8px 28px; font-size: 16.5px; transition: transform .2s ease; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(27, 94, 247, .12);
  transition: box-shadow .25s ease, background .25s ease;
}
.checklist li:hover { transform: translateX(3px); }
.checklist li:hover::before { background: var(--blue-h); box-shadow: 0 0 0 6px rgba(27, 94, 247, .16); }
.section-dark .checklist li::before { background: #6EA8FF; box-shadow: 0 0 0 4px rgba(110, 168, 255, .16); }
.section-dark .checklist li:hover::before { background: #9CC1FF; box-shadow: 0 0 0 6px rgba(110, 168, 255, .22); }

/* Timeline proceso */
.steps { counter-reset: step; display: grid; gap: 22px; }
.step {
  position: relative;
  padding: 26px 26px 26px 86px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 19px; margin-bottom: 6px; }
.step p { font-size: 15.5px; margin: 0; color: var(--gray-600); }

/* FAQ acordeón */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-weight: 700;
  font-size: 17px;
  color: var(--gray-900);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  color: var(--blue);
  transition: transform .3s var(--ease-smooth);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-body { padding: 0 24px 22px; font-size: 15.5px; color: var(--gray-600); }

/* Cita / testimonio */
.quote {
  border-left: 4px solid var(--blue);
  background: var(--blue-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 22px 26px;
  font-size: 16.5px;
  color: var(--gray-700);
  font-style: italic;
  margin: 0 0 1.2em;
}
.quote footer { font-style: normal; font-weight: 700; color: var(--gray-900); margin-top: 10px; font-size: 14.5px; }

/* Stats */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
@media (max-width: 900px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat-num { font-size: clamp(34px, 4.5vw, 52px); font-weight: 900; color: var(--white); line-height: 1; }
.stat-label { font-size: 14.5px; color: var(--blue-100); margin-top: 8px; font-weight: 600; }

/* CTA banda final */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(30px, 4.5vw, 50px); font-weight: 900; max-width: 850px; margin: 0 auto 18px; }
.cta-band .lead { color: var(--blue-100); max-width: 640px; margin: 0 auto 34px; }

/* Prose (blog y legales) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 1.6em 0 .6em; }
.prose h3 { font-size: clamp(20px, 2.4vw, 25px); margin: 1.4em 0 .5em; }
.prose img { border-radius: var(--r-md); margin: 1.4em 0; }
.prose ul, .prose ol { padding-left: 26px; margin-bottom: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  border-left: 4px solid var(--blue);
  margin: 1.4em 0;
  padding: 4px 0 4px 22px;
  color: var(--gray-600);
  font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--gray-200); padding: 10px 14px; text-align: left; }
.prose th { background: var(--gray-50); font-weight: 700; }
.prose a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue-200); text-underline-offset: 3px; }

/* Tarjeta post en el índice del blog */
.post-card { display: flex; flex-direction: column; }
.post-card .post-meta { font-size: 13px; color: var(--gray-500); font-weight: 600; margin-bottom: 8px; }
.post-card h3 { font-size: 19px; line-height: 1.3; }
.post-card h3 a { color: var(--gray-900); }
.post-card h3 a:hover { color: var(--blue); }
.post-card .post-excerpt { font-size: 15px; flex: 1; }
.post-card .post-link { font-weight: 700; font-size: 15px; margin-top: 14px; }

/* ── Formularios ──────────────────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 4vw, 42px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 15.5px; font-weight: 700; color: var(--gray-900); }
.form-field input, .form-field textarea {
  font-family: var(--font);
  font-size: 17px;
  padding: 18px 20px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-sm);
  background: var(--gray-50);
  color: var(--gray-900);
  transition: border-color .2s, background .2s, box-shadow .2s;
  width: 100%;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px var(--blue-50);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-legal { font-size: 12.5px; color: var(--gray-500); }
.form-legal a { text-decoration: underline; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--gray-600); margin: 4px 0 18px; cursor: pointer; }
.form-consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.form-consent a { color: var(--blue); text-decoration: underline; }
.form-status { font-size: 15px; font-weight: 600; min-height: 22px; }
.form-status.ok { color: var(--green); }
.form-status.error { color: var(--red); }

/* Modal de diagnóstico global */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 15, 30, .62);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 760px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(26px, 4vw, 40px);
  position: relative;
  animation: modal-in .35s var(--ease-bounce);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: none; }
}
/* Barra superior tipo navegador: la X pegada a la esquina izquierda */
.modal-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: calc(-1 * clamp(26px, 4vw, 40px)) calc(-1 * clamp(26px, 4vw, 40px)) 22px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.modal-bar-tit {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 600;
  margin-right: 40px; /* compensa la X para que el texto quede centrado */
}
.modal-close {
  position: static;
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { background: var(--gray-200); }
.modal-box h3 { font-size: 30px; margin-bottom: 8px; }
.modal-box .modal-sub { font-size: 16.5px; color: var(--gray-600); margin-bottom: 28px; }

/* ===== Formulario "glass" premium (popup + formularios destacados) =====
   Tarjeta de cristal azul oscuro con haces de luz que recorren el borde.
   Solo transform (GPU) → sin glitch. Opt-in con .form-glass (los funnels no se tocan). */
.form-glass {
  position: relative;
  background: linear-gradient(165deg, #111C36 0%, #0A0F1E 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 40px 90px -30px rgba(4, 10, 30, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.form-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(85% 55% at 50% -8%, rgba(27, 94, 247, .25), transparent 62%),
    radial-gradient(60% 40% at 100% 110%, rgba(27, 94, 247, .12), transparent 60%);
}
.form-glass > * { position: relative; z-index: 1; }
.fg-beams {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.fg-beams i { position: absolute; display: block; filter: blur(2px); }
.fg-beams i:nth-child(1) { top: 0; left: 0; height: 3px; width: 50%; background: linear-gradient(90deg, transparent, rgba(190, 215, 255, .9), transparent); transform: translateX(-100%); animation: fgIzq 4.2s ease-in-out infinite; }
.fg-beams i:nth-child(2) { top: 0; right: 0; width: 3px; height: 50%; background: linear-gradient(180deg, transparent, rgba(190, 215, 255, .9), transparent); transform: translateY(-100%); animation: fgBaja 4.2s ease-in-out infinite 1.05s; }
.fg-beams i:nth-child(3) { bottom: 0; left: 0; height: 3px; width: 50%; background: linear-gradient(90deg, transparent, rgba(190, 215, 255, .9), transparent); transform: translateX(300%); animation: fgDer 4.2s ease-in-out infinite 2.1s; }
.fg-beams i:nth-child(4) { bottom: 0; left: 0; width: 3px; height: 50%; background: linear-gradient(180deg, transparent, rgba(190, 215, 255, .9), transparent); transform: translateY(300%); animation: fgSube 4.2s ease-in-out infinite 3.15s; }
@keyframes fgIzq { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(300%); } }
@keyframes fgBaja { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(300%); } }
@keyframes fgDer { 0% { transform: translateX(300%); } 55%, 100% { transform: translateX(-100%); } }
@keyframes fgSube { 0% { transform: translateY(300%); } 55%, 100% { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .fg-beams i { animation: none; display: none; } }

/* Campos sobre el cristal oscuro */
.form-glass .form-field label { color: #C7D4E8; }
.form-glass .form-field input, .form-glass .form-field textarea {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .13);
  color: #fff;
}
.form-glass .form-field input::placeholder, .form-glass .form-field textarea::placeholder { color: rgba(255, 255, 255, .35); }
.form-glass .form-field input:focus, .form-glass .form-field textarea:focus {
  background: rgba(255, 255, 255, .09);
  border-color: #6EA8FF;
  box-shadow: 0 0 0 4px rgba(27, 94, 247, .25);
}
.form-glass .form-field input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100px #111C36;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}
.form-glass .form-consent { color: #94A3B8; }
.form-glass .form-consent a { color: #6EA8FF; }
.form-glass .form-legal { color: #7C8CA6; }
.form-glass .form-status.ok { color: #4ADE80; }
.form-glass .form-status.error { color: #FCA5A5; }
.modal-box.form-glass h3 { color: #fff; }
.modal-box.form-glass .modal-sub { color: #94A3B8; }
.modal-box.form-glass .modal-close { background: rgba(255, 255, 255, .09); color: #E2E8F0; z-index: 2; }
.modal-box.form-glass .modal-close:hover { background: rgba(255, 255, 255, .18); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--gray-900); color: var(--gray-400); padding: 70px 0 0; font-size: 14.5px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
}
.footer-col--ancha .dos-cols { columns: 2; column-gap: 26px; }
.footer-col--ancha .dos-cols li { break-inside: avoid; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 34px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: var(--gray-400); font-size: 14.5px; max-width: 300px; }
.footer-col h4 {
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--gray-400); font-weight: 500; }
.footer-col a:hover { color: var(--white); }
.footer-contact li { display: flex; gap: 9px; align-items: baseline; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
}
.footer-social a:hover { background: var(--blue); color: var(--white); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gray-500);
}
.footer-bottom a { color: var(--gray-500); }
.footer-bottom a:hover { color: var(--gray-300); }

/* ── Animaciones de scroll ────────────────────────────────────────────── */
[data-anim] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth); }
[data-anim].in { opacity: 1; transform: none; }
[data-anim="fade"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; transform: none; transition: none; }
  .btn-pulse { animation: none; }
  html { scroll-behavior: auto; }
}


/* ── Polish (Emil / furiareports) ─────────────────────────────────────── */
:root { --ease-out-strong: cubic-bezier(.23, 1, .32, 1); }

/* Stagger de aparición para tarjetas hermanas dentro de grids */
.grid > [data-anim]:nth-child(2) { transition-delay: 60ms; }
.grid > [data-anim]:nth-child(3) { transition-delay: 120ms; }
.grid > [data-anim]:nth-child(4) { transition-delay: 180ms; }
.grid > [data-anim]:nth-child(5) { transition-delay: 240ms; }
.grid > [data-anim]:nth-child(6) { transition-delay: 300ms; }

/* Carrusel con física nativa (scroll-snap), sin barra visible */
.carrusel {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 16px 0 22px;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: min(420px, 82vw);
}
.carrusel > *:first-child { margin-left: max(24px, calc((100vw - 1200px) / 2 + 24px)); }
.carrusel > *:last-child { margin-right: max(24px, calc((100vw - 1200px) / 2 + 24px)); }

/* Inclinación 3D para mockups (se aplana en pantallas medias) */
.tilt-3d {
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform 350ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .tilt-3d:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
}
.tilt-3d-der { transform: perspective(1400px) rotateY(6deg) rotateX(2deg); }
@media (max-width: 1020px) {
  .tilt-3d, .tilt-3d-der { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grid > [data-anim] { transition-delay: 0ms; }
  .tilt-3d, .tilt-3d-der { transform: none; transition: none; }
  .btn:active { transform: none; }
}


/* ── Reveals en cascada (rv) y titulares palabra a palabra (w-split) ──── */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s var(--ease-out-strong), transform .65s var(--ease-out-strong);
  transition-delay: var(--rvd, 0ms);
}
.rv.in { opacity: 1; transform: none; }

.w-split .wr {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em);
  filter: blur(6px);
  transition: opacity .5s ease, transform .6s var(--ease-out-strong), filter .45s ease;
  transition-delay: calc(var(--wi, 0) * 45ms);
}
.w-split.in .wr { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .w-split .wr { opacity: 1; transform: none; filter: none; transition: none; }
}


/* ── Brillo que sigue al ratón ─────────────────────────────────────────── */
#cursorGlow {
  position: fixed;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(27, 94, 247, .20), rgba(27, 94, 247, .07) 42%, transparent 68%);
  filter: blur(64px);
  will-change: transform;
  opacity: 0;
  transition: opacity .6s ease, background .35s ease;
}
#cursorGlow.glow-blanco {
  background: radial-gradient(circle, rgba(110, 168, 255, .32), rgba(110, 168, 255, .12) 42%, transparent 68%);
}
@media (max-width: 1000px) { #cursorGlow { display: none; } }


/* El glow del cursor pasa POR DEBAJO del contenido (como en furiareports) */
main .container, .multichannel__inner, .site-footer .container, .header-inner, main .carrusel {
  position: relative;
  z-index: 2;
}


/* ── Variantes de hero interior (nivel agencia) ───────────────────────── */
.page-hero--dark {
  background:
    radial-gradient(55% 70% at 85% 15%, rgba(27, 94, 247, .30), transparent 65%),
    radial-gradient(45% 60% at 8% 90%, rgba(110, 168, 255, .14), transparent 60%),
    linear-gradient(180deg, #0A0F1E 0%, #0F172A 100%);
  position: relative;
  overflow: hidden;
}
.page-hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, black 25%, transparent 75%);
  pointer-events: none;
}
.page-hero--dark h1 { color: #fff; }
.page-hero--dark .lead { color: #94A3B8; }
.page-hero--dark .breadcrumbs, .page-hero--dark .breadcrumbs a { color: #64748B; }
.page-hero--dark .eyebrow { color: #6EA8FF; }

.page-hero--tinta {
  background:
    radial-gradient(60% 90% at 90% 0%, rgba(27, 94, 247, .14), transparent 60%),
    radial-gradient(45% 70% at 0% 100%, rgba(27, 94, 247, .10), transparent 55%),
    linear-gradient(180deg, var(--white), var(--blue-50) 130%);
  position: relative;
  overflow: hidden;
}

/* Chips de cristal flotantes para heros y mocks */
.chip-flotante {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(15, 23, 42, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 11px 16px;
  color: #E2E8F0;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  animation: chip-flota 6s ease-in-out infinite alternate;
}
.chip-flotante--claro {
  background: rgba(255, 255, 255, .85);
  border-color: var(--gray-200);
  color: var(--gray-800);
  box-shadow: var(--shadow-md);
}
@keyframes chip-flota { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* Flujos SVG animados (antes solo en el home) — trazos punteados fluyendo */
@keyframes cxSpin { to { transform: rotate(360deg); } }
@keyframes cxFlow { to { stroke-dashoffset: -12; } }
.flujo { stroke-dasharray: .6 11.4; animation: cxFlow .9s linear infinite; stroke-linecap: round; fill: none; }
.flujo--lento { animation-duration: 1.4s; }
.orbita-giro { transform-box: view-box; transform-origin: center; animation: cxSpin 80s linear infinite; }

/* Línea que se dibuja al entrar en viewport (usar con JS que añada .dibujada) */
.traza { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.8s var(--ease-out-strong); fill: none; }
.traza.dibujada { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .chip-flotante { animation: none; }
  .flujo, .orbita-giro { animation: none; }
  .traza { stroke-dashoffset: 0; transition: none; }
}


/* ── Componentes claros usados en secciones oscuras: contraste correcto ── */
.section-dark .step { background: var(--gray-800); border-color: rgba(255, 255, 255, .07); box-shadow: none; }
.section-dark .step h3 { color: #fff; }
.section-dark .step p { color: var(--gray-400); }
.section-dark .step::before { color: var(--blue-light); }
.section-dark .checklist li { color: var(--gray-300); }
.section-dark .faq-item { background: var(--gray-800); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.section-dark .faq-item summary { color: #fff; }
.section-dark .faq-item .faq-body { color: var(--gray-400); }
.section-dark .quote { background: rgba(27, 94, 247, .14); color: var(--gray-300); }
.section-dark .quote footer { color: #fff; }
.section-dark .prose, .section-dark .form-legal { color: var(--gray-300); }
.section-dark .post-card h3 a { color: #fff; }
.section-dark .post-card .post-excerpt, .section-dark .post-meta { color: var(--gray-400); }


/* ── Componentes de blog rico (patrón furiareports adaptado) ──────────── */
.rprog { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); z-index: 950; width: 0; transition: width 80ms linear; }

.keypts {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin: 0 0 28px;
}
.keypts h2, .keypts h3 { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.keypts ul { list-style: none; margin: 0; padding: 0; }
.keypts li { position: relative; padding: 5px 0 5px 28px; font-size: 15.5px; color: var(--gray-700); }
.keypts li::before { content: "→"; position: absolute; left: 2px; color: var(--blue); font-weight: 700; }

.toc {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 18px 24px;
  margin: 0 0 30px;
  font-size: 14.5px;
}
.toc strong { display: block; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin-bottom: 5px; }
.toc a { color: var(--gray-700); font-weight: 600; text-decoration: none; }
.toc a:hover { color: var(--blue); }

.shot { margin: 1.6em 0; }
.shot img, .shot video { width: 100%; border-radius: var(--r-md); border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); display: block; }
.shot figcaption { font-size: 13px; color: var(--gray-500); margin-top: 10px; text-align: center; }

.destacado {
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--blue), var(--blue-h));
  color: #fff;
  padding: 26px 30px;
  margin: 1.8em 0;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.destacado b { font-size: clamp(34px, 4vw, 46px); font-weight: 900; letter-spacing: -.02em; }
.destacado span { font-size: 15.5px; color: var(--blue-100); max-width: 420px; }

.inline-cta {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin: 2em 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--gray-50);
}
.inline-cta p { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--gray-800); max-width: 480px; }

.authorbox {
  display: flex;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--gray-200);
  margin-top: 40px;
  padding-top: 26px;
}
.authorbox img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.authorbox b { display: block; color: var(--gray-900); }
.authorbox p { margin: 2px 0 0; font-size: 14px; color: var(--gray-600); }


/* Botones outline legibles sobre fondos oscuros */
.page-hero--dark .btn-outline, .section-dark .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
}
.page-hero--dark .btn-outline:hover, .section-dark .btn-outline:hover {
  color: var(--blue-light);
  border-color: var(--blue-light);
}


/* Enlaces inline legibles sobre fondos oscuros */
.section-dark a:not(.btn), .page-hero--dark a:not(.btn):not(.breadcrumbs a),
.site-footer .footer-col a, [class*="--dark"] a:not(.btn) {
  color: var(--blue-light);
}
.section-dark a:not(.btn):hover, .page-hero--dark a:not(.btn):hover { color: #9BC2FF; }



/* ===== Líneas de datos sutiles en el hero (sin recuadros, sin números) ===== */
.allora-root .hero-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  animation: hl-flota 12s ease-in-out infinite alternate;
}
.allora-root .hl-linea {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: hl-dibuja 2.6s cubic-bezier(.16, 1, .3, 1) .9s forwards;
}
.allora-root .hl-haloarea { opacity: 0; animation: hl-aparece 2s ease 2.1s forwards; }
.allora-root .hl-glow { animation: hl-media 2.2s ease 2s forwards; }
.allora-root .hl-barras rect { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; animation: hl-sube .9s cubic-bezier(.16,1,.3,1) forwards; }
.allora-root .hl-barras rect:nth-of-type(1) { animation-delay: 0.70s; }
.allora-root .hl-barras rect:nth-of-type(2) { animation-delay: 0.79s; }
.allora-root .hl-barras rect:nth-of-type(3) { animation-delay: 0.88s; }
.allora-root .hl-barras rect:nth-of-type(4) { animation-delay: 0.97s; }
.allora-root .hl-barras rect:nth-of-type(5) { animation-delay: 1.06s; }
.allora-root .hl-barras rect:nth-of-type(6) { animation-delay: 1.15s; }
.allora-root .hl-barras rect:nth-of-type(7) { animation-delay: 1.24s; }
.allora-root .hl-barras rect:nth-of-type(8) { animation-delay: 1.33s; }
.allora-root .hl-barras rect:nth-of-type(9) { animation-delay: 1.42s; }
.allora-root .hl-barras rect:nth-of-type(10) { animation-delay: 1.51s; }
.allora-root .hl-barras rect:nth-of-type(11) { animation-delay: 1.60s; }
.allora-root .hl-barras rect:nth-of-type(12) { animation-delay: 1.69s; }
@keyframes hl-sube { to { transform: scaleY(1); } }
.allora-root .hl-punto { opacity: 0; animation: hl-aparece .8s ease 3.4s forwards, hl-late 2.8s ease-in-out 4.2s infinite; }
@keyframes hl-dibuja { to { stroke-dashoffset: 0; } }
@keyframes hl-aparece { to { opacity: 1; } }
@keyframes hl-media { to { opacity: .25; } }
@keyframes hl-late { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hl-flota { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (max-width: 1100px) { .allora-root .hero-lines { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .allora-root .hero-lines { animation: none; }
  .allora-root .hl-linea { stroke-dashoffset: 0; animation: none; }
  .allora-root .hl-haloarea, .allora-root .hl-glow, .allora-root .hl-punto { opacity: 1; animation: none; }
  .allora-root .hl-barras rect { transform: none; animation: none; }
}


/* cursor de agarre en toda la sección del muro (texto excluido) */
.allora-root .hero-wall.hw-js {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.allora-root .hero-wall.hw-js.agarrado { cursor: grabbing; }
.allora-root .hero-wall.hw-js .hero-wall__content { cursor: auto; }
.allora-root .hero-wall.hw-js .hero-wall__content a,
.allora-root .hero-wall.hw-js .hero-wall__content button,
.allora-root .hero-wall.hw-js .hero-wall__content [data-form-open] { cursor: pointer; }


/* El glow del cursor va SIEMPRE por debajo del contenido de cada sección */
.allora-root main > section, .allora-root main > header,
main > section, main > header, .site-footer { position: relative; }
.allora-root main > section > .container,
.allora-root main > header > .container,
main > section > .container, main > header > .container,
.ia-banda__grid, .hero-wall__content, .site-footer .container,
.cruce__grid, .multichannel__inner { position: relative; z-index: 1; }
/* Blindaje total: CUALQUIER recuadro/tarjeta queda SIEMPRE por encima del halo,
   en toda la web, esté donde esté (no depende de su contenedor). */
main .card, main [class*="-card"], main .form-card, main article,
main .pv-mock, main .pv-stage, main .dwx-browser, main .dwx-stage,
main table, main .biz-lane, main .faq-item, main details { position: relative; z-index: 1; }


/* ===== Bloque "fundador / quién lleva tu cuenta" con foto de Pedro (reutilizable) ===== */
.fnd { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 4.2vw, 60px); align-items: center; }
.fnd__photo { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 1/1; max-width: 440px; width: 100%;
  background: radial-gradient(120% 120% at 50% 0, #2D6BFF, #1B5EF7 55%, #1248D6);
  box-shadow: 0 34px 80px -30px rgba(27, 94, 247, .55); }
.fnd__photo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .16), transparent 55%); pointer-events: none; }
.fnd__photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fnd__badge { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10, 15, 30, .55); backdrop-filter: blur(6px); color: #fff; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; }
.fnd__badge b { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: fndPulse 2s infinite; }
@keyframes fndPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.fnd__chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 26px; }
.fnd__chips span { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 999px; background: var(--blue-50); color: var(--blue-h); font-weight: 700; font-size: 13.5px; }
.section-dark .fnd__chips span { background: rgba(110, 168, 255, .14); color: #BBD4FF; }
.fnd__body h2 { margin-bottom: 14px; }
@media (max-width: 820px) { .fnd { grid-template-columns: 1fr; gap: 26px; justify-items: center; text-align: center; } .fnd__chips { justify-content: center; } .fnd__body { text-align: left; } }


/* El texto del hero no bloquea el arrastre: solo capturan sus enlaces/botones */
.allora-root .hero-wall.hw-js .hero-wall__content { pointer-events: none; }
.allora-root .hero-wall.hw-js .hero-wall__content a,
.allora-root .hero-wall.hw-js .hero-wall__content button,
.allora-root .hero-wall.hw-js .hero-wall__content [data-form-open] { pointer-events: auto; }


/* ===== Tarjetas con borde reactivo al cursor (azul Allora) ===== */
/* Coordenadas globales del puntero (las setea main.js en :root) */
.glow-card {
  position: relative;
  --gc-x: 50;
  --gc-y: 50;
  --gc-size: 240;
}
/* borde iluminado: capa ::before con máscara solo-borde */
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    calc(var(--gc-size) * 1px) calc(var(--gc-size) * 1px) at
    calc(var(--gc-x) * 1px) calc(var(--gc-y) * 1px),
    rgba(110, 168, 255, .9), rgba(27, 94, 247, .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;
}
/* resplandor interior sutil que sigue al cursor */
.glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    calc(var(--gc-size) * 1px) calc(var(--gc-size) * 1px) at
    calc(var(--gc-x) * 1px) calc(var(--gc-y) * 1px),
    rgba(27, 94, 247, .10), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.glow-card.gc-cerca::before, .glow-card.gc-cerca::after { opacity: 1; }
/* variante para tarjetas sobre fondo oscuro: borde más brillante */
.section-dark .glow-card::before, [class*="--dark"] .glow-card::before,
.hero-wall .glow-card::before {
  background: radial-gradient(
    calc(var(--gc-size) * 1px) calc(var(--gc-size) * 1px) at
    calc(var(--gc-x) * 1px) calc(var(--gc-y) * 1px),
    rgba(155, 194, 255, 1), rgba(27, 94, 247, .5) 40%, transparent 70%);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .glow-card::before, .glow-card::after { display: none; }
}


/* ===== REGLA (Pedro): entre dos bloques oscuros seguidos, línea de luz + halo =====
   Los :is(style,script) intermedios no pintan pero rompen la adyacencia → se saltan. */
:is(.page-hero--dark, .section-dark) + .section-dark::before,
:is(.page-hero--dark, .section-dark) + :is(style, script) + .section-dark::before,
:is(.page-hero--dark, .section-dark) + :is(style, script) + :is(style, script) + .section-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  width: min(920px, 90%);
  height: 150px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(110, 168, 255, .35) 20%, rgba(210, 228, 255, 1) 50%, rgba(110, 168, 255, .35) 80%, transparent 100%) center top / 100% 2px no-repeat,
    radial-gradient(50% 26px at 50% 0, rgba(155, 194, 255, .65), transparent 72%) center top / 100% 52px no-repeat,
    radial-gradient(50% 100% at 50% 0, rgba(110, 168, 255, .15), rgba(110, 168, 255, .05) 55%, transparent 82%) center top / 82% 100% no-repeat;
}


/* ===== Header móvil: fixes (18-jul) =====
   El backdrop-filter del header lo convertía en containing block del cajón
   position:fixed → el menú salía con altura 0 ("cortado"). En móvil: header
   opaco sin blur, cajón recupera el viewport. + logo más pequeño, CTA orbitante
   fuera (hay CTA propio dentro del cajón), panel de servicios plano. */
@media (max-width: 1000px) {
  :root { --header-h: 70px; }
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .98);
  }
  .header-logo img { height: 28px; }
  .header-cta.cta-orbita { display: none; }
  .nav-panel {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
  }
  .np-hl { display: none; }
}


/* ===== Anillo orbitante SOLO en botones de conversión (popup o /contacto/) =====
   Pedro: "es una página de conversión — esos botones tienen que llamar más la atención".
   main.js añade .btn-orbita a todo .btn con data-form-open o href a /contacto/. */
@property --oa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn-orbita { position: relative; z-index: 0; }
.btn-orbita::before {
  content: "";
  position: absolute;
  inset: -3.5px;
  border-radius: 999px;
  z-index: -1;
  background:
    conic-gradient(from var(--oa), rgba(110, 168, 255, 0) 0 52%, rgba(110, 168, 255, .7) 68%, #CFE0FF 80%, rgba(110, 168, 255, .7) 90%, rgba(110, 168, 255, 0) 100%),
    rgba(27, 94, 247, .16);
  animation: orbGira 3.2s linear infinite;
}
@keyframes orbGira { to { --oa: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn-orbita::before { animation: none; } }


/* Haces de luz en AZUL para tarjetas claras (variante del form-glass) */
.fg-claro i:nth-child(1), .fg-claro i:nth-child(3) { background: linear-gradient(90deg, transparent, rgba(27, 94, 247, .8), transparent); }
.fg-claro i:nth-child(2), .fg-claro i:nth-child(4) { background: linear-gradient(180deg, transparent, rgba(27, 94, 247, .8), transparent); }
/* El modal blanco necesita recorte para los haces y un halo azul sutil arriba */
.modal-box { overflow-x: hidden; }
.modal-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 40% at 50% -6%, rgba(27, 94, 247, .10), transparent 60%); }
.modal-box > * { position: relative; z-index: 1; }


/* ===== Aro de luz orbitante CORRECTO para botones de conversión =====
   Igual que el Contactar del header: línea fina girando POR FUERA, interior sólido.
   main.js envuelve el contenido en .btn-aro__in y añade el giro. */
.btn.btn-aro {
  position: relative;
  overflow: hidden;
  padding: 3px !important;
  background: rgba(27, 94, 247, .14) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 999px;
  isolation: isolate;
}
.btn-aro__giro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280%;
  aspect-ratio: 1;
  z-index: -1;
  background: conic-gradient(transparent 0 50%, rgba(110, 168, 255, .6) 66%, #9CC1FF 78%, #E4EEFF 88%, rgba(110, 168, 255, .6) 96%, transparent 100%);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: ctaOrbita 3.4s linear infinite;
}
.btn-aro__in {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  transition: background .2s;
}
.btn-aro:hover .btn-aro__in { background: var(--blue-h); }
.btn-aro__in--blanca { background: var(--white); color: var(--blue); }
.btn-aro:hover .btn-aro__in--blanca { background: #F1F6FF; color: var(--blue-h); }
@media (prefers-reduced-motion: reduce) { .btn-aro__giro { animation: none; } }


/* ===== .flujo NEUTRALIZADO (19-jul): la animación de guiones era la familia del
   efecto prohibido (stroke-dashoffset). Queda como línea punteada ESTÁTICA. ===== */
.flujo { animation: none !important; stroke-dasharray: 4 8; }
.flujo--lento { animation: none !important; }

/* ── Lightbox abierto: el header se aparta para no tapar la X (movil sobre todo) ── */
.site-header{transition:box-shadow .3s,transform .35s ease}
body.lb-abierta .site-header{transform:translateY(-110%);pointer-events:none}
.pf-lightbox__close,.pf-lb-x{top:calc(18px + env(safe-area-inset-top,0px)) !important}

/* ── Nota de consentimiento (sin checkbox) y banner de cookies ── */
.form-consent--nota{display:block;cursor:default;margin:2px 0 16px}
.ck-banner[hidden]{display:none!important}
.ck-banner{position:fixed;left:16px;right:16px;bottom:18px;z-index:1250;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
 max-width:1040px;margin:0 auto;padding:24px 30px;border-radius:18px;background:rgba(10,16,30,.97);border:1px solid rgba(110,168,255,.3);
 box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(27,94,247,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ck-texto{flex:1 1 380px}
.ck-banner .ck-tit{font-size:17px;font-weight:800;color:#fff;margin:0 0 6px}
.ck-banner p{margin:0;font-size:14.5px;line-height:1.6;color:#CBD5E1}
.ck-banner a{color:#6EA8FF;text-decoration:underline}
.ck-botones{display:flex;gap:8px;flex:none}
.ck-btn{border-radius:11px;padding:14px 26px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:transparent;color:#E2E8F0;transition:background .2s,color .2s}
.ck-btn:hover{background:rgba(255,255,255,.08)}
.ck-btn--si{background:var(--blue);border-color:var(--blue);color:#fff}
.ck-btn--si:hover{background:var(--blue-h)}
@media (max-width:560px){.ck-banner{left:10px;right:10px;bottom:10px;padding:18px 18px}.ck-botones{width:100%}.ck-btn{flex:1;white-space:nowrap;padding:13px 12px;font-size:14px}}

/* ── Newsletter del footer ── */
.nl-box{margin-top:26px;max-width:360px}
.nl-box h4{font-size:15px;color:#fff;margin:0 0 6px}
.nl-sub{font-size:13px;color:rgba(255,255,255,.55);margin:0 0 12px;line-height:1.5}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nl-row{display:flex;gap:8px}
.nl-row input{flex:1;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:14px}
.nl-row input::placeholder{color:rgba(255,255,255,.4)}
.nl-row input:focus{outline:none;border-color:var(--blue);background:rgba(255,255,255,.09)}
.nl-row .btn{padding:12px 18px;font-size:14px;white-space:nowrap}
.nl-status{font-size:13px;margin:8px 0 0;min-height:1em}
.nl-status.ok{color:#4ADE80}
.nl-status.error{color:#F87171}
.nl-consent{font-size:11.5px;color:rgba(255,255,255,.45);margin:8px 0 0;line-height:1.5}
.nl-consent a{color:rgba(255,255,255,.65);text-decoration:underline}

/* ── Modal en pantallas bajas: compacto para que el botón Enviar siempre se vea ── */
@media (max-height:820px){
  .modal-box{max-height:calc(100vh - 20px);padding:20px 26px}
  .modal-bar{margin:-20px -26px 12px}
  .modal-box h3{font-size:21px;margin-bottom:4px}
  .modal-box .modal-sub{font-size:14px;margin-bottom:14px}
  .modal-box form{gap:10px}
  .modal-box input,.modal-box textarea{padding:10px 13px}
  .modal-box textarea{min-height:64px;rows:2}
  .modal-box .form-consent--nota{margin:0 0 8px;font-size:12px}
  .modal-box button[type="submit"]{padding:12px 20px}
}