:root{
  --brand:#082b5c; --brand-2:#0f4c81;
  --accent:#f39c12; --accent-dark:#d68910;
  --muted:#6b7280; --bg:#f4f8fb; --white:#fff;
  --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1f2937;background:var(--bg);line-height:1.55}

.container{width:min(1120px,92vw);margin-inline:auto}
.section{padding:72px 0}
.section.alt{background:var(--white)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.small{font-size:.9rem}.muted{color:var(--muted)}

.btn{display:inline-block;padding:14px 24px;border-radius:12px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;transition:transform .06s ease,filter .2s ease;box-shadow:var(--shadow);cursor:pointer;border:none;font-size:1rem}
.btn:hover{filter:brightness(.95)} .btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85);box-shadow:none}
.btn--small{padding:10px 16px;border-radius:10px}

.site-header{position:sticky;top:0;z-index:5;background:var(--brand);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px}
.logo{width:28px;height:28px}
.main-nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:600;opacity:.95}
.main-nav a:hover{opacity:1}

/* Hero con AVIF + fallback WebP y overlay suavizado */
.hero{
  position:relative;min-height:64vh;display:flex;align-items:center;color:#fff;
  background:
    linear-gradient(to bottom, rgba(40,40,40,.28), rgba(20,20,20,.58)),
    -webkit-image-set(url('img/hero-panel.avif') type('image/avif'),
                      url('img/hero-panel.webp') type('image/webp'));
  background-image:
    linear-gradient(to bottom, rgba(40,40,40,.28), rgba(20,20,20,.58)),
    image-set(url('img/hero-panel.avif') type('image/avif'),
              url('img/hero-panel.webp') type('image/webp'));
  background-repeat:no-repeat, no-repeat;
  background-size:cover, cover;
  background-position:center, center;
  background-blend-mode:multiply, normal;
}
@media (max-width:640px){
  .hero{
    background:
      linear-gradient(to bottom, rgba(40,40,40,.30), rgba(20,20,20,.60)),
      -webkit-image-set(url('img/hero-panel-mobile.avif') type('image/avif'),
                        url('img/hero-panel-mobile.webp') type('image/webp'));
    background-image:
      linear-gradient(to bottom, rgba(40,40,40,.30), rgba(20,20,20,.60)),
      image-set(url('img/hero-panel-mobile.avif') type('image/avif'),
                url('img/hero-panel-mobile.webp') type('image/webp'));
    background-repeat:no-repeat, no-repeat;
    background-size:cover, cover;
    background-position:center 30%, center 30%;
    background-blend-mode:multiply, normal;
  }
}
.hero__overlay{position:absolute;inset:0}
.hero__content{position:relative;z-index:1;text-align:center;padding:64px 0}
.hero h1{font-size:clamp(2.2rem,4vw + 1rem,3.2rem);margin:0 0 12px}
.hero p{margin:0 0 24px;font-size:1.15rem;opacity:.97}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* NEW: bloque de confianza con teléfono integrado */
.trust{
  margin-top:18px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  font-size:1rem;
  color:#fff;
  opacity:.95;
  line-height:1.4;
}
.trust span{display:flex;align-items:center;gap:6px;}

/* NEW: estilo teléfono */
.trust-phone{
  font-weight:700;
  display:flex;
  align-items:center;
  gap:4px;
}
.phone-emoji{
  font-size:1rem;
  line-height:1;
}
.trust-phone-link{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}
.trust-phone-link:hover{
  text-decoration:underline;
}

.contact-revealed{margin-top:10px;font-weight:700}

/* Métricas */
.stats-banner{background:#1751e6;color:#fff;border-radius:28px;padding:28px;text-align:center;box-shadow:var(--shadow)}
.stats-banner h2{margin:0 0 6px;font-size:clamp(1.4rem,2vw + .8rem,2rem)}
.stats-banner h2 span{color:#73ffb2}
.stats-banner p{margin:0 0 18px;opacity:.95}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stats-grid div{background:rgba(255,255,255,.08);border-radius:16px;padding:16px}
.stats-grid strong{display:block;font-size:1.6rem}
.stats-grid span{opacity:.9}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--white);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card h3{margin-top:0;color:var(--brand-2)}

.testimonials{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.testimonials{grid-template-columns:1fr}}
.testimonial{background:#fff;border-radius:18px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;padding:14px}
.testimonial img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.t-text{margin:0 0 6px}
.t-name{margin:0;color:var(--muted);font-weight:700}

.steps h2{margin-top:0;color:var(--brand)}
.steps ol{counter-reset:step;list-style:none;padding:0;margin:18px 0 0}
.steps li{position:relative;padding-left:52px;margin:16px 0;background:#fff;border-radius:12px;padding:18px 18px 18px 52px;box-shadow:var(--shadow)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}

/* ===== Modal + Wizard ===== */
.modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);align-items:center;justify-content:center;padding:16px}
.modal[aria-hidden="false"]{display:flex}
.modal-content{
  background:#fff;
  width:min(760px,96vw);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  position:relative;
  overflow:auto;
  max-height:92vh;
  -webkit-overflow-scrolling:touch;
}
.close{position:absolute;top:10px;right:14px;width:40px;height:40px;border:none;background:#eef2f7;border-radius:50%;font-size:22px;cursor:pointer}

.wizard-header{padding:22px 22px 10px;border-bottom:1px solid #eef1f5}
.step-index{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;margin:0}
.wizard-title{margin:.4rem 0 .25rem;font-size:clamp(1.1rem,1.2vw + .8rem,1.5rem);line-height:1.25}
.step-sub{color:#374151;margin:0 0 12px;font-size:1.075rem}
.step-sub--big{font-size:1.22rem}

.step{display:none;padding:20px 22px 22px;animation:.25s ease fade-in}
.step--active{display:block}
@keyframes fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.step--leaving{animation:move-up .22s ease forwards}
@keyframes move-up{to{opacity:.3;transform:translateY(-12px)}}

/* Radios/card clicables */
.opt, .opt-card{position:relative}
.opt input,
.opt-card input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.opt-ui, .card-ui{cursor:pointer}

.options{display:grid;gap:14px;margin:14px 0 20px}
.opt-ui{display:flex;align-items:center;gap:12px;border:2px solid #e5e7eb;background:#fff;border-radius:22px;padding:16px 20px;font-weight:700;font-size:1.12rem}
.opt-ui b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#111827;color:#fff;font-weight:800}
.opt input:checked + .opt-ui{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(15,76,129,.12)}

.hint{color:#4b5563;margin:4px 0 10px}

.cards{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.cards{grid-template-columns:repeat(3,1fr)}}

.card-ui{
  display:grid;
  grid-template-rows:auto 1fr;
  place-items:center;
  text-align:center;
  background:#f7f8fb;
  border:2px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
  min-height:170px;
  font-weight:700;
  gap:10px
}
.card-ui img{max-width:170px;max-height:110px;object-fit:contain}
.card-ui em{font-style:normal}
.opt-card input:checked + .card-ui{
  border-color:var(--brand-2);
  box-shadow:0 0 0 4px rgba(15,76,129,.12)
}

.error{color:#c0392b;font-weight:700;margin:0 22px 14px}
.progress{height:8px;background:#eef2f6}
.bar{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.final-fields{display:grid;gap:12px}
.field label{display:block;margin-bottom:6px;font-weight:700}
.field input{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;font:inherit}
.field input:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(15,76,129,.12)}

/* Botón "Aceptar" siempre accesible en móvil */
@media (max-width:640px){
  .step{padding-bottom:72px}
  .step .btn.next{
    position:sticky;
    bottom:0;
    width:100%;
    z-index:3;
  }
}

/* Overlay de carga */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-box {
  text-align: center;
  max-width: 600px;
  padding: 20px;
}

.loading-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 24px;
}

.logo-strip {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.logo-strip img {
  max-height: 50px;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.85;
  animation: float 2.5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top: 4px solid var(--brand);
  border-radius: 50%;
  margin: 0 auto;
  animation: spin 1s linear infinite;
}

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

/* Evitar scroll de fondo cuando overlay activo */
.no-scroll {
  overflow: hidden;
}

/* Footer */
.site-footer{
  background: var(--brand);
  color:#d9e6f7;
  margin-top: 40px;
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.site-footer::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:8px;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), transparent);
  pointer-events:none;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 26px 0 28px;
  text-align:center;
}
.footer-inner p{ margin:0; }

.footer-brand{
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
}

.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.footer-links .sep{
  color: rgba(255,255,255,.35);
}

.footer-links a{
  color:#e7f0ff;
  text-decoration:none;
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  transition: transform .06s ease, background .2s ease, color .2s ease;
  line-height:1;
  display:inline-block;
}
.footer-links a:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

@media (max-width:640px){
  .footer-inner{ padding:22px 0; }
  .footer-links{ gap:8px; }
  .footer-links a{ padding:8px 12px; }
}

/* Página de gracias (si la usas) */
.ty-bg{
  background: var(--bg);
  color:#111827;
}

.ty-wrap{
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 32px 16px;
  gap: 18px;
}

.ty-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--brand);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  opacity:.95;
}
.ty-brand:hover{ opacity: 1; }

.ty-card{
  width:min(680px, 96vw);
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  padding: 28px 24px;
  text-align:center;
}

.ty-icon{
  width:56px; height:56px;
  border-radius:50%;
  display:grid; place-items:center;
  margin: 4px auto 10px;
  background: #e9f6ee;
  color: #1b8f4d;
  font-weight: 900;
  font-size: 28px;
}

.ty-card h1{
  margin: 2px 0 6px;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  color: #111827;
}

.ty-lead{
  margin: 0 0 16px;
  color:#374151;
}

.ty-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
  margin: 8px 0 10px;
}
.btn--outline{
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
  box-shadow: none;
}
.btn--outline:hover{ filter: none; background: rgba(8,43,92,.06); }

.ty-note{
  font-size: .95rem;
  color:#4b5563;
  margin: 6px 0 2px;
}

.ty-back{
  display:inline-block;
  margin-top: 8px;
  color: var(--brand-2);
  text-decoration:none;
  font-weight:700;
}
.ty-back:hover{ text-decoration: underline; }

.ty-footer{
  color:#6b7280;
  font-size:.95rem;
  text-align:center;
}

/* ===== HERO doble botón: Solicitar comparativa + Llamar ahora ===== */
.hero__cta--stack {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.btn--ghost.btn--call {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn--ghost.btn--call:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
}

.call-emoji {
  line-height: 1;
  font-size: 1rem;
}

/* Línea de confianza sin el teléfono */
.trust--no-phone {
  margin-top: 16px;
}