/* =========================================================
   Radiance v5 — hero de la home en MÓVIL (≤ 900px)
   Propuesta A · Velo inferior (elegida en hero-movil.html, ver css/hero-movil.css .hm-a).
   Foto a pantalla completa, velo oscuro abajo, texto abajo, control centrado y flotante.
   El escritorio no cambia: todo va dentro de la media query.
   Prefijo body.v5.hv-c .hero para ganar a las reglas móviles de hero-variantes.css
   (algunas usan :has(.hero__puntos)) sin depender de :has.
   ========================================================= */
@media (max-width: 900px) {
  /* ---------- Header compacto: logo de 88px sin escalado ---------- */
  .hv-c:not(.con-scroll) .nav__logo { transform: none; }
  .nav__logo img { width: 88px; height: auto; }

  /* ---------- Hero ---------- */
  body.v5.hv-c .hero { height: min(100svh, 760px); min-height: 0; padding-bottom: 0; margin-bottom: 0; }

  /* Foto a pantalla completa (la regla anterior la dejaba en el 60% superior) */
  body.v5.hv-c .hero .promo__circulo { inset: 0; width: 100%; height: 100%; margin: 0; }
  body.v5.hv-c .hero .promo__circulo img { object-position: var(--foco-movil, var(--foco, 50% 40%)); }

  /* Velo: oscuro abajo (contraste del texto) y suave arriba (header) */
  body.v5.hv-c .hero .promo::after { background:
    linear-gradient(180deg, rgba(20, 14, 8, .55) 0%, rgba(20, 14, 8, 0) 15%),
    linear-gradient(0deg, rgba(20, 14, 8, .95) 0%, rgba(20, 14, 8, .88) 34%, rgba(20, 14, 8, .55) 52%, rgba(20, 14, 8, 0) 70%); }

  /* Texto abajo, sobre el control */
  body.v5.hv-c .hero .promo__texto { left: var(--pad-x); right: var(--pad-x); bottom: 64px; max-width: none; }
  body.v5.hv-c .hero .promo__eti { gap: 7px; max-width: 100%; padding: 4px 12px 4px 4px; font-size: 12px; }
  body.v5.hv-c .hero .promo__eti .lucide { width: 11px; height: 11px; }
  body.v5.hv-c .hero .promo__titulo { margin-top: 12px; font-size: clamp(30px, 8.8vw, 37px); line-height: 1.08; text-wrap: balance; }
  body.v5.hv-c .hero .promo__sub { margin-top: 10px; max-width: 36ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88); text-wrap: pretty; }

  /* Beneficios en una sola línea de texto, separados por puntos dorados */
  body.v5.hv-c .hero .promo__beneficios { flex-wrap: nowrap; gap: 0; margin-top: 12px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .86); white-space: nowrap; }
  body.v5.hv-c .hero .promo__beneficios .lucide { display: none; }
  body.v5.hv-c .hero .promo__beneficios li + li::before { content: "·"; margin: 0 7px; color: #F0C38A; }

  /* Botones en una fila: principal + secundario compacto (si no caben, el secundario baja a la línea siguiente) */
  body.v5.hv-c .hero .promo__ctas { flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 18px; }
  body.v5.hv-c .hero .promo__ctas .boton { flex: none; height: 46px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
  body.v5.hv-c .hero .promo__ctas .boton--principal { padding: 0 16px 0 12px; }
  body.v5.hv-c .hero .promo__ctas .boton--secundario { flex-direction: row-reverse; padding: 0 14px; } /* ícono después del texto */
  body.v5.hv-c .hero .promo__nota { margin-top: 12px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .8); }

  /* ---------- Control del carrusel: centrado, flotando y compacto ---------- */
  body.v5.hv-c .hero .hero__control { left: 50%; right: auto; bottom: 16px; gap: 10px; padding: 4px 12px 4px 4px; background: rgba(20, 14, 8, .36); transform: translateX(-50%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  body.v5.hv-c .hero .hero__play { width: 28px; height: 28px; background: rgba(255, 255, 255, .14); }
  body.v5.hv-c .hero .hero__play .lucide { width: 12px; height: 12px; }
  body.v5.hv-c .hero .hero__puntos { gap: 8px; }
  body.v5.hv-c .hero .hero__punto { width: 7px; height: 7px; background: rgba(255, 255, 255, .45); }
  body.v5.hv-c .hero .hero__punto::before { inset: -12px -4px; }
  body.v5.hv-c .hero .hero__punto.activa { width: 34px; background: rgba(255, 255, 255, .3); }
}

/* Pantallas bajas: menos aire para que todo siga cabiendo */
@media (max-width: 900px) and (max-height: 700px) {
  body.v5.hv-c .hero .promo__titulo { margin-top: 10px; }
  body.v5.hv-c .hero .promo__ctas { margin-top: 14px; }
}

/* Teléfonos estrechos: sin beneficios y el secundario pasa a enlace subrayado */
@media (max-width: 379px) {
  body.v5.hv-c .hero .promo__beneficios { display: none; }
  body.v5.hv-c .hero .promo__ctas { gap: 6px; }
  body.v5.hv-c .hero .promo__ctas .boton { font-size: 14px; }
  body.v5.hv-c .hero .promo__ctas .boton--secundario { padding: 0 4px; background: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.v5.hv-c .hero .promo__ctas .boton--secundario:hover { background: none; color: inherit; }
}
@media (max-width: 370px) {
  .nav, body.v5.hv-c .hero { --pad-x: 16px; }
  .nav__logo img { width: 84px; }
  .nav .nav__cta { padding: 0 13px; }
}

/* Móvil: que asome el inicio de "Nuestros servicios" bajo el hero (sin franja blanca vacía) */
@media (max-width: 900px) { .hv-c .hero + .seccion { padding-top: 64px; } }

/* Fotos verticales del hero en móvil (<picture>): el <picture> no debe romper el tamaño de la imagen */
.promo__circulo picture { display: contents; }

/* Móvil: WhatsApp flotante verde (como en escritorio), sin barra inferior */
@media (max-width: 900px) {
  .wa-flota { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-flota svg { width: 28px; height: 28px; }
}

/* Móvil · Nuestros servicios: barra de progreso a la izquierda, flechas a la derecha, sin número */
@media (max-width: 900px) {
  .tratamientos .cabecera { flex-direction: column; align-items: stretch; gap: 20px; }
  .tratamientos .trat-control { justify-content: space-between; gap: 16px; }
  .tratamientos .trat-contador { display: none; }
  .tratamientos .trat-avance { flex: 1; width: auto; max-width: 180px; }
  .tratamientos .flecha { width: 44px; height: 44px; }
}

/* Móvil · Nuestros servicios: barra de progreso y flechas DEBAJO del carrusel */
@media (max-width: 900px) {
  .tratamientos { display: flex; flex-direction: column; }
  .tratamientos > .contenedor, .tratamientos .cabecera { display: contents; }
  .tratamientos .cabecera > [data-anim-grupo] { order: 1; padding-inline: var(--pad-x); margin-bottom: 24px; }
  .tratamientos .trat-visor { order: 2; }
  .tratamientos .trat-control { order: 3; margin-top: 20px; padding-inline: var(--pad-x); }
}