/* =====================================================================
   PORTADA (index.php) y páginas de presentación (trabaja-con-nosotros.php,
   eventos-empresa.php).
   ===================================================================== */

.principal:has(.portada-hero:first-child) { padding-top: 0; }

/* ----- Cabecera grande ----- */
.portada-hero { padding-block: clamp(56px, 12vw, 128px) clamp(40px, 6vw, 72px); }
/* El H1 lleva la búsqueda de compra entera ('sitio.eslogan', ~55 caracteres):
   ancho y tamaño para que quede en 2-3 líneas y el buscador siga a la vista. */
.portada-hero h1 {
    max-width: 22ch;
    margin-bottom: 20px;
    font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
    letter-spacing: -0.035em;
}
.portada-hero__texto { max-width: 56ch; color: var(--texto-suave); font-size: 1.125rem; }
.portada-hero--compacto { padding-block: 24px 40px; }
.portada-hero--compacto h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); }

/* ----- Rayos de neón (rayosPortada(), tema Halloween) -----
   Detrás del texto de la cabecera, uno a cada lado. Apagados se ven tenues,
   como un neón sin luz; cada 8 s se encienden con un doble destello y se
   apagan. Nada se mueve: solo cambia la opacidad de cada <svg>, que va en el
   compositor (el resplandor no se repinta), y nunca hay más de 2 destellos
   por segundo (WCAG 2.3.1). Con «reducir movimiento», quietos y apagados. */
.portada-hero { position: relative; isolation: isolate; }
.rayos {
    --rayo-tubo: #7c9cff;
    --rayo-nucleo: #f2f5ff;
    --rayo-halo: #8b5cf6;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.rayo {
    position: absolute;
    top: 0;
    overflow: visible;
    opacity: .16;
    filter: drop-shadow(0 0 3px var(--rayo-tubo)) drop-shadow(0 0 14px var(--rayo-halo));
}
.rayo path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* El grosor va por clase de nivel; las líneas que se afilan (el de la
   derecha) lo llevan por tramo en stroke-width, que una regla sin nivel
   pisaría. */
.rayo__tubo { stroke: var(--rayo-tubo); }
.rayo__tubo--tronco { stroke-width: 4; }
.rayo__tubo--rama { stroke-width: 2.5; }
.rayo__tubo--ramita { stroke-width: 1.1; }
.rayo__nucleo { stroke: var(--rayo-nucleo); }
.rayo__nucleo--tronco { stroke-width: 1.5; }
.rayo__nucleo--rama { stroke-width: 1; }
.rayo__nucleo--ramita { stroke-width: .5; }
/* El de la izquierda, como la imagen que mandó el dueño: cian. */
.rayo--izquierda { --rayo-tubo: #5ec8ff; --rayo-nucleo: #f0fbff; --rayo-halo: #1f7bff; }
/* Hasta 1023 px solo el de la derecha, pequeño y subido (sale de detrás de la
   cabecera), en la esquina encima de la primera línea del título (a 768 px
   uno más grande le pasaba por detrás, y a 430 px este sin subir). Desde
   1024 px, más grande, a la derecha del título; desde 1180 px, como en el
   dibujo del dueño, en el hueco a la derecha del título (max(): nunca se
   corta por arriba). El de la izquierda es vertical y va en el margen, con su
   borde derecho 8 px antes del contenido (cuyo borde es 50% − 536 px): sale
   desde 1360 px, cuando el margen ya le deja enseñar el tronco, y crece con él
   de 150 a 280 px de ancho. Va inclinado (dueño): girado desde abajo, la punta
   de arriba hacia la esquina, como el reflejo del de la derecha; subido para
   que siga saliendo de detrás de la cabecera. Al girarlo, la punta se va un
   20 % de su alto a la izquierda: a 1366 px, con 200 px de ancho, el tronco
   quedaba fuera de la pantalla. */
.rayo--izquierda { display: none; }
.rayo--derecha { top: -28px; right: 0; width: 180px; height: 125px; }
@media (min-width: 1024px) {
    .rayo--derecha { top: 0; width: 340px; height: 236px; }
}
@media (min-width: 1180px) {
    .rayo--derecha { right: max(calc(50% - 696px), 0px); width: 460px; height: 320px; }
}
@media (min-width: 1360px) {
    .rayo--izquierda {
        display: block;
        top: -24px;
        right: calc(50% + 544px);
        width: clamp(150px, 50% - 552px, 280px);
        aspect-ratio: 240 / 460;
        transform: rotate(-12deg);
        transform-origin: 50% 100%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .rayo { animation: rayo-neon 8s steps(1, end) 1.5s infinite; }
    .rayo--derecha { animation-delay: 5.5s; }
}
@keyframes rayo-neon {
    0%, 7%, 100% { opacity: .16; }
    0.8% { opacity: 1; }
    1.6% { opacity: .35; }
    2.6%, 5.5% { opacity: 1; animation-timing-function: ease-out; }
}

.portada-buscador {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 640px;
    margin-top: 28px;
    padding: 8px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    box-shadow: 0 20px 60px color-mix(in srgb, var(--acento) 10%, transparent);
}
.portada-buscador input,
.portada-buscador select {
    padding: 10px 12px;
    background: transparent;
    border: 0;
    color: var(--texto);
    font: inherit;
}
.portada-buscador input { flex: 1 1 220px; min-width: 0; }
.portada-buscador select { flex: 0 1 auto; color: var(--texto-suave); }
.portada-buscador select option { background: var(--fondo-elevado); }
.portada-buscador .boton { flex: 0 0 auto; }

/* ----- Bloques ----- */
.bloque-portada {
    margin-top: clamp(48px, 8vw, 88px);
    /* Las secciones de más abajo no se pintan hasta que se acercan al scroll. */
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}
.bloque-portada > h2 { margin-bottom: 20px; }
/* Con un texto resaltado desde el panel (?ver=) se pinta ya: base.css. */

.rejilla-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tipo-plan {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transicion), transform var(--transicion);
}
.tipo-plan:hover { border-color: var(--acento); color: var(--texto); transform: translateY(-2px); }
/* El icono de cada tipo (iconoSvg('tipo-…')), del color del tema. */
.icono-tipo { flex: none; width: 28px; height: 28px; color: var(--acento); }
.tipo-plan__nombre { flex: 1; }

.destacado-ruleta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    padding: clamp(24px, 4vw, 40px);
    background:
        radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 60%),
        var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.destacado-ruleta h2 { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.destacado-ruleta p:last-child { margin: 0; }

.acerca { max-width: 720px; }
.acerca p { color: var(--texto-suave); }

.rejilla-ventajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.rejilla-ventajas .ventaja__titulo { margin-bottom: 8px; color: var(--texto); font-size: 1.0625rem; letter-spacing: -0.01em; text-transform: none; }