/* =====================================================================
   Home y menú móvil · Propuesta v2 (Figma: 🏠 Inicio → PROPUESTA v2)
   Solo afecta pantallas < 768 px (Home) y < 992 px (menú, que es offcanvas).
   Escritorio no cambia.
   ===================================================================== */

/* ---------- Sliders (hero y promos) ---------- */
@media (max-width: 767.98px) {

    /* Mostrar la primera imagen desde la carga (antes: recuadro gris hasta que inicia el carrusel) */
    #owl-slider .owl-carousel:not(.owl-loaded) { display: block; }
    #owl-slider .owl-carousel:not(.owl-loaded) > .item:not(:first-child) { display: none; }

    /* Indicadores centrados en lugar de flechas */
    #owl-slider .owl-nav { display: none !important; }
    #owl-slider .owl-carousel .owl-stage-outer { margin-bottom: 0 !important; }
    #owl-slider .owl-carousel .owl-dots:not(.disabled) {
        display: flex !important; justify-content: center; align-items: center; gap: 2px; margin-top: 12px;
    }
    #owl-slider .owl-carousel .owl-dot { border: 0; background: none; padding: 6px 2px; line-height: 0; }
    #owl-slider .owl-carousel .owl-dot span {
        display: block; width: 8px; height: 8px; border-radius: 4px;
        background-color: var(--white-dos, #cecece); background-color: #cecece; transition: width .2s ease, background-color .2s ease;
    }
    #owl-slider .owl-carousel .owl-dot.active span { width: 20px; background-color: var(--primary, #E2211C); }
}

/* ---------- Accesos rápidos: 2 columnas ---------- */
@media (max-width: 767.98px) {
    .bloques-border-none > .wp-block-group__inner-container {
        display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-left: 16px; padding-right: 16px;
    }
    .bloques-border-none .wp-block-columns,
    .bloques-border-none .wp-block-column { display: contents; }
    .bloques-border-none .wp-block-image { margin: 0 !important; }
    .bloques-border-none .wp-block-image img { width: 100%; height: auto; border-radius: 16px; }
}

/* ---------- Únete a nuestra familia: tarjeta roja apilada ---------- */
@media (max-width: 767.98px) {
    .wp-block-columns:has(#bloque-circle-k) {
        flex-direction: column !important; gap: 16px !important;
        background-color: var(--primary, #E2211C); border-radius: 16px;
        padding: 24px !important; margin: 32px 16px !important; width: auto !important;
    }
    .wp-block-columns:has(#bloque-circle-k) > .wp-block-column { flex-basis: auto !important; width: 100% !important; margin: 0 !important; }
    .wp-block-columns:has(#bloque-circle-k) > .wp-block-column:last-child { order: -1; }
    .wp-block-columns:has(#bloque-circle-k) .vh100 { min-height: 0 !important; height: auto !important; padding: 0 !important; }
    .wp-block-columns:has(#bloque-circle-k) #bloque-circle-k .col-12 { padding: 0; }
    .wp-block-columns:has(#bloque-circle-k) #bloque-circle-k .card-banner {
        height: 220px !important; min-height: 0 !important; border: 0; border-radius: 12px !important;
        background-size: cover; background-position: center 25%;
    }
    .wp-block-columns:has(#bloque-circle-k) h2,
    .wp-block-columns:has(#bloque-circle-k) h5 {
        color: var(--white, #fff) !important; text-align: left !important;
        margin: 0 0 12px !important; padding: 0 !important;
    }
    .wp-block-columns:has(#bloque-circle-k) h2 { font-size: 1.75rem; line-height: 1.2; }
    .wp-block-columns:has(#bloque-circle-k) h5 { font-size: 1rem !important; line-height: 1.5; }
    .wp-block-columns:has(#bloque-circle-k) .wp-block-buttons { margin-top: 8px; }
    .wp-block-columns:has(#bloque-circle-k) .wp-block-button__link {
        background-color: var(--white, #fff) !important; color: var(--primary, #E2211C) !important;
        border-radius: 999px; width: 100%; padding: 12px; font-size: .9375rem !important; line-height: 1.4; white-space: nowrap;
    }
}

/* ---------- ¡Síguenos! Instagram: perfil compacto + cuadrícula 2×3 ---------- */
@media (max-width: 767.98px) {
    .ck-instagram-feed .wpsr-ig-header { padding: 0 !important; margin-bottom: 16px !important; background: none !important; }
    .ck-instagram-feed .wpsr-ig-header-inner {
        display: grid !important; grid-template-columns: 48px 1fr; column-gap: 12px; align-items: center; text-align: left !important;
    }
    .ck-instagram-feed .wpsr-ig-header-logo { margin: 0 !important; }
    .ck-instagram-feed .wpsr-ig-header-logo img { width: 48px !important; height: 48px !important; }
    .ck-instagram-feed .wpsr-ig-header-info { margin: 0 !important; padding: 0 !important; text-align: left !important; }
    .ck-instagram-feed .wpsr-ig-header-name a { font-size: 1rem !important; }
    .ck-instagram-feed .wpsr-ig-header-statistics { justify-content: flex-start !important; font-size: .875rem; margin: 0 !important; }
    .ck-instagram-feed .wpsr-ig-header-fullname,
    .ck-instagram-feed .wpsr-ig-header-description { display: none !important; }
    .ck-instagram-feed .wpsr-ig-header .wpsr-ig-follow-btn { display: none !important; }

    .ck-instagram-feed .wpsr-row.wpsr-ig-all-feed {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 !important;
    }
    .ck-instagram-feed .wpsr-row.wpsr-ig-all-feed > [class*="wpsr-col-"] {
        width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important;
    }
    .ck-instagram-feed .wpsr-row.wpsr-ig-all-feed > [class*="wpsr-col-"]:nth-child(n+7) { display: none !important; }
    .ck-instagram-feed .wpsr-ig-post { margin: 0 !important; border-radius: 12px; overflow: hidden; }

    /* Botón rojo "Seguir en Instagram" (el texto del plugin viene en inglés) */
    .ck-instagram-feed .ck-ig-seguir { display: block; margin-top: 16px; }
    .ck-instagram-feed .ck-ig-seguir a {
        display: block; text-align: center; text-decoration: none; border-radius: 999px; padding: 12px 24px;
        background-color: var(--primary, #E2211C); color: var(--white, #fff) !important; font-size: 1rem;
    }
}
@media (min-width: 768px) {
    .ck-instagram-feed .ck-ig-seguir { display: none; }
}

/* ---------- Conoce nuestras marcas: fila deslizable ---------- */
.ck-marcas-movil { padding: 32px 0; }
.ck-marcas-movil .ck-marcas-movil__titulo {
    display: table; margin: 0 auto 20px; padding: 12px 24px; border-radius: 999px;
    background-color: var(--primary, #E2211C); color: var(--white, #fff);
    font-family: 'ACTEasy-Black', 'ACTEasy', sans-serif; font-size: 1.125rem; letter-spacing: .3px; text-transform: uppercase;
}
.ck-marcas-movil .ck-marcas-movil__fila { padding: 0 !important; margin: 0 !important; }
/* el tema envuelve el contenido de los grupos en .wp-block-group__inner-container */
.ck-marcas-movil .ck-marcas-movil__fila > .wp-block-group__inner-container,
.ck-marcas-movil .ck-marcas-movil__fila:not(:has(> .wp-block-group__inner-container)) {
    display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 16px 8px !important; margin: 0 !important; max-width: none !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ck-marcas-movil .ck-marcas-movil__fila ::-webkit-scrollbar,
.ck-marcas-movil .ck-marcas-movil__fila::-webkit-scrollbar { display: none; }
.ck-marcas-movil .ck-marcas-movil__fila .wp-block-image { flex: 0 0 31%; margin: 0 !important; scroll-snap-align: start; }
.ck-marcas-movil .ck-marcas-movil__fila img { width: 100%; height: auto; display: block; }
.ck-marcas-movil .ck-marcas-movil__ayuda { text-align: center; color: #6c6c6c; font-size: .875rem; margin: 8px 0 0; }

/* ---------- Menú móvil (offcanvas) en acordeón ---------- */
@media (max-width: 991.98px) {
    .navbar-toggler { min-width: 48px; min-height: 48px; }
    #offcanvasNavbar .offcanvas-header { padding: 8px 8px 8px 16px !important; border-bottom: 1px solid #e6e6e6; }
    #offcanvasNavbar .offcanvas-header .btn { min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
    #offcanvasNavbar .offcanvas-body { display: flex; flex-direction: column; padding: 0 !important; }
    #offcanvasNavbar .navbar-nav { padding: 0 !important; }
    #offcanvasNavbar .navbar-nav > hr { margin: 0 !important; border-color: #e6e6e6 !important; opacity: 1; }

    #offcanvasNavbar .navbar-nav > .nav-item { margin: 0 !important; }
    #offcanvasNavbar .navbar-nav > .nav-item > .nav-link,
    #offcanvasNavbar .custom-dropdown .nav-link {
        display: flex !important; align-items: center; justify-content: space-between; width: 100%;
        min-height: 56px; padding: 0 16px 0 24px !important; margin: 0 !important;
        font-family: 'ACTEasy-Bold', 'ACTEasy', sans-serif; font-size: 1.125rem; color: #212529 !important; text-align: left;
        pointer-events: auto !important; cursor: pointer;
    }
    #offcanvasNavbar .custom-dropdown .dropdown-toggle::after {
        display: inline-block !important; content: ""; width: 9px; height: 9px; margin: -4px 4px 0 auto;
        border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); transition: transform .2s ease; vertical-align: middle;
    }
    #offcanvasNavbar .custom-dropdown .dropdown-menu { display: none !important; }
    #offcanvasNavbar .custom-dropdown.abierto .dropdown-menu {
        display: block !important; position: static !important; background-color: var(--light, #f8f8f8);
        padding: 8px 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0;
    }
    #offcanvasNavbar .custom-dropdown.abierto .nav-link { color: var(--primary, #E2211C) !important; box-shadow: inset 4px 0 0 var(--primary, #E2211C); }
    #offcanvasNavbar .custom-dropdown.abierto .dropdown-toggle::after { transform: rotate(-135deg); margin-top: 4px; }
    #offcanvasNavbar .custom-dropdown .dropdown-item {
        display: flex; align-items: center; min-height: 48px; padding: 0 16px 0 40px !important; margin: 0 !important;
        border: 0 !important; font-size: 1rem; color: #212529; white-space: normal; background: none;
    }
    #offcanvasNavbar .custom-dropdown .dropdown-item:active,
    #offcanvasNavbar .custom-dropdown .dropdown-item:hover { color: var(--primary, #E2211C); background: none; }

    /* Pie fijo del menú: CTA ContigoCK y ayuda */
    #offcanvasNavbar .ck-menu-pie { margin-top: auto; padding: 16px 16px 24px; background-color: var(--light, #f8f8f8); text-align: center; }
    #offcanvasNavbar .ck-menu-pie__cta {
        display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px;
        background-color: var(--primary, #E2211C); color: var(--white, #fff) !important; text-decoration: none; font-size: 1rem;
    }
    #offcanvasNavbar .ck-menu-pie__cta img { height: 24px; width: auto; }
    #offcanvasNavbar .ck-menu-pie__ayuda { margin: 12px 0 0; font-size: .875rem; color: #6c6c6c; }
    #offcanvasNavbar .ck-menu-pie__ayuda a { color: inherit; }
}
@media (min-width: 992px) {
    #offcanvasNavbar .ck-menu-pie { display: none; }
}