/* Titanitos · Comprados juntos — mismo lenguaje que la cabecera, la ficha y el cajón */
.ttcj{--c-blue:#0098D8;--c-blue-d:#0076AE;--c-ink:#111;--c-grey:#5E5B56;--c-tile:#F1EFEC;--c-line:#E3E0DB;
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--c-ink);margin:32px 0 40px;padding:24px;
  border:1px solid var(--c-line);border-radius:18px;background:#fff;line-height:1.45}
.ttcj *{box-sizing:border-box}
.ttcj a{text-decoration:none!important}

.ttcj__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ttcj__titulo{font-family:inherit!important;font-size:22px!important;font-weight:600!important;letter-spacing:-.02em;margin:0!important;
  color:var(--c-ink)!important;text-transform:none!important}
.ttcj__sub{margin:4px 0 0;font-size:14px;color:var(--c-grey)}
.ttcj__badge{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:100px;background:#E8F6FD;color:var(--c-blue-d);
  font-size:13px;font-weight:600;white-space:nowrap}

.ttcj__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:stretch}

/* Los productos ocupan todo el ancho disponible: nunca queda hueco vacío */
.ttcj__items{display:flex;align-items:stretch;gap:12px;min-width:0;container-type:inline-size}
.ttcj__mas{align-self:center;flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--c-tile);
  font-size:18px;font-weight:600;color:var(--c-grey)}

/* Tarjeta horizontal (foto a la izquierda): la que mejor llena una pantalla ancha */
.ttcj__item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:row;align-items:center;gap:18px;
  border:1px solid var(--c-line);border-radius:14px;padding:14px;background:#fff;transition:border-color .15s,opacity .15s,box-shadow .15s}
.ttcj__item:hover{border-color:#cfcac3;box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}
.ttcj__item.is-fuera{opacity:.45}
.ttcj__item.is-fuera .ttcj__img img{filter:grayscale(1)}
.ttcj__item .ttcj__img{width:clamp(110px,38%,200px);flex:none}
.ttcj__item .ttcj__info{flex:1;min-width:0;padding:0;justify-content:center;gap:6px}
.ttcj__item .ttcj__combi{margin-top:6px;max-width:280px}

/* Si cada tarjeta se queda estrecha, pasa a vertical. El punto de cambio depende de cuántos productos hay */
@container (max-width: 680px) {
  .ttcj--n2 .ttcj__item{flex-direction:column;align-items:stretch;gap:0;padding:10px}
  .ttcj--n2 .ttcj__item .ttcj__img{width:100%;max-width:240px;margin:0 auto}
  .ttcj--n2 .ttcj__item .ttcj__info{padding:10px 2px 2px;justify-content:flex-start}
  .ttcj--n2 .ttcj__item .ttcj__combi{margin-top:auto;max-width:none}
}
@container (max-width: 1080px) {
  .ttcj--n3 .ttcj__item{flex-direction:column;align-items:stretch;gap:0;padding:10px}
  .ttcj--n3 .ttcj__item .ttcj__img{width:100%;max-width:240px;margin:0 auto}
  .ttcj--n3 .ttcj__item .ttcj__info{padding:10px 2px 2px;justify-content:flex-start}
  .ttcj--n3 .ttcj__item .ttcj__combi{margin-top:auto;max-width:none}
}
.ttcj--muchos .ttcj__item{flex-direction:column;align-items:stretch;gap:0;padding:10px}
.ttcj--muchos .ttcj__item .ttcj__img{width:100%;max-width:220px;margin:0 auto}
.ttcj--muchos .ttcj__item .ttcj__info{padding:10px 2px 2px;justify-content:flex-start}
.ttcj--muchos .ttcj__item .ttcj__combi{margin-top:auto;max-width:none}

.ttcj__check{position:absolute;top:10px;left:10px;z-index:2;cursor:pointer}
.ttcj__check input{position:absolute;opacity:0;width:0;height:0}
.ttcj__check span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#fff;border:1.5px solid var(--c-line);
  transition:background .15s,border-color .15s}
.ttcj__check input:checked + span{background:var(--c-blue);border-color:var(--c-blue)}
.ttcj__check input:checked + span::after{content:'';width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px)}
.ttcj__check input:focus-visible + span{outline:2px solid var(--c-blue);outline-offset:2px}
.ttcj__img{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--c-tile)}
.ttcj__img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;display:block}
.ttcj__info{display:flex;flex-direction:column;gap:4px}
.ttcj__eti{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-blue)}
.ttcj__nombre{font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--c-ink)!important;line-height:1.3}
.ttcj__nombre:hover{color:var(--c-blue)!important}
.ttcj__precio{font-size:14px;color:var(--c-grey);font-variant-numeric:tabular-nums}
.ttcj__combi{width:100%;height:38px;border:1px solid var(--c-line);border-radius:9px;padding:0 8px;font:inherit;font-size:13px;
  background:#fff;color:var(--c-ink)}
.ttcj__combi:focus{outline:none;border-color:var(--c-blue)}

.ttcj__resumen{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:14px;background:var(--c-tile);align-self:stretch}
.ttcj__cap{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-grey)}
.ttcj__precios{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ttcj__antes{font-size:15px;color:var(--c-grey)}
.ttcj__total{font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ttcj__ahorro{align-self:flex-start;font-size:12px;font-weight:600;color:#1E7F4E;background:#E7F6EE;border-radius:6px;padding:3px 8px}
.ttcj__nota{margin:0;font-size:12px;color:var(--c-grey)}
.ttcj__btn{margin-top:auto;height:50px;border:0;border-radius:10px;background:var(--c-blue);color:#fff;font:inherit;font-size:12px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s}
.ttcj__btn:hover{background:var(--c-blue-d)}
.ttcj__btn[disabled]{opacity:.45;cursor:default}
.ttcj__error{margin:0;font-size:12px;color:#9B1C1C}
.ttcj__iva{font-size:11px;color:var(--c-grey);text-align:center}

@media (max-width:900px){
  .ttcj{padding:16px;margin:24px 0}
  .ttcj__cuerpo{grid-template-columns:1fr}
  .ttcj__items,.ttcj--muchos .ttcj__items{flex-direction:column}
  .ttcj .ttcj__item{flex-direction:row;align-items:center;gap:12px;padding:10px}
  .ttcj .ttcj__item .ttcj__img{width:84px;max-width:none;margin:0}
  .ttcj .ttcj__item .ttcj__info{padding:0}
  .ttcj .ttcj__item .ttcj__combi{margin-top:6px}
  .ttcj__mas{align-self:center;margin:-4px 0}
  .ttcj__check{top:8px;left:8px}
}