/* =========================================================================
   style.css — Estilos de la web de JABC Softworks
   FORMATO: Expandido absoluto (un selector / una idea por bloque)
   Tema: oscuro otoñal — naranja vivo + ámbar/dorado + quemado (ember),
   sobre un fondo oscuro cálido. Sin librerías: aurora, glassmorphism y
   animaciones en CSS puro.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Variables de diseño (tokens)
------------------------------------------------------------------------- */
:root {
    /* ===== TEMA CLARO (por defecto) ===== */

    /* Fondos cálidos claros */
    --fondo:        #fdf7f1;
    --fondo-2:      #fff0e4;
    --panel:        rgba(255, 252, 248, 0.78);
    --panel-borde:  rgba(214, 120, 50, 0.18);

    /* Texto sobre claro — oscurecidos para buen contraste (evitar tono tenue) */
    --texto:        #23180e;
    --texto-suave:  #4c3f31;
    --texto-tenue:  #6a5949;
    /* Títulos en azul marino: crean la dupla naranja + marino */
    --titulo:       #16273f;

    /* Acentos otoñales (compartidos por ambos temas).
       En claro el naranja es algo más profundo para que lea bien sobre blanco. */
    --naranja:      #e85d04;
    --ambar:        #f59e0b;
    --ember:        #e8430e;
    /* Color secundario: azul marino */
    --marino:       #1b3a5b;
    --degradado:    linear-gradient(120deg, #ffb02e 0%, #ff6a00 48%, #e8430e 100%);
    --degradado-suave: linear-gradient(120deg, rgba(255,176,46,0.18), rgba(232,67,14,0.16));

    /* Texto sobre superficies naranjas (oscuro para contraste) */
    --sobre-naranja: #1c0e03;

    /* Superficies que cambian con el tema */
    --vidrio-cabecera:    rgba(253, 247, 241, 0.82);
    --superficie-alterna: rgba(255, 238, 224, 0.55);
    --campo-fondo:        rgba(255, 255, 255, 0.75);
    --nav-movil-fondo:    rgba(253, 247, 241, 0.97);
    --rejilla-color:      rgba(214, 120, 50, 0.06);
    --aurora-opacidad:    0.09;
    --aurora-opacidad-3:  0.06;

    --sombra:       0 18px 40px -24px rgba(120, 70, 25, 0.22);
    --resplandor:   0 8px 24px -12px rgba(255, 106, 0, 0.28);
    --transicion:   0.35s cubic-bezier(0.22, 1, 0.36, 1);

    /* Forma */
    --radio:        18px;
    --radio-chico:  12px;

    /* Tipografía */
    --fuente-titulo: "Space Grotesk", system-ui, sans-serif;
    --fuente-texto:  "Inter", system-ui, sans-serif;

    /* Maquetación */
    --ancho-max:    1180px;
    --borde-suave:  1px solid var(--panel-borde);
}

/* ===== TEMA OSCURO — base AZUL MARINO (se activa con data-tema="oscuro") =====
   El naranja sigue siendo el acento; sobre el marino resalta y luce premium. */
html[data-tema="oscuro"] {
    --fondo:        #0b1526;
    --fondo-2:      #122238;
    --panel:        rgba(22, 38, 62, 0.55);
    --panel-borde:  rgba(130, 165, 225, 0.18);

    --texto:        #eaf0fb;
    --texto-suave:  #a9b6cf;
    --texto-tenue:  #6e7c99;
    --titulo:       #eaf0fb;

    --naranja:      #ff6a00;
    --marino:       #6f9bd8;

    --vidrio-cabecera:    rgba(9, 17, 32, 0.82);
    --superficie-alterna: rgba(8, 14, 26, 0.5);
    --campo-fondo:        rgba(8, 14, 26, 0.6);
    --nav-movil-fondo:    rgba(9, 17, 32, 0.96);
    --rejilla-color:      rgba(130, 165, 225, 0.06);
    --aurora-opacidad:    0.24;
    --aurora-opacidad-3:  0.16;

    --sombra:       0 20px 44px -22px rgba(0, 0, 0, 0.7);
    --resplandor:   0 8px 26px -12px rgba(255, 106, 0, 0.45);
}

/* -------------------------------------------------------------------------
   2. Reset ligero y base
------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    font-family: var(--fuente-texto);
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.4s ease, color 0.4s ease;
}

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

ul, ol {
    list-style: none;
}

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

h1, h2, h3 {
    font-family: var(--fuente-titulo);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--titulo);
}

/* -------------------------------------------------------------------------
   3. Contenedor y utilidades
------------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 0 24px;
}

.degradado {
    background: linear-gradient(120deg, #ffb02e, #ff6a00, #e8430e, #ff6a00, #ffb02e);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: brillo 7s linear infinite;
}

@keyframes brillo {
    to { background-position: 220% center; }
}

/* -------------------------------------------------------------------------
   4. Fondo: aurora sutil (estática) + rejilla
   Nota: se quitó el movimiento a propósito para un aire más profesional.
------------------------------------------------------------------------- */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: radial-gradient(1200px 800px at 70% -10%, var(--fondo-2), var(--fondo) 60%);
}

.aurora-mancha {
    position: absolute;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    filter: blur(120px);
    opacity: var(--aurora-opacidad);
    will-change: transform;
}

.aurora-1 {
    top: -10%;
    left: -5%;
    background: var(--naranja);
}

.aurora-2 {
    top: 20%;
    right: -10%;
    background: var(--ambar);
}

.aurora-3 {
    bottom: -20%;
    left: 30%;
    background: var(--ember);
    opacity: var(--aurora-opacidad-3);
}

.rejilla {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--rejilla-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--rejilla-color) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* -------------------------------------------------------------------------
   5. Encabezado / navegación
------------------------------------------------------------------------- */
.cabecera {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: var(--transicion);
}

.cabecera.encogida {
    background: var(--vidrio-cabecera);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: var(--borde-suave);
}

.cabecera-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 92px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.marca-glifo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--degradado);
    color: var(--sobre-naranja);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: var(--resplandor);
}

.marca-acento {
    color: var(--naranja);
}

/* Logo en imagen (si existe assets/logo.png). Oculto hasta que el JS
   confirma que la imagen carga; mientras tanto se ve la marca en CSS. */
.marca-logo {
    display: none;
    height: 76px;
    width: auto;
}

/* Grupo de controles a la derecha del encabezado */
.cabecera-derecha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-enlace {
    position: relative;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--texto-suave);
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transicion);
}

/* Subrayado que se desliza al pasar el cursor */
.nav-enlace::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--degradado);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-enlace:hover {
    color: var(--texto);
}

.nav-enlace:hover::after {
    transform: scaleX(1);
}

.nav-cta {
    margin-left: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--sobre-naranja);
    background: var(--degradado);
    transition: var(--transicion);
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--resplandor);
}

/* Botón hamburguesa (móvil) */
.nav-boton {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 11px;
    background: var(--panel);
    border: var(--borde-suave);
    border-radius: 11px;
    cursor: pointer;
}

.nav-boton span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--texto);
    border-radius: 2px;
    transition: var(--transicion);
}

.nav-boton.abierto span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-boton.abierto span:nth-child(2) {
    opacity: 0;
}

.nav-boton.abierto span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Botón de cambio de tema (claro / oscuro) */
.tema-boton {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: var(--panel);
    border: var(--borde-suave);
    border-radius: 11px;
    color: var(--texto);
    cursor: pointer;
    transition: var(--transicion);
}

.tema-boton:hover {
    color: var(--naranja);
    border-color: var(--naranja);
}

.tema-boton svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* En claro mostramos la luna (clic = ir a oscuro); en oscuro, el sol. */
.tema-sol {
    display: none;
}

.tema-luna {
    display: block;
}

html[data-tema="oscuro"] .tema-sol {
    display: block;
}

html[data-tema="oscuro"] .tema-luna {
    display: none;
}

/* -------------------------------------------------------------------------
   6. Botones
------------------------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border: none;
    border-radius: 12px;
    font-family: var(--fuente-texto);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion);
}

.boton-primario {
    color: var(--sobre-naranja);
    background: var(--degradado);
    box-shadow: 0 8px 20px -12px rgba(255, 106, 0, 0.5);
}

.boton-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -12px rgba(255, 106, 0, 0.6);
}

.boton-fantasma {
    color: var(--texto);
    background: rgba(255, 165, 90, 0.06);
    border: var(--borde-suave);
}

.boton-fantasma:hover {
    background: rgba(255, 165, 90, 0.14);
    transform: translateY(-3px);
}

.boton-ancho {
    width: 100%;
}

/* Variantes usadas sobre la franja naranja de cierre */
.boton-claro {
    background: #ffffff;
    color: var(--sobre-naranja);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
}

.boton-claro:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45);
}

.boton-oscuro {
    background: var(--sobre-naranja);
    color: #ffffff;
}

.boton-oscuro:hover {
    transform: translateY(-2px);
}

.boton-oscuro svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
}

/* -------------------------------------------------------------------------
   7. Hero
------------------------------------------------------------------------- */
.hero {
    padding: 150px 0 90px;
}

.hero-interior {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

/* Evita que el carrusel (diapositivas con min-width:100%) infle su columna
   y se desborde en escritorio. Deja que las columnas fr se ajusten bien. */
.hero-interior > * {
    min-width: 0;
}

/* Hero de la página de Productos (una sola columna, centrado) */
.producto-hero {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.producto-hero .hero-subtitulo {
    margin-left: auto;
    margin-right: auto;
}

.producto-hero .hero-acciones {
    justify-content: center;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--degradado-suave);
    border: var(--borde-suave);
    color: var(--texto-suave);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 26px;
}

.punto-vivo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--naranja);
    box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7);
    animation: latir 2s infinite;
}

@keyframes latir {
    0%   { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}

.hero-titulo {
    font-size: clamp(2.3rem, 5vw, 3.7rem);
    margin-bottom: 22px;
}

.hero-subtitulo {
    font-size: 1.15rem;
    color: var(--texto-suave);
    max-width: 540px;
    margin-bottom: 34px;
}

.hero-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.hero-puntos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.hero-puntos li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.check {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--naranja);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Gancho de oferta bajo los botones del hero */
.hero-oferta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    color: var(--texto-suave);
    font-size: 0.98rem;
}

.hero-oferta strong {
    color: var(--naranja);
}

/* Prueba social en el hero (nombres de clientes) */
.hero-prueba {
    margin-top: 32px;
}

.hero-prueba-etq {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--texto-tenue);
    margin-bottom: 9px;
}

.hero-prueba-nombres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-family: var(--fuente-titulo);
    font-weight: 600;
    color: var(--texto-suave);
    font-size: 0.98rem;
}

.hero-prueba-nombres .sep {
    color: var(--naranja);
}

/* Panel de resultados (mockup amigable, sin código) */
.hero-visual {
    position: relative;
}

/* Carrusel de ejemplos: el marco (vidrio) lo pone el contenedor; cada
   diapositiva es solo contenido y se desliza dentro. */
.carrusel {
    position: relative;
    overflow: hidden;
    background: var(--panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    transition: var(--transicion);
}

.hero-visual:hover .carrusel {
    transform: translateY(-4px);
    box-shadow: var(--sombra), var(--resplandor);
}

.carrusel-pista {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.diapositiva {
    min-width: 100%;
    padding: 24px 26px 36px;
}

/* Puntos de navegación */
.carrusel-puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carrusel-punto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--panel-borde);
    cursor: pointer;
    transition: var(--transicion);
}

.carrusel-punto.activo {
    width: 22px;
    background: var(--naranja);
}

.panel-cima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-titulo {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: 1.05rem;
}

.panel-vivo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.panel-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.panel-stat {
    padding: 16px 18px;
    background: rgba(255, 165, 90, 0.06);
    border: var(--borde-suave);
    border-radius: var(--radio-chico);
}

.panel-stat-etq {
    display: block;
    color: var(--texto-suave);
    font-size: 0.82rem;
    margin-bottom: 7px;
}

.panel-stat-num {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.6rem;
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.panel-grafica {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 130px;
}

.panel-barra {
    flex: 1;
    border-radius: 8px 8px 0 0;
    background: var(--degradado);
    opacity: 0.9;
    transform-origin: bottom;
    animation: crecerBarra 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.panel-barra:nth-child(1) { animation-delay: 0.05s; }
.panel-barra:nth-child(2) { animation-delay: 0.15s; }
.panel-barra:nth-child(3) { animation-delay: 0.25s; }
.panel-barra:nth-child(4) { animation-delay: 0.35s; }
.panel-barra:nth-child(5) { animation-delay: 0.45s; }
.panel-barra:nth-child(6) { animation-delay: 0.55s; }
.panel-barra:nth-child(7) { animation-delay: 0.65s; }

@keyframes crecerBarra {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* Listas dentro de las diapositivas (inventario, tienda, agenda) */
.panel-lista {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 130px;
    overflow: hidden;
}

.panel-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 13px;
    background: rgba(255, 165, 90, 0.06);
    border: var(--borde-suave);
    border-radius: var(--radio-chico);
    font-size: 0.85rem;
    line-height: 1.25;
    color: var(--texto-suave);
}

.panel-fila .val {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    color: var(--texto);
    white-space: nowrap;
}

.panel-fila .val.alerta {
    color: var(--ember);
}

.panel-fila .val.ok {
    color: #1e9e5a;
}

.insignia-flotante {
    position: absolute;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--borde-suave);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--sombra);
}

.insignia-1 {
    top: -18px;
    right: -10px;
    animation: flotarSuave 5s ease-in-out infinite;
}

.insignia-2 {
    bottom: -18px;
    left: -16px;
    animation: flotarSuave 6s ease-in-out infinite reverse;
}

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

/* -------------------------------------------------------------------------
   8. Franja de valores (fila estática, sobria)
------------------------------------------------------------------------- */
.tecnologias {
    padding: 28px 0;
    border-top: var(--borde-suave);
    border-bottom: var(--borde-suave);
    background: var(--superficie-alterna);
}

.tecnologias-titulo {
    text-align: center;
    color: var(--texto-tenue);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
}

.tecnologias-cinta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 32px;
}

.tecnologias-cinta span {
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--texto-suave);
    white-space: nowrap;
}

.tecnologias-cinta .separador {
    color: var(--naranja);
    opacity: 0.6;
}

/* -------------------------------------------------------------------------
   9. Secciones genéricas
------------------------------------------------------------------------- */
.seccion {
    padding: 100px 0;
}

.seccion-alterna {
    background: var(--superficie-alterna);
    border-top: var(--borde-suave);
    border-bottom: var(--borde-suave);
}

/* Franja destacada (spotlight), p. ej. Inteligencia artificial */
.seccion-ia {
    background: var(--degradado-suave);
    border-top: var(--borde-suave);
    border-bottom: var(--borde-suave);
}

/* Demo animada de IA: reporte + pregunta del usuario + respuesta de la IA.
   Todo en bucle (tipo GIF), hecho con CSS. */
.ia-demo {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px 24px;
    background: var(--panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.ia-demo-cima {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ia-demo-titulo {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: 0.98rem;
}

/* Números del reporte */
.ia-demo-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.ia-demo-stat {
    padding: 10px 14px;
    background: rgba(255, 165, 90, 0.06);
    border: var(--borde-suave);
    border-radius: var(--radio-chico);
}

.ia-demo-stat .et {
    display: block;
    font-size: 0.76rem;
    color: var(--texto-suave);
    margin-bottom: 4px;
}

.ia-demo-stat .num {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--texto);
}

.ia-demo-stat .num.baja {
    color: var(--ember);
}

.ia-demo-stat .num.sube {
    color: #1e9e5a;
}

/* Carrusel de demos de IA: sin marco de vidrio (cada demo es el panel) */
.carrusel--demos {
    background: transparent;
    border: none;
    box-shadow: none;
    max-width: 600px;
    margin: 0 auto;
}

.carrusel--demos .diapositiva {
    height: auto;
    padding: 10px 12px 44px;
}

/* Hero: la diapositiva de la demo es más alta (lleva chat); centramos el
   resto verticalmente y separamos el chat de la gráfica. */
#carrusel .carrusel-pista {
    align-items: center;
}

#carrusel .ia-demo-chat {
    margin-top: 14px;
}

.ia-demo-grafica {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
    margin-bottom: 18px;
}

.ia-demo-grafica span {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: var(--degradado);
    opacity: 0.9;
}

.ia-demo-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ia-msg {
    max-width: 88%;
    padding: 11px 15px;
    font-size: 0.95rem;
    line-height: 1.4;
    border-radius: 14px;
}

.ia-msg-user {
    align-self: flex-end;
    background: var(--degradado);
    color: var(--sobre-naranja);
    font-weight: 500;
    border-bottom-right-radius: 4px;
    opacity: 0;
    animation: iaMsgUser 14s ease-in-out infinite;
}

.ia-msg-ia {
    align-self: flex-start;
    position: relative;
    background: rgba(255, 165, 90, 0.12);
    border: var(--borde-suave);
    color: var(--texto);
    border-bottom-left-radius: 4px;
    opacity: 0;
    animation: iaMsgIA 14s ease-in-out infinite;
}

.ia-typing {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    animation: iaTypShow 14s ease-in-out infinite;
}

.ia-typing i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--naranja);
    animation: iaTypBounce 1s ease-in-out infinite;
}

.ia-typing i:nth-child(2) { animation-delay: 0.15s; }
.ia-typing i:nth-child(3) { animation-delay: 0.3s; }

.ia-texto {
    display: block;
    opacity: 0;
    animation: iaTxtShow 14s ease-in-out infinite;
}

@keyframes iaMsgUser {
    0%, 6%   { opacity: 0; transform: translateY(8px); }
    13%, 92% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(8px); }
}

@keyframes iaMsgIA {
    0%, 30%  { opacity: 0; transform: translateY(8px); }
    37%, 92% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(8px); }
}

@keyframes iaTypShow {
    0%, 34%  { opacity: 0; }
    38%, 54% { opacity: 1; }
    58%, 100% { opacity: 0; }
}

@keyframes iaTxtShow {
    0%, 54%  { opacity: 0; }
    60%, 92% { opacity: 1; }
    100%     { opacity: 0; }
}

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

/* Accesibilidad: sin animación, mostramos la conversación completa fija. */
@media (prefers-reduced-motion: reduce) {
    .ia-msg-user,
    .ia-msg-ia,
    .ia-texto {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .ia-msg-ia {
        position: static;
    }
    .ia-typing {
        display: none !important;
    }
}

.seccion-encabezado {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 60px;
}

.seccion-kicker {
    display: inline-block;
    color: var(--naranja);
    font-family: var(--fuente-titulo);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
}

.seccion-titulo {
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    margin-bottom: 16px;
}

.seccion-intro {
    color: var(--texto-suave);
    font-size: 1.08rem;
}

/* -------------------------------------------------------------------------
   10. Cuadrículas y tarjetas de servicio
------------------------------------------------------------------------- */
.cuadricula {
    display: grid;
    gap: 24px;
}

.cuadricula-3 {
    grid-template-columns: repeat(3, 1fr);
}

.tarjeta {
    padding: 32px;
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--borde-suave);
    border-radius: var(--radio);
    transition: var(--transicion);
    position: relative;
    overflow: hidden;
}

.tarjeta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radio);
    padding: 1px;
    background: var(--degradado);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: var(--transicion);
}

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

.tarjeta:hover::before {
    opacity: 1;
}

.tarjeta-icono {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--degradado-suave);
    border: var(--borde-suave);
    margin-bottom: 20px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}

/* Micro-interacción: el ícono salta y se inclina al pasar el cursor */
.tarjeta:hover .tarjeta-icono {
    transform: translateY(-4px) rotate(-8deg) scale(1.06);
    background: var(--degradado);
}

.tarjeta:hover .tarjeta-icono svg {
    stroke: var(--sobre-naranja);
}

.tarjeta-icono svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--naranja);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
}

.tarjeta-titulo {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.tarjeta-texto {
    color: var(--texto-suave);
    font-size: 0.98rem;
}

/* -------------------------------------------------------------------------
   11. Por qué nosotros / Experiencia (dos columnas)
------------------------------------------------------------------------- */
.porque-interior,
.experiencia-interior {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.lista-ventajas {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 30px;
}

.lista-ventajas li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.ventaja-num {
    flex-shrink: 0;
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--naranja);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--degradado-suave);
    border: var(--borde-suave);
}

.lista-ventajas h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.lista-ventajas p {
    color: var(--texto-suave);
    font-size: 0.95rem;
}

.porque-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stat {
    padding: 28px 24px;
    background: var(--panel);
    border: var(--borde-suave);
    border-radius: var(--radio);
    text-align: center;
}

.stat-num {
    display: block;
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1;
    margin-bottom: 8px;
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-etq {
    color: var(--texto-suave);
    font-size: 0.88rem;
}

/* -------------------------------------------------------------------------
   12. Experiencia: panel de habilidades con barras
------------------------------------------------------------------------- */
.experiencia-skills {
    padding: 34px;
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.skills-titulo {
    font-size: 1.2rem;
    margin-bottom: 22px;
}

.compromisos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.compromiso {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    color: var(--texto);
}

.compromiso-check {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--degradado-suave);
    border: var(--borde-suave);
}

.compromiso-check svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--naranja);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
   12b. Clientes (muro de logos)
------------------------------------------------------------------------- */
/* Renglones CENTRADOS en vez de rejilla fija: con cada cliente nuevo el
   número de logos cambia (3 → 5) y en una rejilla el último se quedaba
   solo y pegado a la izquierda. Así cabe cualquier cantidad: 5 en fila en
   escritorio, 3 + 2 en tableta y 2 + 2 + 1 en móvil, siempre centrados. */
.clientes-muro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1160px;
    margin: 0 auto;
}

.clientes-muro > .cliente {
    flex: 0 1 200px;
}

/* Tarjeta blanca en ambos temas: los logotipos de marca (con sus propios
   colores) se leen igual de bien en claro y en oscuro. */
.cliente {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 26px 22px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radio);
    box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.3);
    transition: var(--transicion);
}

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

/* Logo a todo color, encuadrado sin deformarse (alto y ancho tope). */
.cliente-logo {
    max-height: 92px;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: var(--transicion);
}

.cliente:hover .cliente-logo {
    transform: scale(1.03);
}

/* -------------------------------------------------------------------------
   13. Proceso
------------------------------------------------------------------------- */
.proceso-linea {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.paso {
    padding: 30px 26px;
    background: var(--panel);
    border: var(--borde-suave);
    border-radius: var(--radio);
    position: relative;
}

.paso-num {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--degradado);
    color: var(--sobre-naranja);
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 18px;
    box-shadow: var(--resplandor);
}

.paso h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.paso p {
    color: var(--texto-suave);
    font-size: 0.93rem;
}

/* -------------------------------------------------------------------------
   14. Contacto
------------------------------------------------------------------------- */
.contacto-interior {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 56px;
    align-items: start;
}

.contacto-texto .seccion-kicker,
.contacto-texto .seccion-titulo,
.contacto-texto .seccion-intro {
    text-align: left;
}

.contacto-directos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
}

.contacto-directo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--panel);
    border: var(--borde-suave);
    border-radius: var(--radio-chico);
    transition: var(--transicion);
}

.contacto-directo:hover {
    transform: translateX(6px);
    border-color: var(--naranja);
}

.contacto-directo svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--naranja);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.contacto-directo span {
    display: flex;
    flex-direction: column;
}

.contacto-directo small {
    color: var(--texto-tenue);
    font-size: 0.85rem;
}

.contacto-form {
    padding: 34px;
    background: var(--panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--texto-suave);
    margin-bottom: 7px;
}

.campo input,
.campo textarea {
    width: 100%;
    padding: 13px 16px;
    background: var(--campo-fondo);
    border: var(--borde-suave);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-size: 0.98rem;
    transition: var(--transicion);
    resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--texto-tenue);
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18);
}

/* Honeypot: fuera de la vista pero accesible para los bots */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contacto-aviso {
    margin-top: 16px;
    font-size: 0.92rem;
    text-align: center;
    min-height: 1.2em;
}

.contacto-aviso.exito {
    color: var(--naranja);
}

.contacto-aviso.error {
    color: #dc2626;
}

/* -------------------------------------------------------------------------
   15. Pie
------------------------------------------------------------------------- */
.pie {
    border-top: var(--borde-suave);
    padding-top: 56px;
    background: var(--superficie-alterna);
}

.pie-interior {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 40px;
}

.pie-marca {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pie-marca .marca-glifo {
    margin-bottom: 6px;
}

.pie-marca .marca-logo {
    height: 72px;
    width: auto;
    align-self: flex-start;
    margin-bottom: 4px;
}

.pie-lema {
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.pie-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.pie-nav a {
    color: var(--texto-suave);
    font-size: 0.95rem;
    transition: var(--transicion);
}

.pie-nav a:hover {
    color: var(--naranja);
}

.pie-fondo {
    padding: 22px 24px;
    border-top: var(--borde-suave);
    text-align: center;
    color: var(--texto-tenue);
    font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
   15b. Botón flotante de WhatsApp
   Círculo con el ícono; al pasar el cursor se expande y muestra el texto.
------------------------------------------------------------------------- */
.whatsapp-flotante {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    height: 58px;
    padding: 0 14px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    transition: var(--transicion);
    overflow: hidden;
    animation: pulsoWa 2.8s ease-out infinite;
}

/* Pulso de atención con box-shadow (no se recorta por overflow:hidden) */
@keyframes pulsoWa {
    0%   { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.6), 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70%  { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.6), 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.6), 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-flotante svg {
    width: 30px;
    height: 30px;
    fill: #fff;
    flex-shrink: 0;
}

.whatsapp-texto {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: 0.98rem;
    transition: var(--transicion);
}

.whatsapp-flotante:hover {
    transform: translateY(-2px) scale(1.04);
}

.whatsapp-flotante:hover .whatsapp-texto,
.whatsapp-flotante:focus-visible .whatsapp-texto {
    max-width: 150px;
    opacity: 1;
    margin-left: 10px;
}

/* -------------------------------------------------------------------------
   15c. Franja de cierre (llamado a la acción con asesoría gratis)
------------------------------------------------------------------------- */
.cta-cierre {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 60px 40px;
    border-radius: var(--radio);
    background: var(--degradado);
    color: var(--sobre-naranja);
    box-shadow: var(--sombra);
}

.cta-oferta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    color: var(--sobre-naranja);
    font-weight: 600;
    font-size: 0.88rem;
}

.cta-cierre h2 {
    color: var(--sobre-naranja);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 14px;
}

.cta-cierre p {
    color: rgba(28, 14, 3, 0.82);
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto;
}

.cta-acciones {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

.galeria-capturas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 44px;
}

.captura {
    margin: 0;
}

.captura--ancha {
    grid-column: 1 / -1;
}

.captura img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    border: 1px solid rgba(27, 58, 91, 0.10);
    box-shadow: 0 22px 55px rgba(27, 58, 91, 0.18);
}

.captura figcaption {
    margin-top: 14px;
    text-align: center;
    color: var(--texto-suave, #4c3f31);
    font-size: 0.96rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .galeria-capturas {
        grid-template-columns: 1fr;
    }
}

.cta-medida {
    display: inline-block;
    margin-top: 20px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    padding-bottom: 2px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.cta-medida:hover {
    border-bottom-color: #fff;
    transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   16. Animación de revelado al hacer scroll (varias entradas)
   Base: aparecer subiendo. Variantes por valor de data-revelar.
   El estado final siempre es opacity:1 y sin transform.
------------------------------------------------------------------------- */
[data-revelar] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Variantes (van DESPUÉS de la base para ganar por orden de aparición) */
[data-revelar="izquierda"] {
    transform: translateX(-45px);
}

[data-revelar="derecha"] {
    transform: translateX(45px);
}

[data-revelar="zoom"] {
    transform: scale(0.9);
}

[data-revelar="abajo"] {
    transform: translateY(-28px);
}

/* Estado revelado: mayor especificidad, sirve para todas las variantes */
[data-revelar].visible {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------
   17. Responsivo
------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .hero-interior,
    .porque-interior,
    .experiencia-interior,
    .contacto-interior {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        order: -1;
    }

    .cuadricula-3 {
        grid-template-columns: 1fr 1fr;
    }

    .proceso-linea {
        grid-template-columns: 1fr 1fr;
    }

    .clientes-muro {
        max-width: 680px;
    }
}

@media (max-width: 720px) {
    .nav {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 18px 24px 26px;
        background: var(--nav-movil-fondo);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: var(--borde-suave);
        transform: translateY(-130%);
        transition: var(--transicion);
        pointer-events: none;
    }

    .nav.abierto {
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-enlace,
    .nav-cta {
        text-align: center;
        margin-left: 0;
    }

    .nav-boton {
        display: flex;
    }

    .cabecera {
        background: var(--vidrio-cabecera);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: var(--borde-suave);
    }

    .cabecera-interior {
        height: 74px;
    }

    .marca-logo {
        height: 60px;
    }

    .cuadricula-3,
    .proceso-linea,
    .porque-stats {
        grid-template-columns: 1fr;
    }

    .clientes-muro > .cliente {
        flex-basis: calc(50% - 10px);
    }

    .seccion {
        padding: 70px 0;
    }

    .cta-cierre {
        padding: 44px 22px;
    }

    .hero {
        padding: 120px 0 60px;
    }

    .insignia-flotante {
        display: none;
    }

    .ventana {
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   17b. Atraer contactos (2026-11-06): demo en portada, ideas gratis (15 min),
        formulario corto con WhatsApp y páginas por giro.
------------------------------------------------------------------------- */

/* Ícono "play" dentro de un botón */
.boton-icono {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Enlace del gancho del hero (ideas gratis) */
.hero-oferta-enlace {
    color: var(--titulo);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--naranja);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.hero-oferta-enlace:hover {
    color: var(--naranja);
}

/* ---- Demo en la portada ------------------------------------------------ */
.demo-inicio {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: center;
}

.demo-inicio > * {
    min-width: 0;
}

.demo-inicio-texto .seccion-kicker,
.demo-inicio-texto .seccion-titulo,
.demo-inicio-texto .seccion-intro {
    text-align: left;
}

.demo-inicio-texto .seccion-intro {
    margin-left: 0;
    margin-bottom: 22px;
}

.demo-inicio-puntos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.demo-inicio-puntos li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto-suave);
}

.demo-inicio-texto .hero-acciones {
    margin-bottom: 26px;
}

.demo-inicio-visual {
    position: relative;
    display: block;
    border-radius: 16px;
    transition: var(--transicion);
}

.demo-inicio-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(27, 58, 91, 0.12);
    box-shadow: 0 26px 60px -20px rgba(27, 58, 91, 0.35);
}

.demo-inicio-visual:hover {
    transform: translateY(-4px);
}

.demo-inicio-sello {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(22, 39, 63, 0.88);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Accesos por giro */
.giros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.giros-etq {
    color: var(--texto-tenue);
    font-size: 0.92rem;
    margin-right: 4px;
}

.giro {
    padding: 8px 16px;
    border-radius: 999px;
    border: var(--borde-suave);
    background: var(--panel);
    color: var(--texto);
    font-size: 0.92rem;
    font-weight: 500;
    transition: var(--transicion);
}

.giro:hover {
    border-color: var(--naranja);
    color: var(--naranja);
}

.demo-inicio .giros-etq {
    flex-basis: 100%;
}

/* Segunda fila de pastillas (más demos): separada de la de giros */
.giros + .giros {
    margin-top: 14px;
}

.giros-centro {
    justify-content: center;
    margin-top: 4px;
}

/* ---- Pasos dentro de la franja naranja de ideas gratis ----------------- */
.cta-pasos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin-top: 22px;
    list-style: none;
}

.cta-pasos li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sobre-naranja);
    font-weight: 600;
    font-size: 0.95rem;
}

.cta-pasos span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

/* ---- Formulario corto -------------------------------------------------- */
.campos-pareja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.campo label small {
    color: var(--texto-tenue);
    font-weight: 400;
}

.campo select {
    width: 100%;
    padding: 13px 44px 13px 16px;
    background-color: var(--campo-fondo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e85d04' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    border: var(--borde-suave);
    border-radius: var(--radio-chico);
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-size: 0.98rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: var(--transicion);
}

.campo select:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18);
}

.campo select option {
    background: var(--fondo);
    color: var(--texto);
}

.campo-opciones {
    border: none;
    min-width: 0;
}

.campo-opciones legend {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--texto-suave);
    margin-bottom: 9px;
}

.opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opcion {
    position: relative;
    cursor: pointer;
}

/* El radio real queda invisible pero usable con teclado y lector de pantalla */
.opcion input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.opcion span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    border: var(--borde-suave);
    background: var(--campo-fondo);
    color: var(--texto-suave);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transicion);
}

.opcion:hover span {
    border-color: var(--naranja);
}

.opcion input:checked + span {
    background: var(--degradado);
    border-color: transparent;
    color: var(--sobre-naranja);
    font-weight: 600;
}

.opcion input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.35);
}

.contacto-privacidad {
    margin-top: 12px;
    text-align: center;
    color: var(--texto-tenue);
    font-size: 0.84rem;
}

/* Tras enviar: se ocultan los campos y queda el atajo a WhatsApp */
.contacto-exito {
    display: none;
    margin-top: 6px;
    text-align: center;
}

.contacto-exito p {
    color: var(--texto-suave);
    margin-bottom: 12px;
}

.contacto-form.enviado .campos-pareja,
.contacto-form.enviado .campo,
.contacto-form.enviado #contacto-enviar,
.contacto-form.enviado .contacto-privacidad {
    display: none;
}

.contacto-form.enviado .contacto-exito {
    display: block;
}

.contacto-form.enviado .contacto-aviso {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ---- Páginas por giro -------------------------------------------------- */
.giro-logos {
    margin-top: 40px;
}

.giro-logos .seccion-intro {
    margin-bottom: 26px;
}

.producto-hero .hero-oferta {
    justify-content: center;
}

@media (max-width: 980px) {
    .demo-inicio {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 560px) {
    .campos-pareja {
        grid-template-columns: 1fr;
    }

    .contacto-form {
        padding: 24px 20px;
    }

    .opcion span {
        padding: 7px 12px;
        font-size: 0.86rem;
    }

    .demo-inicio-sello {
        left: 10px;
        bottom: 10px;
        font-size: 0.75rem;
    }
}

/* -------------------------------------------------------------------------
   17c. Menú "Nuestros sistemas" (desplegable del encabezado)
   El catálogo se arma desde js/sistemas.js.
------------------------------------------------------------------------- */
.menu-sistemas {
    position: relative;
}

.menu-sistemas-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.menu-texto-corto {
    display: none;
}

.menu-chevron {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-sistemas.abierto .menu-chevron {
    transform: rotate(180deg);
}

.menu-sistemas.abierto .menu-sistemas-boton {
    color: var(--texto);
}

.menu-sistemas.abierto .menu-sistemas-boton::after {
    transform: scaleX(1);
}

.menu-sistemas-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 120;
    width: min(620px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 6px 22px;
    padding: 18px;
    /* Fondo SÓLIDO: dentro del encabezado (que ya usa desenfoque) un panel
       translúcido dejaba ver el texto de la página a través. */
    background: var(--fondo);
    border: var(--borde-suave);
    border-radius: 20px;
    box-shadow: 0 34px 70px -28px rgba(22, 39, 63, 0.38), 0 2px 6px rgba(22, 39, 63, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
}

/* Puente invisible entre el botón y el panel: el cursor no "cae" al bajar */
.menu-sistemas-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

.menu-sistemas.abierto .menu-sistemas-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.menu-columna {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.menu-columna-giros {
    padding-left: 22px;
    border-left: var(--borde-suave);
}

.menu-titulo {
    margin: 2px 0 8px 4px;
    color: var(--texto-tenue);
    font-family: var(--fuente-titulo);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.menu-sistema {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: 14px;
    transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-sistema:hover,
.menu-sistema:focus-visible,
.menu-sistema[aria-current="page"] {
    background: var(--degradado-suave);
}

.menu-sistema-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--degradado);
    box-shadow: var(--resplandor);
}

.menu-sistema-icono svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--sobre-naranja);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-sistema-textos {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.menu-sistema-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.menu-sistema strong {
    color: var(--titulo);
    font-family: var(--fuente-titulo);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.25;
}

.menu-sistema small {
    color: var(--texto-suave);
    font-size: 0.85rem;
    line-height: 1.45;
}

.menu-pastilla {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(232, 93, 4, 0.12);
    color: var(--naranja);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.menu-giro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--texto);
    font-size: 0.93rem;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-giro::after {
    content: "→";
    color: var(--naranja);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-giro:hover,
.menu-giro:focus-visible,
.menu-giro[aria-current="page"] {
    background: var(--degradado-suave);
    color: var(--titulo);
}

.menu-giro:hover::after,
.menu-giro:focus-visible::after {
    opacity: 1;
    transform: none;
}

.menu-pie {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--superficie-alterna);
    border: var(--borde-suave);
    color: var(--titulo);
    font-size: 0.92rem;
    font-weight: 600;
    transition: border-color 0.25s ease;
}

.menu-flecha {
    color: var(--naranja);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-pie:hover {
    border-color: var(--naranja);
}

.menu-pie:hover .menu-flecha {
    transform: translateX(4px);
}

/* Al abrir, los enlaces entran en cascada */
.menu-sistemas.abierto .menu-sistema,
.menu-sistemas.abierto .menu-giro,
.menu-sistemas.abierto .menu-pie {
    animation: menuEntra 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.menu-sistemas.abierto .menu-giro:nth-of-type(1) {
    animation-delay: 0.04s;
}

.menu-sistemas.abierto .menu-giro:nth-of-type(2) {
    animation-delay: 0.08s;
}

.menu-sistemas.abierto .menu-giro:nth-of-type(3) {
    animation-delay: 0.12s;
}

.menu-sistemas.abierto .menu-pie {
    animation-delay: 0.14s;
}

@keyframes menuEntra {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   19. Capa moderna de movimiento (js/movimiento.js + CSS)
   Solo transform / opacity / filter. Todo se apaga con menos movimiento.
------------------------------------------------------------------------- */

/* Selección de texto y foco con teclado, con la marca */
::selection {
    background: rgba(255, 106, 0, 0.24);
}

:focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: 3px;
}

/* Encabezado que se esconde al bajar y vuelve al subir */
.cabecera {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.cabecera.cabecera-oculta {
    transform: translateY(-100%);
}

/* Barra de avance de lectura */
.barra-avance {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 130;
    height: 3px;
    background: var(--degradado);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* Título del hero palabra por palabra */
.titulo-en-palabras .palabra {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    filter: blur(8px);
    animation: palabraEntra 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i) * 70ms + 120ms);
}

@keyframes palabraEntra {
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* Encabezados de sección: entran desenfocados y se aclaran */
.seccion-encabezado[data-revelar] {
    filter: blur(6px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}

.seccion-encabezado[data-revelar].visible {
    filter: none;
}

/* Línea que se dibuja junto a la etiqueta de cada sección */
.seccion-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.seccion-kicker::before {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--degradado);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.visible .seccion-kicker::before {
    width: 24px;
}

/* Brillo que sigue al cursor (posición en --mx / --my desde el JS) */
.tarjeta,
.stat,
.menu-sistema {
    position: relative;
    isolation: isolate;
}

.tarjeta::after,
.stat::after,
.menu-sistema::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 140, 40, 0.16), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.tarjeta:hover::after,
.stat:hover::after,
.menu-sistema:hover::after {
    opacity: 1;
}

/* Destello que cruza el botón principal al pasar el cursor */
.boton-primario {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.boton-primario::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.boton-primario:hover::after {
    transform: translateX(120%);
}

/* Botones magnéticos (el JS escribe --magneto-x / --magneto-y) */
.boton-primario.magnetico,
.nav-cta.magnetico,
.boton-claro.magnetico {
    transform: translate(var(--magneto-x, 0px), var(--magneto-y, 0px));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

/* Botones: se hunden un poco al presionar (respuesta táctil) */
.boton:active,
.nav-cta:active,
.giro:active,
.opcion:active span {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Imágenes que aparecen con fundido al cargar */
.captura img,
.demo-inicio-visual img {
    transition: opacity 0.7s ease;
}

.img-cargando {
    opacity: 0;
}

/* Efectos ligados al scroll y transiciones entre páginas: solo si el
   navegador los soporta y la persona no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: scroll()) {
        .barra-avance {
            animation: barraAvanza linear both;
            animation-timeline: scroll(root);
        }

        /* Las capturas flotan un poco más lento que el resto (profundidad) */
        .captura img,
        .demo-inicio-visual img {
            animation: deriva linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }
    }

    @keyframes barraAvanza {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }

    @keyframes deriva {
        from {
            transform: translateY(26px);
        }
        to {
            transform: translateY(-26px);
        }
    }

    /* Transición suave al pasar de una página a otra (Chrome/Edge/Safari
       recientes; en los demás simplemente cambia de página como siempre). */
    @view-transition {
        navigation: auto;
    }

    .cabecera {
        view-transition-name: cabecera;
    }

    ::view-transition-old(root) {
        animation: paginaSale 0.22s ease both;
    }

    ::view-transition-new(root) {
        animation: paginaEntra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes paginaSale {
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }

    @keyframes paginaEntra {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
    }
}

@media (max-width: 980px) {
    .menu-sistemas-panel {
        left: auto;
        right: -120px;
        transform: translateY(-8px) scale(0.98);
        transform-origin: top right;
    }

    .menu-sistemas.abierto .menu-sistemas-panel {
        transform: none;
    }
}

@media (max-width: 720px) {
    .nav-inicio {
        display: none;
    }

    .menu-texto-largo {
        display: none;
    }

    .menu-texto-corto {
        display: inline;
    }

    .menu-sistemas-panel {
        position: fixed;
        top: 80px;
        left: 12px;
        right: 12px;
        width: auto;
        grid-template-columns: 1fr;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        transform-origin: top center;
    }

    .menu-columna-giros {
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: var(--borde-suave);
    }
}

/* -------------------------------------------------------------------------
   20. Asistente (chatbot) en el botón flotante — js/chat.js
------------------------------------------------------------------------- */

/* Lanzador: el antiguo botón de WhatsApp, ahora naranja con insignia */
.whatsapp-flotante.chat-lanzador {
    overflow: visible;
    gap: 0;
    padding: 0 15px;
    background: var(--degradado);
    color: var(--sobre-naranja);
    box-shadow: 0 14px 30px -12px rgba(232, 67, 14, 0.55);
    animation: pulsoChat 3.2s ease-out infinite;
}

.chat-lanzador svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.chat-lanzador .chat-lanzador-cerrar {
    position: absolute;
    left: 15px;
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.chat-lanzador.chat-con-panel .chat-lanzador-icono {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

.chat-lanzador.chat-con-panel .chat-lanzador-cerrar {
    opacity: 1;
    transform: none;
}

.chat-lanzador.chat-con-panel .whatsapp-texto {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
}

.chat-lanzador.chat-con-panel {
    animation: none;
}

@keyframes pulsoChat {
    0% {
        box-shadow: 0 14px 30px -12px rgba(232, 67, 14, 0.55), 0 0 0 0 rgba(255, 106, 0, 0.35);
    }
    70% {
        box-shadow: 0 14px 30px -12px rgba(232, 67, 14, 0.55), 0 0 0 16px rgba(255, 106, 0, 0);
    }
    100% {
        box-shadow: 0 14px 30px -12px rgba(232, 67, 14, 0.55), 0 0 0 0 rgba(255, 106, 0, 0);
    }
}

/* Notificación: punto con "1" sobre el botón (aparece con el aviso) */
.chat-notificacion {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e11d48;
    border: 2px solid var(--fondo);
    color: #ffffff;
    font-family: var(--fuente-texto);
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-lanzador.con-notificacion .chat-notificacion {
    opacity: 1;
    transform: none;
}

/* Con aviso pendiente, el botón "saluda" moviéndose un poco cada tanto */
.chat-lanzador.con-notificacion .chat-lanzador-icono {
    animation: asistenteSaluda 2.6s ease-in-out infinite;
}

@keyframes asistenteSaluda {
    0%,
    70%,
    100% {
        transform: none;
    }
    76% {
        transform: rotate(-12deg);
    }
    84% {
        transform: rotate(10deg);
    }
    92% {
        transform: rotate(-6deg);
    }
}

/* Globo del asistente que invita a platicar */
.chat-globo {
    position: fixed;
    right: 22px;
    bottom: 94px;
    z-index: 205;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(300px, calc(100vw - 44px));
    padding: 12px 8px 12px 12px;
    border-radius: 18px 18px 4px 18px;
    background: var(--fondo);
    border: var(--borde-suave);
    box-shadow: 0 22px 46px -18px rgba(22, 39, 63, 0.45);
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    transform-origin: bottom right;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-globo.visible {
    opacity: 1;
    transform: none;
}

.chat-globo-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--degradado);
    color: var(--sobre-naranja);
}

.chat-globo-avatar svg,
.chat-avatar svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-globo-contenido {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--fuente-texto);
}

.chat-globo-contenido strong {
    color: var(--titulo);
    font-family: var(--fuente-titulo);
    font-size: 0.9rem;
}

.chat-globo-linea {
    min-height: 1.4em;
    color: var(--texto);
    font-size: 0.9rem;
    line-height: 1.4;
    animation: mensajeEntra 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat-globo-puntos {
    display: inline-flex;
    gap: 4px;
    padding-top: 6px;
}

.chat-globo-puntos span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--texto-tenue);
    animation: puntoChat 1.1s ease-in-out infinite;
}

.chat-globo-puntos span:nth-child(2) {
    animation-delay: 0.15s;
}

.chat-globo-puntos span:nth-child(3) {
    animation-delay: 0.3s;
}

.chat-globo-cerrar,
.chat-icono-boton {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-tenue);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chat-globo-cerrar:hover,
.chat-icono-boton:hover {
    background: var(--degradado-suave);
    color: var(--texto);
}

.chat-globo-cerrar svg,
.chat-icono-boton svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Panel de la plática */
.chat-panel {
    position: fixed;
    right: 22px;
    bottom: 94px;
    z-index: 210;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 32px));
    height: min(610px, calc(100vh - 130px));
    background: var(--fondo);
    border: var(--borde-suave);
    border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(22, 39, 63, 0.45), 0 2px 8px rgba(22, 39, 63, 0.08);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-panel.abierto {
    opacity: 1;
    transform: none;
}

.chat-cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    background: var(--degradado);
    color: var(--sobre-naranja);
}

.chat-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 0.9rem;
}

.chat-titulos {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.chat-titulos strong {
    font-family: var(--fuente-titulo);
    font-size: 1.02rem;
}

.chat-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    opacity: 0.85;
}

.chat-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1f9d55;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.chat-cabeza .chat-icono-boton {
    color: var(--sobre-naranja);
}

.chat-cabeza .chat-icono-boton:hover {
    background: rgba(255, 255, 255, 0.35);
    color: var(--sobre-naranja);
}

.chat-cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px 10px;
    overscroll-behavior: contain;
}

.chat-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-mensaje {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.94rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
    animation: mensajeEntra 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat-mensaje.sin-animar {
    animation: none;
}

.chat-bot {
    align-self: flex-start;
    background: var(--superficie-alterna);
    border: var(--borde-suave);
    border-bottom-left-radius: 4px;
    color: var(--texto);
}

.chat-yo {
    align-self: flex-end;
    background: var(--degradado);
    border-bottom-right-radius: 4px;
    color: var(--sobre-naranja);
    font-weight: 500;
}

.chat-aviso {
    align-self: stretch;
    max-width: none;
    background: var(--degradado-suave);
    border: 1px dashed var(--naranja);
    color: var(--texto);
}

@keyframes mensajeEntra {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

/* Puntitos de "escribiendo…" */
.chat-escribiendo {
    display: inline-flex;
    gap: 5px;
    padding: 14px 16px;
}

.chat-escribiendo span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--texto-tenue);
    animation: puntoChat 1.1s ease-in-out infinite;
}

.chat-escribiendo span:nth-child(2) {
    animation-delay: 0.15s;
}

.chat-escribiendo span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes puntoChat {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Respuestas rápidas */
.chat-opciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.chat-opcion {
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--naranja);
    background: transparent;
    color: var(--naranja);
    font-family: var(--fuente-texto);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    animation: mensajeEntra 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 120ms);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chat-opcion:hover {
    background: var(--naranja);
    color: #ffffff;
}

/* Tarjeta de resumen final */
.chat-resumen {
    margin-top: 14px;
    padding: 16px;
    border-radius: 16px;
    background: var(--panel);
    border: 1.5px solid var(--naranja);
    box-shadow: var(--resplandor);
    animation: mensajeEntra 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat-resumen-titulo {
    margin-bottom: 10px;
    color: var(--titulo);
    font-family: var(--fuente-titulo);
    font-weight: 700;
}

.chat-resumen-lista {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    font-size: 0.86rem;
}

.chat-resumen-lista dt {
    color: var(--texto-tenue);
}

.chat-resumen-lista dd {
    color: var(--texto);
    font-weight: 500;
}

.chat-resumen-enfoque {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--degradado-suave);
    color: var(--titulo);
    font-size: 0.88rem;
    font-weight: 600;
}

.chat-resumen-enfoque span {
    display: block;
    margin-bottom: 2px;
    color: var(--naranja);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.chat-mandar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #25d366;
    color: #06381a;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.chat-mandar:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(37, 211, 102, 0.7);
}

.chat-mandar svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.chat-mandar-chico {
    margin-top: 0;
    padding: 9px 14px;
    font-size: 0.9rem;
}

.chat-resumen-nota {
    margin-top: 8px;
    color: var(--texto-tenue);
    font-size: 0.78rem;
    text-align: center;
}

/* Escribir */
.chat-escribir {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 6px;
    border-top: var(--borde-suave);
}

.chat-entrada {
    flex: 1;
    min-height: 44px;
    max-height: 110px;
    padding: 11px 14px;
    border: var(--borde-suave);
    border-radius: 14px;
    background: var(--campo-fondo);
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-size: 0.95rem;
    line-height: 1.4;
    resize: none;
}

.chat-entrada:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18);
}

.chat-enviar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--degradado);
    color: var(--sobre-naranja);
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.chat-enviar:hover {
    transform: translateY(-2px);
}

.chat-enviar:disabled {
    opacity: 0.5;
    cursor: wait;
    transform: none;
}

.chat-enviar svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-directo {
    display: block;
    padding: 4px 12px 12px;
    color: var(--texto-tenue);
    font-size: 0.8rem;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chat-directo:hover {
    color: #128c4b;
}

/* Celular: la plática ocupa toda la pantalla */
@media (max-width: 560px) {
    .chat-panel {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        transform: translateY(24px);
        transform-origin: bottom center;
    }

    html.chat-abierto .chat-lanzador {
        opacity: 0;
        pointer-events: none;
    }

    html.chat-abierto body {
        overflow: hidden;
    }

    .chat-globo {
        right: 16px;
        bottom: 90px;
    }

    .chat-entrada {
        font-size: 16px;
    }
}

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

    [data-revelar] {
        opacity: 1;
        transform: none;
    }
}