/* ==========================================================================
   TMC Ingenieros · Sitio corporativo
   Hoja única del sitio público. El panel usa admin.css.

   Sistema visual (estilo Microsoft / Fluent)
   - Tipografía del sistema: Segoe UI en Windows, San Francisco en Apple,
     Roboto en Android. Sin descargas: carga instantánea y nítida.
   - Neutros limpios, azul de acción y bloques azul profundo. Todos los
     colores vienen de /tema.css (variables --c-*), editables en el panel.
   - Botones de esquinas de 4 px, tarjetas con elevación y enlaces «›».
   - Movimiento: portada animada (destellos, texto escalonado, carrusel) y
     aparición suave al desplazarse. Todo se apaga con «reducir movimiento».
   ========================================================================== */

:root {
    --fondo: var(--c-fondo);
    --superficie: var(--c-superficie);
    --texto: var(--c-texto);
    --texto-2: var(--c-texto-2);
    --borde: var(--c-borde);
    --exito: var(--c-exito);
    --advertencia: var(--c-advertencia);
    --error: var(--c-error);

    --f-texto: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
    --f-titulo: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;

    --radio-boton: 4px;
    --radio: 8px;
    --radio-grande: 14px;
    --sombra: var(--c-sombra);
    --sombra-alta: var(--c-sombra-alta);
    --curva: cubic-bezier(.16, 1, .3, 1);

    --bs-body-font-family: var(--f-texto);
    --bs-focus-ring-color: color-mix(in srgb, var(--c-acento) 35%, transparent);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
    font-family: var(--f-texto);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--texto);
    background: var(--superficie);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--f-titulo);
    font-weight: 600;
    color: var(--c-titulos);
    letter-spacing: -.015em;
    line-height: 1.15;
}

h1, .h1 { font-size: clamp(2.2rem, 3.4vw + 1rem, 3.5rem); letter-spacing: -.025em; line-height: 1.08; }
h2, .h2 { font-size: clamp(1.7rem, 1.8vw + 1rem, 2.5rem); letter-spacing: -.02em; }
h3, .h3 { font-size: 1.3rem; }

a { color: var(--c-acento-texto); text-underline-offset: .2em; }
a:hover { color: var(--c-acento-texto); }

::selection { background: color-mix(in srgb, var(--c-acento) 28%, transparent); }

:focus-visible {
    outline: 2px solid var(--c-texto);
    outline-offset: 2px;
    border-radius: 2px;
    box-shadow: 0 0 0 4px var(--c-superficie);
}

.saltar {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: .6rem 1rem;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    border-radius: var(--radio-boton);
}

.saltar:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
    font-family: var(--f-texto);
    font-weight: 600;
    font-size: .95rem;
    border-radius: var(--radio-boton);
    padding: .6rem 1.25rem;
    border-width: 1px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .25s var(--curva);
}

.btn-lg { padding: .8rem 1.6rem; font-size: 1rem; }

.btn:active { transform: scale(.98); }

.btn-tmc {
    --bs-btn-color: var(--c-sobre-acento);
    --bs-btn-bg: var(--c-acento);
    --bs-btn-border-color: var(--c-acento);
    --bs-btn-hover-color: var(--c-sobre-acento);
    --bs-btn-hover-bg: var(--c-acento-hover);
    --bs-btn-hover-border-color: var(--c-acento-hover);
    --bs-btn-active-bg: var(--c-acento-activo);
    --bs-btn-active-border-color: var(--c-acento-activo);
    --bs-btn-active-color: var(--c-sobre-acento);
    --bs-btn-disabled-bg: var(--c-acento);
    --bs-btn-disabled-border-color: var(--c-acento);
    --bs-btn-disabled-color: var(--c-sobre-acento);
}

.btn-tmc:hover { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c-acento) 70%, transparent); }

.btn-tmc-contorno {
    --bs-btn-color: var(--c-titulos);
    --bs-btn-bg: color-mix(in srgb, var(--c-superficie) 85%, transparent);
    --bs-btn-border-color: var(--c-borde-input);
    --bs-btn-hover-color: var(--c-titulos);
    --bs-btn-hover-bg: var(--c-fondo);
    --bs-btn-hover-border-color: var(--c-titulos);
    --bs-btn-active-bg: var(--c-fondo);
    --bs-btn-active-color: var(--c-titulos);
    --bs-btn-active-border-color: var(--c-titulos);
}

.btn-tmc-contorno-claro {
    --bs-btn-color: var(--c-sobre-marca);
    --bs-btn-border-color: color-mix(in srgb, var(--c-sobre-marca) 55%, transparent);
    --bs-btn-hover-color: var(--c-marca);
    --bs-btn-hover-bg: var(--c-sobre-marca);
    --bs-btn-hover-border-color: var(--c-sobre-marca);
    --bs-btn-active-bg: color-mix(in srgb, var(--c-sobre-marca) 85%, var(--c-marca));
    --bs-btn-active-color: var(--c-marca);
}

.btn-tmc-claro {
    --bs-btn-color: var(--c-marca);
    --bs-btn-bg: var(--c-sobre-marca);
    --bs-btn-border-color: var(--c-sobre-marca);
    --bs-btn-hover-bg: color-mix(in srgb, var(--c-sobre-marca) 88%, var(--c-marca));
    --bs-btn-hover-color: var(--c-marca);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--c-sobre-marca) 88%, var(--c-marca));
    --bs-btn-active-bg: color-mix(in srgb, var(--c-sobre-marca) 80%, var(--c-marca));
    --bs-btn-active-color: var(--c-marca);
}

.enlace-boton {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

/* Enlace de acción al estilo «Más información ›» */
.enlace-flecha {
    display: inline;
    font-weight: 600;
    color: var(--c-acento-texto);
    text-decoration: none;
}

.enlace-flecha::after {
    content: "\f054";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .7em;
    display: inline-block;
    margin-left: .45em;
    vertical-align: .08em;
    transition: transform .25s var(--curva);
}

.enlace-flecha:hover { text-decoration: underline; color: var(--c-acento-texto); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--c-superficie);
    border-bottom: 1px solid color-mix(in srgb, var(--c-borde) 80%, transparent);
    transition: box-shadow .3s ease, background-color .3s ease;
}

/* El cristal esmerilado solo se activa al bajar, cuando hay contenido detrás.
   Arriba no hace falta y ahorra trabajo mientras la portada se anima. */
.cabecera.con-sombra {
    background: color-mix(in srgb, var(--c-superficie) 86%, transparent);
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    box-shadow: 0 2px 14px -6px rgba(0, 0, 0, .18);
}

/* Con el menú móvil abierto, la cabecera es opaca. */
.cabecera:has(.navbar-collapse.show, .navbar-collapse.collapsing) { background: var(--c-superficie); }

.cabecera .navbar { padding: .35rem 0; min-height: 64px; }

.marca { padding: 0; margin-right: 1.5rem; }

/* Logo grande arriba; al bajar se reduce para dejar espacio al contenido. */
.marca img {
    height: 108px;
    width: auto;
    display: block;
    transition: height .3s var(--curva);
}

.cabecera.con-sombra .marca img { height: 68px; }

.cabecera .nav-link {
    position: relative;
    font-weight: 400;
    font-size: .94rem;
    color: var(--c-texto);
    padding: .55rem .8rem !important;
}

.cabecera .nav-link:hover,
.cabecera .nav-link:focus-visible { color: var(--c-texto); text-decoration: underline; text-underline-offset: .45em; }

.cabecera .nav-link.active { font-weight: 600; color: var(--c-titulos); }

@media (min-width: 992px) {
    .cabecera .nav-link.active::after {
        content: "";
        position: absolute;
        left: .8rem;
        right: .8rem;
        bottom: -.42rem;
        height: 2px;
        border-radius: 2px;
        background: var(--c-acento);
    }
}

.cabecera .dropdown-toggle::after {
    border: 0;
    content: "\f107";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .72em;
    vertical-align: .05em;
    margin-left: .35em;
    transition: transform .25s var(--curva);
}

.cabecera .dropdown-toggle.show::after { transform: rotate(180deg); }

.cabecera .dropdown-menu {
    background: var(--c-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    padding: .5rem;
}

@media (prefers-reduced-motion: no-preference) {
    .cabecera .dropdown-menu.show { animation: desplegar .28s var(--curva) both; }
}

/* Usa la propiedad translate (no transform) para no pisar el centrado del
   menú grande, que sí usa transform. */
@keyframes desplegar {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
}

.cabecera .dropdown-item {
    border-radius: var(--radio-boton);
    padding: .55rem .8rem;
    font-weight: 600;
    color: var(--c-titulos);
    white-space: normal;
}

.cabecera .dropdown-item small { font-weight: 400; color: var(--texto-2); }

.cabecera .dropdown-item:hover,
.cabecera .dropdown-item:focus { background: var(--fondo); color: var(--c-titulos); }

.mega { padding: 1rem !important; }

.mega-grid { display: grid; gap: .25rem; }

.mega-item {
    display: flex;
    gap: .85rem;
    padding: .7rem .75rem;
    border-radius: var(--radio);
    text-decoration: none;
    color: var(--c-titulos);
    transition: background-color .2s ease;
}

.mega-item i {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--radio);
    background: var(--c-acento-suave);
    color: var(--c-acento-texto);
    transition: transform .3s var(--curva);
}

.mega-item strong { display: block; font-size: .95rem; font-weight: 600; }
.mega-item small { display: block; color: var(--texto-2); font-size: .84rem; line-height: 1.4; }
.mega-item:hover, .mega-item:focus-visible { background: var(--fondo); color: var(--c-titulos); }
.mega-item:hover i { transform: scale(1.08); }

.mega-pie {
    display: block;
    margin-top: .5rem;
    padding: .7rem .75rem 0;
    border-top: 1px solid var(--borde);
    font-weight: 600;
    color: var(--c-acento-texto);
}

.cabecera-acciones { display: flex; align-items: center; gap: .9rem; }

.enlace-soporte {
    font-size: .94rem;
    color: var(--c-texto);
    text-decoration: none;
    white-space: nowrap;
}

.enlace-soporte:hover { color: var(--c-texto); text-decoration: underline; text-underline-offset: .45em; }

.navbar-toggler { border: 0; padding: .5rem; }
.navbar-toggler:focus { box-shadow: none; }

.hamburguesa, .hamburguesa::before, .hamburguesa::after,
.hamburguesa span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-titulos);
    border-radius: 2px;
    transition: transform .25s var(--curva), opacity .2s ease;
}

.hamburguesa { position: relative; background: transparent; height: 16px; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
.hamburguesa::before { top: 0; }
.hamburguesa span { position: absolute; top: 7px; }
.hamburguesa::after { bottom: 0; }

.navbar-toggler[aria-expanded="true"] .hamburguesa::before { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .hamburguesa::after { transform: translateY(-7px) rotate(-45deg); }
.navbar-toggler[aria-expanded="true"] .hamburguesa span { opacity: 0; }

@media (min-width: 992px) {
    .mega { width: min(900px, calc(100vw - 2rem)); left: 50% !important; right: auto !important; transform: translateX(-50%); }
    .mega-grid { grid-template-columns: repeat(3, 1fr); }
    .dropdown-mega { position: static; }
    .cabecera .dropdown-menu { margin-top: .55rem !important; }
}

@media (max-width: 991.98px) {
    .marca img { height: 72px; }
    .cabecera.con-sombra .marca img { height: 54px; }
    .navbar-collapse { padding: .75rem 0 1.25rem; max-height: calc(100vh - 70px); overflow-y: auto; }
    .cabecera .nav-link { font-size: 1.05rem; padding: .7rem .25rem !important; border-bottom: 1px solid var(--borde); }
    .cabecera .dropdown-menu { box-shadow: none; border: 0; padding: 0 0 0 .5rem; background: transparent; }
    .mega-grid { grid-template-columns: 1fr; }
    .mega-item small { display: none; }
    .cabecera-acciones { flex-direction: column; align-items: stretch; margin-top: 1rem; }
    .cabecera-acciones .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Portada animada (carrusel)
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--c-superficie);
    padding: clamp(2.75rem, 6vw, 5.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--borde);
}

.hero-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Destellos: círculos difuminados que se desplazan despacio, como los
   fondos de Windows 11. El color sigue a la diapositiva activa. */
.destello {
    position: absolute;
    border-radius: 50%;
    /* Borde difuso con una máscara: se dibuja una sola vez y la tarjeta
       gráfica solo lo desplaza. (Un filter: blur se recalculaba en cada
       cuadro y hacía ver la animación entrecortada.) */
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .3) 72%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .3) 72%, transparent 100%);
    opacity: .5;
    will-change: transform;
    transform: translateZ(0);
    transition: background-color .9s ease;
}

.d1 { width: min(60vw, 860px); aspect-ratio: 1; top: -38%; right: -14%; background-color: var(--hero-tinte, var(--c-destello-1)); }
.d2 { width: min(50vw, 700px); aspect-ratio: 1; bottom: -45%; right: 18%; background-color: var(--c-destello-2); opacity: .38; }
.d3 { width: min(40vw, 560px); aspect-ratio: 1; top: 0; right: 28%; background-color: var(--c-destello-3); opacity: .3; }
.d4 { width: min(44vw, 620px); aspect-ratio: 1; bottom: -50%; left: -16%; background-color: var(--c-destello-4); opacity: .28; }

:root[data-tema="oscuro"] .destello { opacity: .4; }
:root[data-tema="oscuro"] .d3, :root[data-tema="oscuro"] .d4 { opacity: .28; }

/* Retícula de puntos que se desvanece: textura técnica, muy sutil. */
.hero-rejilla {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--c-texto) 16%, transparent) 1px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 70% at 72% 45%, #000 10%, transparent 72%);
    opacity: .55;
}

.hero-diapos { display: grid; }

/* Todas las diapositivas ocupan la misma celda: la altura no salta. */
.hero-diapo {
    grid-area: 1 / 1;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.hero-diapo.activa { visibility: visible; opacity: 1; transition: opacity .3s ease; }

@media (min-width: 992px) {
    .hero-diapo { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 3.5rem; min-height: 470px; }
}

.hero-antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.1rem;
    padding: .3rem .8rem .3rem .65rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-superficie) 88%, transparent);
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-texto-2);
}

.punto-vivo {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--c-acento);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-acento) 60%, transparent);
}

.hero h1,
.hero-titulo {
    font-size: clamp(2.5rem, 4.2vw + 1rem, 4.4rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -.035em;
    max-width: 15ch;
    text-wrap: balance;
    margin: 0;
    color: var(--c-titulos);
}

/* Titular con degradado (como los lanzamientos de Apple y Microsoft). Los dos
   extremos cumplen el contraste por sí solos. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero h1,
    .hero-titulo {
        background: linear-gradient(100deg, var(--c-titulos) 0%, var(--c-titulos) 38%, var(--c-acento-texto) 72%, var(--c-titulos) 100%);
        background-size: 220% 100%;
        background-position: 0% 0;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.hero-eslogan {
    margin: 1rem 0 0;
    font-family: var(--f-titulo);
    font-size: clamp(1.2rem, 1vw + .9rem, 1.55rem);
    font-weight: 600;
    color: var(--c-acento-texto);
    line-height: 1.3;
}

.hero-sub {
    margin: 1.25rem 0 2rem;
    font-size: clamp(1.05rem, .4vw + .95rem, 1.22rem);
    line-height: 1.55;
    color: var(--c-texto-2);
    max-width: 50ch;
}

.hero-eslogan + .hero-sub { margin-top: .9rem; }

.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-wa { margin-top: 1.5rem; }
.hero-wa i { font-size: 1.15em; }

.hero-visual { position: relative; width: 100%; max-width: 620px; justify-self: center; }

/* Tarjeta de producto con anillos que giran */
.hero-producto {
    position: relative;
    aspect-ratio: 1.25;
    display: grid;
    place-items: center;
}

.orbita {
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0 55%, var(--c-acento) 75%, var(--c-destello-3) 88%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    opacity: .7;
}

.o1 { width: 78%; }
.o2 { width: 100%; opacity: .4; }

.hero-producto-tarjeta {
    position: relative;
    width: min(72%, 380px);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: var(--sombra-alta), 0 30px 60px -30px color-mix(in srgb, var(--marca, var(--c-acento)) 60%, transparent);
    border: 1px solid rgba(0, 0, 0, .06);
    display: grid;
    place-items: center;
}

.hero-producto-tarjeta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, var(--marca, var(--c-acento)), var(--c-acento));
}

.hero-producto-tarjeta img { max-width: 100%; max-height: 110px; object-fit: contain; }

/* Controles del carrusel */
.hero-controles {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.hero-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-superficie) 88%, transparent);
    color: var(--c-titulos);
    font-size: .8rem;
    transition: background-color .2s ease, border-color .2s ease;
}

.hero-btn:hover { background: var(--c-fondo); border-color: var(--c-titulos); }

.hero-btn .fa-play { display: none; }
.hero[data-pausado] .hero-btn .fa-play { display: inline; }
.hero[data-pausado] .hero-btn .fa-pause { display: none; }

.hero-puntos { display: flex; align-items: center; gap: .1rem; margin: 0 .25rem; }

.hero-punto {
    border: 0;
    background: none;
    padding: .75rem .3rem;
    display: grid;
    place-items: center;
}

.hero-punto span {
    position: relative;
    display: block;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-texto) 28%, transparent);
    overflow: hidden;
    transition: width .45s var(--curva), background-color .3s ease;
}

.hero-punto:hover span { background: color-mix(in srgb, var(--c-texto) 50%, transparent); }

.hero-punto.activo span { width: 2.25rem; background: color-mix(in srgb, var(--c-texto) 20%, transparent); }

/* Barra de progreso hasta la siguiente diapositiva */
.hero-punto.activo span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--c-titulos);
    transform-origin: left;
    transform: scaleX(1);
}

.hero[data-auto] .hero-punto.activo span::after { animation: progreso var(--hero-duracion, 6s) linear both; }
.hero[data-pausado] .hero-punto.activo span::after { animation-play-state: paused; }

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

/* Animación de entrada: cada elemento sube y se enfoca, en cascada. */
@media (prefers-reduced-motion: no-preference) {
    .hero-diapo.activa .anim { animation: subir .6s var(--curva) both; animation-delay: calc(var(--d, 0) * 60ms + 30ms); }
    .hero-diapo.activa .anim-visual { animation: emerger .75s var(--curva) both .1s; }
    .hero-diapo.activa h1.anim,
    .hero-diapo.activa .hero-titulo.anim { animation: subir .6s var(--curva) both, brillo 1.8s ease-out both; animation-delay: 90ms, 300ms; }

    .d1 { animation: deriva-1 26s ease-in-out infinite alternate; }
    .d2 { animation: deriva-2 32s ease-in-out infinite alternate; }
    .d3 { animation: deriva-3 22s ease-in-out infinite alternate; }
    .d4 { animation: deriva-2 36s ease-in-out infinite alternate-reverse; }

    .punto-vivo { animation: latido 2.4s ease-out infinite; }

    .o1 { animation: girar 14s linear infinite; }
    .o2 { animation: girar 22s linear infinite reverse; }
    .hero-diapo.activa .hero-producto-tarjeta { animation: flotar 6s ease-in-out infinite .9s; will-change: transform; }
    .orbita { will-change: transform; }
}

/* Fuera de pantalla, las animaciones continuas se detienen (site.js). */
.hero.fuera-de-vista .destello,
.hero.fuera-de-vista .orbita,
.hero.fuera-de-vista .pila svg,
.hero.fuera-de-vista .hero-producto-tarjeta,
.hero.fuera-de-vista .punto-vivo { animation-play-state: paused; }

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

@keyframes emerger {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes brillo {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
}

@keyframes deriva-1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-8vw, 6vh) scale(1.12); }
    100% { transform: translate(-3vw, 12vh) scale(.95); }
}

@keyframes deriva-2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10vw, -8vh) scale(1.15); }
    100% { transform: translate(4vw, -14vh) scale(1); }
}

@keyframes deriva-3 {
    0% { transform: translate(0, 0) scale(.9); }
    100% { transform: translate(-12vw, 10vh) scale(1.2); }
}

@keyframes latido {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-acento) 55%, transparent); }
    80%, 100% { box-shadow: 0 0 0 8px transparent; }
}

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

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

@media (max-width: 991.98px) {
    .hero-visual { max-width: 460px; }
    .hero-diapo { gap: 1.75rem; }
    .hero-producto { aspect-ratio: 1.6; }
    .hero h1, .hero-titulo { max-width: 18ch; }
}

/* Diagrama de capas (diapositiva principal) */

.pila { margin: 0; }

.pila svg { width: 100%; height: auto; display: block; overflow: visible; }

.pila a, .pila a:hover { text-decoration: none; }

.pila-capa { cursor: pointer; }

.pila-placa {
    transition: transform .3s var(--curva);
    transform-box: view-box;
}

.pila-cara { fill: var(--cara); opacity: .92; stroke: color-mix(in srgb, #FFFFFF 45%, transparent); stroke-width: 1; }
.pila-lado { fill: var(--lado); opacity: .95; }
.pila-lado-der { opacity: .8; }

.pila-capa line { stroke: color-mix(in srgb, var(--c-texto) 30%, transparent); stroke-width: 1.2; transition: stroke .2s; }

.pila-capa text {
    fill: var(--c-texto-2);
    font-family: var(--f-titulo);
    font-size: 19px;
    font-weight: 600;
    transition: fill .2s;
}

.pila-capa:hover .pila-placa,
.pila-capa:focus-visible .pila-placa { transform: translateY(-12px); }

.pila-capa:hover .pila-cara,
.pila-capa:focus-visible .pila-cara { opacity: 1; stroke: #FFFFFF; stroke-width: 1.5; }

.pila-capa:hover text,
.pila-capa:focus-visible text { fill: var(--c-titulos); }

.pila-capa:hover line,
.pila-capa:focus-visible line { stroke: var(--c-acento); }

.pila-capa:focus-visible { outline: none; }

.pila-riel rect { fill: var(--c-acento); opacity: .9; }

.pila-riel text {
    fill: var(--c-acento-texto);
    font-family: var(--f-titulo);
    font-size: 16px;
    font-weight: 600;
}

.pila-riel:hover rect, .pila-riel:focus-visible rect { opacity: 1; fill: var(--c-acento-hover); }

.pila figcaption {
    margin-top: .75rem;
    font-size: .88rem;
    color: var(--c-texto-2);
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    .pila-capa { animation: apilar .55s var(--curva) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
    .pila-riel { animation: aparecer .4s ease both; animation-delay: .6s; }
    .pila svg { animation: flotar 6s ease-in-out infinite 1.2s; will-change: transform; }
}

@keyframes apilar {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: none; }
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 575.98px) {
    .pila-capa text { font-size: 21px; }
    .hero-visual .pila { max-width: 330px; margin: 0 auto; }
    .hero-producto { aspect-ratio: 1.9; }
}

/* --------------------------------------------------------------------------
   Aparición al desplazarse (la activa site.js; sin JavaScript todo se ve)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .js-revelar [data-revelar] {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .55s var(--curva), transform .55s var(--curva);
        transition-delay: calc(var(--r, 0) * 50ms);
    }

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

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.seccion { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.seccion-suave { background: var(--fondo); }

.seccion-oscura { background: var(--c-marca); color: var(--c-sobre-marca-2); }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--c-sobre-marca); }

.encabezado-seccion { max-width: 64ch; margin-bottom: 2.75rem; }
.encabezado-seccion p { color: var(--texto-2); font-size: 1.12rem; margin: .85rem 0 0; }
.seccion-oscura .encabezado-seccion p { color: var(--c-sobre-marca-2); }

.franja-clientes {
    border-bottom: 1px solid var(--borde);
    background: var(--superficie);
    padding: 1.35rem 0;
}

.franja-clientes .container-xl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
}

.franja-clientes h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-2);
    font-weight: 600;
    margin: 0;
}

.franja-clientes ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.franja-clientes li {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--fondo);
    font-size: .92rem;
    font-weight: 600;
    color: var(--c-titulos);
}

.franja-clientes i { color: var(--c-acento-texto); }

/* Soluciones de la portada */

.soluciones-grid { display: grid; gap: 2.5rem; }

@media (min-width: 992px) {
    .soluciones-grid { grid-template-columns: 4fr 8fr; gap: 4.5rem; }
    .soluciones-intro { position: sticky; top: 110px; align-self: start; }
}

.soluciones-intro p { color: var(--texto-2); font-size: 1.12rem; margin: 1rem 0 1.5rem; }

.capa-grupo + .capa-grupo { margin-top: 2.25rem; }

.capa-grupo h3 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--texto-2);
    margin: 0 0 .5rem;
}

.capa-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.capa-grupo li a {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    grid-template-areas: "icono nombre ir" "icono resumen ir";
    column-gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--c-tarjeta);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .25s var(--curva), border-color .2s ease;
}

.capa-grupo li a:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); border-color: transparent; }

.capa-grupo li a > i:first-child {
    grid-area: icono;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radio);
    background: var(--c-acento-suave);
    color: var(--c-acento-texto);
    font-size: 1.1rem;
}

.sol-nombre { grid-area: nombre; font-family: var(--f-titulo); font-weight: 600; font-size: 1.08rem; color: var(--c-titulos); }
.sol-resumen { grid-area: resumen; color: var(--texto-2); font-size: .95rem; }
.sol-ir { grid-area: ir; align-self: center; color: var(--texto-2); font-size: .85rem; transition: color .2s, transform .3s var(--curva); }
.capa-grupo li a:hover .sol-ir { color: var(--c-acento-texto); transform: translateX(4px); }

/* Productos propios */

.productos-grid { display: grid; gap: 1.5rem; }

@media (min-width: 768px) { .productos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .productos-grid { grid-template-columns: repeat(4, 1fr); } }

.producto-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-tarjeta);
    color: var(--texto);
    border-radius: var(--radio-grande);
    padding: 1.6rem;
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .3s var(--curva);
}

.producto-tarjeta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--marca, var(--c-acento)), var(--c-acento));
}

.producto-tarjeta h3 { font-size: 1.3rem; margin: 1rem 0 .4rem; color: var(--c-titulos); }
.producto-tarjeta p { color: var(--texto-2); font-size: .97rem; flex: 1; }

.producto-logo { height: 52px; display: flex; align-items: center; }
.producto-logo img { max-height: 46px; max-width: 100%; object-fit: contain; }

.producto-logo-texto {
    font-family: var(--f-titulo);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--c-titulos);
    letter-spacing: -.02em;
}

.producto-logo-texto.grande { font-size: clamp(2.5rem, 5vw, 3.6rem); }

.producto-mas { font-size: .95rem; }

/* La tarjeta entera es clicable sin anidar enlaces. */
.enlace-tarjeta { color: inherit; text-decoration: none; }
.enlace-tarjeta:hover { color: inherit; }
.enlace-tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.producto-tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-6px); }
.producto-tarjeta:hover .producto-mas { text-decoration: underline; }
.producto-tarjeta:hover .producto-mas::after { transform: translateX(4px); }
.enlace-tarjeta:focus-visible { outline: none; box-shadow: none; }
.producto-tarjeta:has(.enlace-tarjeta:focus-visible) { outline: 2px solid var(--c-texto); outline-offset: 3px; }

.estado {
    display: inline-block;
    align-self: flex-start;
    margin-top: 1rem;
    padding: .15rem .6rem;
    border-radius: var(--radio-boton);
    font-size: .78rem;
    font-weight: 600;
}

.estado-disponible { background: var(--c-exito-suave); color: var(--c-exito-texto); }
.estado-en_evolucion { background: var(--c-info-suave); color: var(--c-info-texto); }
.estado-proximamente { background: var(--c-advertencia-suave); color: var(--c-advertencia-texto); }

/* Proceso */

.proceso {
    list-style: none;
    counter-reset: paso;
    display: grid;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) { .proceso { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .proceso { grid-template-columns: repeat(4, 1fr); } }

.proceso li {
    counter-increment: paso;
    position: relative;
    padding: 1.6rem 1.5rem 1.75rem;
    border-radius: var(--radio-grande);
    background: var(--fondo);
}

.proceso li::before {
    content: "0" counter(paso);
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--f-titulo);
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--c-acento-texto), var(--c-destello-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--c-acento-texto);
}

.proceso h3 { font-size: 1.18rem; }
.proceso p { color: var(--texto-2); margin: 0; }

/* Contacto */

.seccion-contacto { background: var(--fondo); }

.contacto-grid { display: grid; gap: 2.5rem; }

@media (min-width: 992px) {
    .contacto-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
    .contacto-grid-pagina { grid-template-columns: 7fr 4fr; }
}

.contacto-texto > p { color: var(--texto-2); font-size: 1.08rem; margin: 1rem 0 1.75rem; }

.contacto-form {
    background: var(--c-tarjeta);
    border-radius: var(--radio-grande);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: var(--sombra);
}

.canales { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }

.canales li { display: flex; gap: .9rem; align-items: flex-start; }

.canales i {
    flex: 0 0 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--radio);
    background: var(--c-acento-suave);
    color: var(--c-acento-texto);
}

.canales span { display: block; font-size: .85rem; color: var(--texto-2); }
.canales a { font-weight: 600; color: var(--c-titulos); }
.canales a:hover { color: var(--c-acento-texto); }
.canales a + a { margin-left: .5rem; }

/* Formulario */

.formulario .form-label { font-weight: 600; color: var(--c-titulos); font-size: .92rem; margin-bottom: .3rem; }
.opcional { font-weight: 400; color: var(--texto-2); }

.form-control, .form-select { background-color: var(--c-superficie); color: var(--c-texto); }
.form-control::placeholder { color: var(--c-texto-2); opacity: .8; }

.formulario .form-control,
.formulario .form-select {
    border-radius: var(--radio-boton);
    border-color: var(--c-borde-input);
    padding: .65rem .85rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Foco al estilo Fluent: línea inferior del color de acción. */
.formulario .form-control:focus,
.formulario .form-select:focus {
    border-color: var(--c-borde-input);
    box-shadow: inset 0 -2px 0 var(--c-acento);
}

.formulario .form-control.is-invalid:focus { box-shadow: inset 0 -2px 0 var(--c-error); }

.consentimiento { font-size: .9rem; color: var(--texto-2); }
.consentimiento .form-check-input { border-color: var(--c-borde-input); }
.form-check-input:checked { background-color: var(--c-acento); border-color: var(--c-acento); }

.campo-trampa {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulario-pie { margin-top: 1.5rem; }

.formulario-estado {
    margin-top: 1.25rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radio);
    font-weight: 500;
}

.formulario-estado.ok { background: var(--c-exito-suave); color: var(--c-exito-texto); }
.formulario-estado.error { background: var(--c-error-suave); color: var(--c-error-texto); }

.formulario-alternativas { margin-top: 1rem; font-size: .95rem; }
.formulario-alternativas p { margin-bottom: .4rem; color: var(--texto-2); }
.formulario-alternativas ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.formulario-alternativas a { font-weight: 600; }

.formulario.enviado .row,
.formulario.enviado .formulario-pie { display: none; }

.selector-tipo {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--fondo);
    border-radius: var(--radio);
    margin-bottom: 1.75rem;
}

.selector-tipo button {
    border: 0;
    background: transparent;
    padding: .5rem 1.05rem;
    border-radius: var(--radio-boton);
    font-weight: 600;
    color: var(--texto-2);
    transition: background-color .2s ease, color .2s ease;
}

.selector-tipo button[aria-selected="true"] { background: var(--c-tarjeta); color: var(--c-titulos); box-shadow: var(--sombra); }

.nota-datos { margin-top: 2rem; font-size: .9rem; color: var(--texto-2); }

/* --------------------------------------------------------------------------
   Páginas interiores
   -------------------------------------------------------------------------- */

.interior-cabecera {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--fondo);
    padding: clamp(2.5rem, 5.5vw, 4.5rem) 0 clamp(2.25rem, 4.5vw, 3.5rem);
    border-bottom: 1px solid var(--borde);
}

/* Destello estático en la esquina: mismo lenguaje que la portada. */
.interior-cabecera::before,
.producto-cabecera::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(55vw, 720px);
    aspect-ratio: 1;
    top: -60%;
    right: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c-destello-1) 35%, transparent), color-mix(in srgb, var(--c-destello-3) 14%, transparent) 45%, transparent 70%);
    pointer-events: none;
}

.interior-cabecera h1 { max-width: 22ch; text-wrap: balance; }

.interior-sub { font-size: 1.18rem; color: var(--texto-2); max-width: 62ch; margin: 1rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
    .interior-cabecera .migas,
    .interior-cabecera h1,
    .interior-cabecera .interior-sub,
    .producto-cabecera-grid > * { animation: subir .55s var(--curva) both; }
    .interior-cabecera h1 { animation-delay: .05s; }
    .interior-cabecera .interior-sub { animation-delay: .1s; }
    .producto-cabecera-grid > :last-child { animation-name: emerger; animation-delay: .12s; }
}

.migas {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: .88rem;
    color: var(--texto-2);
}

.migas li + li::before { content: "›"; margin: 0 .55rem; color: var(--c-texto-2); }
.migas a { color: var(--texto-2); }
.migas a:hover { color: var(--c-acento-texto); }

.lectura-grid { display: grid; gap: 2.5rem; }

@media (min-width: 992px) {
    .lectura-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4.5rem; }
    .lateral { position: sticky; top: 110px; align-self: start; }
}

.prosa { max-width: 68ch; font-size: 1.08rem; }
.prosa h2 { font-size: 1.6rem; margin: 2.25rem 0 .85rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa p { margin-bottom: 1.1rem; }
.prosa ul { padding-left: 1.2rem; margin-bottom: 1.25rem; }
.prosa li { margin-bottom: .45rem; }
.prosa li::marker { color: var(--c-acento); }

.prosa-legal { font-size: 1rem; }
.prosa-legal h2 { font-size: 1.25rem; }
.version-legal { margin-top: 2.5rem; font-size: .9rem; color: var(--texto-2); }

.lateral {
    background: var(--c-tarjeta);
    border-radius: var(--radio-grande);
    padding: 1.75rem;
    box-shadow: var(--sombra);
}

.lateral h2 { font-size: 1.2rem; margin-bottom: 1rem; }

.lista-check { list-style: none; padding: 0; margin: 0 0 1.5rem; }

.lista-check li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; }

.lista-check li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .05em;
    color: var(--c-acento-texto);
}

.ficha-empresa { margin-bottom: 1.5rem; }
.ficha-empresa dt { font-size: .85rem; color: var(--texto-2); font-weight: 500; }
.ficha-empresa dd { font-weight: 600; color: var(--c-titulos); margin-bottom: .75rem; }

.alcance { display: grid; gap: 0; margin: 0; }

@media (min-width: 768px) { .alcance { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

.alcance > div { padding: 1rem 0; border-bottom: 1px solid var(--borde); }
.alcance dt { font-family: var(--f-titulo); font-weight: 600; color: var(--c-titulos); font-size: 1.05rem; }
.alcance dd { margin: .25rem 0 0; color: var(--texto-2); }

.nota-alcance { font-size: .92rem; color: var(--texto-2); margin-top: 1rem; }

/* Soluciones agrupadas por capa */

.capa-bloque + .capa-bloque { margin-top: 4rem; }

.capa-titulo {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--texto-2);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 1.25rem;
}

.lineas { display: grid; gap: 1.25rem; }

@media (min-width: 768px) { .lineas { grid-template-columns: repeat(2, 1fr); } }

.linea {
    padding: 1.6rem;
    border-radius: var(--radio-grande);
    background: var(--c-tarjeta);
    box-shadow: var(--sombra);
    transition: box-shadow .25s ease, transform .3s var(--curva);
}

.linea:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }

.linea-cabeza { display: flex; align-items: center; gap: .85rem; margin-bottom: .6rem; }

.linea-cabeza i {
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--radio);
    background: var(--c-acento-suave);
    color: var(--c-acento-texto);
}

.linea h3 { font-size: 1.3rem; margin: 0; }
.linea h3 a { color: inherit; text-decoration: none; }
.linea h3 a:hover { color: var(--c-acento-texto); }
.linea > p { color: var(--texto-2); }

.linea-items { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; }

.linea-items li, .chips li {
    background: var(--fondo);
    border-radius: var(--radio-boton);
    padding: .2rem .65rem;
    font-size: .85rem;
    color: var(--c-titulos);
}

.otras-lineas { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }

@media (min-width: 576px) { .otras-lineas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .otras-lineas { grid-template-columns: repeat(4, 1fr); } }

.otras-lineas a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    background: var(--c-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--c-titulos);
    font-weight: 600;
    text-decoration: none;
    height: 100%;
    transition: box-shadow .2s ease, transform .25s var(--curva), border-color .2s ease;
}

.otras-lineas a:hover { border-color: transparent; box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.otras-lineas i { color: var(--c-acento-texto); }
.otras-lineas small { flex-basis: 100%; font-weight: 400; color: var(--texto-2); }

.punto-marca { width: .75rem; height: .75rem; border-radius: 50%; background: var(--marca); }

/* Software */

.productos-lista { display: grid; gap: 1.5rem; }

.producto-fila {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--radio-grande);
    background: var(--c-tarjeta);
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .3s var(--curva);
}

.producto-fila::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--marca, var(--c-acento)), var(--c-acento));
}

.producto-fila:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }

@media (min-width: 768px) { .producto-fila { grid-template-columns: 260px 1fr; gap: 3rem; } }

.producto-fila-marca { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.producto-fila-marca img { max-width: 220px; max-height: 64px; object-fit: contain; }
.producto-fila h2 { font-size: 1.7rem; margin-bottom: .25rem; }
.producto-eslogan { color: var(--c-acento-texto); font-weight: 600; margin-bottom: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.chip-mas { background: transparent !important; color: var(--texto-2) !important; }

.producto-cabecera {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    padding: clamp(2.5rem, 5.5vw, 4.5rem) 0;
}

.producto-cabecera::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--marca, var(--c-destello-1)) 30%, transparent), color-mix(in srgb, var(--c-destello-1) 16%, transparent) 45%, transparent 70%);
}

.producto-cabecera-grid { display: grid; gap: 2rem; align-items: center; }

@media (min-width: 992px) { .producto-cabecera-grid { grid-template-columns: 7fr 5fr; } }

.producto-cabecera h1 { margin-bottom: .25rem; }
.producto-eslogan-grande { font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 600; color: var(--c-acento-texto); margin: 0; }
.producto-cabecera .interior-sub { margin-bottom: 1.75rem; }

.producto-cabecera-logo {
    background: var(--c-tarjeta);
    border-radius: 22px;
    padding: 2.5rem;
    display: grid;
    place-items: center;
    min-height: 200px;
    box-shadow: var(--sombra-alta);
}

.producto-cabecera-logo img { max-width: 100%; max-height: 120px; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
    .producto-cabecera-logo { animation: emerger .7s var(--curva) both .12s, flotar 6s ease-in-out infinite 1s; will-change: transform; }
}

.funciones { display: grid; gap: 1rem; }

@media (min-width: 768px) { .funciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .funciones { grid-template-columns: repeat(3, 1fr); } }

.funcion { padding: 1.35rem 1.4rem; border-radius: var(--radio-grande); background: var(--fondo); }
.funcion h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.funcion p { color: var(--texto-2); margin: 0; font-size: .97rem; }

.hoja-ruta {
    margin-top: 3rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radio-grande);
    background: var(--c-advertencia-suave);
    border: 1px solid color-mix(in srgb, var(--c-advertencia) 35%, var(--c-superficie));
}

.hoja-ruta p { color: var(--c-texto); font-size: .95rem; }
.hoja-ruta ul { margin: 0; padding-left: 1.2rem; }

/* Sectores */

.sectores { display: grid; gap: 1.5rem; }

@media (min-width: 768px) { .sectores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sectores { grid-template-columns: repeat(3, 1fr); } }

.sector {
    padding: 1.75rem;
    border-radius: var(--radio-grande);
    background: var(--c-tarjeta);
    box-shadow: var(--sombra);
    transition: box-shadow .25s ease, transform .3s var(--curva);
}

.sector:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }
.sector > i {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--radio);
    background: var(--c-acento-suave);
    font-size: 1.3rem;
    color: var(--c-acento-texto);
    margin-bottom: 1.1rem;
}
.sector h2 { font-size: 1.35rem; }
.sector p { color: var(--texto-2); }
.sector h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); font-weight: 600; margin: 1.25rem 0 .5rem; }
.sector ul { margin: 0; padding-left: 1.1rem; }
.sector li::marker { color: var(--c-acento); }

/* Marcas */

.marcas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.marca-item { border-radius: var(--radio-grande); padding: 1.5rem; background: var(--c-tarjeta); box-shadow: var(--sombra); }
.marca-logo { height: 64px; display: flex; align-items: center; margin-bottom: 1rem; }
.marca-logo img { max-height: 56px; max-width: 100%; object-fit: contain; }
.marca-item h2 { font-size: 1.15rem; margin: 0; }
.marca-tipo { font-size: .85rem; color: var(--texto-2); }

/* Llamado final: bloque azul profundo con destellos */

.llamado { padding: 0 0 clamp(3.5rem, 7vw, 6rem); }

.seccion + .llamado, .seccion-suave + .llamado { padding-top: clamp(3.5rem, 7vw, 6rem); }

.llamado-caja {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 1.5rem;
    align-items: center;
    background: var(--c-marca);
    color: var(--c-sobre-marca-2);
    border-radius: 20px;
    padding: clamp(2rem, 5vw, 3.5rem);
    box-shadow: var(--c-sombra-marca);
}

.llamado-caja::before,
.llamado-caja::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
    will-change: transform;
    pointer-events: none;
}

.llamado-caja::before { width: 420px; height: 420px; right: -120px; top: -200px; background: var(--c-destello-2); opacity: .55; }
.llamado-caja::after { width: 360px; height: 360px; right: 25%; bottom: -260px; background: var(--c-destello-3); opacity: .45; }

@media (prefers-reduced-motion: no-preference) {
    .llamado-caja::before { animation: deriva-1 24s ease-in-out infinite alternate; }
    .llamado-caja::after { animation: deriva-3 28s ease-in-out infinite alternate; }
}

@media (min-width: 992px) { .llamado-caja { grid-template-columns: 1fr auto; gap: 3rem; } }

.llamado-caja h2 { color: var(--c-sobre-marca); font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem); }
.llamado-caja p { margin: 0; max-width: 56ch; font-size: 1.08rem; }
.llamado-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.icono-grande { font-size: 3.5rem; color: var(--exito); }

/* --------------------------------------------------------------------------
   Pie de página (claro, como el de Microsoft)
   -------------------------------------------------------------------------- */

.pie { background: var(--fondo); color: var(--c-texto-2); padding: 3.5rem 0 1.5rem; font-size: .9rem; border-top: 1px solid var(--borde); }

.pie-grid { display: grid; gap: 2.5rem; }

@media (min-width: 768px) { .pie-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pie-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }

.pie img { height: 64px; width: auto; margin-bottom: 1rem; }

.pie h2 { color: var(--c-titulos); font-size: .95rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0; }

.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .5rem; }
.pie a { color: var(--c-texto-2); text-decoration: none; }
.pie a:hover { color: var(--c-titulos); text-decoration: underline; }

.pie address p { display: flex; gap: .75rem; margin-bottom: .9rem; }
.pie address i { color: var(--c-acento-texto); margin-top: .3rem; width: 1rem; }

.pie-redes { display: flex; gap: .5rem; margin-top: 1.25rem !important; }

.pie-redes a {
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--borde);
    color: var(--c-titulos);
    transition: background-color .2s ease, color .2s ease, transform .3s var(--curva);
}

.pie-redes a:hover { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-sobre-acento); transform: translateY(-2px); text-decoration: none; }

.pie .btn-tmc-contorno, .pie .btn-tmc-contorno:hover { color: var(--c-titulos); text-decoration: none; }

.pie-legal {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: .8rem;
}

.pie-legal p { margin: 0; }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pie-legal li { margin: 0; }
.pie-legal .enlace-boton { color: var(--c-texto-2); text-decoration: none; }
.pie-legal .enlace-boton:hover { color: var(--c-titulos); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Botones flotantes y aviso de cookies
   -------------------------------------------------------------------------- */

.flotantes {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
}

.flotante {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.05rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: var(--sombra-alta);
    transition: transform .35s var(--curva), background-color .2s ease;
}

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

.flotante i { font-size: 1.25rem; }
.flotante-wa { background: #157F41; color: #fff; }
.flotante-wa:hover { background: #116F38; color: #fff; }
.flotante-soporte { background: var(--c-marca); color: var(--c-sobre-marca); }
.flotante-soporte:hover { background: var(--c-marca-profundo); color: var(--c-sobre-marca); }

@media (prefers-reduced-motion: no-preference) {
    .flotante { animation: subir .5s var(--curva) both .6s; }
    .flotante + .flotante { animation-delay: .7s; }
}

@media (max-width: 575.98px) {
    .flotante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .flotante { padding: .85rem; }
}

.aviso-cookies {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1050;
    background: var(--c-superficie);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .25);
    padding: 1.25rem 0;
}

.aviso-cookies .container-xl { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; justify-content: space-between; }
.aviso-cookies h2 { font-size: 1.05rem; margin-bottom: .25rem; }
.aviso-cookies p { margin: 0; font-size: .93rem; color: var(--texto-2); max-width: 75ch; }
.aviso-cookies-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Página de error mínima
   -------------------------------------------------------------------------- */

.pagina-error { background: var(--fondo); min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.error-caja { background: var(--c-superficie); border-radius: var(--radio-grande); padding: 2.5rem; max-width: 520px; text-align: center; box-shadow: var(--sombra); }
.error-caja img { margin-bottom: 1.5rem; }
.error-caja h1 { font-size: 1.8rem; }

@media print {
    .cabecera, .pie, .flotantes, .aviso-cookies, .hero-fondo, .hero-controles { display: none !important; }
    .hero-diapo { visibility: visible; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Preferencias: idioma y tema
   -------------------------------------------------------------------------- */

.preferencias { display: flex; align-items: center; gap: .25rem; }

.pref-idioma, .pref-tema {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 2.25rem;
    min-width: 2.25rem;
    justify-content: center;
    padding: 0 .55rem;
    border: 0;
    border-radius: var(--radio-boton);
    background: transparent;
    color: var(--c-texto);
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none;
    transition: background-color .2s ease;
}

.pref-idioma:hover, .pref-tema:hover { background: var(--c-fondo); color: var(--c-titulos); }

.pref-tema i { transition: transform .5s var(--curva); }
.pref-tema:hover i { transform: rotate(-25deg); }

/* El icono muestra el tema al que se cambia. */
.pref-tema .icono-claro { display: none; }
:root[data-tema="oscuro"] .pref-tema .icono-claro { display: inline; }
:root[data-tema="oscuro"] .pref-tema .icono-oscuro { display: none; }

.cabecera-rapidas { display: flex; align-items: center; gap: .5rem; }

/* Logos de terceros y de productos: muchos traen texto oscuro. En el tema
   oscuro van sobre una placa clara para que se lean. */
:root[data-tema="oscuro"] .producto-logo:has(img),
:root[data-tema="oscuro"] .placa-logo:has(img) {
    background: #FFFFFF;
    border-radius: var(--radio);
    padding: .5rem .85rem;
}

.producto-fila-marca .placa-logo img { max-width: 220px; max-height: 64px; object-fit: contain; }
.producto-cabecera-logo.placa-logo:has(img) { background: #FFFFFF; padding: 2.5rem; }

/* Sugerencia de idioma (la muestra el navegador, nunca redirige) */
.sugerencia-idioma {
    background: var(--c-marca);
    color: var(--c-sobre-marca-2);
    font-size: .88rem;
    padding: .5rem 0;
}

.sugerencia-idioma .container-xl { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sugerencia-idioma a { color: var(--c-sobre-marca); font-weight: 600; }
.sugerencia-idioma button { margin-left: auto; background: none; border: 0; color: var(--c-sobre-marca-2); font-size: 1.1rem; line-height: 1; }

.aviso-traduccion {
    background: var(--c-info-suave);
    color: var(--c-info-texto);
    border-radius: var(--radio);
    padding: .85rem 1.1rem;
    font-size: .95rem;
}

.aviso-traduccion a { color: inherit; font-weight: 600; }