/* Publicidades (banners del carrusel de la página principal). Se usa en el sitio y en la vista previa del
   backoffice: no depende de sitio.css (cada color tiene su valor de respaldo). */
.banner {
    --banner-verde: var(--verde, #053d31);
    --banner-verde-claro: var(--verde-claro, #0a5c4a);
    --banner-amarillo: var(--amarillo, #f4c025);
    --banner-amarillo-oscuro: var(--amarillo-oscuro, #d9a80c);
    box-shadow: var(--sombra-cuadro, 0 4px 14px rgba(5, 61, 49, .12), 0 1px 3px rgba(5, 61, 49, .08));
    width: 100%; border-radius: var(--radio, 12px); overflow: hidden;
}

/* ---- Plantilla: título, texto y botón con los colores de la marca, imagen lateral opcional ---- */
.banner-plantilla {
    min-height: 220px; padding: 2rem 2.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.banner-contenido { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-width: 0; }
.banner-plantilla h2 { margin: 0; font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.2; overflow-wrap: anywhere; }
.banner-plantilla p { margin: 0 0 .75rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.banner-boton {
    display: inline-block; padding: .65rem 1.3rem; border-radius: 999px; border: 0;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    background: var(--banner-amarillo); color: var(--banner-verde);
}
.banner-boton:hover { background: var(--banner-amarillo-oscuro); }
.banner-lateral { flex: 0 1 40%; display: flex; justify-content: flex-end; }
.banner-lateral img { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; }

.banner-verde { background: linear-gradient(120deg, var(--banner-verde), var(--banner-verde-claro)); color: #fff; }
.banner-amarillo { background: linear-gradient(120deg, var(--banner-amarillo), #f8d466); color: var(--banner-verde); }
.banner-amarillo .banner-boton { background: var(--banner-verde); color: #fff; }
.banner-amarillo .banner-boton:hover { background: var(--banner-verde-claro); }
.banner-oscuro { background: linear-gradient(120deg, #10231e, var(--banner-verde)); color: #fff; }

/* ---- Imagen: diseñada afuera (3:1 en la computadora, 1:1 opcional en el celular) ---- */
.banner-imagen { display: block; line-height: 0; }
.banner-imagen img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
a.banner-imagen:focus-visible { outline: 3px solid var(--banner-amarillo); outline-offset: 2px; }

/* Celular (también la vista previa "celular" del backoffice, con la clase banner-celular). */
@media (max-width: 560px) {
    .banner-plantilla { padding: 1.5rem; min-height: 200px; flex-direction: column; align-items: flex-start; }
    .banner-lateral { flex: none; align-self: center; }
    .banner-lateral img { max-height: 160px; }
    .banner-imagen.con-celular img { aspect-ratio: 1 / 1; }
}
.banner-celular .banner-plantilla { padding: 1.5rem; min-height: 200px; flex-direction: column; align-items: flex-start; }
.banner-celular .banner-lateral { flex: none; align-self: center; }
.banner-celular .banner-lateral img { max-height: 160px; }
.banner-celular .banner-imagen.con-celular img { aspect-ratio: 1 / 1; }