
/* === DTS Calculadora: base mínima === */
.dts-calc-wrap{max-width:100%; overflow:visible;}
.dts-calc-root{max-width:100%;}
.dts-calc-banner img{display:block; width:100%; height:auto; border-radius:8px; margin:0 0 12px;}
.dts-calc-price{margin:12px 0; font-size:1.05rem;}
.dts-iva-toggle{display:inline-flex; align-items:center; gap:.5rem; margin-left:1rem;}
.dts-total-iva{margin-top:6px; display:none;}
.dts-calc-notes textarea{width:100%; resize:vertical;}
.dts-upload{margin:10px 0;}
.dts-progress{height:6px; background:#eee; border-radius:4px; margin:6px 0; overflow:hidden;}
.dts-progress .dts-bar{height:6px; background:linear-gradient(90deg,#263768,#0ECFB6); width:0%; transition:width .25s ease;}
.dts-thumb img{max-height:80px; border:1px solid #ddd; border-radius:6px; margin-top:6px;}
/* Evita doble scroll si tu HTML trae contenedores con overflow */
.dts-calc-root [style*="overflow"]{overflow:visible !important;}


/* === CSS de tu maquetación (extraído del HTML) === */
:root{--navy:#263768;--teal:#0ECFB6;--ink:#0e1326;--muted:#5b6b86;--line:#e7ebf0;--bg:#f6fafb;--price-gray:#6b7280;--yellow:#FFDB01}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;letter-spacing:.1px}
header{background:#fff;border-bottom:1px solid var(--line)}
.header-wrap{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px}
.header-wrap img{height:44px}
.hero{max-width:1200px;margin:18px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.hero-top{position:relative;height:320px} .hero-top .art{position:absolute;inset:0} .hero-top .logo{position:absolute;left:18px;top:18px;height:56px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.18))}
.hero-copy{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:14px 18px;flex-wrap:wrap}
.hero-text h1{font-size:24px;margin:0 0 6px 0;color:#10213e;font-weight:800} .hero-text p{margin:0;color:#17315f}
.badges{display:flex;gap:10px;flex-wrap:wrap} .badge{background:#eef7f7;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-weight:700;color:#0b3452;font-size:13px}
.wrap{max-width:1200px;margin:16px auto;padding:0 18px} .grid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:1120px){.grid{grid-template-columns:5fr 7fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.05);padding:18px} h2{margin:0 0 12px 0;font-size:18px;color:#10213e}
label{display:block;margin:8px 0 6px;font-weight:700;color:#12213a} input[type=number]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #cfe0ea;background:#fff;text-align:center;font-size:16px;font-weight:700;color:#0b2a4a}
.group{display:flex;align-items:center;gap:8px} .step{width:44px;height:44px;border-radius:12px;border:1px solid #cfe0ea;background:#fff;cursor:pointer;font-weight:900;color:var(--navy)}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px} .small{font-size:12px;color:#5b6b86}
.seg{display:flex;gap:10px;margin-top:10px} .seg button{flex:1;border:0;padding:12px 14px;border-radius:12px;cursor:pointer;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--navy),var(--teal));opacity:.8} .seg button.active{opacity:1}
.right-grid{display:grid;grid-template-columns:1fr;gap:12px} .priceBar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.priceTitle{font-weight:800;color:var(--navy)} .priceValue{font-size:clamp(28px,4vw,48px);font-weight:900;line-height:1;text-align:right;background:linear-gradient(90deg,var(--teal),#0bbfb0);-webkit-background-clip:text;background-clip:text;color:transparent} .priceValue.gray{background:none;color:#6b7280}
.ship{display:grid;grid-template-columns:1fr 1fr;gap:12px} .ship-opt{border:1px solid #d7dee6;border-radius:14px;padding:10px 12px;background:#fff;cursor:pointer;text-align:center;display:grid;gap:6px;align-content:center} .ship-opt.active{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,207,182,.15)}
.ship-name{font-weight:900;color:#0a2a4a;font-size:16px} .ship-price{font-size:16px;font-weight:600;color:#163a6a;opacity:.9}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px} .opt-col{display:grid;gap:12px} .opt-group{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.opt-title{font-weight:800;color:#142645;margin-bottom:10px} .opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.opt{border:2px solid transparent;border-radius:12px;background:#f8fafc;cursor:pointer;padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.2s} .opt img{width:100%;max-width:108px;height:86px;object-fit:contain;border-radius:10px;display:block}
.opt span{font-size:13px;color:#142a52;font-weight:800;text-align:center} .opt.active{border-color:#0ECFB6;background:#ecfeff;box-shadow:0 0 0 3px rgba(14,207,182,.15)}
.upload{margin-top:12px} .drop{border:2px dashed #cbd5e1;border-radius:14px;padding:18px;background:#f8fafc;display:grid;place-items:center;text-align:center;gap:8px} .drop input{display:none} .drop .btn{display:inline-block;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,#0ECFB6,#263768);color:#fff;font-weight:800;cursor:pointer}
.fileInfo{font-size:13px;color:#5b6b86} .error{color:#b91c1c;font-weight:700}
.long{margin-top:18px} .long h3{margin:0 0 8px 0;color:#0d2450;font-size:20px} .long p,.long li{color:#0e2a55;line-height:1.6} .long strong{color:#0ECFB6}
.illus{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px} .illus .box{background:#fff;border:1px solid #e7ebf0;border-radius:12px;padding:12px;text-align:center} .illus svg{width:120px;height:120px;display:block;margin:4px auto 8px}
.helper-btn{text-decoration:none;margin-top:12px;display:inline-block;background:#FFDB01;border:0;color:#0b2450;font-weight:900;padding:12px 16px;border-radius:12px;box-shadow:0 4px 0 #e2c501;cursor:pointer} .helper-btn:active{transform:translateY(1px);box-shadow:0 3px 0 #e2c501}
.helper-btn,.helper-btn:link,.helper-btn:visited,.helper-btn:hover{ text-decoration:none }

/* --- Añadir al carrito CTA --- */
.cart-cta{display:block}
.btn-cart{
  width:100%;
  padding:16px 18px;
  border:0;
  border-radius:14px;
  background-image:linear-gradient(135deg,var(--teal),var(--navy));
  color:#fff;
  font-weight:800;
  font-size:16px;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:transform .08s ease, filter .08s ease;
}
.btn-cart:hover{filter:brightness(1.05)}
.btn-cart:active,.btn-cart.pressed{
  background-image:linear-gradient(135deg,var(--navy),var(--teal));
  transform:scale(.985);
}
.btn-cart:focus-visible{
  outline:3px solid #11182733;
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(14,207,182,.25);
}
@media (max-width:520px){
  .btn-cart{font-size:15px;padding:14px 16px}
}

html, body { margin:0 !important; padding:0 !important; }
  main:last-child,
  section:last-child,
  .section:last-child,
  .container:last-child,
  .content:last-child,
  .wrapper:last-child,
  .page:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  footer, .footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  [style*="min-height"],
  .section, .container, .content {
    min-height: auto !important;
  }
  .hero, .banner { margin-bottom: 10px !important; padding-bottom: 0 !important; }
  h1 { margin-top: 0 !important; }

@media (max-width: 768px){
  /* Reduce la altura del banner para evitar hueco grande antes del título */
  .hero-top{ height: 190px !important; }
  /* Ajustes suaves al texto y badges para que todo respire sin generar saltos raros */
  .hero-copy{ padding-top: 8px !important; padding-bottom: 12px !important; }
  .hero-text h1{ margin-top: 0 !important; margin-bottom: 6px !important; }
  .badges{ gap: 8px !important; }
  .badge{ padding: 6px 10px !important; font-size: 12px !important; }
}
@media (max-width: 420px){
  .hero-top{ height: 170px !important; }
}
