/* Elite Sterix · Ajustes responsivos para móvil / tablet.
   Las páginas usan estilos en línea; aquí forzamos con !important solo en pantallas chicas. */

@media (max-width: 860px){

  /* ---- Encabezado: apilar navegación + logo ---- */
  header[data-screen-label="Navegación"] > div{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
    padding: 16px 14px !important;
  }
  header[data-screen-label="Navegación"] nav{
    justify-self: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
  header[data-screen-label="Navegación"] a[style*="flex-direction: column"]{
    order: -1; /* logo arriba */
    margin-bottom: 4px;
  }

  /* ---- Banner dorado y barra utilitaria ---- */
  [data-screen-label="Banner dorado"] span{ font-size: 12.5px !important; }
  [data-screen-label="Barra utilitaria"] > div{
    justify-content: center !important;
    gap: 12px 16px !important;
    padding: 10px 14px !important;
  }

  /* ---- Todas las cuadrículas multi-columna -> una sola ---- */
  div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  /* ---- Nada "pegajoso" en móvil: al colapsar a 1 columna, un aside sticky
         queda fijo y el contenido se le encima al hacer scroll. ---- */
  [style*="position: sticky"]{
    position: static !important;
    top: auto !important;
  }
  aside[data-screen-label="Menú de categorías"]{
    position: static !important; top: auto !important;
    margin-bottom: 10px !important;
  }

  /* ---- Titulares grandes: tamaños contenidos ---- */
  h1{ font-size: clamp(34px, 10vw, 48px) !important; line-height: 1.12 !important; }
  h2{ font-size: clamp(26px, 7.5vw, 38px) !important; line-height: 1.2 !important; }
  h3{ font-size: 19px !important; }

  /* ---- Reducir paddings laterales grandes (cajas de color / formularios) ---- */
  div[style*="px 76px"], div[style*="px 80px"], div[style*="130px"],
  form[style*="54px 50px"], div[style*="60px 56px"], div[style*="72px 60px"],
  div[style*="70px 76px"], div[style*="80px 76px"]{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  section{ overflow-x: hidden; }

  /* ---- Hero de Inicio: apilar las imágenes flotantes ---- */
  section#inicio > div[style*="height: 470px"]{
    height: auto !important;
    margin-top: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  section#inicio > div[style*="height: 470px"] > div{
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 240px !important;
    left: auto !important; right: auto !important; top: auto !important;
    transform: none !important;
  }

  /* Collages de imágenes con posición absoluta (Inicio): apilar.
     Solo alturas propias de esos collages, NO los heros (640px) de viaje. */
  div[style*="min-height: 620px"],
  div[style*="min-height: 560px"],
  div[style*="min-height: 500px"]{
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  div[style*="min-height: 620px"] > div[style*="position: absolute"],
  div[style*="min-height: 560px"] > div[style*="position: absolute"],
  div[style*="min-height: 500px"] > div[style*="position: absolute"]{
    position: relative !important;
    width: 100% !important;
    height: 260px !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    margin: 0 !important; transform: none !important;
    box-shadow: none !important;
  }

  /* Imágenes con desplazamientos negativos que se salen en móvil */
  div[style*="margin-right: -60px"], div[style*="margin-left: -120px"],
  div[style*="inset: 0 0 0 -40px"]{
    margin-left: 0 !important; margin-right: 0 !important; inset: 0 !important;
  }
  /* Superposiciones con margin negativo vertical */
  div[style*="margin: -90px auto 0"], div[style*="margin-top: -60px"]{
    margin-top: 16px !important;
  }
}

/* Teléfonos angostos */
@media (max-width: 480px){
  header[data-screen-label="Navegación"] nav{ gap: 8px 14px !important; font-size: 10.5px !important; }
  h1{ font-size: clamp(30px, 9.5vw, 40px) !important; }
}

/* ===== 2ª pasada: ajustes de auditoría móvil ===== */
@media (max-width: 860px){

  /* INICIO · overlay 52px "Rostro & Piel" / "Cuerpo & Cabello" (no lo capan h1/h2) */
  [data-screen-label="Rostro y cuerpo"] span[style*="52px"]{
    font-size: clamp(26px, 8vw, 34px) !important;
    top: 26px !important;
    line-height: 1.1 !important;
  }

  /* INICIO · Resultados: recuperar Antes | Después (la regla global grid->1col lo colapsaba) */
  [data-screen-label="Resultados"] div[style*="gap: 7px"]{
    grid-template-columns: 1fr 1fr !important;
  }

  /* INICIO · caja de aviso en Contacto (padding 30px 40px) */
  [data-screen-label="Contacto"] div[style*="padding: 30px 40px"]{
    padding-left: 22px !important; padding-right: 22px !important;
  }

  /* SERVICIOS · tabla de Inyectables (3 columnas): que quepa sin recortarse. [ALTA] */
  [data-screen-label="Inyectables"] table{
    width: 100% !important; table-layout: fixed !important;
  }
  [data-screen-label="Inyectables"] table th,
  [data-screen-label="Inyectables"] table td{
    padding: 8px 7px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* SERVICIOS · caja 'Protocolo facial mensual' (padding 46px 44px) */
  div[style*="padding: 46px 44px"]{ padding: 30px 20px !important; }

  /* SERVICIOS · bloque CTA final (padding 56px 40px) — acotado por su padding exacto */
  [style*="padding: 56px 40px"]{ padding: 40px 22px !important; }

  /* HEROS de viaje (Agencia + Seguro) · el overlay 90deg deja el texto sin contraste
     en móvil (el texto ocupa todo el ancho): oscurecer parejo en vertical. */
  section#inicio div[style*="linear-gradient(90deg, rgba(15,22,42,0.9"]{
    background: linear-gradient(180deg, rgba(15,22,42,0.78) 0%, rgba(15,22,42,0.86) 100%) !important;
  }

  /* AGENCIA · hero demasiado alto + padding lateral que empuja el ancho */
  section#inicio[style*="min-height: 640px"]{ min-height: auto !important; }
  section#inicio div[style*="padding: 90px 24px"]{
    box-sizing: border-box !important;
    padding-top: 52px !important; padding-bottom: 52px !important;
  }

  /* SEGURO · hero: content-box + width:100% + padding recortaba el texto. [ALTA] */
  section#inicio div[style*="padding: 96px 24px 0"]{
    box-sizing: border-box !important;
    padding-top: 48px !important;
  }
}