/*
 * Theme Name:  TipsPlus Child
 * Description: Child theme para TipsPlus.net — basado en Kadence Theme. Sistema de diseño completo para plataforma de bienestar e ingredientes naturales.
 * Template:    kadence
 * Version:     1.0.0
 * Author:      TipsPlus Dev Team
 * Author URI:  https://tipsplus.net
 * Text Domain: tipsplus
 */

/* ═══════════════════════════════════════════════════════════
   TIPSPLUS — DESIGN SYSTEM (Child Theme)
   Portado desde /wireframe/style.css
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. DESIGN TOKENS ──────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:        #0c3c68;
  --color-secondary:      #ffffff;
  --color-accent:         #2ABF6F;
  --color-accent-hover:   #22a35f;
  --color-accent-active:  #1a8a4f;
  --color-accent-light:   #d6f5e7;
  --color-accent-subtle:  #f0fbf5;

  /* Primary scale */
  --color-primary-950:    #05192c;
  --color-primary-900:    #082843;
  --color-primary-800:    #0c3c68;
  --color-primary-700:    #104f87;
  --color-primary-600:    #1565a8;
  --color-primary-500:    #1d7fd0;
  --color-primary-300:    #83bfec;
  --color-primary-200:    #b8d9f5;
  --color-primary-100:    #dceef9;
  --color-primary-50:     #f0f7fd;

  /* Neutrals */
  --color-neutral-900:    #1a1d27;
  --color-neutral-800:    #2d3142;
  --color-neutral-700:    #454a61;
  --color-neutral-600:    #5e6480;
  --color-neutral-500:    #7c8298;
  --color-neutral-400:    #9ea4b8;
  --color-neutral-300:    #c5c9d8;
  --color-neutral-200:    #dcdfe9;
  --color-neutral-100:    #edeef5;
  --color-neutral-50:     #f6f7fb;

  /* Semantic */
  --color-warning:        #f5a623;
  --color-warning-light:  #fef7ea;

  /* Surfaces */
  --surface-base:         #ffffff;
  --surface-raised:       #ffffff;
  --surface-sunken:       #f6f7fb;
  --surface-brand:        #0c3c68;
  --surface-brand-alt:    #082843;

  /* Text */
  --text-primary:         #0f1117;
  --text-secondary:       #454a61;
  --text-muted:           #7c8298;
  --text-on-primary:      #ffffff;
  --text-on-accent:       #ffffff;
  --text-link:            #1565a8;

  /* Shadows */
  --shadow-sm:   0 2px 6px rgba(12,60,104,0.08);
  --shadow-md:   0 4px 16px rgba(12,60,104,0.10);
  --shadow-lg:   0 8px 30px rgba(12,60,104,0.14);
  --shadow-xl:   0 16px 50px rgba(12,60,104,0.16);
  --shadow-card: 0 2px 8px rgba(12,60,104,0.08), 0 1px 2px rgba(12,60,104,0.04);
  --shadow-card-hover: 0 10px 32px rgba(12,60,104,0.16);
  --shadow-cta:       0 4px 20px rgba(42,191,111,0.35);
  --shadow-cta-hover: 0 6px 32px rgba(42,191,111,0.55);

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Gradients */
  --gradient-hero:   linear-gradient(135deg, #082843 0%, #0c3c68 45%, #104f87 100%);
  --gradient-accent: linear-gradient(135deg, #2ABF6F 0%, #22a35f 100%);

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing — compatibles con Kadence */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* Animation */
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Kadence Global Colors override */
  --global-palette1: #0c3c68;
  --global-palette2: #082843;
  --global-palette3: #2ABF6F;
  --global-palette4: #22a35f;
  --global-palette5: #ffffff;
  --global-palette6: #f6f7fb;
  --global-palette7: #454a61;
  --global-palette8: #7c8298;
}

/* ─── 2. RESET / BASE ────────────────────────────────────── */
/* Kadence ya trae reset, solo overrides necesarios */
body {
  font-family: var(--font-body) !important;
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografía headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
}

/* Links globales */
a { transition: color var(--duration-normal); }

/* Focus visible accesible */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Container override (Kadence usa .container-xl) */
.tipsplus-container,
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Barra de progreso de lectura */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-accent);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ─── 3. ANNOUNCEMENT BAR ───────────────────────────────── */
.tipsplus-announcement-bar {
  background: var(--color-primary-950);
  color: rgba(255,255,255,0.82);
  font-size: 0.8125rem;
  font-family: var(--font-body);
  text-align: center;
  padding: var(--space-2) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tipsplus-announcement-bar a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.tipsplus-announcement-bar a:hover { opacity: 0.8; }
.tipsplus-announcement-bar .sep { opacity: 0.4; }

/* ─── 4. HEADER / NAVIGATION (Override Kadence) ─────────── */
/* Kadence Header Builder: usar custom header con clase .tipsplus-header */
.tipsplus-header {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-neutral-200);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--duration-normal);
}
.tipsplus-header.scrolled {
  box-shadow: var(--shadow-md);
}

/* Logo TipsPlus — tipografía pura */
.tipsplus-logo-text {
  font-family: var(--font-heading) !important;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-primary-800);
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
}
.tipsplus-logo-text strong {
  font-weight: 800;
  color: var(--color-primary-800);
}
/* Logo en footer (sobre fondo azul) */
.site-footer .tipsplus-logo-text,
.site-footer .tipsplus-logo-text strong {
  color: #ffffff !important;
}

/* Override Kadence nav link colors */
.main-navigation a,
.kadence-navigation .menu-item > a {
  font-family: var(--font-heading) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--color-neutral-700) !important;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3) !important;
  transition: all var(--duration-normal) !important;
}
.main-navigation a:hover,
.kadence-navigation .menu-item > a:hover {
  color: var(--color-primary-800) !important;
  background: var(--color-primary-50) !important;
}

/* Dropdown Kadence */
.kadence-navigation .sub-menu {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--color-neutral-200) !important;
  padding: var(--space-4) !important;
}

/* ─── 5. BUTTONS ─────────────────────────────────────────── */
.btn, .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 24px;
  font-family: var(--font-heading) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-full) !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}
.btn-sm  { padding: 8px 18px !important; font-size: 0.8125rem !important; }
.btn-lg  { padding: 16px 32px !important; font-size: 1rem !important; }

.btn-cta, .wp-block-button.is-style-accent .wp-block-button__link {
  background: var(--gradient-accent) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-cta);
  border-color: transparent;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }

.btn-primary {
  background: var(--color-primary-800) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--color-primary-700) !important; transform: translateY(-1px); }

.btn-outline {
  background: transparent !important;
  color: var(--color-primary-800) !important;
  border-color: var(--color-primary-800) !important;
}
.btn-outline:hover { background: var(--color-primary-50) !important; }

.btn-outline-white {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.8) !important;
}

.btn-whatsapp {
  background: #25D366 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  animation: pulse-wa 2.5s ease infinite;
  border-color: transparent !important;
}
.btn-whatsapp:hover {
  background: #1da851 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37,211,102,0.50);
  animation: none;
}

@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 4px 16px rgba(37,211,102,0.35), 0 0 0 10px rgba(37,211,102,0); }
}

/* ─── 6. BADGES ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}
.badge--accent, .badge--green { background: var(--color-accent-light); color: var(--color-accent-hover); }
.badge--blue { background: var(--color-primary-100); color: var(--color-primary-800); }

/* ─── 7. SECTION LAYOUT ──────────────────────────────────── */
.section { padding: var(--space-20) 0; }
.section--alt { background: var(--surface-sunken); }

.section__header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.section__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--color-primary-900);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}
.section__subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.section__footer { text-align: center; margin-top: var(--space-10); }

.eyebrow-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  display: block;
}
.eyebrow-label--light { color: rgba(255,255,255,0.65); }

/* ─── 8. INGREDIENT CARD (archive loop) ─────────────────── */
.ingredient-card {
  background: var(--surface-raised);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: all var(--duration-normal) var(--ease-standard);
  text-decoration: none;
}
.ingredient-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-300);
}
.ingredient-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
}
.ingredient-card__header {
  padding: var(--space-8) var(--space-6) var(--space-5);
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-accent-subtle));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.ingredient-card__icon {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}
.ingredient-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary-900);
}
.ingredient-card__category {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ingredient-card__body {
  padding: var(--space-5) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ingredient-card__excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ingredient-card__footer {
  padding: var(--space-4) var(--space-6);
  background: var(--surface-sunken);
  border-top: 1px solid var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ingredient-card__read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ─── 9. PROGRESS BAR (ingredientes sidebar) ────────────── */
.bar-track {
  height: 6px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  transition: width 1s var(--ease-standard);
}

/* ─── 10. COUNTRY SELECTOR (Hero + Inline) ──────────────── */
.country-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.country-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-lg);
  color: #ffffff;
  transition: all var(--duration-normal);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-heading);
}
.country-btn:hover, .country-btn.is-active {
  background: rgba(255,255,255,0.20);
  border-color: var(--color-accent);
  color: #ffffff;
  transform: translateY(-2px);
}
.country-btn__flag { font-size: 24px; line-height: 1; }
.country-btn__info { display: flex; flex-direction: column; }
.country-btn__info strong { font-size: 0.9375rem; font-weight: 700; }
.country-btn__info small { font-size: 0.75rem; opacity: 0.7; }

/* ─── 11. WHATSAPP FLOTANTE ──────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  animation: pulse-wa 2.5s ease infinite;
  text-decoration: none;
}
.wa-float:hover {
  background: #1da851;
  transform: scale(1.1);
  box-shadow: 0 6px 32px rgba(37,211,102,0.6);
  animation: none;
  color: #ffffff;
}
.wa-float__tooltip {
  position: absolute;
  right: 70px;
  background: #1a1d27;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal);
}
.wa-float:hover .wa-float__tooltip { opacity: 1; }

/* ─── 12. FOOTER ─────────────────────────────────────────── */
.site-footer,
.tipsplus-footer {
  background: var(--gradient-hero);
  color: rgba(255,255,255,0.80);
  font-size: 0.9375rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding: var(--space-16) 0 var(--space-10);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-5); }
.footer__tagline {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}
.footer__countries { display: flex; gap: var(--space-3); font-size: 24px; }
.footer__nav-title {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-4);
}
.footer__nav ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__nav a {
  color: rgba(255,255,255,0.75);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--duration-normal);
}
.footer__nav a:hover { color: #ffffff; }
.footer__wa-list { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__wa-link {
  color: rgba(255,255,255,0.75);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--duration-normal);
}
.footer__wa-link:hover { color: var(--color-accent); }
.footer__bottom {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer__disclaimer {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}
.footer__legal {
  display: flex;
  gap: var(--space-5);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.50);
  flex-wrap: wrap;
}
.footer__legal a { color: rgba(255,255,255,0.55); text-decoration: none; }
.footer__legal a:hover { color: rgba(255,255,255,0.85); }

/* ─── 13. OVERRIDE KADENCE FOOTER ───────────────────────── */
/* Neutralizar estilos de footer de Kadence */
.site-footer .footer-html,
.site-footer .site-info { display: none; }

/* ─── 14. REVEAL ANIMATIONS ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─── 15. COMPONENTES DE RESEÑAS ─────────────────────────── */
.tp-verdict-card {
  background: linear-gradient(135deg, #f0f7fd, #d6f5e7);
  border: 2px solid var(--global-palette3);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.tp-verdict-card__text {
  flex: 1;
}
.tp-verdict-card__badge {
  text-align: center;
  min-width: 140px;
}
.tp-pros-contras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0;
}
.tp-ficha-tecnica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: #e2e8f0;
}
.tp-ficha-tecnica-cta {
  padding: 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ─── 16. RESPONSIVE MOBILE — MOBILE-FIRST OVERRIDE ────────
   Este bloque se carga ÚLTIMO (después de Kadence) para garantizar
   que los media queries superen cualquier regla del tema padre.
   ────────────────────────────────────────────────────────────── */

/* === BASE DESKTOP (sin media query — gana sobre TODO) */
/* El grid del artículo + sidebar: 2 columnas en escritorio */
.tp-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 60px !important;
  padding: 40px 0 100px !important;
  position: relative !important;
  box-sizing: border-box !important;
}
.tp-disclaimer-alert {
  background: #fff9e6 !important;
  border: 1px solid #ffe58f !important;
  border-left: 5px solid #ffcc00 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 40px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

/* === TABLET (≤1024px) ======================== */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  
  /* Artículo + Sidebar: apilar verticalmente */
  .tp-main-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 40px !important;
    grid-template-columns: none !important;
  }
  
  /* Sidebar: 2 columnas laterales en tablet */
  .tp-sidebar {
    position: static !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-self: auto !important;
  }
  
  /* Hero */
  .tp-hero { padding: 40px 0 120px; }
  .tp-hero__grid { 
    display: flex !important; 
    flex-direction: column !important;
    gap: 32px !important; 
  }
}

/* === MOBILE GRANDE (≤768px) ================== */
@media (max-width: 768px) {
  /* === RESEÑAS RESPONSIVE === */
  .tp-reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .tp-verdict-card {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 24px !important;
    text-align: center !important;
  }
  .tp-pros-contras-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .tp-ficha-tecnica-cta {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .tp-ficha-tecnica-cta a {
    width: 100% !important;
    justify-content: center !important;
  }

  :root {
    --space-20: 60px;
    --space-16: 48px;
    --space-12: 36px;
  }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .country-selector { flex-direction: column; align-items: center; }
  .wa-float { bottom: 20px; right: 20px; }
  
  /* === CONTENEDOR === */
  .tp-container { padding: 0 16px !important; }

  /* === HERO === */
  .tp-hero { padding: 28px 0 90px !important; }
  .tp-hero__title {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    letter-spacing: -0.5px !important;
  }
  .tp-hero__wave svg { height: 50px !important; }
  
  /* === MAIN GRID (El bloque de 2 columnas artículo+sidebar) === */
  /* !important en todo para vencer los inline styles de single-ingrediente.php */
  .tp-main-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 28px !important;
    padding: 20px 0 60px !important;
    box-sizing: border-box !important;
  }
  
  /* === ARTÍCULO: Sin márgenes laterales que lo aplasten === */
  .tp-article,
  .tp-article-render,
  .tp-article-body,
  article.tp-article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Kadence columns/layouts dentro del artículo */
  .tp-article-render [class*="-wrap"],
  .tp-article-render [class*="-layout"],
  .tp-article-render [class*="wp-block-columns"],
  .tp-article-render [class*="kb-row-layout"],
  .tp-article-render [class*="kb-inside-container"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* === SIDEBAR: 1 columna en móvil === */
  .tp-sidebar {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .tp-side-widget {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .tp-side-widget__title {
    font-size: 16px !important;
    margin-bottom: 16px !important;
  }
  
  /* === TOC === */
  .tp-toc-link { font-size: 14px !important; padding: 10px 16px !important; }
  
  /* === FAQ ACCORDION (nativo wireframe) === */
  .faq-item__question {
    font-size: 15px !important;
    padding: 16px 14px !important;
    gap: 10px !important;
  }
  .faq-item__answer {
    font-size: 14px !important;
    padding: 0 14px 16px !important;
  }
  
  /* === KADENCE ACCORDION === */
  .wp-block-kadence-accordion .kt-blocks-accordion-header {
    padding: 16px 14px !important;
  }
  .wp-block-kadence-accordion .kt-blocks-accordion-title {
    font-size: 15px !important;
  }
  
  /* === EXPERIENCE QUOTE === */
  .experience-quote {
    padding: 40px 20px 24px 36px !important;
    margin: 32px 0 !important;
  }
  .experience-quote::before {
    font-size: 64px !important;
    top: 0 !important;
    left: 8px !important;
  }
  .experience-quote p { font-size: 17px !important; }
  
  /* === DISCLAIMER ALERTA === */
  .tp-disclaimer-alert {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
  }
  
  /* === CTA FINAL === */
  .tp-final-cta {
    padding: 32px 16px !important;
    margin: 40px 0 !important;
    border-radius: 20px !important;
  }
  .tp-final-cta h2 {
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
    margin-bottom: 12px !important;
  }
  .tp-final-cta > div {
    gap: 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .tp-final-cta a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }
  
  /* === PRODUCT CARDS === */
  .tp-product-card { gap: 12px !important; padding: 16px !important; }
  .tp-product-card__img {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
}

/* === MOBILE PEQUEÑO (≤480px) ================= */
@media (max-width: 480px) {
  .tp-ficha-tecnica-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hero */
  .tp-hero { padding: 20px 0 70px !important; }
  .tp-hero__title { font-size: clamp(1.6rem, 9vw, 2rem) !important; }
  .tp-hero__wave svg { height: 36px !important; }

  /* Sidebar */
  .tp-side-widget { padding: 14px 12px !important; border-radius: 14px !important; }

  /* FAQ */
  .faq-item__question {
    font-size: 14px !important;
    padding: 14px 12px !important;
  }
  .faq-item__icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 14px !important;
  }

  /* Kadence Accordion */
  .wp-block-kadence-accordion .kt-blocks-accordion-header { padding: 14px 12px !important; }
  .wp-block-kadence-accordion .kt-blocks-accordion-title { font-size: 14px !important; }
  .wp-block-kadence-accordion .kt-accordion-panel-inner { font-size: 14px !important; }

  /* CTA */
  .tp-final-cta { padding: 24px 12px !important; }
  .tp-final-cta h2 { font-size: 1.3rem !important; }

  /* Experience Quote */
  .experience-quote {
    padding: 36px 14px 20px 26px !important;
  }
  .experience-quote::before { font-size: 50px !important; }
  .experience-quote p { font-size: 16px !important; }
}

/* ─── 17. TABLAS RESPONSIVAS Y CENTRADAS ────────────────── */
/* Contenedor con scroll para evitar desbordamientos y permitir deslizamiento horizontal */
.tp-table-scroll-wrapper {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 28px !important;
}

/* Estilos globales para las tablas y sus celdas */
.entry-content table,
.tp-article table,
.tp-article-body table,
.tp-article-render table,
.tp-about-page table,
.wp-block-table table,
table {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

/* Previene el recorte de palabras e inconclusión de textos en celdas (tanto escritorio como móvil) */
table th, table td,
.entry-content table th, .entry-content table td,
.tp-article-body table th, .tp-article-body table td {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Anula cualquier restricción de desbordamiento en elementos internos del editor Gutenberg/Kadence */
table td *, table th *,
.entry-content table td *, .entry-content table th * {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: none !important;
  width: auto !important;
}

/* En celulares y pantallas pequeñas (Mobile Breakpoints) — Reformateo a Tarjetas Stacked */
@media (max-width: 768px) {
  /* Anulamos el scroll horizontal ya que las tarjetas ocupan el 100% de la pantalla */
  .tp-table-scroll-wrapper,
  .entry-content .wp-block-table,
  .wp-block-table {
    display: block !important;
    width: 100% !important;
    overflow-x: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* La tabla y sus secciones son bloques cards */
  .entry-content table,
  .tp-article table,
  .tp-article-body table,
  .tp-article-render table,
  .tp-about-page table,
  .wp-block-table table,
  table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
  }

  thead {
    display: none !important; /* Ocultamos cabecera tabular antigua */
  }

  tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Cada fila se convierte en una hermosa tarjeta independiente */
  tr {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
  }

  /* Cada celda se comporta como un bloque vertical */
  table th, table td,
  .entry-content table th, .entry-content table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    min-width: 0 !important;
  }

  table td:last-child,
  .entry-content table td:last-child {
    border-bottom: none !important;
  }

  /* El primer TD (el Criterio) actúa como el encabezado destacado de la tarjeta */
  table td:first-child,
  .entry-content table td:first-child {
    font-size: 16px !important;
    font-weight: 850 !important;
    color: var(--tp-blue-dark) !important;
    background: #f8fafc !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    margin-bottom: 12px !important;
  }

  /* Inyectar las etiquetas de columna correspondientes (Suplemento vs Fármaco) */
  table td:not(:first-child)::before,
  .entry-content table td:not(:first-child)::before {
    content: attr(data-label);
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--tp-green) !important; /* Verde elegante para el suplemento */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 4px !important;
  }

  /* Color rojo diferenciador cuando la etiqueta contiene "Fármaco" o "Químico" */
  table td:not(:first-child)[data-label*="Fármaco"]::before,
  table td:not(:first-child)[data-label*="Químico"]::before,
  .entry-content table td:not(:first-child)[data-label*="Fármaco"]::before,
  .entry-content table td:not(:first-child)[data-label*="Químico"]::before {
    color: #ef4444 !important; /* Rojo para fármacos */
  }
}



/* -----------------------------------------------------------
   CUSTOM TP-SITE-FOOTER
   ----------------------------------------------------------- */
.tp-site-footer {
  background: #0f172a;
  color: #e2e8f0;
  padding: 60px 20px 20px;
  font-family: inherit;
  margin-top: 40px;
}
.tp-site-footer .tp-container {
  max-width: 1200px;
  margin: 0 auto;
}
.tp-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.5fr;
  gap: 32px;
  margin-bottom: 40px;
}
.tp-footer-col--compliance {
  text-align: left;
}

.tp-footer-col h4.tp-footer-title {
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 20px;
  font-weight: 700;
}
.tp-footer-col--brand .tp-footer-logo {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.tp-footer-desc, .tp-footer-compliance-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin-bottom: 24px;
}

/* Geo Selector en Footer */
.tp-footer-geo {
  background: rgba(255,255,255,0.05);
  padding: 16px;
  border-radius: 12px;
  display: inline-block;
}
.tp-geo-label, .tp-geo-switcher-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.tp-geo-current {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}
.tp-geo-flags {
  display: flex;
  gap: 12px;
}
.tp-geo-flag-link {
  font-size: 1.25rem;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.tp-geo-flag-link:hover {
  opacity: 1;
}

/* Links List */
.tp-footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tp-footer-links-list li {
  margin-bottom: 12px;
}
.tp-footer-links-list a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.tp-footer-links-list a:hover {
  color: #2abf6f;
}

/* Logistics */
.tp-footer-logistics {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.tp-logistics-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: #cbd5e1;
}
.tp-logistics-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* WhatsApp Button */
.tp-footer-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2abf6f;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.2s, background 0.2s;
}
.tp-footer-wa-btn:hover {
  background: #23a05c;
  transform: translateY(-2px);
  color: #ffffff;
}

/* Legal Links */
.tp-footer-legal-links {
  margin-top: 16px;
  font-size: 0.85rem;
  color: #64748b;
}
.tp-footer-legal-links a {
  color: #94a3b8;
  text-decoration: none;
  margin: 0 4px;
}
.tp-footer-legal-links a:hover {
  color: #ffffff;
}

/* Bottom Bar */
.tp-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  text-align: center;
}
.tp-copyright {
  font-size: 0.9rem;
  color: #ffffff;
  margin-bottom: 8px;
}
.tp-footer-disclaimer-small {
  font-size: 0.75rem;
  color: #64748b;
}

/* Responsive */
@media (max-width: 1024px) {
  .tp-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .tp-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tp-footer-col--compliance {
    padding-top: 20px;
    text-align: left;
  }
  .tp-footer-geo {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .tp-footer-wa-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}