/* ==========================================================================
   SOLU180 — Sistema de diseño
   Valores tomados del design system oficial "Solu180 Design System":
   violeta #7858F8, lima #B8FF00, ink navy #252736. Tipografías Poppins+Manrope.
   Verde lima solo como acento puntual.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Marca — design system */
  --black: #252736;        /* ink navy */
  --black-soft: #31344a;   /* ink-800 */
  --purple: #9a80fb;       /* violet-400 */
  --purple-deep: #7858f8;  /* primary */
  --purple-light: #bcabfc; /* violet-300 */
  --purple-wash: #e9e2fe;  /* violet-100 */
  --neon: #b8ff00;         /* lime accent */
  --neon-600: #a3e600;     /* lima un punto más oscuro (modo oscuro) */

  /* Neutros — design system */
  --white: #ffffff;
  --gray-50: #f6f6f8;
  --gray-100: #eeeef1;
  --gray-200: #dadbdf;
  --gray-300: #c3c5cc;
  --gray-400: #9a9dab;
  --gray-500: #71748a;
  --gray-600: #565a72;

  /* Semánticos — los únicos que deben usar los componentes.
     Nunca pintes con --white/--black directamente: rompe el modo oscuro. */
  --bg: var(--white);
  --bg-alt: var(--gray-50);
  --surface: var(--white);
  --surface-2: var(--gray-50);
  --header-bg: rgba(255, 255, 255, 0.82);
  --text: var(--black);
  --text-strong: var(--black);
  --text-muted: var(--gray-500);
  --border-subtle: var(--gray-100);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --wash: var(--purple-wash);
  /* Hero: blanco limpio en claro (los prototipos son los protagonistas). */
  --hero-from: #ffffff;
  --hero-to: #ffffff;
  --hero-glow: rgba(120, 88, 248, 0.16);
  /* Escala de elevación del design system (sobre fondo claro) */
  --shadow-xs: 0 1px 2px rgba(37, 39, 54, 0.06);
  --shadow-sm: 0 2px 6px rgba(37, 39, 54, 0.07);
  --shadow-md: 0 8px 24px rgba(37, 39, 54, 0.09);
  --shadow-lg: 0 18px 48px rgba(37, 39, 54, 0.13);
  --shadow-xl: 0 30px 70px rgba(37, 39, 54, 0.18);
  --shadow-violet: 0 12px 30px rgba(120, 88, 248, 0.35);
  --shadow-lime: 0 12px 30px rgba(184, 255, 0, 0.3);
  --ring-focus: 0 0 0 3px rgba(120, 88, 248, 0.35);
  --shadow: var(--shadow-lg);
  /* Bloques deliberadamente oscuros (footer, CTA, hero interno, sección dark) */
  --inverse-bg: var(--black);
  --inverse-text: var(--white);
  --inverse-muted: var(--gray-400);
  --inverse-border: rgba(255, 255, 255, 0.12);
  color-scheme: light;

  /* Tipografía */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tipografía para piezas de gran tamaño (la palabra de la cortina).
     Por decisión de marca va en Poppins; si algún día se aloja una tipografía
     propia, basta con anteponerla aquí. */
  --font-titular: var(--font-display);
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.85rem + 2.7vw, 4.2rem);
  /* Tope de h1 en 5rem (80px): con 6.5rem el titular del hero llegaba a 104px
     y devoraba la pantalla en monitores anchos. */
  --step-5: clamp(2.75rem, 1.9rem + 3.2vw, 5rem);
  /* En pantallas angostas el suelo de 2.4rem de los h2 es demasiado alto para
     palabras largas en mayúsculas ("TRABAJAMOS" se cortaba): el override de
     --step-4 de más abajo (media 640) lo ata al ancho del visor. */

  /* Tamaños y degradados nombrados del design system */
  --fs-h4: 1.125rem;
  --grad-violet: linear-gradient(135deg, #9f79fb 0%, #6658f2 100%);
  --grad-violet-deep: linear-gradient(135deg, #7767f5 0%, #3d3faa 100%);
  --grad-ink: linear-gradient(160deg, #31344a 0%, #252736 100%);

  /* Ritmo */
  --gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  /* Radios — escala del design system (xs6 sm10 md14 lg20 xl28 2xl36) */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --shell: 1200px;
  --pad-x: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.45s;
  --dur-fast: 120ms;
  --dur-ui: 200ms;
}

/* Titulares h2 en pantallas angostas: atados al visor. A 350px, "TRABAJAMOS"
   en mayúsculas medía más que la pantalla con el suelo de 2.4rem. Se ajusta el
   TOKEN y no cada sección: el arreglo llega a todos los h2 del sitio. */
@media (max-width: 640px) {
  :root {
    --step-4: clamp(1.7rem, 9.6vw, 2.4rem);
    /* Los h1 igual: a 320px "Creatividad" (hero) se salía 14px con el suelo
       de 3rem. */
    --step-5: clamp(2rem, 12.5vw, 3rem);
  }
}

/* --- Modo oscuro --------------------------------------------------------- */
/* Un solo bloque de valores, aplicado desde dos sitios:
   1. [data-theme="dark"]  -> elección manual del usuario (manda siempre)
   2. @media prefers-color-scheme -> preferencia del sistema, solo si el
      usuario no ha elegido nada todavía ([data-theme="auto"]).
   El script en línea de cada página fija data-theme antes del primer pintado. */
[data-theme="dark"] {
  --bg: #191b26;
  --bg-alt: #1f2130;
  --surface: #252736;
  --surface-2: #2c2f42;
  --header-bg: rgba(25, 27, 38, 0.82);
  --text: #f0f0f3;
  --text-strong: #ffffff;
  --text-muted: #a3a3b0;
  --border: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.22);
  --wash: rgba(120, 88, 248, 0.18);
  /* Hero en oscuro: negro hacia morado profundo. */
  --hero-from: #101018;
  --hero-to: #241a4d;
  --hero-glow: rgba(120, 88, 248, 0.38);
  --shadow: 0 22px 45px -22px rgba(0, 0, 0, 0.8);
  /* En oscuro, los bloques "inversos" suben en vez de bajar: si se quedaran
     negros se fundirían con el fondo y la sección desaparecería. */
  --inverse-bg: #2c2f42;
  --inverse-text: #ffffff;
  --inverse-muted: #a3a3b0;
  --inverse-border: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #100f16;
    --bg-alt: #17161f;
    --surface: #1c1b26;
    --surface-2: #232231;
    --header-bg: rgba(16, 15, 22, 0.82);
    --text: #f0f0f3;
    --text-strong: #ffffff;
    --text-muted: #a3a3b0;
    --border: rgba(255, 255, 255, 0.11);
    --border-strong: rgba(255, 255, 255, 0.22);
    --wash: rgba(139, 92, 246, 0.16);
    --hero-from: #17161f;
    --hero-to: #100f16;
    --shadow: 0 22px 45px -22px rgba(0, 0, 0, 0.8);
    --inverse-bg: #1c1b26;
    --inverse-text: #ffffff;
    --inverse-muted: #a3a3b0;
    --inverse-border: rgba(255, 255, 255, 0.14);
    color-scheme: dark;
  }
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Contiene desbordes laterales SIN volver el body un contenedor de scroll.
     Con overflow-x:hidden el navegador calcula overflow-y:auto, y eso rompe
     position:sticky en Firefox y Safari (la cortina deja de fijarse; Chrome lo
     tolera, por eso el fallo solo se veía en Firefox). "clip" recorta igual
     pero no crea scrollport, así que el sticky sigue vivo. */
  overflow-x: hidden; /* respaldo para Safari < 16 */
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Tipografía --------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

h2 {
  font-size: var(--step-4);
  text-transform: uppercase;
}

h3 {
  font-size: var(--step-2);
}

p {
  text-wrap: pretty;
}

/* --- Utilidades --------------------------------------------------------- */
.shell {
  width: min(100% - (var(--pad-x) * 2), var(--shell));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--alt {
  background: var(--bg-alt);
}

.section--alt .service-card,
.section--alt .deliverable {
  background: var(--surface);
}

.section--dark {
  background: var(--inverse-bg);
  color: var(--inverse-text);
}

.section--dark .eyebrow {
  color: var(--purple-light);
}

.lede {
  font-size: var(--step-1);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 58ch;
}

.section--dark .lede {
  color: var(--inverse-muted);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* Eyebrow: etiqueta de sección */
/* "overline" del design system: Manrope 700, 11px, tracking 0.14em. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple-deep);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--purple);
}

/* El verde neón vive casi exclusivamente aquí: un acento por pantalla. */
.eyebrow--neon::before {
  background: var(--neon);
}

.accent-neon {
  color: var(--black);
  background: linear-gradient(transparent 62%, var(--neon) 62%);
  padding-inline: 0.1em;
}

.section--dark .accent-neon {
  color: var(--white);
  background: none;
  box-shadow: inset 0 -0.32em 0 rgba(200, 245, 49, 0.28);
}

/* En TEMA oscuro (no solo en secciones oscuras) el realce cambia igual: sin
   este par de reglas, el texto quedaba en negro sobre fondo oscuro y solo se
   leía la franja lima. */
[data-theme="dark"] .accent-neon {
  color: var(--white);
  background: none;
  box-shadow: inset 0 -0.32em 0 rgba(200, 245, 49, 0.28);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .accent-neon {
    color: var(--white);
    background: none;
    box-shadow: inset 0 -0.32em 0 rgba(200, 245, 49, 0.28);
  }
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* Variante centrada, al estilo de las cabeceras de sección de Manychat
   ("Scale up your best conversations"): bloque al centro y titular en frase
   normal, sin las mayúsculas forzadas del h2 global. El eyebrow es
   inline-flex, así que text-align lo centra sin más. */
.section-head--centro {
  margin-inline: auto;
  text-align: center;
}

.section-head--centro h2 {
  text-transform: none;
  letter-spacing: -0.03em;
}

/* --- Botones ------------------------------------------------------------ */
.btn {
  /* Se invierte con el tema: oscuro sobre claro, claro sobre oscuro.
     Fijarlo en negro dejaría el botón invisible en modo oscuro. */
  /* Spec del design system: alto fijo 44px, radio 14px, sin mayúsculas,
     peso 700 en Manrope, y elevación de marca solo al pasar el cursor. */
  --btn-bg: var(--purple-deep);
  --btn-fg: var(--white);
  --btn-shadow: none;
  --btn-shadow-hover: var(--shadow-violet);
  --btn-brightness: 0.94;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.005em;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-ui) var(--ease-standard),
    filter var(--dur-ui) var(--ease-standard),
    background var(--dur-ui) var(--ease-standard),
    border-color var(--dur-ui) var(--ease-standard);
}

.btn svg {
  flex-shrink: 0;
}

.btn:hover {
  box-shadow: var(--btn-shadow-hover);
  filter: brightness(var(--btn-brightness));
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Tamaño lg del sistema para heroes y CTA (alto 54, fuente 16.5). */
.hero__actions .btn,
.cta__actions .btn {
  height: 54px;
  padding: 0 28px;
  font-size: 16.5px;
}

.btn--primary {
  --btn-bg: var(--purple-deep);
  --btn-fg: var(--white);
}

/* "secondary" del sistema: superficie con borde y sombra sutil, sin brillo. */
.btn--ghost {
  --btn-bg: var(--surface);
  --btn-fg: var(--text-strong);
  --btn-shadow: var(--shadow-xs);
  --btn-shadow-hover: var(--shadow-sm);
  --btn-brightness: 1;
  border-color: var(--border-strong);
}

/* En bloques oscuros la "secondary" es cristal translúcido (spec del hero). */
.section--dark .btn--ghost,
.cta__actions .btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn--light {
  --btn-bg: var(--surface);
  --btn-fg: var(--text-strong);
  --btn-shadow: var(--shadow-xs);
  --btn-shadow-hover: var(--shadow-sm);
  --btn-brightness: 1;
  border-color: var(--border-strong);
}

/* "dark" del sistema: para fondos claros muy saturados (p. ej. el bloque lima),
   donde un botón violeta o neón perdería contraste. */
.btn--dark {
  --btn-bg: var(--black);
  --btn-fg: var(--white);
  --btn-shadow-hover: var(--shadow-md);
}

/* "accent": el CTA lima de alta energía. */
.btn--neon {
  --btn-bg: var(--neon);
  --btn-fg: var(--black);
  --btn-shadow-hover: var(--shadow-lime);
}

/* --- Enlace con subrayado animado --------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-deep);
}

.link-arrow svg {
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(5px);
}

/* --- Header ------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.header.is-stuck {
  border-bottom-color: var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.brand__mark {
  width: 32px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}

/* En el footer (fondo oscuro) marca y palabra van en blanco. */
.footer .brand {
  color: var(--inverse-text);
}
/* Versión blanca del isotipo en el footer: el SVG va incrustado en el HTML
   (antes se pintaba con mask + archivo externo y desaparecía si el SVG no
   cargaba); aquí solo se tiñen sus polígonos con el color de la marca. */
.footer .brand__mark polygon {
  fill: currentColor;
}

.brand__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  line-height: 1;
  /* Al hacer scroll el logotipo se contrae y queda solo el isotipo. */
  max-width: 7ch;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.35s var(--ease), opacity 0.25s var(--ease);
}

.header.is-stuck .brand__word {
  max-width: 0;
  opacity: 0;
}

/* La cabecera se compacta un punto al desplazarse. */
.header__inner {
  transition: min-height 0.3s var(--ease);
}

.header.is-stuck .header__inner {
  min-height: 4rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2.1rem);
}

.nav__link {
  position: relative;
  /* Sirve tanto a <a> como al <button> de Servicios: reseteamos el aspecto
     nativo del botón (fondo, borde, relleno) para que ambos queden en línea. */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--step--1);
  font-family: inherit;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.4rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--purple);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--text-strong);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__cta {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

.header__nav-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.header__nav-actions .header__cta {
  margin: 0;
}

/* Menú móvil */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-strong);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  transform: translateY(-6px);
}

.nav-toggle__bars::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
    position: relative;
  }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1rem var(--pad-x) 2rem;
    transform: translateY(-130%);
    transition: transform 0.4s var(--ease);
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateY(0);
  }

  .nav__link {
    padding-block: 1rem;
    border-bottom: 1px solid var(--border);
    font-size: var(--step-1);
    font-family: var(--font-display);
    font-weight: 700;
  }

  .nav__link::after {
    display: none;
  }

  .header__cta {
    margin-top: 1.25rem;
    width: 100%;
  }

  .header__nav-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }

  .header__nav-actions .header__cta {
    margin: 0;
  }
}

/* --- Motivo geométrico: tarjetas apiladas en diagonal -------------------- */
/* Firma visual tomada de la referencia. Orden de profundidad: gris → neón →
   morado → negro, cada una desfasada sobre el eje diagonal. */
.stack {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
  isolation: isolate;
  /* El marco recorta las barras: sin esto la rotación las lanza sobre el texto. */
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.stack__card {
  position: absolute;
  top: -14%;
  width: 30%;
  height: 150%;
  border-radius: 999px 999px 44px 44px;
  transform: rotate(-38deg);
  transform-origin: 50% 50%;
}

/* La posición la marca el orden en el DOM (fondo → frente); la clase de color
   solo pinta. Así cualquier cantidad de barras se escalona igual. */
.stack__card:nth-child(1) {
  left: 47%;
  z-index: 1;
}
.stack__card:nth-child(2) {
  left: 31%;
  z-index: 2;
}
.stack__card:nth-child(3) {
  left: 15%;
  z-index: 3;
}
.stack__card:nth-child(4) {
  left: -1%;
  z-index: 4;
}

.stack__card--gray {
  background: var(--gray-300);
}

.stack__card--lilac {
  background: var(--purple-light);
}

.stack__card--neon {
  background: var(--neon);
}

.stack__card--purple {
  background: linear-gradient(150deg, var(--purple-light), var(--purple-deep));
}

.stack__card--black {
  background: var(--black);
}

/* --- Palabra destacada del titular --------------------------------------- */
/* El color sólido va primero: si el navegador no soporta background-clip:text,
   el degradado nunca se aplica y el texto NO queda transparente (invisible). */
.grad {
  color: var(--purple-deep);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad {
    background: linear-gradient(
      100deg,
      var(--purple) 0%,
      var(--purple-deep) 50%,
      var(--purple-light) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;

    /* Brillo vivo: el degradado es más ancho que la palabra y se desplaza en
       vaivén, como una luz recorriendo las letras. */
    background-size: 220% 100%;
    animation: grad-brillo 6s ease-in-out infinite alternate;
    color: transparent;
  }
}

/* Sobre fondo oscuro el degradado sube de tono o no se lee. */
.section--dark .grad,
@keyframes grad-brillo {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grad {
    animation: none;
  }
}

.page-hero .grad {
  color: var(--purple-light);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .section--dark .grad,
  .page-hero .grad {
    background: linear-gradient(100deg, #c4b5fd 0%, #8b5cf6 60%, #c4b5fd 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Tarjetas flotantes sobre el arte ------------------------------------ */
.float {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(23, 22, 31, 0.38);
  white-space: nowrap;
  animation: flotar 7s ease-in-out infinite;
}

/* El flotado compone con el parallax: --pl lo escribe el motor de movimiento,
   así ambos efectos conviven sin pisarse el transform. */
@keyframes flotar {
  0%,
  100% {
    transform: translateY(var(--pl, 0px));
  }
  50% {
    transform: translateY(calc(var(--pl, 0px) - 8px));
  }
}

.float--2 {
  animation-delay: -2.3s;
}

.float--3 {
  animation-delay: -4.6s;
}

.float__icono {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--wash);
  color: var(--purple-deep);
}

.float__nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  display: block;
  line-height: 1.2;
}

.float__dato {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(150deg, var(--hero-from) 0%, var(--hero-to) 100%);

  /* El relleno inferior es corto a propósito: la marquesina de datos cierra el
     hero y la siguiente sección debe venir cerca (había 272px de vacío). */
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2rem, 1.5rem + 1.5vw, 3rem);
  overflow: hidden;
}

/* La sección que sigue al hero también recorta su relleno superior: el ritmo
   normal de sección (144px) sumado al del hero dejaba media pantalla vacía. */
.hero + .section {
  padding-top: clamp(3rem, 2rem + 2.5vw, 4.5rem);
}

/* Halo morado detrás del prototipo: da color sin robarle protagonismo. */
.hero::before {
  content: "";
  position: absolute;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  right: -12%;
  top: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-glow), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero .shell {
  position: relative;
  z-index: 1;
}

/* Sobre fondo oscuro el morado sube de tono para que se lea. */
/* En el hero oscuro, el degradado del titular sube a los violetas claros
   (igual que hace el hero interior): el degradado base se pierde sobre negro. */
[data-theme="dark"] .hero__title .grad {
  color: var(--purple-light);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .hero__title .grad {
    color: var(--purple-light);
  }
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  [data-theme="dark"] .hero__title .grad {
    background: linear-gradient(100deg, #c4b5fd 0%, #8b5cf6 60%, #c4b5fd 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .hero__title .grad {
      background: linear-gradient(100deg, #c4b5fd 0%, #8b5cf6 60%, #c4b5fd 100%);
    background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

/* El texto siempre por encima del arte, pase lo que pase con el motivo. */
.hero__copy {
  position: relative;
  z-index: 2;
}

.hero__title {
  margin-bottom: 1.5rem;
}

/* Rotador de frases del hero. Las frases conviven APILADAS en la misma celda
   de una rejilla: la altura del titular es siempre la de la frase más alta,
   así el hero no salta ni empuja el resto al cambiar de frase. */
.rotador {
  display: grid;
}

.rotador__frase {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35em);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
    visibility 0s 0.5s;
}

/* Solo la activa es visible — también para lectores de pantalla: visibility
   saca a las demás del árbol de accesibilidad, así el h1 se lee una vez. */
.rotador__frase.is-activa {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* Con movimiento reducido el JS no rota; por CSS tampoco hay deslizamiento. */
@media (prefers-reduced-motion: reduce) {
  .rotador__frase {
    transform: none;
    transition: none;
  }
}

.hero__lede {
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 3rem;
}

.hero__art {
  position: relative;
  min-height: 340px;
}

/* Maqueta de producto: la imagen manda el tamaño del arte. */
.hero__mock {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 55px rgba(23, 22, 31, 0.18));
}

.hero .stack {
  max-width: 420px;
  margin-inline: auto;
}

/* Las tres tarjetas dicen los tres frentes: el hero enuncia el mensaje
   central sin que haga falta leer el titular entero. */
.hero__art .float--1 {
  top: 3%;
  left: -7%;
}

.hero__art .float--2 {
  top: 45%;
  right: -6%;
}

.hero__art .float--3 {
  bottom: 4%;
  left: -2%;
}

@media (max-width: 1100px) {
  /* Menos sitio: las tarjetas se meten sobre el titular. Se recogen. */
  .hero__art .float--1 {
    left: 0;
  }
  .hero__art .float--2 {
    right: 0;
  }
  .hero__art .float--3 {
    left: 2%;
  }
}

@media (max-width: 620px) {
  /* En móvil compiten con el propio arte y lo tapan. Fuera. */
  .hero__art .float {
    display: none;
  }
}

/* Marquesina de datos bajo el hero: píldoras que avanzan solas hacia la
   izquierda en bucle continuo. La pista contiene DOS copias del grupo; la
   animación recorre el 50% (una copia exacta) y reinicia — sin salto visible.
   Los bordes se desvanecen con una máscara para que entren y salgan suaves. */
.stats {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.stats__pista {
  display: flex;
  width: max-content;
  animation: stats-bucle 26s linear infinite;
}

/* Al posar el cursor se pausa: deja leer con calma. */
.stats:hover .stats__pista {
  animation-play-state: paused;
}

/* El hueco del bucle vive en el padding del grupo, no en un gap de la pista:
   así el -50% del keyframe cae exactamente donde empieza la segunda copia. */
.stats__grupo {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}

@keyframes stats-bucle {
  to {
    transform: translateX(-50%);
  }
}

/* Píldora: superficie suave con borde, número morado + etiqueta en línea. */
.stat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  white-space: nowrap;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.5rem;
}

.stat__num {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--purple-deep);
}

.stat__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* En oscuro el morado profundo pierde contraste; se sube a la variante clara,
   igual que hace la palabra morada del titular. */
[data-theme="dark"] .stat__num {
  color: var(--purple-light);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .stat__num {
    color: var(--purple-light);
  }
}

/* Con movimiento reducido no hay marquesina: una fila estática centrada que
   envuelve, y la copia duplicada desaparece. */
@media (prefers-reduced-motion: reduce) {
  .stats {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .stats__pista {
    animation: none;
    width: auto;
  }

  .stats__grupo {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.9rem;
    padding-right: 0;
  }

  .stats__grupo[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__art {
    order: -1;
    min-height: 0;
    /* Ancho EXPLÍCITO, no max-width. Con `margin-inline:auto` el item de grid
       deja de estirarse y su ancho pasa a depender del contenido; como .stack
       usa width:100%, la medida se vuelve circular y todo colapsa a 0×0
       (el arte desaparecía por completo en móvil y tablet). */
    width: min(400px, 100%);
    margin-inline: auto;
  }
}

/* --- Grid de servicios -------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap);
}

/* ServiceCard — spec del design system: padding 26, radio lg(20), borde sutil,
   sombra sm → lg y -4px al pasar. Icono en violeta sólido con degradado. */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-ui) var(--ease-standard),
    box-shadow var(--dur-ui) var(--ease-standard);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Brillo que sigue al cursor (--mx/--my los escribe el motor de movimiento). */
.service-card::after,
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(120, 88, 248, 0.16),
    transparent 68%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
  pointer-events: none;
  z-index: 0;
}

.service-card:hover::after,
.project-card:hover::after {
  opacity: 1;
}

/* El contenido por encima del brillo. */
.service-card > *,
.project-card > * {
  position: relative;
  z-index: 1;
}

.service-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--grad-violet, linear-gradient(135deg, #9f79fb, #6658f2));
  color: var(--white);
}

.service-card__title {
  font-size: var(--fs-h4, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.service-card__text {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  flex-grow: 1;
}

.service-card__link {
  margin-top: 0.35rem;
}

/* La tarjeta completa es clickeable sin romper la semántica del enlace. */
.service-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --- Proceso / método --------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--gap);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 2rem;
  border-top: 2px solid var(--inverse-border);
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--purple-light);
  display: block;
  margin-bottom: 0.85rem;
  line-height: 1;
}

.step:first-child {
  border-top-color: var(--neon);
}

.step:first-child::before {
  color: var(--neon);
}

.step__title {
  font-size: var(--step-1);
  margin-bottom: 0.6rem;
}

.step__text {
  color: var(--inverse-muted);
  font-size: var(--step--1);
}

/* --- Bloque de valor (texto + arte) ------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.checks {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
}

.check {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.check__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: var(--white);
  display: grid;
  place-items: center;
  margin-top: 0.2rem;
}

.check__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}

.check__text {
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* --- CTA final ---------------------------------------------------------- */
/* Banner a SANGRE COMPLETA: rompe el ancho de la shell que lo envuelve con el
   truco de 100vw + margen negativo, así no hay que tocar el HTML de las ocho
   páginas que lo comparten. El desborde de la barra de scroll que introduce
   100vw lo recorta el overflow-x del body. */
.cta {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--pad-x);
  overflow: hidden;
  text-align: center;
}

.cta::before,
.cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cta::before {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(109, 74, 255, 0.55), transparent 68%);
  top: -180px;
  right: -120px;
}

.cta::after {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(200, 245, 49, 0.14), transparent 70%);
  bottom: -160px;
  left: -80px;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.cta h2 {
  margin-bottom: 1.1rem;
}

.cta__lede {
  color: var(--inverse-muted);
  font-size: var(--step-1);
  margin-bottom: 2.25rem;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--inverse-bg);
  color: var(--inverse-muted);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
  font-size: var(--step--1);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--inverse-border);
}

/* En pantallas estrechas la columna de la marca podía quedarse casi sin ancho
   (su minmax baja hasta 0 mientras las listas exigen 140px) y el logotipo se
   montaba sobre la columna "Servicios". La marca pasa a ocupar una fila
   entera y las listas se reparten debajo. */
@media (max-width: 700px) {
  .footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .footer__grid > div:first-child {
    grid-column: 1 / -1;
  }
}

.footer .brand__word {
  color: var(--inverse-text);
}

.footer__blurb {
  margin-top: 1.1rem;
  max-width: 34ch;
  line-height: 1.7;
}

.footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--inverse-text);
  margin-bottom: 1.1rem;
}

.footer__list {
  display: grid;
  gap: 0.7rem;
}

.footer__list a {
  transition: color 0.2s var(--ease);
}

.footer__list a:hover {
  color: var(--neon);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.82rem;
  color: var(--inverse-muted);
}

.socials {
  display: flex;
  gap: 0.6rem;
}

.socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--inverse-border);
  border-radius: 50%;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.socials a:hover {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: #ffffff;
}

/* --- Páginas de servicio ------------------------------------------------ */
/* Hero interior CLARO y tematizado: en claro es luminoso y en oscuro adopta
   los tokens del tema, sin panel negro fijo. El motivo de fondo es la marca
   contada en geometría: un arco de 180° que parte de un punto gris (donde
   estabas) y aterriza en un punto lima (el otro extremo). */
.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse 55% 80% at 85% 50%, var(--hero-glow), transparent 70%),
    var(--bg-alt);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
  overflow: hidden;
}

/* El arco: media circunferencia (180°) apoyada sobre una base invisible. */
.page-hero::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 240px;
  right: 80px;
  bottom: 44px;
  border: 2px solid rgba(120, 88, 248, 0.35);
  border-bottom: 0;
  border-radius: 240px 240px 0 0;
  pointer-events: none;
}

/* Los dos extremos del giro: partida en gris (el antes) y llegada en morado
   (el después) — la sombra desplazada pinta el punto de partida. */
.page-hero::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--purple-deep);
  right: 72px;
  bottom: 36px;
  box-shadow: -464px 0 0 var(--border-strong);
  pointer-events: none;
}

/* --- El giro animado: cerrar el círculo ----------------------------------- */
/* La historia completa en un círculo: la mitad INFERIOR ya está construida
   (trazo gris — lo existente); el isotipo parte del extremo izquierdo de ese
   medio círculo y recorre los 180° superiores mientras el trazo morado se
   dibuja tras él, hasta CERRAR el círculo en el punto morado. Completar lo
   que ya había, con mejores resultados.

   GEOMETRÍA COMPARTIDA (si se toca una, tocar todas): centro del círculo a
   240px del borde derecho y 170px de la base del hero, radio 140px. El SVG
   (300×300, centro 150,150, r=140) se coloca de modo que su centro caiga
   exactamente ahí, y el viajero orbita ese mismo punto con translateX(140px). */
.page-hero--giro::before,
.page-hero--giro::after {
  /* Esta página usa el círculo completo: fuera el arco genérico. */
  display: none;
}

/* Altura mínima para que el círculo (cima a 310px de la base) quepa entero.
   Halo morado a la derecha: el mismo efecto que el hero de portada (.hero),
   donde un radial-gradient con --hero-glow crea la mancha de identidad. Aquí
   como background porque ::before/::after están ocupados por el giro SVG. */
.page-hero--giro {
  min-height: 420px;
  background:
    radial-gradient(ellipse 55% 80% at 85% 50%, var(--hero-glow), transparent 70%),
    var(--bg-alt);
}

.giro__circulo {
  position: absolute;
  right: 90px;   /* 240 - 150 */
  bottom: 20px;  /* 170 - 150 */
  width: 300px;
  height: 300px;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.giro__hecho {
  stroke: var(--border-strong);
  stroke-width: 2;
}

.giro__cierre {
  stroke: var(--purple-deep);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: giro-cerrar 7.5s ease-in-out infinite;
}

.giro__inicio {
  fill: var(--border-strong);
}

.giro__fin {
  fill: var(--purple-deep);
}

.giro__viajero {
  position: absolute;
  right: calc(240px - 21px); /* centro del círculo, menos media caja */
  bottom: calc(170px - 21px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  animation: giro-viaje 7.5s ease-in-out infinite;
}

/* Viajero y trazo comparten línea de tiempo: viajan del 8% al 55%, saborean
   el círculo cerrado hasta el 86% y se desvanecen para reiniciar juntos. */
@keyframes giro-viaje {
  0% {
    transform: rotate(180deg) translateX(140px) rotate(-180deg);
    opacity: 0;
  }
  8% {
    transform: rotate(180deg) translateX(140px) rotate(-180deg);
    opacity: 1;
  }
  55% {
    transform: rotate(360deg) translateX(140px) rotate(-360deg);
    opacity: 1;
  }
  86% {
    transform: rotate(360deg) translateX(140px) rotate(-360deg);
    opacity: 1;
  }
  95%,
  100% {
    transform: rotate(360deg) translateX(140px) rotate(-360deg);
    opacity: 0;
  }
}

@keyframes giro-cerrar {
  0%,
  8% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  86% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* Tarjetas flotantes del antes y el después, ancladas a los extremos del
   arco. Pueden solaparse con el titular: es deliberado. */
.giro__tarjeta {
  position: absolute;
  display: grid;
  gap: 0.2rem;
  max-width: 172px;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-size: 0.74rem;
  line-height: 1.4;
  pointer-events: none;
  animation: giro-flotar 6s ease-in-out infinite alternate;
}

/* Pantallas de sistema dibujadas en CSS: la del ANTES apagada y con una línea
   en rojo (el sistema viejo fallando); la del DESPUÉS viva, con gráfica
   subiendo hacia la barra lima y estado "En línea". */
.giro__sistema {
  position: absolute;
  width: 138px;
  display: grid;
  gap: 6px;
  padding: 0.5rem 0.6rem 0.65rem;
  border-radius: 10px;
  pointer-events: none;
  animation: giro-flotar 6s ease-in-out infinite alternate;
}

.giro__sistema-barra {
  display: flex;
  gap: 4px;
}

.giro__sistema-barra i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}

.giro__sistema-barra--viva i:nth-child(1) {
  background: var(--neon);
}

.giro__sistema-barra--viva i:nth-child(2) {
  background: var(--purple-light);
}

.giro__sistema-barra--viva i:nth-child(3) {
  background: var(--purple-deep);
}

.giro__linea {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

.giro__linea--error {
  background: rgba(214, 69, 69, 0.4);
}

.giro__sistema--viejo {
  right: 398px;
  bottom: 54px;
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  rotate: -4deg;
}

.giro__sistema--nuevo {
  right: 10px;
  bottom: 50px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  rotate: 3deg;
  animation-delay: -2s;
}

.giro__grafica {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}

.giro__grafica i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--grad-violet);
}

.giro__grafica i:last-child {
  background: var(--neon);
}

.giro__check {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--neon);
  color: #252736;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6rem;
}

.giro__tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* El ANTES: apagado, como la situación que se deja atrás. Anclado junto al
   extremo izquierdo del círculo (a 380px del borde derecho). */
.giro__tarjeta--antes {
  right: 350px;
  bottom: 240px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}

.giro__tarjeta--antes .giro__tag {
  color: var(--text-muted);
}

/* El DESPUÉS: violeta de marca, con la etiqueta en lima. Anclado junto al
   extremo derecho del círculo (a 100px del borde derecho). */
.giro__tarjeta--despues {
  right: 16px;
  bottom: 250px;
  background: var(--grad-violet-deep);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  animation-delay: -3s;
}

.giro__tarjeta--despues .giro__tag {
  color: var(--neon);
}

@keyframes giro-flotar {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -10px;
  }
}

/* --- Motivos decorativos por página ---------------------------------------- */
/* Cada hero interior tiene un motivo CSS propio a la derecha, coherente con
   la identidad morada pero distinto en cada página. Todos se ocultan en
   ≤1100px junto con el arco genérico. Nosotros (--giro) ya tiene el SVG del
   semicírculo; Inicio tiene su propio hero. */

/* SERVICIOS — tres capacidades conectadas a un mismo núcleo. */
.page-hero--servicios::before,
.page-hero--servicios::after {
  display: none;
}

.hero-deco.hero-deco--servicios {
  width: 520px;
  height: 360px;
}

.services-scene {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.services-scene__connections path {
  stroke: rgba(120, 88, 248, 0.36);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  animation: services-flow 10s linear infinite;
}

.services-node rect:first-child {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.2;
  filter: drop-shadow(0 18px 22px rgba(37, 39, 54, 0.1));
}

.services-node__icon {
  fill: none;
  stroke: var(--purple);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services-node__title,
.services-node__sub,
.services-hub__brand,
.services-hub__degree {
  font-family: var(--font-body);
}

.services-node__title {
  fill: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.services-node__sub {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

.services-node--one {
  animation: services-float 5.2s ease-in-out infinite;
}

.services-node--two {
  animation: services-float 5.8s ease-in-out -1.8s infinite;
}

.services-node--three {
  animation: services-float 4.8s ease-in-out -3s infinite;
}

.services-hub__pulse {
  fill: rgba(120, 88, 248, 0.1);
  transform-origin: 262px 190px;
  animation: services-pulse 3.2s ease-out infinite;
}

.services-hub__body {
  fill: var(--purple-deep);
  filter: drop-shadow(0 18px 24px rgba(83, 57, 195, 0.32));
}

.services-hub__brand {
  fill: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
}

.services-hub__degree {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}

.services-traveler {
  fill: var(--neon);
  filter: drop-shadow(0 0 5px rgba(200, 245, 49, 0.65));
}

.services-traveler--two {
  fill: var(--purple);
}

@keyframes services-flow {
  to { stroke-dashoffset: -120; }
}

@keyframes services-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes services-pulse {
  0% { transform: scale(0.82); opacity: 0.6; }
  70%, 100% { transform: scale(1.18); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .services-scene__connections path,
  .services-node,
  .services-hub__pulse {
    animation: none;
  }

  .services-traveler {
    display: none;
  }
}
/* INNOVACIÓN, MARKETING, PROYECTOS y CONTACTO usan elementos HTML reales
   en vez de ::before/::after: los pseudo-elementos se anulan. */
.page-hero--innovacion::before,
.page-hero--innovacion::after,
.page-hero--marketing::before,
.page-hero--marketing::after,
.page-hero--proyectos::before,
.page-hero--proyectos::after,
.page-hero--contacto::before,
.page-hero--contacto::after {
  display: none;
}

/* EQUIPAMIENTO — infraestructura empresarial conectada ------------------- */
.page-hero--equipamiento::before,
.page-hero--equipamiento::after {
  display: none;
}

.hero-deco--equipamiento {
  width: 500px;
  height: 360px;
}

.infra-scene {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.infra-scene__grid {
  fill: none;
  stroke: color-mix(in srgb, var(--purple-deep) 11%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  transform-box: view-box;
  transform-origin: 270px 180px;
  animation: infraGrid 28s linear infinite;
}

@keyframes infraGrid {
  to { transform: rotate(360deg); }
}

.infra-scene__links {
  fill: none;
  stroke: color-mix(in srgb, var(--purple-deep) 48%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  animation: infraFlow 4s linear infinite;
}

@keyframes infraFlow {
  to { stroke-dashoffset: -48; }
}

.infra-scene__rack-shell {
  fill: color-mix(in srgb, var(--surface) 95%, transparent);
  stroke: color-mix(in srgb, var(--purple-deep) 30%, var(--border));
  stroke-width: 1.4;
}

.infra-scene__rack-head polygon { fill: url(#infra-gradient); }
.infra-scene__rack-head circle { fill: var(--accent-neon); animation: infraLed 1.8s ease-in-out infinite; }

.infra-scene__rack-head text,
.infra-scene__node text {
  fill: var(--text-strong);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.infra-scene__unit {
  transform-box: fill-box;
  transform-origin: center;
  animation: infraUnit 5.4s ease-in-out infinite;
}

.infra-scene__unit--2 { animation-delay: -1.8s; }
.infra-scene__unit--3 { animation-delay: -3.6s; }

.infra-scene__unit > rect:first-child {
  fill: color-mix(in srgb, var(--purple-deep) 7%, var(--surface));
  stroke: var(--border);
  stroke-width: 1;
}

.infra-scene__unit circle {
  fill: var(--accent-neon);
  animation: infraLed 2s ease-in-out infinite;
}

.infra-scene__unit circle:nth-of-type(even) { animation-delay: -1s; }

.infra-scene__unit path {
  fill: none;
  stroke: color-mix(in srgb, var(--text-muted) 55%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}

.infra-scene__unit rect:not(:first-child) {
  fill: color-mix(in srgb, var(--purple-deep) 24%, var(--surface));
  stroke: color-mix(in srgb, var(--purple-deep) 42%, transparent);
  stroke-width: 1;
}

@keyframes infraUnit {
  0%, 100% { opacity: 0.78; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}

@keyframes infraLed {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; filter: drop-shadow(0 0 4px var(--accent-neon)); }
}

.infra-scene__fan {
  fill: none !important;
  stroke: var(--purple-deep);
  stroke-width: 1.4;
}

.infra-scene__fan-blades {
  stroke: var(--purple-light) !important;
  stroke-width: 1.2 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: infraFan 5s linear infinite;
}

@keyframes infraFan {
  to { transform: rotate(360deg); }
}

.infra-scene__capacity rect:first-child { fill: var(--border); }

.infra-scene__capacity-fill {
  fill: url(#infra-gradient) !important;
  transform-box: fill-box;
  transform-origin: left center;
  animation: infraCapacity 4.8s ease-in-out infinite;
}

@keyframes infraCapacity {
  0%, 100% { transform: scaleX(0.45); }
  55% { transform: scaleX(1); }
}

.infra-scene__node {
  transform-box: fill-box;
  transform-origin: center;
  animation: infraNode 4.8s ease-in-out infinite;
}

.infra-scene__node--workstation { animation-delay: -1.2s; }
.infra-scene__node--network { animation-delay: -2.4s; }
.infra-scene__node--backup { animation-delay: -3.6s; }

.infra-scene__node > rect:first-child {
  fill: color-mix(in srgb, var(--surface) 94%, transparent);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.infra-scene__node ellipse,
.infra-scene__node path,
.infra-scene__node rect:not(:first-child),
.infra-scene__node circle {
  fill: none;
  stroke: var(--purple-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.infra-scene__node-sub {
  fill: var(--text-muted) !important;
  font-size: 6px !important;
  letter-spacing: 0.12em !important;
}

@keyframes infraNode {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.infra-scene__traveler { fill: var(--accent-neon); }
.infra-scene__traveler--workstation { fill: var(--purple-light); }
.infra-scene__traveler--network { fill: var(--purple-deep); }
.infra-scene__traveler--backup { fill: var(--text-strong); }

@media (prefers-reduced-motion: reduce) {
  .infra-scene__traveler { display: none; }
}
/* ==========================================================================
   ELEMENTOS DECORATIVOS HTML — flotantes en los heroes
   ========================================================================== */

/* Contenedor compartido: posiciona el grupo a la derecha del hero. */
.hero-deco {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  height: 340px;
  pointer-events: none;
  z-index: 0;
}

/* Animación flotante reutilizable. Cada elemento define --float-d (duración)
   y --float-y (amplitud vertical). */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--float-y, -8px)); }
}
.deco-float {
  animation: heroFloat var(--float-d, 4s) ease-in-out infinite;
}

/* --- CONTACTO: burbujas de conversación y mini formulario ----------------- */
.hero-deco--contacto { width: 380px; height: 320px; }

.deco-burbuja {
  position: absolute;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-family: var(--font-body);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.deco-burbuja__ico { flex-shrink: 0; }

.deco-burbuja--wa {
  background: #dcf8c6;
  color: #1a3a1a;
  top: 10px; left: 0;
  border-bottom-left-radius: 4px;
}
.deco-burbuja--resp {
  background: var(--purple-deep);
  color: #fff;
  top: 64px; left: 60px;
  border-bottom-right-radius: 4px;
}
.deco-burbuja--mail {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  bottom: 50px; left: 20px;
}

.deco-form {
  position: absolute;
  top: 130px; right: 0;
  width: 155px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.deco-form__label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-body);
}
.deco-form__input {
  height: 22px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.deco-form__textarea {
  height: 36px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.deco-form__btn {
  align-self: flex-end;
  padding: 4px 14px;
  border-radius: 6px;
  background: var(--purple-deep);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  font-family: var(--font-body);
}

/* --- PROYECTOS: mockups de dispositivos y carpeta digital ----------------- */
.hero-deco--proyectos { width: 440px; height: 340px; }

.deco-phone {
  position: absolute;
  top: 10px; left: 0;
  width: 90px; height: 170px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px 8px 12px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.deco-phone__notch {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 5px;
  background: var(--border);
  border-radius: 3px;
}
.deco-phone__status {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--purple-deep);
  font-family: var(--ff-heading);
  letter-spacing: 0.04em;
}
.deco-phone__line {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}
.deco-phone__bar {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: auto;
  height: 50px;
}
.deco-phone__bar i {
  flex: 1;
  background: var(--purple-deep);
  border-radius: 2px 2px 0 0;
  opacity: 0.6;
}

.deco-browser {
  position: absolute;
  top: 30px; right: 0;
  width: 210px; height: 150px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.deco-browser__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.deco-browser__toolbar i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.deco-browser__toolbar i:first-child { background: #ff5f57; }
.deco-browser__toolbar i:nth-child(2) { background: #febc2e; }
.deco-browser__toolbar i:nth-child(3) { background: #28c840; }
.deco-browser__url {
  margin-left: 6px;
  font-size: 0.5rem;
  color: var(--text-muted);
  font-family: var(--font-body);
}
.deco-browser__nav {
  height: 5px;
  margin: 6px 8px 0;
  width: 60%;
  background: var(--purple-deep);
  border-radius: 3px;
  opacity: 0.5;
}
.deco-browser__content {
  display: flex;
  gap: 8px;
  padding: 8px;
  flex: 1;
}
.deco-browser__block {
  width: 50%;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-light, #c4b5fd));
  border-radius: 6px;
  opacity: 0.3;
}
.deco-browser__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 4px;
}
.deco-browser__lines span {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  display: block;
}

.deco-folder {
  position: absolute;
  bottom: 20px; left: 30px;
  width: 120px;
}
.deco-folder__tab {
  display: inline-block;
  padding: 3px 12px;
  background: var(--purple-deep);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  font-family: var(--ff-heading);
  border-radius: 6px 6px 0 0;
}
.deco-folder__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 0 8px 8px 8px;
  box-shadow: var(--shadow-sm);
}
.deco-folder__line {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.deco-tablet {
  position: absolute;
  bottom: 10px; right: 40px;
  width: 110px; height: 80px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 14px 8px 8px;
  overflow: hidden;
}
.deco-tablet__cam {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: var(--border);
  border-radius: 50%;
}
.deco-tablet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 100%;
}
.deco-tablet__grid i {
  background: linear-gradient(135deg, rgba(120,88,248,0.15), rgba(120,88,248,0.05));
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

/* --- INNOVACIÓN: editor de código, app móvil, núcleo de IA y flujo --------
   Mini escena de producto en lugar de iconos sueltos: se ve lo que SOLU180
   construye de verdad. El único acento lima del hero es el cursor que
   teclea en el editor. Todo CSS, sin imágenes ni JS. */
.hero-deco--innovacion { width: 440px; height: 350px; }

/* Editor de código = app web. Misma familia visual que .deco-browser. */
.deco-editor {
  position: absolute;
  top: 0; left: 0;
  width: 240px; height: 168px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.deco-editor__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.deco-editor__bar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.deco-editor__bar i:first-child { background: #ff5f57; }
.deco-editor__bar i:nth-child(2) { background: #febc2e; }
.deco-editor__bar i:nth-child(3) { background: #28c840; }
.deco-editor__file {
  margin-left: 6px;
  font-size: 0.55rem;
  font-family: var(--font-body);
  color: var(--text-muted);
}
.deco-editor__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deco-editor__linea {
  display: block;
  height: 6px;
  border-radius: 3px;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--purple-deep), rgba(120, 88, 248, 0.35));
  opacity: 0.55;
}
.deco-editor__linea--sangria { margin-left: 18px; }

/* La última línea se "escribe" en bucle; el cursor lima parpadea al final. */
.deco-editor__linea--tecleo {
  width: 64%;
  opacity: 0.8;
  position: relative;
  animation: decoTecleo 4s steps(16) infinite;
}
.deco-editor__linea--tecleo::after {
  content: "";
  position: absolute;
  right: -7px; top: -2px;
  width: 2.5px; height: 10px;
  border-radius: 1px;
  background: var(--neon);
  animation: decoCursor 0.9s steps(2) infinite;
}
@keyframes decoTecleo {
  0% { width: 6%; }
  55%, 100% { width: 64%; }
}
@keyframes decoCursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Teléfono con interfaz = app móvil. */
.deco-movil {
  position: absolute;
  top: 26px; right: 6px;
  width: 96px; height: 180px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 22px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.deco-movil__notch {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 5px;
  border-radius: 3px;
  background: var(--border);
}
.deco-movil__titulo {
  height: 8px;
  width: 60%;
  border-radius: 4px;
  background: var(--purple-deep);
  opacity: 0.75;
}
.deco-movil__card {
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(120, 88, 248, 0.28), rgba(120, 88, 248, 0.10));
  border: 1px solid var(--border-subtle);
}
.deco-movil__card--alt { height: 26px; opacity: 0.7; }
.deco-movil__nav {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
}
.deco-movil__nav i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.deco-movil__nav i:first-child { background: var(--purple-deep); }

/* Núcleo de IA: emite dos anillos de pulso desfasados. */
.deco-ia {
  position: absolute;
  bottom: 16px; left: 34px;
  width: 62px; height: 62px;
}
.deco-ia__nucleo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--purple-deep);
  color: #fff;
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  box-shadow: 0 0 26px rgba(120, 88, 248, 0.35);
}
.deco-ia::before,
.deco-ia::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(120, 88, 248, 0.45);
  animation: decoPulso 3s ease-out infinite;
}
.deco-ia::after { animation-delay: 1.5s; }
@keyframes decoPulso {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Flujo de datos entre nodos: la línea discontinua circula sin fin. */
.deco-flujo {
  position: absolute;
  bottom: 4px; right: 12px;
  width: 210px; height: 110px;
  color: var(--purple-deep);
}
.deco-flujo circle { fill: currentColor; opacity: 0.45; }
.deco-flujo path {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 5 7;
  animation: decoFlujo 2.8s linear infinite;
}
@keyframes decoFlujo {
  to { stroke-dashoffset: -24; }
}

/* --- MARKETING: estudio creativo de identidad visual y campaña ------------ */
.hero-deco--marketing {
  width: 520px;
  height: 390px;
}

.creative-canvas {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.creative-canvas__board {
  fill: color-mix(in srgb, var(--surface) 92%, transparent);
  stroke: color-mix(in srgb, var(--purple-deep) 18%, var(--border));
  stroke-width: 1.2;
}

.creative-canvas__toolbar circle {
  fill: color-mix(in srgb, var(--purple-deep) 36%, var(--surface));
}

.creative-canvas__toolbar text,
.creative-canvas__kicker,
.creative-canvas__palette text {
  fill: var(--text-muted);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.creative-canvas__toolbar path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 2;
  stroke-linecap: round;
}

.creative-canvas__underline {
  fill: none;
  stroke: var(--accent-neon);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 176;
  animation: creativeUnderline 4.8s var(--ease-standard) infinite;
}

@keyframes creativeUnderline {
  0%, 12% { stroke-dashoffset: 176; opacity: 0.2; }
  34%, 78% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -176; opacity: 0.15; }
}

.creative-canvas__type {
  transform-box: fill-box;
  transform-origin: center;
  animation: creativeType 5.4s ease-in-out infinite;
}

.creative-canvas__aa {
  fill: var(--text-strong);
  font-family: var(--font-display);
  font-size: 112px;
  font-weight: 800;
  letter-spacing: -0.08em;
}

.creative-canvas__type-name {
  fill: var(--purple-light);
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.creative-canvas__type rect {
  fill: color-mix(in srgb, var(--text-muted) 24%, transparent);
}

@keyframes creativeType {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.creative-canvas__swatch {
  transform-box: fill-box;
  transform-origin: center;
  animation: creativeSwatch 4s ease-in-out infinite;
}

.creative-canvas__swatch--1 { fill: #252736; }
.creative-canvas__swatch--2 { fill: #7858f8; animation-delay: -0.5s; }
.creative-canvas__swatch--3 { fill: #bcabfc; animation-delay: -1s; }
.creative-canvas__swatch--4 { fill: #b8ff00; animation-delay: -1.5s; }

@keyframes creativeSwatch {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

.creative-canvas__bezier {
  fill: color-mix(in srgb, var(--surface) 92%, transparent);
  stroke: var(--purple-light);
  stroke-width: 1.4;
}

.creative-canvas__curve {
  fill: none;
  stroke: var(--purple-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 160;
  animation: creativeCurve 5.2s var(--ease-standard) infinite;
}

.creative-canvas__handles {
  fill: none;
  stroke: color-mix(in srgb, var(--text-muted) 38%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

@keyframes creativeCurve {
  0%, 10% { stroke-dashoffset: 160; }
  42%, 82% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -160; }
}

.creative-canvas__poster-orbit {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 2;
  stroke-dasharray: 7 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: creativeOrbit 14s linear infinite;
}

.creative-canvas__poster-dot {
  fill: rgba(184, 255, 0, 0.88);
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  animation: creativeBlob 6s ease-in-out infinite;
}

.creative-canvas__poster-wave {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 28;
  stroke-linecap: round;
  animation: creativeWave 6s ease-in-out infinite;
}

.creative-canvas__poster-small,
.creative-canvas__poster-title {
  fill: #ffffff;
  font-family: var(--font-display);
}

.creative-canvas__poster-small {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.72;
}

.creative-canvas__poster-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.creative-canvas__poster-line { fill: #b8ff00; }

.creative-canvas__sheen {
  transform: skewX(-12deg) translateX(0);
  animation: creativeSheen 6.5s ease-in-out infinite;
}

@keyframes creativeOrbit {
  to { transform: rotate(360deg); }
}

@keyframes creativeBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-9px, 12px) scale(1.14); }
}

@keyframes creativeWave {
  0%, 100% { transform: translateX(-8px); }
  50% { transform: translateX(10px); }
}

@keyframes creativeSheen {
  0%, 18% { transform: skewX(-12deg) translateX(0); opacity: 0; }
  30% { opacity: 0.62; }
  60%, 100% { transform: skewX(-12deg) translateX(230px); opacity: 0; }
}

.creative-canvas__badge {
  transform-box: fill-box;
  transform-origin: center;
  animation: creativeBadge 4.6s ease-in-out infinite;
}

.creative-canvas__badge--idea circle,
.creative-canvas__badge--reach rect {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.2;
}

.creative-canvas__badge--idea path,
.creative-canvas__badge--reach path,
.creative-canvas__badge--reach circle {
  fill: none;
  stroke: var(--purple-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.creative-canvas__badge--reach { animation-delay: -2.2s; }
.creative-canvas__badge--reach circle { fill: var(--accent-neon); stroke: none; }

@keyframes creativeBadge {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

.creative-canvas__cursor {
  fill: var(--accent-neon);
  stroke: var(--text-strong);
  stroke-width: 1.2;
  filter: drop-shadow(0 4px 6px rgba(37, 39, 54, 0.24));
}

.creative-canvas__sparks {
  fill: none;
  stroke: var(--purple-light);
  stroke-width: 2;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: creativeSparks 5s ease-in-out infinite;
}

.creative-canvas__sparks circle { fill: var(--accent-neon); stroke: none; }

@keyframes creativeSparks {
  0%, 100% { opacity: 0.34; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* La sección explica el problema con una jerarquía más editorial y contenida. */
.marketing-problema h2 {
  max-width: 12ch;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.02;
}

.marketing-problema .lede {
  max-width: 43rem;
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.14rem);
  line-height: 1.72;
}

@media (prefers-reduced-motion: reduce) {
  .creative-canvas__cursor,
  .creative-canvas__sheen {
    display: none;
  }
}
/* BLOG — escena editorial animada ----------------------------------------- */
.page-hero--blog::before,
.page-hero--blog::after {
  display: none;
}

.hero-deco--blog {
  width: 500px;
  height: 360px;
}

.blog-editorial {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.blog-editorial__page {
  transform-box: fill-box;
  transform-origin: center;
}

.blog-editorial__page--back {
  fill: color-mix(in srgb, var(--purple-deep) 14%, var(--surface));
  stroke: color-mix(in srgb, var(--purple-deep) 30%, transparent);
  animation: blogPageBack 7s ease-in-out infinite;
}

.blog-editorial__page--middle {
  fill: color-mix(in srgb, var(--purple-light) 12%, var(--surface));
  stroke: color-mix(in srgb, var(--purple-light) 28%, transparent);
  animation: blogPageMiddle 7s ease-in-out infinite;
}

.blog-editorial__page--front {
  animation: blogPageFront 5.6s ease-in-out infinite;
  filter: drop-shadow(0 18px 24px rgba(30, 25, 66, 0.18));
}

.blog-editorial__page--front > rect:first-child {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.2;
}

@keyframes blogPageBack {
  0%, 100% { transform: translate(0, 0) rotate(3deg); }
  50% { transform: translate(7px, -5px) rotate(5deg); }
}

@keyframes blogPageMiddle {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50% { transform: translate(-6px, 4px) rotate(-3.5deg); }
}

@keyframes blogPageFront {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.blog-editorial__rule {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}

.blog-editorial__brand,
.blog-editorial__category,
.blog-editorial__topics,
.blog-editorial__minutes,
.blog-editorial__tag text {
  font-family: var(--font-display);
  font-weight: 700;
}

.blog-editorial__brand {
  fill: var(--text-muted);
  font-size: 8px;
  letter-spacing: 0.18em;
}

.blog-editorial__number {
  fill: var(--purple-deep);
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.blog-editorial__category {
  fill: var(--purple-light);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.blog-editorial__title {
  fill: var(--text-strong);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.blog-editorial__line {
  fill: color-mix(in srgb, var(--text-muted) 20%, transparent);
  transform-box: fill-box;
  transform-origin: left center;
  animation: blogLine 5.4s var(--ease-standard) infinite;
}

.blog-editorial__line--2 { animation-delay: -0.35s; }
.blog-editorial__line--3 { animation-delay: -0.7s; }

@keyframes blogLine {
  0%, 12% { opacity: 0.22; transform: scaleX(0.2); }
  40%, 82% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.22; transform: scaleX(0.2); }
}

.blog-editorial__topics {
  fill: var(--purple-deep);
  font-size: 6px;
  letter-spacing: 0.12em;
  animation: blogTopics 5.4s var(--ease-standard) infinite;
}

@keyframes blogTopics {
  0%, 15%, 100% { opacity: 0.45; }
  40%, 82% { opacity: 1; }
}

.blog-editorial__progress-bg,
.blog-editorial__progress {
  fill: none;
  stroke-width: 3;
}

.blog-editorial__progress-bg { stroke: var(--border); }

.blog-editorial__progress {
  stroke: var(--purple-deep);
  stroke-linecap: round;
  stroke-dasharray: 113;
  transform: rotate(-90deg);
  transform-origin: 350px 287px;
  animation: blogProgress 5.4s var(--ease-standard) infinite;
}

.blog-editorial__minutes {
  fill: var(--text-muted);
  font-size: 7px;
  text-anchor: middle;
}

@keyframes blogProgress {
  0%, 12% { stroke-dashoffset: 108; }
  78%, 100% { stroke-dashoffset: 24; }
}

.blog-editorial__tag {
  transform-box: fill-box;
  transform-origin: center;
  animation: blogTag 4.8s ease-in-out infinite;
}

.blog-editorial__tag--marketing { animation-delay: -1.6s; }
.blog-editorial__tag--business { animation-delay: -3.2s; }

.blog-editorial__tag rect {
  fill: color-mix(in srgb, var(--surface) 94%, transparent);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.blog-editorial__tag circle { fill: var(--accent-neon); }
.blog-editorial__tag--marketing circle { fill: var(--purple-light); }
.blog-editorial__tag--business circle { fill: var(--purple-deep); }

.blog-editorial__tag text {
  fill: var(--text-strong);
  font-size: 7px;
  letter-spacing: 0.08em;
}

@keyframes blogTag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.blog-editorial__pen-line {
  fill: none;
  stroke: var(--purple-light);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 145;
  animation: blogPenLine 5.8s var(--ease-standard) infinite;
}

@keyframes blogPenLine {
  0%, 12% { stroke-dashoffset: 145; opacity: 0; }
  42%, 84% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -145; opacity: 0; }
}

.blog-editorial__cursor {
  fill: var(--accent-neon);
  stroke: var(--text-strong);
  stroke-width: 1.1;
  filter: drop-shadow(0 3px 5px rgba(37, 39, 54, 0.25));
}

.blog-editorial__spark {
  fill: none;
  stroke: var(--purple-light);
  stroke-width: 2;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: blogSpark 4s ease-in-out infinite;
}

.blog-editorial__spark circle {
  fill: var(--accent-neon);
  stroke: none;
}

@keyframes blogSpark {
  0%, 100% { opacity: 0.3; transform: scale(0.84); }
  50% { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-editorial__cursor { display: none; }
}
@media (max-width: 1100px) {
  /* En pantallas medianas y móviles el motivo chocaría con el texto: fuera. */
  .page-hero::before,
  .page-hero::after,
  .hero-deco,
  .giro__circulo,
  .giro__viajero,
  .giro__tarjeta,
  .giro__sistema {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deco-float,
  .creative-canvas__underline,
  .creative-canvas__type,
  .creative-canvas__swatch,
  .creative-canvas__curve,
  .creative-canvas__poster-orbit,
  .creative-canvas__poster-dot,
  .creative-canvas__poster-wave,
  .creative-canvas__sheen,
  .creative-canvas__badge,
  .creative-canvas__sparks,
  .blog-editorial__page--back,
  .blog-editorial__page--middle,
  .blog-editorial__page--front,
  .blog-editorial__line,
  .blog-editorial__topics,
  .blog-editorial__progress,
  .blog-editorial__tag,
  .blog-editorial__pen-line,
  .blog-editorial__spark,
  .infra-scene__grid,
  .infra-scene__links,
  .infra-scene__rack-head circle,
  .infra-scene__unit,
  .infra-scene__unit circle,
  .infra-scene__fan-blades,
  .infra-scene__capacity-fill,
  .infra-scene__node,
  .deco-editor__linea--tecleo,
  .deco-editor__linea--tecleo::after,
  .deco-flujo path {
    animation: none;
  }
  /* Los anillos de pulso quietos serían un borde extraño: mejor ocultos. */
  .deco-ia::before,
  .deco-ia::after {
    animation: none;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .giro__viajero {
    animation: none;
    /* Quieto en el destino: el "después". */
    transform: rotate(360deg) translateX(140px) rotate(-360deg);
  }

  .giro__cierre {
    animation: none;
    stroke-dashoffset: 0; /* el círculo se muestra ya cerrado */
  }

  .giro__tarjeta,
  .giro__sistema {
    animation: none;
  }
}

/* Sin maquetas ni rectángulos decorativos: el hero interior es tipográfico.
   El titular manda y la descripción acompaña en un cuerpo contenido. */
.page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero__copy {
  max-width: 760px;
}

/* El titular interior al mismo peso que la portada: es la voz de la página. */
.page-hero h1 {
  font-size: var(--step-5);
}

.page-hero h1 {
  color: var(--text-strong);
}

.page-hero .lede {
  color: var(--text-muted);
  margin-top: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 58ch;
}

/* --- Máquina de escribir -------------------------------------------------- */
/* El texto lo teclea main.js; aquí solo vive el cursor: una barra lima
   parpadeando al final, como un editor de código. El acento de marca de
   esta pantalla. */
[data-teclear] {
  display: inline-block;
  min-height: 1em; /* la línea no colapsa cuando el texto está borrado */
}

[data-teclear]::after {
  content: "";
  display: inline-block;
  width: 0.09em;
  height: 0.82em;
  margin-left: 0.08em;
  background: var(--neon);
  vertical-align: -0.04em;
  animation: teclear-cursor 1.05s steps(2, start) infinite;
}

@keyframes teclear-cursor {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin animación no hay tecleo: el cursor sobra. */
  [data-teclear]::after {
    display: none;
  }
}

/* Migas sobre el hero claro: tokens del tema, no colores inversos. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.breadcrumb a:hover {
  color: var(--text-strong);
}

.breadcrumb__sep {
  opacity: 0.5;
}

.breadcrumb [aria-current="page"] {
  color: var(--purple-deep);
}

/* Lista de entregables */
.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--gap);
}

.deliverable {
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), transform var(--dur) var(--ease);
}

.deliverable:hover {
  border-color: var(--purple-light);
  transform: translateY(-4px);
}

/* Icono opcional de la tarjeta (los valores de Nosotros lo usan): chip en
   degradado violeta con el trazo en blanco, como los de servicios. */
.deliverable__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--grad-violet);
  color: #ffffff;
  margin-bottom: 1rem;
}

.deliverable__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.deliverable__text {
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* Píldoras de tecnología */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.pill {
  padding: 0.45rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-size: var(--step--1);
  color: var(--text-muted);
  background: var(--surface);
}

/* Tira de marcas con las que se trabaja: wordmarks tipográficos, no artes
   oficiales de terceros (evita temas de derechos de marca). En gris apagado
   y a color pleno en hover, como una tira "trabajamos con" estándar. */
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  margin-top: 1.75rem;
}

.brand-strip__item {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.brand-strip__item:hover {
  opacity: 1;
  color: var(--text);
}

/* Variante en marquesina de la tira de marcas: mismo mecanismo que .stats
   (pista con el grupo duplicado, bucle del 50%, máscara en los bordes). */
.brand-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brand-marquee__pista {
  display: flex;
  width: max-content;
  animation: brand-marquee-bucle 22s linear infinite;
}

.brand-marquee:hover .brand-marquee__pista {
  animation-play-state: paused;
}

.brand-marquee__grupo {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
}

@keyframes brand-marquee-bucle {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .brand-marquee__pista {
    animation: none;
    width: auto;
  }

  .brand-marquee__grupo {
    flex-wrap: wrap;
    padding-right: 0;
  }

  .brand-marquee__grupo[aria-hidden="true"] {
    display: none;
  }
}

/* Navegación entre servicios */
.service-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: space-between;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.service-nav__item {
  max-width: 300px;
}

.service-nav__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.4rem;
}

.service-nav__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  transition: color 0.2s var(--ease);
}

.service-nav__item:hover .service-nav__title {
  color: var(--purple-deep);
}

.service-nav__item--next {
  text-align: right;
  margin-left: auto;
}

/* --- Formulario de contacto --------------------------------------------- */
.form {
  display: grid;
  gap: 1.1rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1.1rem;
}

/* --- Formulario conversacional (estilo Typeform) ------------------------- */
/* Lo construye assets/js/formulario.js dentro de [data-formulario]. Una
   pantalla a la vez sobre un lienzo fijo; la anterior sale y la nueva entra
   deslizándose. Todo tematizado con los tokens: funciona en claro y oscuro. */
.tf {
  position: relative;
  min-height: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tf__progreso {
  height: 4px;
  background: var(--border);
}

.tf__progreso-barra {
  height: 100%;
  width: 0;
  background: var(--purple-deep);
  transition: width 0.35s var(--ease);
}

.tf__escenario {
  position: relative;
  flex: 1;
  display: flex;
}

.tf__pantalla {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.tf__pantalla--baja {
  transform: translateY(-26px);
}

.tf__pantalla.is-activa {
  opacity: 1;
  transform: none;
}

.tf__cuerpo {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.tf__cuerpo--centrado {
  text-align: center;
  justify-items: center;
}

.tf__cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.tf__numero {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--purple-deep);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}

.tf__pregunta {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  text-transform: none;
  letter-spacing: -0.01em;
}

.tf__titular {
  font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem);
  text-transform: none;
}

.tf__ayuda {
  color: var(--text-muted);
  line-height: 1.6;
}

.tf__pista {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tf__opciones {
  display: grid;
  gap: 0.55rem;
  width: 100%;
}

.tf__opcion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.tf__opcion:hover {
  border-color: var(--purple-deep);
}

.tf__opcion.is-elegida {
  border-color: var(--purple-deep);
  background: var(--wash);
}

.tf__letra {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--purple-deep);
}

.is-elegida .tf__letra {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: #ffffff;
}

/* Campo de respuesta: solo subrayado, como Typeform. */
.tf__campo {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--purple-deep);
  background: transparent;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--text-strong);
}

.tf__campo::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}

.tf__campo:focus {
  outline: none;
  box-shadow: 0 2px 0 0 var(--purple);
}

.tf__campo--area {
  min-height: 110px;
  resize: vertical;
  font-size: 1.05rem;
  line-height: 1.55;
}

.tf__ok {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.5rem;
  background: var(--purple-deep);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.tf__ok:hover {
  background: var(--purple);
}

.tf__ok:disabled {
  opacity: 0.6;
  cursor: default;
}

.tf__error {
  color: #d64545;
  font-size: 0.85rem;
  font-weight: 600;
}

.tf__aviso {
  font-size: 0.85rem;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  max-width: 46ch;
}

.tf__consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  cursor: pointer;
}

.tf__consentimiento input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--purple-deep);
}

.tf__consentimiento a {
  color: var(--purple-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Campo trampa anti-robots: fuera de la vista, no display:none — algunos
   robots ignoran lo oculto por completo. */
.tf__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Calendario de reservas de Google, incorporado en la pantalla final de la
   rama "reunión". Solo existe cuando esa pantalla se monta (carga perezosa). */
.tf__calendario {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

@media (max-width: 640px) {
  .tf__calendario {
    height: 480px;
  }
}

.tf__pista--enlace {
  color: var(--purple-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tf__nav {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  gap: 2px;
}

.tf__nav-btn {
  border: 0;
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--purple-deep);
  color: #ffffff;
  font-size: 0.7rem;
  cursor: pointer;
}

.tf__nav-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.tf__nav-btn:last-child {
  border-radius: 0 6px 6px 0;
}

.tf__nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .tf__pantalla {
    transition: none;
    transform: none;
  }
}

.field {
  display: grid;
  gap: 0.45rem;
}

/* Casilla de consentimiento: fila con la casilla alineada a la primera línea
   del texto, no la pila etiqueta-encima-de-campo de los demás. */
.field--consentimiento {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
}

.field--consentimiento input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--purple-deep);
}

.field--consentimiento label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.field--consentimiento a {
  color: var(--purple-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Campos — spec del design system: borde default, radio md, foco con anillo. */
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.field input,
.field textarea,
.field select {
  padding: 0.7rem 14px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-strong);
  transition: border-color var(--dur-ui) var(--ease-standard),
    box-shadow var(--dur-ui) var(--ease-standard);
}

.field input,
.field select {
  height: 46px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--purple-deep);
  box-shadow: var(--ring-focus);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.form__note {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* --- Submenú de Servicios ----------------------------------------------- */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__caret {
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

.nav__link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.submenu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  translate: -50% 0;
  min-width: 268px;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -18px rgba(23, 22, 31, 0.28);
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    visibility 0.25s;
}

.nav__item:hover .submenu,
.submenu:focus-within,
.submenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.submenu a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: var(--step--1);
  color: var(--text-muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.submenu a:hover,
.submenu a[aria-current="page"] {
  background: var(--wash);
  color: var(--purple-deep);
}

.submenu__all {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem !important;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-strong) !important;
}

@media (max-width: 900px) {
  /* En móvil el submenú se despliega en el flujo, no flotando. */
  .nav__item {
    display: block;
    border-bottom: 1px solid var(--border);
  }

  .nav__item .nav__link {
    border-bottom: 0;
    width: 100%;
    justify-content: space-between;
    display: flex;
  }

  .submenu {
    position: static;
    translate: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: var(--bg-alt);
    border-radius: var(--radius);
    padding: 0.35rem;
    margin-bottom: 0.9rem;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__item:hover .submenu {
    display: none;
  }

  .submenu.is-open {
    display: grid;
  }

  .submenu a {
    font-size: var(--step-0);
  }
}

/* --- Botón de tema ------------------------------------------------------- */
.theme-toggle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.theme-toggle:hover {
  border-color: var(--purple);
  color: var(--purple-deep);
}

/* Cada icono se muestra solo en su tema. */
.theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .theme-toggle .icon-sun {
    display: none;
  }
  [data-theme="auto"] .theme-toggle .icon-moon {
    display: block;
  }
}

/* Tema y hamburguesa viven fuera de .nav: en móvil el panel se pliega y estos
   dos deben seguir alcanzables. */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* --- Tarjetas de proyecto ------------------------------------------------ */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Contenedor posicionado: sin esto el brillo del cursor se anclaría al
   antepasado equivocado y aparecería fuera de la tarjeta. */
.project-card {
  position: relative;
  border-radius: var(--radius-lg);
}

.project-card__visual {
  --visual-bg: var(--purple-deep);
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: var(--radius-lg);
  background: var(--visual-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: transform var(--dur) var(--ease);
}

.project-card:hover .project-card__visual {
  transform: translateY(-6px);
}

.project-card__num {
  position: absolute;
  top: 1.1rem;
  left: 1.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

.project-card__visual--light .project-card__num {
  color: rgba(23, 22, 31, 0.4);
}

/* La ficha blanca inclinada: el gesto de la referencia. */
.project-card__chip {
  position: relative;
  width: 62%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.35);
  transform: rotate(-4deg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.15rem;
  transition: transform var(--dur) var(--ease);
}

.project-card:hover .project-card__chip {
  transform: rotate(0deg);
}

.project-card__chip::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--purple-deep);
}

.project-card__chip-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  color: #17161f;
  line-height: 1;
}

.project-card__chip-sub {
  font-size: 0.82rem;
  color: #75757f;
}

.project-card__chip--brand {
  justify-content: center;
  padding: 1rem;
}

.project-card__chip--brand::before {
  display: none;
}

.project-card__brand-logo {
  display: block;
  width: 100%;
  height: auto;
}
.project-card__label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple-deep);
  display: block;
  margin-bottom: 0.6rem;
}

.project-card__title {
  font-size: var(--step-2);
  margin-bottom: 0.7rem;
}

.project-card__text {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.project-card__link {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--purple-deep);
  font-weight: 700;
}

.project-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.project-card__link svg {
  transition: transform var(--dur-ui) var(--ease-standard);
}

.project-card:hover .project-card__link svg {
  transform: translateX(0.25rem);
}
/* --- Marco de teléfono para prototipos ---------------------------------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 250px;
  border-radius: 34px;
  background: #14151d;
  padding: 8px;
  box-shadow: var(--shadow-xl);
  flex-shrink: 0;
}

/* Muesca superior */
.phone::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  width: 36%;
  height: 15px;
  border-radius: 0 0 12px 12px;
  background: #14151d;
  z-index: 2;
}

/* La proporción la marca la pantalla, no el marco: así coincide exactamente
   con el visor real de la app (430x932) y la maqueta se escala sin deformarse. */
.phone__screen {
  width: 100%;
  aspect-ratio: 430 / 932;
  height: auto;
  border-radius: 27px;
  overflow: hidden;
  background: var(--gray-100);
  display: block;
}

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* --- Showcase de app (prototipo) ---------------------------------------- */
.app-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.app-showcase__phones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  perspective: 1200px;
}

.app-showcase__phones .phone:first-child {
  transform: rotate(-5deg) translateY(12px);
  z-index: 1;
}

.app-showcase__phones .phone:last-child {
  transform: rotate(5deg) translateY(-12px) scale(0.96);
  margin-left: -2.5rem;
}

.app-showcase__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.75rem;
}

@media (max-width: 860px) {
  .app-showcase {
    grid-template-columns: 1fr;
  }

  .app-showcase__phones {
    order: 2;
    margin-top: 2.5rem;
    gap: 0.75rem;
  }

  /* Rectos y sin solape: dos cajas rotadas se salían del contenedor. */
  .app-showcase__phones .phone,
  .app-showcase__phones .phone:first-child,
  .app-showcase__phones .phone:last-child {
    max-width: 156px;
    transform: none;
    margin-left: 0;
  }
}

/* --- Bloque lima --------------------------------------------------------- */
/* Lo comparten la demo de la app y los proyectos: al ir seguidas forman un
   único bloque continuo de color, como en la referencia. El botón dentro va
   oscuro: uno neón sobre fondo neón desaparecería. */
.lima {
  background: var(--neon);
  color: var(--black);
  overflow: hidden;
}

/* En oscuro bajamos un punto el lima para que no deslumbre. */
[data-theme="dark"] .lima {
  background: var(--neon-600);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .lima {
    background: var(--neon-600);
  }
}

/* El texto va siempre en ink: los tokens de tema lo pondrían blanco en
   modo oscuro y sobre lima no se leería. */
.lima h2,
.lima h3,
.lima .eyebrow {
  color: var(--black);
}

.lima .eyebrow::before {
  background: var(--black);
}

/* Al ir pegadas, se suprime el doble relleno vertical de la costura. */
.lima + .lima {
  padding-top: 0;
}

/* --- Demo de app en celular ---------------------------------------------- */

.app-demo__texto {
  color: rgba(37, 39, 54, 0.78);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 46ch;
  margin: 1.25rem 0 2rem;
}

.app-demo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.app-demo__device {
  display: flex;
  justify-content: center;
}

.app-demo__device .phone {
  max-width: 290px;
}

/* --- La "navegación": pantallas reales del prototipo en iframes ---------- */
.app-demo__screen {
  position: relative;
  background: #ffffff;
}

/* El iframe se renderiza al tamaño real de un móvil (430x932) y se reduce con
   scale hasta encajar en el marco. Si se renderizara al ancho del marco (~274px)
   la app se comprimiría y el menú inferior perdería dos ítems. El tamaño y la
   escala los fija app-demo.js. */
.app-demo__pantalla {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  border: 0;
  display: block;
  background: #ffffff;
  opacity: 0;
  /* Es una demostración, no una app usable: no debe capturar el cursor
     ni robar el foco al navegar con teclado. */
  pointer-events: none;
  transition: opacity 0.45s var(--ease-standard);
}

.app-demo__pantalla.is-activa {
  opacity: 1;
}

/* Anillo que marca el toque sobre el botón naranja de ubicación. */
.app-demo__toque {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.app-demo__toque.is-activo {
  animation: demoToque 0.72s var(--ease-standard);
}

@keyframes demoToque {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }
  35% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@media (max-width: 900px) {
  .app-demo__inner {
    grid-template-columns: 1fr;
  }
}

/* --- Mapa de ubicación --------------------------------------------------- */
.mapa {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  aspect-ratio: 16 / 10;
}

.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* El mapa de Google llega siempre en claro; en modo oscuro se atenúa un punto
   para que no deslumbre junto al resto de la página. */
[data-theme="dark"] .mapa iframe {
  filter: brightness(0.86) contrast(1.05);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .mapa iframe {
    filter: brightness(0.86) contrast(1.05);
  }
}

.mapa__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.mapa__dir {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.mapa__dir strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

/* --- Sub-áreas de un frente ---------------------------------------------- */
/* Innovación agrupa cuatro áreas: cada una necesita su propio bloque sin
   convertirse en una página aparte. */
.area {
  scroll-margin-top: 6rem;
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--border);
}

.area:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.area + .area {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.area__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--purple-deep);
  display: block;
  margin-bottom: 0.75rem;
}

.area__titulo {
  font-size: var(--step-3);
  text-transform: none;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.area__intro {
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* Índice de áreas al inicio del frente */
.indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.indice a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--text-strong);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.indice a:hover {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: #ffffff;
}

/* --- Sección de videos (YouTube) ----------------------------------------- */
.videos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.videos-subhead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1.25rem;
}

.videos-lede {
  color: var(--text-muted);
  font-size: var(--step-0);
  margin-top: 0.75rem;
  max-width: 52ch;
}

/* --- Carrusel horizontal ------------------------------------------------ */
/* Se desliza con el dedo, la rueda o las flechas. Las flechas se ocultan
   solas cuando todo cabe en pantalla (con pocas piezas no estorban). */
.carrusel {
  position: relative;
}

.carrusel__pista {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.carrusel__pista::-webkit-scrollbar {
  height: 6px;
}

.carrusel__pista::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

/* La pone videos.js cuando todas las piezas caben sin desbordar. */
.carrusel__pista--centrada {
  justify-content: center;
}

/* Dentro del carrusel las tarjetas tienen ancho propio (no se estiran). */
.carrusel .yt {
  flex: 0 0 auto;
  width: min(320px, 82vw);
  scroll-snap-align: start;
}

.carrusel .yt--short {
  width: min(190px, 46vw);
}

.carrusel__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s var(--ease-standard),
    color 0.2s var(--ease-standard), opacity 0.2s var(--ease-standard);
}

.carrusel__flecha:hover {
  border-color: var(--purple);
  color: var(--purple-deep);
}

.carrusel__flecha:disabled {
  opacity: 0.3;
  cursor: default;
}

.carrusel__flecha[hidden] {
  display: none;
}

.carrusel__flecha--izq {
  left: -14px;
}

.carrusel__flecha--der {
  right: -14px;
}

/* Tarjeta final que aparece sola cuando hay más de 5 piezas. */
.yt--mas {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  background: var(--surface-2);
  border: 2px dashed var(--border-strong);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.yt--mas:hover {
  border-color: var(--purple);
  color: var(--purple-deep);
}

/* Carrusel de proyectos: MISMAS flechas que el carrusel de videos — heredan
   el estilo base tal cual (círculo de superficie del tema a los lados, a
   media altura, atenuado cuando no hay más tarjetas en ese sentido). Lo único
   propio es este display:contents: los botones de proyectos vienen envueltos
   en un div y así se posicionan contra .carrusel, igual que en videos. */
.carrusel--abajo .carrusel__flechas {
  display: contents;
}

/* Sin barra de scroll: la navegación va por las flechas y por el propio dedo. */
.carrusel--abajo .carrusel__pista {
  scrollbar-width: none;
}

.carrusel--abajo .carrusel__pista::-webkit-scrollbar {
  display: none;
}

/* --- Cortina: transición fijada al scroll -------------------------------- */
/* La sección es alta a propósito: esa altura extra es el "carril" de scroll
   que consume la animación mientras el contenido queda fijo en pantalla. */
.cortina {
  position: relative;
  height: 320vh;
  background: var(--black);
}

.cortina__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;

  /* Lima DEBAJO de la imagen: es lo que va quedando a la vista conforme la
     fotografía se retira. Antes el lima venía de un velo por encima; ahora la
     capa de color está detrás y la foto es la que se aparta. */
  background: var(--neon);
}

[data-theme="dark"] .cortina__sticky {
  background: var(--neon-600);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .cortina__sticky {
    background: var(--neon-600);
  }
}

/* Capa de contenido: titular y tarjetas. Va DEBAJO de la fotografía y no se
   mueve — es la foto la que se aparta para descubrirla. El relleno vertical
   normal de sección (144px) sobra aquí: todo tiene que caber en un visor. */
/* Capa de contenido: fondo lima, titular y tarjetas. Va POR DELANTE de todo
   —incluida la palabra— y entra con opacidad al final del recorrido, rematando
   de cubrir la foto que asome entre los trazos de las letras.

   El z-index por delante de la palabra es obligatorio: la palabra es lima
   sobre lima, invisible pero opaca, y si quedara por encima taparía el titular
   y las tarjetas dejándolos ver solo a trozos. Ya pasó una vez.

   La opacidad inicial la pone el JS, no el CSS: si la escribiéramos aquí y el
   script fallara, el contenido quedaría invisible para siempre. */
.cortina__capa {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  padding-block: clamp(1.5rem, 1rem + 2vh, 3rem);
  overflow: hidden;
}

/* Imagen de marca a sangre completa. Se queda QUIETA: solo hace un zoom de
   asentamiento (1.25 → 1.0, medido en Manychat) que da sensación de cámara
   retirándose. Lo que la hace desaparecer son las letras al crecer por encima
   y el fundido final del contenido, no un movimiento suyo. */
.cortina__fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scale(1.25);
  will-change: transform;
  overflow: hidden;
}

.cortina__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Las letras gigantes de escritorio son el SVG de abajo. Este span queda solo
   para móvil y movimiento reducido, donde la banda es estática; en escritorio
   se oculta. Aquí solo va la tipografía; la posición la ponen esos bloques. */
.cortina__palabra {
  display: none;
  white-space: nowrap;
  font-family: var(--font-titular);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--neon);
  pointer-events: none;
}

/* Letras vectoriales (escritorio), calcadas del mecanismo de Manychat: un
   <text> SVG cuya matriz de transformación anima el JS en cada fotograma.
   Al ser geometría reevaluada, se mantiene nítido a CUALQUIER escala.

   OJO: nada de will-change ni transform CSS aquí. Con texto HTML escalado, el
   navegador rasterizaba las letras una vez y estiraba ese bitmap hasta 14×:
   esa era la causa de que se vieran los píxeles. */
.cortina__letras {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

/* El tamaño base (100px) es solo la unidad de medida: el JS mide la caja real
   del texto y la normaliza al ancho del visor dentro de la matriz. */
.cortina__letras-texto {
  font-family: var(--font-titular);
  font-weight: 900;
  font-size: 100px;
  letter-spacing: -0.03em;
  fill: var(--neon);
}

/* En oscuro, el lima baja un punto — tanto el span de móvil (color) como las
   letras SVG de escritorio (fill). */
[data-theme="dark"] .cortina__palabra {
  color: var(--neon-600);
}

[data-theme="dark"] .cortina__letras-texto {
  fill: var(--neon-600);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .cortina__palabra {
    color: var(--neon-600);
  }

  [data-theme="auto"] .cortina__letras-texto {
    fill: var(--neon-600);
  }
}

/* --- Versión simple en móvil -------------------------------------------- */
/* Sin fijado ni recorrido: primero una banda con la imagen y la palabra
   centrada, y debajo el contenido en flujo normal. Todo lo que en escritorio
   va superpuesto, aquí va apilado. Evita el coste del efecto en equipos
   modestos y, sobre todo, que la foto tape el titular y las tarjetas. */
@media (max-width: 900px) {
  .cortina {
    height: auto;
  }

  /* Flex para poder REORDENAR: la banda de imagen con la palabra va PRIMERO
     y el contenido (titular + tarjetas) debajo — mismo orden narrativo que en
     escritorio: primero la escena, después las soluciones. */
  .cortina__sticky {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  /* Banda de imagen: deja de ser una capa superpuesta y pasa a ocupar sitio,
     encabezando la sección. */
  .cortina__fondo {
    position: relative;
    inset: auto;
    order: -1;
    height: 46vh;
    transform: none;
  }

  /* Las letras animadas son cosa de escritorio. */
  .cortina__letras {
    display: none;
  }

  /* La banda va ahora en CABECERA, así que la palabra se ancla desde arriba:
     23vh es el centro exacto de la banda de 46vh. */
  .cortina__palabra {
    display: block;
    position: absolute;
    top: 23vh;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 14vw, no 18vw: con diez letras ("SOLUCIONES") a 18vw la palabra medía
       403px en una pantalla de 390 y se salía por los lados. */
    font-size: min(14vw, 7rem);
    z-index: 2;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }

  /* El contenido vuelve al flujo, debajo de la banda. */
  .cortina__capa {
    position: static;
    padding-block: var(--seccion-y, 3.5rem);
    overflow: visible;
  }
}

/* Con movimiento reducido se comporta igual que la versión de móvil. */
@media (prefers-reduced-motion: reduce) {
  .cortina {
    height: auto;
  }

  .cortina__sticky {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .cortina__fondo {
    position: relative;
    inset: auto;
    order: -1;
    height: 46vh;
    transform: none;
  }

  .cortina__letras {
    display: none;
  }

  .cortina__palabra {
    display: block;
    position: absolute;
    top: 23vh;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(14vw, 8rem);
    z-index: 2;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }

  .cortina__capa {
    position: static;
    padding-block: 3.5rem;
    overflow: visible;
  }
}

/* --- Proyectos sobre el bloque lima -------------------------------------- */
/* NO poner aquí position: relative. Esta regla va después de .cortina__capa y,
   con la misma especificidad, le pisaba el position: absolute: la capa de
   contenido dejaba de ser capa, volvía al flujo y se quedaba estrecha, con las
   tarjetas cortadas. El position: relative lo necesitaba la ventana con la
   captura del prototipo, que ya no existe. */



.proyectos-lima__inner {
  position: relative;
  z-index: 1;
}

.proyectos-lima__titulo {
  text-align: center;

  /* El tope en ch se mide en anchos de carácter, así que crece con la fuente:
     16ch daban 422px en una pantalla de 390 y el titular se salía. El min con
     100% lo ata al ancho disponible. */
  max-width: min(16ch, 100%);
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/* En pantallas pequeñas el tamaño global de h2 no encoge lo bastante para
   "SOLUCIONES QUE TU" en mayúsculas: a 360px desbordaba 9px por lado. El
   titular baja atado al ancho del visor. */
@media (max-width: 640px) {
  .proyectos-lima__titulo {
    font-size: clamp(1.5rem, 8.4vw, 2.5rem);
  }
}

/* --- Tarjeta de proyecto (sobre lima) ------------------------------------ */
/* Blanca en claro; en oscuro acompaña a las demás superficies del tema (las
   variantes van al final de este bloque). El lima del fondo apenas cambia,
   pero una tarjeta blanca en un sitio en modo oscuro cantaba. */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-ui) var(--ease-standard),
    box-shadow var(--dur-ui) var(--ease-standard);
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pcard__icono {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--grad-violet);
  color: #ffffff;
}

.pcard__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  color: #252736;
  text-transform: none;
}

.pcard__texto {
  font-size: 14.5px;
  line-height: 1.55;
  color: #565a72;
  flex-grow: 1;
}

.pcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #252736;
  border-bottom: 1px solid rgba(37, 39, 54, 0.35);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 0.2s var(--ease-standard),
    border-color 0.2s var(--ease-standard);
}

.pcard__link:hover {
  color: var(--purple-deep);
  border-color: var(--purple-deep);
}

.pcard__link svg {
  transition: transform var(--dur-ui) var(--ease-standard);
}

.pcard__link:hover svg {
  transform: translateX(4px);
}

/* Versión oscura de la tarjeta: superficie y textos del tema, y el enlace
   pasa al morado claro en hover, como el resto de enlaces sobre oscuro. */
[data-theme="dark"] .pcard {
  background: var(--surface);
}

[data-theme="dark"] .pcard__titulo {
  color: var(--text-strong);
}

[data-theme="dark"] .pcard__texto {
  color: var(--text-muted);
}

[data-theme="dark"] .pcard__link {
  color: var(--text-strong);
  border-color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .pcard__link:hover {
  color: var(--purple-light);
  border-color: var(--purple-light);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .pcard {
    background: var(--surface);
  }

  [data-theme="auto"] .pcard__titulo {
    color: var(--text-strong);
  }

  [data-theme="auto"] .pcard__texto {
    color: var(--text-muted);
  }

  [data-theme="auto"] .pcard__link {
    color: var(--text-strong);
    border-color: rgba(255, 255, 255, 0.35);
  }

  [data-theme="auto"] .pcard__link:hover {
    color: var(--purple-light);
    border-color: var(--purple-light);
  }
}

/* Como ítem del carrusel: ancho propio, no se estira.
   scroll-snap-stop obliga a DETENERSE en cada tarjeta: sin él, un deslizamiento
   fuerte salta de la 1 a la 3 y el recorrido deja de ser secuencial. */
.carrusel .pcard {
  flex: 0 0 auto;
  width: min(340px, 84vw);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* La tarjeta-facade: miniatura + botón. El iframe real solo entra al pulsar. */
.yt {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #17161f;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.yt--short {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
}

.yt__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease), opacity 0.3s var(--ease);
}

.yt:hover .yt__thumb {
  transform: scale(1.05);
}

.yt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(23, 22, 31, 0.75));
  opacity: 0.9;
  transition: opacity 0.3s var(--ease);
}

.yt:hover::after {
  opacity: 1;
}

.yt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--purple-deep);
  color: #ffffff;
  box-shadow: 0 12px 30px -8px rgba(109, 74, 255, 0.7);
  transition: transform var(--dur) var(--ease), background 0.25s var(--ease);
}

.yt:hover .yt__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--purple);
}

.yt__play svg {
  margin-left: 3px;
}

.yt__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.yt--short .yt__label {
  font-size: 0.82rem;
}

/* El iframe reemplaza a la miniatura in situ una vez pulsado. */
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Estado sin ID: hueco marcado para que se vea que falta el video. */
.yt--vacio {
  cursor: default;
  border: 2px dashed var(--border-strong);
  background: var(--bg-alt);
}

.yt--vacio::after {
  display: none;
}

.yt--vacio .yt__play {
  background: var(--border-strong);
  box-shadow: none;
  color: var(--text-muted);
}

.yt__proximo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 2;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.yt__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  background: rgba(23, 22, 31, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.yt__badge svg {
  color: #ff4d4d;
}

/* --- Antes / Después (referencia Manychat) ------------------------------- */
/* Sección FIJADA con carril de scroll propio, como la cortina. El título
   (intro) va FUERA del bloque fijado, en flujo normal: se marcha hacia
   arriba con el scroll y deja el fijado solo con las tarjetas centradas.
   Apenas enganchan, el primer scroll ya empieza el solape, que consume casi
   todo el carril. La siguiente sección solo entra al soltarse. */
.ba-pin {
  height: 260vh;
}

.ba-pin__intro {
  padding-top: var(--section-y);
}

.ba-pin__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: 2rem;
}

.ba-pin__sticky > .shell {
  width: 100%;
}

/* CRÍTICO: la shell dentro de la capa de la cortina es ítem de una rejilla, y
   su mínimo automático (min-content) la ensanchaba hasta el ancho de las tres
   tarjetas juntas (~1060px) en pantallas medianas y móviles. El body recortaba
   el sobrante: tarjetas cortadas, carril casi sin recorrido y flechas ocultas.
   min-width:0 anula ese mínimo y la shell vuelve a caber en el visor. */
.cortina__capa > .shell {
  min-width: 0;
  width: 100%;
}

/* En móvil y con movimiento reducido no hay fijado: sección normal. */
@media (max-width: 900px) {
  .ba-pin {
    height: auto;
    padding-block: var(--section-y);
  }

  /* El padding vertical lo pone la sección; la intro no lo duplica. */
  .ba-pin__intro {
    padding-top: 0;
  }

  .ba-pin__sticky {
    position: static;
    min-height: 0;
    display: block;
    padding-block: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ba-pin {
    height: auto;
    padding-block: var(--section-y);
  }

  .ba-pin__intro {
    padding-top: 0;
  }

  .ba-pin__sticky {
    position: static;
    min-height: 0;
    display: block;
    padding-block: 0;
  }
}

/* Dos tarjetas que ARRANCAN lado a lado, ambas completas y legibles. El
   solape no es estático: al hacer scroll, main.js desliza la de "después"
   sobre la de "antes" (que se encoge y se corre a la derecha), calcado del
   comportamiento medido en la sección before/after de manychat.com. */
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.ba__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.ba__card--antes {
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.ba__card--despues {
  position: relative;
  z-index: 1;
  background: var(--grad-violet-deep);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.ba__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple-deep);
  margin-bottom: 0.9rem;
}

.ba__card--despues .ba__label {
  color: var(--neon);
}

.ba__titulo {
  font-size: var(--step-2);
  text-transform: none;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

/* Titular rodeado por el círculo de marcador. align-self:flex-start hace que
   la caja mida lo que mide el texto, para que el trazo lo abrace de cerca. */
.ba__titulo--marcado {
  position: relative;
  align-self: flex-start;
}

/* El trazo lima, desbordando el texto como un óvalo hecho a mano. El color es
   lima fijo: vive sobre la tarjeta violeta, que no cambia con el tema.
   Sin JS se ve completo; en escritorio main.js lo dibuja con el solape. */
.ba__circulo {
  position: absolute;
  top: -16px;
  left: -26px;
  width: calc(100% + 52px);

  /* El reset global limita los svg a max-width:100% y recortaba el óvalo al
     ancho del texto; aquí debe desbordarlo por ambos lados. */
  max-width: none;

  height: calc(100% + 30px);
  overflow: visible;
  pointer-events: none;
  color: var(--neon);
}

.ba__lista {
  display: grid;
  margin-bottom: 1.8rem;
}

.ba__lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* Marca al final de cada línea: aspa apagada en el antes, check lima en el
   después — el contraste de la referencia. */
.ba__lista li::after {
  content: "✕";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 0.72rem;
}

.ba__card--despues .ba__lista li {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
}

.ba__card--despues .ba__lista li::after {
  content: "✓";
  border: 0;
  background: var(--neon);
  color: #252736;
}

/* Botón a lo Manychat: píldora a todo el ancho al pie de la tarjeta. */
.ba__btn {
  display: block;
  margin-top: auto;
  text-align: center;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--text-strong);
  color: var(--bg);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.ba__btn:hover {
  background: var(--purple-deep);
  color: #ffffff;
}

.ba__btn--claro {
  background: #ffffff;
  color: #252736;
}

.ba__btn--claro:hover {
  background: var(--neon);
  color: #252736;
}

@media (max-width: 900px) {
  /* Apiladas y quietas: la animación de solape es cosa de escritorio
     (main.js no la aplica por debajo de 901px). */
  .ba {
    grid-template-columns: 1fr;
  }
}

/* --- Cita de la CEO (Nosotros) ------------------------------------------- */
/* Gran formato, centrada, con la comilla gigante en morado y la autora con su
   foto en círculo debajo. */
.cita {
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: 1.8rem;
  justify-items: center;
}

.cita__texto {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.cita__texto::before {
  content: "\201C";
  display: block;
  font-size: 4.5rem;
  line-height: 0.6;
  color: var(--purple-deep);
  margin-bottom: 1rem;
}

.cita__autor {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
}

.cita__foto {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: url("../img/equipo/ana-maria-romero.jpg") center/cover no-repeat;
  border: 2px solid var(--purple-deep);
}

.cita__quien {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.cita__quien strong {
  color: var(--text-strong);
}

/* --- Misión y visión (Nosotros) ------------------------------------------ */
/* Dos tarjetas gemelas: la misión en violeta de marca, la visión en tinta —
   la misma familia visual que las tarjetas del antes/después de la portada.
   Entre ambas, el isotipo como EJE del giro, rotando despacio. */
.mv {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.mv__eje {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.mv__eje img {
  display: block;
  animation: girar-isotipo 14s linear infinite;
}

@keyframes girar-isotipo {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv__eje img {
    animation: none;
  }
}

/* Icono de cada carta: chip translúcido sobre el fondo de color. */
.mv__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  margin-bottom: 1rem;
}

.mv__carta {
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  color: #ffffff;
}

.mv__carta--mision {
  background: var(--grad-violet-deep);
}

.mv__carta--vision {
  background: var(--grad-ink);
}

.mv__etiqueta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--neon);
  margin-bottom: 0.9rem;
}

.mv__texto {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 820px) {
  .mv {
    grid-template-columns: 1fr;
  }
}

/* --- Cinco razones (Nosotros) -------------------------------------------- */
/* Lista editorial: numeral grande en morado, titular en frase y una línea de
   apoyo, separadas por filetes finos. */
.razones {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}

.razon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 0.5rem + 2vw, 2.2rem);
  align-items: start;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border-bottom: 1px solid var(--border);
}

.razon__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
  line-height: 1;
  color: var(--purple-deep);
  min-width: 2ch;
}

.razon__titulo {
  font-size: var(--step-1);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.razon__texto {
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Preguntas frecuentes ------------------------------------------------ */
.faq {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-strong);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q svg {
  flex-shrink: 0;
  color: var(--purple-deep);
  transition: transform 0.25s var(--ease);
}

.faq__item[open] .faq__q svg {
  transform: rotate(180deg);
}

.faq__q:hover {
  color: var(--purple-deep);
}

.faq__a {
  padding-bottom: 1.3rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 62ch;
}


/* --- Flotas180: previsualización del sistema ---------------------------- */
.flotas-preview {
  align-self: center;
  min-width: 0;
}

.flotas-preview__window {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #f5f6fb;
  box-shadow: 0 24px 60px rgba(37, 39, 54, 0.15);
}

.flotas-preview__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-bottom: 1px solid #e1e3ec;
  background: #ffffff;
  color: #252736;
  font-size: 0.7rem;
}

.flotas-preview__dots {
  display: flex;
  gap: 0.32rem;
}

.flotas-preview__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d5d7e0;
}

.flotas-preview__dots i:nth-child(2) { background: #b9a9ff; }
.flotas-preview__dots i:nth-child(3) { background: #b8ff00; }

.flotas-preview__bar > strong {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.flotas-preview__online {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #6f7285;
  font-weight: 700;
}

.flotas-preview__online i,
.flotas-preview__gps i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #62c477;
  box-shadow: 0 0 0 4px rgba(98, 196, 119, 0.14);
}

.flotas-preview__app {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  min-height: 330px;
}

.flotas-preview__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 1rem 0.72rem;
  background: #252736;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.58rem;
  font-style: normal;
}

.flotas-preview__logo {
  display: grid;
  width: 28px;
  height: 28px;
  margin-bottom: 0.25rem;
  border-radius: 9px;
  background: #7858f8;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  place-items: center;
}

.flotas-preview__logo span { color: #b8ff00; }

.flotas-preview__sidebar > b {
  margin-bottom: 0.75rem;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.72rem;
}

.flotas-preview__sidebar > span:not(.flotas-preview__logo) {
  padding: 0.48rem 0.55rem;
  border-radius: 7px;
}

.flotas-preview__sidebar > .is-active {
  background: rgba(120, 88, 248, 0.25);
  color: #ffffff;
}

.flotas-preview__workspace {
  min-width: 0;
  padding: 1rem;
  color: #252736;
}

.flotas-preview__workspace > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.flotas-preview__workspace > header div {
  display: grid;
  gap: 0.15rem;
}

.flotas-preview__workspace header small {
  color: #7a7d90;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flotas-preview__workspace header strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.flotas-preview__gps {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid #dde0e9;
  border-radius: 999px;
  background: #ffffff;
  color: #55596d;
  font-size: 0.55rem;
  font-weight: 800;
}

.flotas-preview__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.flotas-preview__metrics > span {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid #e2e4ed;
  border-radius: 10px;
  background: #ffffff;
}

.flotas-preview__metrics small {
  color: #7a7d90;
  font-size: 0.52rem;
}

.flotas-preview__metrics b {
  font-family: var(--font-display);
  font-size: 1rem;
}

.flotas-preview__main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(115px, 0.75fr);
  gap: 0.65rem;
}

.flotas-preview__map {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  border: 1px solid #e2e4ed;
  border-radius: 12px;
  background:
    linear-gradient(30deg, transparent 47%, rgba(120, 88, 248, 0.1) 48%, rgba(120, 88, 248, 0.1) 50%, transparent 51%),
    linear-gradient(115deg, transparent 42%, rgba(120, 88, 248, 0.09) 43%, rgba(120, 88, 248, 0.09) 46%, transparent 47%),
    linear-gradient(#ffffff, #f1efff);
}

.flotas-preview__map::after {
  content: "";
  position: absolute;
  inset: 18% 12%;
  border: 1px solid rgba(120, 88, 248, 0.12);
  border-radius: 50%;
}

.flotas-preview__route {
  position: absolute;
  z-index: 1;
  top: 38%;
  left: 17%;
  width: 64%;
  height: 34%;
  border-top: 2px dashed #7858f8;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.flotas-preview__marker {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #7858f8;
  color: #ffffff;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 800;
  place-items: center;
  box-shadow: 0 5px 12px rgba(55, 42, 112, 0.25);
  animation: flotas-marker 2.8s ease-in-out infinite;
}

.flotas-preview__marker--one { top: 31%; left: 18%; }
.flotas-preview__marker--two { top: 48%; left: 52%; animation-delay: -0.9s; }
.flotas-preview__marker--three { top: 24%; right: 12%; animation-delay: -1.8s; }

@keyframes flotas-marker {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.flotas-preview__map-label {
  position: absolute;
  z-index: 2;
  left: 0.65rem;
  bottom: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: #252736;
  color: #ffffff;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.flotas-preview__vehicles {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.72rem;
  border: 1px solid #e2e4ed;
  border-radius: 12px;
  background: #ffffff;
}

.flotas-preview__vehicles > strong {
  font-family: var(--font-display);
  font-size: 0.65rem;
}

.flotas-preview__vehicles > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.05rem 0.4rem;
  padding-top: 0.48rem;
  border-top: 1px solid #eceef4;
}

.flotas-preview__vehicles i {
  grid-row: 1 / 3;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62c477;
}

.flotas-preview__vehicles b { font-size: 0.58rem; }
.flotas-preview__vehicles small { color: #7a7d90; font-size: 0.48rem; }

.flotas-preview__caption {
  margin: 1.1rem 0 0;
  color: var(--text-muted);
  line-height: 1.65;
}

.flotas-preview__caption strong { color: var(--text-strong); }

@media (max-width: 600px) {
  .flotas-preview__app { grid-template-columns: 1fr; }
  .flotas-preview__sidebar { display: none; }
  .flotas-preview__workspace { padding: 0.75rem; }
  .flotas-preview__main { grid-template-columns: 1fr; }
  .flotas-preview__vehicles { grid-template-columns: repeat(3, 1fr); }
  .flotas-preview__vehicles > strong { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .flotas-preview__marker { animation: none; }
}
/* --- Widget de WhatsApp -------------------------------------------------- */
/* Corrido hacia la izquierda para dejarle la esquina al botón "volver
   arriba": WhatsApp a la izquierda, flecha a la derecha. */
.wa {
  position: fixed;
  right: calc(clamp(1rem, 2vw, 1.75rem) + 44px + 0.8rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 120;
  font-family: var(--font-body);
}

/* --- Aviso de cookies ---------------------------------------------------- */
/* Informativo, no de consentimiento: el sitio no usa cookies de rastreo (ver
   politica-de-cookies.html). Lo crea main.js si no se ha cerrado antes. */
.cookies {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 130;
  max-width: min(400px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.15rem;
  display: grid;
  gap: 0.75rem;
}

.cookies__texto {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.cookies__texto a {
  color: var(--purple-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies__btn {
  justify-self: start;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.3rem;
  background: var(--purple-deep);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.cookies__btn:hover {
  background: var(--purple);
}

/* --- Botón "volver arriba" ----------------------------------------------- */
/* Ocupa la esquina, a la DERECHA del fab de WhatsApp; algo más pequeño y en
   contorno discreto para no competir con él: el fab es la acción principal.
   Solo aparece cuando se ha bajado más de una pantalla; lo crea main.js. */
.subir {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: calc(clamp(1rem, 2vw, 1.75rem) + 7px);
  z-index: 120;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);

  /* Oculto por defecto; .subir--visible lo trae. El retardo en visibility
     deja terminar el fundido de salida antes de sacarlo del árbol accesible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0s 0.3s;
}

.subir--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.subir:hover {
  border-color: var(--purple-deep);
  color: var(--purple-deep);
  transform: translateY(-2px);
}

.subir:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.wa__fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  background: var(--purple-deep);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-left: auto;
  box-shadow: 0 14px 30px -8px rgba(109, 74, 255, 0.6);
  transition: transform 0.3s var(--ease), background 0.25s var(--ease);
}

.wa__fab:hover {
  transform: scale(1.06);
  background: var(--purple);
}

.wa__fab .icon-close {
  display: none;
}

.wa[data-open="true"] .wa__fab .icon-wa {
  display: none;
}

.wa[data-open="true"] .wa__fab .icon-close {
  display: block;
}

.wa__panel {
  position: absolute;

  /* Compensa el corrimiento del widget: el panel sigue alineado al margen
     derecho del visor (por encima de la flecha, que queda más abajo). Sin
     esto, en pantallas estrechas el panel se saldría por la izquierda. */
  right: calc(-44px - 0.8rem);

  bottom: calc(100% + 0.85rem);
  width: min(340px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(23, 22, 31, 0.35);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s;
}

.wa[data-open="true"] .wa__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wa__head {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wa__head img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.wa__head-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wa__head-status {
  font-size: 0.76rem;
  color: var(--inverse-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wa__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  flex-shrink: 0;
}

.wa__body {
  padding: 1.1rem;
  max-height: min(52vh, 400px);
  overflow-y: auto;
}

.wa__bubble {
  background: var(--bg-alt);
  border-radius: 4px 14px 14px 14px;
  padding: 0.8rem 0.95rem;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 0.95rem;
}

.wa__prompt {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.wa__options {
  display: grid;
  gap: 0.4rem;
}

.wa__option {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.wa__option:hover {
  border-color: var(--purple);
  background: var(--wash);
  color: var(--purple-deep);
}

.wa__free {
  display: none;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.wa__free.is-open {
  display: grid;
}

.wa__free textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}

.wa__free textarea:focus {
  outline: none;
  border-color: var(--purple);
}

.wa__send {
  width: 100%;
  padding: 0.75rem;
  border: 0;
  border-radius: 100px;
  background: var(--purple-deep);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}

.wa__send:hover {
  background: var(--purple);
}

.wa__back {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  justify-self: start;
}

.wa__foot {
  border-top: 1px solid var(--border);
  padding: 0.7rem 1.1rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Animación de entrada ----------------------------------------------- */
/* Solo ocultamos si el JS está vivo (la clase .js la pone un script en línea).
   Sin esta condición, un fallo de JS dejaría toda la página en blanco. */
.js [data-reveal] {
  opacity: 0;
  /* Recorrido amplio: se nota al hacer scroll sin llegar a marear. */
  transform: translateY(40px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: transform, opacity;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Blog ---------------------------------------------------------------- */
/* La sección de blog existe para SEO: cada categoría apunta a una búsqueda
   real (p. ej. "desarrollo de software Ecuador"). Las tarjetas no usan
   imágenes: un visual de gradiente con el número evita inventar fotografía
   y mantiene el peso de la página bajo. */

.blog-filters {
    margin-bottom: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.blog-filters__intro {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1fr);
    gap: 1rem 3rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.blog-filters__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.blog-filters__description {
    max-width: 42rem;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.65;
}

.blog-filters__controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.blog-filter {
    display: grid;
    gap: 0.5rem;
}

.blog-filter > span {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blog-filter select,
.blog-filter input {
    width: 100%;
    min-height: 3.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.blog-filter select {
    padding: 0 2.75rem 0 1rem;
}

.blog-filter input {
    padding: 0 1rem;
}

.blog-filter__search input {
    padding-left: 3rem;
}

.blog-filter input[type="date"] {
    cursor: pointer;
}

.blog-filter input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
}

.blog-filter select:focus,
.blog-filter input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}

.blog-filter__search {
    position: relative;
}

.blog-filter__search svg {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.blog-filters__status {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.blog-filters__status p {
    margin: 0;
}

.blog-filters__status strong {
    color: var(--text);
}

.blog-filters__clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.blog-filters__clear:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.blog-empty {
    margin-top: 1.5rem;
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.blog-empty h3 {
    margin: 0 0 0.5rem;
    font-size: var(--step-1);
}

.blog-empty p {
    max-width: 34rem;
    margin: 0 auto;
    color: var(--text-muted);
}

.blog-card[hidden],
.blog-filters[hidden],
.blog-empty[hidden],
.blog-filters__clear[hidden] {
    display: none;
}

@media (max-width: 1100px) {
    .blog-filters__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .blog-filters__intro,
    .blog-filters__controls {
        grid-template-columns: 1fr;
    }

    .blog-filters__intro {
        align-items: start;
    }
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap);
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-ui) var(--ease-standard),
    box-shadow var(--dur-ui) var(--ease-standard);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Visual sin fotografía: gradiente violeta con el número de la entrada. */
.blog-card__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  overflow: hidden;
}

.blog-card__num {
  position: absolute;
  top: 4px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
}

/* Chip de categoría: la palabra clave SEO visible en cada tarjeta. */
.blog-card__cat {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  font-size: var(--step--1);
  font-weight: 600;
}

.blog-card__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
}

/* El enlace cubre toda la tarjeta sin sacrificar el orden de lectura. */
.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.blog-card__text {
  color: var(--text-muted);
  font-size: var(--step-0);
}

.blog-card__meta {
  margin-top: auto;
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* --- Artículo del blog --------------------------------------------------- */
/* Clases en vez de estilos en línea (a diferencia de las políticas) porque
   son 6+ artículos con la misma estructura: cambiarla en un solo lugar. */

.post {
  max-width: 820px;
  margin-inline: auto;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.post__cat {
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  background: var(--wash);
  color: var(--purple-deep);
  font-weight: 600;
}

[data-theme="dark"] .post__cat {
  background: rgba(154, 128, 251, 0.16);
  color: var(--purple-light);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .post__cat {
    background: rgba(154, 128, 251, 0.16);
    color: var(--purple-light);
  }
}

.post h2 {
  font-size: var(--step-1);
  text-transform: none;
  margin: 2.4rem 0 0.8rem;
}

.post p,
.post li {
  color: var(--text-muted);
}

.post p + p {
  margin-top: 1rem;
}

.post ul,
.post ol {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
}

.post li strong,
.post p strong {
  color: var(--text-strong);
}

/* Navegación al final del artículo: volver al índice o pasar a contacto. */
.post__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* --- Fichas individuales de producto ----------------------------------- */
.page-hero--product::before,
.page-hero--product::after {
  display: none;
}

.product-hero-art {
  width: min(430px, 38vw);
  height: 330px;
}

.product-hero-card {
  position: absolute;
  top: 42px;
  left: 50%;
  z-index: 2;
  display: flex;
  width: 230px;
  min-height: 230px;
  padding: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: linear-gradient(145deg, var(--purple-deep), #4f34c9);
  box-shadow: 0 32px 70px -28px rgba(74, 47, 190, 0.7);
  color: #fff;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateX(-50%) rotate(-4deg);
  animation: product-card-float 6s ease-in-out infinite;
}

.product-hero-card::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--neon);
  box-shadow: 0 0 0 8px rgba(200, 245, 49, 0.1);
}

.product-hero-card__eyebrow {
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-hero-card strong {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.product-hero-card > span:last-child {
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
}

.soluwallet-hero-logo {
  position: absolute;
  top: 100px;
  left: 50%;
  z-index: 2;
  display: block;
  width: min(380px, 88%);
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(120, 88, 248, 0.18);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 60px -28px rgba(37, 39, 54, 0.38);
  transform: translateX(-50%);
  animation: soluwallet-logo-float 6s ease-in-out infinite;
  transition: box-shadow var(--dur-ui) var(--ease-standard);
}

.soluwallet-hero-logo:hover {
  box-shadow: 0 32px 68px -24px rgba(79, 52, 201, 0.45);
}

.soluwallet-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.cta__product-logo {
  display: block;
  width: min(370px, 86%);
  height: auto;
  margin: 0 auto 1.5rem;
}
.product-hero-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.product-hero-route path {
  fill: none;
  stroke: rgba(120, 88, 248, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 5 8;
  animation: product-route 12s linear infinite;
}

.product-hero-node {
  position: absolute;
  z-index: 3;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-hero-node::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(120, 88, 248, 0.12);
}

.product-hero-node--one { top: 20px; right: 10px; }
.product-hero-node--two { top: 154px; left: 0; }
.product-hero-node--three { right: 0; bottom: 24px; }

.product-panel {
  position: relative;
  min-height: 330px;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--surface), var(--bg-alt));
  overflow: hidden;
}

.product-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 88, 248, 0.24), transparent 68%);
}

.product-panel__label {
  display: inline-flex;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(120, 88, 248, 0.1);
  color: var(--purple-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-panel h3 {
  position: relative;
  z-index: 1;
  max-width: 15ch;
  margin-top: clamp(4rem, 10vw, 7rem);
  font-size: clamp(1.65rem, 4vw, 2.7rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

@keyframes soluwallet-logo-float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
  50% { transform: translateX(-50%) translateY(-9px) rotate(0); }
}
@keyframes product-card-float {
  0%, 100% { transform: translateX(-50%) rotate(-4deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(-1deg) translateY(-10px); }
}

@keyframes product-route {
  to { stroke-dashoffset: -130; }
}

@media (max-width: 900px) {
  .product-hero-art {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero-card,
  .soluwallet-hero-logo,
  .product-hero-route path {
    animation: none;
  }
}
/* --- Compras180: monitor de oportunidades públicas --------------------- */
.compras180-hero-art {
  width: min(500px, 43vw);
  height: 340px;
}

.compras-monitor {
  position: absolute;
  top: 34px;
  left: 12px;
  width: min(410px, calc(100% - 42px));
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 62px -30px rgba(37, 39, 54, 0.38);
  overflow: hidden;
  animation: compras-monitor-float 6s ease-in-out infinite;
}

.compras-monitor__header {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.compras-monitor__header div {
  display: grid;
  gap: 0.05rem;
}

.compras-monitor__header strong,
.compras-monitor__opportunity strong,
.compras-notification strong {
  color: var(--text);
  font-family: var(--font-display);
}

.compras-monitor__header strong {
  font-size: 0.82rem;
}

.compras-monitor__header small,
.compras-monitor__opportunity small,
.compras-monitor__opportunity span,
.compras-notification small,
.compras-notification span {
  color: var(--text-muted);
  font-size: 0.62rem;
}

.compras-monitor__pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10c29c;
  box-shadow: 0 0 0 5px rgba(16, 194, 156, 0.12);
  animation: compras-pulse 2.2s ease-out infinite;
}

.compras-monitor__status {
  margin-left: auto;
  padding: 0.32rem 0.5rem;
  border-radius: 999px;
  background: rgba(16, 194, 156, 0.1);
  color: #07866d;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.compras-monitor__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0;
}

.compras-monitor__filters span {
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(120, 88, 248, 0.16);
  border-radius: 7px;
  background: rgba(120, 88, 248, 0.07);
  color: var(--purple-deep);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.compras-monitor__opportunity {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-alt);
}

.compras-monitor__opportunity div {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.compras-monitor__opportunity strong {
  max-width: 27ch;
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compras-monitor__opportunity b {
  margin-left: auto;
  color: var(--purple-deep);
  font-family: var(--font-display);
  font-size: 1.2rem;
  white-space: nowrap;
}

.compras-monitor__scan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  opacity: 0;
  animation: compras-scan 4.8s ease-in-out infinite;
}

.compras-notification {
  position: absolute;
  right: 0;
  bottom: 28px;
  z-index: 3;
  display: flex;
  width: 285px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: var(--purple-deep);
  box-shadow: 0 22px 48px -24px rgba(79, 52, 201, 0.68);
  animation: compras-notification-in 5.4s ease-in-out infinite;
}

.compras-notification div {
  display: grid;
  gap: 0.08rem;
}

.compras-notification strong,
.compras-notification small,
.compras-notification span {
  color: #fff;
}

.compras-notification small,
.compras-notification span {
  opacity: 0.7;
}

.compras-notification__icon {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--neon);
  color: #17161f;
  font-weight: 800;
  place-items: center;
}

.product-panel--compras::before {
  content: "NIC · CPC · ALERTAS";
  position: absolute;
  top: 2.2rem;
  right: 2rem;
  color: rgba(120, 88, 248, 0.24);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}


.compras-preview {
  align-self: center;
  min-width: 0;
}

@media (min-width: 1040px) {
  .split--compras-showcase {
    grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 3.5vw, 4.5rem);
  }
}

.split--compras-showcase > * {
  min-width: 0;
}

.split--compras-showcase h2 {
  max-width: 12ch;
  font-size: clamp(2.6rem, 3.9vw, 3.9rem);
}

.compras-preview__link {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: 0 24px 60px rgba(37, 39, 54, 0.14);
  transition: transform 280ms var(--ease-standard), box-shadow 280ms var(--ease-standard), border-color 280ms var(--ease-standard);
}

.compras-preview__link:hover,
.compras-preview__link:focus-within {
  transform: translateY(-6px);
  border-color: var(--purple);
  box-shadow: 0 30px 70px rgba(87, 61, 198, 0.2);
}

.compras-preview__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 46px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.compras-preview__dots {
  display: flex;
  gap: 0.35rem;
}

.compras-preview__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}

.compras-preview__dots i:nth-child(2) { background: var(--purple-light); }
.compras-preview__dots i:nth-child(3) { background: var(--neon); }

.compras-preview__address {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compras-preview__live-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.compras-preview__live-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #32b86c;
  box-shadow: 0 0 0 4px rgba(50, 184, 108, 0.14);
}

.compras-preview__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface) url("../img/productos/compras180-preview.jpg") top center / cover no-repeat;
}

.compras-preview__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.compras-preview__frame-link {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.compras-preview__action {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--neon);
  color: #252736;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.compras-preview__caption {
  margin: 1.1rem 0 0;
  color: var(--text-muted);
  line-height: 1.65;
}

.compras-preview__caption strong {
  color: var(--text-strong);
}
.product-disclaimer {
  max-width: 34rem;
  margin: 1.4rem auto 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.78rem;
}

@keyframes compras-monitor-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(0); }
}

@keyframes compras-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 194, 156, 0.35); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(16, 194, 156, 0); }
}

@keyframes compras-scan {
  0%, 15% { top: 0; opacity: 0; }
  25% { opacity: 0.75; }
  75% { opacity: 0.55; }
  90%, 100% { top: 100%; opacity: 0; }
}

@keyframes compras-notification-in {
  0%, 15%, 100% { transform: translateY(10px); opacity: 0.7; }
  28%, 82% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .compras-monitor,
  .compras-monitor__pulse,
  .compras-monitor__scan,
  .compras-notification {
    animation: none;
  }
}

/* ==========================================================================
   SoluWallet — simulador de Apple Wallet
   Recrea la pila de pases y la expansión al elegir uno: primero una tarjeta
   bancaria genérica, luego la pila de reward donde SOLU180 cierra la fila
   mostrándose completa (igual que la última tarjeta de una pila real), y al
   tocarla se abre a la vista de detalle con los 10 sellos y el QR.
   Prefijo wsim- para no mezclarse con el resto del sistema.
   ========================================================================== */
.wsim-stage{
  display:flex;
  justify-content:center;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.wsim-iphone{
  width: 100%;
  max-width: 360px;
  aspect-ratio: 402 / 874;
  background: linear-gradient(160deg, #3a3a42, #0c0c10);
  border-radius: 56px;
  padding: 13px;
  box-shadow:
    0 36px 64px rgba(23, 21, 38, 0.32),
    inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.wsim-screen{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 44px;
  background: #000000;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  color:#ffffff;
  font-family: "Manrope", sans-serif;
}

.wsim-island{
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  width:92px; height:27px;
  background:#000;
  border-radius:14px;
  z-index:6;
}

.wsim-statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 24px 4px;
  color:#ffffff;
  flex-shrink:0;
}
.wsim-statusbar .wsim-time{
  font-size:14px;
  font-weight:700;
  font-variant-numeric: tabular-nums;
}
.wsim-statusbar .wsim-glyphs{ display:flex; align-items:center; gap:5px; }

.wsim-nav{
  position:relative;
  padding: 7px 20px 9px;
  flex-shrink:0;
}
.wsim-nav-list,
.wsim-nav-detail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: opacity 220ms ease;
}
.wsim-nav-detail{
  position:absolute;
  inset: 7px 20px 9px;
  opacity:0;
  pointer-events:none;
}
.wsim-screen.is-detail .wsim-nav-list{ opacity:0; pointer-events:none; }
.wsim-screen.is-detail .wsim-nav-detail{ opacity:1; pointer-events:auto; }

.wsim-nav-list .wsim-title{
  font-family:"Poppins", sans-serif;
  font-size:25px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.wsim-icon-btn{
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  color:#ffffff;
  border:none;
  padding:0;
}
.wsim-nav-list .wsim-icon-group{ display:flex; align-items:center; gap:9px; }

.wsim-done-btn{
  background:none;
  border:none;
  color:#ffffff;
  font: inherit;
  font-size:15px;
  font-weight:600;
  padding:0;
  cursor:pointer;
}

.wsim-body{
  flex:1;
  position:relative;
  padding: 4px 20px 22px;
  overflow:hidden;
}

.wsim-list,
.wsim-detail{
  position:absolute;
  inset: 4px 20px 22px;
  transition: opacity 340ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wsim-list{ transform: scale(1) translateY(0); }
.wsim-detail{
  opacity:0;
  transform: scale(0.9) translateY(16px);
  pointer-events:none;
}
.wsim-screen.is-detail .wsim-list{
  opacity:0;
  transform: scale(0.95) translateY(-8px);
  pointer-events:none;
}
.wsim-screen.is-detail .wsim-detail{
  opacity:1;
  transform: scale(1) translateY(0);
  pointer-events:auto;
}

/* Tarjeta bancaria arriba de todo: genérica, sin recrear una marca real. */
.wsim-credit-card{
  border-radius:16px;
  padding:19px 18px;
  height:118px;
  background: linear-gradient(155deg,#4a3f6e,#241d3a);
  box-shadow: 0 12px 22px rgba(0,0,0,0.4);
  display:flex; flex-direction:column; justify-content:space-between;
  color: rgba(255,255,255,0.9);
  margin-bottom:22px;
}
.wsim-credit-card__chip{
  width:28px; height:21px;
  border-radius:5px;
  background: linear-gradient(155deg,#d8d0ae,#a89a63);
}
.wsim-credit-card__row{ display:flex; justify-content:space-between; align-items:flex-end; }
.wsim-credit-card__number{
  font-size:13px; font-weight:700; letter-spacing:0.08em;
  font-variant-numeric: tabular-nums;
}
.wsim-credit-card__label{
  font-size:9px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color: rgba(255,255,255,0.55);
}

/* Pila de reward: tarjetas genéricas, cada una montada sobre la anterior.
   La última —SOLU180— se muestra completa, cerrando la fila. */
.wsim-reward-stack{ position:relative; }

.wsim-ghost{
  border-radius:14px;
  padding:11px 15px;
  height:30px;
  margin-top:-18px;
  display:flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700;
  color: rgba(255,255,255,0.75);
  box-shadow: 0 -12px 20px rgba(0,0,0,0.4);
  position:relative;
}
.wsim-reward-stack .wsim-ghost:first-child{ margin-top:0; }
.wsim-ghost__icon{
  width:18px; height:18px;
  border-radius:5px;
  background: rgba(255,255,255,0.16);
  flex-shrink:0;
}
.wsim-ghost--a{ background: linear-gradient(135deg,#3a3f52,#22242f); }
.wsim-ghost--b{ background: linear-gradient(135deg,#4a2f3a,#241a1f); }
.wsim-ghost--c{ background: linear-gradient(135deg,#2c3a2f,#181f1a); }
.wsim-ghost--d{ background: linear-gradient(135deg,#2f2c3a,#1a181f); }

/* SOLU180: insignia + los 10 sellos, recortada justo antes de los valores
   de nombre/sellos — se completan al pasar al detalle. */
.wsim-list-mark{
  margin-top:-10px;
  border-radius:16px;
  background: linear-gradient(150deg, var(--purple), #5a3ee0);
  padding:19px 19px 14px;
  position:relative;
  z-index:1;
  box-shadow: 0 -8px 18px rgba(0,0,0,0.4);
  border:none;
  width:100%;
  cursor:pointer;
  font: inherit;
  color:#ffffff;
  text-align:left;
  overflow:hidden;
  display:block;
}
.wsim-list-mark::before{
  content:"";
  position:absolute;
  width:160px; height:160px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  top:-60px; right:-44px;
  pointer-events:none;
}
.wsim-list-mark:hover{ filter:brightness(1.04); }
.wsim-list-mark .wsim-mark{ position:relative; z-index:1; }
.wsim-list-mark .wsim-stamps{ padding-top:18px; }
.wsim-list-mark__meta{
  display:flex; justify-content:space-between;
  margin-top:14px;
  position:relative; z-index:1;
}
.wsim-list-mark__meta span{
  font-size:8px; font-weight:700; letter-spacing:0.09em;
  text-transform:uppercase; color: rgba(255,255,255,0.65);
}

.wsim-caption{
  text-align:center;
  font-size:10px;
  color: rgba(255,255,255,0.4);
  margin-top:16px;
}

/* El pase completo, en el detalle. */
.wsim-pass{
  width: 100%;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--purple), #5a3ee0);
  box-shadow: 0 22px 44px rgba(0,0,0,0.4);
  padding: 24px 22px 26px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}
.wsim-pass::before{
  content:"";
  position:absolute;
  width:200px; height:200px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.20), transparent 70%);
  top:-80px; right:-64px;
  pointer-events:none;
}

.wsim-mark{
  height:46px;
  width:max-content;
  border-radius:100px;
  background:#ffffff;
  display:inline-flex; align-items:center; gap:9px;
  padding: 0 18px 0 12px;
  position:relative; z-index:1;
  box-shadow: 0 6px 14px rgba(37,39,54,0.18);
}
.wsim-mark svg{ color: var(--purple-deep); flex-shrink:0; }
.wsim-mark span{
  font-family:"Poppins", sans-serif;
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:-0.045em;
  text-transform:uppercase;
  line-height:1;
  color: var(--purple-deep);
  white-space:nowrap;
}

.wsim-stamps{
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:9px 5px;
  padding: 22px 0 5px;
  position:relative; z-index:1;
}
.wsim-stamps--second{ padding-top:9px; }

.wsim-stamp{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.wsim-stamp__dot{
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.16);
}
.wsim-stamp__dot svg{ color:#ffffff; width:18px; height:19px; }

.wsim-stamp--collected .wsim-stamp__dot{ background:#ffffff; }
.wsim-stamp--collected .wsim-stamp__dot svg{ color: var(--purple-deep); }

.wsim-stamp--pending .wsim-stamp__dot{
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.4);
}
.wsim-stamp--pending .wsim-stamp__dot svg{ color: rgba(255,255,255,0.35); }

.wsim-stamp--reward .wsim-stamp__dot{ background: var(--neon); border-color: transparent; }
.wsim-stamp--reward .wsim-stamp__dot svg{ color: #252736; }
.wsim-stamp__tag{
  font-size:6px; font-weight:800; letter-spacing:0.08em;
  color:#ffffff; background: rgba(37,39,54,0.35);
  border-radius:100px; padding:2px 5px;
}
.wsim-stamp--reward .wsim-stamp__tag{ background: var(--neon); color:#252736; }

.wsim-meta{
  display:flex; justify-content:space-between;
  margin-top:20px; position:relative; z-index:1;
}
.wsim-meta div:last-child{ text-align:right; }
.wsim-meta .wsim-label{
  font-size:8px; font-weight:700; letter-spacing:0.09em;
  text-transform:uppercase; color: rgba(255,255,255,0.65);
  margin:0 0 3px;
}
.wsim-meta .wsim-value{
  font-family:"Poppins", sans-serif;
  font-size:17px; font-weight:700; color:#ffffff;
}

.wsim-qr{
  display:flex; flex-direction:column; align-items:center;
  margin-top:22px; position:relative; z-index:1;
}
.wsim-qr .wsim-qr-box{ background:#ffffff; border-radius:14px; padding:12px; }
.wsim-qr .wsim-caption{
  margin-top:9px; font-size:9px; font-weight:800;
  letter-spacing:0.1em; text-transform:uppercase;
  color: rgba(255,255,255,0.8);
}

.wsim-note{
  max-width: 342px;
  margin-inline:auto;
  font-size: var(--step--1);
  color: var(--text-muted);
  text-align:center;
  line-height:1.5;
}