:root{
  --bg: #FCFEFF;
  --surface: #FFFFFF;
  --card: #F8FBFC;
  --text: #042F33;
  --muted: #6A8B8F;
  --primary: #FF6B35;
  --primary-2: #FF9A57;
  --accent: #00B4CC;
  --glass: rgba(255,255,255,0.96);
  --glass-strong: rgba(4,47,49,0.04);
  --success: #16A34A;
  --warning: #FDD9B0;
  --shadow-color: rgba(4,47,49,0.06);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg) !important;color:var(--text);font-family:'DM Sans',sans-serif}
#app-root{background:transparent}
.font-display{font-family:'Playfair Display',Georgia,serif}
.font-body{font-family:'DM Sans',sans-serif}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes logoPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

.anim-fade-up{animation:fadeUp .6s ease-out forwards;opacity:0}
.anim-fade-in{animation:fadeIn .8s ease-out forwards;opacity:0}
.anim-scale-in{animation:scaleIn .45s ease-out forwards;opacity:0}
.anim-slide-right{animation:slideRight .5s ease-out forwards;opacity:0}
.anim-float{animation:float 3s ease-in-out infinite}
.delay-1{animation-delay:.12s}.delay-2{animation-delay:.24s}.delay-3{animation-delay:.36s}.delay-4{animation-delay:.48s}.delay-5{animation-delay:.6s}

/* Layout / theme */
.hero-gradient{
  background: linear-gradient(135deg, var(--bg) 0%, #F3FBFB 35%, #E9FBFF 65%, var(--surface) 100%);
}

/* Glass panels */
.glass-card{
  backdrop-filter: blur(8px);
  background: var(--glass);
  border:1px solid var(--glass-strong);
  transition:all .18s ease;
  color:var(--text);
  box-shadow: 0 12px 32px var(--shadow-color);
}
.glass-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px var(--shadow-color)}

/* Cards */
.destination-card{
  transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s ease;
  border-radius:1rem;
  background: linear-gradient(180deg,var(--card),var(--surface));
  border:1px solid rgba(4,47,49,0.03);
  color:var(--text);
}
.destination-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(4,47,49,0.06)}

.dest-gradient{background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.85) 50%, transparent 100%)}

/* Testimonials */
.testimonial-card{
  background:linear-gradient(135deg,#fff,#fcfeff);
  border:1px solid rgba(4,47,49,0.04);
  transition:all .16s ease;
  color:var(--text);
}
.testimonial-card:hover{box-shadow:0 8px 30px rgba(4,47,49,0.04);border-color:rgba(4,47,49,0.06)}

/* NAVBAR + LOGO HIGHLIGHT */
#navbar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.96) !important;
  border-bottom:1px solid rgba(4,47,49,0.04);
  color:var(--text) !important;
  z-index:70;
}

/* Logo: bigger, halo, strong shadow, pulse */
#navbar img[src*="LOGO DE IMPACTRAVEL"]{
  width:84px;
  height:84px;
  object-fit:contain;
  border-radius:16px;
  padding:8px;
  background: linear-gradient(135deg,#fff,#f7f9fa);
  border:2px solid rgba(255,255,255,0.6);
  box-shadow:
    0 8px 30px rgba(255,107,53,0.12),
    0 18px 40px rgba(6,53,66,0.08),
    0 0 30px rgba(255,107,53,0.06);
  transform:translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease;
  animation: logoPulse 3.6s ease-in-out infinite;
  position:relative;
  z-index:72;
  outline: 4px solid rgba(255,255,255,0.35);
  outline-offset: 4px;
}

/* strong hover */
#navbar img[src*="LOGO DE IMPACTRAVEL"]:hover{
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 26px 60px rgba(255,107,53,0.18),
    0 10px 30px rgba(6,53,66,0.12),
    0 0 36px rgba(255,122,24,0.12);
}

/* Add a subtle glow ring (using sibling pseudo on parent) */
#navbar .anim-slide-right { position: relative; z-index:71; }
#navbar .anim-slide-right::after{
  content:'';
  position:absolute;
  left:8px;
  top:6px;
  width:110px;
  height:110px;
  border-radius:20px;
  background: radial-gradient(circle at 30% 30%, rgba(255,107,53,0.06), transparent 40%);
  filter: blur(12px);
  pointer-events:none;
  z-index:70;
}

/* Brand text ensure contrast */
#navbar .brand-text { display:flex; flex-direction:column; line-height:1; margin-left:10px; }
#navbar .brand-text .brand-impac { color: var(--primary) !important; font-weight:800; font-size:1.05rem; }
#navbar .brand-text .brand-travel { color: var(--text) !important; font-weight:700; font-size:1.05rem; }
#navbar .brand-text .brand-sub { font-size:10px; letter-spacing:0.18em; opacity:0.8; color:var(--muted); }

/* Nav links & CTA */
.nav-link{position:relative;transition:color .15s ease;color:var(--text);text-decoration:none}
.nav-link::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--primary);transition:width .18s ease}
.nav-link:hover::after{width:100%}

/* Buttons */
.cta-btn{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff !important;
  border:none;
  cursor:pointer;
  font-weight:700;
  padding:.7rem 1rem;
  border-radius:999px;
  transition:all .14s ease;
  box-shadow:0 12px 40px rgba(255,107,53,0.12);
}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 20px 56px rgba(255,107,53,0.16)}

/* Type / text overrides to ensure legibility over overridden backgrounds */
h1,h2,h3{color:var(--text) !important}
#el-hero-title{ color:var(--text) !important; font-weight:800; }
#el-hero-title span{ color:var(--primary) !important; }
#el-hero-subtitle, #el-about-text { color: rgba(4,47,49,0.8) !important; }

/* Forms — ensure inputs readable even if inline dark styles present */
input,select,textarea{
  background: rgba(255,255,255,0.98) !important;
  border:1px solid rgba(6,53,66,0.08) !important;
  color:var(--text) !important;
  border-radius:12px;
  padding:12px;
  font-size:14px;
  transition:all .12s ease;
}
input::placeholder, textarea::placeholder { color: rgba(6,53,66,0.35) !important; }

/* Strong overrides to neutralize inline dark backgrounds/colors */
body, #app-root { background: var(--bg) !important; color: var(--text) !important; }

/* Replace known inline dark hex backgrounds with light surfaces */
[style*="#0B1D26"],
[style*="#091920"],
[style*="#06121A"],
[style*="#0F2A35"],
[style*="#0F3443"],
[style*="#155263"],
[style*="#1A6B5A"] {
  background: linear-gradient(180deg,var(--card),var(--surface)) !important;
  color: var(--text) !important;
  border: none !important;
}

/* Replace inline white/pale text to dark text */
*[style*="color:#FFFFFF"],
*[style*="color:#E8DCC8"],
*[style*="color:#FFF"] {
  color: var(--text) !important;
}

/* Destination cards forced to light, ensure inner text contrast */
.destination-card[style*="background:"]{
  background: linear-gradient(180deg,var(--card),var(--surface)) !important;
  color: var(--text) !important;
  border:1px solid rgba(6,53,66,0.04) !important;
}
.destination-card h3, .destination-card p, .destination-card .text-xs { color: var(--text) !important; opacity: 0.85 !important; }

/* Hero/sections that had dark inline backgrounds -> use lighter surface and stronger text contrast */
#inicio, #nosotros, #contacto, #destinos, #testimonios {
  background: linear-gradient(180deg,var(--bg),var(--card)) !important;
  color: var(--text) !important;
}

/* Footer lighten */
footer{background:linear-gradient(180deg,#fff,#fbfdff);color:var(--muted);border-top:1px solid rgba(4,47,49,0.03)}
footer a{color:var(--primary)}

/* Helpers */
.stat-number{
  background:linear-gradient(135deg,var(--primary),var(--warning));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:800;
}
.section-divider{background:linear-gradient(90deg,transparent,var(--primary),transparent);height:1px;margin:0}
.feature-icon-bg{background: linear-gradient(135deg, rgba(255,107,53,0.12), rgba(0,180,204,0.05));border:1px solid rgba(255,107,53,0.06);}

/* Responsive */
@media (max-width:768px){
  #navbar img[src*="LOGO DE IMPACTRAVEL"]{ width:64px; height:64px; padding:6px; outline-offset:3px; }
  .hidden.md\:flex{display:none}
  .md\:hidden{display:block}
  h1{font-size:2rem!important}
  h2{font-size:1.4rem!important}
  .destination-card:hover{transform:translateY(-4px)}
}

/* Utilities */
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--warning));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.border-gradient{border:2px solid;border-image:linear-gradient(135deg,var(--primary),var(--accent)) 1}
.shadow-glow{box-shadow:0 10px 40px rgba(255,107,53,0.06)}
/* End of file */