/* «¿Qué podés crear?» de filamentos (docs/CONTRATO_AMPLIACION_PRINT3D_PRESENTACION_V1.md §17; edcre-0543).
   Diseño: Browsy print3d-que-podes-crear v1 (qa/print3d_que_podes_crear_v1/), reglas literales de los mockups A, B y C
   (.mp, .qpc, .tiles, .tile, .ex, .bn, .note, .src, .new, .qq, .ints, .res, .para, .enc, .p3d-crea, .p3d-enc) con el
   prefijo p3u- para no pisar estilos de la ficha ni del listado. Tokens de Browsy: --o, --o2, --ink, --mut, --b, --bg2. */
.p3u, .p3u-crea, .p3u-enc, .p3u-tab, .p3u-card {
  --p3u-o: var(--brand, #EE5A24);
  --p3u-o2: #FFF1EA;
  --p3u-ink: #15161A;
  --p3u-mut: #6B6E78;
  --p3u-b: #E9E9EE;
  --p3u-bg2: #F6F6F8;
  --p3u-ok: #17703D;
  --p3u-amb: #7A4A00;
  --p3u-ambb: #FFF1DB;
  --p3u-ambl: #F3D9A8;
  --p3u-blue: #2457C5;
  --p3u-blueb: #EAF0FC;
}
.p3u { color: var(--p3u-ink) }
.p3u-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none }
/* Ícono chico de trazo en chip naranja claro (opción b de edcre-0543 §3): no es una foto del producto. */
.p3u-chip { width: 40px; height: 40px; border-radius: 12px; background: var(--p3u-o2); color: var(--p3u-o); display: flex; align-items: center; justify-content: center; flex: none }
.p3u-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--p3u-mut) }
.p3u-new { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--p3u-o); border-radius: 6px; padding: 2px 6px; vertical-align: middle; margin-left: 8px; line-height: 1.3 }
.p3u-src { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--p3u-mut) }
.p3u-src .p3u-ic { width: 14px; height: 14px }
.p3u-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45 }
.p3u-note .p3u-ic { width: 18px; height: 18px; margin-top: 1px }
.p3u-note.amb { background: var(--p3u-ambb); color: var(--p3u-amb); border: 1px solid var(--p3u-ambl); margin-top: 16px }
.p3u-note.blu { background: var(--p3u-blueb); color: #1C3F8F; border: 1px solid #CFDCF6 }

/* ---- A: «Mejor para» en la caja de compra (Browsy .mp) ---- */
.p3u-mp { margin-top: 16px; border: 1px solid var(--p3u-b); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; background: #fff }
.p3u-mp .p3u-chip { width: 34px; height: 34px; border-radius: 10px }
.p3u-mp .p3u-ic { width: 18px; height: 18px }
.p3u-mp p { font-size: 13.5px; line-height: 1.4; flex: 1; margin: 0; min-width: 0 }
.p3u-mp p b { font-weight: 600 }
.p3u-mp a { font-size: 12.5px; font-weight: 600; color: var(--p3u-o); text-decoration: none; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center }
.p3u-mp a .p3u-ic { width: 14px; height: 14px }

/* ---- A: primera pestaña ---- */
.p3u-tab { display: inline-flex; align-items: center }

/* ---- A: bloque «¿Qué podés crear?» (Browsy .qpc) ---- */
.p3u-sec { scroll-margin-top: 90px }
/* El fondo gris y el radio los pone la sección del SSR (.pdpk-sec.pdpk-gray), igual que «Lo esencial». */
.p3u-qpc { margin: 0; padding: 0 }
.p3u-hrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap }
.p3u-qpc h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 }
.p3u-lead { color: var(--p3u-mut); font-size: 15px; margin: 6px 0 0; max-width: 760px }
.p3u-qpc .p3u-src { background: #fff; border: 1px solid var(--p3u-b); border-radius: 99px; padding: 4px 10px }
.p3u-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 20px }
.p3u-tile { background: #fff; border: 1px solid var(--p3u-b); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; min-width: 0 }
.p3u-tile .p3u-tx { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.p3u-tile b { font-size: 15.5px; line-height: 1.25; letter-spacing: -.005em; overflow-wrap: anywhere }
.p3u-tile p { font-size: 13px; color: var(--p3u-mut); line-height: 1.45; margin: 0 }
/* Caso D: tarjetas punteadas, para que no se confundan con piezas (Browsy D1). */
.p3u-tile.pu { background: transparent; border-style: dashed; border-color: #D3D4DC }
.p3u-tile.pu .p3u-chip { background: #fff }
.p3u-ex { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.p3u-ex .p3u-lbl { margin-right: 4px }
.p3u-ex span.e { font-size: 13px; background: #fff; border: 1px solid var(--p3u-b); border-radius: 99px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px }
.p3u-ex span.e .p3u-ic { width: 14px; height: 14px; color: var(--p3u-o) }
.p3u-dnote { margin-top: 16px }
.p3u-bn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px }
.p3u-bn > div { background: #fff; border: 1px solid var(--p3u-b); border-radius: 14px; padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; min-width: 0 }
.p3u-bn .p3u-ic { width: 18px; height: 18px; margin-top: 1px }
.p3u-bn .okk .p3u-ic { color: var(--p3u-ok) }
.p3u-bn .no .p3u-ic { color: #B3261E }
.p3u-bn .xr .p3u-ic { color: var(--p3u-blue) }
.p3u-bn b { font-weight: 600 }
.p3u-bn .go { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
.p3u-bn .go a { border: 1px solid var(--p3u-b); background: #fff; border-radius: 99px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; display: inline-flex; gap: 4px; align-items: center; color: var(--p3u-ink); text-decoration: none }
.p3u-bn .go a .p3u-ic { width: 13px; height: 13px; margin: 0; color: var(--p3u-ink) }

/* ---- C: frase «Para crear» del selector de la impresora (Browsy .p3d-crea / .p3d-enc) ---- */
.p3u-crea { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: #3A3C44; border-top: 1px solid var(--p3u-b); border-bottom: 1px solid var(--p3u-b); padding: 7px 0; margin: 2px 0 }
.p3u-crea .p3u-ic { width: 15px; height: 15px; color: var(--p3u-o); margin-top: 1px }
.p3u-crea b { font-weight: 600; color: var(--p3u-ink) }
.p3u-crea.d .p3u-ic { color: var(--p3u-mut) }
.p3u-enc { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--p3u-amb); font-weight: 600 }
.p3u-enc .p3u-ic { width: 14px; height: 14px }

/* ---- B: «¿Qué querés crear?» del listado (Browsy .qq / .ints / .res) ---- */
.p3u-qq { background: var(--p3u-bg2); border-radius: 20px; padding: 22px; margin: 0 0 18px }
.p3u-qq h2 { font-size: 20px; letter-spacing: -.015em; font-weight: 700; margin: 0 }
.p3u-qq p.l { font-size: 13.5px; color: var(--p3u-mut); margin: 4px 0 0 }
.p3u-ints { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 16px }
.p3u-ints button { font: inherit; color: var(--p3u-ink); cursor: pointer; background: #fff; border: 1px solid var(--p3u-b); border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; font-size: 13px; font-weight: 600; line-height: 1.25; min-height: 86px; min-width: 0 }
.p3u-ints button .p3u-chip { width: 32px; height: 32px; border-radius: 9px }
.p3u-ints button .p3u-chip .p3u-ic { width: 17px; height: 17px }
.p3u-ints button[aria-pressed="true"] { border-color: var(--p3u-ink); box-shadow: 0 0 0 1px var(--p3u-ink) }
.p3u-ints button.all { justify-content: center; align-items: center; color: var(--p3u-mut) }
.p3u-ints button.all[aria-pressed="true"] { color: var(--p3u-ink) }
.p3u-ints button:focus-visible { outline: 2px solid var(--p3u-o); outline-offset: 2px }
.p3u-res { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px }
.p3u-res b { font-weight: 700 }
.p3u-res .p3u-src { margin-left: auto }
.p3u-res .clr { font: inherit; cursor: pointer; border: 1px solid var(--p3u-b); background: #fff; border-radius: 99px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; color: var(--p3u-ink) }

/* ---- B: franja de la card (Browsy .para / .enc) ---- */
.p3u-card { display: grid; gap: 6px; margin-top: 6px }
.p3u-para { display: flex; gap: 8px; align-items: flex-start; background: #F3F7F4; border: 1px solid #D8EADF; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; color: #1E4D32 }
.p3u-para .p3u-ic { width: 15px; height: 15px; color: var(--p3u-ok); margin-top: 1px }
.p3u-para b { font-weight: 600 }
.p3u-cenc { display: flex; gap: 6px; align-items: center; background: var(--p3u-ambb); color: var(--p3u-amb); border: 1px solid var(--p3u-ambl); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 600 }
.p3u-cenc .p3u-ic { width: 14px; height: 14px }

@media (max-width: 600px) {
  .p3u-mp { align-items: flex-start }
  .p3u-mp p { font-size: 13px }
  .p3u-qpc h2 { font-size: 22px }
  .p3u-lead { font-size: 14px }
  .p3u-tiles { grid-template-columns: 1fr; gap: 8px; margin-top: 16px }
  .p3u-tile { flex-direction: row; align-items: flex-start; min-height: 0; padding: 14px; gap: 12px }
  .p3u-tile .p3u-tx { gap: 3px }
  .p3u-tile b { font-size: 14.5px }
  .p3u-bn { grid-template-columns: 1fr }
  .p3u-crea { font-size: 12px }
  .p3u-qq { border-radius: 0; padding: 18px 0 18px 16px; margin: 0 -16px 14px }
  .p3u-qq h2 { font-size: 18px }
  .p3u-qq p.l { padding-right: 16px }
  .p3u-ints { display: flex; overflow-x: auto; gap: 8px; padding-right: 16px; scrollbar-width: none }
  .p3u-ints::-webkit-scrollbar { display: none }
  .p3u-ints button { flex: none; width: 118px; min-height: 84px }
  .p3u-res { font-size: 13.5px }
  .p3u-res .p3u-src { margin-left: 0 }
  .p3u-para { font-size: 12px; padding: 7px 8px }
}