
/* ============================================================
   ImpulsA fase 9.9 — paleta azul tecnológica
   Inspirada en la propuesta visual de homepage generada.
   Se aplica solo a la web pública y respeta la lógica existente.
   ============================================================ */
:root{
  --green:#0ea5ff;
  --green-2:#22d3ee;
  --black:#061027;
  --charcoal:#071b35;
  --muted:#64748b;
  --soft:#f3f8ff;
  --line:#dbeafe;
  --shadow:0 24px 70px rgba(3,20,46,.16);
  --tech-navy:#061027;
  --tech-navy-2:#071a3a;
  --tech-blue:#0b7bff;
  --tech-blue-2:#00a8ff;
  --tech-cyan:#22d3ee;
  --tech-ice:#eef7ff;
}
html{scroll-behavior:smooth;}
body{
  background:#f4f9ff;
  color:#091426;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 8%, rgba(0,168,255,.12), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(34,211,238,.10), transparent 34%),
    linear-gradient(180deg,#f8fbff 0%,#eef7ff 52%,#f8fbff 100%);
}
/* Header tech */
.site-header{
  background:rgba(4,13,31,.88)!important;
  border-bottom:1px solid rgba(56,189,248,.18)!important;
  backdrop-filter:blur(18px);
  box-shadow:0 10px 38px rgba(0,20,60,.18)!important;
}
.site-header.is-scrolled{
  background:rgba(4,13,31,.94)!important;
  box-shadow:0 14px 44px rgba(0,20,60,.24)!important;
}
.main-nav a{color:rgba(255,255,255,.86)!important;}
.main-nav a:hover{color:#ffffff!important;}
.main-nav a::after{background:linear-gradient(90deg,var(--tech-blue-2),var(--tech-cyan))!important;}
.nav-toggle span{background:#fff!important;}
.brand-logo{filter:none!important; width:170px;}
/* Botones */
.btn-primary{
  background:linear-gradient(135deg,#0075ff 0%,#00a8ff 55%,#22d3ee 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 38px rgba(0,132,255,.26)!important;
  border-color:rgba(34,211,238,.18)!important;
}
.btn-primary:hover{
  background:linear-gradient(135deg,#0068e8 0%,#0098f5 60%,#20c5dc 100%)!important;
  box-shadow:0 24px 48px rgba(0,132,255,.34)!important;
}
.btn-ghost{
  border-color:rgba(56,189,248,.28)!important;
  color:#dbeafe!important;
  background:rgba(255,255,255,.05)!important;
}
.btn-ghost:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;}
/* Hero */
.hero{background:#061027!important;}
.hero-slider{
  min-height:680px!important;
  background:
    radial-gradient(circle at 75% 42%, rgba(0,168,255,.42), transparent 34%),
    radial-gradient(circle at 24% 20%, rgba(34,211,238,.18), transparent 34%),
    linear-gradient(135deg,#061027 0%,#071a3a 48%,#002b66 100%)!important;
  overflow:hidden;
}
.hero-slider::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(rgba(56,189,248,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.07) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 84%,transparent 100%);
  opacity:.45;
}
.hero-slider::after{
  content:'';
  position:absolute;
  right:-8%;
  bottom:-24%;
  width:72%;
  height:72%;
  z-index:2;
  background:
    radial-gradient(ellipse at center, rgba(0,168,255,.38) 0%, transparent 58%),
    repeating-radial-gradient(ellipse at center, rgba(34,211,238,.20) 0 2px, transparent 2px 18px);
  transform:rotate(-8deg);
  filter:blur(.2px);
  opacity:.62;
}
.slide img{opacity:.42!important;filter:saturate(1.02) contrast(1.02) brightness(.74)!important;}
.hero-overlay{
  z-index:3;
  background:linear-gradient(90deg,rgba(6,16,39,.97) 0%,rgba(6,16,39,.88) 44%,rgba(6,16,39,.38) 76%,rgba(6,16,39,.30) 100%)!important;
}
.hero-copy{max-width:780px;}
.eyebrow{
  color:#7dd3fc!important;
  letter-spacing:.08em;
}
.hero h1{
  color:#fff!important;
  font-size:clamp(52px,7vw,88px)!important;
  letter-spacing:-.065em!important;
  text-shadow:0 12px 44px rgba(0,0,0,.18);
}
.hero h1::after{
  content:'tu negocio. Para autónomos y PYMES';
  color:#23b8ff;
  background:linear-gradient(90deg,#38bdf8,#0ea5ff,#22d3ee);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h1{font-size:0!important;}
.hero h1::before{
  content:'Optimiza y rentabiliza';
  display:block;
  font-size:clamp(52px,7vw,88px)!important;
  color:#fff;
  line-height:.98;
}
.hero h1::after{
  display:block;
  font-size:clamp(52px,7vw,88px)!important;
  line-height:.98;
}
.hero p{color:rgba(255,255,255,.88)!important;}
.hero-actions .btn-ghost{color:#fff!important;}
/* Secciones */
.section{background:#f8fbff;}
.section:nth-of-type(even){background:#eef7ff;}
.section-head h2,
.split-copy h2,
.cta-card h2{color:#081426!important;}
.section-head p,.split-copy p{color:#526274!important;}
/* Cards */
.service-card,
.use-grid article,
.steps article,
.trust-grid div,
.modal-panel,
.cta-card{
  border-color:rgba(37,99,235,.12)!important;
  box-shadow:0 20px 58px rgba(8,35,78,.10)!important;
}
.service-card{background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%)!important;}
.service-card h3,.use-grid h3,.steps h3{color:#0b1930!important;}
.service-card:hover,.use-grid article:hover,.steps article:hover{
  border-color:rgba(14,165,233,.32)!important;
  box-shadow:0 28px 70px rgba(14,116,255,.16)!important;
}
.service-card img,.use-grid img,.split-media img{filter:none!important;}
.tag{
  color:#0369a1!important;
  background:#e0f2fe!important;
  border-color:#bae6fd!important;
}
.trust-grid{
  background:linear-gradient(135deg,#061027,#08204a)!important;
  border:1px solid rgba(56,189,248,.18)!important;
  box-shadow:0 22px 62px rgba(0,30,95,.22)!important;
}
.trust-grid div{background:transparent!important;}
.trust-grid strong{color:#38bdf8!important;}
.trust-grid span{color:rgba(255,255,255,.78)!important;}
/* Metodología/process */
.steps article{
  background:linear-gradient(180deg,#ffffff 0%,#f5faff 100%)!important;
}
.steps span,
.step-number{
  background:linear-gradient(135deg,#0b7bff,#22d3ee)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(0,132,255,.22);
}
/* CTA */
.cta-section{
  background:
    radial-gradient(circle at 18% 20%,rgba(34,211,238,.22),transparent 32%),
    linear-gradient(135deg,#061027,#082a63)!important;
}
.cta-card{
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;
  border-color:rgba(56,189,248,.22)!important;
  color:#fff!important;
}
.cta-card h2,.cta-card p{color:#fff!important;}
/* Footer */
.site-footer{
  background:
    radial-gradient(circle at 80% 12%,rgba(0,168,255,.18),transparent 32%),
    linear-gradient(180deg,#061027 0%,#020817 100%)!important;
  color:#dbeafe!important;
  border-top:1px solid rgba(56,189,248,.18);
}
.site-footer a{color:#dbeafe!important;}
.site-footer a:hover{color:#38bdf8!important;}
.footer-logo{width:210px!important;}
.site-footer .footer-social a,
.site-footer .social-links a{
  background:rgba(14,165,233,.08)!important;
  border-color:rgba(56,189,248,.42)!important;
  color:#fff!important;
}
.site-footer .footer-social a:hover,
.site-footer .social-links a:hover{
  background:#0ea5ff!important;
  border-color:#22d3ee!important;
}
.site-footer .footer-social svg,.site-footer .social-links svg{fill:#fff!important;color:#fff!important;}
/* Diagnóstico modal: tech blue */
.modal-backdrop{
  background:rgba(2,8,23,.72)!important;
  backdrop-filter:blur(8px)!important;
}
.modal-header{
  background:
    radial-gradient(circle at 86% 40%,rgba(0,168,255,.28),transparent 22%),
    linear-gradient(135deg,#061027,#0b2044 70%,#003e78)!important;
}
.modal-icon{
  background:rgba(14,165,233,.12)!important;
  border:1px solid rgba(56,189,248,.34)!important;
  color:#7dd3fc!important;
}
.progress span{background:linear-gradient(90deg,#0b7bff,#00a8ff,#22d3ee)!important;}
.wizard-form input:focus,.wizard-form select:focus,.wizard-form textarea:focus{
  border-color:#0ea5ff!important;
  box-shadow:0 0 0 4px rgba(14,165,255,.14)!important;
}
.summary-box{background:#eff6ff!important;border-color:#bfdbfe!important;}
/* Cookies */
#cookiesModal.small-modal .modal-close:hover{background:#eff6ff!important;color:#0b7bff!important;}
@media (max-width:980px){
  .main-nav{background:#061027!important;border-bottom-color:rgba(56,189,248,.18)!important;}
  .hero-overlay{background:linear-gradient(180deg,rgba(6,16,39,.95) 0%,rgba(6,16,39,.84) 72%,rgba(6,16,39,.60) 100%)!important;}
}


/* ============================================================
   Fase 9.9.1 — ajustes finales identidad azul tecnológica
   ============================================================ */
.brand-logo{width:210px!important;max-height:58px;object-fit:contain;}
.footer-logo{width:230px!important;max-height:74px;object-fit:contain;}
.site-header .brand{display:flex;align-items:center;}
.site-header{background:rgba(3,10,28,.94)!important;}
.hero-slider{background:linear-gradient(135deg,#061027 0%,#071a3a 48%,#002b66 100%)!important;}
.slide img{filter:saturate(1.02) contrast(1.02) brightness(.74)!important;opacity:.42!important;}
.service-card img,.use-grid img,.split-media img{filter:none!important;}
.section:not(.section-dark) .check-list span,
.section:not(.section-dark) .split-copy p,
.section:not(.section-dark) p,
.soft-bg p{color:#405166!important;}
.section:not(.section-dark) .check-list span{font-weight:650;}
.section-dark .check-list span{color:#dbeafe!important;}
.check-list span:before{background:linear-gradient(135deg,#0b7bff,#22d3ee)!important;}
.site-footer .footer-social a:hover,
.site-footer .social-links a:hover,
.site-footer .footer-social.social-links a:hover,
.site-footer a:hover{color:#ffffff!important;}
.site-footer .footer-social a:hover,
.site-footer .social-links a:hover,
.site-footer .footer-social.social-links a:hover{
  background:rgba(14,165,255,.92)!important;
  border-color:rgba(34,211,238,.95)!important;
  box-shadow:0 0 0 4px rgba(14,165,255,.12)!important;
}
.site-footer .footer-social svg,
.site-footer .social-links svg{fill:#fff!important;color:#fff!important;}
#cookiesModal.small-modal .modal-close:hover{background:#eff6ff!important;color:#0b7bff!important;}
@media (max-width:620px){.brand-logo{width:170px!important}.footer-logo{width:200px!important}}


/* Fase 9.9.3: identidad azul revisada y contraste */
:root{
  --green:#0B7BFF!important;
  --green-2:#22D3EE!important;
  --green-soft:#EAF5FF!important;
  --black:#061027!important;
  --muted:#334155!important;
  --line:#DBEAFE!important;
  --soft:#EAF5FF!important;
}
.site-header{background:rgba(6,16,39,.92)!important;border-bottom:1px solid rgba(56,189,248,.18)!important;box-shadow:0 14px 36px rgba(2,6,23,.18)!important;}
.brand-logo{width:210px!important;max-height:58px!important;object-fit:contain!important;}
.footer-logo{width:245px!important;max-height:74px!important;object-fit:contain!important;}
.main-nav a{color:#EAF5FF!important}.main-nav a:hover{color:#38BDF8!important}.nav-toggle span{background:#fff!important}
.btn-primary{background:linear-gradient(135deg,#0B7BFF,#22D3EE)!important;color:#fff!important;box-shadow:0 14px 34px rgba(11,123,255,.28)!important;}
.btn-primary:hover{box-shadow:0 18px 42px rgba(11,123,255,.38)!important;}
.btn-ghost:hover{border-color:#0B7BFF!important;color:#0B7BFF!important;}
.eyebrow,.tag{color:#0B7BFF!important;}
.soft-bg{background:#EAF5FF!important;}
.section.soft-bg p,.soft-bg p,.split-copy p,.section-head p{color:#334155!important;}
.check-list span{color:#1E293B!important;opacity:1!important;}
.check-list span:before{background:linear-gradient(135deg,#0B7BFF,#22D3EE)!important;color:#fff!important;}
.section-dark .check-list span{color:#D8E8FF!important;}
.section-dark{background:#061027!important;}
.cta-card{background:linear-gradient(135deg,#061027,#0B2B62)!important;}
.site-footer{background:#061027!important;color:#D8E8FF!important;}
.site-footer a:hover{color:#38BDF8!important;}
.footer-socials a,.social-links a{color:#fff!important;border-color:rgba(56,189,248,.38)!important;background:rgba(11,123,255,.10)!important;}
.footer-socials a:hover,.social-links a:hover{color:#fff!important;background:rgba(11,123,255,.28)!important;border-color:#38BDF8!important;box-shadow:0 0 0 3px rgba(56,189,248,.16)!important;}
.footer-socials svg,.social-links svg{fill:#fff!important;color:#fff!important;}
.cookies{border-color:#BFDBFE!important}.cookies .btn-primary{background:linear-gradient(135deg,#0B7BFF,#22D3EE)!important}.cookies .btn-ghost:hover{color:#0B7BFF!important;border-color:#0B7BFF!important;}
#cookiesModal .modal-panel,#cookiesModal .modal-panel.compact{padding:70px 36px 34px!important;}
#cookiesModal .modal-close{top:20px!important;right:20px!important;left:auto!important;}


/* v9.9.6 public transparent light logo */
.site-header .brand-logo,
.site-footer .footer-logo{filter:none !important; background:transparent !important; box-shadow:none !important;}
.site-header .brand-logo{width:230px !important; max-height:68px !important; object-fit:contain !important;}
.site-footer .footer-logo{width:255px !important; max-height:78px !important; object-fit:contain !important; padding:0 !important; border-radius:0 !important;}
.site-footer .footer-logo{background:transparent !important;}
.site-footer .brand, .site-footer .footer-brand{background:transparent !important;}
.site-footer .footer-logo-wrap{background:transparent !important;}
.site-footer img.footer-logo{background:transparent !important;}
.site-footer .footer-logo-box{background:transparent !important; border:0 !important;}


/* v9.9.7: ajuste separación titular hero */
.hero h1{
  line-height:1.08 !important;
  margin-bottom:34px !important;
  padding-bottom:2px !important;
}
.hero p{
  margin-top:0 !important;
}
.hero-copy{
  max-width:680px !important;
}
@media (max-width:720px){
  .hero h1{
    line-height:1.12 !important;
    margin-bottom:28px !important;
  }
}


/* v9.9.8: evita recorte del descendente en "negocio" del hero */
.hero h1{margin-bottom:42px !important;}
.hero h1::before{line-height:1.02 !important; margin-bottom:0.02em !important;}
.hero h1::after{line-height:1.06 !important; padding-bottom:0.10em !important; margin-top:0.02em !important;}
.hero p{margin-top:6px !important;}
@media (max-width: 720px){
  .hero h1{margin-bottom:34px !important;}
  .hero h1::before{line-height:1.04 !important;}
  .hero h1::after{line-height:1.08 !important; padding-bottom:0.12em !important;}
}


/* Fase 10.1.1: formulario azul y diagnóstico de día a día */
.option-grid .option-card,
.daily-option-grid .option-card,
.diagnosis-choice-grid label{
  border-color:#D7E8FA !important;
  background:#ffffff !important;
}

.option-grid .option-card:hover,
.daily-option-grid .option-card:hover,
.diagnosis-choice-grid label:hover{
  border-color:#8CCBFF !important;
  background:#F0F8FF !important;
}

.option-grid .option-card:has(input:checked),
.daily-option-grid .option-card:has(input:checked),
.diagnosis-choice-grid label:has(input:checked){
  border-color:#0B7BFF !important;
  background:#EAF5FF !important;
  box-shadow:0 0 0 4px rgba(11,123,255,.12) !important;
}

.option-grid .option-card input[type="checkbox"],
.daily-option-grid .option-card input[type="checkbox"],
.diagnosis-choice-grid input[type="checkbox"],
.wizard-form input[type="checkbox"]{
  accent-color:#0B7BFF !important;
}

.daily-diagnostic-card{
  border-color:#D7E8FA !important;
  background:linear-gradient(180deg,#ffffff,#F8FBFF) !important;
}

.field-label{
  margin:20px 0 8px;
  font-weight:900;
  color:#061027 !important;
}

.smart-card-head span{
  background:#EAF5FF !important;
  color:#0B7BFF !important;
}

.smart-card-head strong{
  color:#061027 !important;
}


/* Fase 11.3.1: coletilla del hero más discreta */
.hero .hero-tagline{
  margin:10px 0 18px;
  max-width:760px;
  color:#8EDBFF;
  font-size:clamp(1.25rem, 2.3vw, 2.35rem);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.02em;
}
.hero .hero-copy h1{
  margin-bottom:0;
}
@media(max-width:720px){
  .hero .hero-tagline{
    font-size:clamp(1.05rem, 6vw, 1.65rem);
    margin-top:8px;
  }
}


/* Fase 11.3.2: tarjetas de servicios sin párrafo introductorio */
.service-card h3 + ul{
  margin-top:18px;
}


/* Fase 11.3.3: eliminar coletilla duplicada del H1 */
.hero h1::before{
  content:'Optimiza y rentabiliza' !important;
}
.hero h1::after{
  content:'tu negocio.' !important;
}
.hero .hero-tagline{
  color:#FFFFFF !important;
  font-size:clamp(1.15rem, 1.9vw, 2rem) !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  margin:8px 0 18px !important;
  text-shadow:0 8px 24px rgba(0,0,0,.22);
}
