/* ==============================
   Fuente Poppins local
   ============================== */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
}

/* ==============================
   Paleta de colores
   ============================== */
/* css/custom.css */

/* Si tu carpeta fonts/Poppins contiene archivos .woff2/.woff, lo conectamos después con @font-face.
   Por ahora, usa fallback si Tailwind ya setea font-sans. */

:root{
  --visentry-orange:#F47A1F;
  --visentry-black:#0B0B0B;
}

/* Links del nav */
.navlink{
  font-weight: 600;
  color: #0f172a; /* slate-900 */
  transition: color .15s ease;
}
.navlink:hover{ color: var(--visentry-orange); }
.navlink.active{ color: var(--visentry-orange); }

.mobilelink{
  display:block;
  padding: .6rem .25rem;
  font-weight: 600;
  color: #0f172a;
}
.mobilelink:hover{ color: var(--visentry-orange); }

/* Cards de servicios */
.service-card{
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 1.5rem;
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .15s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
}
.service-title{
  font-weight: 800;
  font-size: 1.05rem;
}
.service-text{
  margin-top: .65rem;
  font-size: .95rem;
  color: rgba(255,255,255,.75);
}



:root{
  --visentry-orange:#F47A1F;
  --visentry-orange-dark:#D96516;
  --visentry-black:#0B0B0B;
}

/* Botones */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.6rem;
  background: var(--visentry-orange);
  color:#fff;
  font-weight:700;
  padding:.85rem 1.4rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{
  background: var(--visentry-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.6rem;
  border:1px solid rgba(255,255,255,.30);
  background: rgba(0,0,0,.25);
  color:#fff;
  font-weight:700;
  padding:.85rem 1.4rem;
  transition: background .15s ease, transform .15s ease;
}
.btn-secondary:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.btn-secondary-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.6rem;
  border:1px solid rgba(15,23,42,.25);
  background: rgba(255,255,255,.55);
  color:#0f172a;
  font-weight:800;
  padding:.85rem 1.4rem;
  transition: background .15s ease, transform .15s ease;
}
.btn-secondary-dark:hover{
  background: rgba(255,255,255,.75);
  transform: translateY(-1px);
}

/* Hero boxes */
.hero-box{
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,0.3);
  padding: 1.25rem;
  backdrop-filter: blur(6px);
}

/* Parallax sections */
.section-parallax{
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* efecto bonito */
}
.section-parallax::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}
.section-parallax > *{
  position: relative;
  z-index: 1;
}

/* Servicios: cards con gradiente + estilo premium */
.service-card{
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
  padding: 1.5rem;
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.service-card:hover{
  transform: translateY(-3px);
  border-color: rgba(244,122,31,.40);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
}
.service-title{
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .2px;
}
.service-text{
  margin-top: .65rem;
  font-size: .95rem;
  color: rgba(255,255,255,.78);
}

/* Why cards */
.why-card{
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 1.5rem;
  box-shadow: 0 16px 35px rgba(2,6,23,.08);
  position: relative;
  overflow: hidden;
}
.why-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:4px;
  width:100%;
  background: linear-gradient(90deg, var(--visentry-orange), rgba(244,122,31,.25));
}
.why-card .text-sm.font-semibold{
  color: var(--visentry-orange) !important;
}

/* Glass card (Condominios) */
.glass-card{
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255 );
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}



/* HERO slider: asegura que el track mida la suma de slides */
#heroTrack {
  width: 300%; /* 3 slides */
}
#heroTrack > div {
  width: 100%; /* cada slide ocupa el viewport */
}


/* Flechas del HERO */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:30;

  width:56px;
  height:56px;
  border-radius:9999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,.55);
  color:#fff;

  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 35px rgba(0,0,0,.22);

  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hero-arrow span{
  font-size:44px;         /* tamaño visual de la flecha */
  line-height:1;
  margin-top:-4px;        /* ajuste óptico */
}

.hero-arrow:hover{
  background: var(--visentry-orange);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

/* Dots del HERO */
#heroDots button{
  width:11px;
  height:11px;
  border-radius:9999px;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .15s ease, background .15s ease;
}
#heroDots button:hover{
  background: var(--visentry-orange);
  transform: scale(1.15);
}
#heroDots button.is-active{
  background: var(--visentry-orange);
  border-color: rgba(244,122,31,.55);
}



.ddlink{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  color:#0f172a; /* slate-900 */
}
.ddlink:hover{
  background:rgba(244,122,31,.10);
  color:#f47a1f;
}


.ddlink{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  color:#0f172a;
}
.ddlink:hover{
  background:rgba(244,122,31,.10);
  color:#f47a1f;
}


/* Mobile links */
.mobilelink{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  font-weight:800;
  color:#0f172a;
}

/* Hover (desktop) + active (mobile tap) */
.mobilelink:hover,
.mobilelink:active{
  background:#f97316; /* orange-500 */
  color:#fff;
}

/* Sub-links */
.mobile-sublink{
  display:block;
  margin:6px 0;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  color:#0f172a;
}

.mobile-sublink:hover,
.mobile-sublink:active{
  background:#f97316;
  color:#fff;
}


.mobile-accordion-btn{
  text-align: left;
}

/* Asegura que el ícono + no se seleccione ni “mueva” */
.mobile-accordion-btn span:last-child{
  pointer-events: none;
}

/* Panel acordeón móvil (animación suave) */
.mobile-panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 320ms ease, opacity 220ms ease, transform 220ms ease;
  will-change: max-height, opacity, transform;
}

/* Estado abierto */
.mobile-panel.is-open{
  max-height: 520px; /* suficiente para tus items */
  opacity: 1;
  transform: translateY(0);
}



/* Overlay de envío (no depende de Tailwind) */
#sendOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

#sendOverlay.is-hidden{
  display: none;
}

/* Fondo que bloquea la página (blanco translúcido + blur) */
#sendOverlay .sendOverlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.75); /* blanco transparente */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Centrado */
#sendOverlay .sendOverlay__wrap{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Caja (blanca sólida) */
#sendOverlay .sendOverlay__card{
  width: min(720px, 92vw);
  background: #fff;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(2,6,23,.18);
  padding: 28px;
  text-align: center;
}

/* Spinner */
#sendOverlay .sendOverlay__spinner{
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 999px;
  border: 5px solid rgba(148,163,184,.45);
  border-top-color: #f97316; /* naranja */
  animation: sendSpin 0.9s linear infinite;
}

@keyframes sendSpin{
  to { transform: rotate(360deg); }
}

 

/* =========================================================
   FALLBACKS PARA TAILWIND "slash opacity" (text-white/90, bg-black/55, etc.)
   Úsalos cuando Tailwind compilado no incluya esas clases.
   ========================================================= */

/* TEXT COLORS */
.text-white-90 { color: rgba(255,255,255,.90) !important; }
.text-white-80 { color: rgba(255,255,255,.80) !important; }
.text-white-75 { color: rgba(255,255,255,.75) !important; }
.text-white-70 { color: rgba(255,255,255,.70) !important; }
.text-white-60 { color: rgba(255,255,255,.60) !important; }
.text-slate-900-90 { color: rgba(15,23,42,.90) !important; } /* slate-900 */
.text-slate-700-90 { color: rgba(51,65,85,.90) !important; } /* slate-700 */

/* BACKGROUNDS */
.bg-black-10 { background-color: rgba(0,0,0,.10) !important; }
.bg-black-20 { background-color: rgba(0,0,0,.20) !important; }
.bg-black-40 { background-color: rgba(0,0,0,.40) !important; }
.bg-black-45 { background-color: rgba(0,0,0,.45) !important; }
.bg-black-55 { background-color: rgba(0,0,0,.55) !important; }
.bg-black-70 { background-color: rgba(0,0,0,.70) !important; }

.bg-white-05 { background-color: rgba(255,255,255,.05) !important; }
.bg-white-10 { background-color: rgba(255,255,255,.10) !important; }
.bg-white-15 { background-color: rgba(255,255,255,.15) !important; }
.bg-white-20 { background-color: rgba(255,255,255,.20) !important; }
.bg-white-40 { background-color: rgba(255,255,255,.40) !important; }
.bg-white-70 { background-color: rgba(255,255,255,.70) !important; }

/* BORDERS */
.border-white-10 { border-color: rgba(255,255,255,.10) !important; }
.border-white-20 { border-color: rgba(255,255,255,.20) !important; }

/* orange-500 aproximado (Tailwind: #f97316) */
.border-orange-500-70 { border-color: rgba(249,115,22,.70) !important; }
.border-orange-500-50 { border-color: rgba(249,115,22,.50) !important; }

/* Para overlays tipo "glass" */
.glass-dark {
  background: rgba(0,0,0,.40) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
}
.glass-light {
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(249,115,22,.35);
}


.banner-sub{
  background-color: rgba(0,0,0,0.15); 
  border-color: rgba(244,122,31,0.9);
}


h1 {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.max-w-2xl p{
  text-shadow: 0 2px 14px rgba(186, 185, 185, 0.6);
}