/*=====================================================
    COMPRAVENTA ANTONIO — PÁGINA PRINCIPAL
    Solo se carga en index.html, después de layout.css
    (que contiene variables, header, footer, botones, etc.)

    1. Banners principales (carrusel al inicio de la página)
    2. Categorías destacadas (carrusel)
    3. Secciones de la portada (proceso, garantías, servicios, FAQ)
    4. Responsive
=====================================================*/

/*=====================================
    1. BANNERS PRINCIPALES
    Carrusel a todo el ancho, justo debajo del header.
    Mantiene la proporción de los banners (1920 × 720 = 8:3) en todas
    las pantallas y usa object-fit: contain: la imagen se ve completa.
======================================*/

.home-banner {
    position: relative;
    padding: 0 0 12px;
    background: var(--color-primary-darker);
}

/* Franjas inspiradas en las líneas del logo, debajo del carrusel */
.home-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    background: var(--stripes-light);
}

.home .carrusel-banner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    aspect-ratio: 8 / 3;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    background: var(--color-primary-darker);
}

/* Cada banner ocupa todo el carrusel; solo el activo es visible y recibe clics */
.home .carrusel-banner .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

.home .carrusel-banner .slide.active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

/* Mientras llegan los banners del panel solo se ve el fondo (js/banners.js) */
.home .carrusel-banner.banners-cargando button {
    visibility: hidden;
}

/* Banners de la API: <a>/<div class="slide"> con la imagen adentro */
.carrusel-banner .slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slide__boton {
    position: absolute;
    left: clamp(14px, 3vw, 40px);
    bottom: clamp(14px, 3vw, 34px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(7px, 1vw, 11px) clamp(14px, 1.8vw, 22px);
    border-radius: var(--radius-pill);
    background: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(0.78rem, 0.7rem + 0.4vw, 1rem);
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(218, 37, 28, 0.35);
    transition: background var(--transition), transform var(--transition);
}

.slide--enlace:hover .slide__boton,
.slide--enlace:focus-visible .slide__boton {
    background: var(--color-secondary-dark);
    transform: translateY(-2px);
}

/* Flechas */

.home .carrusel-banner button.prev,
.home .carrusel-banner button.next {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 3.4vw, 52px);
    height: clamp(36px, 3.4vw, 52px);
    border: none;
    border-radius: 50%;
    background: rgba(20, 10, 56, 0.55);
    color: var(--color-white);
    font-size: clamp(0.8rem, 1vw, 1.1rem);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--transition), background var(--transition);
}

.home .carrusel-banner .prev {
    left: clamp(8px, 2vw, 28px);
}

.home .carrusel-banner .next {
    right: clamp(8px, 2vw, 28px);
}

.home .carrusel-banner:hover button,
.home .carrusel-banner button:focus-visible {
    opacity: 1;
}

.home .carrusel-banner .prev:hover {
    background: var(--color-primary);
}

.home .carrusel-banner .next:hover {
    background: var(--color-secondary);
}

/* Puntos indicadores: debajo de la imagen, así nunca tapan el banner */

.carrusel-banner__puntos {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 10px;
}

.carrusel-banner__puntos[hidden] {
    display: none;
}

.carrusel-banner__punto {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    transition: width var(--transition), background var(--transition);
}

.carrusel-banner__punto:hover {
    background: rgba(255, 255, 255, 0.5);
}

.carrusel-banner__punto.is-active {
    width: 28px;
    border-color: var(--color-white);
    background: var(--color-white);
}


/*=====================================
    2. CATEGORÍAS DESTACADAS (CARRUSEL)
======================================*/

.home-categorias {
    background: var(--color-white);
}

.cat-carousel {
    --cat-visible: 5;
    --cat-gap: 20px;
    position: relative;
}

.cat-carousel__track {
    display: flex;
    gap: var(--cat-gap);
    margin: 0;
    padding: 10px 4px 28px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cat-carousel__track::-webkit-scrollbar {
    display: none;
}

.cat-carousel__track:focus-visible {
    outline-offset: 0;
    border-radius: var(--radius);
}

.cat-carousel--static .cat-carousel__track {
    justify-content: center;
}

.cat-card-item {
    flex: 0 0 calc((100% - (var(--cat-visible) - 1) * var(--cat-gap)) / var(--cat-visible));
    min-width: 0;
    scroll-snap-align: start;
}

.cat-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-sm);
    color: var(--color-white);
    text-decoration: none;
    isolation: isolate;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

a.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    color: var(--color-white);
}

.cat-card__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-white);
}

.cat-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

a.cat-card:hover .cat-card__media img {
    transform: scale(1.08);
}

/* Degradado para que el texto sea legible sobre cualquier imagen */
.cat-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(20, 10, 56, 0.92) 0%,
        rgba(20, 10, 56, 0.45) 38%,
        rgba(20, 10, 56, 0) 62%
    );
    transition: opacity var(--transition);
}

.cat-card__media--error {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.cat-card__media--error img {
    visibility: hidden;
}

.cat-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 18px 20px;
}

.cat-card__body::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: var(--color-secondary);
    transition: width var(--transition);
}

a.cat-card:hover .cat-card__body::before {
    width: 56px;
}

.home .cat-card__title {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.cat-card__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: gap var(--transition), color var(--transition);
}

a.cat-card:hover .cat-card__action {
    gap: 12px;
    color: var(--color-white);
}

/* Estado de carga */

.cat-card-item--skeleton .cat-card {
    background: linear-gradient(100deg, #eef0f6 30%, #f8f9fc 50%, #eef0f6 70%);
    background-size: 300% 100%;
    box-shadow: none;
    animation: cargando 1.4s ease-in-out infinite;
}

@keyframes cargando {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* Flechas */

.cat-carousel__arrow {
    position: absolute;
    top: calc(50% - 10px);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-primary);
    font-size: 1rem;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.cat-carousel__arrow:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-50%) scale(1.08);
}

/* Por defecto las flechas quedan dentro del ancho de la pantalla;
   en pantallas amplias salen un poco del carrusel. */
.cat-carousel__arrow--prev {
    left: -6px;
}

.cat-carousel__arrow--next {
    right: -6px;
}

@media (min-width: 1300px) {

    .cat-carousel__arrow--prev {
        left: -22px;
    }

    .cat-carousel__arrow--next {
        right: -22px;
    }
}


/*=====================================
    3. SECCIONES DE LA PORTADA
======================================*/

/* Proceso de empeño */

.home .proceso-empeno {
    background: var(--color-bg-alt);
}

.pasos-lista {
    list-style: none;
    padding-left: 0;
}

.home .paso-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    padding: 36px 24px;
}

.home .paso-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.home .paso-card::before {
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.home .numero-paso {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    background: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.home .icono-paso {
    font-size: 2.6rem;
    color: var(--color-secondary);
    margin-bottom: 18px;
}

.home .paso-card h3,
.home .garantia-card h3 {
    margin-bottom: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.home .paso-card p,
.home .garantia-card p,
.home .servicio-body p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Tarjeta VIP (debajo de los servicios) */

.home .vip-club {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    margin-top: 40px;
    padding: clamp(28px, 4vw, 52px);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 15% 20%, rgba(228, 184, 90, 0.28), transparent 45%),
        linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary) 60%, var(--color-primary-dark) 100%);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-md);
}

/* Franjas de la marca en el borde inferior */
.home .vip-club::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: var(--stripes-light);
}

.home .vip-club__imagen img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
    transform: rotate(-2deg);
    transition: transform var(--transition-slow);
}

.home .vip-club:hover .vip-club__imagen img {
    transform: rotate(0deg) scale(1.03);
}

.home .vip-club__etiqueta {
    display: inline-block;
    margin-bottom: 12px;
    color: #f0cf78;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home .vip-club h3 {
    margin: 0 0 14px;
    color: var(--color-white);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
}

.home .vip-club p {
    margin: 0 0 16px;
    line-height: 1.7;
}

.home .vip-club p strong {
    color: var(--color-white);
}

.home .vip-club__beneficios {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.home .vip-club__beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(240, 207, 120, 0.35);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-white);
    font-weight: 600;
}

.home .vip-club__titulo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.home .vip-club__titulo-icono {
    flex: 0 0 auto;
    margin-top: 0.15em;
    color: #f0cf78;
    font-size: 0.85em;
}

/* Íconos dorados de los beneficios */
.home .vip-club__icono {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(240, 207, 120, 0.18);
    color: #f0cf78;
    font-size: 0.8rem;
}

.home .vip-club__lema {
    color: #f0cf78;
    font-weight: 700;
}

@media (max-width: 991.98px) {

    .home .vip-club {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .home .vip-club__imagen {
        max-width: 380px;
        margin: 0 auto;
    }

    .home .vip-club__titulo {
        justify-content: center;
    }

    .home .vip-club__beneficios li {
        text-align: left;
    }
}

/* Aviso: extender el plazo del empeño con abonos quincenales */

.home .aviso-plazo {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 980px;
    margin: 40px auto 0;
    padding: 26px 30px;
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-secondary);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.home .aviso-plazo__icono {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
    font-size: 1.7rem;
}

.home .aviso-plazo__texto {
    flex: 1;
    min-width: 0;
}

.home .aviso-plazo h3 {
    margin: 0 0 6px;
    color: var(--color-primary-dark);
    font-size: 1.2rem;
    font-weight: 700;
}

.home .aviso-plazo p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.home .aviso-plazo p strong {
    color: var(--color-primary-dark);
}

.home .aviso-plazo__boton {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 767.98px) {

    .home .aviso-plazo {
        flex-direction: column;
        text-align: center;
        padding: 26px 22px;
        border-left: 1px solid var(--color-border);
        border-top: 5px solid var(--color-secondary);
    }
}

/* Garantías */

.home .garantias {
    background: var(--color-white);
}

.home .garantia-card {
    border-radius: var(--radius-lg);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.home .garantia-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.home .garantia-icono {
    width: 76px;
    height: 76px;
    font-size: 1.8rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.home .garantia-card:hover .garantia-icono {
    background: var(--color-secondary);
    color: var(--color-white);
    transform: rotate(-6deg) scale(1.05);
}

/* Servicios */

.home #servicios {
    background: var(--color-bg-alt);
}

.home .servicio-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.home .servicio-card:hover {
    box-shadow: var(--shadow-md);
}

.home .servicio-img {
    width: 100%;
    height: 240px;
    object-fit: contain;
}

/* Foto que llena todo el espacio de la imagen (en lugar de un recorte transparente) */
.home .servicio-img--foto {
    object-fit: cover;
    object-position: 58% 40%;
    border-radius: var(--radius);
}

.home .servicio-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.home .servicio-body h3 {
    margin-bottom: 12px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.home .servicio-body p {
    margin-bottom: 24px;
}

.home .btn-servicio {
    margin-top: auto;
    background: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.home .btn-servicio:hover {
    background: var(--color-secondary);
    transform: translateY(-2px);
}

/* Preguntas frecuentes */

.home .faq {
    background: var(--color-white);
}

.faq-lista {
    max-width: 900px;
    margin: 0 auto;
}

.home .accordion-item {
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.home .accordion-header {
    margin: 0;
}

.home .accordion-button {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-text);
}

.home .accordion-button:not(.collapsed) {
    background: var(--color-primary);
    color: var(--color-white);
}

.home .accordion-button:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: -3px;
}

.home .accordion-body {
    color: var(--color-text-muted);
    line-height: 1.75;
}

.home .faq-contacto {
    max-width: 1000px;
    margin: 56px auto 0;
}

.home .faq-contacto-box {
    background:
        radial-gradient(circle at 90% 10%, rgba(218, 37, 28, 0.35), transparent 45%),
        linear-gradient(125deg, var(--color-primary-dark), var(--color-primary));
    border-radius: var(--radius-lg);
}

.home .faq-contacto-box h2 {
    color: var(--color-white);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

.home .faq-botones {
    flex-wrap: wrap;
}

.home .btn-llamar {
    color: var(--color-primary);
    text-decoration: none;
}

.home .btn-llamar:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.home .btn-whatsapp {
    text-decoration: none;
}

/* Testimonios */

.home-testimonios {
    background: var(--color-bg-alt);
}



/*=====================================
    4. RESPONSIVE
======================================*/

@media (max-width: 1199.98px) {

    .cat-carousel {
        --cat-visible: 4;
    }
}

@media (max-width: 991.98px) {
    .cat-carousel {
        --cat-visible: 3;
    }

    /* En pantallas táctiles no hay hover: las flechas siempre visibles */
    .home .carrusel-banner button.prev,
    .home .carrusel-banner button.next {
        opacity: 1;
    }
}

@media (max-width: 767.98px) {
    .cat-carousel {
        --cat-visible: 2;
        --cat-gap: 14px;
    }

    .cat-carousel__arrow {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
    }

    .home .servicio-img {
        height: 200px;
    }

    .home .faq-contacto-box {
        padding: 44px 22px;
    }
}

@media (max-width: 575.98px) {

    /* En móvil se navega deslizando o con los puntos: la imagen queda libre */
    .home .carrusel-banner button.prev,
    .home .carrusel-banner button.next {
        display: none;
    }
    .cat-card__body {
        padding: 14px 14px 16px;
    }

    .home .faq-botones a {
        width: 100%;
        justify-content: center;
    }
}

/* Móviles pequeños: 1 card y media visible (invita a deslizar) */
@media (max-width: 479.98px) {

    .cat-carousel {
        --cat-visible: 1.5;
    }
}