/* ============================================================ RESPONSIVE CSS — VivreEspagne Mobile-first: base = móvil, escalamos hacia arriba Breakpoints: sm 480px · md 768px · lg 1024px · xl 1200px ============================================================ */ /* ── MOBILE BASE (< 480px) ── */ .services-grid { grid-template-columns: 1fr; } .profiles-grid { grid-template-columns: repeat(2, 1fr); } .packs-grid { grid-template-columns: 1fr; } .reviews-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; gap: var(--space-4); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .trust-band__grid { grid-template-columns: 1fr; } .mini-about { grid-template-columns: 1fr; } .about-hero { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); } .process-steps::before { display: none; } .trust-item { border-right: none; border-bottom: 1px solid rgba(245,240,232,0.10); } .trust-item:last-child { border-bottom: none; } .hero__content { padding-block: var(--space-16); } .hero__ctas { flex-direction: column; align-items: flex-start; } .hero__ctas .btn { width: 100%; justify-content: center; } .section { padding-block: var(--space-12); } .site-nav { display: none; } .nav-toggle { display: flex; } .header__actions .btn { display: none; } /* Oculta CTA desktop en móvil */ .header__actions .lang-switcher { display: flex; } .cta-banner__ctas { flex-direction: column; align-items: center; } .cta-banner__ctas .btn { width: 100%; max-width: 360px; justify-content: center; } .footer__bottom { flex-direction: column; text-align: center; } .footer__legal-links { justify-content: center; } .inner-nav { top: var(--header-h); } /* ── SM (≥ 480px) ── */ @media (min-width: 480px) { .profiles-grid { grid-template-columns: repeat(2, 1fr); } .hero__ctas { flex-direction: row; flex-wrap: wrap; } .hero__ctas .btn { width: auto; } .cta-banner__ctas .btn { width: auto; } .cta-banner__ctas { flex-direction: row; } } /* ── MD (≥ 768px) ── */ @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .profiles-grid { grid-template-columns: repeat(3, 1fr); } .packs-grid { grid-template-columns: 1fr; } .reviews-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(4, 1fr); } .trust-band__grid { grid-template-columns: repeat(3, 1fr); } .mini-about { grid-template-columns: 1fr 1fr; gap: var(--space-10); } .about-hero { grid-template-columns: 1fr 1.4fr; gap: var(--space-12); } .footer__grid { grid-template-columns: repeat(2, 1fr); } .trust-item { border-right: 1px solid rgba(245,240,232,0.10); border-bottom: none; } .trust-item:last-child { border-right: none; } .process-steps::before { display: none; } .nav-toggle { display: none; } .site-nav { display: flex; } .header__actions .btn { display: inline-flex; } .packs-grid { grid-template-columns: repeat(2, 1fr); } } /* ── LG (≥ 1024px) ── */ @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); } .profiles-grid { grid-template-columns: repeat(5, 1fr); } .packs-grid { grid-template-columns: repeat(3, 1fr); } .reviews-grid { grid-template-columns: repeat(3, 1fr); } .blog-grid { grid-template-columns: repeat(3, 1fr); } .process-steps { grid-template-columns: repeat(4, 1fr); } .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } .process-steps::before { display: block; } .section { padding-block: var(--section-py); } } /* ── XL (≥ 1200px) ── */ @media (min-width: 1200px) { :root { --container-px: 32px; } } /* ── BARRA DE ADMIN WORDPRESS ── */ /* WP añade clase .admin-bar al cuando el usuario está logueado */ .admin-bar .site-header { top: 32px; /* Altura barra admin desktop */ } .admin-bar .mobile-nav { top: calc(var(--header-h) + 32px); } .admin-bar .inner-nav { top: calc(var(--header-h) + 32px); } @media screen and (max-width: 782px) { /* En móvil la barra de admin mide 46px */ .admin-bar .site-header { top: 46px; } .admin-bar .mobile-nav { top: calc(var(--header-h) + 46px); } .admin-bar .inner-nav { top: calc(var(--header-h) + 46px); } } /* ── PRINT ── */ @media print { .site-header, .wa-float, .mobile-nav, .btn--whatsapp { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; } } /* ── ACCESIBILIDAD: reducir movimiento ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }