/* ═══════════════════════════════════════════════════════════
   REDESIGN.CSS — Visual Redesign Override Layer
   Loaded AFTER styles.css + ultra.css
   All overrides use equal or higher specificity
   ═══════════════════════════════════════════════════════════ */


/* ── 1. DESIGN SYSTEM TOKENS ────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary:   #FAFAF9;
  --bg-hero:      #0B1D14;
  --bg-card:      #FFFFFF;
  --bg-dark:      #0A1A0F;

  /* Accent palette (muted green) */
  --accent:       #1A7F4B;
  --accent-hover: #15663D;
  --accent-light: #E6F4ED;

  /* Text */
  --text-primary:   #1A1A1A;
  --text-secondary: #555555;
  --text-muted:     #888888;
  --text-on-dark:   #F5F5F0;

  /* Border / Divider */
  --border:       #E8E8E4;
  --border-hover: #D0D0CC;

  /* Radius */
  --r-card: 14px;
  --r-btn:  10px;
  --r-sm:   6px;

  /* Shadows (warm, low contrast) */
  --shadow-card:  0 2px 12px rgba(0,0,0,0.05);
  --shadow-hover: 0 6px 24px rgba(0,0,0,0.08);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-default: 0.3s;

  /* Noise texture (SVG filter) */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}


/* ── 2. HERO SECTION ────────────────────────────────────── */

/* Background: dark radial gradient */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #143524 0%, #0B1D14 100%);
  position: relative;
}

/* Noise texture overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noise);
  pointer-events: none;
  z-index: 0;
}
.hero .container {
  position: relative;
  z-index: 1;
}

/* Remove typewriter / split-text animation on headline */
.hero__headline .char-wrap,
.hero__headline .char {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  display: inline !important;
}

/* Hero headline static render */
.hero__headline {
  animation: none !important;
}

/* Badge: translucent glass with live pulse */
.badge--live {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(74,222,128,0.20);
  color: rgba(255,255,255,0.80);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  padding: 0.45rem 1rem;
  border-radius: 100px;
}
.badge-pulse {
  display: inline-block !important;
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  margin-right: 6px;
  animation: livePulseSubtle 2s ease infinite;
}

/* Sub paragraph */
.hero__sub {
  color: rgba(245,245,240,0.75);
  font-size: 0.98rem;
  line-height: 1.7;
}
.hero__sub strong {
  color: #4ade80;
  font-weight: 700;
}

/* Social proof — softer */
.hero__social-proof {
  opacity: 0.85;
}

/* Chips — transparent, border only */
.chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.60);
  backdrop-filter: blur(2px);
}

/* Mockup glow: breathing premium */
.mockup-glow {
  background: radial-gradient(circle, rgba(26,127,75,0.18) 0%, transparent 60%) !important;
  opacity: 0.7 !important;
}

/* Mockup ring: softer */
.mockup-wrap::after {
  border-color: rgba(26,127,75,0.15) !important;
  box-shadow: 0 0 16px rgba(26,127,75,0.08), inset 0 0 16px rgba(26,127,75,0.03) !important;
  animation: none !important;
}

/* Remove floating dots */
.mockup-dots { display: none !important; }

/* Remove floating badges (hidden via HTML too, but CSS fallback) */
.mockup-float-badge { display: none !important; }

/* FPV floating drone SVGs: hide all */
.fpv-floats { display: none !important; }

/* Shimmer on headline accent: remove */
.headline-line--accent::before {
  display: none !important;
}


/* ── 3. CTA BUTTONS ─────────────────────────────────────── */

.btn-primary {
  background: linear-gradient(135deg, #1A7F4B 0%, #22995a 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--r-btn) !important;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1rem 2.2rem;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(26,127,75,0.25);
  transition: background var(--t-default) var(--ease-out),
              box-shadow var(--t-default) var(--ease-out),
              transform var(--t-default) var(--ease-out);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #15663D 0%, #1A7F4B 100%) !important;
  box-shadow: 0 8px 32px rgba(26,127,75,0.40);
  transform: translateY(-2px);
}

/* Remove pulse animation on CTA */
.btn--pulse {
  animation: none !important;
}

/* Arrow in button */
.btn-primary .btn-arrow {
  transition: transform 0.25s var(--ease-out);
}
.btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}


/* ── 4. STICKY BAR ──────────────────────────────────────── */

.sticky-cta {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}

.sticky-cta__btn {
  background: linear-gradient(135deg, #1A7F4B 0%, #22995a 100%);
  border-radius: var(--r-btn);
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(26,127,75,0.25);
  transition: background var(--t-default) var(--ease-out),
              box-shadow var(--t-default) var(--ease-out),
              transform var(--t-default) var(--ease-out);
}
.sticky-cta__btn:hover {
  background: linear-gradient(135deg, #15663D 0%, #1A7F4B 100%);
  box-shadow: 0 4px 20px rgba(26,127,75,0.40);
  transform: translateY(-1px);
}


/* ── 5. BENEFICIOS ──────────────────────────────────────── */

.section--white.beneficios {
  background: var(--bg-primary);
}

.benefit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-default) var(--ease-out),
              border-color var(--t-default) var(--ease-out);
  /* Remove 3D tilt */
  transform: none !important;
  transform-style: flat !important;
}
.benefit-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}

/* Benefit icon — softer green bg */
.benefit-icon {
  color: var(--accent);
}
.benefit-icon__pulse {
  display: none !important;
}

/* Benefit result tag — softer */
.benefit-result {
  background: var(--accent-light);
  border-color: rgba(26,127,75,0.15);
  color: var(--accent);
}

/* Benefit number */
.benefit-num {
  color: var(--text-muted);
  opacity: 0.5;
}


/* ── 6. PARA QUIEN ──────────────────────────────────────── */

.pq-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.pq-col:hover {
  box-shadow: var(--shadow-hover);
}

/* pq-cta-link → style as full button */
.pq-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.8rem;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(26,127,75,0.20);
  transition: background var(--t-default) var(--ease-out),
              box-shadow var(--t-default) var(--ease-out),
              transform var(--t-default) var(--ease-out);
}
.pq-cta-link:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px rgba(26,127,75,0.30);
  transform: translateY(-1px);
}


/* ── 7. BONOS — CRITICAL FIX: Remove blur/lock ──────────── */

/* Hide lock overlay entirely (also removed from HTML) */
.bono-lock-wrap {
  display: none !important;
}
.bono-unlock-flash {
  display: none !important;
}

/* Bono card styling — clean card, no animated border */
.bono-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-card);
  transition: border-color var(--t-default) var(--ease-out),
              box-shadow var(--t-default) var(--ease-out);
}
.bono-card:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Remove shine sweep animation on bono cards */
.bono-card--shine::before {
  display: none !important;
}

/* Bono glow — premium breathing */
.bono-glow {
  background: radial-gradient(circle, rgba(26,127,75,0.20) 0%, transparent 60%) !important;
  filter: blur(28px) !important;
  animation: fx-glow-breathe 4s ease-in-out infinite;
}

/* Bono ribbon — muted green */
.bono-ribbon {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
}

/* "Incluido" badge — inside bono */
.bono-card .badge--included {
  background: rgba(26,127,75,0.15);
  color: rgba(255,255,255,0.80);
  border: 1px solid rgba(26,127,75,0.25);
}


/* ── 8. PRECIO / OFERTA ─────────────────────────────────── */

.section--white.oferta {
  background: var(--bg-primary);
}

/* Oferta badge — static, no float animation */
.oferta-badge {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  box-shadow: 0 2px 12px rgba(26,127,75,0.25);
  animation: none !important;
}

/* Precio bloque — clean card, remove animated border */
.precio-bloque {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* Remove animated rotating border */
.precio-bloque__border {
  display: none !important;
}

/* Remove shimmer sweep */
.precio-bloque__shimmer {
  display: none !important;
}

/* Remove sparkle dots */
.sparkle {
  display: none !important;
}

/* Precio glow — subtle */
.precio-glow {
  background: radial-gradient(circle, rgba(26,127,75,0.10) 0%, transparent 60%) !important;
  animation: none !important;
  opacity: 0.5 !important;
}

/* Precio ring — remove */
.precio-ring {
  display: none !important;
}

/* Precio number — bold with subtle glow */
.precio-numero {
  color: var(--accent) !important;
  text-shadow: 0 0 30px rgba(26,127,75,0.20) !important;
  font-weight: 900 !important;
}

/* Garantia badge — softer */
.garantia-badge {
  background: var(--accent-light);
  color: var(--accent);
}
.garantia-badge svg {
  color: var(--accent);
  animation: none !important;
}

/* Oferta CTA glow — breathing */
.oferta-cta-glow {
  background: linear-gradient(135deg, var(--accent), #4ade80) !important;
  opacity: 0;
  filter: blur(24px);
  animation: cta-glow-enhanced 3s ease-in-out infinite;
}
@keyframes cta-glow-enhanced {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.25; }
}

/* Oferta CTA button — consistent with primary */
.oferta-cta-btn {
  background: var(--accent) !important;
  animation: none !important;
}
.oferta-cta-btn:hover {
  background: var(--accent-hover) !important;
}

/* Popular badge */
.precio-bloque__popular {
  background: var(--accent);
  color: #FFFFFF;
}

/* Include chips — clean */
.include-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-default) var(--ease-out),
              box-shadow var(--t-default) var(--ease-out);
}
.include-chip:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card);
}

/* Savings callout */
.oferta-savings__new {
  color: var(--accent);
}
.oferta-savings__tag {
  background: var(--accent-light);
  color: var(--accent);
}

/* Live badge — less alarm, more subtle */
.oferta-live-badge {
  background: rgba(26,127,75,0.08);
  border-color: rgba(26,127,75,0.20);
  color: var(--accent);
}
.oferta-live-dot {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(26,127,75,0.3);
  animation: livePulseSubtle 2s ease infinite;
}
@keyframes livePulseSubtle {
  0%   { box-shadow: 0 0 0 0 rgba(26,127,75,0.35); }
  70%  { box-shadow: 0 0 0 6px rgba(26,127,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,127,75,0); }
}

/* Arrow bounce — softer */
.oferta-arrow-down {
  color: var(--accent);
}

/* Urgency strip */
.urgency-strip {
  background: var(--accent-light);
  border-color: rgba(26,127,75,0.15);
  color: var(--accent);
}

/* Valor rows */
.valor-row s {
  color: var(--text-muted);
}
.valor-row--total s {
  color: var(--text-primary);
}


/* ── 9. AUTORIDAD (ABOUT) ──────────────────────────────── */

.photo-frame {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-light), 0 0 30px rgba(26,127,75,0.08) !important;
}
.photo-frame:hover {
  box-shadow: 0 0 0 4px var(--accent-light), 0 12px 32px rgba(0,0,0,0.08) !important;
}

/* Brands — cleaner */
.brand-logo-svg {
  opacity: 0.45;
  transition: opacity var(--t-default) var(--ease-out);
}
.brand-logo-svg:hover {
  opacity: 0.75;
}


/* ── 10. VIDEO PORTFOLIO ────────────────────────────────── */

.galeria-videos.section--green {
  background: var(--bg-dark);
}

.galeria-videos.section--green .video-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  border-radius: var(--r-card);
  transition: border-color var(--t-default) var(--ease-out),
              box-shadow var(--t-default) var(--ease-out);
}
.galeria-videos.section--green .video-card:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
}

/* Play button — softer */
.play-btn-circle {
  background: rgba(255,255,255,0.85);
  transition: transform var(--t-default) var(--ease-out),
              background var(--t-default) var(--ease-out);
}
.play-btn:hover .play-btn-circle {
  transform: scale(1.06);
  background: rgba(255,255,255,0.95);
}

/* Hide viewfinder corners — cleaner look */
.viewfinder-corners {
  display: none !important;
}


/* ── 11. FAQ ────────────────────────────────────────────── */

.faq-item {
  border-color: var(--border);
}

.faq-question {
  color: var(--text-primary);
  transition: color var(--t-default) var(--ease-out);
}
.faq-question:hover {
  color: var(--accent);
}

.faq-icon {
  color: var(--text-muted);
}

.faq-inner p {
  color: var(--text-secondary);
}


/* ── 12. CLOSING CTA ───────────────────────────────────── */

.section--green-cta {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #143524 0%, #0B1D14 100%);
}

.cta-final__headline {
  color: var(--text-on-dark);
}
.cta-final__headline em {
  color: rgba(26,127,75,0.80);
}

/* CTA final underline on em — match new accent */
.cta-final__headline em::after {
  background: rgba(255,255,255,0.60) !important;
}

.cta-final__body {
  color: rgba(245,245,240,0.65);
}
.cta-final__body strong {
  color: var(--text-on-dark);
}

.cta-final .btn-primary {
  background: var(--accent) !important;
}
.cta-final .btn-primary:hover {
  background: var(--accent-hover) !important;
}

.cta-final__guarantee {
  color: rgba(245,245,240,0.50);
}
.cta-final__guarantee svg {
  color: rgba(26,127,75,0.70);
}


/* ── 13. FOOTER ─────────────────────────────────────────── */

.footer {
  background: #080F0B;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-logo-name {
  color: rgba(255,255,255,0.80);
}
.footer-logo-sub {
  color: rgba(255,255,255,0.35);
}

.social-link {
  color: rgba(255,255,255,0.40);
  transition: color var(--t-default) var(--ease-out);
}
.social-link:hover {
  color: rgba(255,255,255,0.75);
}

.footer__links a {
  color: rgba(255,255,255,0.30);
  transition: color var(--t-default) var(--ease-out);
}
.footer__links a:hover {
  color: rgba(255,255,255,0.60);
}

.footer-trust-item {
  color: rgba(255,255,255,0.22);
}
.footer-trust-item svg {
  color: rgba(255,255,255,0.15);
}

.footer__copy {
  color: rgba(255,255,255,0.18);
}


/* ── 14. SCROLL REVEAL MICRO-ANIMATIONS ─────────────────── */

/* Override existing [data-animate] with subtler values */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-down"] {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-animate="fade-down"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-animate="scale-in"].is-visible {
  opacity: 1;
  transform: scale(1);
}


/* ── 15. GLOBAL TYPOGRAPHY ──────────────────────────────── */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
  background: var(--bg-primary);
}

.section-title {
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text-primary);
}

.section-title em {
  color: var(--accent);
  font-style: italic;
}

/* Em underline — match new accent */
.section-title em::after {
  background: var(--accent) !important;
}

.section-subtitle {
  color: var(--text-secondary);
  font-weight: 400;
}

.overline {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* On-dark section text overrides */
.section-title--on-green {
  color: var(--text-on-dark);
}
.section-title--on-green em {
  color: rgba(26,127,75,0.80);
}
.section-subtitle--on-green {
  color: rgba(245,245,240,0.60);
}
.overline--on-green {
  color: rgba(26,127,75,0.70);
}


/* ── SECTION BACKGROUND OVERRIDES ───────────────────────── */

/* Green sections — use dark bg */
.section--green {
  background: var(--bg-dark);
}

/* White sections — use primary bg */
.section--white {
  background: var(--bg-primary);
}


/* ── FPV GEAR STRIP — subtler ───────────────────────────── */

.fpv-gear-strip {
  background: linear-gradient(180deg, rgba(26,127,75,0.02) 0%, rgba(26,127,75,0.005) 100%);
  border-top-color: rgba(26,127,75,0.05);
  border-bottom-color: rgba(26,127,75,0.05);
  color: rgba(26,127,75,0.12);
}


/* ── INTRO OVERLAY — match new palette ──────────────────── */

#intro-overlay {
  background: var(--bg-primary);
}

.intro-brand-name {
  color: var(--accent);
}

.intro-logo-wrap::before {
  background: radial-gradient(circle, rgba(26,127,75,0.10) 0%, transparent 68%);
}

.intro-progress-bar__fill {
  background: linear-gradient(90deg, var(--accent), #4ade80);
}

.intro-progress-bar__fill::after {
  background: #4ade80;
  box-shadow: 0 0 8px 2px rgba(74, 222, 128, 0.4);
}


/* ── TESTIMONIAL CARDS — consistent styling ─────────────── */

.testi-card {
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color var(--t-default) var(--ease-out),
              box-shadow var(--t-default) var(--ease-out);
}
.testi-card:hover {
  border-color: rgba(26,127,75,0.20);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}


/* ── ACCESSIBILITY: Focus styles ────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ── BONO CARD: make all content visible immediately ────── */
.bono-card.is-visible .bono-lock-wrap,
.bono-card .bono-lock-wrap {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Remove bono price bg decoration */
.bono-price-bg {
  color: rgba(255,255,255,0.10) !important;
}


/* ── MISC CLEANUP ───────────────────────────────────────── */

/* Oferta badge pulse rings — remove */
.oferta-badge__ring {
  display: none !important;
}

/* Arrow bounce — less aggressive */
@keyframes arrow-bounce-v {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Remove lock bob animation */
@keyframes lockBob {
  0%, 100% { transform: none; }
}

/* Urgency blink — softer */
.urgency-strip__dot {
  background: var(--accent);
}

/* Bono lock related animations — disable */
.bono-lock-icon {
  display: none !important;
}
.bono-lock-label {
  display: none !important;
}