/**
 * Nexar Host — optimización móvil (solo pantallas < 768px).
 * No modifica estilos de escritorio.
 */
@media (max-width: 767px) {
  .container {
    width: min(100% - 1.25rem, 80rem);
  }

  /* Espaciado general entre secciones */
  .section {
    padding: 2.75rem 0;
  }

  .section-head {
    margin-bottom: 1.35rem;
  }

  .section-head h2,
  .section-head h3 {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
    margin-bottom: 0.45rem;
  }

  .section-head p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .badge {
    margin-bottom: 0.55rem;
    padding: 0.28rem 0.75rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  /* Hero más compacto */
  .hero {
    min-height: auto;
    padding: 5.25rem 0 2rem;
  }

  .hero-grid {
    gap: 1.75rem;
  }

  .logo--hero .logo-img {
    max-height: 72px;
    margin-bottom: 0.85rem;
  }

  .hero-pill {
    margin-bottom: 0.85rem;
    font-size: 0.78rem;
  }

  .hero h1 {
    font-size: clamp(1.65rem, 7vw, 2.1rem);
    margin-bottom: 0.85rem;
  }

  .hero-lead {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
  }

  .hero-actions {
    gap: 0.65rem;
    margin-bottom: 1.25rem;
  }

  .hero-actions .btn {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.8rem;
  }

  .hero-perks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.65rem;
    font-size: 0.78rem;
  }

  .terminal-wrap {
    animation: none;
    max-width: 100%;
  }

  .terminal-body {
    padding: 1rem;
  }

  .terminal-top {
    padding-bottom: 0.65rem;
    margin-bottom: 0.65rem;
  }

  .terminal pre {
    font-size: 0.72rem;
    line-height: 1.55;
  }

  .hero-carousel.has-multiple .hero-carousel-viewport {
    min-height: 8.5rem;
  }

  .hero-carousel-track {
    min-height: 8rem;
  }

  .chip-a,
  .chip-b {
    display: none;
  }

  /* Stats 2×2 */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .stat-box {
    padding: 1rem;
  }

  .stat-box svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.65rem;
  }

  .stat-num {
    font-size: clamp(1.35rem, 5vw, 1.65rem);
  }

  .stat-label {
    font-size: 0.78rem;
  }

  /* Tarjetas de servicios / pagos */
  .cards-3,
  .cards-4,
  .cards-2,
  .reco-grid {
    gap: 0.75rem;
  }

  .cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    padding: 1.1rem;
  }

  .card-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.65rem;
  }

  .card h3 {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
  }

  .card p {
    font-size: 0.8rem;
    margin-bottom: 0.65rem;
    line-height: 1.45;
  }

  .card-link {
    margin-top: 0.65rem;
    font-size: 0.8rem;
  }

  .pay-card {
    padding: 1rem 0.75rem;
  }

  .pay-card svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.65rem;
  }

  .pay-card h3 {
    font-size: 0.88rem;
  }

  .pay-card .region {
    margin: 0.25rem 0 0.4rem;
    font-size: 0.68rem;
  }

  .pay-card p {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  /* Planes MU + tablas */
  .section--mu-plans .section-head,
  .section--mu-plans .mt-4 .section-head {
    margin-bottom: 1.15rem;
  }

  .mt-4 {
    margin-top: 1.75rem;
  }

  .mu-tabs {
    gap: 0.45rem;
    margin-bottom: 1.15rem;
  }

  .mu-tab {
    padding: 0.45rem 0.95rem;
    font-size: 0.68rem;
  }

  .mu-plan-card {
    padding: 1.1rem 1rem 1.15rem;
  }

  .pricing-table th,
  .pricing-table td {
    padding: 0.75rem 0.85rem;
  }

  .pricing-table {
    font-size: 0.8rem;
  }

  .extras {
    padding: 1.25rem;
    margin-top: 1.5rem;
  }

  .extras h3 {
    font-size: 1rem;
    margin-bottom: 0.65rem;
  }

  .extras li {
    font-size: 0.85rem;
    padding: 0.35rem 0;
  }

  /* WebEngine promo */
  .we-promo {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .we-promo__grid {
    gap: 1.25rem;
  }

  .we-promo__highlights {
    gap: 0.45rem;
    margin-bottom: 1rem;
  }

  .we-promo__highlights li {
    font-size: 0.84rem;
  }

  .we-promo__summary {
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
  }

  /* Ofertas */
  .offers-banner--pro {
    padding: 0.85rem 0 0.35rem;
  }

  .offers-outside {
    padding: 1.75rem 0 0.75rem;
  }

  .offers-outside__head {
    margin-bottom: 1rem;
  }

  .offers-outside__grid {
    gap: 0.85rem;
    grid-template-columns: 1fr;
  }

  /* Servidores alojados */
  .hosted-servers {
    padding: 2rem 0 2.5rem;
  }

  .hosted-servers__head-wrap {
    margin-bottom: 1.25rem;
  }

  .hosted-logo {
    width: 9.5rem;
    height: 3.75rem;
    padding: 0.45rem 0.85rem;
  }

  .hosted-marquee__track {
    gap: 1.25rem;
  }

  /* Recomendados */
  .reco-card {
    padding: 0.95rem;
    gap: 0.75rem;
  }

  .reco-card__icon {
    width: 2.15rem;
    height: 2.15rem;
  }

  .reco-card__body strong {
    font-size: 0.88rem;
  }

  .reco-card__body span {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  /* Testimonios */
  .testimonials-section .section-head {
    margin-bottom: 1.15rem;
  }

  .testimonial-form-wrap {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
  }

  .testimonial-form-wrap h3 {
    font-size: 1.05rem;
  }

  .testimonial-form-wrap .hint {
    margin-bottom: 1rem;
    font-size: 0.82rem;
  }

  .testimonial-form .field {
    margin-bottom: 0.85rem;
  }

  .testimonial-form .field textarea {
    min-height: 5.5rem;
  }

  .quote {
    padding: 1.1rem;
  }

  .quote .quote-text {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  /* FAQ */
  .faq {
    padding: 0 0.85rem;
  }

  .faq-q {
    padding: 0.85rem 0;
    font-size: 0.84rem;
    gap: 0.65rem;
  }

  .faq-a {
    padding-bottom: 0.85rem;
    font-size: 0.82rem;
    line-height: 1.55;
  }

  /* Contacto */
  .contact-grid {
    gap: 1rem;
  }

  .contact-side,
  .contact-form {
    padding: 1.15rem;
  }

  /* Footer */
  .site-footer {
    padding: 2.5rem 0 1.5rem;
  }

  .footer-grid {
    gap: 1.5rem;
  }

  /* Menos animación en táctil */
  .card:hover,
  .reco-card:hover,
  .hosted-logo:hover {
    transform: none;
  }
}

@media (max-width: 420px) {
  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .hero-perks {
    grid-template-columns: 1fr;
  }

  .cards-4 {
    grid-template-columns: 1fr;
  }
}