@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

*{ box-sizing:border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; background:#f4f6f9; font-family: 'Inter', sans-serif; }
.wrap{ max-width:520px; margin:18px auto; padding:12px; }
.card{ background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); }

.step.hidden{ display:none; }
h2{ margin:10px 0 10px; font-size:20px; }
.note{ margin:0 0 10px; font-size:12px; opacity:.75; }

.bar{ display:flex; gap:8px; font-size:11px; margin-bottom:10px; }
.bar span{ opacity:.45; }
.bar .active{ opacity:1; font-weight:800; }
.bar .done{ opacity:.9; }

.lbl{ display:block; margin:10px 0 6px; font-size:12px; opacity:.75; }
select, input{
  width:100%; padding:14px 12px; border:1px solid #d8dbe2; border-radius:10px;
  font-size:14px; outline:none; margin-bottom:8px; background:#fff;
}
.chk{ display:flex; gap:10px; align-items:center; font-size:12px; margin:8px 0 12px; opacity:.8; }
.chk input{ width:auto; margin:0; }

.err{ color:#c00; font-size:12px; display:block; min-height:16px; margin:-4px 0 6px; }

.row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; }
.btn{ cursor:pointer; border-radius:10px; padding:12px 14px; font-weight:800; border:1px solid #d8dbe2; background:#fff; }
.btn.primary{ background:#1e63d5; border-color:#0f4fb8; color:#fff; flex:1; }
.btn.link{ background:transparent; border:none; color:#1e63d5; padding:10px 0; }

.grupo{ border:1px solid #ececec; border-radius:12px; padding:10px; margin:12px 0; }
.grupo h3{ text-align:center; font-size:13px; margin:6px 0 10px; font-weight:900; }
.cardop{ border:1px solid #efefef; border-radius:12px; padding:10px; }
.top{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.precio{ font-size:18px; font-weight:900; }
.mini{ font-size:12px; opacity:.8; margin:8px 0; }
.cardop .btn{ width:100%; margin-top:8px; }
.btn.sec{ background:#f2f5ff; border-color:#d6def9; color:#1e63d5; }

.detalle-header{ background:#0d3f86; border-radius:12px; padding:16px; text-align:center; }
.logo{ color:#fff; font-weight:900; letter-spacing:.5px; }
.det_titulo{ text-align:center; margin:14px 0 10px; font-weight:900; }
.det_box{ background:#f3f5f8; border-radius:12px; padding:12px; margin:0 0 10px; text-align:center; }
.lista{ padding-left:22px; font-size:13px; }
.lista li{ margin:7px 0; }
.lista li::marker{ content:"✅ "; }
.btn.whats{ display:block; text-align:center; text-decoration:none; background:#f5fbf7; border-color:#dfe7df; color:#1d6f42; }

/* Form fields */
.field { margin-top: 10px; }
.hidden { display: none !important; }

/* Mejor look inputs/select */
select, input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid #d8dbe2;
  outline: none;
  font-size: 15px;
  background: #fff;
}

select:disabled {
  opacity: .6;
}

.hidden{ display:none !important; }

/* ===== Look premium general ===== */
body{
background: linear-gradient(135deg,#eef2ff,#f8fafc);
min-height:100vh;
}

.wrap{
  padding: 22px 12px;
}

.card{
max-width:520px;
margin:0 auto;

background:#ffffff;

border-radius:20px;

box-shadow:
0 20px 60px rgba(15,23,42,.10),
0 2px 6px rgba(15,23,42,.05);

padding:22px;
}

.trust{
font-size:13px;
color:#64748b;
margin-bottom:14px;
background:#f8fafc;
padding:10px 12px;
border-radius:10px;
border:1px solid #e2e8f0;
}
/* ===== Header pro (logo + redes) ===== */
.tophead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 2px 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  height: 60px;
  width: auto;
  display:block;
}

.social{
  display:flex;
  gap:8px;
}

.social-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  border-radius:10px;

  background:#ffffff;
  border:1px solid #e8edf6;

  box-shadow:0 6px 16px rgba(0,0,0,.06);

  transition:.2s;
}

.social-btn svg{
  width:18px;
  height:18px;
  fill:#1e63d5;
}

.social-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

/* ===== Steps estilo wizard ===== */
.steps{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f7f9ff;
  border: 1px solid #e7ecff;
  margin-bottom: 14px;
}

.stepi{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}

.stepi .dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  background:#fff;
  border: 1px solid #dbe3f5;
  color:#334155;
}

.stepi .txt{
  font-size: 12px;
  font-weight: 800;
  color:#475569;
  white-space:nowrap;
}

.line{
  flex:1;
  height: 2px;
  background: #dbe3f5;
  border-radius: 999px;
}

.stepi.active .dot{
  background:#1e63d5;
  border-color:#0f4fb8;
  color:#fff;
}
.stepi.active .txt{
  color:#0f172a;
}

.stepi.done .dot{
  background:#eaf2ff;
  border-color:#cfe0ff;
  color:#1e63d5;
}
.line.done{
  background:#1e63d5;
}



.note-pro{
  margin-top: 10px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.impact-box{
  margin: 18px 0;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef4ff, #f8fbff);
  border: 1px solid #dbe7ff;
}

.impact-badge{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #2f6bff;
  background: #e9f1ff;
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.impact-box h3{
  font-size: 18px;
  margin: 0 0 8px;
}

.impact-box p{
  margin: 0;
  font-size: 14px;
  color: #667085;
}

.companias-preview{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.compania-item{
  background: #fff;
  border: 1px solid #e8eaf3;
  border-radius: 14px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.05);
}

.compania-item img{
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

.compania-item-fallback{
  font-size: 13px;
  font-weight: 700;
  color: #344054;
  text-align: center;
}

.box-confianza{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #e8eaf3;
  border-radius: 14px;
  background: #f8fbff;
}

.box-confianza-icon{
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #2f6bff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.companias-preview{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.compania-item{
  background: #fff;
  border: 1px solid #e8eaf3;
  border-radius: 14px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.compania-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(20, 33, 61, 0.12);
  border-color: #d7def0;
}
#step-3{
  animation: fadeUp .45s ease;
}

@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}



/* ===== Inputs más pro ===== */
.lbl{
  font-size: 12px;
  font-weight: 800;
  color:#0f172a;
  margin: 10px 0 6px;
  display:block;
}

select, input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid #dbe3f5;
  background:#fff;
  outline:none;
  font-size: 15px;
}

select:focus, input:focus{
  border-color:#1e63d5;
  box-shadow: 0 0 0 4px rgba(30, 99, 213, .12);
}

.chk{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 0 4px;
  font-weight: 800;
  color:#0f172a;
}

.note{
  background:#f8fafc;
  border: 1px solid #e8edf6;
  padding: 10px 12px;
  border-radius: 12px;
  color:#0f172a;
}

/* ===== Botones ===== */
.btn{
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
}

.btn.primary{

background:linear-gradient(135deg,#2563eb,#1d4ed8);

border:none;

box-shadow:
0 10px 24px rgba(37,99,235,.35);

transition:.2s;

}

.btn.primary:hover{
transform:translateY(-2px);
box-shadow:
0 16px 36px rgba(37,99,235,.35);
}

.btn.link{
  background: transparent;
  border: none;
  color:#1e63d5;
  font-weight: 900;
}
.field{
animation:fadein .35s ease;
}

@keyframes fadein{
from{
opacity:0;
transform:translateY(6px);
}
to{
opacity:1;
transform:translateY(0);
}
}


.sub{
color:#475569;
font-size:14px;
margin-bottom:12px;
}

/* ===== HERO (título pro) ===== */
.hero{
  margin: 8px 0 14px;
}
.hero h1{
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  color:#0f172a;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.hero p{
  margin: 6px 0 0;
  font-size: 14px;
  color:#64748b;
  line-height: 1.35;
}

/* ===== STEPPER: arreglos de tamaño ===== */
.stepi .dot{
  width: 32px;
  height: 32px;
  min-width: 32px;  /* 👈 clave para que no se achique */
  min-height: 32px;
  font-size: 13px;
}

/* evita que el texto empuje todo y achique los dots */
.stepi .txt{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Mobile tuning ===== */
@media (max-width: 420px){
  .card{
    padding: 18px;
  }

  .hero h1{
    font-size: 20px;
  }

  .steps{
    padding: 10px 10px;
    gap: 8px;
  }

  .stepi{
    gap: 6px;
  }

  .stepi .dot{
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 13px;
  }

  .stepi .txt{
    font-size: 11px;
  }

  .line{
    height: 2px;
  }
}

/* ===== RESULTADOS PRO (Step 3) ===== */
#resultados{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.grupo2{
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e8edf6;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.grupo2-head{
  background:#2a66d9;
  color:#fff;
  font-weight:950;
  text-align:center;
  padding:10px 12px;
  letter-spacing:.02em;
  font-size:12px;
}

.grupo2-body{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.op2{
  border:1px solid #eef2ff;
  border-radius:14px;
  padding:10px;
  background:#fff;
}

.op2-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.op2-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.op2-logo{
  width:44px;
  height:24px;
  object-fit:contain;
  border-radius:6px;
  background:#fff;
}

.op2-logo-fallback{
  width:44px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid #e8edf6;
  font-weight:900;
  font-size:12px;
  color:#1e63d5;
  background:#f8fafc;
}

.op2-info{ min-width:0; }
.op2-aseg{
  font-weight:950;
  font-size:13px;
  color:#0f172a;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.op2-plan{
  font-size:12px;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.op2-right{
  text-align:right;
  white-space:nowrap;
}
.op2-precio{
  font-weight:950;
  font-size:15px;
  color:#0f172a;
}
.op2-suma{
  font-size:11px;
  color:#64748b;
}

.op2-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.op2-btn{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
}

/* ===== Modal ===== */
.modal.hidden{ display:none !important; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
}

.modal-card{
  position: relative;
  width: min(520px, calc(100% - 26px));
  margin: 14vh auto 0;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e8edf6;
  box-shadow: 0 30px 80px rgba(15,23,42,.25);
  padding: 18px 16px;
}

.modal-x{
  position:absolute;
  top:10px;
  right:12px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #e8edf6;
  background:#fff;
  font-size: 20px;
  cursor:pointer;
}

.modal-title{
  margin: 6px 0 10px;
  font-weight: 950;
  color:#0f172a;
}

.modal-text{
  margin: 0 0 10px;
  color:#475569;
  line-height: 1.35;
}

.modal-btn{
  display:flex;
  justify-content:center;
  margin-top: 10px;
  padding: 12px 14px;
}

/* Asegura hidden global */
.hidden{ display:none !important; }


h1, h2, h3 {
  font-weight: 600;
}

p {
  font-weight: 400;
  color: #555;
}

label {
  font-weight: 500;
}