/* ═══════════════════════════════════════════
   SANARE CAPILAR — Icon sizing & contexts
   Dimensiona los <span data-icon> / .ic-svg según el contexto.
   ═══════════════════════════════════════════ */

/* Default inline icon (botones, badges, texto) */
.ic-svg { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }

/* Badges / eyebrows que llevan icono + texto en línea */
.badge, .diag-cta-badge, .cta-eyebrow, .diag-cta-card-title, .diag-cta-hint-lbl,
.diag-reco-section-title, .sheet-section-title, .article-related-title, .footer-bottom span {
  display: inline-flex; align-items: center; gap: 7px;
}
.cta-eyebrow .ic-svg { width: 14px; height: 14px; }
.diag-cta-card-title .ic-svg, .diag-cta-hint-lbl .ic-svg { width: 15px; height: 15px; }
.diag-reco-section-title .ic-svg { width: 20px; height: 20px; color: var(--green); }
.sheet-section-title .ic-svg { width: 18px; height: 18px; color: var(--green); }

/* ── Marca de hoja real (logo Sanare Capilar) ── */
.brand-mark { width: auto; flex-shrink: 0; object-fit: contain; vertical-align: middle; display: block; }
.nav-logo .brand-mark { height: 30px; }
.mobile-logo .brand-mark { height: 25px; }
.footer-brand-name .brand-mark { height: 28px; }
.footer-bottom .brand-mark { height: 17px; }
.diag-logo .brand-mark { height: 23px; }
.cta-eyebrow .brand-mark { height: 16px; }
.sheet-section-title .brand-mark { height: 18px; }
.diag-reco-section-title .brand-mark { height: 20px; }
.article-related-title .brand-mark { height: 20px; }

/* ── Logos (hoja + texto) ── */
.nav-logo, .mobile-logo, .footer-brand-name {
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-logo .ic-svg  { width: 26px; height: 26px; }
.mobile-logo .ic-svg { width: 21px; height: 21px; }
.footer-brand-name .ic-svg { width: 24px; height: 24px; color: var(--green3); }
.footer-bottom .ic-svg { width: 15px; height: 15px; color: var(--green3); }

/* ── Nav icon buttons ── */
.nav-icon-btn .ic-svg { width: 19px; height: 19px; }
.mobile-header-icons .nav-icon-btn .ic-svg { width: 17px; height: 17px; }

/* ── WhatsApp FAB ── */
.wa-fab .ic-svg { width: 27px; height: 27px; }

/* ── Bottom nav móvil ── */
.mobile-nav-icon { display: inline-flex; }
.mobile-nav-icon .ic-svg { width: 22px; height: 22px; }
.mobile-nav-icon--fab .ic-svg { width: 22px; height: 22px; }

/* ── Promo strip ── */
.promo-strip { display: flex; align-items: center; justify-content: center; gap: 8px; }
.promo-strip .ic-svg { width: 16px; height: 16px; }

/* ── Why cards: icono en badge verde ── */
.why-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px;
  background: rgba(74,124,89,.10); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 0;
}
.why-icon .ic-svg { width: 29px; height: 29px; }

/* ── Edu thumbnails ── */
.edu-thumb { color: var(--green); }
.edu-thumb .ic-svg { width: 50px; height: 50px; stroke-width: 1.5; }

/* ── Footer socials ── */
.social-btn .ic-svg { width: 18px; height: 18px; color: white; }

/* ── Product sheet: benefits / results ── */
.sheet-benefit-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(74,124,89,.10); color: var(--green);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.sheet-benefit-icon .ic-svg { width: 17px; height: 17px; }
.sheet-result-icon { color: var(--green); display: flex; justify-content: center; margin-bottom: 7px; }
.sheet-result-icon .ic-svg { width: 24px; height: 24px; }

/* ── Diagnóstico: opciones ── */
.diag-opt-icon { color: var(--green); display: inline-flex; }
.diag-opt-icon .ic-svg { width: 22px; height: 22px; }
.diag-opt-grid-icon { color: var(--green); display: flex; justify-content: center; margin-bottom: 10px; }
.diag-opt-grid-icon .ic-svg { width: 28px; height: 28px; }
.diag-logo { display: inline-flex; align-items: center; gap: 8px; }
.diag-logo .ic-svg { width: 20px; height: 20px; }

/* Puntos de color (severidad) */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.dot-green { background: #4A9E5C; }
.dot-amber { background: #E0A82E; }
.dot-red   { background: #D2603A; }

/* ── Corazón favoritos ── */
@keyframes favPulse { 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }
.product-heart.pulse .ic-svg, .fav-btn.pulse .ic-svg { animation: favPulse .35s ease; }
.product-heart .ic-svg { width: 17px; height: 17px; transition: fill .2s, stroke .2s; }
.product-heart.faved .ic-svg { fill: #D2603A; stroke: #D2603A; }
.fav-btn .ic-svg { width: 21px; height: 21px; }
.fav-btn.faved .ic-svg { fill: #D2603A; stroke: #D2603A; }

/* ── Estrellas rating (icono) ── */
.stars-ic { display: inline-flex; gap: 2px; color: #E0A82E; vertical-align: middle; }
.stars-ic .ic-svg { width: 15px; height: 15px; }
.hero-badge .ic-svg { width: 14px; height: 14px; color: #E0A82E; }

/* FAQ chevron como icono */
.sheet-faq-chevron .ic-svg { width: 14px; height: 14px; }

/* Hero de artículos */
.article-hero { color: var(--green); }
.article-hero .ic-svg { width: 66px; height: 66px; stroke-width: 1.4; }