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

.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: baseline;
    justify-content: space-between;
    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); }
.tipo-plan__total { color: var(--texto-tenue); font-size: .875rem; font-weight: 400; }

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