/* ============================================================
   bonoria.pro — adaptación a distintas pantallas
   ============================================================ */

@media (max-width: 1040px) {
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .cards { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .hero-grid { gap: 38px; }
}

@media (max-width: 900px) {
    body { font-size: 16px; }

    .nav-toggle { display: inline-block; order: 3; }

    .head-inner { flex-wrap: wrap; gap: 14px; }

    .nav-zone {
        order: 4;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        display: none;
        padding-bottom: 10px;
    }
    .nav-zone.is-open { display: flex; }

    .nav { width: 100%; }
    .nav ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
    .nav li { width: 100%; border-bottom: 1px solid rgba(200, 155, 60, .18); }
    .nav a { display: block; padding: 13px 0; font-size: 1rem; border-bottom: 0; }
    .nav a.is-current { border-bottom: 0; }

    .hero-grid { grid-template-columns: 1fr; }
    .ficha { order: 2; }

    .boletas { grid-template-columns: 1fr; }
    .subscribe-grid { grid-template-columns: 1fr; gap: 30px; }
    .band { padding: 64px 0; }
    .hero { padding: 72px 0 80px; }
    .hero--page { padding: 56px 0 60px; }
}

@media (max-width: 640px) {
    .wrap { padding: 0 18px; }
    .head-inner { padding: 14px 18px; }

    .agebar { font-size: .68rem; letter-spacing: .1em; }

    .brand { font-size: 1.35rem; }
    .brand small { display: none; }

    .cards, .cards--2 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; gap: 18px; }

    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-inline { grid-template-columns: 1fr; align-items: stretch; }
    .form-inline .btn { width: 100%; }

    .form-panel { padding: 26px 20px; }
    .boleta { padding: 26px 22px; }
    .boleta .btn { display: block; }

    .foot-grid { grid-template-columns: 1fr; gap: 30px; }
    .foot-bottom { flex-direction: column; align-items: flex-start; }

    .hero-actions .btn { width: 100%; text-align: center; }

    .filete { margin: 32px 0; }
    .error-block { padding: 70px 0 80px; }
}

@media print {
    .site-head, .site-foot, .agebar, .hero-actions, .nav-toggle { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .hero, .band--felt { background: #fff; color: #000; }
    .hero h1, .band--felt h2, .band--felt h3 { color: #000; }
    .boleta, .card, table.cmp { box-shadow: none; }
}