/* core/public/css/portada.css
   =========================================================
   LA PORTADA

   Venía de `public/landing.html`: un fichero suelto, fuera del enrutador, con
   **su propia paleta** —violeta y coral— y su propio sistema de idiomas en
   JavaScript. Era bonita y era una isla: ni seguía el tema de quien mira, ni
   entraba en las reglas de contraste, ni hablaba con los catálogos.

   Ahora nombra papeles como el resto. Es la cara comercial, así que se permite
   más aire y más tamaño que una pantalla de trabajo, pero **los colores son los
   mismos**: si un día cambia la paleta, cambia con ella. */

.kabe-portada {
    color: var(--kabe-texto);
    background: var(--kabe-fondo);
    font-size: 17px;
    line-height: 1.6;
}

.kabe-portada__ancho {
    width: min(100% - 2.5rem, 72rem);
    margin-inline: auto;
}

/* — La barra de arriba — */
.kabe-portada__barra {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--kabe-barra);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--kabe-borde);
}

.kabe-portada__barra > div {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 4.25rem;
}

.kabe-portada__marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    color: var(--kabe-texto);
    /* El enlace del logo no se subraya: la marca no es un enlace de texto. */
    text-decoration: none;
}

/* **Aquí había un `.kabe-portada__marca span`** que pintaba un cuadrado de 2rem
   con el color de acento. Estaba escrito para el marcado viejo —un `span` con un
   icono dentro y el texto suelto al lado— y al pasar el logo a un partial cogió
   también el `span` del texto: «Kabe Suite» acabó metido en una cajita de 2rem,
   partido en dos líneas y con fondo terracota.
   Se quita entero: el partial trae su propia marca. Un selector por etiqueta
   dentro de un componente ajeno es una trampa esperando a que el componente
   cambie por dentro. */ 

.kabe-portada__nav {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
    font-weight: 600;
    font-size: .95rem;
}

.kabe-portada__nav a {
    color: var(--kabe-texto-suave);
    text-decoration: none;
}

.kabe-portada__nav a:hover {
    color: var(--kabe-acento);
}

@media (max-width: 62rem) {
    .kabe-portada__nav { display: none; }
}

/* — Botones — */
.kabe-portada__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

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

.kabe-portada__btn--primario {
    background: var(--kabe-acento);
    color: var(--kabe-acento-contraste);
}

.kabe-portada__btn--primario:hover {
    background: var(--kabe-acento-hover);
    color: var(--kabe-acento-contraste);
}

.kabe-portada__btn--fantasma {
    background: var(--kabe-superficie);
    border-color: var(--kabe-borde-fuerte);
    color: var(--kabe-texto);
}

.kabe-portada__btn--fantasma:hover {
    border-color: var(--kabe-acento);
    color: var(--kabe-acento);
}

.kabe-portada__btn--grande {
    padding: 1.05rem 2rem;
    font-size: 1.05rem;
}

/* — Secciones — */
.kabe-portada__seccion {
    padding: clamp(3.5rem, 8vw, 7rem) 0;
}

.kabe-portada__seccion--suave {
    background: var(--kabe-superficie-alt);
}

.kabe-portada__epigrafe {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kabe-acento);
}

.kabe-portada h1,
.kabe-portada h2 {
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0;
    font-weight: 800;
    text-wrap: balance;
}

.kabe-portada h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
.kabe-portada h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.kabe-portada h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }

.kabe-portada__lead {
    font-size: clamp(1.02rem, 1.5vw, 1.25rem);
    color: var(--kabe-texto-suave);
    margin: 0;
}

.kabe-portada__centro { text-align: center; }

.kabe-portada__pila {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* — El hero —

   **Menos alto y en dos columnas.** Tenía `clamp(3rem, 7vw, 6rem)` arriba y
   abajo sobre una sola columna estrecha: en una pantalla grande quedaba una
   franja muerta enorme debajo de los botones y la mitad derecha en blanco. El
   aire vacío no es respirar, es no haber acabado. */
.kabe-portada__hero {
    padding: clamp(2.5rem, 4.5vw, 4rem) 0 clamp(3rem, 5vw, 4.5rem);
    background:
        radial-gradient(900px 520px at 12% 0%, var(--kabe-lavado-calido), transparent 62%),
        radial-gradient(760px 460px at 88% 18%, var(--kabe-lavado-frio), transparent 58%),
        var(--kabe-fondo);
}

.kabe-portada__hero__reja {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

/* La vitrina de aplicaciones: la misma rejilla que se ve al entrar. */
.kabe-portada__vitrina {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.kabe-portada__ficha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.15rem .6rem;
    border-radius: 1rem;
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    box-shadow: var(--kabe-sombra);
    text-align: center;
}

.kabe-portada__ficha__icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    background: var(--kabe-acento-suave);
    color: var(--kabe-acento);
    font-size: 1.15rem;
}

.kabe-portada__ficha__nombre {
    font-size: .8rem;
    font-weight: 600;
    color: var(--kabe-texto);
    line-height: 1.25;
}

/* La última no es una aplicación: es «y más». Se marca para que no se lea
   como una que existe y no encuentras luego en el listado. */
.kabe-portada__ficha--mas {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}
.kabe-portada__ficha--mas .kabe-portada__ficha__icono {
    background: var(--kabe-sombreado);
    color: var(--kabe-texto-ausente);
}
.kabe-portada__ficha--mas .kabe-portada__ficha__nombre { color: var(--kabe-texto-suave); }

/* En pantalla estrecha, una columna: la vitrina va debajo del texto y con las
   fichas más juntas, que si no ocupa media pantalla del móvil. */
@media (max-width: 60rem) {
    .kabe-portada__hero__reja { grid-template-columns: 1fr; }
    .kabe-portada__vitrina { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
    .kabe-portada__ficha { padding: .9rem .4rem; }
}

.kabe-portada__pastilla {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--kabe-acento-suave);
    color: var(--kabe-acento);
    font-weight: 700;
    font-size: .85rem;
    width: fit-content;
}

.kabe-portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: center;
}

.kabe-portada__o {
    color: var(--kabe-texto-ausente);
    font-size: .9rem;
}

.kabe-portada__nota {
    font-size: .9rem;
    color: var(--kabe-texto-ausente);
    margin: 0;
}

/* — Rejillas — */
.kabe-portada__rejilla {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.kabe-portada__tarjeta {
    position: relative;
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    border-radius: 1rem;
    padding: 1.6rem;
    box-shadow: var(--kabe-sombra);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

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

/* **Sin temblor en el borde de abajo.** Al pasar por encima la tarjeta sube, y
   si el cursor estaba en su borde inferior se quedaba fuera: perdía el hover,
   bajaba, lo recuperaba, volvía a subir… y así sin parar. Mientras está
   levantada, una franja invisible le rellena por debajo el hueco que deja, de
   modo que el cursor sigue encima. */
.kabe-portada__tarjeta:hover::after,
.kabe-portada__app:hover::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 8px;
}

.kabe-portada__tarjeta p {
    margin: 0;
    color: var(--kabe-texto-suave);
    font-size: .96rem;
}

.kabe-portada__etiqueta {
    align-self: flex-start;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--kabe-exito-suave);
    color: var(--kabe-exito);
    font-size: .75rem;
    font-weight: 700;
}

/* Los pasos van numerados porque **el orden es real**: no se construye antes de
   escuchar. Numerar lo que no es una secuencia sería decoración. */
.kabe-portada__paso {
    counter-increment: kabe-paso;
    position: relative;
    padding-left: 3.25rem;
}

.kabe-portada__paso::before {
    content: counter(kabe-paso);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--kabe-acento-suave);
    color: var(--kabe-acento);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.kabe-portada__pasos { counter-reset: kabe-paso; }

/* — Kabe AI: la conversación de ejemplo — */
.kabe-portada__chat {
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    box-shadow: var(--kabe-sombra-alta);
}

.kabe-portada__burbuja {
    border-radius: 1rem;
    padding: .9rem 1.1rem;
    font-size: .95rem;
    max-width: 90%;
}

.kabe-portada__burbuja--yo {
    align-self: flex-end;
    background: var(--kabe-acento);
    color: var(--kabe-acento-contraste);
}

.kabe-portada__burbuja--ella {
    align-self: flex-start;
    background: var(--kabe-superficie-alt);
    color: var(--kabe-texto);
}

/* La fuente citada, que es lo que distingue a este asistente. */
.kabe-portada__fuente {
    display: block;
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--kabe-texto-ausente);
}

.kabe-portada__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.kabe-portada__lista li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    color: var(--kabe-texto-suave);
}

.kabe-portada__lista i {
    color: var(--kabe-exito);
    margin-top: .25rem;
}

/* — Precios —
   Los planes estándar y, destacado, el plan a medida. Las tarjetas comparten la
   forma de `.kabe-portada__tarjeta` pero no su salto al pasar por encima: aquí
   se comparan, y una tarjeta que se mueve mientras la lees no ayuda. */
.kabe-portada__precios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    /* Sin hueco entre filas: las filas de la rejilla son las de la comparativa
       (nombre, frase, precio y una por característica), y el aire entre
       tarjetas de dos filas distintas lo pone su margen de abajo. */
    gap: 0 1.25rem;
    align-items: stretch;
}

/* Todas con el borde de 2 px (el habitual solo cambia de color): con uno de 1 y
   otro de 2, las filas de la comparativa quedaban a un píxel de distancia. */
.kabe-portada__plan {
    position: relative;
    background: var(--kabe-superficie);
    border: 2px solid var(--kabe-borde);
    border-radius: 1rem;
    padding: 1.6rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--kabe-sombra);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* **Cada fila a la misma altura en todos los planes.** Cada tarjeta ocupa en la
   rejilla de `.kabe-portada__precios` una fila por cosa —nombre, frase, precio y
   una por característica (el `span` lo pone la vista)— y las hereda con
   `subgrid`, igual que su lista. Así «usuarios» queda en la misma línea en los
   tres aunque una frase ocupe dos renglones en uno y uno en otro. Un navegador
   sin `subgrid` las pinta como antes, una debajo de otra. */
@supports (grid-template-rows: subgrid) {
    .kabe-portada__plan:not(.kabe-portada__plan--medida) {
        display: grid;
        grid-template-rows: subgrid;
        row-gap: .6rem;
    }
    .kabe-portada__plan:not(.kabe-portada__plan--medida) .kabe-portada__plan__incluye {
        display: grid;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}

/* La etiqueta del habitual, **una píldora centrada sobre el borde de arriba**
   (decisión del propietario, 07/10/2026). Fuera del flujo, porque dentro
   ocuparía una fila que los otros no tienen y descuadraría la comparativa.
   Sólida, del acento como el borde de su tarjeta: la de antes, verde claro y
   con un anillo del color de la tarjeta, parecía cortada sobre el fondo de la
   sección. */
.kabe-portada__plan__etiqueta {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: .3rem .9rem;
    background: var(--kabe-acento);
    color: var(--kabe-acento-contraste);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--kabe-acento) 60%, transparent);
}

.kabe-portada__plan h3 {
    margin: 0;
}

/* El habitual, con el borde del acento; el a medida, además con su fondo. */
.kabe-portada__plan--habitual {
    border: 2px solid var(--kabe-acento);
}

.kabe-portada__plan--medida {
    border: 2px solid var(--kabe-acento);
    background: var(--kabe-acento-suave);
}

.kabe-portada__plan__icono {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    display: grid;
    place-items: center;
    background: var(--kabe-acento);
    color: var(--kabe-acento-contraste);
}

.kabe-portada__plan__frase {
    margin: 0;
    color: var(--kabe-texto-suave);
    font-size: .9rem;
}

.kabe-portada__plan__precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}

.kabe-portada__plan__cifra {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--kabe-texto);
}

.kabe-portada__plan__periodo {
    font-size: .85rem;
    color: var(--kabe-texto-suave);
}

.kabe-portada__plan__anual {
    margin: 0;
    font-size: .8rem;
    color: var(--kabe-texto-ausente);
}

.kabe-portada__plan__incluye {
    margin-top: .6rem;
    gap: 0;
    font-size: .88rem;
}

/* Una raya fina entre características: guía el ojo de un plan al otro por la
   misma fila. */
.kabe-portada__plan__incluye li { padding: .55rem 0; }
.kabe-portada__plan__incluye li + li { border-top: 1px solid var(--kabe-borde); }

/* Lo que el plan no incluye: en su fila, atenuado y con una cruz en vez del visto. */
.kabe-portada__plan__no,
.kabe-portada__lista .kabe-portada__plan__no i { color: var(--kabe-texto-ausente); }

/* Visto y cruz con un punto de color, sin chillar (09/10/2026): el verde es el
   de éxito aclarado un poco hacia el fondo, y el rojo el de peligro apagado con
   el gris de lo ausente, así que se distinguen de un vistazo sin competir con
   los botones. Solo con tokens de papel, siguen al tema oscuro solos. La
   primera línea es para el navegador que no conozca `color-mix()`. */
.kabe-portada__plan__incluye i {
    color: var(--kabe-exito);
    color: color-mix(in srgb, var(--kabe-exito) 85%, var(--kabe-fondo));
}
.kabe-portada__lista .kabe-portada__plan__no i {
    color: var(--kabe-texto-ausente);
    color: color-mix(in srgb, var(--kabe-peligro) 55%, var(--kabe-texto-ausente));
}

/* Para lectores de pantalla: «No incluido» después del texto atenuado. */
.kabe-portada__oculto {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* El botón del a medida va abajo del todo, alineado con el final de las otras. */
.kabe-portada__plan--medida .kabe-portada__btn {
    margin-top: auto;
    align-self: flex-start;
}

/* — Preguntas — */
.kabe-portada__faq {
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    border-radius: 1rem;
    padding: 1.1rem 1.4rem;
    margin-bottom: .8rem;
}

.kabe-portada__faq summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.kabe-portada__faq summary::-webkit-details-marker { display: none; }

.kabe-portada__faq summary::after {
    content: "+";
    float: right;
    color: var(--kabe-acento);
    font-weight: 800;
}

.kabe-portada__faq[open] summary::after { content: "−"; }

.kabe-portada__faq p {
    margin: .8rem 0 0;
    color: var(--kabe-texto-suave);
}

/* — Pie — */
.kabe-portada__pie {
    background: var(--kabe-superficie-honda);
    color: var(--kabe-texto-invertido);
    padding: 3rem 0 2rem;
}

.kabe-portada__pie a {
    color: var(--kabe-texto-invertido);
    opacity: .85;
    text-decoration: none;
}

.kabe-portada__pie a:hover { opacity: 1; }

.kabe-portada__pie-cols {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* El selector de idioma, con el activo marcado: sin eso no se sabe en cuál
   estás, que es la mitad de para qué sirve. */
.kabe-portada__idiomas {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.kabe-portada__idiomas button {
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--kabe-texto-suave);
    cursor: pointer;
}

.kabe-portada__idiomas button:hover { color: var(--kabe-acento); }

.kabe-portada__idiomas button[aria-current="true"] {
    color: var(--kabe-acento);
    border-color: var(--kabe-acento);
}

/* ── «Hablemos de tu caso» ───────────────────────────────────────────────────
   El formulario de la portada. Los campos son los de aquí y no los de
   `entrada.css`: esta página no carga sus componentes y no tiene por qué. */
.kabe-portada__form { display: flex; flex-direction: column; gap: 1rem; }

.kabe-portada__form-fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 40rem) { .kabe-portada__form-fila { grid-template-columns: 1fr; } }

.kabe-portada__form label { display: flex; flex-direction: column; gap: .35rem; }
.kabe-portada__form label > span { font-weight: 600; font-size: .9rem; }

.kabe-portada__form input,
.kabe-portada__form select,
.kabe-portada__form textarea {
    font: inherit;
    color: var(--kabe-texto);
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    border-radius: var(--kabe-radio);
    padding: .7rem .9rem;
    width: 100%;
}
.kabe-portada__form textarea { resize: vertical; min-height: 7rem; }
.kabe-portada__form input:focus,
.kabe-portada__form select:focus,
.kabe-portada__form textarea:focus {
    outline: none;
    border-color: var(--kabe-acento);
    box-shadow: 0 0 0 3px var(--kabe-anillo-foco);
}

/* **La trampa de miel.**
   Escondida con posición y no con `display:none` ni `type="hidden"`: los bots
   que valen algo saltan los dos. Así queda fuera de la pantalla, sin ocupar
   sitio, y sigue siendo un campo de texto normal en el HTML — que es justo lo
   que buscan. */
.kabe-portada__miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kabe-portada__aviso {
    padding: 1rem 1.15rem;
    border-radius: var(--kabe-radio);
    border: 1px solid var(--kabe-borde);
    margin-bottom: 1.25rem;
}
.kabe-portada__aviso p { margin: .25rem 0 0; }
.kabe-portada__aviso--bien { background: var(--kabe-exito-suave);   border-color: var(--kabe-exito); }
.kabe-portada__aviso--mal  { background: var(--kabe-peligro-suave); border-color: var(--kabe-peligro); }

/* El enlace de contacto en la barra, marcado.
   Es el único de la barra que no lleva a una sección informativa sino a hacer
   algo, y si se ve igual que los otros cuatro se pierde entre ellos. Sin llegar
   a botón: la barra tiene ya el de «Entrar» y dos botones compiten. */
.kabe-portada__nav--fuerte {
    color: var(--kabe-acento);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESCAPARATE DE APLICACIONES (05/10/2026)
   ═══════════════════════════════════════════════════════════════════════════
   La cabecera reproduce los vídeos de las aplicaciones (`promo/<código>/`) y la
   sección «Aplicaciones» sale de la base: todas las publicadas, filtrables por
   área y con su vídeo en un visor. Cada cosa lleva el **color de su área**
   (`data-area` → `--area-fuerte`… de `kabe-tokens.css`), el mismo que su icono
   en la Suite. Solo tokens: funciona en claro y en oscuro. */

.kabe-portada__pantalla,
.kabe-portada__app,
.kabe-portada__visor,
.kabe-portada__filtro,
.kabe-portada__pestana {
    --color-app: var(--area-fuerte, var(--kabe-acento));
    --halo-app: color-mix(in srgb, var(--color-app) 30%, transparent);
    --tenue-app: color-mix(in srgb, var(--color-app) 11%, transparent);
}

/* ── La pantalla de la cabecera ──────────────────────────────────────────── */
.kabe-portada__pantalla { display: flex; flex-direction: column; gap: .9rem; animation: kp-aparece .9s .2s cubic-bezier(.2,.8,.2,1) both; }

@keyframes kp-aparece {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.kabe-portada__pantalla__marco {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    /* Del color del fondo del vídeo, no oscuro: si el vídeo no llena el
       recuadro al píxel, o mientras carga, no asoma un marco negro. */
    background: var(--kabe-fondo);
    border: 1px solid var(--kabe-borde);
    /* El halo cambia de color con la aplicación que se está viendo. */
    box-shadow: 0 34px 80px -24px var(--halo-app), 0 14px 34px color-mix(in srgb, var(--kabe-velo) 36%, transparent);
    transition: box-shadow .6s ease;
    transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
}

.kabe-portada__pantalla__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.kabe-portada__pestanas { display: flex; flex-wrap: wrap; gap: .45rem; }

.kabe-portada__pestana {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .8rem; border-radius: 999px;
    border: 1px solid var(--kabe-borde); background: var(--kabe-superficie);
    color: var(--kabe-texto); font: inherit; font-size: .85rem; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s, transform .2s;
}

.kabe-portada__pestana i { color: var(--color-app); }
.kabe-portada__pestana:hover { border-color: var(--color-app); transform: translateY(-1px); color: var(--kabe-texto); text-decoration: none; }
.kabe-portada__pestana[aria-selected="true"] { background: var(--tenue-app); border-color: var(--color-app); }
.kabe-portada__pestana--todas { color: var(--kabe-texto-suave); }

/* ── Filtros por área ────────────────────────────────────────────────────── */
.kabe-portada__filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 2rem; }

.kabe-portada__filtro {
    padding: .45rem 1rem; border-radius: 999px;
    border: 1px solid var(--kabe-borde); background: var(--kabe-superficie);
    color: var(--kabe-texto); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.kabe-portada__filtro[data-area] { color: var(--area-hondo, var(--kabe-texto)); }
.kabe-portada__filtro:hover { border-color: var(--color-app); }
.kabe-portada__filtro[aria-pressed="true"] { background: var(--area-hondo, var(--kabe-acento)); border-color: transparent; color: var(--kabe-texto-invertido); }

/* ── El catálogo ─────────────────────────────────────────────────────────── */
.kabe-portada__catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1.1rem; }

.kabe-portada__app {
    position: relative;
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1.4rem 1.4rem 1.25rem;
    border-radius: 20px;
    border: 1px solid var(--kabe-borde);
    background: var(--kabe-superficie);
    box-shadow: var(--kabe-sombra);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kabe-portada__app[hidden] { display: none; }
.kabe-portada__app:hover { transform: translateY(-5px); border-color: var(--color-app); box-shadow: 0 22px 44px -18px var(--halo-app); }

.kabe-portada__app__cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .2rem; }

/* **El logo nuevo, el del lanzador** (`.kabe-tile__icon[data-area]` en
   `launcher-odoo.css`): cuadro blanco con borde fino y el glifo en el tono de su
   área. Antes era un degradado del área con el glifo en blanco. */
.kabe-portada__app__icono {
    width: 52px; height: 52px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 23px; color: var(--color-app);
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    transition: border-color .25s;
}
.kabe-portada__app:hover .kabe-portada__app__icono { border-color: var(--color-app); }
/* En oscuro el tono fuerte se apaga sobre la superficie oscura: el claro, como en el lanzador. */
:root[data-tema="oscuro"] .kabe-portada__app__icono { color: var(--area-claro, var(--color-app)); }
@media (prefers-color-scheme: dark) {
    :root[data-tema="sistema"] .kabe-portada__app__icono { color: var(--area-claro, var(--color-app)); }
}

.kabe-portada__app__area {
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--area-hondo, var(--kabe-texto-suave)); background: var(--tenue-app);
    padding: .25rem .6rem; border-radius: 999px;
}

.kabe-portada__app h3 { margin: 0; font-size: 1.15rem; font-weight: 900; color: var(--kabe-texto); }
.kabe-portada__app__lema { margin: 0; color: var(--kabe-texto-suave); line-height: 1.45; }
.kabe-portada__app ul { list-style: none; margin: .2rem 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--kabe-texto); }
.kabe-portada__app li { display: flex; gap: .5rem; align-items: baseline; }
.kabe-portada__app li i { color: var(--color-app); font-size: .8rem; }

.kabe-portada__app__video {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .35rem .95rem .35rem .35rem; border-radius: 999px;
    border: 1px solid var(--kabe-borde-fuerte); background: var(--kabe-superficie);
    color: var(--kabe-texto); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer;
    transition: border-color .2s, transform .2s;
}
.kabe-portada__app__video:hover { border-color: var(--color-app); transform: translateY(-1px); }
.kabe-portada__app__play {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--area-hondo, var(--kabe-acento)); color: var(--kabe-texto-invertido); font-size: .75rem;
}

/* «Tu aplicación a medida»: **a toda la fila y destacada.** Antes era una
   tarjeta más, gris y con el borde a rayas, y pasaba por la última del montón.
   Ahora cierra el catálogo con el acento de la Suite: degradado suave, borde
   entero y halo. Sin `data-area`, `--color-app` es el acento. */
.kabe-portada__app--medida {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-top: .6rem;
    padding: 2rem 2.25rem;
    border: 1px solid color-mix(in srgb, var(--color-app) 40%, var(--kabe-borde));
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-app) 16%, transparent), transparent 55%),
        linear-gradient(120deg, color-mix(in srgb, var(--color-app) 9%, var(--kabe-superficie)), var(--kabe-superficie) 65%);
    box-shadow: 0 26px 56px -26px var(--halo-app), var(--kabe-sombra);
}
.kabe-portada__app--medida .kabe-portada__app__icono {
    width: 68px; height: 68px; border-radius: 18px; font-size: 30px;
    border-color: color-mix(in srgb, var(--color-app) 35%, var(--kabe-borde));
}
.kabe-portada__app--medida h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.kabe-portada__medida__texto { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.kabe-portada__medida__texto .kabe-portada__app__lema { font-size: 1.02rem; max-width: 46rem; }
.kabe-portada__app--medida .kabe-portada__btn { white-space: nowrap; }
@media (max-width: 46rem) {
    .kabe-portada__app--medida { grid-template-columns: 1fr; justify-items: start; padding: 1.6rem; }
}

/* ── El visor ────────────────────────────────────────────────────────────── */
.kabe-portada__visor {
    /* **Que quepa entero en la ventana.** A 1180 px el vídeo solo ya mide unos
       660 de alto; con la cabecera y el pie, en un portátil se pasaba de la
       pantalla, el navegador lo recortaba por abajo y los botones quedaban
       pegados al borde. El tercer término limita el ancho a lo que deja el alto:
       la ventana menos lo que no es vídeo, pasado a 16:9, más los márgenes de
       los lados. Lo que no es vídeo son unos 15rem: la cabecera (~4,7), el pie
       (~5,8), el aire entre ellos y el vídeo, y los ~2,4 que el navegador deja
       alrededor de un `<dialog>`. Con 11rem, la primera vez, aún se pasaba.
       Y si con todo no cupiera (una ventana muy baja), se desplaza en vez de
       recortarse: `overflow-y: auto` y su `max-height`. */
    width: min(1180px, 94vw, calc((100vh - 15rem) * 16 / 9 + 2.4rem));
    max-width: none; max-height: calc(100vh - 2rem);
    padding: 0; border: 0; border-radius: 22px;
    background: var(--kabe-superficie); color: var(--kabe-texto);
    box-shadow: 0 40px 120px -20px var(--halo-app), 0 20px 50px color-mix(in srgb, var(--kabe-velo) 78%, transparent);
    overflow-x: hidden; overflow-y: auto;
}
.kabe-portada__visor[open] { animation: kp-aparece .45s cubic-bezier(.2,.8,.2,1); }
/* El velo del tema, dos veces: una capa de --kabe-velo (.45 en claro) sobre otra
   da .70, lo que pedía el diseño (.72), y en oscuro sigue al velo oscuro. */
.kabe-portada__visor::backdrop { background: linear-gradient(var(--kabe-velo), var(--kabe-velo)), var(--kabe-velo); backdrop-filter: blur(4px); }

.kabe-portada__visor__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; }
.kabe-portada__visor__cab strong { display: block; font-size: 1.15rem; font-weight: 900; }
.kabe-portada__visor__cab span { color: var(--kabe-texto-suave); font-size: .92rem; }
.kabe-portada__visor__botones { display: flex; gap: .5rem; flex: none; }
.kabe-portada__visor__boton {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px;
    border: 1px solid var(--kabe-borde-fuerte); background: var(--kabe-superficie); color: var(--kabe-texto);
    font: inherit; font-weight: 700; cursor: pointer;
}
.kabe-portada__visor__boton:hover { border-color: var(--color-app); }

/* **El vídeo, con los mismos márgenes que la cabecera y el pie.** De borde a
   borde, los botones de abajo (con su relleno) no quedaban alineados con nada;
   ahora acaban justo donde acaba el vídeo. */
.kabe-portada__visor__marco { position: relative; aspect-ratio: 16 / 9; margin: 0 1.2rem; border-radius: 14px; overflow: hidden; background: var(--kabe-fondo); }
.kabe-portada__visor__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kabe-portada__visor__marco:fullscreen { aspect-ratio: auto; margin: 0; border-radius: 0; }

.kabe-portada__visor__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: flex-end; padding: 1.1rem 1.2rem 1.4rem; }

/* El número de aplicaciones de cada categoría. */
.kabe-portada__filtro__n {
    display: inline-block; min-width: 1.5em; margin-left: .35rem; padding: 0 .4rem;
    border-radius: 999px; font-size: .78rem; font-weight: 800; text-align: center;
    background: var(--tenue-app); color: inherit;
}
.kabe-portada__filtro[aria-pressed="true"] .kabe-portada__filtro__n { background: color-mix(in srgb, var(--kabe-texto-invertido) 22%, transparent); }

/* «Todas» no tiene área: va con el acento de la Suite. */
.kabe-portada__filtro:not([data-area])[aria-pressed="true"] { background: var(--kabe-acento); color: var(--kabe-acento-contraste); }

/* **En oscuro, el tono claro del área** para textos: el hondo de ventas, BI o
   documental sobre negro no se lee. Igual que las pastillas del lanzador. */
:root[data-tema="oscuro"] .kabe-portada__filtro[data-area]:not([aria-pressed="true"]),
:root[data-tema="oscuro"] .kabe-portada__app__area { color: var(--area-claro); }
:root[data-tema="oscuro"] .kabe-portada__filtro[data-area][aria-pressed="true"] { background: var(--area-claro); color: var(--kabe-acento-contraste); }
@media (prefers-color-scheme: dark) {
    :root[data-tema="sistema"] .kabe-portada__filtro[data-area]:not([aria-pressed="true"]),
    :root[data-tema="sistema"] .kabe-portada__app__area { color: var(--area-claro); }
    :root[data-tema="sistema"] .kabe-portada__filtro[data-area][aria-pressed="true"] { background: var(--area-claro); color: var(--kabe-acento-contraste); }
}

/* ── Entradas al bajar ───────────────────────────────────────────────────── */
.kabe-portada-entra { opacity: 0; transform: translateY(26px); }
.kabe-portada-entra--ya {
    opacity: 1; transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
    transition-delay: calc(min(var(--orden, 0), 8) * 60ms);
}
.kabe-portada__app.kabe-portada-entra--ya:hover { transform: translateY(-5px); }

@media (max-width: 62rem) {
    .kabe-portada__pantalla__marco { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .kabe-portada__pantalla, .kabe-portada__visor[open] { animation: none; }
    .kabe-portada__pantalla__marco { transform: none; }
    .kabe-portada__app, .kabe-portada__app__video, .kabe-portada__pestana { transition: none; }
}