/* =================================================================
   PBA Guía — breakpoints
   Base = 320px en adelante (definida en style.css).
   ================================================================= */

/* --- 360px+ : dos botones lado a lado en el hero --- */
@media (min-width: 380px) {
    .hero__actions { flex-direction: row; flex-wrap: wrap; }
    .hero__actions .btn { flex: 1 1 auto; }
}

/* --- 600px+ : rejillas de dos columnas --- */
@media (min-width: 600px) {
    :root { --gutter: 26px; }

    .section { padding: 4rem 0; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .offer-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-facts { grid-template-columns: repeat(2, 1fr); }
    .cookie-banner { left: auto; right: 20px; bottom: 20px; max-width: 460px; }
    .cookie-banner__actions .btn { flex: 0 1 auto; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .casino-row__data { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.4rem; }
}

/* --- 768px+ : tablet --- */
@media (min-width: 768px) {
    body { font-size: 17px; }

    .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
    .hero { padding: 4.4rem 0 4rem; }
    .hero__panel { padding: 1.6rem 1.8rem; }
    .cta-band { padding: 2.6rem 2rem; }
    .page-head { padding: 3rem 0 1.4rem; }
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.4rem; }
    .offer-card { padding: 1.6rem 1.5rem 1.4rem; }
}

/* --- 960px+ : escritorio, navegación horizontal --- */
@media (min-width: 960px) {
    .nav-toggle { display: none; }

    .primary-nav {
        display: flex !important;
        position: static;
        align-items: center;
        gap: 1.6rem;
        background: none;
        border: 0;
        padding: 0;
    }
    .primary-nav__list { display: flex; align-items: center; gap: 1.4rem; margin: 0; }
    .primary-nav__list li { border-bottom: 0; }
    .primary-nav__list a { padding: .3rem 0; font-size: .92rem; position: relative; }
    .primary-nav__list a[aria-current="page"]::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
        height: 2px; background: var(--accent); border-radius: 2px;
    }
    .nav-cta { width: auto; }

    .offer-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

    .hero__inner {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 3rem;
        align-items: center;
    }
    .hero__panel { margin-top: 0; }
    .hero-facts { grid-template-columns: 1fr; }

    .compare { min-width: 0; }
    .table-hint { display: none; }

    .split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.4rem; align-items: start; }
}

/* --- 1200px+ : más aire --- */
@media (min-width: 1200px) {
    .section { padding: 4.8rem 0; }
    .hero { padding: 5.2rem 0 4.6rem; }
}

/* --- 1600px+ : contenedor un poco más ancho --- */
@media (min-width: 1600px) {
    :root { --wrap: 1260px; }
}