/* ============================================================ EL CARRUSEL

   Como lo hace Apple en sus galerias de producto, y por que cada decision:

   · DESPLAZAMIENTO NATIVO CON IMANTADO. `scroll-snap-type: x mandatory`. El
     navegador ya sabe hacer inercia, arrastre con el dedo y rueda del raton
     mejor que cualquier guion. Lo que hacia la version anterior —clonar las
     diapositivas para simular un bucle infinito— es de donde salen los saltos
     raros al llegar al final.

   · SE ASOMA LA SIGUIENTE. La tarjeta no ocupa el ancho entero: se ve un trozo
     de la de al lado. Es lo que le dice al ojo «esto se puede arrastrar» sin
     tener que poner un cartel.

   · LAS FLECHAS SON DE CRISTAL Y FLOTAN ENCIMA, redondas y con el material de
     la casa. Se apagan solas cuando ya no hay a donde ir: una flecha que no
     lleva a ningun sitio es una promesa rota.

   · LOS PUNTOS SON UNA BARRA DE PROGRESO. El activo se estira y se llena
     mientras corre el temporizador. Asi se sabe cuanto queda sin mirar nada
     mas, y al parar el raton encima se para la barra: se ve que se ha pausado.

   · SIN JAVASCRIPT SIGUE SIENDO USABLE: es una tira que se desplaza. Se pierden
     las flechas y el automatico, no el contenido.
*/

.galeria { position: relative; margin-top: clamp(40px, 5vw, 64px); }

.tira {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Sangrado a los lados para que la primera y la ultima queden centradas
       igual que las de en medio. */
    padding: 6px calc((100% - min(100% - 44px, 1040px)) / 2);
    margin-inline: 0;
}
.tira::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .tira { scroll-behavior: auto; } }

.diapo {
    flex: 0 0 min(1040px, 88%);
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
    padding: clamp(28px, 3.4vw, 46px);
    border-radius: 26px;
}
@media (max-width: 860px) {
    .diapo { grid-template-columns: 1fr; }
    .diapo { flex-basis: 88%; }
}

.diapo__texto { display: flex; flex-direction: column; }
.diapo h3 { margin-bottom: 12px; }
.diapo__texto > p { color: var(--tinta-2); font-size: 16.5px; max-width: 44ch; }

.diapo__lista { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.diapo__lista li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 15px;
    color: var(--tinta-2);
}
.diapo__lista svg { margin-top: 4px; color: var(--tinta-3); }

.diapo .botonera { justify-content: flex-start; margin-top: auto; padding-top: 24px; }

/* Las credenciales de la demo, en monoespaciada y en su propia caja: son datos
   que alguien va a copiar, y lo que se copia se enseña aparte. */
.credenciales {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    margin: 18px 0 0;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
}
.credenciales dt { color: var(--tinta-3); }
.credenciales dd { margin: 0; font-family: var(--dato); font-weight: 600; }

/* El hueco de la captura. Se dice que falta en vez de dejar un vacio raro. */
.diapo__visual {
    display: grid;
    place-items: center;
    min-height: 260px;
    border-radius: 18px;
    color: var(--tinta-3);
    font-size: 14px;
}

/* -------------------------------------------------------------- Las flechas */

.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--tinta);
    cursor: pointer;
}
.flecha--antes { left: max(10px, calc((100% - 1200px) / 2)); }
.flecha--luego { right: max(10px, calc((100% - 1200px) / 2)); }

.flecha[disabled] { opacity: .28; cursor: default; }

@media (max-width: 900px) { .flecha { display: none; } }

/* --------------------------------------------------------------- Los puntos */

.puntos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.punto {
    position: relative;
    width: 30px; height: 5px;
    padding: 0;
    background: var(--velo);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    transition: width .4s var(--curva), background-color .3s var(--curva);
}
.punto::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--tinta-2);
    border-radius: inherit;
}
.punto[aria-selected="true"] { width: 64px; }

/* La barra que se llena mientras corre el temporizador. Se para sola cuando el
   carrusel se pausa, y asi se VE que esta pausado. */
@media (prefers-reduced-motion: no-preference) {
    .punto[aria-selected="true"]::after { animation: llenar var(--espera, 7s) linear forwards; }
    .galeria[data-pausada="si"] .punto::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .punto[aria-selected="true"]::after { width: 100%; }
}

@keyframes llenar { from { width: 0; } to { width: 100%; } }