/* =============================================================================
   responsive.css — breakpoints mobile-first.
   Base (320–599px) definida en style.css.
   ========================================================================== */

/* --- 375px+ : ajustes finos de teléfonos medianos ------------------------- */
@media (min-width: 375px) {
    :root { --gutter: 22px; }
    .hero-actions { flex-direction: row; flex-wrap: wrap; }
    .hero-actions .btn { flex: 1 1 auto; min-width: 160px; }
}

/* --- 600px+ : tablets verticales ------------------------------------------ */
@media (min-width: 600px) {
    :root { --section-y: 68px; --gutter: 26px; }

    .offers-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }

    .cookie-inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .cookie-actions { justify-content: flex-end; }

    .cookie-banner { left: 20px; right: 20px; bottom: 20px; }
    .form-card { padding: 32px; }
}

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

    .hero { padding-top: 64px; }
    .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: start; }
    .verify-panel { padding: 26px; position: sticky; top: 96px; }

    .page-head { padding-block: 60px 44px; }

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

    .casino-row { padding: 28px; }
    .accordion-trigger { font-size: 1.06rem; padding: 24px 6px; }
    .site-footer { padding-block: 64px 36px; }
}

/* --- 960px+ : navegación horizontal --------------------------------------- */
@media (min-width: 960px) {
    :root { --section-y: 88px; --gutter: 32px; }

    .nav-toggle { display: none; }

    .primary-nav {
        display: flex !important;
        position: static;
        align-items: center;
        gap: 26px;
        background: transparent;
        border: 0;
        padding: 0;
    }

    .nav-list {
        display: flex;
        align-items: center;
        gap: 24px;
        margin: 0;
    }
    .nav-list li { border-bottom: 0; }
    .nav-list a {
        padding: 6px 0;
        font-size: 0.93rem;
        font-weight: 500;
        color: #C9D1E1;
        border-bottom: 2px solid transparent;
    }
    .nav-list a[aria-current="page"] { border-bottom-color: var(--accent); }
    .nav-cta { width: auto; }

    .header-inner { min-height: 76px; }
    .brand-name { font-size: 1.08rem; }

    .offers-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .feature-grid { grid-template-columns: repeat(3, 1fr); }

    .footer-top { grid-template-columns: 1.1fr 1.4fr; gap: 48px; }
    .footer-cols { grid-template-columns: repeat(3, 1fr); }

    .offer-card { padding: 30px 26px 26px; }
    .compare-table th, .compare-table td { padding: 16px 20px; }
}

/* --- 1200px+ : escritorio amplio ------------------------------------------ */
@media (min-width: 1200px) {
    :root { --section-y: 100px; }

    .hero { padding-top: 80px; }
    .hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 60px; }
    .hero-lead { font-size: 1.12rem; }
    .section-lead { font-size: 1.06rem; }
    .offers-grid { gap: 28px; }
}

/* --- 1600px+ : pantallas grandes ------------------------------------------ */
@media (min-width: 1600px) {
    :root { --maxw: 1280px; }
}

/* --- Impresión ------------------------------------------------------------ */
@media print {
    body { background: #fff; color: #000; }
    .site-header, .site-footer, .cookie-banner, .back-to-top,
    .hero-actions, .nav-toggle, .skip-link { display: none !important; }
    .accordion-panel[hidden] { display: block !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}