/*
 * bloques/panel-pestanas/estilos.css
 * Los colores salen inline del template. Aquí, maquetación y tipografía.
 */

.bl-panel-pestanas { padding: var(--bl-aire) 0; }

.bl-panel-pestanas .bl-pp-antetitulo {
    text-align: center;
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bl-panel-pestanas .bl-pp-titulo {
    text-align: center;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 26px;
    text-wrap: balance;
}

/* ── Pestañas ─────────────────────────────────────────────────────────── */
.bl-panel-pestanas .bl-pp-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto clamp(32px, 3.5vw, 56px);
    padding: 5px;
    border-radius: 999px;
}

.bl-panel-pestanas .bl-pp-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 9px 20px;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    color: inherit;
    opacity: .65;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}

.bl-panel-pestanas .bl-pp-tab:hover { opacity: 1; }

.bl-panel-pestanas .bl-pp-tab[aria-selected="true"] {
    background: #fff;
    opacity: 1;
    font-weight: 600;
}

.bl-panel-pestanas .bl-pp-tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Paneles ──────────────────────────────────────────────────────────── */
/*
 * Sin JS se ven todos los paneles seguidos: el ocultado solo se aplica
 * cuando script.js ha marcado el contenedor. Degradar a "todo visible" es
 * preferible a degradar a "nada visible".
 */
.bl-panel-pestanas .bl-pp-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.bl-panel-pestanas .bl-pp-panel + .bl-pp-panel { margin-top: 56px; }

.bl-panel-pestanas .js-listo .bl-pp-panel { display: none; margin-top: 0; }
.bl-panel-pestanas .js-listo .bl-pp-panel.es-activo { display: grid; }

.bl-panel-pestanas .bl-pp-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.bl-panel-pestanas .bl-pp-media-vacia {
    aspect-ratio: 4 / 3;
    border: 1px dashed currentColor;
    border-radius: 18px;
    opacity: .25;
}

.bl-panel-pestanas .bl-pp-panel-antetitulo {
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bl-panel-pestanas .bl-pp-panel-titulo {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 16px;
    text-wrap: balance;
}

.bl-panel-pestanas .bl-pp-panel-texto p { margin: 0 0 1em; line-height: 1.55; }
.bl-panel-pestanas .bl-pp-panel-texto p:last-child { margin-bottom: 0; }

.bl-panel-pestanas .bl-pp-etiquetas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
}

.bl-panel-pestanas .bl-pp-etiquetas li {
    padding: 9px 18px;
    background: var(--bl-pp-etiqueta-fondo, #fff);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    font-size: 14px;
}

.bl-panel-pestanas .bl-pp-nota {
    margin: 22px 0 0;
    padding-left: 14px;
    border-left: 2px solid;
    font-size: 14px;
    font-style: italic;
    opacity: .75;
}

@media (max-width: 860px) {
    .bl-panel-pestanas .bl-pp-panel { grid-template-columns: 1fr; gap: 28px; }
    /* En una columna la imagen va siempre arriba, mande lo que mande el campo. */
    .bl-panel-pestanas .bl-pp-media { order: 0 !important; }
    .bl-panel-pestanas .bl-pp-titulo,
    .bl-panel-pestanas .bl-pp-panel-titulo { font-size: 24px; }
    .bl-panel-pestanas .bl-pp-nav { margin-bottom: 28px; }
}