:root{
  --azul:#21354B;
  --gris:#1E3046;
  --verde:#9DCD46;
  --white:#ffffff;
  --muted:#9aa6b3;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--white);color:var(--gris);font-family:inherit;scroll-behavior:smooth}
.navbar .nav-link, .navbar .navbar-brand { color: rgba(255,255,255,0.95); }
.navbar .nav-link:hover { color: var(--verde); text-decoration:none; }
.nav-blur{background:transparent;transition:.25s;backdrop-filter: blur(8px);}
.nav-blur.scrolled{background: rgba(30,48,70,0.85);}

.hero{
   min-height:92vh;
  padding:160px 0 120px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(600px 600px at 12% 40%, rgba(157,205,70,0.08), transparent 6%),
    radial-gradient(700px 600px at 88% 60%, rgba(157,205,70,0.04), transparent 8%),
    linear-gradient(180deg, rgba(33,53,75,1) 0%, rgba(30,48,70,1) 100%);
  color:var(--white);padding:120px 0;position:relative;overflow:hidden;
}
.hero .badge-soft{
  margin-bottom:32px;
}

.hero .display-4{
  margin-bottom:28px;
}

.hero .hero-desc{
  max-width:720px;
  margin:0 auto 48px;
  font-size:20px;
  line-height:1.6;
  opacity:0.9;
}

.hero .btn-main{
  margin-top:16px;
  padding:16px 36px;
  font-size:18px;
}

/* logo float + glow */
.hero .logo-wrap{display:block;margin:0 auto 10px;position:relative;width:140px;height:140px;border-radius:24px;
  /*background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));backdrop-filter: blur(6px);
  box-shadow: 0 40px 120px rgba(157,205,70,0.12);*/
  animation: floatLogo 6s ease-in-out infinite;
}
@keyframes floatLogo{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0px)}
}

/* glow pulse behind */
.hero::before{
  content:'';position:absolute;left:10%;top:30%;width:560px;height:560px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(157,205,70,0.18), rgba(157,205,70,0.06) 20%, transparent 40%);
  filter: blur(40px);opacity:0.9;transform:translateZ(0);
  animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%{opacity:0.7;transform:scale(0.98)}
  50%{opacity:1;transform:scale(1.03)}
  100%{opacity:0.7;transform:scale(0.98)}
}

/* hero title */
.display-4{font-size:68px;line-height:1.05;font-weight:700;margin:10px 0;color:var(--white);}

.display-4 .green{color:var(--verde);display:block}
@media(max-width:992px){.display-4{font-size:44px} .display-4 .green{display:block} }

.hero .badge-soft{display:inline-block;background:rgba(255,255,255,0.03);color:var(--verde);padding:10px 20px;border-radius:999px;border:1px solid rgba(157,205,70,0.08);font-weight:700;backdrop-filter: blur(3px);opacity:0.95;}


/* CTA */
.btn-main{background:var(--verde);color:var(--azul);padding:14px 36px;border-radius:36px;font-weight:800;border:none;box-shadow:0 18px 50px rgba(157,205,70,0.12);transition:transform .18s, box-shadow .18s}
.btn-main:hover{transform:translateY(-4px);filter:brightness(1.05);box-shadow:0 26px 80px rgba(157,205,70,0.18); color:#ffffff;}

/* sections */
.section{padding:72px 0}
.section-title{font-size:48px;font-weight:700;color:var(--azul);margin-bottom:8px;text-align:center; padding-bottom: 15px;}
.section-desc{text-align:center;color:var(--muted);margin-bottom:28px}

/* cards */
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(max-width:768px){.cards-grid{grid-template-columns:1fr}}

.card-advanced{background: linear-gradient(180deg, rgba(255,255,255,1), rgba(249,249,250,1));border-radius:24px;padding:28px;box-shadow:0 30px 90px rgba(14,20,30,0.06);border:1px solid rgba(33,53,75,0.04);transition:transform .22s;display:flex;gap:18px;align-items:flex-start}
.card-advanced:hover{transform:translateY(-12px);box-shadow:0 46px 140px rgba(14,20,30,0.14)}
.icon-wrap{min-width:70px;height:70px;border-radius:14px;background:linear-gradient(180deg, rgba(157,205,70,0.12), rgba(157,205,70,0.06));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--verde);font-size:22px}

/* benefits dark */
.dark-section{background: linear-gradient(180deg, rgba(33,53,75,1), rgba(30,48,70,1));color:var(--white);padding:80px 0}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:24px}
@media(max-width:992px){.benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.benefit-grid{grid-template-columns:1fr}}
.benefit-card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:20px;padding:28px;box-shadow:0 20px 60px rgba(2,6,23,0.06);border:1px solid rgba(255,255,255,0.06);min-height:180px;display:flex;gap:18px;align-items:flex-start}
.benefit-card .icon-box{min-width:68px;height:68px;border-radius:12px;background:rgba(12,24,36,0.18);display:flex;align-items:center;justify-content:center}

/* fade-up animation */
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease}
.fade-up.in{opacity:1;transform:translateY(0)}

/* small */
.hero-desc{max-width:860px;margin:18px auto;color:rgba(255,255,255,0.9);font-size:1.1rem}

/* navbar contrast */
.navbar-brand .logo-title{color:var(--white);font-weight:700;margin-left:8px}
.navbar{padding:0.4rem 1rem}

/* utility */
.text-light{color:rgba(255,255,255,0.9)}
/* Scroll indicator (mouse) */
.scroll-indicator { pointer-events: none; } /* no interfiere con clicks */

/* Contenedor del "mouse" */
.scroll-mouse{
  width: 36px;               /* w-6 */
  height: 56px;              /* h-10 */
  border-radius: 999px;      /* rounded-full */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:8px;
  box-sizing:border-box;
  border:2px solid rgba(157,205,70,0.25); /* verde /30 */
  background: rgba(255,255,255,0.02);     /* ligero fondo */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* opcional: sombra suave */
  box-shadow: 0 6px 20px rgba(33,53,75,0.06);
  animation: mouse-bounce 3s infinite ease-in-out;
}

/* Rueda interna que baja/sube */
.scroll-wheel{
  width: 4px;         /* w-1 */
  height: 12px;       /* h-3 */
  border-radius: 999px;
  background: #9DCD46; /* color verde corporativo */
  margin-top: 6px;    /* mt-2 */
  animation: wheel-move 1.8s infinite ease-in-out;
  opacity: 1;
}

/* Si quieres que desaparezca sutilmente al bajar usa este keyframes */
@keyframes wheel-move {
  0%   { opacity: 1; transform: translateY(0); }
  45%  { opacity: 0.15; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Oscilación del mouse */
@keyframes mouse-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(4px); }
}

/* Responsivo: reducir tamaño en pantallas pequeñas */
@media (max-width: 480px){
  .scroll-mouse{ width: 30px; height:50px; padding-top:6px; }
  .scroll-wheel{ width:3px; height:10px; margin-top:5px; }
}
.scroll-indicator { opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.scroll-indicator.visible { opacity: 1; transform: translateY(0); }
/* === Ajuste exacto cards Servicios (igual web AI) === */

#servicios .card-advanced{
  flex-direction: column;       /* icono arriba */
  align-items: flex-start;
  gap: 20px;
  padding: 36px;
}

#servicios .icon-wrap{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 4px;
}

#servicios h4{
  font-size: 1.35rem;
  line-height: 1.25;
  margin-bottom: 8px;
}

#servicios p{
  color: #5f6c7b;
  margin-bottom: 12px;
}

/* bullets verdes como la AI */
#servicios ul{
  padding-left: 0;
  margin: 0;
  list-style: none;
}

#servicios ul li{
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

#servicios ul li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--verde);
  font-size: 1.4rem;
  line-height: 1;
}
@media (max-width: 992px){
  #servicios .container{
    max-width: 92%;
  }
}
/* === Beneficios estilo AI === */

/* === Beneficios responsive: 3 columnas desktop / 1 mobile === */

.beneficios-list{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

/* Desktop: 3 columnas */
@media (min-width: 992px){
  .beneficios-list{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card */
.beneficio-item{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(2,6,23,0.35);
  height: 100%;
}

.beneficio-item h4{
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.beneficio-item p{
  color: rgba(255,255,255,0.85);
  margin: 0;
  line-height: 1.5;
}

/* Icon */
#beneficios .icon-box{
  min-width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(157,205,70,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px){
  .beneficio-item{
    flex-direction: column;
    text-align: left;
  }
}


/* === Modalidades de contratación === */
/* === Modalidades grid EXACTO como AI === */

.modalidades-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

/* Tablet */
@media (min-width: 768px){
  .modalidades-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1200px){
  .modalidades-grid{
    grid-template-columns: repeat(3, 1fr);
  }

  /* Centrar la última fila (2 cards) */
  .modalidades-grid::after{
    content: "";
    grid-column: span 1;
  }
}

.modalidad-card{
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(14,20,30,0.08);
  border: 1px solid rgba(33,53,75,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.modalidad-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 36px 90px rgba(14,20,30,0.14);
}

.modalidad-icon{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(157,205,70,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.modalidad-card h4{
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 10px;
}

.modalidad-card p{
  color: #5f6c7b;
  margin: 0;
  line-height: 1.5;
}

/* Mobile */
@media (max-width: 576px){
  .modalidad-card{
    padding: 28px 22px;
  }
}

/* === Cómo trabajamos (estilo AI) === */

.como-steps{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.como-step{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(33,53,75,0.08);
  box-shadow: 0 18px 50px rgba(14,20,30,0.06);
}

.step-number{
  min-width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(157,205,70,0.18);
  color: var(--verde);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-content{
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--azul);
}

/* Responsive */
@media (max-width: 576px){
  .como-step{
    padding: 22px;
    gap: 18px;
  }

  .step-content{
    font-size: 1rem;
  }
}
/* === Servicios para Consultoras === */
/* === Servicios para Consultoras (Dark Section) === */

#consultoras .section-title{
  color: #ffffff;
}

#consultoras .section-desc{
  color: rgba(255,255,255,0.85);
}

/* Grid */
#consultoras .consult-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Desktop */
@media (min-width: 992px){
  #consultoras .consult-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card */
#consultoras .consult-card{
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  border-radius: 24px;
  padding: 40px 32px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 90px rgba(2,6,23,0.45);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}

#consultoras .consult-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 44px 130px rgba(2,6,23,0.65);
}

/* Acento verde */
#consultoras .consult-accent{
  position: absolute;
  top: 28px;
  left: 0;
  width: 6px;
  height: 56px;
  background: var(--verde);
  border-radius: 0 6px 6px 0;
}

/* Textos */
#consultoras .consult-card h4{
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
}

/* Mobile */
@media (max-width: 576px){
  .consult-card{
    padding: 32px 26px;
  }
}
/* === Por qué elegir Núcleo IT === */

#porque .badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px; /* pill perfecta */
  background: rgba(157,205,70,0.12);
  border: 1px solid rgba(157,205,70,0.35);
  color: var(--verde);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  backdrop-filter: blur(4px);
}

/* Contenedor */
.porque-content{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Card glass */
.porque-card{
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 36px 40px;
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03)
  );
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 120px rgba(2,6,23,0.55);
}

/* Icon */
.porque-icon{
  min-width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(157,205,70,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Textos */
#porque .lead{
  font-size: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
}

#porque .muted{
  color: rgba(255,255,255,0.8);
  margin: 0;
  line-height: 1.6;
}

#porque .highlight{
  color: var(--verde);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 576px){
  .porque-card{
    flex-direction: column;
    padding: 28px;
  }

  #porque .lead{
    font-size: 1.1rem;
  }
}
/* === Footer === */

.site-footer{
  background: linear-gradient(
    180deg,
    rgba(33,53,75,1),
    rgba(30,48,70,1)
  );
  color: rgba(255,255,255,0.85);
  padding: 28px 0;
  position: relative;
}

/* Línea verde superior */
.footer-line{
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(157,205,70,0.9),
    transparent
  );
  margin-bottom: 22px;
}

/* Grid */
.footer-grid{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

/* Logo */
.footer-brand img{
  display: block;
}

/* Centro */
.footer-center{
  text-align: center;
  font-size: 0.95rem;
}

.footer-center small{
  display: block;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}

/* Contacto */
.footer-contact{
  text-align: right;
  font-size: 0.9rem;
}

.footer-contact a{
  display: block;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}

.footer-contact a:hover{
  color: var(--verde);
}

/* Responsive */
@media (max-width: 768px){
  .footer-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-contact{
    text-align: center;
  }
}
/* === Contacto === */

.contact-wrapper{
  max-width: 720px;
  margin: 0 auto;
}

/* Form */
.contact-form{
  margin-top: 32px;
}

/* Inputs */
.form-field{
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(33,53,75,0.18);
  font-size: 0.95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field:focus{
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(157,205,70,0.18);
}

/* Nota */
.contact-note{
  margin-top: 18px;
  color: #6c7a89;
  font-size: 0.9rem;
}
/* === Fix hover botón principal === */

.btn-main{
  background: var(--verde);
  color: var(--azul);
  border: none;
}

.btn-main:hover,
.btn-main:focus,
.btn-main:active{
  background: var(--verde) !important;
  color: #ffffff !important;
  filter: brightness(1.05);
  box-shadow: 0 26px 80px rgba(157,205,70,0.18);
}
@media(max-width:992px){
  .hero{
    padding:120px 0 100px;
  }

  .display-4{
    font-size:42px;
    line-height:1.1;
  }

  .hero .hero-desc{
    font-size:18px;
    margin-bottom:36px;
  }
}
.scroll-indicator{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:40;
  opacity:0.8;
  transition:opacity .3s ease, transform .3s ease;
}
@media(max-width:992px){
  .scroll-indicator{
    bottom:24px;
    opacity:0.6;
  }
}
.scroll-indicator{
  opacity:0;
  transform:translateX(-50%) translateY(8px);
}

.scroll-indicator.visible{
  opacity:0.8;
  transform:translateX(-50%) translateY(0);
}
.scroll-mouse{
  border-color:rgba(157,205,70,0.35);
}

.scroll-wheel{
  background:rgba(157,205,70,0.8);
}


/* Nucleo Bot */
#nucleo-bot {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 320px;
  max-height: 460px;
  background: #0f1e2d;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: none;
  flex-direction: column;
  overflow: hidden;
   z-index: 99999 !important;
  font-family: system-ui, sans-serif;
}

#nucleo-bot-header {
  background: #21354b;
  color: #fff;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

#nucleo-bot-header button {
  background: none;
  border: none;
  color: #9dcd46;
  font-size: 16px;
  cursor: pointer;
}

#nucleo-bot-messages {
  padding: 14px;
  flex: 1;
  overflow-y: auto;
  font-size: 14px;
}

.bot-msg {
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

#nucleo-bot-options {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bot-option {
  background: #9dcd46;
  color: #0f1e2d;
  border: none;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

.bot-option.secondary {
  background: transparent;
  color: #9dcd46;
  border: 1px solid #9dcd46;
}

#nucleo-bot-toggle {
  
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #9dcd46;
  color: #0f1e2d;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 99998 !important;
  position: fixed !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(33,53,75,0.95);
  color: #fff;
  z-index: 9999;
  padding: 20px;
  display: none;
}

.cookie-content {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cookie-content p {
  margin: 0;
  font-size: 14px;
  max-width: 720px;
}

.cookie-content a {
  color: #9DCD46;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 10px;
}
/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #25D366;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 999px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  color: #ffffff;
}

.whatsapp-float img {
  width: 26px;
  height: 26px;
}

.whatsapp-text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.1;
}

.whatsapp-text small {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.9;
}

/* Mobile: solo icono */
@media (max-width: 576px) {
  .whatsapp-text {
    display: none;
  }

  .whatsapp-float {
    padding: 14px;
  }
}