/* Chemestry Césped: pulido de la PORTADA en móvil (29-sep-2026).
   Solo la enlaza index.html (las páginas de zona no la cargan) y todo va
   dentro de @media (max-width: 640px): escritorio y tablet no cambian.
   Va después de styles.css, así que a igual especificidad gana esta. */

@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 34px; }
  .section-title { font-size: 32px; }
  .section-sub { font-size: 15px; }

  /* Cabecera: la marca cabe junto al botón del menú (antes lo empujaba fuera) */
  .header-inner { gap: 12px; min-height: 64px; }
  .brand { gap: 9px; min-width: 0; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { font-size: 16px; letter-spacing: 0.1em; }
  .brand-tagline { font-size: 7.5px; letter-spacing: 0.22em; }
  .nav-toggle { flex: none; padding: 8px 10px; }
  .nav { top: 64px; }

  /* Héroe */
  .hero { padding: 104px 0 64px; }
  .hero .h1-eyebrow { font-size: 10.5px; letter-spacing: 0.2em; line-height: 1.6; text-wrap: balance; }
  .hero h1 { font-size: 40px; }
  .hero-lead { margin-top: 18px; font-size: 16px; line-height: 1.6; }
  .hero-checks { gap: 8px 16px; margin-top: 20px; }
  .hero-checks li { font-size: 11.5px; letter-spacing: 0.1em; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
  .hero-cta .btn { justify-content: center; }

  /* Cifras en baldosas: número arriba, texto debajo */
  .cifras { padding: 22px 0; }
  .cifras-grid { gap: 10px; }
  .cifras .cifra {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px 14px;
    text-align: center;
    border: 1px solid var(--hairline-cream);
    border-radius: 14px;
    background: rgba(242, 238, 227, 0.03);
  }
  .cifra-num { font-size: 34px; }
  .cifra-txt { font-size: 12px; line-height: 1.35; }

  /* Beneficios: misma rejilla de 2, más apretada */
  .benefits-grid { padding-block: 30px; gap: 22px 12px; }
  .benefit { padding: 0 4px; }
  .benefit svg { width: 24px; height: 24px; margin-bottom: 8px; }
  .benefit h3 { font-size: 11px; letter-spacing: 0.14em; }
  .benefit p { font-size: 12.5px; }

  /* Servicios: tarjeta horizontal con el icono a la izquierda */
  .servicios-grid { gap: 12px; }
  .servicio {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 16px;
    align-items: start;
    padding: 18px;
  }
  .servicio:hover { transform: none; }
  .servicio-ico { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: 46px; margin: 0; }
  .servicio h3 { grid-column: 2; margin-top: 3px; }
  .servicio p { grid-column: 2; margin-top: 6px; font-size: 14px; }

  /* Espacios: fotos algo más bajas */
  .spaces-grid { gap: 18px; }
  .space-photo { aspect-ratio: 16 / 10; }
  .space-body { padding: 20px 20px 22px; }
  .space-card:hover { transform: none; }

  /* Gamas: lista compacta (foto a la izquierda) en vez de 10 tarjetas a pantalla completa */
  .gamas-grid { gap: 12px; }
  .gamas-grid + .gamas-familia { margin-top: 36px; }
  .gama-card { flex-direction: row; align-items: stretch; }
  .gama-card:hover { transform: none; }
  .gama-photo { flex: 0 0 116px; aspect-ratio: auto; min-height: 132px; }
  .gama-photo::after { height: 100%; background: linear-gradient(90deg, transparent 55%, rgba(10, 15, 10, 0.35)); }
  .gama-card .gama-mm { top: 8px; left: 8px; right: auto; padding: 3px 8px; font-size: 10.5px; }
  .gama-body { min-width: 0; gap: 4px; padding: 14px 16px 14px; justify-content: center; }
  .gama-name { font-size: 24px; }
  .gama-claim { flex: none; font-size: 13px; line-height: 1.45; }
  .gama-more { margin-top: 4px; font-size: 10.5px; }

  /* Proceso: número a la izquierda y separadores finos */
  .process-grid { gap: 22px; }
  .step { display: grid; grid-template-columns: 58px 1fr; column-gap: 12px; padding-top: 0; }
  .step::before { display: none; }
  .step + .step { padding-top: 22px; border-top: 1px solid var(--hairline-cream); }
  .step-num { grid-column: 1; grid-row: 1 / span 2; font-size: 42px; }
  .step h3 { grid-column: 2; margin-top: 6px; }
  .step p { grid-column: 2; margin-top: 6px; font-size: 14px; }

  /* Zonas: rejilla ordenada de 2 columnas */
  .zonas-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .zonas-home-grid a { justify-content: flex-start; padding: 11px 12px; border-radius: 12px; font-size: 13px; line-height: 1.25; }
  .zonas-home-grid a svg { flex: none; }
  .zonas-home-grid a:hover { transform: none; }

  /* Contacto: 16px en los campos para que iOS no haga zoom al tocarlos */
  .contact-grid { gap: 36px; }
  /* el horario y el email no se pueden partir y ensanchaban la página en móviles de 360px */
  .contact-grid > * { min-width: 0; }
  .contact-item-value { overflow-wrap: anywhere; }
  .contact-list { gap: 14px; }
  .field input, .field textarea { font-size: 16px; }
}

/* Móviles muy estrechos (≤360px): el reCAPTCHA de Google mide 304px fijos y no
   cabía en el formulario; se escala un poco y el formulario gana margen. */
@media (max-width: 360px) {
  .form { padding: 22px 14px; }
  .g-recaptcha { transform: scale(0.9); transform-origin: left top; margin-bottom: 10px; }
}