/* ==========================================================================
   Polo IT — Sistema visual
   --------------------------------------------------------------------------
   Página clara y editorial: fondo casi blanco con tinte frío, titulares en
   mayúsculas, etiquetas y botones tipo píldora, y esquinas muy redondeadas.
   Las "pantallas" de producto (editor, métricas, demos) son oscuras, como
   fotos de producto sobre papel. El azul del logo es el único color de marca.
   Tailwind resuelve layout y espaciados; aquí viven los componentes y los
   estados que usa el JS. Escrito mobile-first.
   ========================================================================== */

/* ---------- 1. Tokens y temas ---------- */
/* Los colores que cambian con el tema son canales RGB (--c-*): Tailwind los usa con
   opacidad (tailwind.config.js) y el CSS de abajo a través de los alias (--bg, --ink…).
   Tema: claro por defecto; oscuro con [data-theme="dark"] (elección del usuario,
   ver theme.js) o, sin elección guardada ni JS, si el sistema está en modo oscuro. */
:root {
  color-scheme: light;
  --c-canvas: 247 248 252;
  --c-surface: 255 255 255;
  --c-navy-950: 10 18 48;
  --c-navy-900: 16 26 61;
  --c-navy-700: 50 59 92;
  --c-navy-500: 91 100 130;
  --c-navy-400: 136 144 170;
  --c-navy-200: 221 226 238;
  --c-navy-100: 235 238 246;
  --c-navy-50: 244 246 251;
  --c-contrast: 10 18 48;
  --c-on-contrast: 255 255 255;
  --c-brand: 10 92 255;
  --c-brand-soft: 231 239 255;

  /* Alias usados por los componentes */
  --bg: rgb(var(--c-canvas));
  --card: rgb(var(--c-surface));
  --ink: rgb(var(--c-navy-950));
  --text: rgb(var(--c-navy-500));
  --line: rgb(var(--c-navy-200));
  --line-soft: rgb(var(--c-navy-100));
  --brand: rgb(var(--c-brand));
  --contrast: rgb(var(--c-contrast));
  --on-contrast: rgb(var(--c-on-contrast));

  /* Fijos en los dos temas */
  --btn-brand: #0a5cff;       /* fondo de botones: el texto blanco necesita este azul */
  --brand-dark: #0647c9;
  --brand-cyan: #00c8f0;
  --screen: #0d1120;          /* pantallas de producto, siempre oscuras */
  --ink-fixed: #0a1230;       /* texto oscuro sobre blanco (botón claro, controles de las demos) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Paleta oscura (se repite: una vez por elección explícita y otra por preferencia del sistema) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-canvas: 7 11 26;
  --c-surface: 14 20 40;
  --c-navy-950: 238 241 248;
  --c-navy-900: 223 228 240;
  --c-navy-700: 195 201 218;
  --c-navy-500: 154 163 189;
  --c-navy-400: 138 147 174;
  --c-navy-200: 38 48 77;
  --c-navy-100: 27 35 60;
  --c-navy-50: 18 26 48;
  --c-contrast: 238 241 248;
  --c-on-contrast: 10 18 48;
  --c-brand: 61 123 255;
  --c-brand-soft: 20 35 78;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-canvas: 7 11 26;
    --c-surface: 14 20 40;
    --c-navy-950: 238 241 248;
    --c-navy-900: 223 228 240;
    --c-navy-700: 195 201 218;
    --c-navy-500: 154 163 189;
    --c-navy-400: 138 147 174;
    --c-navy-200: 38 48 77;
    --c-navy-100: 27 35 60;
    --c-navy-50: 18 26 48;
    --c-contrast: 238 241 248;
    --c-on-contrast: 10 18 48;
    --c-brand: 61 123 255;
    --c-brand-soft: 20 35 78;
  }
}

/* Transición suave solo durante el cambio de tema (theme.js pone la clase ~400 ms) */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

/* ---------- 2. Base ---------- */
html {
  scroll-padding-top: 96px;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg);
  overflow-x: hidden;
}
main { overflow-x: hidden; }
@supports (overflow: clip) {
  body, main { overflow-x: clip; }
}

::selection { background: rgba(10, 92, 255, 0.16); color: var(--ink); }

html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Lenis (scroll inercial) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Barra de progreso de lectura */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--brand);
}

/* ---------- 3. Tipografía ---------- */
/* Titular del hero: mayúsculas, bold, interlineado cerrado */
.text-titan {
  font-size: clamp(2.5rem, 9.5vw, 4.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (min-width: 1024px) { .text-titan { font-size: 5.75rem; } }
@media (min-width: 1280px) { .text-titan { font-size: 6.5rem; } }

/* Máscara por línea para el reveal del titular */
.split-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.split-inner { display: inline-block; will-change: transform; }

/* Titulares de sección */
.h-section {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
}

/* Etiqueta tipo píldora con borde fino */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
}

/* ---------- 4. Navbar ---------- */
.nav-shell {
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s, transform 0.5s var(--ease-out);
}
#nav.is-scrolled .nav-shell,
#nav.menu-open .nav-shell {
  background: rgb(var(--c-canvas) / 0.88);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* Se esconde al bajar y reaparece al subir */
#nav.is-hidden .nav-shell { transform: translateY(-100%); }

.nav-link {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s;
}
.nav-link:hover,
.nav-link.is-active { color: var(--brand); }

/* Fondo que se desliza bajo el link en hover */
.nav-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2.25rem;
  width: 0;
  border-radius: 999px;
  background: var(--line-soft);
  opacity: 0;
  transform: translateY(-50%);
  transition: left 0.35s var(--ease-out), width 0.35s var(--ease-out), opacity 0.2s;
  pointer-events: none;
}

/* Botón de tema: solo con JS; muestra la luna en claro y el sol en oscuro */
.theme-toggle { display: none; }
.has-js .theme-toggle { display: grid; }
.theme-toggle > span { display: grid; place-items: center; }
.theme-icon-sun,
[data-theme="dark"] .theme-icon-moon { display: none !important; }
[data-theme="dark"] .theme-icon-sun { display: grid !important; }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- 5. Botones (píldora) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

.btn-primary { color: #fff; background: var(--btn-brand); }
.btn-primary:hover { background: var(--brand-dark); }

.btn-ghost { color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { color: var(--on-contrast); background: var(--contrast); border-color: var(--contrast); }

/* Botón claro para usar sobre fondos oscuros o de marca */
.btn-light { color: var(--ink-fixed); background: #fff; }
.btn-light:hover { background: #e9eefb; }

.btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }

/* Link con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
  transition: gap 0.25s var(--ease-out), color 0.2s;
}
.link-arrow:hover { gap: 0.65rem; color: var(--ink); }

/* ---------- 6. Hero ---------- */
/* Lavado de marca muy suave detrás del titular */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 50% 0%, rgba(10, 92, 255, 0.09), transparent 70%),
    radial-gradient(ellipse 30% 25% at 85% 15%, rgba(0, 200, 240, 0.08), transparent 70%);
}

/* Escenario oscuro con esquinas grandes: la "foto de producto" del hero */
.stage {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, rgba(0, 200, 240, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 80% at 10% 100%, rgba(10, 92, 255, 0.35), transparent 60%),
    linear-gradient(160deg, #0f1940 0%, #0a1230 55%, #070b1d 100%);
}
@media (min-width: 1024px) { .stage { border-radius: 2.5rem; } }
.stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* ---------- 7. Superficies ---------- */
/* Tarjeta clara */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
}

/* Pantalla oscura (editor, métricas, demos) */
.panel {
  background: var(--screen);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  color: var(--brand);
  border-radius: 999px;
  background: rgb(var(--c-brand-soft));
}

/* Bloque de marca (CTA) */
.brand-block {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 1.5rem;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(0, 200, 240, 0.55), transparent 60%),
    linear-gradient(140deg, #0a5cff 0%, #0647c9 60%, #0a2a8a 100%);
}

/* ---------- 8. Estados de animación (GSAP) ---------- */
/* Solo se ocultan si JS + GSAP están activos (clase .js en <html>) */
.js [data-fade],
.js [data-hero] { opacity: 0; visibility: hidden; }
.js .split-inner { opacity: 0; } /* GSAP lo sube desde yPercent 115 dentro de la máscara */

/* ---------- 9. Hero: editor de código + métricas en vivo ---------- */
.code-body {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.85;
  min-height: 15.5rem;
  counter-reset: line;
}
@media (min-width: 640px) { .code-body { font-size: 12.5px; min-height: 17.5rem; } }

.code-line { display: flex; white-space: pre; }
.code-line::before {
  counter-increment: line;
  content: counter(line);
  flex-shrink: 0;
  width: 2rem;
  padding-right: 1rem;
  text-align: right;
  color: #3a4260;
  user-select: none;
}

/* Paleta de sintaxis */
.tok-c { color: #5d6788; font-style: italic; }
.tok-k { color: #8fb0ff; }
.tok-f { color: #6fdcf5; }
.tok-s { color: #a7d9a0; }
.tok-t { color: #f0c27b; }
.tok-v { color: #e6e9f2; }
.tok-p { color: #7c86a6; }

.caret {
  display: inline-block;
  width: 7px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--brand-cyan);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.live-bar {
  flex: 1 1 0;
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.16);
  transition: height 0.7s var(--ease-out);
}
.live-bar:last-child { background: var(--brand-cyan); }

/* Punto "en vivo" con onda */
.live-dot { position: relative; display: inline-flex; width: 6px; height: 6px; flex-shrink: 0; }
.live-dot-sm { width: 5px; height: 5px; }
.live-dot::before,
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; }
.live-dot::before { animation: ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.6; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- 10. Marquee ---------- */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 11. Ilustraciones de servicios ---------- */
.led { animation: led 2.4s steps(1) infinite; }
.led:nth-child(2n) { animation-delay: -0.7s; }
.led:nth-child(3n) { animation-delay: -1.3s; }
@keyframes led { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.3; } }

.dash-flow { stroke-dasharray: 3 6; animation: dash-flow 1.4s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -18; } }

.browser-stack > div { transition: transform 0.6s var(--ease-out); }
.group:hover .browser-stack > div:nth-child(1) { transform: translate(-6px, -6px); }

/* ---------- 12. Timeline "Cómo trabajamos" ---------- */
.process-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}
.process-rail-v {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.rail-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand);
  transform-origin: 0 50%;
}
.process-rail-v .rail-fill { transform-origin: 50% 0; }
.js .rail-fill { transform: scaleX(0); }
.js .process-rail-v .rail-fill { transform: scaleY(0); }

.step-node,
.step-card { transition: color 0.5s, border-color 0.5s, background-color 0.5s, opacity 0.5s; }

/* Estado inactivo (solo cuando la animación por scroll está disponible) */
.anim-ready .step:not(.is-active) .step-node { color: var(--text); }
.anim-ready .step:not(.is-active) .step-card { opacity: 0.45; }

/* Estado activo */
.step.is-active .step-node { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ---------- 13. Simulador de casos ---------- */
/* Pestañas: píldoras sobre fondo claro */
.tab-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  border-radius: 999px;
  transition: color 0.25s;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn[aria-selected="true"] { color: var(--on-contrast); }
.tab-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tab-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--contrast);
  transition: left 0.45s var(--ease-out), width 0.45s var(--ease-out);
}

/* Dentro de la pantalla oscura de la demo */
.demo-bar {
  flex: 1 1 0;
  height: 0;
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.16);
  transition: height 0.8s var(--ease-out), background 0.2s;
}
.demo-bar:hover { background: rgba(255, 255, 255, 0.32); }

.seg-btn { padding: 0.3rem 0.65rem; font-size: 11px; font-weight: 600; color: #8890aa; border-radius: 999px; transition: all 0.2s; }
.seg-btn:hover { color: #e6e9f2; }
.seg-btn.is-active { color: var(--ink-fixed); background: #fff; }

.lead-card { cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.lead-card:hover { border-color: rgba(255, 255, 255, 0.28); }

/* ---------- 14. Formulario con labels flotantes ---------- */
.float-field { position: relative; }
.float-field input,
.float-field textarea {
  width: 100%;
  padding: 1.45rem 1.1rem 0.55rem;
  font-size: 1rem; /* 16px: evita el zoom automático en iOS */
  color: var(--ink);
  border-radius: 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.float-field textarea { resize: vertical; min-height: 120px; }
.float-field label {
  position: absolute;
  top: 1.05rem;
  left: 1.1rem;
  font-size: 0.95rem;
  color: var(--text);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform 0.25s var(--ease-out), color 0.2s;
}
.float-field input:hover,
.float-field textarea:hover { border-color: rgb(var(--c-navy-400) / 0.6); }
.float-field input:focus,
.float-field textarea:focus { outline: none; background: var(--card); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10, 92, 255, 0.12); }
.float-field input:focus + label,
.float-field textarea:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:not(:placeholder-shown) + label { transform: translateY(-0.6rem) scale(0.78); }
.float-field input:focus + label,
.float-field textarea:focus + label { color: var(--brand); }

.float-field.is-invalid input { border-color: #e11d48; }
.float-field.is-invalid label { color: #e11d48; }

/* Opciones de servicio */
.chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem; /* objetivo táctil */
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.chip:hover { border-color: var(--ink); }
@media (min-width: 640px) { .chip { gap: 0.6rem; padding: 0.7rem 1rem; font-size: 0.85rem; } }
input:checked + .chip { color: var(--on-contrast); background: var(--contrast); border-color: var(--contrast); }
input:focus-visible + .chip { outline: 2px solid var(--brand); outline-offset: 2px; }

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
}
.spinner-sm { display: inline-block; width: 12px; height: 12px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 15. FAQ ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-icon { transition: transform 0.3s var(--ease-out), background-color 0.2s, color 0.2s; }
.faq[open] .faq-icon { transform: rotate(45deg); color: var(--on-contrast); background: var(--contrast); }

/* ---------- 16. WhatsApp y barra móvil ---------- */
.wa-tooltip {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.wa-wrap:hover .wa-tooltip,
.wa-wrap.show-tooltip .wa-tooltip { opacity: 1; transform: none; }

.mobile-cta {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out);
}
.mobile-cta.is-visible { transform: none; }
.menu-locked .mobile-cta { transform: translateY(110%); }

/* ---------- 17. Modales ---------- */
/* Mobile first: hoja anclada abajo a todo el ancho; desde sm, modal centrado. */
.quote-modal {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  margin: auto 0 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: inherit;
  background: var(--surface, transparent);
  border: 0;
  border-radius: 1.5rem 1.5rem 0 0;
  animation: modal-in 0.35s var(--ease-out);
}
.contact-modal {
  height: 100dvh;
  border-radius: 0;
}
@media (min-width: 640px) {
  .quote-modal {
    width: min(40rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    background: transparent;
    border-radius: 1.75rem;
  }
  .contact-modal { height: auto; border-radius: 1.75rem; }
}
.quote-modal::backdrop {
  background: rgba(10, 18, 48, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: backdrop-in 0.3s ease-out;
}
@media (min-width: 640px) { .contact-modal { width: min(68rem, calc(100% - 2rem)); } }
.quote-modal.is-closing { animation: modal-out 0.2s ease-in forwards; }
.quote-modal.is-closing::backdrop { animation: backdrop-out 0.2s ease-in forwards; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }

/* ---------- 18. Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 19. Pantalla de carga ---------- */
/* Solo existe si el script del <head> marcó .has-preloader (JS activo y sin
   "reducir movimiento"). Sin JS no se muestra; si el JS falla, la animación
   de seguridad la oculta a los 8 s. */
.preloader { display: none; }
.has-preloader .preloader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  animation: preloader-failsafe 0.5s ease 8s forwards;
}
html.is-loading { overflow: hidden; }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }

.preloader-curtain {
  position: absolute;
  inset: 0;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1), border-radius 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader-curtain--brand { background: linear-gradient(140deg, #0a5cff, #0647c9); }
.preloader-curtain--ink {
  pointer-events: auto;
  color: #fff;
  background:
    radial-gradient(ellipse 60% 45% at 50% 115%, rgba(10, 92, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 0%, rgba(0, 200, 240, 0.14), transparent 70%),
    #0a1230;
}

/* Logo + nombre, centrados */
.preloader-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader-logo { width: 4.5rem; height: 4.5rem; overflow: visible; }
@media (min-width: 768px) { .preloader-logo { width: 5.5rem; height: 5.5rem; } }

/* El gancho de la "P" se dibuja y después se rellena */
.pl-hook {
  fill: transparent;
  stroke: #fff;
  stroke-width: 7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pl-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards, pl-fill 0.5s ease 1.05s forwards;
}
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-fill { to { fill: #fff; stroke-width: 0; } }

/* La pala azul sube a su lugar */
.pl-blade {
  opacity: 0;
  transform: translateY(70px);
  animation: pl-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
@keyframes pl-rise { to { opacity: 1; transform: none; } }

.preloader-word {
  display: flex;
  gap: 0.35em;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
@media (min-width: 768px) { .preloader-word { font-size: 1.875rem; } }
.preloader-word > span { display: block; overflow: hidden; padding-bottom: 0.08em; }
.preloader-word > span > span {
  display: block;
  transform: translateY(110%);
  animation: pl-word 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.preloader-word > span:nth-child(1) > span { animation-delay: 0.9s; }
.preloader-word > span:nth-child(2) > span { animation-delay: 1s; color: var(--brand-cyan); }
@keyframes pl-word { to { transform: none; } }

/* Pie: etiqueta + contador */
.preloader-foot {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  transition: opacity 0.4s ease;
}
@media (min-width: 640px) { .preloader-foot { left: 2rem; right: 2rem; bottom: 2rem; } }
.preloader-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.preloader-count {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.preloader-count small { font-size: 0.35em; color: rgba(255, 255, 255, 0.5); margin-left: 0.1em; }

.preloader-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.preloader-bar > span {
  display: block;
  height: 100%;
  background: var(--brand-cyan);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Salida: el contenido se va, el telón sube con el borde curvo y la capa de marca lo sigue */
.preloader.is-done .preloader-inner { opacity: 0; transform: translateY(-6vh); }
.preloader.is-done .preloader-foot,
.preloader.is-done .preloader-bar { opacity: 0; transition: opacity 0.25s ease; }
.preloader.is-done .preloader-curtain--ink {
  transform: translateY(-100%);
  border-bottom-left-radius: 50% 14vh;
  border-bottom-right-radius: 50% 14vh;
  pointer-events: none;
}
.preloader.is-done .preloader-curtain--brand {
  transform: translateY(-100%);
  border-bottom-left-radius: 50% 14vh;
  border-bottom-right-radius: 50% 14vh;
  transition-delay: 0.12s;
}

/* Visita repetida en la misma sesión: versión corta */
.preloader.is-quick .pl-hook { animation-duration: 0.01s, 0.01s; animation-delay: 0s, 0s; }
.preloader.is-quick .pl-blade,
.preloader.is-quick .preloader-word > span > span { animation-duration: 0.4s; animation-delay: 0s; }