/* ==========================================================================
   coverflow.css — experiencias en coverflow 3D (Funerales / Cementerios /
   Más Experiencias) en la home. Va ÚLTIMO en el bundle, después de
   index.css, planes.css y home.css: pisa lo justo de .project-card. Prefijo
   v3-cf en todo lo nuevo. Variables: las de :root en index.css (--accent,
   --bg-secondary, --radius-lg, --transition…).

   Salió de index3/index3.css, donde se probó el carrusel; ahí están las
   notas (index3/index3-NOTAS.md) con el porqué de cada decisión.
   ========================================================================== */

/* ---------- contenedor ------------------------------------------------- */
.category-section > .v3-cf {
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Tamaño de la tarjeta central. El resto de las medidas del carrusel salen
   de acá (Swiper usa slidesPerView: 'auto' y lee este ancho). */
.v3-cf {
    --v3-ancho: 380px;
    --v3-mascara: 7%;
}

/* ---------- viewport (el .swiper) -------------------------------------- */
.v3-cf-viewport {
    /* Aire arriba y abajo: la tarjeta central se eleva al pasar el mouse y
       lleva sombra; sin esto, overflow:hidden las recortaría. */
    padding: 1.25rem 0 2rem;
    overflow: hidden;
    outline: none;
    /* Fundido en los bordes: las tarjetas lejanas se desvanecen en vez de
       cortarse de golpe contra el borde del contenedor. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--v3-mascara), #000 calc(100% - var(--v3-mascara)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--v3-mascara), #000 calc(100% - var(--v3-mascara)), transparent 100%);
}

.v3-cf-viewport:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent-light);
    border-radius: var(--radius-lg);
}

/* ---------- slides ------------------------------------------------------ */
.v3-cf .swiper-slide {
    width: var(--v3-ancho);
    height: auto;                   /* que estiren todos al más alto */
    display: flex;
}

.v3-cf .project-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Las laterales, un poco apagadas: la que manda es la del centro. */
    filter: brightness(0.93) saturate(0.9);
    /* index.js esconde cada .project-card (opacity 0 + translateY en línea) y
       la revela con un IntersectionObserver cuando entra en pantalla. En un
       carrusel con overflow oculto eso dejaría invisibles a las que giran
       desde los costados hasta que "entran". Acá las tarjetas están siempre
       visibles y sin transform propio (el 3D lo lleva el slide). Los
       !important son porque index.js escribe esos estilos en línea. */
    opacity: 1 !important;
    transform: none !important;
    transition: filter 0.45s ease, box-shadow 0.45s ease, border-color 0.3s ease !important;
    transition-delay: 0s !important;
    /* El reverso de una tarjeta girada no debería verse nunca; por las dudas. */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.v3-cf .swiper-slide-active .project-card {
    filter: none;
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-light);
}

/* Recorte del texto: en el coverflow las tarjetas no comparten fila, así que
   el extracto puede ir a tres líneas sin desparejar nada. */
.v3-cf .project-excerpt {
    -webkit-line-clamp: 3;
    min-height: 0;
    margin-bottom: 0;
}

.v3-cf .project-content {
    padding: 1.25rem 1.4rem 1.4rem;
}

/* ---------- controles (flechas + puntos) -------------------------------- */
.v3-cf-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.v3-cf-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.v3-cf-btn svg {
    width: 20px;
    height: 20px;
}

.v3-cf-btn:hover,
.v3-cf-btn:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    outline: none;
}

.v3-cf-btn.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Puntos: mismo lenguaje que el carrusel de planes (dorado, el activo se
   alarga). dynamicBullets de Swiper los agrupa cuando son muchos. */
.v3-cf-dots.swiper-pagination {
    position: static;
    height: 24px;
    line-height: 24px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
}

/* Con dynamicBullets, Swiper centra la tira con left:50% + translateX(-50%),
   pensado para position:absolute. Acá el centrado lo hace el flex del padre.
   (Selector largo a propósito: tiene que pesar más que el de Swiper.) */
.v3-cf-dots.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    transform: none;
}

.v3-cf-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(152, 125, 95, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.v3-cf-dots .swiper-pagination-bullet-active {
    background: var(--accent);
}

/* ---------- sin JavaScript / sin Swiper: las tarjetas en fila ----------- */
/* Hasta que coverflow.js marca el carrusel como listo, o si Swiper no cargó,
   las tarjetas se ven como una grilla común. Nada queda oculto. */
.v3-cf:not(.v3-cf--listo) .v3-cf-viewport {
    -webkit-mask-image: none;
            mask-image: none;
}
.v3-cf:not(.v3-cf--listo) .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.v3-cf:not(.v3-cf--listo) .swiper-slide {
    width: min(var(--v3-ancho), 100%);
}
.v3-cf:not(.v3-cf--listo) .v3-cf-controls {
    display: none;
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1024px) {
    .v3-cf {
        --v3-ancho: 340px;
    }
}

@media (max-width: 640px) {
    .v3-cf {
        --v3-ancho: min(78vw, 320px);
        --v3-mascara: 4%;
    }
    .v3-cf-viewport {
        padding: 0.75rem 0 1.25rem;
    }
    /* En el celular se navega deslizando: las flechas sobran (misma regla que
       los otros carruseles de la home). Quedan los puntos. */
    .v3-cf-btn {
        display: none;
    }
    .v3-cf-controls {
        margin-top: 0;
    }
}

/* Movimiento reducido: sin autoplay lo maneja coverflow.js; acá, sin
   transiciones de filtro para que el cambio de tarjeta sea seco. */
@media (prefers-reduced-motion: reduce) {
    .v3-cf .project-card {
        transition: none;
    }
}