/* =============================================================================
   1000 Seguros — Landing accidentes personales por barrio
   Mobile-first. Pensada para alguien parado en la entrada del barrio,
   con el celular en una mano y señal regular.
   Paleta tomada de 1000seguros.com
   ========================================================================== */

:root{
  --azul:#0A468E;
  --azul-osc:#083766;
  --celeste:#3698D4;
  --celeste-claro:#C7E1F7;
  --texto:#1c2733;
  --texto-sec:#667;
  --linea:#dfe6ee;
  --fondo:#f4f7fa;
  --blanco:#fff;
  --ok:#1e9e63;
  --error:#c9372c;
  --radio:14px;
  --cta-h:104px;
}

*{box-sizing:border-box}

/* Visible sólo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--texto);
  background:var(--fondo);
  font-size:16px;
  line-height:1.5;
  padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom));
}

/* --- Topbar ------------------------------------------------------------- */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px;
  padding-top:calc(14px + env(safe-area-inset-top));
  background:var(--azul);
}
.topbar__logo{height:26px;width:auto;display:block}
.topbar__tag{
  color:rgba(255,255,255,.85);
  font-size:12px; font-weight:500; letter-spacing:.02em;
  border-left:1px solid rgba(255,255,255,.3);
  padding-left:12px;
}

/* --- Progreso ----------------------------------------------------------- */
.progress{background:var(--azul);padding:0 20px 16px}
.progress__list{
  display:flex; gap:6px; margin:0; padding:0; list-style:none;
  counter-reset:paso;
}
.progress__step{
  flex:1; position:relative;
  font-size:11px; font-weight:500;
  color:rgba(255,255,255,.5);
  padding-top:12px;
}
.progress__step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:2px; background:rgba(255,255,255,.2);
  transition:background .3s;
}
.progress__step.is-active::before,
.progress__step.is-done::before{background:var(--celeste)}
.progress__step.is-active{color:#fff}
.progress__step.is-done{color:rgba(255,255,255,.75)}

/* --- Layout ------------------------------------------------------------- */
.wrap{max-width:520px;margin:0 auto;padding:24px 20px 8px}

.step{animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .step{animation:none}
  *{transition:none !important}
}

/* --- Hero --------------------------------------------------------------- */
.hero{margin-bottom:28px}

/* Foto de la entrada del barrio: quien escanea el QR está parado ahí, así que
   reconoce el lugar al instante y confirma que la landing es la correcta. */
.hero__foto{
  position:relative; margin-bottom:18px;
  border-radius:18px; overflow:hidden;
  aspect-ratio:3/2; background:var(--celeste-claro);
}
.hero__foto > img:first-child{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,55,102,0) 35%,rgba(8,55,102,.78) 100%);
}
.hero__marca{
  position:absolute; z-index:2; left:20px; bottom:18px;
  width:auto; height:38px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.hero__lead{margin:0 0 6px;font-size:16px;color:var(--texto)}
.hero__sub{margin:0;font-size:14px;color:var(--texto-sec)}

.section-title{
  margin:0 0 4px; font-size:24px; font-weight:700; color:var(--azul);
  letter-spacing:-.01em;
}
.section-lead{margin:0 0 24px;font-size:14px;color:var(--texto-sec)}

/* --- Campos ------------------------------------------------------------- */
.field{margin:0 0 22px;border:0;padding:0}
.field__label{
  display:block; margin-bottom:8px;
  font-size:15px; font-weight:600; color:var(--texto);
}
.field__opt{font-weight:400;color:var(--texto-sec)}
.field__input{
  width:100%;
  /* 16px mínimo: abajo de eso iOS hace zoom al enfocar */
  font:inherit; font-size:16px;
  padding:14px 16px; min-height:52px;
  border:1.5px solid var(--linea); border-radius:var(--radio);
  background:var(--blanco); color:var(--texto);
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.field__input:focus{
  outline:none; border-color:var(--celeste);
  box-shadow:0 0 0 3px rgba(54,152,212,.18);
}
.field__input.is-invalid{border-color:var(--error)}
.field__hint{margin:8px 0 0;font-size:13px;color:var(--texto-sec)}
.field__error{margin:8px 0 0;font-size:13px;font-weight:500;color:var(--error)}

/* El control nativo de fecha trae un ancho mínimo propio que desborda la
   columna en pantallas de 375px. Lo dejamos encogerse y le sacamos padding. */
input[type="date"]{min-width:0;padding-left:12px;padding-right:10px}

/* --- Combobox de actividad ---------------------------------------------- */
.combo{position:relative}
.combo__input{padding-right:44px}
.combo__clear{
  position:absolute; right:6px; top:6px;
  width:40px; height:40px;
  border:0; background:none; cursor:pointer;
  font-size:24px; line-height:1; color:var(--texto-sec);
}
.combo__list{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px; list-style:none;
  max-height:280px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--blanco);
  border:1.5px solid var(--linea); border-radius:var(--radio);
  box-shadow:0 12px 32px rgba(10,70,142,.14);
}
.combo__opt{
  padding:13px 14px; border-radius:9px; cursor:pointer;
  font-size:15px; min-height:46px; display:flex; align-items:center;
}
.combo__opt:hover,.combo__opt.is-highlighted{background:var(--celeste-claro)}
.combo__opt mark{background:none;color:var(--azul);font-weight:600}
.combo__head{
  padding:8px 14px 4px; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--texto-sec);
}
.combo__empty{padding:14px;font-size:14px;color:var(--texto-sec)}

/* --- Fechas ------------------------------------------------------------- */
.dates{display:flex;gap:12px}
.dates__col{flex:1;min-width:0}
.dates__sub{
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:500; color:var(--texto-sec);
}

.quickdays{display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px}
.chip{
  font:inherit; font-size:14px; font-weight:500;
  padding:9px 15px; min-height:42px;
  border:1.5px solid var(--linea); border-radius:999px;
  background:var(--blanco); color:var(--azul); cursor:pointer;
  transition:background .15s,border-color .15s;
}
.chip:active,.chip.is-on{background:var(--celeste-claro);border-color:var(--celeste)}

/* --- Precio ------------------------------------------------------------- */
.price-card{
  background:linear-gradient(135deg,var(--azul) 0%,var(--celeste) 130%);
  color:#fff; border-radius:20px; padding:28px 24px;
  text-align:center; margin:20px 0 24px;
  box-shadow:0 10px 30px rgba(10,70,142,.22);
}
.price-card__label{
  margin:0 0 6px; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75);
}
.price-card__amount{
  margin:0; font-size:44px; font-weight:700; line-height:1.05;
  letter-spacing:-.02em;
}
.price-card__meta{margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.85)}

.summary{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:20px; margin-bottom:20px;
}
.summary__title{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--azul)}
.summary__list{margin:0;display:grid;gap:11px}
.summary__row{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.summary__row dt{font-size:14px;color:var(--texto-sec);margin:0}
.summary__row dd{margin:0;font-size:14px;font-weight:600;text-align:right}
.summary__note{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--linea);
  font-size:13px; color:var(--texto-sec);
}

/* --- Checkbox ----------------------------------------------------------- */
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--texto-sec)}
.check input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--celeste)}

/* --- Confirmación ------------------------------------------------------- */
.done{text-align:center;padding:16px 0}
.done__icon{color:var(--ok);margin-bottom:8px}
.done__title{margin:0 0 8px;font-size:26px;font-weight:700;color:var(--azul)}
.done__lead{margin:0 auto 24px;max-width:34ch;font-size:15px;color:var(--texto-sec)}
.done__box{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:18px; text-align:left;
}
.done__step{
  display:flex; gap:12px; align-items:center;
  margin:0 0 14px; font-size:14px;
}
.done__step:last-child{margin-bottom:0}
.done__step span{
  flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--celeste-claro); color:var(--azul);
  display:grid; place-items:center; font-size:13px; font-weight:600;
}
.done__ref{margin:20px 0 0;font-size:13px;color:var(--texto-sec)}

/* --- Botones ------------------------------------------------------------ */
.btn{
  font:inherit; font-size:17px; font-weight:600;
  width:100%; min-height:56px; padding:16px;
  border:0; border-radius:var(--radio); cursor:pointer;
  transition:transform .1s, background .15s, opacity .15s;
}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--azul);color:#fff}
.btn--primary:disabled{opacity:.45;cursor:not-allowed}
.btn--ghost{
  background:none; color:var(--azul);
  border:1.5px solid var(--linea); font-size:15px; min-height:50px;
}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:22px; height:22px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- CTA fijo ----------------------------------------------------------- */
.cta{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:rgba(244,247,250,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
}
.cta > .btn{max-width:480px;margin:0 auto;display:block}
.cta__legal{
  margin:9px auto 0; max-width:480px;
  font-size:12px; text-align:center; color:var(--texto-sec);
}
.cta[hidden]{display:none}

/* --- Footer ------------------------------------------------------------- */
.foot{
  max-width:520px; margin:0 auto; padding:28px 20px 8px;
  text-align:center; font-size:11.5px; line-height:1.6; color:var(--texto-sec);
}
.foot__ssn{height:34px;width:auto;opacity:.6;margin-bottom:10px}
.foot p{margin:0 0 6px}
.foot a{color:var(--texto-sec)}

/* --- Escritorio (minoría, pero no puede verse roto) --------------------- */
@media (min-width:600px){
  .wrap{padding-top:36px}
  .hero__marca{height:46px}
}