/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .home-content__inner { grid-template-columns: 1fr; }
    .split-cols { grid-template-columns: 1fr; gap: 1rem; }
    .mvv__grid { grid-template-columns: 1fr; }
    .partner-row { grid-template-columns: 1fr; text-align: center; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .why-us { grid-template-columns: 1fr; }
    .service-cards { grid-template-columns: 1fr; }
    .coverage { grid-template-columns: 1fr; }
    .post-list { gap: 40px; }
    .about-grid { grid-template-columns: 1fr; gap: 0; }
    .serv-why__grid, .serv-cards, .clients-grid, .comp-grid { grid-template-columns: 1fr; }
    .contacto-grid { grid-template-columns: 1fr; }
    .contacto-oficina__maps { grid-template-columns: 1fr; gap: 15px; }
    .page-title { padding: 30px 0 40px; }
    .page-title h1 { font-size: 26px; line-height: 30px; }
    .contacto-datos span { font-size: 18px; line-height: 22px; }
    .socios-grid { grid-template-columns: 1fr; justify-content: stretch; min-height: 0 !important; }
    .socios-title { font-size: 30px; line-height: 40px; }
    .photo-hero--bare { height: 190px; }
    .clients-grid::after { display: none; }
    .photo-hero { padding: 60px 0 80px; }
    .photo-hero__title { font-size: 30px; line-height: 40px; }
    .serv-card figcaption { font-size: 21px; line-height: 24px; }
    .about-grid::after { display: none; }
    .page-photo { height: 240px; }
    .about-title { font-size: 22px; line-height: 24px; }
    .about-text { font-size: 18px; line-height: 21px; }
    .post__title { font-size: 21px; line-height: 25px; }
    .post__date, .post__title, .post__excerpt, .post__body { padding: 0; }
    .post__meta { margin-left: 0; margin-right: 0; }
    .post--single .post__title { font-size: 24px; line-height: 28px; }
    .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* En movil el logo ya trae sus 20px, pero la hamburguesa quedaria pegada
       al borde: se le devuelve el relleno derecho a la caja de la cabecera. */
    .navbar__inner { padding: 0 20px 0 0; }
    .navbar__toggle { display: flex; }
    .navbar__menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--white); padding: .5rem 1rem;
        box-shadow: var(--shadow-md); border-top: 3px solid var(--sky);
        z-index: 999;
    }
    .navbar__menu.open { display: block; }
    .navbar__menu ul { flex-direction: column; }
    .navbar__menu ul li { display: block; }
    .navbar__menu > ul > li::after { display: none; }
    .navbar__menu ul li a {
        padding: 10px 12px; border-bottom: 1px solid var(--border);
        display: block;
    }
    .navbar__menu ul li a.active {
        background: var(--sky); color: var(--white);
    }
    .has-dropdown .dropdown { display: none !important; }

    /* Las fotos del carrusel son panoramicas (mas o menos 2:1). Si el hero
       ocupa toda la altura de un movil en vertical, `cover` tiene que ampliar
       la foto unas cuatro veces y solo se ve una franja diminuta del centro,
       borrosa. Se le da al hero una proporcion parecida a la de la foto para
       que se vea casi entera. */
    .home-hero-block { min-height: 0; }
    .hero-v2 {
        flex: 0 0 auto;
        min-height: 260px;
        aspect-ratio: 3 / 2;
    }
    .hero-v2__slide { padding-bottom: 0; }
    .hero-v2__text-box { width: 85%; padding: 24px; }
    .hero-v2__text-box p { font-size: 1.7rem; }

    .cta-strip__inner { flex-direction: column; text-align: center; }
    .cta-strip__inner p { border-right: none; padding-right: 0; }
    .services-icons__grid { grid-template-columns: 1fr; }
    .services-icons__item { border-right: none; border-bottom: 1px solid var(--border); }
    .services-icons__item:last-child { border-bottom: none; }

    .footer__grid { grid-template-columns: 1fr; }
    .section { padding: 40px 0; }
    .post__media { margin-bottom: 34px; }
    .post__badge { left: 16px; width: 42px; height: 42px; bottom: -26px; font-size: 17px; }
    .post__meta { gap: .9rem; }
    .timeline::before { display: none; }
    .timeline__item, .timeline__item--right { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .cta-banner__inner { flex-direction: column; text-align: center; }
    .plain-list--cols { column-count: 1; }
}

@media (max-width: 480px) {
    /* Cuanto mas estrecha la pantalla, mas alto tiene que ser el hero para
       que quepa el texto sin comerse la foto. */
    .hero-v2 { aspect-ratio: 4 / 3; }

    .page-hero__content h1 { font-size: 1.6rem; }
    .hero-v2__text-box { width: 92%; padding: 18px 20px; }
    .hero-v2__text-box p { font-size: 1.3rem; }
}


/* =========================================================================
   DETALLE DE SERVICIO
   ========================================================================= */
@media (max-width: 991px) {
    .vccol--1-2,
    .vccol--1-3,
    .vccol--2-3,
    .vccol--1-4,
    .vccol--3-4,
    .vccol--1-6,
    .vccol--5-6 { width: 50%; }

    /* Sin las lineas verticales, que quedan sueltas al reacomodar */
    .vcrow--grid .vccol + .vccol::after { display: none; }

    .rt-head--style-4 .rt-title,
    .rt-head--style-3 .rt-title { font-size: 32px; line-height: 42px; }
}

@media (max-width: 767px) {
    .vccol { width: 100% !important; padding-top: 0 !important; }
    .vcrow--foto .vccol { padding-top: 60px !important; padding-bottom: 60px !important; }
    .vcrow--caja { width: 100%; }
    .rt-head--style-4 .rt-title,
    .rt-head--style-3 .rt-title { font-size: 24px; line-height: 32px; }
    .rt-head--style-3::before,
    .rt-head--style-3::after { display: none; }
    .rt-img { margin-bottom: 20px; }
}