*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg-page:#F3F3F3;
  --navy-deep:#0C1E37;
  --navy-mid:#163C63;
  --blue-mid:#247CBB;
  --blue-accent:#9FDBFF;
  --blue-strong:#0B6AA6;
  --btn-blue:#A6D3EC;
  --btn-blue-hover:#8CC5E6;
  --text-navy:#12233B;
  --white:#FFFFFF;
  --gray:#F2F2F2;
  --gray2:#E7E9EC;
  --muted:#8A8A8A;
  --radius-xl:28px;
  --radius:18px;
  --radius-sm:10px;
  --transition:.2s cubic-bezier(.4,0,.2,1);
  --card-shadow:0 10px 28px rgba(12,30,55,.10);
}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-page) url('../img/fondo-pagina.jpg') center top / cover no-repeat fixed;
  color:var(--text-navy);
  min-height:100vh;
}

/* ══════ NAVBAR ══════
   Barra blanca flotante tipo píldora, sobre el fondo gris de la página. */
.navbar-wrap{
  max-width:1400px;
  margin:0 auto;
  padding:24px 40px 0;
}
.navbar{
  background:var(--white);
  border-radius:50px;
  box-shadow:0 8px 24px rgba(12,30,55,.08);
  padding:16px 32px;
  display:flex;
  align-items:center;
}
.navbar .logo-wrap{display:flex;align-items:center;gap:10px;}
.navbar img.logo{height:30px;display:block;}
.navbar .logo-fallback{
  font-weight:800;
  font-size:18px;
  letter-spacing:1px;
  color:var(--text-navy);
  display:none;
}
.navbar .logo-fallback span{color:var(--blue-strong);}

/* ══════ HERO ══════
   El alto del módulo se ajusta automáticamente al contenido de cada
   pantalla (no es fijo), así nunca queda espacio vacío de más. */
.hero-wrap{
  max-width:1400px;
  margin:20px auto 60px;
  padding:0 40px;
}
.hero-card{
  display:flex;
  align-items:stretch;
  background:var(--white);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(12,30,55,.14);
}
.hero-media{
  position:relative;
  flex:1 1 50%;
  min-height:460px;
  background:linear-gradient(165deg,var(--navy-deep),var(--blue-mid));
  overflow:hidden;
}
.hero-media .media-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-media .media-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 48px min(220px,32%);
}
.hero-media .media-product{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-height:44%;
  object-fit:contain;
  object-position:bottom;
  pointer-events:none;
}
.hero-media h1{
  font-size:clamp(26px,3.2vw,40px);
  font-weight:700;
  line-height:1.2;
  color:var(--white);
}
.hero-media h1 .accent{color:var(--blue-accent);display:block;font-weight:800;}
.hero-media p{
  margin-top:16px;
  font-size:15px;
  line-height:1.7;
  color:#DCEBF5;
  max-width:400px;
}

.hero-form{
  flex:1 1 50%;
  background:var(--white);
  color:var(--text-navy);
  display:flex;
  flex-direction:column;
}

.progress-bar-wrap{height:5px;background:var(--gray);}
.progress-bar{height:100%;background:var(--blue-strong);transition:width .4s ease;}

.form-header{padding:36px 44px 0;}
.step-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue-strong);margin-bottom:8px;}
.form-header h2{font-size:21px;font-weight:800;color:var(--text-navy);line-height:1.3;}
.form-header p.step-desc{font-size:13.5px;color:#667485;margin-top:8px;line-height:1.6;}

.form-body{padding:22px 44px 8px;}
.form-footer{padding:16px 44px 34px;display:flex;justify-content:space-between;align-items:center;gap:12px;}

.step{display:none;}
.step.active{display:block;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.cart-banner{display:none;background:var(--navy-deep);color:var(--blue-accent);border-radius:var(--radius-sm);padding:12px 16px;font-size:12.5px;font-weight:700;margin-bottom:18px;line-height:1.6;}
.cart-banner.visible{display:block;}
.cart-banner .cart-items{color:var(--white);font-weight:400;}

/* ══════ CARDS: categorías / subcategorías ══════
   Foto de portada (cover) + etiqueta centrada debajo. */
.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.option-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  border:2px solid var(--gray2);
  box-shadow:var(--card-shadow);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  user-select:none;
}
.option-card:hover{border-color:var(--blue-strong);transform:translateY(-3px);}
.option-card.selected{border-color:var(--blue-strong);}
.option-card .opt-photo{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(160deg,var(--navy-deep),var(--blue-mid));
  overflow:hidden;
}
.option-card .opt-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.option-card .opt-photo .card-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;
}
.option-card.selected .opt-photo::after{
  content:'✓';position:absolute;top:8px;right:8px;font-size:11px;font-weight:900;color:var(--white);
  background:var(--blue-strong);width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:20px;
}
.option-card .card-label{padding:12px 10px 14px;text-align:center;font-size:13px;font-weight:700;color:var(--text-navy);line-height:1.35;}

/* ══════ CARDS: productos / modelos ══════
   Mismo tamaño y grilla que las cards de categorías (3 por fila).
   La foto "flota" dentro de la card con un borde blanco y sombra propia,
   en vez de ir a sangre como las de categoría. */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.product-card{
  background:var(--white);
  border-radius:var(--radius);
  cursor:pointer;
  border:2px solid var(--gray2);
  box-shadow:var(--card-shadow);
  transition:border-color var(--transition),transform var(--transition);
  position:relative;
  padding:12px 12px 0;
}
.product-card:hover{border-color:var(--blue-strong);transform:translateY(-3px);}
.product-card.selected{border-color:var(--blue-strong);}
.product-card .prod-photo{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(160deg,var(--navy-deep),var(--blue-mid));
  box-shadow:0 8px 20px rgba(12,30,55,.22);
}
.product-card .prod-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.product-card .prod-photo .card-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;
}
.product-card.selected .prod-photo::after{
  content:'✓';position:absolute;top:8px;right:8px;font-size:11px;font-weight:900;color:var(--white);
  background:var(--blue-strong);width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:20px;
}
.product-card .p-model{font-size:15px;font-weight:800;color:var(--blue-strong);text-align:center;margin:14px 0 8px;}
.product-card .p-features{list-style:none;font-size:12px;color:#556072;line-height:1.55;padding:0 4px 16px;}
.product-card .p-features li{display:flex;gap:7px;align-items:flex-start;margin-bottom:4px;}
.product-card .p-features li::before{content:'✓';color:var(--blue-strong);font-weight:900;flex-shrink:0;}

/* checkboxes (reactivos y consumibles) */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.check-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border:2px solid var(--gray2);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition),background var(--transition);user-select:none;}
.check-item:hover{border-color:var(--blue-strong);background:#EFF7FC;}
.check-item.checked{border-color:var(--blue-strong);background:#EFF7FC;}
.check-item input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:19px;
  height:19px;
  margin:0;
  cursor:pointer;
}
.chk-box{width:19px;height:19px;border:2px solid var(--gray2);border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background var(--transition),border-color var(--transition);font-size:11px;font-weight:900;pointer-events:none;}
.check-item.checked .chk-box{background:var(--blue-strong);border-color:var(--blue-strong);color:var(--white);}
.check-item.checked .chk-box::after{content:'✓';}
.chk-label{font-size:13.5px;font-weight:500;color:var(--text-navy);pointer-events:none;}

/* yes/no */
.yn-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;}
.yn-card{border:2px solid var(--gray2);border-radius:var(--radius);padding:28px 14px;cursor:pointer;text-align:center;transition:border-color var(--transition),background var(--transition),transform var(--transition);}
.yn-card:hover{border-color:var(--blue-strong);background:#EFF7FC;transform:translateY(-2px);}
.yn-card .yn-icon{font-size:32px;display:block;margin-bottom:8px;}
.yn-card .yn-label{font-size:14.5px;font-weight:700;color:var(--text-navy);}

/* inputs */
.field-group{margin-top:16px;}
.field-group label{display:block;font-size:12.5px;font-weight:600;color:#556072;margin-bottom:6px;}
.field-group input{width:100%;padding:12px 15px;border:2px solid var(--gray2);border-radius:var(--radius-sm);font-size:14.5px;color:var(--text-navy);background:var(--white);transition:border-color var(--transition);outline:none;font-family:inherit;}
.field-group input:focus{border-color:var(--blue-strong);}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.error-msg{color:#c0392b;font-size:12.5px;margin-top:8px;display:none;font-weight:500;}
.error-msg.show{display:block;}

.btn{padding:12px 26px;border-radius:50px;font-size:14.5px;font-weight:700;cursor:pointer;border:none;transition:all var(--transition);letter-spacing:.3px;}
.btn:active{transform:scale(.97);}
.btn-back{background:var(--gray);color:#667485;}
.btn-back:hover{background:var(--gray2);color:var(--text-navy);}
.btn-next{background:var(--btn-blue);color:var(--navy-deep);box-shadow:0 4px 16px rgba(166,211,236,.5);}
.btn-next:hover{background:var(--btn-blue-hover);}
.btn-submit{background:var(--navy-deep);color:var(--white);box-shadow:0 4px 16px rgba(12,30,55,.3);}
.btn-submit:hover{background:var(--navy-mid);}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;}

/* thank you screen (reemplaza toda la hero-card) */
.thanks-card{
  display:none;
  align-items:stretch;
  background:var(--white);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(12,30,55,.14);
}
.thanks-card.active{display:flex;animation:fadeIn .4s ease;}
.thanks-media{
  position:relative;flex:1 1 50%;min-height:420px;
  background:linear-gradient(165deg,var(--navy-deep),var(--blue-mid));overflow:hidden;
}
.thanks-media .media-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.thanks-media .media-product{
  position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;max-height:44%;
  object-fit:contain;object-position:bottom;pointer-events:none;
}
.thanks-content{flex:1 1 50%;background:var(--white);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:60px;}
.thanks-content .thanks-icon{font-size:52px;margin-bottom:18px;}
.thanks-content h2{font-size:26px;font-weight:800;color:var(--text-navy);margin-bottom:14px;line-height:1.3;}
.thanks-content p{font-size:15px;color:#667485;line-height:1.7;}
.thanks-content strong{color:var(--text-navy);}

@media (max-width:860px){
  .hero-card,.thanks-card{flex-direction:column;}
  .hero-media{min-height:260px;}
  .hero-media .media-content{padding:32px 32px 42%;}
  .thanks-media{min-height:220px;}
  .thanks-content{padding:36px 28px;}
  .navbar-wrap{padding:16px 16px 0;}
  .navbar{padding:12px 22px;}
  .hero-wrap{padding:0 16px;margin-bottom:36px;}
  body{background-attachment:scroll;}
}
@media (max-width:540px){
  .navbar{justify-content:center;}
  .form-header,.form-body,.form-footer{padding-left:22px;padding-right:22px;}
  .check-grid{grid-template-columns:1fr;}
  .name-row{grid-template-columns:1fr;}
  .form-header h2{font-size:18px;}

  /* Categorías, subcategorías y productos pasan a lista horizontal
     (foto chica a la izquierda + texto a la derecha) en vez de grilla. */
  .option-grid,.product-grid{grid-template-columns:1fr;gap:12px;}

  .option-card{
    display:flex;align-items:center;gap:14px;padding:10px;text-align:left;
  }
  .option-card .opt-photo{
    width:72px;height:72px;flex-shrink:0;border-radius:12px;aspect-ratio:unset;
  }
  .option-card .card-label{padding:0;text-align:left;font-size:14.5px;}

  .product-card{
    display:flex;align-items:center;gap:14px;padding:10px;
  }
  .product-card .prod-photo{
    width:72px;height:72px;flex-shrink:0;border-radius:12px;aspect-ratio:unset;
  }
  .product-card .p-model{margin:0 0 4px;text-align:left;font-size:14.5px;}
  .product-card .p-features{padding:0;}
}