/* ============================================================
   MOLA BEAUTY — responsive.css
   Mobile-first: base = móvil, luego se agranda
   Breakpoints: sm=540, md=640, lg=800, xl=980
   ============================================================ */

/* ══════════════════════════════════════════════
   BASE MÓVIL (sin media query = todos los tamaños)
   aplica siempre; los queries de arriba sobreescriben
   ══════════════════════════════════════════════ */

/* Evita scroll horizontal en toda la página */
html, body { overflow-x: hidden; }

/* ── HERO MÓVIL ── */

/* Imagen de Alba: ocupa el lado derecho sin tapar todo el texto */
.hero-image-wrap {
  width: 52vw;
  max-width: 260px;
  height: 88%;
}

/* Texto limitado para no quedar debajo de la imagen */
.hero-content {
  max-width: 54vw;
  padding: 5.5rem .9rem 1.8rem;
}

/* Título más pequeño en móvil para que no desborde */
.hero-title {
  font-size: clamp(2rem, 9vw, 3.2rem);
  margin-bottom: .6rem;
}

.hero-subtitle {
  font-size: .78rem;
  max-width: 100%;
  margin-bottom: 1rem;
}

.hero-buttons {
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.2rem;
}

.hero-buttons .btn {
  width: 100%;
  justify-content: center;
  font-size: .65rem;
  padding: .75rem 1rem;
}

/* Stats en móvil: más compactos */
.hero-stats {
  gap: 0;
  padding-top: 1rem;
}

.hero-stats > div {
  padding-right: .6rem;
}

.hero-stats > div + div {
  padding-left: .6rem;
}

.stat-number { font-size: 1.5rem; }
.stat-label  { font-size: .45rem; letter-spacing: .1em; }

/* Ocultar badges flotantes en móvil (ya están los stats abajo) */
.hero-proof { display: none; }

/* ── WHY GRID MÓVIL: 2 columnas ── */
.why-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}

.why-photo-card { height: 160px; }

.why-photo-card:nth-child(1),
.why-photo-card:nth-child(2) { height: 185px; }

.why-photo-num   { font-size: 1.6rem; }
.why-photo-label { font-size: .5rem; letter-spacing: .14em; }
.why-photo-tag   { font-size: .45rem; padding: .15rem .45rem; }

/* ── SERVICES MÓVIL: 1 columna ── */
.services-grid { grid-template-columns: 1fr; }
.service-featured { grid-column: unset; }

/* ── GRIDS QUE SE APILAN EN MÓVIL ── */
.alba-grid    { grid-template-columns: 1fr; }
.blower-grid  { grid-template-columns: 1fr; }
.sedes-grid   { grid-template-columns: 1fr; }
.footer-grid  { grid-template-columns: 1fr; }

/* ── INSTAGRAM: 1 columna en móvil ── */
.ig-grid              { grid-template-columns: repeat(3, 1fr); }
.ig-cell-desktop      { display: none; }

/* ── BEFORE/AFTER: 2 columnas en móvil ── */
.ba-grid { grid-template-columns: repeat(2, 1fr); }

/* ── TESTIMONIOS: scroll horizontal en móvil ── */
.testimonials-scroll {
  display: flex;
  overflow-x: auto;
  gap: .75rem;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.testimonial-card {
  flex: 0 0 82vw;
  scroll-snap-align: start;
}

/* ── SECCIONES: padding reducido en móvil ── */
section { padding: 3.2rem 1rem; }

/* ══════════════════════════════════════════════
   SM: 540px — teléfonos grandes / phablets
   ══════════════════════════════════════════════ */
@media (min-width: 540px) {
  .hero-image-wrap {
    width: 55vw;
    max-width: 320px;
    height: 92%;
  }

  .hero-content {
    max-width: 50vw;
    padding: 6rem 1rem 2rem;
  }

  .hero-title   { font-size: clamp(2.4rem, 9vw, 3.6rem); }
  .stat-number  { font-size: 1.7rem; }

  .hero-buttons {
    flex-direction: row;
  }

  .hero-buttons .btn { width: auto; }

  /* Why: 3 columnas desde 540px */
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .why-photo-card { height: 180px; }
  .why-photo-card:nth-child(1),
  .why-photo-card:nth-child(2) { height: 180px; }

  /* Services: 2 columnas */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Formulario de empleo: nombre/apellido y whatsapp/experiencia en fila */
  .job-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════
   MD: 640px — tablets pequeñas
   ══════════════════════════════════════════════ */
@media (min-width: 640px) {
  section { padding: 4rem 1.25rem; }

  .hero-image-wrap {
    width: 48vw;
    max-width: 380px;
    height: 94%;
  }

  .hero-content {
    max-width: 55vw;
    padding: 6.5rem 1.25rem 2.5rem;
  }

  .hero-title  { font-size: clamp(2.8rem, 10vw, 4.5rem); }
  .stat-number { font-size: 2rem; }
  .stat-label  { font-size: .52rem; }

  .hero-buttons .btn { font-size: .7rem; }

  /* Hero proof badges visibles en tablet */
  .hero-proof {
    display: flex;
    top: 5.5rem;
    left: 1.25rem;
  }

  .ba-grid     { grid-template-columns: repeat(4, 1fr); }
  .sedes-grid  { grid-template-columns: repeat(2, 1fr); }
  .ig-grid     { grid-template-columns: repeat(6, 1fr); }
  .ig-cell-desktop { display: block; }
  .problem-panel.active { grid-template-columns: 1fr 1fr; }

  .testimonials-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: unset;
    padding-bottom: 0;
  }
  .testimonial-card { flex: unset; }

  .why-photo-num  { font-size: 1.8rem; }
  .why-photo-tag  { font-size: .52rem; }
}

/* ══════════════════════════════════════════════
   LG: 800px — tablets grandes
   ══════════════════════════════════════════════ */
@media (min-width: 800px) {
  /* Nav desktop visible */
  .nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
  }

  .nav-links a {
    font-size: .66rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,.82);
    transition: color .28s;
  }

  .nav.scrolled .nav-links a { color: var(--ink-soft); }
  .nav-links a:hover          { color: var(--pink-light); }
  .nav.scrolled .nav-links a:hover { color: var(--pink); }
  .hamburger { display: none; }

  /* Alba 2 columnas */
  .alba-grid   { grid-template-columns: 1fr 1.2fr; }
  .blower-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* ══════════════════════════════════════════════
   XL: 980px — desktop
   ══════════════════════════════════════════════ */
@media (min-width: 980px) {
  section { padding: 4.5rem 1.25rem; }

  /* ── Hero: layout dos columnas real ── */
  #hero {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
  }

  .hero-content {
    max-width: none;
    width: 52%;
    padding: 0 3rem 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 3;
    position: relative;
  }

  .hero-title    { font-size: clamp(3.5rem, 6vw, 7rem); }
  .hero-subtitle { max-width: 380px; font-size: .92rem; }

  .hero-buttons {
    flex-direction: row;
    gap: .52rem;
  }

  .hero-buttons .btn { width: auto; font-size: .72rem; padding: .85rem 1.75rem; }

  .stat-number { font-size: 2.2rem; }
  .stat-label  { font-size: .52rem; }

  .hero-stats > div { padding-right: 1.2rem; }
  .hero-stats > div + div { padding-left: 1.2rem; }

  .hero-image-wrap {
    position: absolute;
    right: 0; bottom: 0;
    width: 50%;
    max-width: none;
    height: 100%;
  }

  /* Ocultar badges en desktop (stats ya están abajo) */
  .hero-proof { display: none; }

  /* Why: 3 columnas */
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .why-photo-card { height: 260px; }
  .why-photo-card:nth-child(1),
  .why-photo-card:nth-child(2) { height: 300px; }
  .why-photo-num  { font-size: 2.2rem; }
  .why-photo-tag  { font-size: .5rem; }

  /* Services: 3 columnas con featured span 2 */
  .services-grid   { grid-template-columns: repeat(3, 1fr); }
  .service-featured { grid-column: span 2; }
}

/* ══════════════════════════════════════════════
   Touch — sin hover pegajoso
   ══════════════════════════════════════════════ */
@media (hover: none) {
  .why-photo-card:hover .why-photo-bg      { transform: none; }
  .why-photo-card:hover .why-photo-overlay { background: linear-gradient(to top, rgba(18,10,14,.92) 0%, rgba(18,10,14,.18) 55%, transparent 100%); }
  .service-card:hover { transform: none; box-shadow: none; }
  .ba-card:hover      { transform: none; box-shadow: none; }
}

/* ══════════════════════════════════════════════
   Reduced Motion
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════
   Print
   ══════════════════════════════════════════════ */
@media print {
  nav, .wa-float, .ticker, .hero-scroll, .hero-proof { display: none !important; }
  #hero { min-height: auto; page-break-after: always; }
  body  { font-size: 12pt; color: #000; }
}