/* responsive.css — adaptación móvil y tableta */

@media (max-width: 900px) {
  .banda-cifras .contenedor {
    grid-template-columns: repeat(2, 1fr);
  }

  .banda-cifras .cifra-item:nth-child(2) {
    border-right: none;
  }

  .banda-cifras .cifra-item:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .bloque-sobre {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .bloque-sobre .imagen-sobre img {
    height: 300px;
  }

  .bloque-contacto {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .pie-pagina .bloque-pie {
    grid-template-columns: 1fr 1fr;
  }

  .pie-pagina .bloque-pie .columna-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .barra-top .contenedor {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .barra-top .datos-contacto {
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }

  .cabecera .contenedor {
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav-principal ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }

  .nav-principal ul li a {
    font-size: 0.83rem;
    padding: 6px 12px;
  }

  .banner-principal {
    min-height: 420px;
  }

  .banner-principal .contenido-central {
    padding: 48px 0;
  }

  .banner-principal .acciones {
    flex-direction: column;
    gap: 10px;
  }

  .btn-primario,
  .btn-secundario {
    justify-content: center;
    width: 100%;
    max-width: 280px;
  }

  .banda-cifras .contenedor {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.2);
  }

  .banda-cifras .cifra-item {
    border-right: none;
    background: var(--verde);
  }

  .grilla-servicios {
    grid-template-columns: 1fr;
  }

  .tabla-precios thead th:nth-child(2) {
    display: none;
  }

  .tabla-precios tbody td:nth-child(2) {
    display: none;
  }

  .pie-pagina .bloque-pie {
    grid-template-columns: 1fr;
  }

  .pie-pagina .linea-inferior {
    flex-direction: column;
    text-align: center;
  }

  .seccion {
    padding: 52px 0;
  }

  .titulo-bloque {
    margin-bottom: 36px;
  }
}

@media (max-width: 420px) {
  .logotipo .nombre-centro strong {
    font-size: 1rem;
  }

  .banner-principal h1 {
    font-size: 1.7rem;
  }

  .tabla-precios thead th,
  .tabla-precios tbody td {
    padding: 12px 16px;
  }
}