/* ============================================================
   RESPONSIVE-FIX.CSS — OVERRIDE TOTAL
   Diseño: Apple Dark Premium × Gym Elite
   Carga ÚLTIMO = máxima prioridad
   SIN dependencia de imágenes — todo CSS puro
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  --surface: #161616;
  --surface-2: #1c1c1e;
  --surface-3: #2c2c2e;
  --border: rgba(255,255,255,.08);
  --border-hover: rgba(255,255,255,.15);
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #6e6e73;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-light: rgba(0,113,227,.12);
  --green: #30d158;
  --green-dark: #28a745;
  --green-glow: rgba(48,209,88,.25);
  --orange: #ff9f0a;
  --red: #ff453a;
  --cyan: #64d2ff;
  --purple: #bf5af2;
  --gold: #ffd60a;
  --whatsapp: #25d366;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow: 0 4px 20px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.7);
  --shadow-glow: 0 0 30px rgba(0,113,227,.15);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Orbitron', var(--font-body);
  --transition: .3s cubic-bezier(.25,.1,.25,1);
  --transition-slow: .5s cubic-bezier(.25,.1,.25,1);
}

/* ── RESET TOTAL — anular TODOS los otros CSS ────────────── */
*,
*::before,
*::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

/* Anular TODAS las animaciones de los otros CSS */
@keyframes chromeShift { from,to { filter: none; } }
@keyframes powerPulse { from,to { transform: none; opacity: 1; } }
@keyframes powerShake { from,to { transform: none; } }
@keyframes powerFlash { from,to { opacity: 1; } }
@keyframes rainbowShift { from,to { filter: none; } }
@keyframes sealFloat { from,to { transform: none; } }
@keyframes sealShine { from,to { background-position: 0; } }
@keyframes neonGlow { from,to { text-shadow: none; } }
@keyframes chromePulse { from,to { opacity: 1; } }
@keyframes glowPulse { from,to { box-shadow: none; } }
@keyframes pageLoadEffect { from,to { opacity: 1; transform: none; } }
@keyframes fadeIn { from,to { opacity: 1; transform: none; } }

/* ── BASE ──────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth !important;
  -webkit-text-size-adjust: 100% !important;
  font-size: 16px !important;
  overflow-x: hidden !important;
}

body {
  font-family: var(--font-body) !important;
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

body.power-page-load {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

::selection {
  background: var(--accent) !important;
  color: #fff !important;
}

::-webkit-scrollbar { width: 8px !important; }
::-webkit-scrollbar-track { background: var(--bg-primary) !important; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3) !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary) !important; }

img {
  max-width: 100% !important;
  height: auto !important;
}

a { transition: var(--transition) !important; }

.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
}

/* ── HEADER ────────────────────────────────────────────────── */
.header,
.header.chrome-effect,
header.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: rgba(0,0,0,.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

.header .container {
  padding: 0 24px !important;
}

.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 52px !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

.logo-container {
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.premium-seal,
.premium-seal.power-flash {
  background: var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 14px !important;
  font-family: var(--font-heading) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  filter: none !important;
  display: flex !important;
  align-items: center !important;
  text-transform: uppercase !important;
}

.city-name {
  color: #fff !important;
  font-size: inherit !important;
}

.nav-location,
.nav-location.power-hover-glow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--text-secondary) !important;
  font-size: .82rem !important;
  font-family: var(--font-body) !important;
  animation: none !important;
  filter: none !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.nav-location .power-icon,
.nav-location i {
  color: var(--accent) !important;
  font-size: .85rem !important;
  animation: none !important;
  filter: none !important;
}

.nav-contact {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.nav-contact .power-button,
.nav-contact .power-button.power-hover-glow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  border-radius: 980px !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
  letter-spacing: .3px !important;
  white-space: nowrap !important;
  animation: none !important;
  filter: none !important;
  border: none !important;
  text-transform: none !important;
}

.nav-contact .power-button:first-child {
  background: var(--whatsapp) !important;
  color: #fff !important;
}
.nav-contact .power-button:first-child:hover {
  background: #20bd5a !important;
  transform: scale(1.03) !important;
}

.nav-contact .power-button:last-child {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.nav-contact .power-button:last-child:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-hover) !important;
}

/* ── HERO ──────────────────────────────────────────────────── */
.hero-enhanced,
.power-section.hero-enhanced,
section.power-section.hero-enhanced {
  padding: 120px 0 80px !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,113,227,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(48,209,88,.06) 0%, transparent 50%),
    var(--bg-primary) !important;
  min-height: auto !important;
  position: relative !important;
  overflow: hidden !important;
  animation: none !important;
  filter: none !important;
}

.hero-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}

.hero-content {
  max-width: 600px !important;
}

.title-container {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

/* Ocultar el sello de imagen rota */
.power-seal.premium-seal {
  display: none !important;
}

/* Solo mostrar el sello del header */
.logo-container .premium-seal,
.logo-container .premium-seal.power-flash {
  display: flex !important;
}

.hero-content .power-title,
.hero-content .power-title.power-pulse,
.hero-content h1.power-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--text-primary) !important;
  letter-spacing: -.5px !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  background: linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero-description,
.hero-description.power-hover-glow {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
  margin: 20px 0 32px !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  animation: none !important;
  filter: none !important;
  max-width: 520px !important;
}

.hero-description br {
  display: block !important;
  content: '' !important;
  margin-top: 4px !important;
}

/* ── HERO MEDIA — Reemplazo de imagen rota ─────────────────── */
.hero-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Ocultar la imagen rota */
.hero-image,
.hero-media img,
img.hero-image {
  display: none !important;
}

/* Crear visual CSS en lugar de imagen */
.hero-media::before {
  content: '\f44b' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%,
    rgba(0,113,227,.15) 0%,
    rgba(0,113,227,.05) 50%,
    transparent 70%) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
  animation: heroFloat 6s ease-in-out infinite !important;
}

.hero-media::after {
  content: '' !important;
  position: absolute !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,113,227,.08) !important;
  animation: heroFloat 6s ease-in-out infinite reverse !important;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

/* ── FEATURES GRID (Hero) ──────────────────────────────────── */
.power-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin: 28px 0 !important;
}

.products-grid.power-features-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.benefits-grid.power-features-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

.power-feature,
.power-feature.power-hover-glow {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px 16px !important;
  text-align: center !important;
  transition: var(--transition) !important;
  animation: none !important;
  filter: none !important;
}

.power-feature:hover {
  border-color: var(--border-hover) !important;
  background: var(--surface-2) !important;
  transform: translateY(-2px) !important;
}

.power-feature .power-icon,
.power-feature i.power-icon {
  font-size: 1.5rem !important;
  color: var(--accent) !important;
  margin-bottom: 10px !important;
  display: block !important;
  animation: none !important;
  filter: none !important;
}

.power-feature h3 {
  font-family: var(--font-body) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 8px !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
}

/* Progress bars */
.power-progress {
  height: 3px !important;
  background: var(--surface-3) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin: 8px 0 !important;
}

.power-progress-bar {
  height: 100% !important;
  width: var(--progress, 0%) !important;
  background: linear-gradient(90deg, var(--accent), var(--cyan)) !important;
  border-radius: 2px !important;
  animation: progressFill 1.5s ease forwards !important;
}

@keyframes progressFill {
  from { width: 0; }
  to { width: var(--progress, 0%); }
}

.feature-detail {
  font-size: .72rem !important;
  color: var(--text-tertiary) !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
}

/* ── HERO CTA ──────────────────────────────────────────────── */
.hero-cta {
  display: flex !important;
  gap: 12px !important;
  margin-top: 32px !important;
  flex-wrap: wrap !important;
}

/* ── BOTONES GLOBALES ──────────────────────────────────────── */
.power-button,
a.power-button,
.power-button.power-shake,
.power-button.power-pulse,
.power-button.power-hover-glow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  font-family: var(--font-body) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  border-radius: 980px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  border: none !important;
  letter-spacing: .2px !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
}

.hero-cta .power-button:first-child,
.power-button.buy-button {
  background: var(--accent) !important;
  color: #fff !important;
}
.hero-cta .power-button:first-child:hover,
.power-button.buy-button:hover {
  background: var(--accent-hover) !important;
  transform: scale(1.04) !important;
  box-shadow: var(--shadow-glow) !important;
}

.hero-cta .power-button:last-child {
  background: var(--whatsapp) !important;
  color: #fff !important;
}
.hero-cta .power-button:last-child:hover {
  background: #20bd5a !important;
  transform: scale(1.04) !important;
}

.power-button.info-button {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.power-button.info-button:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-hover) !important;
}

/* ── SECCIONES GENERALES ───────────────────────────────────── */
.power-section,
section.power-section {
  padding: 80px 0 !important;
  position: relative !important;
  animation: none !important;
  filter: none !important;
  background: transparent !important;
}

.power-section .power-title.text-center,
.power-section > .container > h2,
h2.power-title.text-center {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 48px !important;
  color: var(--text-primary) !important;
  letter-spacing: -.3px !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* ── PRODUCTOS ─────────────────────────────────────────────── */
.products-enhanced,
.power-section.products-enhanced {
  background: var(--bg-secondary) !important;
  padding: 80px 0 !important;
}

.power-card,
.power-card.product-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
  animation: none !important;
  filter: none !important;
  position: relative !important;
}

.power-card:hover {
  border-color: var(--border-hover) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Badge del producto */
.product-badge,
.product-badge.power-flash {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  font-family: var(--font-body) !important;
  padding: 4px 12px !important;
  border-radius: 980px !important;
  letter-spacing: 1px !important;
  z-index: 2 !important;
  animation: none !important;
  filter: none !important;
}

/* Imagen del producto — reemplazar con visual CSS */
.featured-product-image,
.featured-product-image.power-pulse {
  width: 100% !important;
  height: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  animation: none !important;
  filter: none !important;
}

/* Ocultar imagenes rotas de productos */
.featured-product-image img {
  display: none !important;
}

/* Fondo visual para cada producto */
.product-card:nth-child(1) .featured-product-image {
  background: linear-gradient(135deg, 
    rgba(0,113,227,.08) 0%, 
    rgba(100,210,255,.06) 50%, 
    rgba(0,0,0,0) 100%) !important;
}
.product-card:nth-child(2) .featured-product-image {
  background: linear-gradient(135deg, 
    rgba(48,209,88,.08) 0%, 
    rgba(100,210,255,.06) 50%, 
    rgba(0,0,0,0) 100%) !important;
}
.product-card:nth-child(3) .featured-product-image {
  background: linear-gradient(135deg, 
    rgba(191,90,242,.08) 0%, 
    rgba(0,113,227,.06) 50%, 
    rgba(0,0,0,0) 100%) !important;
}

/* Iconos como reemplazo de imagenes de producto */
.product-card:nth-child(1) .featured-product-image::before {
  content: '\f0e7' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 56px !important;
  color: var(--accent) !important;
  opacity: .7 !important;
}
.product-card:nth-child(2) .featured-product-image::before {
  content: '\f44b' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 56px !important;
  color: var(--green) !important;
  opacity: .7 !important;
}
.product-card:nth-child(3) .featured-product-image::before {
  content: '\f5d1' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 56px !important;
  color: var(--purple) !important;
  opacity: .7 !important;
}

/* Contenido del producto */
.featured-product-content {
  padding: 24px !important;
}

.featured-product-content .power-title,
.featured-product-content h3.power-title,
.featured-product-content h3 {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Precio */
.power-counter,
.power-counter.price-tag {
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--green) !important;
  margin-bottom: 12px !important;
  letter-spacing: -1px !important;
  animation: none !important;
  filter: none !important;
}

/* Rating */
.product-rating,
.product-rating.power-hover-glow {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-bottom: 16px !important;
  animation: none !important;
  filter: none !important;
}

.product-rating i {
  color: var(--gold) !important;
  font-size: .82rem !important;
}

.product-rating span {
  color: var(--text-tertiary) !important;
  font-size: .78rem !important;
  margin-left: 6px !important;
  font-family: var(--font-body) !important;
}

/* Lista de caracteristicas del producto */
.product-features {
  margin-bottom: 20px !important;
}

.product-features-list {
  list-style: none !important;
  padding: 0 !important;
}

.product-features-list li,
.product-features-list li.power-hover-glow {
  padding: 6px 0 !important;
  font-size: .82rem !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  border-bottom: 1px solid var(--border) !important;
  animation: none !important;
  filter: none !important;
}

.product-features-list li:last-child {
  border-bottom: none !important;
}

/* Acciones del producto */
.product-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.product-actions .power-button {
  flex: 1 !important;
  min-width: 120px !important;
  padding: 12px 16px !important;
  font-size: .82rem !important;
  text-align: center !important;
  justify-content: center !important;
}

/* ── BENEFICIOS ────────────────────────────────────────────── */
.benefits-enhanced,
.power-section.benefits-enhanced {
  background: var(--bg-primary) !important;
  padding: 80px 0 !important;
}

.benefit-card,
.benefit-card.power-hover-glow,
.power-feature.benefit-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px 24px !important;
  text-align: left !important;
  transition: var(--transition) !important;
  animation: none !important;
  filter: none !important;
}

.benefit-card:hover {
  border-color: var(--accent) !important;
  background: var(--surface-2) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-glow) !important;
}

.benefit-card .power-icon,
.benefit-card i {
  font-size: 1.8rem !important;
  color: var(--accent) !important;
  margin-bottom: 16px !important;
  display: block !important;
  animation: none !important;
  filter: none !important;
}

.benefit-card h3 {
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 10px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

.benefit-card p {
  color: var(--text-secondary) !important;
  font-size: .88rem !important;
  margin-bottom: 16px !important;
  font-family: var(--font-body) !important;
  line-height: 1.5 !important;
}

.benefit-details {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 12px !important;
}

.benefit-details li {
  padding: 4px 0 !important;
  font-size: .82rem !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
}

/* ── TESTIMONIOS ───────────────────────────────────────────── */
.testimonials-enhanced,
.power-section.testimonials-enhanced {
  background: var(--bg-secondary) !important;
  padding: 80px 0 !important;
}

.testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.testimonial-card,
.power-card.testimonial-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 24px !important;
  transition: var(--transition) !important;
  animation: none !important;
  filter: none !important;
}

.testimonial-card:hover {
  border-color: var(--border-hover) !important;
  transform: translateY(-3px) !important;
}

.testimonial-rating {
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 2px !important;
}

.testimonial-rating i {
  color: var(--gold) !important;
  font-size: .85rem !important;
}

.testimonial-text {
  color: var(--text-secondary) !important;
  font-size: .9rem !important;
  line-height: 1.65 !important;
  font-family: var(--font-body) !important;
  font-style: italic !important;
  margin-bottom: 20px !important;
  position: relative !important;
  padding-left: 16px !important;
  border-left: 2px solid var(--accent) !important;
}

.testimonial-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Ocultar imagen rota del avatar y reemplazar con inicial CSS */
.author-image,
.testimonial-author img {
  display: none !important;
}

.testimonial-author::before {
  content: '' !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--accent), var(--cyan)) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Iniciales dentro de los avatares por card */
.testimonial-card:nth-child(1) .testimonial-author::before {
  content: 'C' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #fff !important;
}
.testimonial-card:nth-child(2) .testimonial-author::before {
  content: 'A' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--green), var(--cyan)) !important;
}
.testimonial-card:nth-child(3) .testimonial-author::before {
  content: 'F' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--purple), var(--accent)) !important;
}

.author-info h4 {
  font-family: var(--font-body) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.author-info span {
  font-size: .78rem !important;
  color: var(--text-tertiary) !important;
  font-family: var(--font-body) !important;
}

/* ── CTA FINAL ─────────────────────────────────────────────── */
.cta-enhanced,
.power-section.cta-enhanced {
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,113,227,.1) 0%, transparent 60%),
    var(--bg-primary) !important;
  padding: 80px 0 !important;
}

.cta-card,
.power-card.cta-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 56px 40px !important;
  text-align: center !important;
  animation: none !important;
  filter: none !important;
}

.cta-card .power-title,
.cta-card h2.power-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 12px !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

.cta-description {
  color: var(--text-secondary) !important;
  font-size: 1rem !important;
  font-family: var(--font-body) !important;
  margin-bottom: 28px !important;
}

.cta-buttons {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

.cta-buttons .power-button:first-child {
  background: var(--whatsapp) !important;
  color: #fff !important;
}
.cta-buttons .power-button:first-child:hover {
  background: #20bd5a !important;
  transform: scale(1.04) !important;
}

.cta-buttons .power-button:last-child {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.cta-buttons .power-button:last-child:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-hover) !important;
}

/* ── WHATSAPP FLOTANTE ─────────────────────────────────────── */
.whatsapp-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

.whatsapp-float-btn,
.whatsapp-float-btn.power-pulse {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--whatsapp) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(37,211,102,.4) !important;
  transition: var(--transition) !important;
  animation: none !important;
  filter: none !important;
}

.whatsapp-float-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 30px rgba(37,211,102,.5) !important;
}

.whatsapp-float-text,
.whatsapp-float-text.power-flash {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  padding: 6px 12px !important;
  border-radius: 980px !important;
  border: 1px solid var(--border) !important;
  white-space: nowrap !important;
  animation: none !important;
  filter: none !important;
}

/* ── ANULAR TODOS LOS EFECTOS HEREDADOS ────────────────────── */
.chrome-effect,
.power-hover-glow,
.power-flash,
.power-pulse,
.power-shake,
.power-page-load,
[class*="chrome"],
[class*="power-"] {
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Pero mantener hover/transition intencionales */
.power-button:hover,
.power-card:hover,
.power-feature:hover {
  filter: none !important;
}

/* ── FOOTER CSS (no existe en HTML, creado via CSS) ────────── */
body::after {
  content: '\00A9  2026 Suplementos Deportivos Ya \00B7  Chile \00B7  Todos los derechos reservados' !important;
  display: block !important;
  text-align: center !important;
  padding: 32px 24px !important;
  font-size: .78rem !important;
  color: var(--text-tertiary) !important;
  font-family: var(--font-body) !important;
  border-top: 1px solid var(--border) !important;
  background: var(--bg-primary) !important;
  letter-spacing: .2px !important;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── TABLET LANDSCAPE (1200px) ─────────────────────────────── */
@media (max-width: 1200px) {
  .hero-container {
    gap: 40px !important;
  }

  .hero-media::before {
    width: 260px !important;
    height: 260px !important;
    font-size: 90px !important;
  }

  .hero-media::after {
    width: 300px !important;
    height: 300px !important;
  }
}

/* ── TABLET (992px) ────────────────────────────────────────── */
@media (max-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  .hero-description {
    max-width: 100% !important;
  }

  .hero-cta {
    justify-content: center !important;
  }

  .hero-media {
    order: -1 !important;
  }

  .hero-media::before {
    width: 220px !important;
    height: 220px !important;
    font-size: 80px !important;
  }

  .hero-media::after {
    width: 260px !important;
    height: 260px !important;
  }

  .products-grid.power-features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .benefits-grid.power-features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .testimonial-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}

/* ── MOBILE LANDSCAPE / TABLET SMALL (768px) ──────────────── */
@media (max-width: 768px) {
  .container {
    padding: 0 16px !important;
  }

  .header .container {
    padding: 0 16px !important;
  }

  .navbar {
    height: 48px !important;
    gap: 8px !important;
  }

  .premium-seal,
  .premium-seal.power-flash {
    padding: 5px 10px !important;
    font-size: .62rem !important;
  }

  .nav-location {
    display: none !important;
  }

  .nav-contact .power-button {
    padding: 6px 12px !important;
    font-size: .68rem !important;
  }

  .nav-contact .power-button:last-child {
    display: none !important;
  }

  .hero-enhanced {
    padding: 90px 0 60px !important;
  }

  .hero-content .power-title,
  .hero-content h1.power-title {
    font-size: 1.5rem !important;
  }

  .hero-description {
    font-size: .95rem !important;
  }

  .power-features-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .power-feature {
    padding: 14px 10px !important;
  }

  .power-feature h3 {
    font-size: .62rem !important;
  }

  .products-grid.power-features-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .benefits-grid.power-features-grid {
    grid-template-columns: 1fr !important;
  }

  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }

  .testimonial-card:nth-child(3) {
    max-width: 100% !important;
  }

  .power-section {
    padding: 56px 0 !important;
  }

  .cta-card {
    padding: 40px 24px !important;
  }

  .hero-media::before {
    width: 180px !important;
    height: 180px !important;
    font-size: 64px !important;
  }

  .hero-media::after {
    width: 220px !important;
    height: 220px !important;
  }
}

/* ── MOBILE (480px) ────────────────────────────────────────── */
@media (max-width: 480px) {
  html {
    font-size: 15px !important;
  }

  .container {
    padding: 0 14px !important;
  }

  .navbar {
    height: 44px !important;
  }

  .premium-seal,
  .premium-seal.power-flash {
    padding: 4px 8px !important;
    font-size: .58rem !important;
  }

  .nav-contact .power-button:first-child {
    padding: 5px 10px !important;
    font-size: .65rem !important;
  }

  .hero-enhanced {
    padding: 76px 0 48px !important;
  }

  .hero-content .power-title,
  .hero-content h1.power-title {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
  }

  .hero-description {
    font-size: .88rem !important;
    margin: 16px 0 24px !important;
  }

  .power-features-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }

  .power-feature {
    padding: 12px 6px !important;
  }

  .power-feature .power-icon {
    font-size: 1.2rem !important;
    margin-bottom: 6px !important;
  }

  .power-feature h3 {
    font-size: .55rem !important;
  }

  .feature-detail {
    font-size: .6rem !important;
  }

  .hero-cta {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-cta .power-button {
    width: 100% !important;
    justify-content: center !important;
  }

  .power-button,
  a.power-button {
    padding: 12px 20px !important;
    font-size: .82rem !important;
  }

  .power-section {
    padding: 44px 0 !important;
  }

  .power-section .power-title.text-center,
  h2.power-title.text-center {
    font-size: 1.2rem !important;
    margin-bottom: 32px !important;
  }

  .featured-product-image {
    height: 180px !important;
  }

  .featured-product-content {
    padding: 18px !important;
  }

  .featured-product-content h3 {
    font-size: .88rem !important;
  }

  .power-counter.price-tag {
    font-size: 1.4rem !important;
  }

  .product-actions {
    flex-direction: column !important;
  }

  .product-actions .power-button {
    width: 100% !important;
  }

  .benefit-card {
    padding: 24px 18px !important;
  }

  .testimonial-card {
    padding: 22px 18px !important;
  }

  .cta-card {
    padding: 32px 18px !important;
    border-radius: var(--radius-lg) !important;
  }

  .cta-buttons {
    flex-direction: column !important;
  }

  .cta-buttons .power-button {
    width: 100% !important;
  }

  .hero-media::before {
    width: 150px !important;
    height: 150px !important;
    font-size: 50px !important;
  }

  .hero-media::after {
    width: 190px !important;
    height: 190px !important;
  }

  .whatsapp-float {
    bottom: 16px !important;
    right: 16px !important;
  }

  .whatsapp-float-btn {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.3rem !important;
  }

  body::after {
    padding: 24px 14px !important;
    font-size: .72rem !important;
  }
}

/* ── MOBILE SMALL (360px) ──────────────────────────────────── */
@media (max-width: 360px) {
  html {
    font-size: 14px !important;
  }

  .hero-content .power-title,
  .hero-content h1.power-title {
    font-size: 1.15rem !important;
  }

  .power-features-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }

  .power-feature {
    padding: 10px 4px !important;
  }

  .power-feature .power-icon {
    font-size: 1rem !important;
  }

  .power-feature h3 {
    font-size: .5rem !important;
  }

  .feature-detail {
    display: none !important;
  }

  .hero-media::before {
    width: 120px !important;
    height: 120px !important;
    font-size: 40px !important;
  }

  .hero-media::after {
    width: 160px !important;
    height: 160px !important;
  }
}

/* ── LANDSCAPE PHONES ──────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-enhanced {
    padding: 64px 0 32px !important;
  }

  .hero-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    text-align: left !important;
  }

  .hero-media {
    order: 0 !important;
  }

  .hero-media::before {
    width: 120px !important;
    height: 120px !important;
    font-size: 40px !important;
  }

  .hero-media::after {
    width: 150px !important;
    height: 150px !important;
  }

  .hero-cta {
    justify-content: flex-start !important;
  }

  .hero-content .power-title {
    font-size: 1.2rem !important;
  }

  .hero-description {
    font-size: .85rem !important;
    margin: 10px 0 16px !important;
  }

  .power-features-grid {
    gap: 6px !important;
  }
}

/* ── ACCESIBILIDAD ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --border: rgba(255,255,255,.25);
    --text-secondary: #d1d1d6;
    --text-tertiary: #a1a1a6;
  }
}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
  * {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .header,
  .whatsapp-float,
  .hero-media,
  .power-progress,
  body::after {
    display: none !important;
  }

  .power-section {
    page-break-inside: avoid !important;
    padding: 20px 0 !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')' !important;
    font-size: .8em !important;
  }
}

/* ── FIN ───────────────────────────────────────────────────── */