/* ═══════════════════════════════════════════
   SANARE CAPILAR — Sprint 3 · Refinamiento Premium
   Solo eleva la percepción premium.
   No rediseña, no cambia branding, no altera arquitectura.
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   P1-1 · PRODUCT SHEET — Experiencia desktop
   Ancho máximo controlado · centrado · legible.
   El comportamiento móvil (<769px) queda intacto.
══════════════════════════════════════════ */
@media (min-width: 769px) {
  .product-sheet {
    left: 0;
    right: 0;
    width: auto;
    max-width: 820px;
    margin: 0 auto;
    max-height: 90vh;
    border-radius: 28px;
    bottom: 28px;
    box-shadow: 0 32px 90px rgba(27,27,27,.30);
    /* El transform (translateY) original queda intacto: la animación
       de entrada/salida y el arrastre móvil siguen funcionando igual. */
  }
  /* Cerrado en desktop: el sheet vive a 28px del borde inferior (bottom:28px),
     así que translateY(100%) lo dejaba 28px corto y su parte superior (el toprow
     "DETALLE DEL PRODUCTO") asomaba en el borde inferior de la pantalla.
     Empujamos esos 28px + margen para que salga completo de cuadro. */
  .product-sheet:not(.open) { transform: translateY(calc(100% + 48px)); }
  /* El "drag handle" es una afordancia táctil: en desktop se oculta */
  .product-sheet .sheet-handle { display: none; }

  .product-sheet .sheet-toprow {
    top: 0;
    padding: 20px 32px 4px;
    border-radius: 28px 28px 0 0;
  }
  /* Respiración interna mayor para mejor legibilidad */
  .product-sheet .sheet-img-wrap {
    margin: 14px 32px 4px;
    height: 44vh;
    max-height: 400px;
    min-height: 320px;
  }
  .product-sheet .sheet-body { padding: 4px 36px 8px; }
  .product-sheet .sheet-ctas {
    padding: 16px 32px 22px;
    border-radius: 0 0 28px 28px;
  }
  /* La rejilla de resultados respira mejor en panel ancho */
  .product-sheet .sheet-results-grid { grid-template-columns: repeat(4, 1fr); }
  .product-sheet .sheet-benefits { display: grid; grid-template-columns: 1fr 1fr; }
}

/* En pantallas amplias acercamos imagen y datos clave para look "store" */
@media (min-width: 980px) {
  .product-sheet .sheet-results-grid { gap: 12px; }
}

/* ══════════════════════════════════════════
   P1-2 · HERO — Más suave, premium y estable
   Altura reservada para evitar saltos al rotar.
══════════════════════════════════════════ */
.hero-title,
.hero-sub { transition: opacity .45s var(--ease); will-change: opacity; }

/* Badge en una sola línea (evita el quiebre "RESULTADOS / REALES") */
.hero-badge { white-space: nowrap; }

@media (min-width: 769px) {
  /* Reserva de espacio: el titular y el subtítulo no empujan el layout
     cuando cambia su contenido entre slides. */
  .hero-title { min-height: 2.18em; }
  .hero-sub   { min-height: 3.3em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-img { animation: none; }
  .hero-title, .hero-sub { transition: none; }
}

/* ══════════════════════════════════════════
   P1-11 · TARGETS TÁCTILES ≥ 44px
   Se amplía el área activa SIN cambiar el aspecto visual,
   mediante una capa transparente centrada (::after).
══════════════════════════════════════════ */
/* .product-heart ya es position:absolute (ver home.css); NO se sobreescribe
   aquí para que siga flotando en la esquina superior derecha de la imagen.
   El ::after de abajo funciona igual sobre un elemento absolute. */
.sheet-close,
.social-btn,
.t-nav-btn,
.diag-back,
.article-back,
.nav-icon-btn { position: relative; }

.product-heart::after,
.sheet-close::after,
.social-btn::after,
.t-nav-btn::after,
.diag-back::after,
.article-back::after,
.nav-icon-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
}

/* Comparador antes/después: agranda la zona de arrastre del grip */
.ba-handle-grip { position: relative; }
.ba-handle-grip::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* Dots del hero: zona táctil cómoda manteniendo el punto pequeño */
.hero-dots .dot { position: relative; }
.hero-dots .dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 36px;
  transform: translate(-50%, -50%);
}

/* ══════════════════════════════════════════
   P2-2 · BOTONES WHATSAPP — Unificación
   Misma altura, padding, tipografía y comportamiento.
   Se conservan adaptaciones (full-width vs. auto, flex).
══════════════════════════════════════════ */
.btn-whatsapp,
.btn-sheet-wa,
.diag-cta-wa,
.article-cta-wa {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  gap: 10px;
  border-radius: var(--r-pill);
  line-height: 1.1;
  transition: background .2s, transform .15s;
}
.btn-whatsapp:hover,
.btn-sheet-wa:hover,
.diag-cta-wa:hover,
.article-cta-wa:hover { background: var(--wa-dark); transform: translateY(-1px); }

/* Barra fija de la ficha: el CTA mantiene la altura unificada */
.sheet-bar-main .btn-sheet-wa { padding: 14px 22px; min-height: 52px; }

/* ══════════════════════════════════════════
   P2-3 · SIMETRÍA VISUAL
   Ritmo de gaps consistente y tarjetas a igual altura.
══════════════════════════════════════════ */
/* Rejillas de tarjetas: mismo gap base (24px) para un ritmo uniforme */
.why-grid { gap: 24px; }

/* Why cards: igual altura para una fila perfectamente simétrica */
.why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
.why-grid { align-items: stretch; }

/* Featured: alinea el bloque de imagen y el de info a igual ritmo vertical */
.featured-img-wrap { align-self: stretch; }