
:root{
  --brand-primary:#0A2342;
  --brand-bg:#F1F1F1;
  --brand-accent:#C9B07A;
  --brand-cta:#00A67D; /* emerald accent */
  --proptech-accent:#2F855A; /* stable green for Real Estate */
}
*{box-sizing:border-box}
.text-brand{color:var(--brand-primary)}
.bg-brand{background:var(--brand-primary)}
.btn-brand{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:.75rem;background:var(--brand-primary);color:#fff;font-weight:600}
.btn-brand:hover{opacity:.92}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:.75rem;border:1px solid var(--brand-primary);color:var(--brand-primary);font-weight:600}
.btn-outline-light{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:.75rem;border:1px solid #fff;color:#fff;font-weight:600}
.footer-link{color:#334155}.footer-link:hover{color:var(--brand-primary)}
.accent-line{height:4px;background:var(--brand-accent);border-radius:999px}
/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.reveal.in{opacity:1;transform:none;animation:fadeUp .6s ease both}
.card-shine{position:relative;overflow:hidden}
.card-shine::after{content:"";position:absolute;top:-100%;left:-100%;width:200%;height:200%;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 40%,transparent 50%)}
.card-shine:hover::after{animation:shine .9s ease}
@keyframes shine{to{top:100%;left:100%}}
.hover-lift{transition:transform .15s ease,box-shadow .15s ease}
.hover-lift:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;}
.hero-content{position:relative;color:#fff}
@media (prefers-reduced-motion:reduce){.reveal,.hover-lift{animation:none;transition:none}}
/* Carousel */
.carousel{position:relative}
.carousel-track{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.carousel-track::-webkit-scrollbar{height:8px}
.carousel-track::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.carousel-slide{flex:0 0 86%;max-width:86%;scroll-snap-align:start}
@media(min-width:768px){.carousel-slide{flex-basis:48%;max-width:48%}}
@media(min-width:1024px){.carousel-slide{flex-basis:31%;max-width:31%}}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);padding:.6rem;border-radius:.75rem;border:1px solid #e2e8f0;background:#fff}
.carousel-btn:hover{background:#f8fafc}
.carousel-btn.prev{left:-.5rem}
.carousel-btn.next{right:-.5rem}


/* ===== Footer Dark Theme Overrides ===== */
footer{background:var(--brand-primary)!important;color:#fff}
footer .footer-link{color:#e2e8f0}
footer .footer-link:hover{color:#fff}
footer .border-slate-200{border-color:rgba(255,255,255,.18)!important}
footer .text-slate-500{color:rgba(255,255,255,.7)!important}
footer .text-slate-600{color:rgba(255,255,255,.8)!important}
footer .accent-line{background:var(--brand-accent)}
footer a{color:#fff}
footer .inline-flex.p-2{border-color:rgba(255,255,255,.35)!important}
footer .inline-flex.p-2:hover{background:rgba(255,255,255,.08)!important}
/* Accent helpers */
.text-cta{color:var(--brand-cta)}
.bg-cta{background:var(--brand-cta)}
.btn-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:.75rem;background:var(--brand-cta);color:#fff;font-weight:700}
.btn-cta:hover{filter:brightness(.97)}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;padding:.35rem .55rem;border-radius:.6rem;border:1px solid #e2e8f0;font-weight:800;font-size:.75rem;line-height:1;background:#fff;color:var(--brand-primary)}
.lang-btn:hover{background:#f8fafc}
.lang-btn.lang-active{border-color:var(--brand-primary);color:var(--brand-primary)}

/* Section background image slots (optional) */
.section-bg{position:relative;overflow:hidden}
.section-bg::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--section-bg-image, none);background-size:cover;background-position:center;opacity:var(--section-bg-opacity,.14);filter:saturate(1.1) contrast(1.05)}
.section-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(241,241,241,.92), rgba(241,241,241,.98))}
.section-bg .section-content{position:relative;z-index:1}
.section-bg-hero::after{background:linear-gradient(180deg, rgba(241,241,241,.86), rgba(241,241,241,.98))}
.section-bg-white::after{background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.98))}
.section-bg-muted{--section-bg-opacity:.12}

/* Profile photo slot */
.profile-photo{background-image:var(--profile-photo, linear-gradient(135deg,#cbd5e1,#e2e8f0));background-size:cover;background-position:center;position:relative}
.profile-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg, rgba(10,35,66,.08), rgba(10,35,66,0))}


/* --- Section-specific accents (no structural changes) --- */

/* Softlanding accents */
#softlanding{
  --section-accent:#0A2342; /* brand dark blue */
}
#softlanding .text-cta,
#softlanding .btn-cta,
#softlanding i[class*="fa-"]{
  color:var(--section-accent);
}
#softlanding .btn-cta{
  background:var(--section-accent);
  border-color:var(--section-accent);
}

/* Technologies accents */
#tecnologias{
  --section-accent:#2563EB; /* electric blue */
}
#tecnologias .text-cta,
#tecnologias .btn-cta,
#tecnologias i[class*="fa-"]{
  color:var(--section-accent);
}
#tecnologias .btn-cta{
  background:var(--section-accent);
  border-color:var(--section-accent);
}


/* Fix: vertical icons inside Softlanding should follow Softlanding accent (dark blue) */
#softlanding .fa-solid,
#softlanding .fa-regular,
#softlanding .fa-brands{
  color: var(--section-accent) !important;
}


/* --- Legal Chat widget (modern, minimal, brand-aligned) --- */
.chat-fab{position:fixed; right:18px; bottom:18px; z-index:9999; width:56px; height:56px; border-radius:999px; background:var(--brand-primary); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px rgba(2,6,23,.18); border:1px solid rgba(255,255,255,.18);}
.chat-fab:hover{opacity:.95}
.chat-panel{position:fixed; right:18px; bottom:86px; z-index:9999; width:min(380px, calc(100vw - 36px)); max-height:min(540px, calc(100vh - 140px)); background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 18px 48px rgba(2,6,23,.22); overflow:hidden; display:none;}
.chat-panel.open{display:flex; flex-direction:column;}
.chat-head{background:linear-gradient(180deg, rgba(10,35,66,1), rgba(10,35,66,.92)); color:#fff; padding:14px 14px 12px 14px;}
.chat-head .title{font-weight:700; font-size:14px; letter-spacing:.2px}
.chat-head .sub{font-size:12px; opacity:.86; margin-top:2px}
.chat-body{padding:12px; overflow:auto; background:#f8fafc; flex:1}
.chat-bubble{max-width:88%; border-radius:16px; padding:10px 12px; margin:8px 0; font-size:13px; line-height:1.35; border:1px solid rgba(15,23,42,.08);}
.chat-bot{background:#fff; color:#0f172a}
.chat-user{background:#0A2342; color:#fff; margin-left:auto; border-color:rgba(255,255,255,.14)}
.chat-meta{font-size:11px; color:#64748b; margin-top:6px}
.chat-foot{padding:10px; border-top:1px solid #e2e8f0; background:#fff}
.chat-input{width:100%; border:1px solid #e2e8f0; border-radius:14px; padding:10px 12px; font-size:13px; outline:none;}
.chat-row{display:flex; gap:8px; align-items:center}
.chat-send{flex:0 0 auto; border-radius:14px; padding:10px 12px; background:var(--brand-cta); color:#fff; font-weight:700; font-size:13px; border:1px solid rgba(0,0,0,.06);}
.chat-send:hover{opacity:.96}
.chat-close{margin-left:auto; width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14);}
.chat-close:hover{background:rgba(255,255,255,.22)}
.chat-pill{display:inline-flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chat-chip{font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; color:#0f172a;}
.chat-chip:hover{border-color:#cbd5e1}


/* Fix: Home CTAs for Softlanding & Tecnologías use brand dark blue */
a.btn-cta[href="softlanding.html"],
a.btn-cta[href="tecnologias.html"]{
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}


/* Softlanding: icons and buttons use brand dark blue */
#softlanding i,
#softlanding .fa-solid,
#softlanding .fa-regular,
#softlanding .fa-brands{
  color: var(--brand-primary) !important;
}
#softlanding a.btn,
#softlanding a.btn-cta{
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}


/* Softlanding: force dark blue and remove green */
#softlanding i,
#softlanding .fa-solid,
#softlanding .fa-regular,
#softlanding .fa-brands,
#softlanding .text-green,
#softlanding .text-emerald{
  color: var(--brand-primary) !important;
}


/* Softlanding hero background motion (subtle) */
@keyframes bgFloat{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.10) translate3d(0,-10px,0)}
}
.section-bg-hero::before{
  transform:scale(1.06);
  animation:bgFloat 18s ease-in-out infinite alternate;
}



/* Softlanding page refinements */
.page-softlanding .btn-brand{
  padding:.75rem 1.125rem;
  border-radius:1rem;
  box-shadow:0 10px 26px rgba(10, 24, 48, .14);
  transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.page-softlanding .btn-brand:hover{
  opacity:1;
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(10, 24, 48, .18);
}
.page-softlanding .btn-outline{
  padding:.75rem 1.125rem;
  border-radius:1rem;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.page-softlanding .btn-outline:hover{
  transform:translateY(-1px);
}

/* Icon color + micro-interaction for sub-areas */
.page-softlanding .text-cta{
  color:var(--brand-primary);
}
.page-softlanding .flex.gap-3 > i.fa-solid{
  transition:transform .18s ease, opacity .18s ease;
}
.page-softlanding .flex.gap-3:hover > i.fa-solid{
  transform:translateY(-1px) scale(1.04);
}



/* --- Softlanding: premium hero + CTA + icon motion (scoped) --- */
.page-softlanding .section-bg-hero{
  --section-bg-image:url('assets/img/backgrounds/softlanding.jpg');
  --section-bg-opacity:.22;
}
.page-softlanding .section-bg-hero::before{
  transform:scale(1.06);
  animation:softHeroBreath 18s ease-in-out infinite;
}
@keyframes softHeroBreath{
  0%,100%{transform:scale(1.06) translateY(0)}
  50%{transform:scale(1.1) translateY(-8px)}
}
.page-softlanding .section-bg-hero::after{
  background:
    radial-gradient(1200px 500px at 15% 10%, rgba(201,176,122,.18), rgba(241,241,241,0) 60%),
    linear-gradient(180deg, rgba(241,241,241,.78), rgba(241,241,241,.97));
}

/* Hierarchy: stronger typographic contrast without changing copy */
.page-softlanding .section-bg-hero h1{
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
  text-wrap:balance;
}
.page-softlanding .section-bg-hero p{
  font-size:1.05rem;
  line-height:1.7;
  color:rgba(15,23,42,.78);
  max-width:62ch;
}

/* CTA: more “international-firm” feel + clearer affordance */
.page-softlanding .section-bg-hero .btn-brand,
.page-softlanding .section-bg-hero .btn-outline{
  padding:.75rem 1.05rem;
  border-radius:1rem;
  box-shadow:0 10px 22px rgba(2,6,23,.08);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.page-softlanding .section-bg-hero .btn-brand:hover,
.page-softlanding .section-bg-hero .btn-outline:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(2,6,23,.12);
}
.page-softlanding .section-bg-hero .btn-brand:focus-visible,
.page-softlanding .section-bg-hero .btn-outline:focus-visible{
  outline:3px solid rgba(201,176,122,.55);
  outline-offset:3px;
}

/* Add subtle arrow affordance (visual only) */
.page-softlanding .section-bg-hero .btn-brand::after,
.page-softlanding .section-bg-hero .btn-outline::after{
  content:"→";
  display:inline-block;
  transform:translateX(0);
  transition:transform .18s ease, opacity .18s ease;
  opacity:.9;
}
.page-softlanding .section-bg-hero .btn-brand:hover::after,
.page-softlanding .section-bg-hero .btn-outline:hover::after{
  transform:translateX(2px);
}

/* Icons: dark blue + subtle motion */
.page-softlanding i.text-cta{
  color:var(--brand-primary) !important;
}
.page-softlanding i.text-cta{
  animation:softIconFloat 6.5s ease-in-out infinite;
}
.page-softlanding li:nth-child(2) i.text-cta{animation-delay:.2s}
.page-softlanding li:nth-child(3) i.text-cta{animation-delay:.4s}
.page-softlanding li:nth-child(4) i.text-cta{animation-delay:.6s}
.page-softlanding li:nth-child(5) i.text-cta{animation-delay:.8s}
.page-softlanding li:nth-child(6) i.text-cta{animation-delay:1s}

@keyframes softIconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.page-softlanding li:hover i.text-cta{
  transform:translateY(-4px) scale(1.02);
  transition:transform .18s ease;
}



/* Softlanding premium refinements (scoped) */
.page-softlanding .section-bg-hero{border-bottom:1px solid rgba(10,35,66,.10)}
.page-softlanding .section-bg-hero h1{max-width:46rem;letter-spacing:-0.02em;line-height:1.12}
.page-softlanding .section-bg-hero h1::after{content:"";display:block;width:4.5rem;height:2px;background:var(--brand-accent);margin-top:1rem;border-radius:999px}
.section-bg-hero::before{transform:scale(1.03);transform-origin:center;animation:heroFloat 22s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:scale(1.03) translateY(0)}50%{transform:scale(1.08) translateY(-6px)}}
@media (prefers-reduced-motion: reduce){.section-bg-hero::before{animation:none}}

/* Softlanding icon list: dark-blue icons + subtle hover */
.page-softlanding .soft-icon-list .fa-solid{color:var(--brand-primary);transition:transform .22s ease,opacity .22s ease}
.page-softlanding .soft-icon-list .flex{padding:.5rem .75rem;border-radius:.9rem;transition:background-color .22s ease,transform .22s ease}
.page-softlanding .soft-icon-list .flex:hover{background:rgba(10,35,66,.04);transform:translateY(-1px)}
.page-softlanding .soft-icon-list .flex:hover .fa-solid{transform:translateY(-2px);opacity:.95}
@media (prefers-reduced-motion: reduce){
  .page-softlanding .soft-icon-list .flex,
  .page-softlanding .soft-icon-list .fa-solid{transition:none}
}

/* Softlanding CTA: higher contrast + international-ready microcopy */
.page-softlanding .soft-cta .btn-brand{
  padding:.75rem 1.1rem;
  border-radius:1rem;
  box-shadow:0 14px 30px rgba(10,35,66,.18);
  border:1px solid rgba(10,35,66,.10)
}
.page-softlanding .soft-cta .btn-outline{
  padding:.75rem 1.1rem;
  border-radius:1rem;
  border-color:rgba(10,35,66,.55)
}
.page-softlanding .soft-cta .btn-brand:hover,
.page-softlanding .soft-cta .btn-outline:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){
  .page-softlanding .soft-cta .btn-brand:hover,
  .page-softlanding .soft-cta .btn-outline:hover{transform:none}
}


/* Areas page overrides: use dark blue instead of emerald for CTA and icon accents */
.page-areas .text-cta{color:var(--brand-primary)!important}
.page-areas .bg-cta{background:var(--brand-primary)!important}
.page-areas .btn-cta{background:var(--brand-primary)!important}
.page-areas .btn-cta:hover{filter:brightness(.97)}
.page-areas .clickable-card{cursor:pointer}
.page-areas .clickable-card:focus{outline:2px solid rgba(10,35,66,.35); outline-offset:3px}


/* --- Footer refinements (premium) --- */

/* Slightly more breathing room in footer without altering layout */
footer .max-w-7xl.mx-auto{
  padding-top: 3.5rem; /* was ~3rem via py-12 */
  padding-bottom: 3.5rem;
}

/* Make the white logo read better on small screens (contrast & clarity) */
footer img[src*="logo-blanco"]{
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* Mobile contrast boost in footer only */
@media (max-width: 640px){
  footer .text-slate-600,
  footer .text-slate-500{
    color: #334155; /* slate-700 */
  }
  footer a{
    text-underline-offset: 3px;
  }
}


/* Tech pages overrides */
.page-tech{
  --brand-cta: var(--brand-primary); /* make CTA/icon accents dark blue */
}

/* Why El Salvador page: align icons/CTAs to the dark blue brand */
.page-why{
  --brand-cta: var(--brand-primary);
}

/* Premium tech micro-identity: subtle gold underline + tighter hierarchy */
.page-tech .section-bg-hero h1{
  letter-spacing: -.01em;
}
.page-tech .section-bg-hero h1::after{
  content:"";
  display:block;
  width: 68px;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-accent);
  margin-top: .75rem;
  opacity: .95;
}

/* Unify tech pages: subtle patterned wash in hero without changing markup */
.page-tech .section-bg-hero{
  position: relative;
  overflow: hidden;
}
.page-tech .section-bg-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url('assets/img/backgrounds/grid.jpg');
  background-size: 900px auto;
  opacity: .08;
  pointer-events:none;
}

/* Sutil animación en íconos (respeta reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .page-tech .card-shine i,
  .page-tech .card-shine svg{
    transition: transform .18s ease, opacity .18s ease;
  }
  .page-tech .card-shine:hover i,
  .page-tech .card-shine:hover svg{
    transform: translateY(-2px);
    opacity: .98;
  }
}



/* === HERO VIDEO BACKGROUND (Tecnología / Softlanding / Profesionales) === */
.hero-video-section{position:relative;overflow:hidden;}
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;z-index:0;}
.hero-video-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);z-index:1;}
.hero-video-section .section-content{position:relative;z-index:2;}
.hero-video-section h1,.hero-video-section h2,.hero-video-section p{ text-shadow:0 2px 14px rgba(0,0,0,.55); }

.hero-video-section .accent-line{background:rgba(255,255,255,.75);}
.hero-video-section a{color:inherit;}
/* Ensure video heroes are not covered by section background pseudo-elements */
.hero-on-video.section-bg::before,
.hero-on-video.section-bg::after{
  display:none !important;
}

/* Force hero-on-video text to true white for readability */
.hero-video-section,
.hero-video-section *{
  color:#ffffff;
}
.hero-video-section .text-white\/80{
  color:#ffffff !important;
}
.hero-video-section a,
.hero-video-section p,
.hero-video-section span{
  color:#ffffff !important;
}

.hero-video-section .btn-outline{border-color:rgba(255,255,255,.75);color:#fff;}
.hero-video-section .btn-outline:hover{background:rgba(255,255,255,.12);}


/* Home hero overlay for readability (only used on index.html) */
.hero-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.50);
  pointer-events:none;
}

/* Ensure hero video text is truly white (override any utility classes) */
.hero-video-section .section-content,
.hero-video-section .section-content *{
  color:#ffffff !important;
}

/* Professionals hero: keep accent line in brand yellow */
.pro-hero .accent-line{background:var(--brand-accent) !important;}


/* Contact section background image (index.html#contacto) */
#contacto.contact-bg{position:relative;overflow:hidden;}
#contacto.contact-bg::before{content:"";position:absolute;inset:0;background:url('../img/backgrounds/contacto-bg.jpg') center/cover no-repeat;opacity:.25;z-index:0;}
#contacto.contact-bg > *{position:relative;z-index:1;}

/* Reduce whitespace between contact section and footer on home */
#contacto.contact-bg + footer{margin-top:0 !important;}

/* Why El Salvador hero background image */
.why-hero-bg{position:relative;overflow:hidden;}
.why-hero-bg::before{content:"";position:absolute;inset:0;background:url('../img/backgrounds/why-el-salvador-hero.jpg') center/cover no-repeat;opacity:.22;z-index:0;}
.why-hero-bg > *{position:relative;z-index:1;}

/* Force yellow accent line in Áreas hero */
.page-areas .section-bg-hero .accent-line{background:var(--brand-accent) !important;}
