/* Asegurar que el menú desplegable esté por encima del contenido */
.dropdown-menu { z-index: 2000; }

/* SENTIO view: mobile refinements */
@media (max-width: 576px) {
  /* Cards al 90% centradas para mejor lectura */
  .sentio-theme .card { width: 90%; margin-left: auto; margin-right: auto; }
  /* Acciones del header apiladas y a ancho completo */
  .sentio-theme .d-flex.gap-2 { flex-wrap: wrap; }
  .sentio-theme .d-flex.gap-2 .btn { width: 100%; }
  /* Tablas con scroll horizontal seguro */
  .sentio-theme .table { display: block; overflow-x: auto; white-space: nowrap; }
  /* Espaciado compacto y legible */
  .sentio-theme .card-body { padding: 1rem; }
  .sentio-theme .card-title { margin-bottom: .75rem; }
  /* Unificar área (Clientes, Finanzas, Personas, Operaciones) */
  .sentio-theme .area-simple.card { width: 90%; margin-left: auto; margin-right: auto; }
  .sentio-theme .area-simple .d-flex.justify-content-between { gap: .5rem; }
  .sentio-theme .area-simple .badge { font-size: .85rem; }
  .sentio-theme .area-simple .progress { height: 6px !important; }
  .sentio-theme .area-simple .col-sm-3.text-sm-end.text-center { text-align: center !important; }
  .sentio-theme .area-simple .semaforo-img-sm { height: 56px; margin-top: .25rem; }
}
/* Basic styles for the app */
html { background-color: #0b0e1a; scroll-behavior: smooth; font-size: clamp(14px, 1.8vw, 16px); }
body {
  background-color: #0b0e1a; /* darker base so navbar blur doesn't create a white band */
  margin: 0;    
  padding: 0;
  overflow-x: hidden; /* evita scroll horizontal por secciones full-bleed */
}
/* Reserve space for fixed navbar when needed */
body.has-fixed-nav {
  padding-top: var(--nav-h, 64px);
}

.auth-section {
  position: relative;
  width: 100vw;
  left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  background:
    radial-gradient(800px 420px at 85% 12%, rgba(195,91,255,0.10), transparent 65%),
    radial-gradient(900px 500px at 12% 20%, rgba(42,167,255,0.12), transparent 60%),
    linear-gradient(135deg, #0a0f24 0%, #0b162f 50%, #0b0e1a 100%);
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
.auth-bg-glow { position: absolute; inset: 0; pointer-events: none; }
.auth-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
}
.auth-tabs { gap: .5rem; }
.auth-tab {
  display: inline-block;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08rem;
  text-transform: uppercase;
  color: #cfd6e6;
  border: 2px solid rgba(255,255,255,0.25);
}
.auth-tab.active {
  color: #0b0e1a;
  background: linear-gradient(90deg, #ff5d6c, #2aa7ff 60%, #c35bff 100%);
  border-color: transparent;
}

/* Auth: mobile friendly spacing */
@media (max-width: 576px) {
  .auth-section .container { padding-left: 1rem; padding-right: 1rem; }
  .auth-card { padding: 1rem !important; border-radius: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .auth-tabs { gap: .5rem; margin-bottom: .9rem; justify-content: center; flex-wrap: wrap; }
  .auth-tab { padding: .5rem 1rem; font-size: .85rem; }
  .auth-card .card-body { padding: 0 !important; }
  .auth-card h1, .auth-card .h1, .auth-card h2, .auth-card .h2 { margin: .5rem 0 1rem 0; }
  .auth-card .form-label { margin-bottom: .35rem; }
  .auth-card .mb-3 { margin-bottom: 1rem !important; }
  .auth-card .form-control, 
  .auth-card .form-select { padding: .65rem .85rem; border-radius: .6rem; }
  .auth-card .btn { min-height: 44px; border-radius: .65rem; }
  .auth-card .form-check { margin-top: .25rem; margin-bottom: .5rem; }
  .auth-card a { word-break: keep-all; }
  .auth-section { padding-top: calc(var(--section-space) * 0.7); padding-bottom: calc(var(--section-space) * 0.7); }
}

/* Remove unintended gap after hero */
.after-hero { margin-top: 0 !important; padding-top: 0 !important; }
:root {
  --primary-color: #ff5d6c;
  /* Espaciado vertical estándar entre secciones */
  --section-space: clamp(3rem, 5vw, 5rem);
  /* Bootstrap palette overrides */
  --bs-primary: #ff5d6c;
  --bs-primary-rgb: 255, 93, 108;
  --bs-success: #2aa7ff;
  --bs-success-rgb: 42, 167, 255;
  --bs-info: #c35bff;
  --bs-info-rgb: 195, 91, 255;
}
.h1, h1 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
.h2, h2 { font-size: clamp(1.5rem, 3.8vw, 2rem); }
.h3, h3 { font-size: clamp(1.25rem, 3.2vw, 1.5rem); }
.h4, h4 { font-size: clamp(1.1rem, 2.8vw, 1.25rem); }
.navbar-brand {
  font-weight: 600;
}
.icon-large {
  font-size: 2rem;
}
.card .avatar-sm {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.field-required::after {
  content: '*';
  color: #dc3545;
  margin-left: 2px;
}
.table th, .table td {
  vertical-align: middle;
}
.form-check-input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
}
@media (max-width: 576px) {
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* Default (dark theme baseline) */
.form-check-input {
  border-width: 2px;
  border-color: rgba(255,255,255,0.45);
  background-color: transparent;
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(255,93,108,.35);
}
.sortable-ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.alert-fixed {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
}
/* Responsive helpers */
@media (max-width: 576px) {
  .navbar .nav-link { padding: 0.5rem 0.75rem; }
}


#start {
  background-color: hsla(0, 0%, 100%, 0);
  background-image: radial-gradient(circle at 53% 50%, hsla(222.43902439024387, 27%, 29%, 1) 0%, transparent 40.59367058278773%), radial-gradient(circle at 53% 50%, hsla(243.63636363636365, 37%, 17%, 1) 0%, transparent 50%), radial-gradient(circle at 53% 50%, hsla(222.43902439024387, 27%, 29%, 1) 0%, transparent 41.80761312694906%), radial-gradient(circle at 53% 50%, hsla(243.63636363636365, 37%, 17%, 1) 0%, transparent 63.901357459096715%), radial-gradient(circle at 14% 85%, hsla(246.66666666666663, 56%, 6%, 1) 20.51353956871535%, transparent 93.42865603546755%), radial-gradient(circle at 7% 7%, hsla(246.66666666666663, 56%, 6%, 1) 20.51353956871535%, transparent 93.42865603546755%), radial-gradient(circle at 98% 84%, hsla(246.66666666666663, 56%, 6%, 1) 20.51353956871535%, transparent 93.42865603546755%), radial-gradient(circle at 97% 12%, hsla(246.66666666666663, 56%, 6%, 1) 20.51353956871535%, transparent 93.42865603546755%);
  background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal;
}

/* ----------start---------- */
#start
    {background-color:hsla(0,0%,100%,0);background-image:radial-gradient(circle at 53% 50%, hsla(222.43902439024387,27%,29%,1) 0%,transparent 40.59367058278773%),radial-gradient(circle at 53% 50%, hsla(243.63636363636365,37%,17%,1) 0%,transparent 50%),radial-gradient(circle at 53% 50%, hsla(222.43902439024387,27%,29%,1) 0%,transparent 41.80761312694906%),radial-gradient(circle at 53% 50%, hsla(243.63636363636365,37%,17%,1) 0%,transparent 63.901357459096715%),radial-gradient(circle at 14% 85%, hsla(246.66666666666663,56%,6%,1) 20.51353956871535%,transparent 93.42865603546755%),radial-gradient(circle at 7% 7%, hsla(246.66666666666663,56%,6%,1) 20.51353956871535%,transparent 93.42865603546755%),radial-gradient(circle at 98% 84%, hsla(246.66666666666663,56%,6%,1) 20.51353956871535%,transparent 93.42865603546755%),radial-gradient(circle at 97% 12%, hsla(246.66666666666663,56%,6%,1) 20.51353956871535%,transparent 93.42865603546755%);background-blend-mode:normal,normal,normal,normal,normal,normal,normal,normal;
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}






#home h2 {
  color: #07e1e9 !important;
} 


* {
  margin: 0;
  padding: 0;
}

/* ===================== */
/* Hero (section #start) */
/* ===================== */

/* Margen y espaciado base para secciones */
section { 
  scroll-margin-top: 96px; 
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

#start.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* pantalla completa */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: url('../images/bg.svg') center center / cover no-repeat;
}

#start .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.8) 100%);
}

#start .hero-content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  padding: 3rem 1rem;
}

#start .hero-logo {
  width: 320px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

#start .hero-title {
  font-weight: 800;
  letter-spacing: 0.20rem;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}

#start .hero-subtitle {
  font-weight: 700;
  letter-spacing: 0.45rem;
  font-size: 0.95rem;
  color: #e9eef6;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}

#start .hero-heading {
  font-weight: 800;
  letter-spacing: 0.12rem;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

#start .btn-hero {
  padding: 0.85rem 1.6rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.15rem;
  border-radius: 0.75rem;
  border: none;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 10px 0 #000000BF, 0 16px 22px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#start .btn-hero:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Paletas de botones similares a la referencia */
#start .btn-planes {
  background: #ff5d6c; /* rosa */
}
#start .btn-analisis {
  background: #2aa7ff; /* azul */
}
#start .btn-planes-alt {
  background: #c35bff; /* morado */
}

/* Responsive */
@media (max-width: 992px) {
  #start .hero-heading { font-size: 1.75rem; }
  #start .hero-title { font-size: 1.2rem; }
  #start .hero-subtitle { letter-spacing: 0.35rem; }
}
@media (max-width: 576px) {
  #start.hero { height: 100vh; }
  #start .hero-heading { font-size: 1.35rem; }
  #start .hero-subtitle { letter-spacing: 0.22rem; font-size: .85rem; }
  #start .hero-actions { gap: .5rem !important; }
  #start .btn-hero { 
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.6rem;
    letter-spacing: 0.08rem;
    box-shadow: 0 6px 0 #000000BF, 0 10px 16px rgba(0,0,0,0.3);
  }
}

/* ========================= */
/* Navbar glass & behavior    */
/* ========================= */
.navbar-glass {
  background: rgba(10, 12, 28, 0.35); /* a bit more opaque to avoid light seams */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 0; /* remove white band */
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  z-index: 1090;
  height: 15vh; /* requested height */
  min-height: 56px; /* ensure usability on very small viewports */
  overflow: visible; /* no recortar dropdowns */
}
.navbar-glass.navbar-opaque {
  background: rgba(10, 12, 28, 0.8);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.navbar-hidden { transform: translateY(-120%); }

/* Offset hero under fixed navbar to remove visible gap */
body.has-fixed-nav #start.hero { margin-top: calc(var(--nav-h, 10vh) * -1) !important; }
#start.hero { margin-top: 0 !important; padding-top: 0 !important; }
/* Apply the same fix for pages with video hero */
body.has-fixed-nav .video-hero { margin-top: calc(var(--nav-h, 10vh) * -1) !important; }
.video-hero { margin-top: 0 !important; padding-top: 0 !important; }

@media (max-width: 576px) {
  .navbar-glass { height: auto; min-height: 56px; padding-top: .375rem; padding-bottom: .375rem; }
}

/* WhatsApp button (elegant green) */
.btn-whatsapp {
  --wa: #25D366;
  --wa-dark: #1ebe57;
  --wa-shadow: rgba(0,0,0,0.25);
  background: linear-gradient(180deg, var(--wa) 0%, #20c45b 100%);
  color: #ffffff !important;
  border: 0;
  border-radius: .5rem;
  box-shadow: 0 4px 14px var(--wa-shadow);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-whatsapp:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.btn-whatsapp:active { transform: translateY(0); box-shadow: 0 3px 12px rgba(0,0,0,0.3); }
.btn-whatsapp i { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

/* Ensure good contrast in light theme as well */
html.theme-light .btn-whatsapp {
  box-shadow: 0 4px 14px rgba(37,211,102,0.35);
}

/* ========================= */
/* Plans (section #plans)    */
/* ========================= */
#plans.plans-section {
  /* background: radial-gradient(1000px 500px at 50% -200px, #0e1631 0%, rgba(14,22,49,0) 60%),
              linear-gradient(180deg, #101733 0%, #0c1228 100%); */
  color: #fff;
  border-radius: 14px;
  width: 100%;
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}

.plans-title {
  font-weight: 900;
  letter-spacing: 0.35rem;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,0.5);
  font-size: 2.5rem;
}

.plan-card {
  background: #1e1e2f;
  color: #fff;
  padding: 1.75rem;
  margin: 1rem;
  border-radius: 22px;
  box-shadow: 0 14px 24px rgba(0,0,0,0.3);
  min-height: 520px;
}
.plan-card .plan-name {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.plan-card .plan-prices {
  margin-bottom: 1rem;
}
.plan-card .price-line {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.1;
}
.plan-card .price-line.small {
  font-size: 1.25rem;
  opacity: .95;
}
.plan-card .price-line .unit {
  font-size: .9rem;
  letter-spacing: .12rem;
  margin-left: .25rem;
}
.plan-card .plan-features {
  margin: .75rem 0 1.25rem 1.1rem;
}
.plan-card .plan-features li { margin-bottom: .35rem; }
.lead {
  font-weight: 800;
  letter-spacing: 0.20rem;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}
/* Variant colors */
.plan-card.plan-basic { background: #ce5160; }
.plan-card.plan-standard { background: #2a9ac6; }
.plan-card.plan-premium { background: #7a3bb7; }
/* New corporate (gold) */
.plan-card.plan-corporate {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 55%, #f1d97a 100%);
  color: #1b1b1b;
  box-shadow: 0 18px 26px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.25);
  padding: 1.25rem;            /* más compacto */
  min-height: 440px;           /* menor altura */
}
.plan-card.plan-corporate .plan-name,
.plan-card.plan-corporate .price-line,
.plan-card.plan-corporate .plan-features li { color: #1b1b1b; }

/* tamaños más pequeños solo para corporativo */
.plan-card.plan-corporate .plan-name { font-size: 1rem; letter-spacing: 0.12rem; }
.plan-card.plan-corporate .price-line { font-size: 1.6rem; }
.plan-card.plan-corporate .price-line.small { font-size: 1rem; }
.plan-card.plan-corporate .plan-features { margin: .5rem 0 1rem 1rem; }
.plan-card.plan-corporate .plan-features li { font-size: .95rem; }

/* Pill buttons */
.pill-btn {
  background: #ffffff;
  color: #222;
  border-radius: 999px;
  padding: .75rem 1.25rem;
  font-weight: 800;
  letter-spacing: .12rem;
  text-transform: uppercase;
  box-shadow: 0 8px 0 rgba(0,0,0,0.55), 0 12px 18px rgba(0,0,0,0.3);
  border: none;
}
.pill-btn:hover { filter: brightness(0.98); transform: translateY(-2px); }
.pill-btn:active { transform: translateY(1px); box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 10px 16px rgba(0,0,0,0.3); }

@media (max-width: 576px) {
  .plans-title { font-size: 2rem; letter-spacing: .25rem; }
  .plan-card { min-height: auto; }
}

/* Better tap targets on mobile */
@media (max-width: 576px) {
  .btn { min-height: 44px; }
  .btn.btn-lg { min-height: 48px; }
  .card-body { padding: 1rem; }
  .card-header, .card-footer { padding: .75rem 1rem; }
}

/* Dashboard: mobile refinements */
@media (max-width: 576px) {
  /* Stack header actions and stretch buttons */
  .card-header .d-flex.gap-2 { flex-wrap: wrap; }
  .card-header .d-flex.gap-2 .btn { width: 100%; }
  /* Smaller icons in stat cards */
  .icon-large { font-size: 1.5rem; }
  /* Compact tables for small screens */
  .table th, .table td { padding: .5rem .5rem; font-size: .9rem; }
  /* Breathing room between sections */
  .row + .row { margin-top: .5rem; }
  /* Dashboard stat cards width 80% centered (avoid affecting big table cards) */
  .card.bg-primary, .card.bg-success, .card.bg-info { width: 80%; margin-left: auto; margin-right: auto; }
  /* Also apply 80% width to other dashboard cards (tables, analysis) */
  .row .col-12 > .card { width: 80%; margin-left: auto; margin-right: auto; }
}

/* ========================= */
/* Public Marketing Form     */
/* ========================= */
.video-hero {
  position: relative;
  width: 100%;
  height: auto; /* full screen */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0e1330;
}

.video-hero .video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-hero .video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 3, 29, 0.25) 0%, rgba(7, 3, 29, 0.45) 60%, rgba(7, 3, 29, 0.65) 100%);
  backdrop-filter: blur(1px);
}

.form-glass {
  margin-top: 8rem;
  position: relative;
  z-index: 2;
  width: min(1000px);
  max-width: 1400px;
  border-radius: 22px;
  background: rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.5);
}

.form-glass h1 {
  letter-spacing: 0.18rem;
  color: #0e2240;
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.question-label {
  font-weight: 800;
  letter-spacing: 0.12rem;
  color: #1d2a44;
  text-transform: uppercase;
}

.fancy-select.form-select.form-select-lg {
  padding: 0.9rem 1.25rem;
  border-radius: 1.75rem;
  border: 2px solid #273653;
  background-color: #f7f8fb;
  color: #1f2a3e;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23273653' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 24px 24px;
  appearance: none;
}

.fancy-select:focus {
  border-color: #2aa7ff;
  box-shadow: 0 0 0 0.25rem rgba(42, 167, 255, 0.25);
}

.form-glass .form-label {
  color: #1f2a3e;
}

@media (max-width: 576px) {
  .form-glass { padding: 1.25rem !important; }
}

/* Result panel & traffic light */
.result-panel {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 1rem 1.25rem;
}

.traffic-light {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,0.15);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.15);
}
.traffic-light[data-band="rojo"] { background: radial-gradient(circle at 35% 35%, #ff9aa5, #ff2d3b 60%, #b10d1e 100%); }
.traffic-light[data-band="amarillo"] { background: radial-gradient(circle at 35% 35%, #ffe8a6, #ffd046 60%, #b38a00 100%); }
.traffic-light[data-band="verde"] { background: radial-gradient(circle at 35% 35%, #b6ffcc, #26d96c 60%, #0a8a3a 100%); }

.ai-summary {
  white-space: pre-wrap;
  background: rgba(255,255,255,0.14); /* ligera transparencia para ver un poco el fondo */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 1rem 1.1rem;
  border-radius: 12px;
  color: #ffffff; /* asegurar contraste sobre el fondo oscuro del contenedor */
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Diagnostic box aligned left, image right */
.diagnostic-box {
  background: rgba(107, 19, 19, 0.88); /* base; se sobreescribe por banda */
  color: #fff;
  border-radius: 18px;
  border: 6px solid #2bb7c3; /* borde turquesa */
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.diagnostic-box.band-rojo { background: rgba(107, 19, 19, 0.88); border-color: #2bb7c3; }
.diagnostic-box.band-amarillo { background: rgba(107, 90, 19, 0.88); border-color: #2bb7c3; }
.diagnostic-box.band-verde { background: rgba(19, 78, 42, 0.88); border-color: #2bb7c3; }
.diagnostic-box .diag-title {
  font-weight: 900;
  letter-spacing: .12rem;
  text-transform: uppercase;
}
.diagnostic-box .diag-score {
  font-weight: 700;
}
.semaforo-img {
  height: 85vh; /* 85% de la altura de la ventana */
  max-height: 900px; /* límite superior razonable */
  width: auto;
  max-width: 100%; /* no desbordar la columna */
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.5));
  animation: floaty 4.8s ease-in-out infinite;
}

.traffic-wrap { display: flex; align-items: center; justify-content: center; }

@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@media (max-width: 1200px) {
  .semaforo-img { height: 70vh; }
}
@media (max-width: 992px) {
  .semaforo-img { height: 55vh; }
}
@media (max-width: 576px) {
  .semaforo-img { height: 40vh; }
}

/* ========================= */
/* Incredible Footer Styles   */
/* ========================= */
.footer {
  position: relative;
  z-index: 100; /* elevar el index del footer */
  color: #e9eef6;
  background:
    radial-gradient(800px 420px at 85% 12%, rgba(195,91,255,0.08), transparent 65%),
    radial-gradient(900px 500px at 12% 20%, rgba(42,167,255,0.10), transparent 60%),
    linear-gradient(180deg, #0c1228 0%, #0a0f24 100%);
}

.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 80px;
  transform: translateY(-100%);
  background-repeat: no-repeat;
  background-size: cover;
  /* Wave disabled */
  display: none;
  pointer-events: none;
}

.footer .text-muted { color: #cfd6e6 !important; }
.footer a { color: #cfd6e6; transition: color .2s ease, opacity .2s ease; }
.footer a:hover { color: #ffffff; opacity: 0.95; text-decoration: none; }

.footer .d-inline-flex.gap-3 a { 
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.footer .d-inline-flex.gap-3 a:hover {
  transform: translateY(-2px) scale(1.03);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), 0 0 0 2px rgba(7,225,233,0.15) inset;
}
.footer .d-inline-flex.gap-3 a i { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }

@media (max-width: 576px) {
  .footer .d-inline-flex.flex-wrap.gap-3 { gap: .75rem !important; }
}

@media (max-width: 576px) {
  .footer .d-inline-flex.gap-3 a { width: 56px; height: 56px; }
}

/* ========================= */
/* About (section #about)    */
/* ========================= */
#about.about-section {
  position: relative;
  color: #e9eef6;
  /* Full-bleed: ocupar el 100% del viewport incluso dentro de .container */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-top: var(--section-space);
  padding-bottom: calc(var(--section-space) + 100px); /* más aire antes de la siguiente sección */
  z-index: 2;
}
.about-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 400px at 15% 10%, rgba(7,225,233,0.12), transparent 60%),
              radial-gradient(900px 500px at 85% 20%, rgba(195,91,255,0.10), transparent 65%),
              radial-gradient(1000px 600px at 50% 100%, rgba(42,167,255,0.10), transparent 70%);
  filter: blur(0.5px);
}
.about-title { letter-spacing: .18rem; color: #ffffff; text-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.about-subtitle { max-width: 820px; opacity: .9; }
.about-badge {
  display: inline-block;
  padding: .35rem .85rem;
  font-weight: 800;
  letter-spacing: .18rem;
  text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5d6c, #2aa7ff, #c35bff);
  color: #0b0e1a;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.about-intro {
  background: rgba(30,30,47,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
}
.about-heading { 
  font-weight: 900; 
  letter-spacing: .12rem; 
  background: linear-gradient(90deg, #ff5d6c 0%, #2aa7ff 60%, #c35bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-image { max-height: 420px; object-fit: cover; width: 100%; }

.about-card {
  background: linear-gradient(180deg, rgba(30,30,47,0.88) 0%, rgba(20,20,36,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.about-card h4 { color: #fff; font-weight: 800; letter-spacing: .08rem; }
.about-card p { color: #d8deeb; }
.about-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px;
  background: conic-gradient(from 0deg, #ff5d6c, #2aa7ff, #c35bff, #ff5d6c);
  box-shadow: 0 0 0 3px rgba(7,225,233,0.15), 0 0 16px rgba(7,225,233,0.25) inset;
}

/* CTA buttons for about */
.btn.btn-hero-cta {
  padding: .9rem 1.6rem;
  font-weight: 900;
  letter-spacing: .12rem;
  text-transform: uppercase;
  border-radius: 14px;
  border: 0;
  color: #0b0e1a;
  background: linear-gradient(90deg, #ff5d6c, #2aa7ff 60%, #c35bff 100%);
  box-shadow: 0 12px 0 rgba(0,0,0,0.55), 0 16px 26px rgba(0,0,0,0.35);
}
.btn.btn-hero-cta:hover { transform: translateY(-2px); filter: brightness(1.03); }
.btn.btn-hero-cta:active { transform: translateY(1px); }
.btn.btn-hero-cta.btn-ghost {
  color: #ffffff;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.35);
}
.btn.btn-hero-cta.btn-ghost:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 576px) {
  .about-image { max-height: 280px; }
}

/* ========================= */
/* Contact (section #form)   */
/* ========================= */
#form.form {
  position: relative;
  width: 100vw; /* full-bleed también para contacto */
  left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  /* Fondo distinto: gradiente diagonal + patrón sutil */
  background:
    /* patrón de líneas diagonales muy sutil */
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 2px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 14px
    ),
    /* halos de color de la paleta */
    radial-gradient(700px 380px at 12% 12%, rgba(42,167,255,0.14), transparent 60%),
    radial-gradient(800px 420px at 88% 18%, rgba(195,91,255,0.12), transparent 65%),
    /* gradiente diagonal principal (más azulado) */
    linear-gradient(135deg, #0a0f24 0%, #0d1a3a 55%, #0b0e1a 100%);
  /* separación adicional para que el contenido no choque con los separadores */
  padding-top: calc(var(--section-space) + 140px);
  padding-bottom: calc(var(--section-space) + 60px);
  /* Asegurar interactividad por encima de otros layers */
  z-index: 10;
  isolation: isolate;
}

/* Separadores curvos para diferenciar visualmente la sección */
#form.form::before,
#form.form::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
#form.form::before {
  top: 0;
  transform: translateY(-100%);
  /* Wave disabled to avoid overlapping behind About section */
  display: none;
}
#form.form::after {
  bottom: 0;
  transform: translateY(100%);
  /* Wave disabled above footer */
  display: none;
}

.contact-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
}
.contact-card .form-control.form-control-lg {
  background: rgba(255,255,255,0.9);
  border: 2px solid #273653;
  border-radius: 14px;
}
.contact-card .form-select,
.contact-card select.form-control,
.contact-card .form-control {
  position: relative;
  z-index: 1001;
}
.contact-card .form-control.form-control-lg:focus {
  border-color: #2aa7ff;
  box-shadow: 0 0 0 0.25rem rgba(42,167,255,0.25);
}

/* Estilos de David */
/* diagnostic SENTIO */
.mb-3 h4 { color: #ffffff !important; }

/* Título sección Home */
#home .display-5.fw-bold { color: #22c55e; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
/* Planes */
.plan-corporate {
  width: 100%;
}

/* Pagos */
.d-flex .card-title { color: #18005a !important; }