/* Componente webinar-cabecera (webinar, v2 #61). Solo tokens de style.css.
 * claro (por defecto): fondo de página aireado con los anillos del ERP detrás
 * del panel del evento · suave: fondo verdoso · tinta: banda petróleo
 * (data-pf-theme="dark": dentro, los tokens del oscuro).
 * Estrecho: insignia, titular y el panel (hoja de calendario con hora y lugar,
 * «faltan N días» y botón), todo a la vista sin desplazarse a 360px. Ancho:
 * titular a la izquierda y el panel a la derecha, sobre los anillos.
 * Movimiento (solo sin movimiento reducido): palabras del titular y hoja del
 * calendario con CSS, sin esperar al JS; los anillos, con el motor de core. */

.pf-webinar-cabecera {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    padding-block: var(--pf-space-sm) var(--pf-space-xl);
    color: var(--pf-color-text);
    background-color: var(--pf-color-bg);
}

.pf-webinar-cabecera--suave {
    background-color: var(--pf-color-bg-alt);
}

.pf-webinar-cabecera--tinta {
    background-color: var(--pf-color-bg-ink);
}

/* Anillos: decorativos, detrás, centrados bajo el panel del evento. */
.pf-webinar-cabecera__fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.pf-webinar-cabecera__fondo .pf-ilustracion {
    position: absolute;
    top: 78%;
    left: 82%;
    width: min(48rem, 180%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.pf-webinar-cabecera__interior {
    display: grid;
    gap: var(--pf-space-md) var(--pf-space-2xl);
}

.pf-webinar-cabecera__texto {
    min-width: 0;
    container-type: inline-size;
}

.pf-webinar-cabecera__etiqueta {
    margin: 0 0 var(--pf-space-xs);
    line-height: 0;
}

.pf-webinar-cabecera__titulo {
    max-width: 22ch;
    margin: 0;
    /* Un titular de resultado es largo (10-15 palabras): que quepa en su
     * columna sin pasar del tamaño de un titular de sección grande. */
    font-size: var(--pf-text-3xl);
    font-size: min(var(--pf-text-3xl), 8.5cqi);
    font-weight: var(--pf-weight-black);
    line-height: var(--pf-leading-tight);
    letter-spacing: -0.01em;
    color: var(--pf-color-heading);
}

.pf-webinar-cabecera__palabra {
    display: inline-block;
}

/* Panel del evento: nodo blanco con sombra suave, como en el ERP. */
.pf-webinar-cabecera__evento {
    display: grid;
    gap: var(--pf-space-sm);
    min-width: 0;
    padding: var(--pf-space-sm);
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-xl);
    box-shadow: var(--pf-shadow-lg);
}

.pf-webinar-cabecera__cuando {
    display: flex;
    align-items: center;
    gap: var(--pf-space-sm);
}

/* Hoja de calendario: mes en la franja verde, el día grande y el día de la
 * semana. Ancho mínimo, no fijo, y sin recortar: con el espaciado de texto de
 * 1.4.12, «miércoles» ensancha la hoja en lugar de cortarse. */
.pf-webinar-cabecera__hoja {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    min-width: 4.75rem;
    text-align: center;
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-lg);
    box-shadow: var(--pf-shadow-md);
}

.pf-webinar-cabecera__mes {
    align-self: stretch;
    padding: 0.125rem 0;
    font-family: var(--pf-font-mono);
    font-size: var(--pf-text-sm);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    letter-spacing: var(--pf-tracking-caps);
    text-transform: uppercase;
    color: var(--pf-color-on-accent);
    background-color: var(--pf-color-accent);
    /* La hoja no recorta: la franja lleva las esquinas de arriba (radio menos el borde). */
    border-radius: calc(var(--pf-radius-lg) - 1px) calc(var(--pf-radius-lg) - 1px) 0 0;
}

.pf-webinar-cabecera__dia {
    padding-top: var(--pf-space-3xs);
    font-size: 2.25rem;
    font-weight: var(--pf-weight-black);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--pf-color-heading);
}

.pf-webinar-cabecera__semana {
    padding: 0.125rem var(--pf-space-3xs) var(--pf-space-2xs);
    font-size: var(--pf-text-xs);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text-muted);
}

.pf-webinar-cabecera__fecha {
    margin: 0;
    font-size: var(--pf-text-lg);
    font-weight: var(--pf-weight-bold);
    color: var(--pf-color-heading);
}

.pf-webinar-cabecera__datos {
    display: grid;
    gap: var(--pf-space-2xs);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-webinar-cabecera__dato {
    display: flex;
    align-items: flex-start;
    gap: var(--pf-space-2xs);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text-soft);
}

.pf-webinar-cabecera__dato .pf-icono {
    flex: none;
    margin-top: 0.125rem;
    color: var(--pf-color-brand-strong);
}

.pf-webinar-cabecera__horario {
    display: block;
    font-size: var(--pf-text-lg);
    font-weight: var(--pf-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--pf-color-heading);
}

.pf-webinar-cabecera__zona {
    display: block;
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

.pf-webinar-cabecera__faltan {
    margin: 0;
    line-height: 0;
}

.pf-webinar-cabecera__accion .pf-boton {
    width: 100%;
}

.pf-webinar-cabecera__aviso {
    margin: 0;
    padding-left: var(--pf-space-sm);
    font-size: var(--pf-text-md);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-heading);
    border-left: 3px solid var(--pf-color-warning);
}

@media (min-width: 768px) {
    .pf-webinar-cabecera {
        padding-block: var(--pf-space-xl) var(--pf-space-2xl);
    }

    .pf-webinar-cabecera__evento {
        gap: var(--pf-space-md);
        padding: var(--pf-space-md);
    }

    .pf-webinar-cabecera__cuando {
        gap: var(--pf-space-md);
    }

    .pf-webinar-cabecera__hoja {
        min-width: 6rem;
    }

    .pf-webinar-cabecera__dia {
        font-size: 3rem;
    }
}

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

    .pf-webinar-cabecera__interior {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
        align-items: center;
    }

    .pf-webinar-cabecera__fondo .pf-ilustracion {
        top: 50%;
        left: 78%;
        width: min(64rem, 90%);
    }
}

/* Entradas con CSS: empiezan con el primer pintado (no esperan a GSAP) y
 * duran menos de 1,5 s. Con movimiento reducido no hay ninguna. */
@media (prefers-reduced-motion: no-preference) {
    .pf-webinar-cabecera__palabra {
        animation: pf-webinar-cabecera-palabra 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
        animation-delay: calc(var(--pf-webinar-palabra, 0) * 45ms);
    }

    .pf-webinar-cabecera__palabra:nth-child(2) { --pf-webinar-palabra: 1; }
    .pf-webinar-cabecera__palabra:nth-child(3) { --pf-webinar-palabra: 2; }
    .pf-webinar-cabecera__palabra:nth-child(4) { --pf-webinar-palabra: 3; }
    .pf-webinar-cabecera__palabra:nth-child(5) { --pf-webinar-palabra: 4; }
    .pf-webinar-cabecera__palabra:nth-child(6) { --pf-webinar-palabra: 5; }
    .pf-webinar-cabecera__palabra:nth-child(7) { --pf-webinar-palabra: 6; }
    .pf-webinar-cabecera__palabra:nth-child(8) { --pf-webinar-palabra: 7; }
    .pf-webinar-cabecera__palabra:nth-child(9) { --pf-webinar-palabra: 8; }
    .pf-webinar-cabecera__palabra:nth-child(10) { --pf-webinar-palabra: 9; }
    .pf-webinar-cabecera__palabra:nth-child(11) { --pf-webinar-palabra: 10; }
    .pf-webinar-cabecera__palabra:nth-child(12) { --pf-webinar-palabra: 11; }
    .pf-webinar-cabecera__palabra:nth-child(13) { --pf-webinar-palabra: 12; }
    .pf-webinar-cabecera__palabra:nth-child(14) { --pf-webinar-palabra: 13; }
    .pf-webinar-cabecera__palabra:nth-child(15) { --pf-webinar-palabra: 14; }
    .pf-webinar-cabecera__palabra:nth-child(n + 16) { --pf-webinar-palabra: 15; }

    .pf-webinar-cabecera__hoja {
        animation: pf-webinar-cabecera-hoja 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.45s both;
    }
}

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

@keyframes pf-webinar-cabecera-hoja {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.86);
    }
}