/* ============================================================
   CABLEPELADO · Nueva tienda — Páginas (ficha de producto y carrito)
   Extensión del sistema de la propuesta: mismos tokens --cp-*,
   tipografías y componentes (chips, estrellas, botones, tarjetas).
   ============================================================ */

/* ---------- breadcrumb ---------- */
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 12px var(--f-mono);color:var(--cp-muted);padding-block:18px}
.breadcrumb a:hover{color:var(--cp-red-btn)}
.breadcrumb .sep{color:#98A2B3}

/* ---------- ficha: layout ---------- */
.ficha-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,48px);align-items:start}
@media(max-width:900px){.ficha-layout{grid-template-columns:1fr}}

/* galería */
.galeria-principal{background:#fff;border:1px solid var(--cp-line);border-radius:var(--r-l);padding:clamp(18px,2.4vw,36px);display:grid;place-items:center}
.galeria-principal img{width:100%;max-width:520px;aspect-ratio:1;object-fit:contain}
.galeria-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.galeria-thumbs img{width:74px;height:74px;object-fit:contain;background:#fff;border:1px solid var(--cp-line);border-radius:10px;padding:6px;cursor:pointer}
.galeria-thumbs img:hover{border-color:var(--cp-red)}

/* caja de compra */
.ficha-info{display:flex;flex-direction:column;gap:14px}
.ficha-info h1{font:800 clamp(22px,2.6vw,34px)/1.15 var(--f-head);letter-spacing:-.01em}
.ficha-marca{font:600 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cp-muted)}
.ficha-precios{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ficha-precio{font:700 clamp(26px,3vw,38px) var(--f-mono);color:var(--cp-red-btn);letter-spacing:-.02em}
.ficha-precio small{font-size:.45em;font-weight:600}
.ficha-precio s{font-size:.42em;color:#98A2B3;font-weight:500}
.badge-stock{display:inline-flex;align-items:center;gap:7px;background:var(--cp-green-bg);color:var(--cp-green);font:600 12px var(--f-ui);padding:6px 10px;border-radius:8px;width:fit-content}
.badge-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cp-green)}
.badge-stock.reserva{background:#FFF4E5;color:#8A5A00}
.badge-stock.reserva::before{background:var(--cp-amber)}

/* stepper de cantidad */
.qty{display:inline-flex;align-items:center;border:2px solid var(--cp-ink);border-radius:12px;overflow:hidden;background:#fff}
.qty button{width:42px;height:46px;font:700 18px var(--f-mono);color:var(--cp-ink)}
.qty button:hover{background:#F0F2F5}
.qty input{width:56px;height:46px;text-align:center;border:0;border-inline:2px solid var(--cp-ink);font:700 15px var(--f-mono);color:var(--cp-ink)}
.qty input:focus{outline:none}
.ficha-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pc-add.btn-ficha{margin:0;padding:0 26px;height:46px;border-radius:12px;background:var(--cp-red-btn);color:#fff;width:auto}
.pc-add.btn-ficha:hover{background:var(--cp-red-btn-hover)}
.pc-add.btn-ficha--reserva{background:#fff;border:1.5px solid var(--cp-red-btn);color:var(--cp-red-btn)}
.pc-add.btn-ficha--reserva:hover{background:#FFF3F2}
.ficha-trust{display:flex;gap:16px;flex-wrap:wrap;color:var(--cp-muted);font-size:12px;border-top:1px solid var(--cp-line);padding-top:14px}
.ficha-trust b{color:var(--cp-ink)}

/* secciones internas de ficha (descripción / valoraciones) */
.ficha-bloque{background:#fff;border:1px solid var(--cp-line);border-radius:var(--r-m);padding:clamp(20px,2.4vw,30px)}
.ficha-bloque h2{font:800 20px var(--f-head);letter-spacing:-.01em;margin-bottom:14px}
.ficha-desc{font-size:14px;line-height:1.65;color:#39424D}
.ficha-desc h2,.ficha-desc h3{font:700 16px var(--f-head);margin:14px 0 8px}
.ficha-desc p{margin-bottom:10px}
.ficha-desc ul,.ficha-desc ol{padding-left:20px;margin-bottom:10px;list-style:disc}
.ficha-desc ol{list-style:decimal}

/* ---------- carrito ---------- */
.carrito-layout{display:grid;grid-template-columns:1.6fr .8fr;gap:20px;align-items:start;padding-bottom:20px}
@media(max-width:900px){.carrito-layout{grid-template-columns:1fr}}
.lineas-card{background:#fff;border:1px solid var(--cp-line);border-radius:var(--r-m);overflow:hidden}
.linea{display:grid;grid-template-columns:88px 1fr auto;gap:14px;padding:16px;border-bottom:1px solid var(--cp-line);align-items:center}
.linea:last-child{border-bottom:0}
.linea img{width:88px;height:88px;object-fit:contain;background:#F5F6F8;border-radius:10px;padding:6px}
.linea-nombre{font-size:13.5px;font-weight:600;line-height:1.35;display:block;margin-bottom:6px}
.linea-nombre:hover{color:var(--cp-red-btn)}
.linea-unitario{font:500 12px var(--f-mono);color:var(--cp-muted)}
.linea-derecha{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.linea-subtotal{font:700 16px var(--f-mono);color:var(--cp-red-btn)}
.linea-eliminar{font:600 11.5px var(--f-ui);color:#98A2B3}
.linea-eliminar:hover{color:var(--cp-red-btn)}
@media(max-width:560px){.linea{grid-template-columns:64px 1fr}.linea img{width:64px;height:64px}.linea-derecha{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}
.resumen-card{background:#fff;border:1px solid var(--cp-line);border-radius:var(--r-m);padding:22px;display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.resumen-card h2{font:800 17px var(--f-head)}
.resumen-fila{display:flex;justify-content:space-between;font-size:13.5px;color:var(--cp-muted)}
.resumen-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--cp-line);padding-top:12px;font:700 15px var(--f-ui);color:var(--cp-ink)}
.resumen-total b{font:700 22px var(--f-mono);color:var(--cp-red-btn)}
.resumen-nota{font:600 12px var(--f-ui);color:var(--cp-green);background:var(--cp-green-bg);padding:8px 10px;border-radius:8px}
.btn.cta-disabled{opacity:.55;cursor:not-allowed;justify-content:center}
.carrito-vacio{text-align:center;padding:64px 0;color:var(--cp-muted)}
.carrito-vacio b{display:block;font:800 22px var(--f-head);color:var(--cp-ink);margin-bottom:8px}

/* ---------- paginación ---------- */
.paginacion{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}
.paginacion a,.paginacion .actual{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
  border:1px solid var(--cp-line);border-radius:10px;background:#fff;font:600 13px var(--f-ui);color:var(--cp-ink);
}
.paginacion a:hover{border-color:var(--cp-red-btn);color:var(--cp-red-btn)}
.paginacion .actual{background:var(--cp-ink);border-color:var(--cp-ink);color:#fff;font-family:var(--f-mono)}

/* ---------- estado sin resultados ---------- */
.sin-resultados{text-align:center;padding:56px 0;color:var(--cp-muted)}
.sin-resultados b{display:block;font:800 20px var(--f-head);color:var(--cp-ink);margin-bottom:8px}

/* ---------- checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1.55fr .9fr;gap:20px;align-items:start;padding-bottom:20px}
@media(max-width:900px){.checkout-layout{grid-template-columns:1fr}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:5px;font:600 12.5px var(--f-ui);color:var(--cp-ink)}
.campo-wide{grid-column:1/-1}
.campo input,.campo select{
  border:2px solid var(--cp-line);border-radius:10px;padding:11px 13px;font:400 14px var(--f-ui);color:var(--cp-ink);background:#fff;
}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--cp-red);box-shadow:0 0 0 3px rgba(199,81,80,.18)}
.campo-check{display:flex;align-items:center;gap:8px;font:500 13px var(--f-ui);color:var(--cp-ink);cursor:pointer}
.radio-opcion{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--cp-line);border-radius:12px;padding:13px 14px;margin-bottom:9px;
  cursor:pointer;background:#fff;transition:border-color .15s;
}
.radio-opcion:hover{border-color:var(--cp-red)}
.radio-opcion input{accent-color:var(--cp-red-btn)}
.radio-opcion:has(input:checked){border-color:var(--cp-red-btn);background:#FDF7F7}
.ro-nombre{display:flex;flex-direction:column;gap:2px;flex:1;font-size:14px}
.ro-nombre small{color:var(--cp-muted);font-size:12px}
.ro-precio{font:700 15px var(--f-mono);color:var(--cp-red-btn)}
.pago-disabled{opacity:.55;cursor:not-allowed}
.error-checkout{margin:0}

/* chip de stock agotado (danger) */
.badge-stock.agotado{background:#FDECEC;color:#A63C3B}
.badge-stock.agotado::before{background:var(--cp-red-btn)}

/* Tarjeta colapsable (datos de facturación) */
.tarjeta-colapsable{border:1.5px solid var(--cp-line);border-radius:14px;padding:14px 18px;background:#fff}
.tarjeta-colapsable summary{cursor:pointer;list-style:none}
.tarjeta-colapsable summary::-webkit-details-marker{display:none}
.tarjeta-colapsable summary::marker{content:""}
.tarjeta-colapsable summary::before{content:"▾";display:inline-block;vertical-align:middle;color:#5D6A78;font-size:15px;line-height:1;margin-right:9px;transition:transform .2s}
.tarjeta-colapsable[open] summary::before{transform:rotate(180deg)}
.tarjeta-colapsable .tc-titulo{display:inline-block;vertical-align:middle;font:800 20px var(--f-head);letter-spacing:-.01em;color:var(--cp-ink)}
.tarjeta-colapsable[open] summary{margin-bottom:4px}

/* Páginas legales/informativas */
.legal-texto{max-width:80ch}
.legal-texto h2{font:800 17px var(--f-head);margin:24px 0 8px}
.legal-texto h3{font:700 15px var(--f-head);margin:18px 0 6px}
.legal-texto p{margin-bottom:10px}
.legal-texto ul{margin:0 0 12px 20px}
.legal-texto li{margin-bottom:6px}
.legal-texto code{font:600 12px var(--f-mono);background:#F0F2F5;padding:1px 5px;border-radius:5px}
.tabla-cookies{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 14px;min-width:640px}
.tabla-cookies th,.tabla-cookies td{border:1px solid var(--cp-line);padding:8px 10px;text-align:left;vertical-align:top}
.tabla-cookies th{background:#F7F8FA;font:700 12.5px var(--f-ui)}
.ck-badge{display:inline-block;font:700 11px var(--f-ui);padding:3px 8px;border-radius:8px;white-space:nowrap}
.ck-badge--necesaria{background:#E7F5EE;color:#0B7A54}
.ck-badge--preferencias{background:#E8F0FE;color:#1D4ED8}
.ck-badge--analitica{background:#FEF0C7;color:#B54708}
.ck-badge--marketing{background:#FEE4E2;color:#B42318}

/* Avisos dentro de páginas informativas */
.aviso-verde,.aviso-amarillo{border-radius:10px;padding:12px 15px;margin:12px 0;font-size:13.5px;line-height:1.55}
.aviso-verde{background:var(--cp-green-bg);color:#0B5C40;border:1px solid #BFE3D1}
.aviso-amarillo{background:#FEF7E6;color:#8A5A08;border:1px solid #F6E2B3}

/* FAQ: acordeones nativos */
.faq-item{border:1px solid var(--cp-line);border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:14px 16px;font:700 15px var(--f-head);color:var(--cp-ink);display:flex;align-items:center;gap:10px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary::before{content:"+";font:800 17px var(--f-ui);color:var(--cp-red);flex:0 0 auto;width:16px;text-align:center}
.faq-item[open] summary::before{content:"−"}
.faq-item[open] summary{border-bottom:1px solid var(--cp-line);background:#FAFBFC}
.faq-cuerpo{padding:14px 16px 4px}
.faq-cuerpo p{margin-bottom:10px}

/* Contacto / distribuidores */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contacto-layout{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:32px;align-items:start}
.contacto-info h2{font:800 15px var(--f-head);margin:0 0 8px}
.contacto-form{background:#FAFBFC;border:1px solid var(--cp-line);border-radius:12px;padding:18px}
.ventajas-lista{margin:0 0 8px 20px}
.ventajas-lista li{margin-bottom:8px;color:#39424D;font-size:14px;line-height:1.6}
.grid-categorias-dist{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.grid-categorias-dist h3{font:800 14.5px var(--f-head);margin:0 0 4px;color:var(--cp-red)}
.grid-categorias-dist p{font-size:13px;color:#5D6A78;line-height:1.55;margin:0}
@media (max-width:820px){.contacto-layout{grid-template-columns:1fr}}

/* Valoraciones */
.val-resumen{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:#FAFBFC;border:1px solid var(--cp-line);border-radius:14px;padding:18px 20px}
.val-nota{text-align:center}
.val-nota-numero{font:900 40px/1 var(--f-head);color:var(--cp-ink)}
.val-nota-base{font:600 14px var(--f-ui);color:#5D6A78}
.val-estrellas{margin-top:6px}
.val-totales p{margin:0 0 4px;font-size:14px}
.val-nota-ayuda{font-size:12.5px;color:#5D6A78}
.val-porcentajes{display:flex;flex-direction:column;gap:6px;min-width:190px}
.val-pct{display:flex;justify-content:space-between;gap:14px;border:1.5px solid var(--cp-line);background:#fff;border-radius:10px;padding:7px 11px;cursor:pointer;font:600 13px var(--f-ui);color:var(--cp-ink)}
.val-pct b{font-family:var(--f-mono)}
.val-pct:hover,.val-pct.is-active{border-color:var(--cp-red)}
.val-pct--pos.is-active{background:var(--cp-green-bg)}
.val-titulo-lista{font:800 18px var(--f-head);margin:26px 0 10px}
.val-orden{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.val-orden-item{border:1.5px solid var(--cp-line);background:#fff;border-radius:9px;padding:7px 11px;cursor:pointer;font:600 12.5px var(--f-ui);color:#5D6A78}
.val-orden-item.is-active{border-color:var(--cp-red);color:var(--cp-ink);background:#FFF7F6}
.val-lista{display:flex;flex-direction:column;gap:12px}
.val-item{display:flex;gap:14px;border:1px solid var(--cp-line);border-radius:12px;padding:14px 16px;background:#fff}
.val-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#F0F2F5;display:grid;place-items:center;font:800 16px var(--f-head);color:#5D6A78}
.val-cabecera{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline}
.val-nombre{font:800 14px var(--f-head)}
.val-fecha{font-size:12px;color:#98A2B3}
.val-pedido{font-size:12px;color:#98A2B3;margin-top:2px}
.val-puntuacion{margin:6px 0 6px;font-size:12.5px;color:#39424D}
.val-texto{font-size:13.5px;line-height:1.6;color:#39424D;margin:0}
.val-cargando,.val-vacio{color:#5D6A78;font-size:13.5px;margin:6px 0}
@media (max-width:760px){.val-resumen{grid-template-columns:1fr}.val-porcentajes{min-width:0}}

/* Referencia / EAN de la ficha */
.ficha-ref{font:500 12px var(--f-ui);color:#98A2B3;margin:0 0 8px}

/* Etiqueta de reserva en las líneas del carrito */
.linea-reserva{display:inline-block;font:700 10.5px var(--f-ui);color:#B54708;background:#FEF0C7;border-radius:7px;padding:2px 7px;margin-top:4px}

/* Línea de reserva en el carrito */
.linea--reserva{background:#FFFCF3}