/* 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: 0 1px 2px 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 {
    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);
}

.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;
}

/* — 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;
}