/**
 * Archivo: assets/css/destacados-banner.css
 * Módulo: shop-core — banner de "destacados" (descuentos, eventos...)
 * de la portada. Vive DENTRO de .sc-hero-left (templates/inicio/inicio.php),
 * justo encima del texto de apertura — Javier señaló la posición exacta
 * con una captura de pantalla (26 agosto 2026): una tarjeta compacta
 * dentro de la columna del hero, no una franja a todo el ancho de la
 * pantalla (primer intento, revisado el mismo día tras ver la captura).
 *
 * Los destacados activos se apilan unos sobre otros dentro de la
 * tarjeta (solo el marcado ".sc-banner-destacado-activo" es visible) y
 * destacados-banner.js alternando esa clase cada pocos segundos cuando
 * hay más de uno — con uno solo, este CSS ya basta (siempre visible,
 * sin que haga falta JS en absoluto).
 *
 * Carga SIEMPRE en la portada, haya o no destacados vigentes (ver
 * includes/destacados/assets-destacados.php) — el hueco se reserva
 * incluso sin ninguno, así que este archivo hace falta siempre que se
 * pinta la portada. El resto del sitio nunca lo descarga.
 *
 * Espacio fijo (26 agosto 2026, a petición de Javier): la tarjeta tiene
 * una ALTURA fija (no `min-height`) para que el tamaño del hueco nunca
 * dependa de cuánto texto tenga el destacado que esté visible en cada
 * momento — un texto corto y uno largo ocupan exactamente el mismo
 * espacio, centrado dentro de esa altura fija; un texto que no quepa se
 * recorta con puntos suspensivos (line-clamp) en vez de estirar la
 * tarjeta.
 *
 * Hueco reservado SIEMPRE, incluso sin destacados (26 agosto 2026, a
 * petición de Javier: "aunque no haya destacados su espacio siempre
 * debe de quedar preparado [...] lo que está [debajo] siempre debe de
 * estar más abajo que cuando no hay ningún destacado") — invierte la
 * decisión original (punto 19, v0.1.30). `.sc-banner-destacados-vacio`
 * usa `visibility: hidden` (no `display: none`): sigue ocupando su
 * altura/margen en el flujo del documento, pero no se ve nada (ni
 * borde, ni fondo, ni contenido) — así el resto del hero (eyebrow,
 * título, subtítulo, botones) queda siempre en la misma posición,
 * haya o no un destacado activo en cada momento.
 *
 * Sin imagen (26 agosto 2026, a petición de Javier: "no hace falta que
 * pongas archivos de subida") — la tarjeta ya solo lleva texto y, si
 * lo tiene, el enlace "Ver más". Ver includes/destacados/destacados.php
 * para el motivo completo.
 */

.sc-banner-destacados {
    position: relative;
    width: 100%;
    /* 8/9/2026, a petición de Javier ("el recuadro de los destacados más
       ancho horizontalmente"): sin tope de ancho — ocupa toda la columna
       del hero (.sc-hero-left menos su padding), en línea con el texto de
       apertura de debajo. Antes: max-width 600px. */
    max-width: none;
    height: 180px;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    border-radius: var(--sc-btn-radius, 10px);
    margin-bottom: 1.6rem;
    overflow: hidden;
    box-sizing: border-box;
}

/* Sin destacados vigentes: el hueco se queda (misma altura/margen),
   pero no se ve nada — ver nota "Hueco reservado SIEMPRE" de la
   cabecera de este archivo. */
.sc-banner-destacados-vacio {
    visibility: hidden;
}

/* Con más de un destacado hay a qué avanzar pulsando — con uno solo
   (sin esta clase) el banner no reacciona al clic. */
.sc-banner-destacados-con-puntos {
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.sc-banner-destacados-con-puntos:hover { border-color: rgba(var(--sc-gold-rgb), 0.6); }

.sc-banner-destacado {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    padding: 1rem 1.8rem;
    box-sizing: border-box;
    text-align: center;
}

.sc-banner-destacado-activo {
    display: flex;
    animation: sc-banner-destacado-aparece 0.4s ease;
}

@keyframes sc-banner-destacado-aparece {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sc-banner-destacado-texto {
    color: var(--sc-gold);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-title);
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
    /* Recorta con puntos suspensivos en vez de estirar la tarjeta —
       la altura del hueco es fija, no depende de lo largo del texto. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Ver más" es un BOTÓN (7/10/2026, Javier: "que se distinga mejor
   porque se confunde con el propio texto") — píldora con borde dorado,
   en mayúsculas y sobre fondo oscuro, igual en los tres tipos de
   diapositiva (también destaca sobre el fondo dorado de los avisos). */
.sc-banner-destacado-enlace {
    color: var(--sc-gold);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.95rem;
    border: 1px solid var(--sc-gold);
    border-radius: 999px;
    background: #111;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
    z-index: 1;
}
.sc-banner-destacado-enlace i { color: inherit; }

/* Al pasar el ratón, "Ver más" se quedaba del color del fondo de la
   tarjeta y no se veía nada (9/9/2026, reportado por Javier) — algún
   `a:hover` global del tema le ganaba al no fijar aquí el color. Se
   fuerza el color dorado (un pelín más claro en hover) en :hover y
   :focus para que gane siempre. */
.sc-banner-destacados .sc-banner-destacado-enlace:hover,
.sc-banner-destacados .sc-banner-destacado-enlace:focus {
    color: #111;
    background: var(--sc-gold);
    text-decoration: none;
}

.sc-banner-destacados-puntos {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    display: flex;
    /* Separación amplia: con el ::after de área pulsable (±5px) y este
       gap (~11px) las zonas de clic de puntos contiguos NO se solapan,
       así no se pulsa uno queriendo pulsar el de al lado (9/9/2026). */
    gap: 0.7rem;
    z-index: 2;
}

/* Cada punto es un <button> (9/9/2026: pulsarlo salta a ese destacado).
   Se le quita el aspecto nativo de botón y se le deja solo el círculo;
   el área pulsable real se agranda con un ::after transparente para que
   sea cómodo de acertar aunque el punto se vea de 6px. Sin transform en
   :hover a propósito — al escalar el botón escala también su ::after y
   volvían a solaparse las zonas de clic. */
.sc-banner-destacados-punto {
    position: relative;
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(var(--sc-gold-rgb), 0.3);
    cursor: pointer;
    transition: background 0.2s;
    appearance: none;
    -webkit-appearance: none;
}
.sc-banner-destacados-punto::after {
    content: "";
    position: absolute;
    inset: -5px;
}
.sc-banner-destacados-punto:hover,
.sc-banner-destacados-punto:focus-visible {
    background: var(--sc-gold);
    outline: none;
}

.sc-banner-destacados-punto-activo { background: var(--sc-gold); }

/* Con puntos de paginación, el contenido se centra en un poco menos de
   alto para que no se solape con los puntos de la línea de abajo. */
.sc-banner-destacados-con-puntos .sc-banner-destacado { padding-bottom: 1.9rem; }

@media (max-width: 900px) {
    .sc-banner-destacados { max-width: none; height: 160px; }
}

/* ===== Destacados en pantallas pequeñas o bajas (25/9/2026, Javier: "no se
   ven los destacados"). El banner es hijo de una columna flex de la portada y
   se ENCOGÍA hasta quedarse en 18px (solo los puntos, sin texto); su texto
   también se aplastaba a 0. Ahora ni el banner ni su texto se encogen, y en
   ventanas bajas o estrechas el banner es más bajo y de letra menor para que
   quepan el titular, los botones y los bloques de abajo. ===== */
.sc-banner-destacados { flex-shrink: 0; }
.sc-banner-destacado-texto { flex-shrink: 0; }

@media (max-width: 1280px) {
    .sc-banner-destacado { padding: 0.6rem 1.2rem; gap: 0.3rem; }
    .sc-banner-destacados-con-puntos .sc-banner-destacado { padding-bottom: 1.5rem; }
}
@media (max-width: 1100px) {
    .sc-banner-destacados { height: 124px; }
}
@media (max-height: 800px) {
    .sc-banner-destacados { height: 112px; margin-bottom: 1rem; }
    .sc-banner-destacado { padding: 0.5rem 1.2rem; gap: 0.25rem; }
    .sc-banner-destacados-con-puntos .sc-banner-destacado { padding-bottom: 1.4rem; }
}
@media (max-height: 720px) {
    .sc-banner-destacados { height: 100px; margin-bottom: 0.7rem; }
}
@media (max-height: 640px) {
    .sc-banner-destacados { height: 84px; margin-bottom: 0.5rem; }
    .sc-banner-destacados-con-puntos .sc-banner-destacado { padding-bottom: 1.2rem; }
}

/* ===== Un aspecto por tipo de destacado (7/10/2026, Javier: "dependiendo
   del bloque de los tres que se hiciese la letra más grande y se le
   asignase un fondo"). Los tres tipos del panel /destacados/:
     --destacado  texto del Administrador (envíos gratis, avisos...): fondo
                  dorado que se apaga hacia la derecha como los otros dos
                  (Javier, 7/10/2026), letra clara y la más grande.
     --web        contenido de la web (historias...): fondo cálido, letra de
                  título (Cinzel) algo mayor.
     --evento     ferias y eventos: fondo azul noche, letra normal (sus
                  textos son los más largos: título · fecha · lugar).
   El tamaño es base x escala: la base la bajan las pantallas bajas o
   estrechas (abajo) y la escala la pone cada tipo. ===== */
.sc-banner-destacado {
    position: relative;
    --sc-bd-base: var(--sc-fs-title);
    --sc-bd-escala: 1;
}
.sc-banner-destacado-texto {
    font-size: calc(var(--sc-bd-base) * var(--sc-bd-escala));
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

.sc-banner-destacado--destacado {
    --sc-bd-escala: 1.3;
    background: linear-gradient(135deg, var(--sc-gold) 0%, #7A6328 30%, #2A2110 70%, #111 100%);
}
.sc-banner-destacado--destacado .sc-banner-destacado-texto {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.sc-banner-destacado--web {
    --sc-bd-escala: 1.15;
    background: linear-gradient(135deg, #3A2C12 0%, #1C160B 60%, #111 100%);
}
.sc-banner-destacado--web .sc-banner-destacado-texto {
    color: var(--sc-text);
    font-family: var(--sc-font-title);
}

.sc-banner-destacado--evento {
    background: linear-gradient(135deg, #1B3044 0%, #121E2A 60%, #111 100%);
}
.sc-banner-destacado--evento .sc-banner-destacado-texto { color: var(--sc-text); }

/* Sobre el dorado los puntos dorados no se verían: claros mientras la
   diapositiva visible sea un aviso del Administrador. */
.sc-banner-destacados:has(.sc-banner-destacado--destacado.sc-banner-destacado-activo) .sc-banner-destacados-punto {
    background: rgba(255, 255, 255, 0.4);
}
.sc-banner-destacados:has(.sc-banner-destacado--destacado.sc-banner-destacado-activo) .sc-banner-destacados-punto:hover,
.sc-banner-destacados:has(.sc-banner-destacado--destacado.sc-banner-destacado-activo) .sc-banner-destacados-punto-activo {
    background: #fff;
}

/* Banner bajo (ventanas de poca altura) en pantalla ancha: texto y botón
   en la misma línea, que en columna no caben con la letra grande. */
@media (max-height: 800px) and (min-width: 700px) {
    .sc-banner-destacado { flex-direction: row; gap: 1.2rem; }
    .sc-banner-destacado-texto { flex: 0 1 auto; min-width: 0; }
}
/* Banner bajo y estrecho (móvil con poca altura): en columna, letra menor. */
@media (max-height: 800px) and (max-width: 699px) {
    .sc-banner-destacado { --sc-bd-base: var(--sc-fs-card); }
    .sc-banner-destacado-enlace { padding: 0.15rem 0.7rem; }
}
/* Banner de 84px: en fila, letra un punto menor para que quepan dos
   líneas; en columna, además, botón sin relleno vertical y sin escala
   propia en el contenido de la web (medido: el botón pisaba los puntos). */
@media (max-height: 640px) and (min-width: 700px) {
    .sc-banner-destacado { --sc-bd-base: calc(var(--sc-fs-title) * 0.78); }
}
@media (max-height: 640px) and (max-width: 699px) {
    .sc-banner-destacado--web { --sc-bd-escala: 1; }
    .sc-banner-destacado-enlace { padding: 0 0.7rem; }
}