/* Hero de la landing = hero del sistema Serviscout 2.0 (copiado tal cual). Se carga después de night-glass.css. */

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Tipografía mixta ════ */
/* ── Tipografía mixta (MP2 G.3) ────────────────────────────────────────── */
.ser {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.ser-i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.sw {
  font-family: var(--swap);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.tint {
  color: var(--accent-hi);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.eyebrow::after {
  content: '';
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Marca de agua de la escena ════ */
.scene .watermark {
  position: absolute;
  right: -6vw;
  bottom: -9vw;
  width: 62vw;
  opacity: 0.025;
}
.scene .watermark path {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Cristal Clear ════ */
/* ── Cristal Clear interactivo (MP2 G.2, variante noche) ──────────────── */
.glass {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.07) 100%),
    var(--g-tint);
  -webkit-backdrop-filter: var(--g-backdrop);
  backdrop-filter: var(--g-backdrop);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 1px 0 0 rgba(255, 255, 255, 0.16),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 18px rgba(255, 255, 255, 0.05),
    0 14px 40px rgba(2, 4, 12, 0.45);
}
.glass::before,
.btn::before {
  /* canto iluminado en dos esquinas opuestas con el degradado de azules de Serviscout */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(
    from var(--rim),
    transparent 0 8%,
    var(--sky) 14%,
    #ffffff 19%,
    var(--teal-light) 25%,
    transparent 31% 58%,
    var(--teal-light) 63%,
    #ffffff 68%,
    var(--sky) 74%,
    transparent 81%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  filter: blur(0.4px);
  transition:
    --rim 1.2s var(--ease),
    opacity var(--dur) var(--ease);
}
.glass::after,
.btn::after {
  /* brillo especular superior */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 70% at 18% -10%, rgba(255, 255, 255, 0.26), transparent 46%);
}
.glass:hover::before,
.btn:hover::before {
  --rim: 380deg;
  opacity: 1;
}
/* Refracción SVG (solo Chromium, clase html.lg): SOLO en lo pequeño e interactivo.
   En superficies grandes hunde la fluidez (medido en Nácar: 68 % de fotogramas lentos). */
html.lg :is(.btn, .nav-pill, .nav-lens, .word-pill, .seg, .seg__lens, .icon-btn, .lens-bubble) {
  -webkit-backdrop-filter: url(#lg-s) saturate(125%) brightness(1.06);
  backdrop-filter: url(#lg-s) saturate(125%) brightness(1.06);
}
html.lg .lens-bubble {
  -webkit-backdrop-filter: url(#lg-l) saturate(140%) brightness(1.1);
  backdrop-filter: url(#lg-l) saturate(140%) brightness(1.1);
}

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Botón fantasma ════ */
.btn.ghost {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 22px rgba(2, 4, 12, 0.35);
  color: var(--text);
  animation: none;
}

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Botón grande, icono e iris ════ */
.btn.big {
  min-height: 56px;
  padding: 0 8px 0 26px;
  font-size: 1.02rem;
}
.btn__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.5s var(--spring);
}
.btn:hover .btn__ico {
  transform: translateX(3px) rotate(-8deg);
}
.btn--iris .iris {
  /* halo corporativo girando: degradado de azules (ref. «Join waitlist») */
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from var(--rim), var(--teal), var(--teal-light), var(--sky), var(--navy-mid), var(--sky), var(--teal));
  filter: blur(16px);
  opacity: 0.6;
  animation: girar 6s linear infinite;
}
@keyframes girar {
  to {
    --rim: 560deg;
  }
}

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Iconos ════ */
.ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ico.sm {
  width: 16px;
  height: 16px;
}
.ico.lg {
  width: 26px;
  height: 26px;
}

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Andu ════ */
/* ── Andu: isotipo vivo con anillo de luz corporativo (ref. botón «Home») ── */
.andu {
  --s: 64px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.andu__orb {
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
}
.andu__ring,
.andu__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from var(--spin), var(--teal), var(--teal-light) 18%, #e9fbfd 30%, var(--teal-light) 42%, var(--sky) 62%, var(--navy-mid) 80%, var(--teal));
  animation: rotar var(--speed, 9s) linear infinite;
}
.andu__ring {
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--s) * 0.075), #000 calc(50% - var(--s) * 0.07));
  mask: radial-gradient(circle, transparent calc(50% - var(--s) * 0.075), #000 calc(50% - var(--s) * 0.07));
}
.andu__glow {
  filter: blur(calc(var(--s) * 0.16));
  opacity: var(--glow, 0.45);
  transform: scale(1.04);
}
@keyframes rotar {
  to {
    --spin: 360deg;
  }
}
.andu__core {
  position: absolute;
  inset: calc(var(--s) * 0.075);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, var(--navy-mid) 0%, #20233a 55%, #0d0f1c 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.22),
    inset 0 -6px 14px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}
.andu__core svg {
  width: 72%;
  overflow: visible;
}
.andu__core .stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.andu .label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.andu.escuchando {
  --speed: 2.4s;
  --glow: 0.8;
}
.andu.escuchando .andu__orb {
  animation: respirar 1.1s ease-in-out infinite;
}
.andu.escuchando .andu__orb::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(60, 200, 216, 0.6);
  animation: onda 1.5s ease-out infinite;
}
.andu.transcribiendo {
  --speed: 4s;
  --glow: 0.6;
}
.andu.transcribiendo .main {
  stroke-dasharray: 60 22;
  animation: trazo 1.2s linear infinite;
}
.andu.comprendiendo {
  --speed: 6s;
}
.andu.comprendiendo .andu__glow {
  animation:
    rotar 6s linear infinite,
    brillo 2.4s ease-in-out infinite;
}
.andu.analizando {
  --speed: 1.6s;
  --glow: 0.7;
}
.andu.analizando .main {
  stroke-dasharray: 8 14;
  animation: trazo 0.9s linear infinite;
}
.andu.confirmando .check {
  animation: parpadeo 1s ease-in-out infinite;
}
.andu.proponiendo .andu__orb {
  animation: flotarY 1.8s ease-in-out infinite;
}
.andu.conectando {
  --speed: 1.2s;
  --glow: 0.85;
}
.andu.conectando .main {
  stroke-dasharray: 120 40;
  animation: trazo 0.8s linear infinite;
}
.andu.validado .andu__ring,
.andu.validado .andu__glow {
  background: conic-gradient(from var(--spin), var(--ok), var(--teal-light), var(--teal), var(--ok));
}
.andu.validado {
  --glow: 0.75;
}
.andu.escalado .andu__ring,
.andu.escalado .andu__glow {
  background: conic-gradient(from var(--spin), var(--sky), var(--navy-mid) 30%, var(--sky) 55%, #e9fbfd 70%, var(--sky));
}
.andu.escalado {
  --speed: 14s;
}
@keyframes respirar {
  50% {
    transform: scale(1.05);
  }
}
@keyframes onda {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.45);
    opacity: 0;
  }
}
@keyframes trazo {
  to {
    stroke-dashoffset: -164;
  }
}
@keyframes brillo {
  50% {
    opacity: 0.85;
  }
}
@keyframes parpadeo {
  50% {
    opacity: 0.25;
  }
}
@keyframes flotarY {
  50% {
    transform: translateY(-5px);
  }
}

/* ════ Copia literal de SERVISCOUT 2.0 PLATAFORMA/web/src/styles.css · Portada ════ */
/* ── Portada ─────────────────────────────────────────────────────────── */
.hero {
  /* Cabe entero en la pantalla del ordenador (debajo de la barra flotante), sin scroll: los tamaños
     dependen también del alto de la ventana, así que en portátiles bajos se encogen y en pantallas
     altas quedan como siempre. */
  position: relative;
  min-height: calc(100dvh - var(--page-top));
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: clamp(4px, 2vh, 20px) 0 clamp(16px, 4vh, 40px);
}
.hero .eyebrow {
  margin-bottom: clamp(10px, 2vh, 16px);
}
.hero h1 {
  font-size: clamp(2.2rem, min(5.6vw, 9vh), 5.4rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.98;
  margin-bottom: clamp(14px, 3vh, 26px);
}
.hero h1 .ser-i {
  font-size: 1.08em;
}
.hero .lede {
  margin: 0;
  font-size: clamp(0.95rem, min(1.2vw, 2.3vh), 1.18rem);
  color: var(--text-dim);
  max-width: 34em;
  line-height: 1.6;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(16px, 3.6vh, 32px);
}
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(420px, 62vh);
}
.hero__visual .andu {
  /* Andu escala con el alto de la pantalla (250 px en pantallas altas) */
  --s: clamp(150px, 34vh, 250px) !important;
}
.word-pill {
  /* «thinkers»: palabra serif en píldora de cristal que brilla (MP2 G.3) */
  position: relative;
  display: inline-block;
  padding: 0.02em 0.24em 0.1em;
  margin: 0 0.04em;
  border-radius: 0.42em;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 24px rgba(255, 255, 255, 0.1),
    0 0 70px rgba(60, 200, 216, 0.35);
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.7);
}
.word-pill .light {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -0.32em;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.8);
}
.giant {
  /* marca de agua tipográfica que la lente refracta (refs. «Hello», «Liquid glass») */
  position: absolute;
  inset: auto 0 6%;
  text-align: center;
  font-weight: 200;
  font-size: clamp(5rem, min(15vw, 26vh), 15rem);
  letter-spacing: -0.07em;
  line-height: 0.8;
  color: rgba(238, 241, 248, 0.13);
  pointer-events: none;
  user-select: none;
}
.lens-bubble {
  --lens: clamp(110px, 21vh, 160px);
  position: absolute;
  left: calc(50% - var(--lens) / 2);
  bottom: calc(6% - 18px);
  z-index: 2;
  width: var(--lens);
  height: var(--lens);
  border-radius: 50%;
  pointer-events: none;
  --g-tint: rgba(255, 255, 255, 0.02);
  transition: transform 1.2s var(--ease);
  animation: deriva 14s ease-in-out infinite alternate;
}
@keyframes deriva {
  0% {
    translate: -140px 30px;
  }
  50% {
    translate: 60px -40px;
  }
  100% {
    translate: 150px 50px;
  }
}
.fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fireflies i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(60, 200, 216, 0.85);
  opacity: 0;
  animation: luz 7s ease-in-out infinite;
}
@keyframes luz {
  0%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
  30% {
    opacity: 0.95;
  }
  60% {
    opacity: 0.3;
    transform: translate(14px, -26px);
  }
}

/* ════ Copia literal · responsive de la portada (styles.css, @media 1000px y 760px) ════ */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero__visual {
    min-height: clamp(220px, 34vh, 300px);
    order: -1;
  }
  .hero__visual .andu {
    --s: clamp(140px, 26vh, 200px) !important;
  }
}
@media (max-width: 760px) {
  .lens-bubble {
    --lens: 110px;
  }
}

/* ════ Encaje en la landing (lo único que NO es copia literal) ════
   Variables que la plataforma define en su :root, el contenedor .page (aquí la cabecera es la píldora fija de la landing),
   la base de h1 de la plataforma, los botones magnéticos y el enlace al ejemplo de comparativa (CH01). */
:root {
  --accent: var(--teal);
  --accent-hi: var(--teal-light);
  --accent-glow: rgba(8, 178, 201, 0.35);
  --g-tint: rgba(255, 255, 255, 0.04);
  --g-backdrop: blur(2px) saturate(125%) brightness(1.06);
  --dur: 0.5s;
  --radius: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
}
#hero { position: relative; overflow: hidden; }
.hero-pagina { --page-top: calc(var(--nav-alto) + 22px); position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: var(--page-top) 28px 0; }
.hero h1 { color: var(--text); text-wrap: balance; }
.hero__cta .btn { font-weight: 500; }
.btn:hover .btn__ico svg { transform: none; }
.btn { translate: var(--tx, 0) var(--ty, 0); transition: transform 0.35s var(--spring), translate 0.45s var(--spring), box-shadow 0.4s var(--ease), background-color 0.3s var(--ease); }
.btn-primary, .nav-cta, .cta-btn-main.find { animation-delay: var(--shimmer-delay, 0s); }
.hero-intro-enlace { display: inline-flex; gap: 6px; margin-top: clamp(14px, 2.6vh, 24px); color: #fff; font-weight: 500; font-size: 15px; text-decoration: underline; text-decoration-color: rgba(60, 200, 216, 0.7); text-underline-offset: 4px; }
.hero-intro-enlace:hover { color: var(--teal-light); }
@media (max-width: 760px) { .hero-pagina { --page-top: calc(56px + 22px); padding: var(--page-top) 16px 0; } }
/* Teléfonos (≤ 480 px): el titular de la landing es más largo que el de la plataforma; Andu algo más pequeño
   para que el botón «Encuentra tu asesoría» quepa sin scroll también en 360 × 740 (T01). */
@media (max-width: 480px) {
  .hero { gap: 10px; padding-top: 6px; }
  .hero__visual { min-height: clamp(150px, 22vh, 220px); }
  .hero__visual .andu { --s: clamp(112px, 17vh, 160px) !important; }
  .lens-bubble { --lens: 84px; }
  /* el reflejo bajo «encaja» caería sobre las letras de la línea siguiente (medido en 360 px) */
  .hero h1 .word-pill .light { display: none; }
}
/* Una columna (≤ 1000 px): Andu va encima del titular; la burbuja no baja de su zona para no pasar por delante del texto. */
@media (max-width: 1000px) {
  .lens-bubble { bottom: 2%; }
  @keyframes deriva {
    0% { translate: -110px 0; }
    50% { translate: 50px -30px; }
    100% { translate: 120px -6px; }
  }
}