/* ============================================================
   RCAD PRO — Mobile Responsive CSS
   Breakpoints: 480px, 600px, 768px, 991px
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   FIX ORBITAL PARENT THEME — Neutralizar contenedor padre
   El tema Orbital aplica max-width/padding al .site-main y
   usa clases .container que rompen el layout en mobile.
══════════════════════════════════════════════════════════ */

/* Reset SOLO overflow horizontal en home — no tocar max-width en desktop */
body.home .site-main,
body.home #content,
body.home .site-content,
body.home main {
    overflow-x: hidden !important;
}

/* El rcad-hero ya tiene su propio padding */
.rcad-hero {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* El outer wrapper gestiona su propio ancho */
.rcad-home-outer {
    box-sizing: border-box !important;
}

/* Secciones individuales: no deben desbordar */
.rcad-home-section,
.rcad-home-wrap,
.rcad-home-wrap > * {
    box-sizing: border-box !important;
}

/* Cat cards: evitar desbordamiento del grid */
.rcad-cat-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.rcad-cat-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
}
.rcad-cat-card__name,
.rcad-cat-card__desc,
.rcad-cat-card__cta {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* SEO columns: evitar desbordamiento */
.rcad-seo-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.rcad-seo-col {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-break: break-word !important;
}
.rcad-seo-col__text,
.rcad-seo-col__title {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Últimas publicaciones */
.rcad-lc,
.rcad-lc__title,
.rcad-lc__cat {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ══════════════════════════════════════════════════════════
   BASE MOBILE — Prevenir desbordamiento global
══════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box !important;
}
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
img, svg, video, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* ══════════════════════════════════════════════════════════
   VIEWPORT META — asegurar viewport correcto
   (esto se hace en PHP, aquí solo CSS de respaldo)
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TABLET (≤ 991px)
══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* Neutralizar contenedor Orbital solo en mobile/tablet */
    body.home .site-main,
    body.home #content,
    body.home .site-content,
    body.home .entry-content,
    body.home main,
    body.home .container,
    body.home #content-wrapper,
    body.home .content-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Layout principal: sidebar debajo del contenido */
    .rcad-home-outer {
        flex-direction: column !important;
        padding: 16px 16px 32px !important;
        gap: 20px !important;
    }
    .rcad-home-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hero */
    .rcad-hero {
        padding: 40px 16px 28px !important;
    }
    .rcad-hero__h1 {
        font-size: 28px !important;
    }
    .rcad-hero__sub {
        font-size: 15px !important;
    }

    /* Stats bar: menos padding entre items */
    .rcad-hero__stat {
        padding: 0 20px !important;
    }

    /* SEO grid: 2 columnas en tablet */
    .rcad-seo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Últimas publicaciones: 2 columnas */
    .rcad-latest-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Cat grid: 3 columnas */
    .rcad-cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Sidebar widget */
    .rcad-sidebar-widget {
        margin-bottom: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE GRANDE (≤ 768px)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Layout ─────────────────────────────────────────── */
    .rcad-home-outer {
        padding: 12px 12px 28px !important;
        gap: 16px !important;
    }
    .rcad-home-section {
        padding: 18px 14px !important;
        margin-bottom: 16px !important;
    }

    /* ── Hero ───────────────────────────────────────────── */
    .rcad-hero {
        padding: 32px 14px 24px !important;
    }
    .rcad-hero__h1 {
        font-size: 22px !important;
        letter-spacing: -0.01em !important;
        margin-bottom: 10px !important;
    }
    .rcad-hero__sub {
        font-size: 14px !important;
        margin-bottom: 22px !important;
    }

    /* Buscador: columna en mobile */
    .rcad-hero__search {
        max-width: 100% !important;
        margin: 0 0 18px !important;
    }
    .rcad-hero__search-wrap {
        flex-direction: column !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    .rcad-hero__input {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 0 !important;
        width: 100% !important;
    }
    .rcad-hero__btn {
        border-radius: 0 0 10px 10px !important;
        padding: 14px 20px !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 14px !important;
        justify-content: center !important;
    }
    .rcad-hero__search-icon {
        display: none !important;
    }

    /* Tags populares: más pequeñas y fluidas */
    .rcad-hero__tags {
        gap: 6px !important;
        justify-content: flex-start !important;
    }
    .rcad-hero__tags-label {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }
    .rcad-hero__tag {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* Stats bar: wrap en 2 filas de 2 */
    .rcad-hero__stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
        border-top: 1px solid rgba(255,255,255,.1) !important;
        padding-top: 20px !important;
    }
    .rcad-hero__stat {
        padding: 10px 8px !important;
        border-right: 1px solid rgba(255,255,255,.1) !important;
        border-bottom: 1px solid rgba(255,255,255,.1) !important;
    }
    .rcad-hero__stat:nth-child(2n) {
        border-right: none !important;
    }
    .rcad-hero__stat:nth-last-child(-n+2) {
        border-bottom: none !important;
    }
    .rcad-hero__stat-n {
        font-size: 20px !important;
    }
    .rcad-hero__stat-label {
        font-size: 10px !important;
    }
    .rcad-hero__stat-emoji {
        font-size: 18px !important;
    }

    /* ── Section header ─────────────────────────────────── */
    .rcad-sh {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }
    .rcad-sh__title {
        font-size: 17px !important;
    }
    .rcad-sh__sub {
        font-size: 12px !important;
    }
    .rcad-sh__more {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }

    /* ── Carrusel de tarjetas ───────────────────────────── */
    .rcad-rc {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
    .rcad-rc__title {
        font-size: 12px !important;
    }
    .rcad-rc__body {
        padding: 8px 10px 4px !important;
    }

    /* ── Cat grid: 2 columnas ───────────────────────────── */
    .rcad-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .rcad-cat-card {
        padding: 14px 10px 12px !important;
    }
    .rcad-cat-card__emoji {
        font-size: 28px !important;
    }
    .rcad-cat-card__name {
        font-size: 12px !important;
    }
    .rcad-cat-card__desc {
        display: none !important;
    }

    /* ── SEO Grid: 1 columna ────────────────────────────── */
    .rcad-seo-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .rcad-seo-col {
        padding: 16px 14px !important;
    }

    /* ── Últimas publicaciones: 1 columna ───────────────── */
    .rcad-latest-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── Silos sidebar ──────────────────────────────────── */
    .rcad-silos {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .rcad-silo {
        padding: 12px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .rcad-silo__arrow {
        display: none !important;
    }
    .rcad-silo__desc {
        font-size: 11px !important;
        white-space: normal !important;
    }

    /* ── SEO footer ─────────────────────────────────────── */
    .rcad-seo-footer {
        padding: 14px 14px !important;
    }

    /* ── Sidebar widgets en grid ────────────────────────── */
    .rcad-home-sidebar .rcad-home-section {
        margin-bottom: 14px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE PEQUEÑO (≤ 600px)
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* Layout más compacto */
    .rcad-home-outer {
        padding: 10px 10px 24px !important;
        gap: 14px !important;
    }
    .rcad-home-section {
        padding: 14px 12px !important;
        border-radius: 8px !important;
    }

    /* Hero más compacto */
    .rcad-hero {
        padding: 24px 12px 20px !important;
    }
    .rcad-hero__h1 {
        font-size: 20px !important;
    }

    /* Carrusel: tarjetas más pequeñas */
    .rcad-rc {
        flex: 0 0 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
    .rcad-hc__track {
        gap: 12px !important;
    }
    .rcad-hc__btn {
        width: 30px !important;
        height: 30px !important;
    }

    /* Cat grid: 2 columnas compactas */
    .rcad-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Silos: columna única */
    .rcad-silos {
        grid-template-columns: 1fr !important;
    }
    .rcad-silo {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 12px !important;
    }
    .rcad-silo__arrow {
        display: block !important;
    }

    /* Últimas publicaciones: forzar 1 columna */
    .rcad-latest-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE MUY PEQUEÑO (≤ 480px)
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Padding mínimo */
    .rcad-home-outer {
        padding: 8px 8px 20px !important;
    }
    .rcad-home-section {
        padding: 12px 10px !important;
    }

    /* Hero mínimo */
    .rcad-hero {
        padding: 20px 10px 18px !important;
    }
    .rcad-hero__h1 {
        font-size: 19px !important;
        line-height: 1.2 !important;
    }
    .rcad-hero__sub {
        font-size: 13px !important;
        margin-bottom: 18px !important;
    }

    /* Stats en 2x2 */
    .rcad-hero__stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .rcad-hero__stat-n {
        font-size: 18px !important;
    }

    /* Cat grid: 1 columna solo en muy pequeño */
    .rcad-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Carrusel mínimo */
    .rcad-rc {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
    .rcad-rc__footer {
        padding: 6px 8px 10px !important;
    }
    .rcad-rc__cta {
        font-size: 10px !important;
        padding: 7px 6px !important;
    }

    /* Section header: stack vertical */
    .rcad-sh {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .rcad-sh__right {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Botón cargar más */
    .rcad-loadmore-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
    }

    /* Sidebar: full width con scroll */
    .rcad-sidebar-widget {
        width: 100% !important;
    }

    /* SEO col: más compacta */
    .rcad-seo-col {
        padding: 12px 12px !important;
    }
    .rcad-seo-col__title {
        font-size: 14px !important;
    }
    .rcad-seo-col__text {
        font-size: 12px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   FIXES ESPECÍFICOS — Problemas vistos en capturas
══════════════════════════════════════════════════════════ */

/* Fix: tarjetas del carrusel que se cortan */
@media (max-width: 768px) {
    .rcad-hc {
        align-items: center !important;
    }
    .rcad-hc__vp {
        overflow: hidden !important;
        width: 100% !important;
    }
    .rcad-hc__track {
        padding-bottom: 8px !important;
    }
}

/* Fix: "Explora por Categoría" — tarjetas sin imagen/emoji visible */
@media (max-width: 768px) {
    .rcad-cat-card__visual {
        margin-bottom: 8px !important;
    }
    .rcad-cat-card__visual img {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Fix: contenido de tarjetas cortado a la derecha */
@media (max-width: 768px) {
    .rcad-rc__a {
        width: 100% !important;
    }
    .rcad-lc {
        width: 100% !important;
    }
}

/* Fix: texto "Descarga Bloques AutoCAD DWG Gratis" desbordado */
@media (max-width: 768px) {
    .rcad-seo-col__title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    .rcad-seo-col__text {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
        word-break: break-word !important;
    }
}

/* Fix: Últimas publicaciones — título de sección + "new" badge */
@media (max-width: 480px) {
    .rcad-lc__badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }
    .rcad-lc__body {
        padding: 10px 12px 12px !important;
    }
    .rcad-lc__title {
        font-size: 13px !important;
    }
}

/* Fix: mega-menu no visible en mobile (asegurar hamburger) */
@media (max-width: 768px) {
    .rcad-mega-nav {
        display: none !important;
    }
}

/* Fix: category-nav horizontal scroll en mobile */
@media (max-width: 768px) {
    .rcad-cat-nav,
    .category-nav-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .rcad-cat-nav::-webkit-scrollbar,
    .category-nav-bar::-webkit-scrollbar {
        display: none !important;
    }
}

/* Fix: footer no desbordado */
@media (max-width: 768px) {
    .site-footer,
    .rcad-footer {
        overflow: hidden !important;
        width: 100% !important;
    }
    .rcad-footer__inner {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 20px 14px !important;
    }
}

/* Fix: topbar en mobile */
@media (max-width: 768px) {
    .rcad-topbar {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }
    .rcad-topbar__left,
    .rcad-topbar__right {
        gap: 8px !important;
    }
}

/* Fix: News ticker en mobile */
@media (max-width: 768px) {
    .rcad-ticker-label {
        font-size: 10px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
    }
    .rcad-ticker-text {
        font-size: 12px !important;
    }
}

/* Fix: breadcrumbs en mobile */
@media (max-width: 768px) {
    .rcad-breadcrumbs,
    .breadcrumbs {
        font-size: 11px !important;
        padding: 8px 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Fix: single page — bloque de descarga */
@media (max-width: 768px) {
    .rcad-download-block {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }
    .rcad-download-block-meta {
        justify-content: center !important;
    }
    .rcad-btn-download {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Fix: Accordion en mobile */
@media (max-width: 768px) {
    .rcad-accordion-item {
        font-size: 13px !important;
    }
    .rcad-accordion-title {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
}

/* Fix: CTA Bottom en mobile */
@media (max-width: 768px) {
    .cta-bottom,
    .rcad-cta-register {
        padding: 20px 14px !important;
        text-align: center !important;
    }
    .cta-bottom__btn,
    .rcad-cta-register__btn {
        width: 100% !important;
        justify-content: center !important;
    }
}