/* =================================================================
   NUEVAS SECCIONES · Carrusel Los 30, Galería, Los Minis, Kit Lovely
   Fondo común #f8f2e7. Paddings fluidos heredados de "main section"
   (clamp) para mantener alturas contenidas en desktop.
================================================================= */

/* Imagen usada como "título" de sección (headers gráficos) --------- */
.section-title-img {
    display: block; height: auto;
    width: 70%; max-width: 380px;
    margin: 0 auto 2.5rem;
}

/* =================================================================
   CARRUSEL AUTOMÁTICO INFINITO (Los 30)
   Marquee CSS puro: la pista duplica las 9 imágenes y se anima de 0
   a -50% → bucle sin saltos. Sin JS ni intervención del usuario.
================================================================= */
.los-30-carousel {
    margin-top: 3rem;
    width: 100%;
    overflow: hidden;
    /* Sin degradado en los bordes: imágenes limpias de lado a lado. */
}
.los-30-track {
    display: flex;
    width: max-content;
    animation: los30-scroll 45s linear infinite; /* velocidad armónica y fluida */
}
.los-30-carousel:hover .los-30-track { animation-play-state: paused; }
/* Separación con padding interno (no 'gap') para que el -50% sea exacto */
.los-30-slide {
    flex: 0 0 auto;
    width: clamp(200px, 25vw, 300px);
    padding: 0 0.6rem;
    box-sizing: border-box;
}
.los-30-slide img {
    width: 100%; height: 260px;      /* dimensiones idénticas para todas */
    object-fit: cover; display: block;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(31,68,72,0.12);
}
@keyframes los30-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .los-30-track { animation: none; }
    .los-30-carousel { overflow-x: auto; }  /* permite scroll manual si se reduce el movimiento */
}

/* =================================================================
   GALERÍA DE COLECCIÓN · grid 2x2 (1 columna en móvil)
================================================================= */
.galeria { background: #ffffff; }
.galeria-header { text-align: center; }
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    max-width: 1000px; margin: 0 auto;
}
.galeria-item img {
    width: 100%; height: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
    display: block; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31,68,72,0.1);
}
@media (max-width: 767px) {
    .galeria-grid { grid-template-columns: 1fr; }  /* móvil: 1 columna */
}

/* =================================================================
   LOS MINIS DE DONNATELA · imagen + texto (2 columnas → vertical)
================================================================= */
.minis { background: #f8f2e7; }
.minis-header { text-align: center; }
.minis-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: center;
    max-width: 1050px; margin: 0 auto;
}
.minis-img img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 10px 30px rgba(31,68,72,0.15); }
.minis-text p {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.3rem, 2.3vw, 1.9rem);
    color: var(--teal-dark); line-height: 1.5;
    max-width: 34ch;
}
@media (max-width: 1023px) {
    .minis-content { grid-template-columns: 1fr; gap: 2rem; }  /* tablet/móvil: apilado */
    .minis-text p { max-width: 60ch; }
}

/* =================================================================
   KIT 30 DE DONNATELA LOVELY · imagen + texto + tira de miniaturas
================================================================= */
.lovely { background: #ffffff; }
.lovely-header { text-align: center; }
/* Título de Lovely un poco más grande que el resto */
.lovely .section-title-img { width: 82%; max-width: 480px; }
.lovely-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: center;
    max-width: 1050px; margin: 0 auto;
}
.lovely-img img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 10px 30px rgba(31,68,72,0.15); }
.lovely-text p {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.3rem, 2.3vw, 1.9rem);
    color: var(--teal-dark); line-height: 1.5;
    max-width: 34ch;
}
/* Tira de miniaturas consecutivas (cuadrícula compacta) */
.lovely-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.8rem;
    max-width: 1050px; margin: 2.8rem auto 0;
}
.lovely-thumbs img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    display: block; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(31,68,72,0.1);
}
@media (max-width: 1023px) {
    .lovely-content { grid-template-columns: 1fr; gap: 2rem; }
    .lovely-text p { max-width: 60ch; }
    .lovely-thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .lovely-thumbs { grid-template-columns: repeat(2, 1fr); }
}