/*
  assets/home.css
  Scoped background and subtle visual system for the EMAT landing.
  - Always scoped under .home-landing-bg-pattern or .home-landing to avoid WP theme conflicts
  - Adds: subtle photovoltaic-like grid, diagonal light wash, and soft sun glow
  - Includes reduced-motion support and responsive tweaks

  This file is intentionally lightweight and focused on background visuals only.
*/

.home-landing-bg-pattern {
  --emat-solar: #ff7a00;
  --emat-solar-soft: rgba(255, 122, 0, 0.06);
  --emat-grid-line: rgba(17, 24, 39, 0.03);
  position: relative;
  isolation: isolate;
}

/* Base background layers (stacked):
   1) Soft radial 'sun' glow (top-left)
   2) Diagonal warm light wash to simulate radiation
   3) Very subtle repeating grid (photovoltaic cell feel)
*/
.home-landing-bg-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 8% 6%, var(--emat-solar-soft) 0%, rgba(255, 122, 0, 0) 22%),
    linear-gradient(120deg, rgba(255, 230, 200, 0.03), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--emat-grid-line) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, var(--emat-grid-line) 59px 60px);
  background-size: auto, auto, 60px 60px, 60px 60px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  mix-blend-mode: normal;
  opacity: 0.95;
}

/* 
  LIQUID GLASS EFFECT
  A more intense, fluid-like glass interaction for the scrolled header.
  Uses higher saturation and blur to mimic thick crystal/water.
*/
.home-landing .glass-liquid {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Header States */
.home-landing #main-header {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State 1: Camouflaged / Transparent (Top of page) */
.home-landing #main-header.header-transparent {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Ensure text is readable on dark hero if needed. 
   Assuming Hero has dark overly, white text is good. 
   But the nav links were dark? We might need to handle text color changes or ensure contrast.
   Let's check index.html text colors. Currently text-neutral-800.
   If Hero is dark, we need white text in transparent mode. */
.home-landing #main-header.header-transparent .text-neutral-800,
.home-landing #main-header.header-transparent .text-neutral-900,
.home-landing #main-header.header-transparent .text-neutral-600 {
  color: white;
  /* Force white text on transparent (dark) background */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Legibility */
}

/* State 2: Scrolled (Liquid Glass) - Applied via JS removing 'header-transparent' and adding 'glass-liquid' */

/* Ensure content sits above the background layer */
.home-landing-bg-pattern>* {
  position: relative;
  z-index: 1;
}

/* 
  SOLAR CARD COMPONENT
  Represents a photovoltaic panel: glass surface, subtle grid texture, internal glow.
*/
.home-landing .solar-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px -1px rgba(0, 0, 0, 0.02),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  /* Inner light */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
  overflow: hidden;
}

/* Solar cell grid texture overlay */
.home-landing .solar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* Top gloss reflection (glass edge) */
.home-landing .solar-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  opacity: 0.6;
  z-index: 2;
}

/* Hover state: Lift and energize */
.home-landing .solar-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.05),
    0 10px 10px -5px rgba(0, 0, 0, 0.02),
    inset 0 0 30px rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.9);
}

/* Darker variation for contrast (e.g. for images backgrounds or specific cards) */
.home-landing .solar-card.solar-card-dark {
  background: rgba(245, 245, 245, 0.8);
}

/* Accent highlight for active panels: subtle top gloss line to emulate glass on panels */
/* Kept for backward compatibility if needed, but .solar-card supersedes it mostly */
.home-landing-bg-pattern .panel-gloss::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  mix-blend-mode: overlay;
}

/* Slight halo on focused CTAs to tie into the 'solar activation' concept */
.home-landing-bg-pattern a:focus-visible,
.home-landing-bg-pattern button:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 6px 18px rgba(255, 122, 0, 0.09), 0 0 0 4px rgba(255, 122, 0, 0.06);
}

/* Subtle particle hint near important CTAs (decorative only) */
.home-landing-bg-pattern .cta-with-photons {
  position: relative;
}

.home-landing-bg-pattern .cta-with-photons::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: -10px;
  top: -8px;
  background: radial-gradient(circle, var(--emat-solar) 0%, rgba(255, 122, 0, 0) 60%);
  filter: blur(4px);
  opacity: 0.9;
  pointer-events: none;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-landing-bg-pattern .cta-with-photons::before {
    display: none;
  }

  .home-landing .solar-card {
    transition: none;
    transform: none !important;
  }
}

/* Responsive adjustments: make grid coarser on small screens to reduce visual noise */
@media (max-width: 640px) {
  .home-landing-bg-pattern::before {
    background-image:
      radial-gradient(circle at 10% 6%, var(--emat-solar-soft) 0%, rgba(255, 122, 0, 0) 20%),
      linear-gradient(120deg, rgba(255, 230, 200, 0.02), rgba(255, 255, 255, 0) 40%),
      repeating-linear-gradient(90deg, transparent 0 99px, var(--emat-grid-line) 99px 100px),
      repeating-linear-gradient(0deg, transparent 0 99px, var(--emat-grid-line) 99px 100px);
    background-size: auto, auto, 100px 100px, 100px 100px;
    opacity: 0.9;
  }
}

/* small helper to opt-in panels to the gloss effect (used where desired) */
.home-landing-bg-pattern .opt-in-gloss {
  position: relative;
}

.home-landing-bg-pattern .opt-in-gloss::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* General glass card utility
   Usage: add `.glass-card` to any card/article to get a subtle frosted-glass effect
   Scoped under .home-landing to avoid leaking into other pages/themes. */
.home-landing .glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
  /* ambient shadows for 3D relief */
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 6px 18px rgba(16, 24, 40, 0.055),
    /* primary soft shadow */
    0 14px 36px rgba(16, 24, 40, 0.07);
  /* deeper ambient shadow */
  overflow: visible;
  /* Ensure backdrop-filter works even when parent has filters */
  isolation: isolate;
}

.home-landing .glass-card::before {
  /* soft top gloss + subtle rim highlight */
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -8px;
  height: 48%;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)),
    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  mix-blend-mode: overlay;
  filter: blur(2px);
  z-index: 3;
  /* preparar para animación suave al hover (activar energía) */
  opacity: 0.3;
  transition: opacity 300ms cubic-bezier(.22, 1, .36, 1), transform 300ms cubic-bezier(.22, 1, .36, 1), filter 300ms ease;
}

.home-landing .glass-card::after {
  /* subtle inner shadow to add depth + soft lower rim */
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -6px;
  height: 34%;
  pointer-events: none;
  /* inner shadow for depth */
  background: linear-gradient(0deg, rgba(10, 15, 25, 0.06), rgba(255, 255, 255, 0));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  mix-blend-mode: multiply;
  filter: blur(6px);
  z-index: 1;
  /* permitir animación sutil del sombreado interior */
  opacity: 0.9;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1), transform 320ms cubic-bezier(.22, 1, .36, 1), filter 320ms ease;
}

/* subtle hover state for pseudo-element (no warm/orange accent) */
.home-landing .glass-card:hover::before {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}

/* Hover / focus lift (subtle). Respects reduced-motion */
.home-landing .glass-card {
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), box-shadow 360ms cubic-bezier(.22, 1, .36, 1), filter 360ms cubic-bezier(.22, 1, .36, 1);
}

.home-landing .glass-card:hover,
.home-landing .glass-card:focus-within {
  /* movimiento más natural y menos 'pop' */
  transform: translateY(-7px) translateZ(0) scale(1.0025);
  box-shadow:
    0 14px 36px rgba(16, 24, 40, 0.11),
    0 28px 64px rgba(16, 24, 40, 0.07);
  filter: saturate(1.02) drop-shadow(0 6px 16px rgba(16, 24, 40, 0.055));
  /* pulso cálido: elevar brillo naranja en pseudo elementos */
  --_glass-warm-alpha: 0.065;
}



/* animar pseudo-elementos cuando la card está activa */
.home-landing .glass-card:hover::before,
.home-landing .glass-card:focus-within::before {
  opacity: 1;
  transform: translateY(-2px) scale(1.002);
  filter: blur(2.6px);
}

.home-landing .glass-card:hover::after,
.home-landing .glass-card:focus-within::after {
  opacity: 1;
  transform: translateY(2px) scale(1.002);
  filter: blur(7px);
}

@media (prefers-reduced-motion: reduce) {
  .home-landing .glass-card {
    transition: none;
    transform: none;
  }
}

/* Glass card variations for visual variety
   All variations maintain the solar panel aesthetic while offering different visual weights */

/* Variant 1: Content-heavy cards - slightly more opacity for readability */
.home-landing .glass-card-variant-1 {
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Variant 2: Background cards - stronger blur for depth */
.home-landing .glass-card-variant-2 {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Variant 3: Featured cards - subtle warm gradient overlay */
.home-landing .glass-card-variant-3 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 250, 240, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Variant 3 warm overlay for featured content */
.home-landing .glass-card-variant-3::before {
  background:
    linear-gradient(180deg, rgba(255, 245, 230, 0.14), rgba(255, 255, 255, 0.02)),
    radial-gradient(60% 40% at 50% 0%, rgba(255, 200, 100, 0.08), rgba(255, 255, 255, 0) 55%);
}

/* Hover glow variant - warm solar activation effect */
.home-landing .glass-card.glass-card-hover-glow:hover,
.home-landing .glass-card.glass-card-hover-glow:focus-within {
  box-shadow:
    0 14px 36px rgba(16, 24, 40, 0.11),
    0 28px 64px rgba(16, 24, 40, 0.07),
    0 0 40px rgba(255, 122, 0, 0.08),
    inset 0 0 30px rgba(255, 200, 100, 0.06);
}

/* -------------------------------------------
   Icon integration styles
   ------------------------------------------- */

/* Icon containers for buttons and links */
.home-landing .icon-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.home-landing .icon-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: row-reverse;
}

/* Icon sizing for different contexts */
.home-landing .icon-sm {
  width: 1rem;
  height: 1rem;
}

.home-landing .icon-md {
  width: 1.25rem;
  height: 1.25rem;
}

.home-landing .icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Animated icon states */
.home-landing .icon-bounce:hover svg,
.home-landing .icon-bounce:focus svg {
  animation: iconBounce 0.6s ease-in-out;
}

@keyframes iconBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

/* Icon hover glow for CTAs */
.home-landing a:hover .icon-glow,
.home-landing button:hover .icon-glow {
  filter: drop-shadow(0 0 6px rgba(255, 122, 0, 0.4));
  transition: filter 0.3s ease;
}

/* -------------------------------------------
   Animation utilities
   ------------------------------------------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Utility classes for scroll reveals */
.home-landing .animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-landing .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay utilities */
.home-landing .stagger-1 {
  transition-delay: 0.1s;
}

.home-landing .stagger-2 {
  transition-delay: 0.2s;
}

.home-landing .stagger-3 {
  transition-delay: 0.3s;
}

/* Lift effect for cards */
.home-landing .hover-lift {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-landing .hover-lift:hover {
  transform: translateY(-8px) scale(1.005);
}

/* Glow pulse effect for CTAs */
@keyframes glowPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 122, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 30px rgba(255, 122, 0, 0.5);
  }
}

.home-landing .cta-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

/* Card image overlay on hover */
.home-landing .card-image-wrapper {
  position: relative;
  overflow: hidden;
}

.home-landing .card-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 122, 0, 0) 0%, rgba(255, 122, 0, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.home-landing .card-image-wrapper:hover::after {
  opacity: 1;
}

/* -------------------------------------------
   HERO SECTION OVERLAY
   Dark overlay for improved text readability
   Maintains glassmorphism aesthetic
   ------------------------------------------- */

/* Hero section container */
.home-landing .hero-section {
  position: relative;
  isolation: isolate;
}

/* Dark gradient overlay with glassmorphism */
.home-landing .hero-overlay {
  content: '';
  position: absolute;
  inset: 0;
  /* Multi-layer gradient for depth and sophistication */
  background:
    /* Primary dark overlay for readability */
    linear-gradient(135deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.50) 40%,
      rgba(0, 0, 0, 0.45) 70%,
      rgba(0, 0, 0, 0.55) 100%),
    /* Subtle warm accent aligned with solar narrative */
    radial-gradient(circle at 15% 20%,
      rgba(255, 122, 0, 0.08) 0%,
      transparent 50%),
    /* Depth layer */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.35) 100%);
  backdrop-filter: blur(2px) saturate(0.95);
  -webkit-backdrop-filter: blur(2px) saturate(0.95);
  pointer-events: none;
  z-index: 0;
}

/* Optional: Subtle texture overlay for premium feel */
.home-landing .hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 2px);
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-landing .hero-overlay {
    background:
      linear-gradient(135deg,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.58) 50%,
        rgba(0, 0, 0, 0.65) 100%),
      radial-gradient(circle at 20% 15%,
        rgba(255, 122, 0, 0.06) 0%,
        transparent 45%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .home-landing .hero-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* End of home.css */

/* -------------------------------------------
   Photons / floating particles (decorative)
   ------------------------------------------- */
.home-landing-bg-pattern .photons-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  /* bring particles above content but keep pointer-events:none */
  overflow: hidden;
}

.home-landing-bg-pattern .photon {
  position: absolute;
  border-radius: 50%;
  /* strong colored center so photons are visible over light backgrounds */
  background: radial-gradient(circle, var(--emat-solar) 0%, rgba(255, 122, 0, 0.25) 40%, rgba(255, 122, 0, 0) 75%);
  mix-blend-mode: screen;
  opacity: 0.12;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  filter: blur(3px);
}

@keyframes photonFloat {
  0% {
    transform: translate3d(0, -6px, 0) scale(1);
  }

  50% {
    transform: translate3d(4px, 6px, 0) scale(1.05);
  }

  100% {
    transform: translate3d(-2px, -4px, 0) scale(0.98);
  }
}

.home-landing-bg-pattern .photon.is-animated {
  animation-name: photonFloat;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

/* Hidden when reduced-motion is preferred */
@media (prefers-reduced-motion: reduce) {

  .home-landing-bg-pattern .photon,
  .home-landing-bg-pattern .photons-container {
    display: none !important;
  }
}

/* Mobile: fewer particles and lower opacity */
@media (max-width: 640px) {
  .home-landing-bg-pattern .photon {
    opacity: 0.045;
    filter: blur(1.5px);
  }
}

/* Utility to temporarily amplify photons (used when cursor near CTA or on activation) */
.home-landing-bg-pattern .photons-container.is-active .photon {
  opacity: 0.28;
  filter: blur(1.5px);
}

/* Existing CSS content will be preserved above */

/* ============================================
   PREMIUM METALLIC GLASS CARD - WHITE SOLAR GOLD
   For strategic partner recognition (Huawei)
   Represents clarity and premium quality with subtle golden sun touches
   ============================================ */

.home-landing .glass-card-premium {
  position: relative;
  /* Premium white glass background */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);

  /* Subtle golden border ring */
  border: 1px solid rgba(255, 215, 0, 0.3);

  /* Refined shadows with golden tint */
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(255, 180, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 0 20px rgba(255, 220, 100, 0.05);

  overflow: hidden;
  /* Exclude opacity from CSS transition to avoid conflict with GSAP entrance animation */
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

/* ============================================
   Equip cards: subtle background blur + foreground PNG
   Scoped under .home-landing
   ============================================ */
.home-landing .equip-card { 
  position: relative;
  background: #f8fafc; /* ligero tono neutro, distinto de blanco para profundidad */
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden; /* clip content until hover */
}

.home-landing .equip-card:hover {
  overflow: visible; /* allow image to escape the card */
  z-index: 20; /* lift above siblings */
  transform: translateY(-3px);
}

.home-landing .equip-visual { position: relative; overflow: visible; }
.home-landing .equip-visual .equip-image-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) saturate(.9);
  transform: scale(1.08);
  opacity: .16;
  transition: transform .7s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
}

.home-landing .equip-visual .equip-image {
  position: relative;
  max-width: 75%;
  transition: transform .7s cubic-bezier(.2,.9,.2,1), filter .3s ease, box-shadow .25s ease;
  will-change: transform;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.12));
  z-index: 30;
  pointer-events: none; /* allow clicks to reach the overlay link */
}

.home-landing .equip-card:hover .equip-image-bg { transform: scale(1.12); opacity: .22; }
.home-landing .equip-card:hover .equip-image { transform: translateY(-18px) rotate(-1.5deg) scale(1.12); z-index: 60; }

/* Respect reduced motion preference */
.home-landing #emat-cifras {
  position: relative;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(15,23,42,0.04);
  background: linear-gradient(180deg, rgba(238,118,1,0.02), transparent 40%);
}

.home-landing .emat-cifras-header h2 {
  font-size: 1.75rem; /* base */
  line-height: 1.05;
  font-weight: 800;
  color: rgba(15,23,42,0.95);
}

.home-landing .emat-cifras-header p {
  margin-top: .25rem;
  color: rgba(15,23,42,0.6);
}

.home-landing .emat-cifras-header h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: #EE7601;
  border-radius: 2px;
  margin-top: 0.6rem;
}

@media (min-width: 768px) {
  .home-landing .emat-cifras-header h2 { font-size: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-landing .equip-visual .equip-image-bg,
  .home-landing .equip-visual .equip-image { transition: none; transform: none; }
}

/* Liquid glass reflective overlay - subtle golden shimmer */
.home-landing .glass-card-premium .glass-liquid-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Subtle flowing golden light */
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 223, 0, 0.08) 25%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 215, 0, 0.06) 75%,
      rgba(255, 255, 255, 0) 100%);

  background-size: 200% 200%;
  animation: liquidFlow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

@keyframes liquidFlow {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.home-landing .glass-card-premium>* {
  position: relative;
  z-index: 2;
}

/* Enhanced brilliant shimmer effect - golden sun flash */
.home-landing .glass-card-premium::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

  /* Golden/White sun flash */
  background: linear-gradient(110deg,
      transparent 20%,
      rgba(255, 255, 255, 0.4) 40%,
      rgba(255, 230, 100, 0.6) 50%,
      rgba(255, 255, 255, 0.4) 60%,
      transparent 80%);

  transform: translateX(-100%) translateY(-100%) rotate(30deg);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
}

/* Shimmer animation loop */
@keyframes shimmerSweep {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(30deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  60% {
    transform: translateX(100%) translateY(100%) rotate(30deg);
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  100% {
    transform: translateX(100%) translateY(100%) rotate(30deg);
    opacity: 0;
  }
}

/* Auto-run shimmer occasionally or on hover */
.home-landing .glass-card-premium::after {
  animation: shimmerSweep 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 2s;
  /* Initial delay */
}

/* Hover state - Intensify premium feel */
.home-landing .glass-card-premium:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 200, 0, 0.5);
  transform: translateY(-4px) scale(1.005);

  box-shadow:
    0 14px 40px rgba(255, 180, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.03),
    inset 0 0 30px rgba(255, 215, 0, 0.1);
}

/* ============================================
   END PREMIUM METALLIC GLASS CARD
   ============================================ */
/* ============================================
   SOLAR-THEMED CTA BUTTONS
   Following "EMAT as living solar system" narrative
   ============================================ */

/* PRIMARY CTA - Solar Energy Activation */
.btn-solar-primary {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white !important;
  overflow: visible;
  /* Changed from hidden to allow glow */

  /* Warm gradient background - solar energy */
  background: linear-gradient(135deg,
      rgb(255, 122, 0) 0%,
      rgb(255, 140, 30) 50%,
      rgb(255, 122, 0) 100%) !important;
  background-size: 200% 200%;

  /* Multi-layer shadow for depth and glow */
  box-shadow:
    0 4px 12px rgba(255, 122, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);

  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1 !important;

  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;

  /* Ensure content is above pseudo-elements */
  z-index: 1;
}

/* Ensure all children (text, icons) are above pseudo-elements */
.btn-solar-primary>* {
  position: relative;
  z-index: 3;
  opacity: 1 !important;
}

/* Inner light effect - Simplified */
.btn-solar-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* Removed pulsing animation for corporate look */
.btn-solar-primary::after {
  content: none;
}

/* Hover state - intensified energy */
.btn-solar-primary:hover {
  background-position: 100% 50%;
  box-shadow:
    0 8px 20px rgba(255, 122, 0, 0.4),
    0 4px 8px rgba(255, 122, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-2px) scale(1.02);
}

/* Active/pressed state */
.btn-solar-primary:active {
  box-shadow:
    0 2px 8px rgba(255, 122, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(0) scale(0.98);
}

/* Focus state for accessibility */
.btn-solar-primary:focus-visible {
  outline: 2px solid rgb(255, 122, 0);
  outline-offset: 2px;
}

/* ============================================
   INSTALADORES SECTION - Infinite Carousel
   ============================================ */

/* Carousel Container */
.home-landing .allies-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

/* Track Container */
.home-landing .allies-track {
  display: flex;
  width: fit-content;
  animation: infiniteScroll 30s linear infinite;
}

/* Pause animation on hover */
.home-landing .allies-carousel-wrapper:hover .allies-track {
  animation-play-state: paused;
}

/* Slide Container */
.home-landing .allies-slide {
  display: flex;
  gap: 2.5rem;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}

/* Individual Logo Container - Más grande y más clickeable */
.home-landing .ally-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  height: 210px;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border: 2px solid rgba(23, 23, 23, 0.1);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Efecto de brillo sutil en el fondo */
.home-landing .ally-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(238, 118, 1, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Logo Image - Sin filtro grayscale, siempre a color */
.home-landing .ally-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

/* Hover States - Más interactivo y clickeable */
.home-landing .ally-logo:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 252, 249, 1) 100%);
  border-color: rgba(238, 118, 1, 0.3);
  transform: translateY(-6px) scale(1.05);
  box-shadow: 
    0 12px 24px rgba(238, 118, 1, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(238, 118, 1, 0.1);
}

.home-landing .ally-logo:hover::before {
  opacity: 1;
}

.home-landing .ally-logo:hover img {
  transform: scale(1.08);
}

/* Efecto de click/activo */
.home-landing .ally-logo:active {
  transform: translateY(-3px) scale(1.02);
  transition: all 0.15s ease;
}

/* Infinite Scroll Animation */
@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .home-landing .allies-slide {
    gap: 1.5rem;
    padding: 0.75rem 1rem;
  }

  .home-landing .ally-logo {
    min-width: 140px;
    max-width: 160px;
    height: 80px;
    padding: 1rem 1.25rem;
  }

  .home-landing .allies-track {
    animation-duration: 25s;
  }
  
  /* Hover más sutil en móvil */
  .home-landing .ally-logo:hover {
    transform: translateY(-4px) scale(1.03);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .home-landing .allies-track {
    animation: none;
  }
  
  .home-landing .allies-carousel-wrapper {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
  
  .home-landing .allies-slide:last-child {
    display: none;
  }
}

/* ============================================
   HUAWEI PARTNER SECTION - Compact Banner Styles
   ============================================ */

/* Compact Badge Container */
.home-landing .huawei-badge-container-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  opacity: 0;
  transform: scale(0.9);
}

.home-landing .huawei-badge-container-compact:hover {
  transform: scale(1.05);
}

/* Compact Huawei Badge Image */
.home-landing .huawei-badge-compact {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-landing .huawei-badge-container-compact:hover .huawei-badge-compact {
  filter: drop-shadow(0 4px 12px rgba(238, 118, 1, 0.15));
}

/* Responsive Badge Sizes for Compact Version */
@media (min-width: 768px) {
  .home-landing .huawei-badge-compact {
    height: 70px;
  }
}

@media (min-width: 1024px) {
  .home-landing .huawei-badge-compact {
    height: 80px;
  }
}

/* Section max height control */
.home-landing #huawei-partner {
  min-height: auto;
}

@media (max-width: 768px) {
  .home-landing #huawei-partner {
    max-height: none;
  }
}

/* Animation for section elements */
.home-landing #huawei-partner .animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
}

/* Icon spacing within button */
.btn-solar-primary i {
  position: relative;
  z-index: 1;
}

/* ============================================
   SECONDARY CTA - Solar Panel Module
   ============================================ */

.btn-solar-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(23, 23, 23);
  overflow: visible;

  /* Glass-like neutral background */
  background: linear-gradient(135deg,
      rgba(245, 245, 245, 0.6) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(245, 245, 245, 0.6) 100%);
  backdrop-filter: blur(8px);

  /* Subtle neutral border */
  border: 1.5px solid rgba(212, 212, 212, 0.5);

  /* Light shadow at rest */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}

/* Ensure content is visible */
.btn-solar-secondary>* {
  position: relative;
  z-index: 2;
}

/* Hover state - solar activation */
.btn-solar-secondary:hover {
  color: rgb(255, 122, 0);
  background: linear-gradient(135deg,
      rgba(255, 235, 220, 0.7) 0%,
      rgba(255, 245, 235, 0.6) 50%,
      rgba(255, 235, 220, 0.7) 100%);

  /* Warm border on activation */
  border-color: rgba(255, 122, 0, 0.4);

  /* Warm glow appears */
  box-shadow:
    0 4px 16px rgba(255, 122, 0, 0.15),
    0 2px 8px rgba(255, 122, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  transform: translateY(-2px) scale(1.01);
}

/* Active/pressed state */
.btn-solar-secondary:active {
  box-shadow:
    0 1px 4px rgba(255, 122, 0, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(0) scale(0.99);
}

/* Focus state */
.btn-solar-secondary:focus-visible {
  outline: 2px solid rgba(255, 122, 0, 0.5);
  outline-offset: 2px;
}

/* Icon animation on hover */
.btn-solar-secondary:hover i {
  transform: scale(1.1);
  color: rgb(255, 122, 0);
}

.btn-solar-secondary i {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .btn-solar-primary::after {
    animation: none;
  }

  .btn-solar-primary:hover,
  .btn-solar-secondary:hover {
    transform: none;
  }
}

/* ============================================
   END SOLAR-THEMED CTA BUTTONS
   ============================================ */

/* ============================================
   SOLAR CTA CARD BACKGROUNDS
   Special backgrounds for primary CTA cards aligned with liquid glass + solar energy narrative
   ============================================ */



/* ============================================
   SOLAR SUN CTA BUTTON
   Represents the sun in EMAT's "solar system vivo" narrative
   Features: radial gradient, rotating rays, pulsing glow, sophisticated micro-interactions
   ============================================ */

.home-landing .solar-cta-button {
  position: relative;
  isolation: isolate;

  /* Softer radial gradient - more subtle */
  background: radial-gradient(circle at center,
      rgba(255, 140, 40, 0.25) 0%,
      rgba(255, 122, 0, 0.20) 40%,
      rgba(255, 100, 0, 0.15) 100%);

  /* Glassmorphism effect */
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);

  /* Subtle warm border and shadow */
  box-shadow:
    0 4px 16px rgba(255, 122, 0, 0.12),
    0 2px 8px rgba(255, 122, 0, 0.08),
    0 0 0 1px rgba(255, 160, 80, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 -1px 2px rgba(200, 80, 0, 0.08);

  border: 1.5px solid rgba(255, 140, 60, 0.25);

  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* Very subtle pulsing animation - almost imperceptible */
  animation: solarPulseSubtle 4s ease-in-out infinite;
}

/* Subtle pulsing glow animation */
@keyframes solarPulseSubtle {

  0%,
  100% {
    box-shadow:
      0 4px 16px rgba(255, 122, 0, 0.12),
      0 2px 8px rgba(255, 122, 0, 0.08),
      0 0 0 1px rgba(255, 160, 80, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.2),
      inset 0 -1px 2px rgba(200, 80, 0, 0.08);
  }

  50% {
    box-shadow:
      0 6px 20px rgba(255, 122, 0, 0.18),
      0 3px 10px rgba(255, 122, 0, 0.12),
      0 0 0 1px rgba(255, 160, 80, 0.22),
      inset 0 1px 2px rgba(255, 255, 255, 0.25),
      inset 0 -1px 2px rgba(200, 80, 0, 0.1);
  }
}

/* Solar rays background layer - very subtle */
.home-landing .solar-rays {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg at center,
      transparent 0deg,
      rgba(255, 180, 80, 0.04) 2deg,
      transparent 4deg,
      transparent 8deg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;

  /* Very slow continuous rotation */
  animation: solarRotate 90s linear infinite;
}

@keyframes solarRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Inner glow layer - subtle */
.home-landing .solar-glow {
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle at center,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 200, 100, 0.08) 40%,
      transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(6px);
  opacity: 0.5;

  /* Subtle pulsing */
  animation: glowPulseSubtle 3.5s ease-in-out infinite alternate;
}

@keyframes glowPulseSubtle {
  from {
    opacity: 0.4;
    transform: scale(0.98);
  }

  to {
    opacity: 0.65;
    transform: scale(1.02);
  }
}

/* Hover state - clear UX affordance for clickability */
.home-landing .solar-cta-button:hover {
  transform: scale(1.05) translateY(-2px);

  /* More vibrant gradient on hover */
  background: radial-gradient(circle at center,
      rgba(255, 150, 50, 0.45) 0%,
      rgba(255, 122, 0, 0.35) 40%,
      rgba(255, 100, 0, 0.28) 100%);

  /* Clear glow on hover for clickability */
  box-shadow:
    0 8px 28px rgba(255, 122, 0, 0.25),
    0 4px 14px rgba(255, 122, 0, 0.18),
    0 0 0 2px rgba(255, 180, 100, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(200, 80, 0, 0.15);

  border-color: rgba(255, 160, 80, 0.45);
}

/* Expand rays on hover - subtle but noticeable */
.home-landing .solar-cta-button:hover .solar-rays {
  inset: -38%;
  opacity: 1;
  animation: solarRotate 45s linear infinite;
}

/* Intensify glow on hover */
.home-landing .solar-cta-button:hover .solar-glow {
  filter: blur(8px);
}

/* Active/Click state */
.home-landing .solar-cta-button:active {
  transform: scale(1.02) translateY(0px);
  transition: all 0.1s ease;
}

/* Focus state for accessibility - clear indicator */
.home-landing .solar-cta-button:focus-visible {
  outline: none;
  box-shadow:
    0 8px 28px rgba(255, 122, 0, 0.25),
    0 4px 14px rgba(255, 122, 0, 0.18),
    0 0 0 3px rgba(255, 180, 100, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(200, 80, 0, 0.15);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .home-landing .solar-cta-button {
    animation: none;
  }

  .home-landing .solar-rays {
    animation: none;
  }

  .home-landing .solar-glow {
    animation: none;
  }

  .home-landing .solar-cta-button:hover {
    transform: scale(1.03);
  }
}

/* ============================================
   END SOLAR SUN CTA BUTTON
   ============================================ */

/* ============================================
   NOSOTROS PROJECT CARDS
   Professional cards for project carousel with overlay and hover effects
   ============================================ */

.home-landing .nosotros-project-card {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.home-landing .nosotros-project-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Enhance overlay on hover for better readability */
.home-landing .nosotros-project-card:hover .bg-gradient-to-t {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45), transparent);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .home-landing .nosotros-project-card,
  .home-landing .nosotros-project-card img {
    transition: none;
  }

  .home-landing .nosotros-project-card:hover {
    transform: none;
  }

  .home-landing .nosotros-project-card:hover img {
    transform: none;
  }
}

/* ============================================
   END NOSOTROS PROJECT CARDS
   ============================================ */

/* ============================================
   HERO SCROLL TRANSITION
   Sophisticated scroll-driven transition between hero and content
   Follows EMAT's "solar system activation" narrative
   ============================================ */

/* Hero section positioned to allow transition effect */
.home-landing .hero-section {
  position: relative;
  /* Removed will-change to prevent backdrop-filter rendering issues on some browsers */
  /* will-change: transform, opacity, filter; */
}

/* Custom properties for JS control - default values */
:root {
  --hero-transition-progress: 0;
  --hero-opacity: 1;
  --hero-blur: 0px;
  --hero-scale: 1;
  --hero-overlay-opacity: 0;
  --content-transition-progress: 0;
}

/* Hero background image wrapper for transform effects */
.home-landing .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(var(--hero-scale));
  filter: blur(var(--hero-blur));
  opacity: var(--hero-opacity);
  transition: transform 0.2s ease-out, filter 0.2s ease-out, opacity 0.2s ease-out;
  /* will-change: transform, filter, opacity; */
}

/* Hero content layer - isolated from filter effects */
.home-landing .hero-section>section {
  position: relative;
  z-index: 10;
  /* opacity: var(--hero-opacity); */
  transform: translateY(calc(var(--hero-transition-progress) * -20px));
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  /* will-change: opacity, transform; */
  /* Force new stacking context to isolate from parent filters - REMOVED for glass effect */
  /* isolation: isolate; */
  /* Prevent filter inheritance that breaks backdrop-filter */
  filter: none;
}

/* Transition overlay - grows as user scrolls */
.home-landing .hero-section .hero-overlay {
  opacity: calc(0.45 + (var(--hero-overlay-opacity) * 0.55));
  transition: opacity 0.3s ease-out;
  will-change: opacity;
}

/* Content emergence effect */
.home-landing .content-transition-wrapper {
  position: relative;
  z-index: 20;
  opacity: calc(0.3 + (var(--content-transition-progress) * 0.7));
  transform: translateY(calc((1 - var(--content-transition-progress)) * 40px));
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  /* will-change: opacity, transform; */
}

/* Smooth activation states */
.home-landing .hero-section.transitioning {
  /* pointer-events: none; */
}

.home-landing .hero-section.transition-complete {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}

/* Content fully activated */
.home-landing .content-transition-wrapper.content-active {
  opacity: 1;
  transform: translateY(0);
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {

  .home-landing .hero-section,
  .home-landing .hero-section::before,
  .home-landing .hero-section>section,
  .home-landing .content-transition-wrapper {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  /* Simply fade hero out on scroll for reduced motion */
  .home-landing .hero-section.transitioning {
    opacity: 0.5;
  }

  .home-landing .hero-section.transition-complete {
    opacity: 0;
    transform: none;
  }
}

/* Mobile adjustments - lighter effects for performance */
@media (max-width: 768px) {
  .home-landing .hero-section::before {
    /* Reduce blur intensity on mobile */
    filter: blur(calc(var(--hero-blur) * 0.7));
  }

  .home-landing .content-transition-wrapper {
    /* Less aggressive translate on mobile */
    transform: translateY(calc((1 - var(--content-transition-progress)) * 25px));
  }
}

/* ============================================
   END HERO SCROLL TRANSITION
   ============================================ */
/* ============================================
   MACOS NOTIFICATION CARD STYLE
   Compact, top-right aligned cards that mimic OS notifications
   Reduces visual weight in the hero section
   ============================================ */

.home-landing .glass-card-notification {
  /* Compact dimensions */
  width: 100%;
  max-width: 420px;

  /* macOS-like rounded corners */
  border-radius: 18px;

  /* Lighter glass effect */
  background: rgba(177, 177, 177, 0.6);
  /* Darker base for better white text contrast */
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.12);

  /* Soft shadow to lift off background */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);

  /* Ensure padding is consistent for the notification look */
  padding: 12px;

  /* Smooth hover lift */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.home-landing .glass-card-notification:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(236, 236, 236, 0.55);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .home-landing .glass-card-notification:hover {
    transform: none;
  }
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .home-landing .glass-card-notification {
    max-width: 100%;
    margin-bottom: 10px;
  }
}

/* -------------------------------------------
   ALLIES CAROUSEL (Infinite Scroll)
   ------------------------------------------- */
.home-landing .allies-carousel-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.home-landing .allies-track {
  display: flex;
  width: max-content;
  animation: alliesScroll 30s linear infinite;
}

.home-landing .allies-slide {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
}

.home-landing .ally-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  width: 150px;
  /* Fixed width for consistency */
  height: 180px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.home-landing .ally-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-landing .ally-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}

@keyframes alliesScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover for easier clicking */
.home-landing .allies-track:hover {
  animation-play-state: paused;
}

/* -------------------------------------------
   ACOMPAÑAMIENTO SECTION
   Full width background with "Solar Field" effect
   ------------------------------------------- */
.home-landing .acompanamiento-section {
  position: relative;
  background-color: #fffbf7;
  /* Very light warm base */
  overflow: hidden;
}

/* Solar support field pattern */
.home-landing .acompanamiento-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* Central warm glow */
    radial-gradient(circle at 50% 50%, rgba(255, 122, 0, 0.05) 0%, transparent 70%),
    /* Orbital rings effect */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 122, 0, 0.015) 0,
      rgba(255, 122, 0, 0.015) 1px,
      transparent 1px,
      transparent 60px);
  mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);
  z-index: 0;
}

/* Subtle grid texture overlay for technical feel */
.home-landing .acompanamiento-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 24, 39, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  z-index: 0;
  pointer-events: none;
}

/* --- LATAM SVG MAP STYLES --- */

.map-svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.map-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
}

.country-path {
  fill: #FFFFFF;
  stroke: #D4D4D4;
  stroke-width: 0.5;
  transition: all 0.3s ease;
}

.country-path:hover {
  fill: #F5F5F5;
}

/* Highlighted Countries (Active) */
.country-path.highlighted {
  fill: #FFF5EB;
  /* Very light orange tint */
  stroke: #EE7601;
  stroke-width: 1.5;
  z-index: 10;
  cursor: pointer;
}

.country-path.highlighted:hover {
  fill: #EE7601;
  opacity: 0.8;
  stroke: #EE7601;
}

/* Coming Soon Country (Colombia) - distinct style if needed, or same as highlighted */
.country-path.coming-soon {
  stroke: #3B82F6;
  /* Blue for 'Próxima Apertura' matches existing pins */
  fill: #EFF6FF;
  stroke-width: 1.5;
  cursor: pointer;
}

.country-path.coming-soon:hover {
  fill: #3B82F6;
  opacity: 0.8;
}

/* Pins overlay on top of SVG */
.map-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Let clicks pass through to SVG */
}

.map-pin-container {
  pointer-events: auto;
  /* Re-enable clicks for pins */
}