/* Configurador CBR — estilos del formulario. Usa tokens ya definidos en :root (style.css del theme). */
.cbr-config{max-width:1180px;margin:0 auto;padding:40px 20px 64px}
.cbr-config *,.cbr-config *::before,.cbr-config *::after{box-sizing:border-box}

.cbr-config .head{margin-bottom:26px;display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.cbr-config .head__media{flex-shrink:0;width:130px;height:130px;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 2px 10px rgba(10,10,10,.08)}
.cbr-config .head__media img{width:100%;height:100%;object-fit:cover;display:block}
.cbr-config .head__text{flex:1;min-width:240px}
.cbr-config .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-cyan);
  padding:7px 16px 7px 12px;border-radius:999px;
  background:rgba(0,168,240,.08);
  border:1px solid rgba(0,168,240,.25);margin-bottom:14px;
}
.cbr-config .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gradient-brand);box-shadow:0 0 0 3px rgba(0,168,240,.15)}
.cbr-config h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,4vw,40px);line-height:1.1;margin:0 0 8px}
.cbr-config .head p{margin:0;color:var(--c-gray-700);max-width:56ch}

.cbr-config .grid{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}

.cbr-config .step{margin-bottom:26px}
.cbr-config .step__label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:12px}
.cbr-config .step__num{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.cbr-config .hint{
  display:inline-flex;align-items:center;
  font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.02em;
  color:#fff;padding:4px 12px;border-radius:999px;background:var(--gradient-brand);
  box-shadow:0 3px 10px rgba(184,0,136,.25);
}
.cbr-config .hint--soft{
  color:var(--c-gray-700);background:var(--c-gray-100);font-weight:600;box-shadow:none;
}
.cbr-config .hint-text{margin:8px 0 0;font-size:12px;color:var(--c-gray-500)}

.cbr-config .upload{
  display:block;width:100%;
  border:2px dashed var(--c-gray-300);border-radius:var(--radius-md);
  padding:24px;text-align:center;cursor:pointer;
  transition:all .22s cubic-bezier(.23,1,.32,1);background:var(--c-gray-100);
}
.cbr-config .upload:hover{border-color:var(--c-cyan);background:rgba(0,168,240,.05)}
.cbr-config .upload svg{display:block;margin:0 auto 8px;width:30px;height:30px;stroke:var(--c-cyan)}
.cbr-config .upload b{display:block;font-family:var(--font-display);font-size:15px}
.cbr-config .upload span{font-size:13px;color:var(--c-gray-500)}
.cbr-config .upload input{display:none}
.cbr-config .upload__file{margin-top:10px;font-size:13px;color:var(--c-cyan);font-weight:700}

.cbr-config .opts{display:flex;flex-wrap:wrap;gap:10px}
.cbr-config .opt{
  position:relative;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;
  border:2px solid var(--c-gray-300);border-radius:999px;
  background:#fff;color:var(--c-ink);
  font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1;
  transition:all .22s cubic-bezier(.23,1,.32,1);
}
.cbr-config .opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cbr-config .opt:hover{border-color:var(--c-cyan);color:var(--c-cyan);transform:translateY(-2px)}
.cbr-config .opt:has(input:checked){background:var(--gradient-brand);border-color:transparent;color:#fff;box-shadow:0 8px 28px rgba(0,168,240,.35)}
.cbr-config .opt__tag{font-size:11px;font-weight:600;opacity:.75}
.cbr-config .opt--shape{flex-direction:column;min-width:96px;min-height:88px;padding:12px;gap:6px;border-radius:var(--radius-sm)}
.cbr-config .opt--shape svg{width:28px;height:28px}

.cbr-config .field{display:flex;flex-direction:column;gap:6px}
.cbr-config .field label{font-size:13px;font-weight:600;color:var(--c-gray-700)}
.cbr-config input[type=number],.cbr-config textarea{
  width:100%;min-height:46px;padding:0 18px;
  border:2px solid var(--c-cyan);border-radius:999px;
  background:#fff;color:var(--c-ink);
  font-family:var(--font-display);font-weight:700;font-size:15px;
  outline:none;transition:box-shadow .2s cubic-bezier(.23,1,.32,1);
  -webkit-appearance:none;appearance:none;
}
.cbr-config textarea{border-radius:var(--radius-sm);padding:12px 18px;min-height:90px;font-weight:400;font-family:var(--font-body,inherit);resize:vertical}
.cbr-config input:focus,.cbr-config textarea:focus{box-shadow:0 0 0 4px rgba(0,168,240,.16)}
.cbr-config .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cbr-config .cols--solo{grid-template-columns:1fr}

.cbr-config .summary{
  position:sticky;top:24px;
  background:#fff;border:1px solid var(--c-gray-300);
  border-radius:var(--radius-md);box-shadow:0 10px 30px rgba(10,10,10,.10);
  overflow:hidden;
}
.cbr-config .summary__top{height:5px;background:var(--gradient-brand)}
.cbr-config .summary__body{padding:24px}
.cbr-config .summary h2{font-family:var(--font-display);font-size:17px;margin:0 0 18px;font-weight:800}
.cbr-config .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14px;border-bottom:1px dashed var(--c-gray-300)}
.cbr-config .row dt{color:var(--c-gray-700);margin:0}
.cbr-config .row dd{margin:0;font-weight:700;text-align:right}
.cbr-config dl{margin:0}
.cbr-config .count{margin:16px 0;padding:14px;border-radius:var(--radius-sm);background:rgba(0,168,240,.07);border:1px solid rgba(0,168,240,.25);text-align:center}
.cbr-config .count b{display:block;font-family:var(--font-display);font-size:30px;line-height:1.1;color:var(--c-cyan)}
.cbr-config .count span{font-size:12px;color:var(--c-gray-700);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.cbr-config .totals{margin-top:16px;padding-top:14px;border-top:2px solid var(--c-gray-300)}
.cbr-config .totals .row{border-bottom:none;padding:5px 0}
.cbr-config .totals .row--big{margin-top:10px;padding-top:12px;border-top:1px solid var(--c-gray-300);font-family:var(--font-display);font-size:20px;font-weight:800;align-items:baseline}
.cbr-config .totals .row--big dd{color:var(--c-magenta);font-size:24px}
.cbr-config .disc{display:none;margin-top:12px;padding:10px 14px;border-radius:var(--radius-sm);background:rgba(248,0,136,.07);border:1px solid rgba(248,0,136,.28);font-size:13px;color:var(--c-gray-700)}
.cbr-config .disc.on{display:block}
.cbr-config .disc b{color:var(--c-magenta)}

.cbr-config .cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;margin-top:18px;border:0;cursor:pointer;
  border-radius:999px;background:var(--c-ink);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:16px;
  transition:transform .25s cubic-bezier(.23,1,.32,1);
}
.cbr-config .cta:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,168,240,.35)}
.cbr-config .cta:disabled{opacity:.6;cursor:not-allowed;transform:none}
.cbr-config .view-cart{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;margin-top:10px;border:0;cursor:pointer;text-decoration:none;
  border-radius:999px;background:var(--c-magenta);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:14px;
  transition:all .22s cubic-bezier(.23,1,.32,1);
}
.cbr-config .view-cart:hover{background:var(--c-ink);transform:translateY(-2px)}
.cbr-config .view-cart svg{width:18px;height:18px;fill:currentColor}
.cbr-config .wa{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:48px;margin-top:10px;
  border:2px solid #25D366;border-radius:999px;background:transparent;
  color:#128C4A;font-family:var(--font-display);font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;
  transition:all .22s cubic-bezier(.23,1,.32,1);
}
.cbr-config .wa:hover{background:#25D366;color:#fff}
.cbr-config .wa svg{width:19px;height:19px;fill:currentColor}
.cbr-config .note{margin-top:14px;font-size:12px;color:var(--c-gray-500);text-align:center;line-height:1.5}
.cbr-config .form-error{display:none;margin-bottom:14px;padding:12px 16px;border-radius:var(--radius-sm);background:rgba(248,0,136,.08);border:1px solid rgba(248,0,136,.3);color:var(--c-magenta);font-size:13px;font-weight:600}
.cbr-config .form-error.on{display:block}

.mobar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--c-gray-300);
  box-shadow:0 -6px 24px rgba(10,10,10,.14);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  align-items:center;gap:12px;
}
.mobar__info{flex:1;min-width:0;line-height:1.25}
.mobar__info small{display:block;font-size:11px;color:var(--c-gray-700);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.mobar__info b{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--c-magenta)}
.mobar__info i{font-style:normal;font-size:12px;color:var(--c-gray-700);margin-left:6px}
.mobar button{flex-shrink:0;min-height:44px;padding:0 20px;border:0;cursor:pointer;border-radius:999px;background:var(--gradient-brand);color:#fff;font-family:var(--font-display);font-weight:800;font-size:14px}

@media (max-width:900px){
  .cbr-config .grid{grid-template-columns:1fr;gap:24px}
  .cbr-config .summary{position:static}
  .cbr-config .summary__body{padding:20px}
}
@media (max-width:600px){
  .cbr-config{padding:24px 14px 96px}
  .cbr-config .cols{grid-template-columns:1fr 1fr;gap:10px}
  .cbr-config .cols--solo{grid-template-columns:1fr}
  .cbr-config .opt{min-height:42px;padding:0 14px;font-size:13px;gap:6px}
  .cbr-config .opt--shape{min-width:0;flex:1;min-height:80px}
  .cbr-config .opt__tag{font-size:10px}
  .cbr-config h1{font-size:clamp(24px,7vw,32px)}
  .cbr-config .head__media{width:84px;height:84px}
  .cbr-config .step{margin-bottom:22px}
  .cbr-config .count b{font-size:26px}
  .mobar{display:flex}
  /* La barra fija con el total/Agregar queda debajo del botón flotante
     de WhatsApp (mismo z-index más alto en toda la web) -- en estas
     páginas (las únicas con .mobar) subimos el flotante para que no
     tape el botón. */
  .wa-float{bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* Desglose del descuento 5% (cambio 08-09-2026) */
.cbr-config .dctrows{display:none;margin-bottom:6px;padding-bottom:8px;border-bottom:1px dashed var(--c-gray-300)}
.cbr-config .dctrows.on{display:block}
.cbr-config .strike{text-decoration:line-through;color:#888;font-weight:500}
.cbr-config .row--dct dt,.cbr-config .row--dct dd{color:var(--c-magenta);font-weight:700}