/* ==========================================================================
   Lumivo Group — estilos del sitio
   Orden de capas: reset → base → layout → componentes → utilidades
   ========================================================================== */
@layer reset, base, layout, componentes, utilidades;

/* Fuentes alojadas en el propio sitio (subconjunto latino, incluye acentos y ñ) */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Respaldos con métricas ajustadas para evitar saltos de diseño (CLS) */
@font-face {
  font-family: "Outfit Respaldo";
  src: local("Arial");
  ascent-override: 100.18%;
  descent-override: 26.05%;
  line-gap-override: 0%;
  size-adjust: 99.82%;
}
@font-face {
  font-family: "Inter Respaldo";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* ==========================================================================
   Tokens de marca (extraídos del logo, ver PERSONALIZACION.md)
   ========================================================================== */
:root {
  --lu-primario: #4765df;
  --lu-primario-fuerte: #3550c8;
  --lu-noche: #081025;
  --lu-acento: #8fa3f5;
  --lu-fondo: #f3f7f4;
  --lu-menta: #dbe6de;
  --lu-superficie: #ffffff;
  --lu-tinta-suave: #4a5468;
  --lu-borde: #6b7689;
  --lu-error: #b42318;
  --lu-linea: #08102521;
  --lu-blanco-08: #ffffff14;
  --lu-blanco-75: #ffffffbf;
  --lu-sombra: 0 1px 2px #0810250f, 0 12px 32px -12px #08102533;
  --lu-sombra-azul: 0 18px 40px -16px #4765df8c;
  --lu-sombra-grande: 0 30px 60px -20px #08102559;
  --lu-degradado: linear-gradient(140deg, #081025 0%, #13215a 100%);

  --fuente-titulos: "Outfit", "Outfit Respaldo", system-ui, sans-serif;
  --fuente-texto: "Inter", "Inter Respaldo", system-ui, sans-serif;

  --ancho: 72rem;
  --margen: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);
  --seccion: clamp(4rem, 3rem + 4vw, 5.5rem);
  --alto-header: 4.25rem;
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --lu-primario: oklch(55.3% 0.189 269);
    --lu-primario-fuerte: oklch(48.6% 0.189 268.6);
    --lu-noche: oklch(17.9% 0.045 266.1);
    --lu-acento: oklch(73.3% 0.121 272.7);
    --lu-fondo: oklch(97.2% 0.006 153.8);
    --lu-menta: oklch(91.4% 0.016 154.5);
    --lu-tinta-suave: oklch(44.5% 0.035 264.1);
    --lu-borde: oklch(56.3% 0.032 261.4);
    --lu-linea: color-mix(in oklch, var(--lu-noche) 13%, transparent);
    --lu-sombra: 0 1px 2px color-mix(in oklch, var(--lu-noche) 6%, transparent),
      0 12px 32px -12px color-mix(in oklch, var(--lu-noche) 20%, transparent);
    --lu-sombra-azul: 0 18px 40px -16px color-mix(in oklch, var(--lu-primario) 55%, transparent);
    --lu-degradado: linear-gradient(140deg in oklch, var(--lu-noche) 0%, oklch(28% 0.1 268) 100%);
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  [hidden] { display: none !important; }
}

/* ==========================================================================
   Base
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--alto-header) + 1rem); /* el header fijo no tapa anclas ni foco */
    -webkit-text-size-adjust: 100%;
  }
  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--lu-fondo);
    color: var(--lu-noche);
    font-family: var(--fuente-texto);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  main { flex: 1; }
  main:focus { outline: none; }
  h1, h2, h3 {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    text-wrap: balance;
  }
  :focus-visible {
    outline: 3px solid var(--lu-primario);
    outline-offset: 3px;
    border-radius: 0.375rem;
  }
  .tema-oscuro :focus-visible { outline-color: var(--lu-acento); }

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

/* ==========================================================================
   Layout
   ========================================================================== */
@layer layout {
  .contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--margen);
  }
  .seccion { padding-block: var(--seccion); }
  /* Las secciones fuera de pantalla no se dibujan hasta acercarse (menos trabajo al cargar) */
  main > .seccion {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
  .seccion--menta { background: var(--lu-menta); }

  .dividido {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  @media (min-width: 48rem) {
    .dividido { grid-template-columns: 1fr 1.35fr; }
    .dividido--faq { grid-template-columns: 1fr 1.6fr; }
    .dividido--contacto { grid-template-columns: 1fr 1.1fr; align-items: start; }
    .dividido--redes { grid-template-columns: 1fr 1fr; align-items: end; }
  }
}

/* ==========================================================================
   Componentes
   ========================================================================== */
@layer componentes {
  /* Salto al contenido */
  .skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 60;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--lu-noche);
    color: #fff;
    font-weight: 600;
  }
  .skip-link:focus { top: 1rem; }

  /* Tipografía fluida */
  .titulo-hero {
    font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin-top: 1.25rem;
  }
  .titulo-hero span { color: var(--lu-primario); }
  .titulo-seccion {
    font-size: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-top: 1rem;
  }
  .texto-intro {
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.6;
    color: var(--lu-tinta-suave);
  }
  .tema-oscuro .texto-intro { color: var(--lu-blanco-75); }

  /* Etiqueta con la U del logo */
  .etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lu-primario-fuerte);
  }
  .tema-oscuro .etiqueta { color: var(--lu-acento); }
  .etiqueta::before {
    content: "";
    flex: none;
    width: 0.7rem;
    height: 0.85rem;
    border: 2.5px solid currentColor;
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  /* Elemento firma: forma de U (arriba cerrada, base redonda) */
  .forma-u { border-radius: 0.6rem 0.6rem 1.6rem 1.6rem; }
  .forma-u-grande { border-radius: 1.25rem 1.25rem 3rem 3rem; }

  .icono { width: 1.5rem; height: 1.5rem; flex: none; }
  .icono--chico { width: 1.25rem; height: 1.25rem; }
  .icono--mini { width: 1rem; height: 1rem; }

  /* Botones (objetivo táctil ≥ 44px) */
  .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    padding: 0.75rem 1.4rem;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  }
  .boton:active { transform: translateY(1px); }
  .boton--primario {
    background: var(--lu-primario);
    color: #fff;
    box-shadow: var(--lu-sombra-azul);
  }
  .boton--primario:hover { background: var(--lu-primario-fuerte); }
  .boton--contorno {
    background: transparent;
    color: var(--lu-noche);
    box-shadow: inset 0 0 0 1.5px var(--lu-linea);
  }
  .boton--contorno:hover { box-shadow: inset 0 0 0 1.5px var(--lu-noche); }
  .boton--bloque { width: 100%; white-space: normal; text-align: center; }
  .grupo-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

  .tarjeta { background: var(--lu-superficie); box-shadow: var(--lu-sombra); }
  .fondo-noche { background: var(--lu-noche); background-image: var(--lu-degradado); color: #fff; }

  /* ---------- Encabezado ---------- */
  .header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--lu-fondo) 95%, transparent);
    border-bottom: 1px solid var(--lu-linea);
  }
  .header__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--alto-header);
  }
  .marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .marca img { width: 38px; height: auto; }
  .nav { display: none; }
  .nav ul { display: flex; gap: 0.25rem; }
  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.625rem;
    border-radius: 999px;
    font-size: 0.9rem;
    white-space: nowrap;
    font-weight: 500;
    color: var(--lu-tinta-suave);
  }
  .nav a:hover { color: var(--lu-noche); }
  .header__acciones { display: flex; align-items: center; gap: 0.5rem; }
  .header__cta { padding-inline: 1rem; font-size: 0.875rem; }
  .header__cta .icono { display: none; }

  .menu-movil { position: relative; }
  .menu-movil summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
  }
  .menu-movil summary::-webkit-details-marker { display: none; }
  .menu-movil summary:hover { background: var(--lu-menta); }
  .menu-movil__panel {
    position: absolute;
    right: 0;
    top: 3.25rem;
    width: 15rem;
    padding: 0.5rem;
    border-radius: 1rem;
  }
  .menu-movil__panel a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 1rem;
    border-radius: 0.75rem;
    font-weight: 500;
  }
  .menu-movil__panel a:hover { background: var(--lu-menta); }

  @media (min-width: 40rem) {
    .marca { font-size: 1.125rem; }
    .header__cta .icono { display: block; }
  }
  @media (min-width: 64rem) {
    .nav { display: block; }
    .menu-movil { display: none; }
  }

  /* ---------- Portada ---------- */
  .hero { position: relative; overflow: hidden; }
  .hero__firma {
    position: absolute;
    right: -6rem;
    top: -2.5rem;
    width: 34rem;
    color: color-mix(in srgb, var(--lu-primario) 15%, transparent);
    pointer-events: none;
    display: none;
  }
  .hero__grid {
    position: relative;
    display: grid;
    align-items: center;
    gap: 3rem;
    padding-block: 3.5rem 5rem;
  }
  .hero__texto .texto-intro { margin-top: 1.5rem; max-width: 36rem; }
  .hero__tarjeta {
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
    padding: 1.5rem;
    box-shadow: var(--lu-sombra-grande);
  }
  .hero__logo { background: var(--lu-menta); padding: 2.25rem 1.5rem; }
  .hero__logo img { margin-inline: auto; width: 150px; }
  .hero__lista { display: grid; gap: 0.625rem; margin-top: 1.5rem; padding-bottom: 1rem; font-size: 0.875rem; }
  .hero__lista li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--lu-blanco-08);
  }
  .hero__lista .icono { color: var(--lu-acento); }
  @media (min-width: 48rem) {
    .hero__firma { display: block; }
    .hero__grid { grid-template-columns: 1.2fr 1fr; padding-top: 5rem; }
  }

  /* ---------- Problema ---------- */
  .lista-problemas { display: grid; gap: 1rem; }
  .problema {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 1rem;
  }
  .problema__icono, .servicio__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .problema__icono { width: 2.75rem; height: 2.75rem; background: var(--lu-noche); color: var(--lu-acento); }
  .problema h3 { font-size: 1.125rem; }
  .problema p { margin-top: 0.25rem; color: var(--lu-tinta-suave); }
  @media (min-width: 40rem) { .problema { padding: 1.5rem; } }

  /* ---------- Servicios ---------- */
  .servicios {
    display: grid;
    gap: 1.25rem;
    margin-top: 3rem;
  }
  .servicio {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 1.5rem;
  }
  .servicio__icono { width: 3rem; height: 3rem; background: var(--lu-menta); color: var(--lu-primario-fuerte); }
  .servicio h3 { margin-top: 1.5rem; font-size: 1.5rem; }
  .servicio__beneficio { margin-top: 0.5rem; font-size: 1.125rem; font-weight: 500; color: var(--lu-primario-fuerte); }
  .servicio__descripcion { margin-top: 0.75rem; color: var(--lu-tinta-suave); }
  .servicio__puntos { display: grid; gap: 0.625rem; margin-top: 1.5rem; font-size: 0.875rem; }
  .servicio__puntos li { display: flex; align-items: flex-start; gap: 0.5rem; }
  .servicio__puntos .icono { margin-top: 0.15rem; color: var(--lu-primario); }
  .servicio__cta { margin-top: auto; padding-top: 2.5rem; }

  .servicio--destacado .servicio__icono { background: var(--lu-primario); color: #fff; }
  .servicio--destacado .servicio__beneficio,
  .servicio--destacado .servicio__puntos .icono { color: var(--lu-acento); }
  .servicio--destacado .servicio__descripcion { color: var(--lu-blanco-75); }

  @container (min-width: 28rem) {
    .servicio__puntos { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 40rem) { .servicio { padding: 2rem; } }
  @media (min-width: 48rem) {
    .servicios { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    .servicio--destacado { grid-row: span 2; }
    /* Tarjeta horizontal que ocupa todo el ancho (videos con IA) */
    .servicio--ancho {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      gap: 1.5rem;
    }
    .servicio--ancho h3 { margin-top: 0; }
    .servicio--ancho .servicio__texto { flex: 1; }
    .servicio--ancho .servicio__cta { margin-top: 0; padding-top: 0; }
  }

  /* ---------- Videos con IA CodeArt ---------- */
  .videos__intro { margin-top: 1.25rem; max-width: 42rem; }
  .videos__cabecera { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
  .videos__nota {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-weight: 600;
    color: var(--lu-primario-fuerte);
  }

  /* Video vertical dentro de un marco de celular con la forma U de la marca */
  .video-muestra { width: 100%; max-width: 18rem; margin: 0 auto; }
  .video-muestra__marco {
    padding: 0.5rem;
    border-radius: 1.5rem 1.5rem 2.25rem 2.25rem;
    background: var(--lu-noche);
    box-shadow: var(--lu-sombra-grande), var(--lu-sombra-azul);
  }
  .video-muestra video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 1.1rem 1.1rem 1.85rem 1.85rem;
    background: var(--lu-noche);
    object-fit: cover;
  }
  .video-muestra figcaption {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--lu-tinta-suave);
  }
  @media (min-width: 48rem) {
    .videos__cabecera { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .video-muestra { margin-right: 0; }
  }
  .videos { display: grid; gap: 1.25rem; margin-top: 3rem; }
  .opcion-video {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 1.5rem;
  }
  .opcion-video__etiqueta {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lu-primario-fuerte);
  }
  .tema-oscuro .opcion-video__etiqueta { color: var(--lu-acento); }
  .opcion-video h3 { margin-top: 0.375rem; font-size: 1.6rem; }
  .opcion-video__texto { margin-top: 0.75rem; color: var(--lu-tinta-suave); }
  .tema-oscuro .opcion-video__texto { color: var(--lu-blanco-75); }
  .opcion-video .servicio__puntos { margin-bottom: 2rem; }
  .opcion-video .boton { margin-top: auto; align-self: flex-start; }
  .tema-oscuro .servicio__puntos .icono { color: var(--lu-acento); }
  .servicio__icono--marca { background: var(--lu-primario); color: #fff; }

  /* Recuadro "prompt → video" del curso */
  .prompt {
    display: grid;
    gap: 0.375rem;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 0.75rem 0.75rem 1.5rem 1.5rem;
    background: var(--lu-blanco-08);
    box-shadow: inset 0 0 0 1px var(--lu-blanco-08);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.85rem;
  }
  .prompt__etiqueta { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lu-acento); }
  .prompt__texto { color: #fff; }
  .prompt__flecha { justify-self: end; font-weight: 600; color: var(--lu-acento); }

  @media (min-width: 40rem) { .opcion-video { padding: 2.25rem; } }
  @media (min-width: 48rem) { .videos { grid-template-columns: 1fr 1fr; } }

  /* ---------- Planes de streaming ---------- */
  .streaming__intro { margin-top: 1.25rem; max-width: 40rem; }
  .apps {
    display: grid;
    gap: 1.25rem;
    margin-top: 3rem;
  }
  .app {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.5rem;
  }
  .app__logo img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
  .app__cuerpo { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
  .app h3 { font-size: 1.5rem; }
  .app__nota { margin-top: 0.375rem; color: var(--lu-tinta-suave); font-size: 0.95rem; }
  .app .boton { margin-top: auto; }

  .compatibles { margin-top: 1.25rem; }
  .compatibles__titulo {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lu-tinta-suave);
  }
  .compatibles__lista { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
  .compatibles__lista li {
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem 0.5rem 1rem 1rem; /* forma U de la marca */
    background: var(--lu-fondo);
    box-shadow: inset 0 0 0 1px var(--lu-linea);
    font-size: 0.8rem;
    font-weight: 500;
  }

  .precios {
    width: 100%;
    margin-block: 1.25rem 1.5rem;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  .precios th, .precios td { padding: 0.65rem 0.25rem; text-align: right; }
  .precios th:first-child { text-align: left; }
  .precios thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lu-tinta-suave);
  }
  .precios tbody tr { border-top: 1px solid var(--lu-linea); }
  .precios tbody th { font-weight: 500; }
  .precios tbody td:nth-child(2) { font-family: var(--fuente-titulos); font-size: 1.15rem; font-weight: 600; }
  .precios tbody td:last-child { color: var(--lu-tinta-suave); font-size: 0.9rem; }
  .precios__destacado { background: color-mix(in srgb, var(--lu-primario) 9%, transparent); }
  .insignia {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--lu-primario-fuerte);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .streaming__aviso { margin-top: 1.25rem; font-size: 0.8rem; color: var(--lu-tinta-suave); }

  .reseller {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    margin-top: 3rem;
    padding: 2rem 1.5rem 2.5rem;
  }
  .reseller__titulo { margin-top: 0.75rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.12; letter-spacing: -0.02em; }
  .reseller__texto { margin-top: 0.75rem; max-width: 38rem; color: var(--lu-blanco-75); }
  .reseller .boton { justify-self: start; }

  @media (min-width: 40rem) {
    .app__cuerpo { padding: 1.75rem; }
    .reseller { padding: 2.5rem; }
  }
  @media (min-width: 48rem) {
    .apps { grid-template-columns: 1fr 1fr; }
    .reseller { grid-template-columns: 1fr auto; padding: 2.75rem 3rem; }
  }

  /* ---------- Redes ---------- */
  .redes {
    margin-top: 3rem;
    border-block: 1px solid var(--lu-blanco-08);
  }
  .red {
    display: grid;
    gap: 1rem;
    padding-block: 1.25rem;
  }
  .red + .red { border-top: 1px solid var(--lu-blanco-08); }
  .red h3 { font-size: 1.25rem; }
  .red__servicios { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .red__servicios li {
    padding: 0.375rem 0.875rem;
    background: var(--lu-blanco-08);
    font-size: 0.875rem;
    color: #ffffffe6;
  }
  .red__cta { justify-self: start; padding-inline: 1.1rem; }
  .redes-cta { margin-top: 2.5rem; }
  @media (min-width: 40rem) {
    .red { grid-template-columns: 9rem 1fr auto; align-items: center; }
  }
  @media (min-width: 64rem) {
    .red { grid-template-columns: 12rem 1fr auto; }
  }

  /* ---------- Proceso ---------- */
  .pasos { display: grid; gap: 2rem; margin-top: 3rem; }
  .paso { position: relative; }
  .paso__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3.5rem;
    background: var(--lu-primario);
    color: #fff;
    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    font-weight: 600;
  }
  .paso h3 { margin-top: 1.25rem; font-size: 1.125rem; }
  .paso p { margin-top: 0.5rem; color: var(--lu-tinta-suave); }
  @media (min-width: 48rem) {
    .pasos { grid-template-columns: repeat(3, 1fr); }
    .paso:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 4rem;
      right: 0;
      top: 1.75rem;
      height: 1px;
      background: var(--lu-linea);
    }
  }

  /* ---------- Preguntas ---------- */
  .faqs { display: grid; gap: 0.75rem; }
  .faq { border-radius: 1rem; }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .icono { color: var(--lu-primario-fuerte); transition: transform 0.25s ease; }
  .faq[open] summary .icono { transform: rotate(45deg); }
  .faq__respuesta { padding: 0 1.25rem 1.25rem; color: var(--lu-tinta-suave); }
  .faq__lista { display: grid; gap: 0.5rem; padding-left: 1.1rem; }
  .faq__lista strong { color: var(--lu-noche); }
  @media (min-width: 40rem) {
    .faq summary { padding-inline: 1.5rem; }
    .faq__respuesta { padding-inline: 1.5rem; }
  }

  /* ---------- Contacto y formulario ---------- */
  .contacto__texto .texto-intro { margin-top: 1.25rem; }
  .contacto__dato { margin-top: 1.25rem; color: var(--lu-tinta-suave); }
  .contacto__dato a,
  .faq__respuesta a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--lu-primario-fuerte);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .contacto__formulario { padding: 1.5rem; }
  @media (min-width: 40rem) { .contacto__formulario { padding: 2rem; } }

  .formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .campo label { font-size: 0.875rem; font-weight: 600; }
  .campo label small { font-size: inherit; font-weight: 400; color: var(--lu-tinta-suave); }
  .campo input, .campo select, .campo textarea {
    width: 100%;
    min-height: 2.875rem;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--lu-borde);
    border-radius: 0.75rem;
    background: var(--lu-superficie);
    color: var(--lu-noche);
  }
  .campo textarea { resize: vertical; }
  .campo [aria-invalid="true"] { border-color: var(--lu-error); }
  .campo__error { font-size: 0.875rem; font-weight: 500; color: var(--lu-error); }
  .formulario__nota { font-size: 0.875rem; color: var(--lu-tinta-suave); }

  /* ---------- Cuenta (inicio de sesión) ---------- */
  .boton-cuenta {
    display: none; /* en celular la cuenta va dentro del menú */
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--lu-noche);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 0 0 1.5px var(--lu-linea);
    list-style: none;
  }
  .boton-cuenta:hover { box-shadow: inset 0 0 0 1.5px var(--lu-noche); }
  .boton-cuenta::-webkit-details-marker { display: none; }
  .boton-cuenta--avatar { width: 2.75rem; padding: 0; box-shadow: none; }
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem 0.6rem 1.1rem 1.1rem; /* forma U */
    background: var(--lu-primario);
    color: #fff;
    font-family: var(--fuente-titulos);
    font-weight: 600;
  }
  .menu-usuario { position: relative; }
  .menu-usuario[hidden] { display: none; }
  .menu-usuario__panel {
    position: absolute;
    right: 0;
    top: 3.25rem;
    display: grid;
    gap: 0.25rem;
    min-width: 15rem;
    padding: 1rem;
    border-radius: 1rem;
  }
  .menu-usuario__nombre { font-weight: 600; }
  .menu-usuario__correo { font-size: 0.85rem; color: var(--lu-tinta-suave); overflow-wrap: anywhere; }
  .menu-usuario__panel .cuenta__enlace { justify-self: start; margin-top: 0.5rem; }
  @media (min-width: 40rem) {
    .boton-cuenta:not([hidden]) { display: inline-flex; }
  }
  @media (max-width: 39.99rem) {
    .menu-usuario { display: none; }
  }

  .menu-movil__cuenta { border-top: 1px solid var(--lu-linea); margin-top: 0.25rem; padding-top: 0.25rem; }
  .menu-movil__cuenta button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    font-weight: 600;
    color: var(--lu-primario-fuerte);
    cursor: pointer;
  }
  .menu-movil__cuenta button:hover { background: var(--lu-menta); }
  .menu-movil__cuenta span { display: block; padding: 0.5rem 1rem 0; font-size: 0.9rem; }

  .dialogo--cuenta { width: min(27rem, 100% - 2rem); }
  .cuenta { position: relative; padding: 2rem 1.5rem 1.5rem; overflow-y: auto; }
  .cuenta__cerrar { position: absolute; top: 1rem; right: 1rem; }
  .cuenta .dialogo__titulo { padding-right: 3rem; }
  .boton-google {
    margin-top: 1.5rem;
    background: var(--lu-superficie);
    color: var(--lu-noche);
    box-shadow: inset 0 0 0 1.5px var(--lu-borde);
  }
  .boton-google:hover { background: var(--lu-fondo); }
  .cuenta__separador {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block: 1.25rem;
    font-size: 0.8rem;
    color: var(--lu-tinta-suave);
  }
  .cuenta__separador::before, .cuenta__separador::after { content: ""; flex: 1; height: 1px; background: var(--lu-linea); }
  .cuenta__pestanas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--lu-fondo);
  }
  .cuenta__pestanas button {
    min-height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--lu-tinta-suave);
    cursor: pointer;
  }
  .cuenta__pestanas [aria-pressed="true"] { background: var(--lu-superficie); color: var(--lu-noche); box-shadow: var(--lu-sombra); }
  .cuenta__formulario { gap: 1rem; }
  .cuenta__enlace {
    justify-self: center;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lu-primario-fuerte);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .cuenta__invitado {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--lu-linea);
  }
  .cuenta__invitado .cuenta__enlace { color: var(--lu-tinta-suave); }
  .cuenta [data-paso="listo"] .boton { margin-top: 1.5rem; }
  .cuenta [data-paso="listo"] .dialogo__titulo { padding-right: 3rem; }
  @media (max-width: 39.99rem) {
    .dialogo--cuenta { width: 100%; height: auto; max-height: 100dvh; margin-bottom: 0; border-radius: 1.5rem 1.5rem 0 0; }
  }

  /* ---------- Dominio incluido ---------- */
  .insignia-dominio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 1.25rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--lu-acento);
    color: var(--lu-noche);
    font-size: 0.85rem;
    font-weight: 600;
  }

  /* ---------- Cotizador web (dialog) ---------- */
  .dialogo {
    width: min(44rem, 100% - 2rem);
    max-height: min(92dvh, 56rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 1.5rem;
    background: var(--lu-superficie);
    color: var(--lu-noche);
    box-shadow: var(--lu-sombra-grande);
    overflow: hidden;
  }
  .dialogo::backdrop { background: color-mix(in srgb, var(--lu-noche) 60%, transparent); }
  .dialogo[open] { display: flex; }
  .dialogo__formulario { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
  .dialogo__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--lu-linea);
  }
  .dialogo__titulo { margin-top: 0.5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
  .dialogo__subtitulo { margin-top: 0.5rem; color: var(--lu-tinta-suave); font-size: 0.95rem; }
  .dialogo__subtitulo strong { color: var(--lu-primario-fuerte); }
  .dialogo__cerrar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--lu-fondo);
  }
  .dialogo__cerrar:hover { background: var(--lu-menta); }
  .dialogo__cerrar .icono { transform: rotate(45deg); }
  .dialogo__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dialogo__cabecera > div { min-width: 0; }
  .dialogo__pie {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lu-linea);
    background: var(--lu-superficie);
  }

  .campos-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .grupo-opciones { border: 0; padding: 0; min-width: 0; }
  .grupo-opciones legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; }
  .grupo-opciones legend small { font-weight: 400; color: var(--lu-tinta-suave); }
  .opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .opciones--columna { flex-direction: column; align-items: flex-start; }
  .opcion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.9rem;
    border: 1.5px solid var(--lu-linea);
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .opcion:has(input:checked) { border-color: var(--lu-primario); background: color-mix(in srgb, var(--lu-primario) 8%, transparent); }
  .opcion input { width: 1.1rem; height: 1.1rem; accent-color: var(--lu-primario); }
  .campo input[type="file"] { min-width: 0; max-width: 100%; padding: 0.55rem; font-size: 0.85rem; }
  .vista-logo { margin-top: 0.5rem; max-height: 80px; width: auto; object-fit: contain; border-radius: 0.5rem; background: var(--lu-fondo); padding: 0.5rem; }
  .campo__ayuda { font-size: 0.85rem; color: var(--lu-tinta-suave); }

  @media (max-width: 39.99rem) {
    .dialogo { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  }
  @media (min-width: 40rem) {
    .campos-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dialogo__cabecera, .dialogo__cuerpo { padding-inline: 2rem; }
    .dialogo__pie { padding-inline: 2rem; }
  }

  /* ---------- Pie de página ---------- */
  .footer { border-top: 1px solid var(--lu-linea); }
  .footer__grid { display: grid; gap: 2.5rem; padding-block: 3rem; }
  .footer__marca img { width: 34px; }
  .footer__descripcion { margin-top: 0.75rem; max-width: 20rem; font-size: 0.875rem; color: var(--lu-tinta-suave); }
  .footer h2 { font-family: var(--fuente-texto); font-size: 0.875rem; }
  .footer ul { margin-top: 0.5rem; font-size: 0.875rem; color: var(--lu-tinta-suave); }
  .footer li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .footer li a:hover { color: var(--lu-noche); }
  /* Redes sociales de Lumivo (pie y contacto) */
  .footer__siguenos { margin-top: 1rem; font-size: 0.875rem; font-weight: 600; }
  .footer__dudas { margin-top: 0.5rem; font-size: 0.85rem; color: var(--lu-tinta-suave); }
  .footer li a[href^="mailto:"] { overflow-wrap: anywhere; }
  .contacto__dato { line-height: 1.8; }
  .redes-sociales { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .footer .redes-sociales { margin-top: 0.5rem; }
  .redes-sociales a,
  .footer .redes-sociales a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem 0.75rem 1.25rem 1.25rem; /* forma U */
    background: var(--lu-superficie);
    box-shadow: inset 0 0 0 1px var(--lu-linea);
    color: var(--lu-noche);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .redes-sociales a:hover { background: var(--lu-primario); color: #fff; transform: translateY(-2px); }
  .redes-sociales--grande a { width: 3rem; height: 3rem; }
  .contacto__redes { margin-top: 1.5rem; }
  .contacto__redes p { margin-bottom: 0.6rem; font-weight: 600; }

  .footer__legal { border-top: 1px solid var(--lu-linea); }
  .footer__legal p { padding-block: 1.25rem; font-size: 0.75rem; color: var(--lu-tinta-suave); }
  @media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 48rem) { .footer__grid > :first-child { grid-column: 1 / -1; } }
  @media (min-width: 64rem) {
    .footer__grid { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
    .footer__grid > :first-child { grid-column: auto; }
  }

  /* ---------- Páginas de cada app de streaming ---------- */
  .app-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    padding-block: 2.5rem 4rem;
  }
  .app-hero .etiqueta { margin-top: 1rem; }
  .app-hero__titulo { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); }
  .app-hero__intro { margin-top: 1.25rem; max-width: 36rem; }
  .app-hero__datos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.5rem; font-weight: 600; font-size: 0.95rem; }
  .app-hero__datos li { display: flex; align-items: center; gap: 0.4rem; }
  .app-hero__datos .icono { color: var(--lu-primario); }
  .app-hero__logo { overflow: hidden; max-width: 26rem; width: 100%; margin-inline: auto; }
  .app-hero__logo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .app-hero__logo p { padding: 1.1rem 1.4rem 1.4rem; font-weight: 600; }
  @media (min-width: 48rem) {
    .app-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-block: 3rem 5rem; }
  }

  .planes-app { margin-top: 2.5rem; padding: 1rem 1.25rem 1.25rem; border-radius: 1.5rem; }
  .tabla-desplazable { overflow-x: auto; }
  .precios--detalle { min-width: 30rem; margin-block: 0 0.5rem; }
  .precios--detalle th, .precios--detalle td { padding-block: 0.9rem; }
  .precios--detalle tbody td:nth-child(2) { font-size: 1.35rem; }
  .precios--detalle .precios__mes { font-size: 0.9rem; color: var(--lu-tinta-suave); }
  .precios__elegir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 1rem;
    border-radius: 999px;
    background: var(--lu-primario);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
  }
  .precios__elegir:hover { background: var(--lu-primario-fuerte); }
  @media (min-width: 40rem) { .planes-app { padding: 1.5rem 2rem 1.75rem; } }
  /* En celular cada plan se apila: plan y precio arriba, por mes y USD abajo, botón a lo ancho */
  @media (max-width: 39.99rem) {
    .precios--detalle { min-width: 0; }
    .precios--detalle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .precios--detalle tbody tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "plan mxn" "mes usd" "boton boton";
      gap: 0.2rem 0.75rem;
      padding: 1rem 0.25rem;
    }
    .precios--detalle tbody tr.precios__destacado { padding-inline: 0.75rem; border-radius: 0.9rem; }
    .precios--detalle th, .precios--detalle td { padding: 0; }
    .precios--detalle tbody th { grid-area: plan; align-self: center; }
    .precios--detalle tbody td:nth-child(2) { grid-area: mxn; }
    .precios--detalle tbody td:nth-child(3) { grid-area: usd; }
    .precios--detalle tbody td:nth-child(3)::after { content: " USD"; }
    .precios--detalle .precios__mes { grid-area: mes; text-align: left; }
    .precios--detalle tbody td:last-child { grid-area: boton; padding-top: 0.6rem; }
    .precios--detalle .precios__elegir { width: 100%; }
  }

  .dispositivos__intro { margin-top: 1rem; }
  .dispositivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; }
  .dispositivos li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border-radius: 0.9rem 0.9rem 1.5rem 1.5rem;
    font-weight: 600;
  }
  .dispositivos .icono { color: var(--lu-primario); }

  .otras-apps__titulo { margin-top: 4rem; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); }
  .otras-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1.5rem; }
  .otra-app {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    border-radius: 1rem;
    transition: transform 0.2s ease;
  }
  .otra-app:hover { transform: translateY(-2px); }
  .otra-app img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.6rem; }
  .otra-app__texto { font-size: 0.9rem; color: var(--lu-tinta-suave); }
  .otra-app__texto strong { display: block; font-size: 1rem; color: var(--lu-noche); }
  .otra-app .icono { color: var(--lu-primario); }

  /* Páginas de servicio */
  .servicio-visual {
    display: grid;
    gap: 1.25rem;
    justify-items: start;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding: 1.75rem;
  }
  .servicio-visual > p { color: var(--lu-blanco-75); font-weight: 500; }
  .servicio-visual .insignia-dominio { margin-top: 0; }
  .navegador { width: 100%; overflow: hidden; border-radius: 0.9rem 0.9rem 1.5rem 1.5rem; background: var(--lu-fondo); }
  .navegador__barra { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.8rem; background: var(--lu-menta); }
  .navegador__barra span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: color-mix(in srgb, var(--lu-noche) 30%, transparent); }
  .navegador__barra em { margin-left: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--lu-superficie); color: var(--lu-tinta-suave); font-style: normal; font-size: 0.75rem; }
  .navegador__pagina { display: grid; gap: 0.6rem; padding: 1.25rem; }
  .navegador__pagina span { display: block; height: 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--lu-noche) 14%, transparent); }
  .navegador__pagina .navegador__titulo { width: 70%; height: 1.2rem; background: var(--lu-noche); }
  .navegador__pagina .navegador__linea--corta { width: 55%; }
  .navegador__pagina .navegador__boton { width: 40%; height: 1.6rem; margin-top: 0.4rem; background: var(--lu-primario); }
  .chips-redes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chips-redes li { padding: 0.6rem 1rem; background: var(--lu-blanco-08); font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.1rem; }
  .incluye { margin-top: 2.5rem; }
  .otro-servicio { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0.8rem 1rem; }
  .otro-servicio .servicio__icono { width: 2.75rem; height: 2.75rem; }
  .opcion-video .boton { margin-top: auto; }

  .app__detalles {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--lu-primario-fuerte);
  }
  .app__detalles:hover { text-decoration: underline; text-underline-offset: 3px; }
  .app__detalles--claro, .tema-oscuro .app__detalles { color: var(--lu-acento); }
  .servicio__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
  .servicio__cta .app__detalles { margin-top: 0; }
  .redes-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
  .redes-cta .app__detalles { margin-top: 0; }
  .videos__cabecera .app__detalles { margin-top: 0.75rem; }

  /* ---------- Página legal ---------- */
  .legal { max-width: 48rem; padding-block: 4rem; }
  .migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--lu-tinta-suave); }
  .migas a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 4px; }
  .migas a:hover { text-decoration: underline; }
  .legal .etiqueta { margin-top: 1.5rem; }
  .legal__cuerpo { display: grid; gap: 2rem; margin-top: 2.5rem; color: var(--lu-tinta-suave); line-height: 1.65; }
  .legal__cuerpo h2 { font-size: 1.25rem; color: var(--lu-noche); }
  .legal__cuerpo p, .legal__cuerpo ul { margin-top: 0.5rem; }
  .legal__cuerpo ul { padding-left: 1.25rem; }
  .legal__cuerpo a { font-weight: 500; color: var(--lu-primario-fuerte); text-decoration: underline; }
  .legal .boton { margin-top: 3rem; }
}

/* ==========================================================================
   Intro con logo (boot animation)
   Solo existe si <html> tiene .con-intro (lo pone el script del <head>).
   Se oculta sola al terminar (visibility: hidden), aunque main.js no cargue.
   Solo anima transform y opacity.
   ========================================================================== */
.intro { display: none; }

.con-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--lu-menta);
  overflow: hidden;
  animation: lu-intro-salida 0.5s cubic-bezier(0.7, 0, 0.3, 1) 2.05s forwards;
}
.con-intro.intro-saltar .intro { animation-duration: 0.25s; animation-delay: 0s; }

/* Línea de tiempo (estilo arranque de TV):
   0.0–0.9 s  el logo aparece poco a poco y crece, con un halo azul detrás
   0.7–1.8 s  las letras de "Lumivo Group" aparecen una por una
   2.05 s     todo se desvanece y entra la página */
.intro__contenido { position: relative; display: grid; justify-items: center; gap: 1.25rem; }
.intro__brillo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22rem;
  height: 22rem;
  margin: -14rem 0 0 -11rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lu-primario) 35%, transparent) 0%, transparent 65%);
  opacity: 0;
  animation: lu-intro-brillo 1.6s ease-out 0.15s both;
}
.intro__logo { position: relative; }
.intro__logo img {
  width: 150px;
  animation: lu-intro-logo 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.intro__marca {
  position: relative;
  display: flex;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lu-noche);
}
.intro__marca span {
  display: inline-block;
  opacity: 0;
  animation: lu-intro-letra 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.7s + var(--i, 0) * 0.08s) both;
}
.intro__marca .intro__espacio { width: 0.3em; animation: none; }

@keyframes lu-intro-logo {
  0% { opacity: 0; transform: scale(0.55); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lu-intro-brillo {
  0% { opacity: 0; transform: scale(0.4); }
  45% { opacity: 1; }
  100% { opacity: 0.55; transform: scale(1.15); }
}
@keyframes lu-intro-letra {
  from { opacity: 0; transform: translateY(0.45em) scale(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes lu-intro-salida {
  to { opacity: 0; transform: translateY(-2%) scale(1.02); visibility: hidden; }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
@layer utilidades {
  .visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .max-titulo { max-width: 42rem; }
}

/* ==========================================================================
   Mejora progresiva: animaciones solo con transform/opacity y sin movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revelar {
      animation: lu-revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
  @keyframes lu-revelar {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: none; }
  }

  .faq__respuesta, .menu-movil__panel { transition: opacity 0.25s ease, transform 0.25s ease; }
  .dialogo[open] { transition: opacity 0.25s ease, transform 0.25s ease; }
  @starting-style {
    .faq[open] .faq__respuesta,
    .menu-movil[open] .menu-movil__panel { opacity: 0; transform: translateY(-0.5rem); }
    .dialogo[open] { opacity: 0; transform: translateY(1rem) scale(0.98); }
  }
}