/* Sitio comercial público. Parte de una columna (celular) y crece hasta escritorio. */

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---- Presentación ---- */
.sitio-hero {
    background:
        radial-gradient(60rem 28rem at 8% -10%, #d8eafb 0%, rgba(216, 234, 251, 0) 60%),
        radial-gradient(48rem 24rem at 100% 10%, #d6f2ef 0%, rgba(214, 242, 239, 0) 60%),
        linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%);
    overflow: hidden;
}

.sitio-hero { position: relative; isolation: isolate; }

/* La cabecera (título, texto y botones) lleva el fondo de fotos; la cinta de abajo queda sobre el fondo claro. */
.sitio-hero__cabecera { position: relative; isolation: isolate; }

/* ---- Fondo con fotos (carpeta static/img/fondo, originales en imagenes-sitio/fondo-portada) ---- */
.sitio-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    /* Abajo se funde con el fondo claro de la página. */
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.sitio-fondo__capa {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(1.08);
    opacity: 0;
    animation: sitio-fondo 32s linear infinite;
}

.sitio-fondo__capa--1 { background-image: url("../img/fondo/fondo-1.jpg"); animation-delay: 0s; }
.sitio-fondo__capa--2 { background-image: url("../img/fondo/fondo-2.jpg"); animation-delay: 8s; }
.sitio-fondo__capa--3 { background-image: url("../img/fondo/fondo-3.jpg"); animation-delay: 16s; }
.sitio-fondo__capa--4 { background-image: url("../img/fondo/fondo-4.jpg"); animation-delay: 24s; }

/* Celular y tableta: el texto ocupa todo el ancho, así que la foto va detrás con un velo claro que deja leer. */
.sitio-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(243, 248, 253, .8);
}

@keyframes sitio-fondo {
    0% { opacity: 0; }
    6% { opacity: 1; }
    25% { opacity: 1; }
    31% { opacity: 0; }
    100% { opacity: 0; }
}

.sitio-hero--pausado .sitio-fondo__capa { animation-play-state: paused; }

/* Escritorio: la foto ocupa la franja derecha, a un tamaño cercano al original (nítida y con color); el texto queda
   a la izquierda sobre el fondo claro y la foto aparece con un degradé hacia el costado. */
@media (min-width: 992px) {
    .sitio-fondo {
        left: auto;
        width: 52%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 70%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 70%, transparent 100%);
        mask-composite: intersect;
    }

    .sitio-fondo::after { background: rgba(243, 248, 253, .08); }
}

@media (prefers-reduced-motion: reduce) {
    .sitio-fondo__capa { animation: none; }
    .sitio-fondo__capa--1 { opacity: 1; }
    .sitio-fondo__capa--2,
    .sitio-fondo__capa--3,
    .sitio-fondo__capa--4 { display: none; }
}

.sitio-hero__texto { max-width: 46rem; }

@media (min-width: 992px) {
    .sitio-hero__texto { max-width: 38rem; }
}

/* Reparte el título en líneas parejas (sin una palabra sola en la segunda). */
.sitio-hero h1 { text-wrap: balance; }

.sitio-etiqueta {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #cfe0f1;
    color: #0b5fa5;
    font-size: .85rem;
    font-weight: 600;
}

/* ---- Cinta de imágenes que circula en horizontal ---- */
.sitio-cinta {
    position: relative;
    overflow: hidden;
    padding-top: 1.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.sitio-cinta__pista {
    display: flex;
    width: max-content;
    margin: 0;
    padding: .5rem 0 1.25rem;
    list-style: none;
    animation: sitio-cinta 70s linear infinite;
}

/* Se frena al apuntar o enfocar una tarjeta, y con el botón de pausa. */
.sitio-cinta:hover .sitio-cinta__pista,
.sitio-cinta:focus-within .sitio-cinta__pista,
.sitio-cinta--pausada .sitio-cinta__pista {
    animation-play-state: paused;
}

/* Cada tarjeta lleva su propio margen: así dos copias miden exactamente el doble y la vuelta no salta. */
.sitio-tarjeta {
    flex: 0 0 auto;
    width: 15.5rem;
    margin-right: 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dbe6f0;
    border-radius: 1rem;
    box-shadow: 0 .25rem 1rem rgba(11, 95, 165, .08);
}

.sitio-tarjeta img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
}

.sitio-tarjeta__texto {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .9rem .9rem;
    font-size: .85rem;
    line-height: 1.35;
}

.sitio-tarjeta__texto strong { font-size: .95rem; color: #0b2f4f; }
.sitio-tarjeta__texto span { color: #5b6b7a; }

.sitio-cinta__control {
    position: absolute;
    top: 0;
    right: 1rem;
    z-index: 2;
    border: 1px solid #cfe0f1;
    font-size: .75rem;
}

@keyframes sitio-cinta {
    to { transform: translateX(-50%); }
}

/* Quien pide menos movimiento no ve nada en marcha: la cinta se recorre con el dedo o el teclado. */
@media (prefers-reduced-motion: reduce) {
    .sitio-cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .sitio-cinta__pista { animation: none; }
    .sitio-tarjeta[aria-hidden="true"] { display: none; }
    .sitio-cinta__control { display: none; }
}

@media (min-width: 768px) {
    .sitio-tarjeta { width: 18rem; }
}

@media (min-width: 1200px) {
    .sitio-tarjeta { width: 21rem; }
    .sitio-tarjeta__texto { font-size: .9rem; padding: .85rem 1.05rem 1.05rem; }
    .sitio-tarjeta__texto strong { font-size: 1.02rem; }
}

/* ---- Tres datos clave ---- */
.sitio-dato {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid #dbe6f0;
    border-left: .3rem solid #0b5fa5;
    border-radius: .75rem;
    font-size: .95rem;
}

.sitio-dato strong { color: #0b2f4f; }
.sitio-dato span { color: #5b6b7a; }

/* Señuelo anti-spam: fuera de pantalla (no display:none, que algunos robots detectan). */
.sitio-senuelo {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sitio-articulo { max-width: 46rem; }