/* ==========================================================================
   ALFA CLEAN — Responsive
   El diseno movil NO es el desktop encogido: cambia jerarquia y comportamiento.
   ========================================================================== */

/* ==========================================================================
   LAPTOP / TABLET GRANDE  (<= 1080px)
   ========================================================================== */
@media (max-width: 1080px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .servicios-detalle { grid-template-columns: repeat(2, 1fr); }
  .servicio-item--destacado { grid-column: span 2; }
  .frecuencias { grid-template-columns: repeat(3, 1fr); }
  .instagram { grid-template-columns: repeat(3, 1fr); }
  .footer__rejilla { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .confianza { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   TABLET  (<= 900px)  —  aqui aparece el menu movil
   ========================================================================== */
@media (max-width: 900px) {
  :root { --alto-nav: 68px; }

  /* Las entradas laterales empujan el elemento fuera de la pantalla mientras
     esperan a revelarse, y eso crea desplazamiento horizontal en movil.
     En pantallas estrechas todo entra desde abajo. */
  [data-anim="izquierda"],
  [data-anim="derecha"] { transform: translateY(26px); }

  .nav__menu,
  .nav__acciones .btn--contorno { display: none; }
  .nav__hamburguesa { display: flex; }

  /* El CTA de cotizar se mantiene visible en el nav incluso en movil */
  /* Objetivo tactil minimo de 44px: por debajo de eso, se falla el toque. */
  .nav__acciones { gap: var(--sp-2); }
  .nav .btn {
    padding: 0.62rem 1.15rem;
    font-size: 0.87rem;
    min-height: 44px;
  }

  .split,
  .comercial__interior,
  .rejilla--3,
  .proceso,
  .eco,
  .valores,
  .cobertura {
    grid-template-columns: 1fr;
  }

  .split--texto-derecha > .split__media { order: 0; }

  .seccion__cabecera { margin-bottom: var(--sp-6); }

  .hero { min-height: 92svh; }
  .hero__contenido { padding-block: var(--sp-7) var(--sp-8); }
  .hero__scroll { display: none; }

  .comercial__tipos { grid-template-columns: repeat(2, 1fr); }

  .campo-fila { grid-template-columns: 1fr; gap: 0; }
  .campo-fila .campo { margin-bottom: var(--sp-5); }

  .cita { max-width: 100%; }
  .ciudad__marca { font-size: 5rem; }
}

/* ==========================================================================
   MOVIL  (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {
  .rejilla--2,
  .rejilla--3,
  .rejilla--4,
  .servicios-detalle,
  .frecuencias {
    grid-template-columns: 1fr;
  }

  .servicio-item--destacado { grid-column: span 1; }

  .confianza { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-5); }

  .instagram { grid-template-columns: repeat(2, 1fr); }

  .comercial__tipos { grid-template-columns: 1fr; }

  .footer__rejilla { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__base { flex-direction: column; align-items: flex-start; }

  /* CTAs a ancho completo: mas faciles de tocar */
  .hero__ctas .btn,
  .conversion__ctas .btn,
  .hero-interno__ctas .btn,
  .gracias__ctas .btn {
    width: 100%;
  }
  .hero__ctas, .conversion__ctas, .hero-interno__ctas, .gracias__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__pie { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  /* EN MOVIL NO HAY HOVER: la lista de servicios se muestra siempre */
  .tarjeta-servicio__lista {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }

  /* El boton flotante de WhatsApp se reduce a solo icono para no tapar contenido */
  .wa-flotante {
    padding: 0;
    width: 58px; height: 58px;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
  }
  .wa-flotante__texto { display: none; }
  .wa-flotante__icono { width: 100%; height: 100%; background: transparent; }
  .wa-flotante:hover .wa-flotante__icono { background: transparent; }
  .wa-flotante__icono svg { width: 27px; height: 27px; }

  .form-acciones { flex-direction: column-reverse; align-items: stretch; }
  .form-acciones .btn { width: 100%; }

  .progreso__pasos { font-size: 0.68rem; }

  .formulario { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-md); }

  .opciones { grid-template-columns: 1fr; }
  .casillas { grid-template-columns: 1fr; }

  .ciudad__marca { display: none; }

  .acordeon__boton { font-size: 1.05rem; padding-block: var(--sp-4); }
}

/* ==========================================================================
   MOVIL PEQUENO  (<= 380px)
   ========================================================================== */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .nav__logo img { height: 36px; }
  .nav .btn { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
}

/* ==========================================================================
   PANTALLAS MUY ANCHAS
   ========================================================================== */
@media (min-width: 1600px) {
  :root { --ancho-max: 1400px; }
}

/* ==========================================================================
   AJUSTES POR CAPACIDAD DEL DISPOSITIVO
   ========================================================================== */

/* Sin hover real (tactil): nunca dependemos del hover para mostrar contenido */
@media (hover: none) {
  .tarjeta-servicio__lista { max-height: none; opacity: 1; overflow: visible; }
  .nav__submenu { position: static; transform: none; box-shadow: none; }
}

/* Impresion */
@media print {
  .nav, .menu-movil, .wa-flotante, .cortina, .hero__scroll, .footer__redes { display: none !important; }
  .hero, .hero-interno, .seccion--oscura, .seccion--verde, .conversion, .footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero__velo, .hero__media { display: none !important; }
  * { box-shadow: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}