/* Componente home-portada (paginas, #57): cabecera del inicio. Solo tokens.
 * Fondo claro aireado, como el ERP: anillos a la derecha y dos hojas del
 * isotipo detrás; texto a la izquierda y tres mini interfaces a la derecha
 * (debajo en estrecho). El titular entra por palabras con CSS (DEC-014):
 * solo con JS disponible y sin movimiento reducido; si no, quieto y entero. */

.pf-portada {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    padding-block: var(--pf-space-xl) calc(var(--pf-space-section) + var(--pf-space-lg));
    background-color: var(--pf-color-bg);
}

/* Fondo decorativo */
.pf-portada__fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.pf-portada__anillos {
    position: absolute;
    top: 50%;
    left: 72%;
    width: min(64rem, 150%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.pf-portada__hoja {
    position: absolute;
    width: 7rem;
}

.pf-portada__hoja--1 {
    top: 8%;
    left: 52%;
    width: 5.5rem;
    rotate: -18deg;
}

.pf-portada__hoja--2 {
    right: 4%;
    bottom: 6%;
    width: 8.5rem;
    rotate: 140deg;
}

/* Texto y visual */
.pf-portada__rejilla {
    display: grid;
    gap: var(--pf-space-xl);
    align-items: center;
}

.pf-portada__texto {
    max-width: 38rem;
}

.pf-portada__titulo {
    margin: 0 0 var(--pf-space-md);
    font-size: var(--pf-text-4xl);
    line-height: var(--pf-leading-tight);
}

.pf-portada__palabra {
    display: inline-block;
}

.pf-portada__entradilla {
    margin: 0 0 var(--pf-space-lg);
    max-width: var(--pf-measure);
    font-size: var(--pf-text-lg);
    color: var(--pf-color-text-soft);
}

.pf-portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-sm);
}

/* Composición de mini interfaces: la tabla detrás y dos tarjetas delante. */
.pf-portada__visual {
    position: relative;
    width: min(100%, 34rem);
    aspect-ratio: 5 / 4;
    margin-inline: auto;
}

.pf-portada__pieza {
    position: absolute;
}

.pf-portada__pieza--tabla {
    top: 14%;
    left: 4%;
    width: 84%;
}

.pf-portada__pieza--ejecucion {
    top: 0;
    right: 0;
    width: 46%;
}

.pf-portada__pieza--gasto {
    bottom: 0;
    left: 0;
    width: 54%;
}

.pf-portada__pausa {
    position: absolute;
    right: var(--pf-gutter);
    bottom: var(--pf-space-md);
}

@media (min-width: 1025px) {
    .pf-portada {
        padding-block: var(--pf-space-2xl) var(--pf-space-section);
    }

    .pf-portada__rejilla {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--pf-space-2xl);
    }

    .pf-portada__visual {
        width: 100%;
    }

    .pf-portada__pausa {
        right: max(var(--pf-gutter), calc((100% - var(--pf-container)) / 2));
    }
}

/* Titular por palabras: arranca al pintar, sin esperar al JS (LCP). */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .pf-portada__palabra {
        animation: pf-portada-palabra 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-delay: calc(var(--pf-i, 0) * 70ms + 60ms);
    }
}

@keyframes pf-portada-palabra {
    from {
        opacity: 0;
        transform: translateY(0.45em);
    }
}

@media print {
    .pf-portada__fondo,
    .pf-portada__pausa {
        display: none;
    }
}