/* Tibor Vinilos — calculadora en la ficha (FASE B). * Sistema de diseño real Tibor: claro, azul de marca #0b3989 (23-07-2026), * precio en azul, botones píldora azules. Sin naranja. Scopeado bajo * .tibor-vinilo-calc / .tvc-* para no filtrar al resto del sitio. * Tipografía: hereda Sora/Inter del tema. */ .tibor-vinilo-calc { --tvc-navy: #0b3989; --tvc-navy-hover: #072866; --tvc-teal: #0b3989; --tvc-teal-ink: #072866; --tvc-teal-soft: #eef3fb; --tvc-ink: #0d2438; --tvc-ink-2: #425a72; --tvc-muted: #718096; --tvc-surface: #ffffff; --tvc-surface-2: #eef4f9; --tvc-border: #e2ecf3; --tvc-border-strong: #cddceb; --tvc-radius: 12px; --tvc-radius-sm: 9px; --tvc-shadow: 0 1px 2px rgba(11,57,137,.05), 0 10px 26px rgba(11,57,137,.07); --tvc-shadow-sm: 0 1px 2px rgba(11,57,137,.05), 0 4px 12px rgba(11,57,137,.05); margin: 0 0 1.5rem; color: var(--tvc-ink); max-width: 100%; } .tibor-vinilo-calc *, .tvc-sticky * { box-sizing: border-box; } .tibor-vinilo-calc .tvc-card { background: var(--tvc-surface); border: 1px solid var(--tvc-border); border-radius: var(--tvc-radius); box-shadow: var(--tvc-shadow); padding: 22px; } .tibor-vinilo-calc .tvc-head { margin-bottom: 14px; } .tibor-vinilo-calc .tvc-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tvc-teal-ink); font-weight: 800; } .tibor-vinilo-calc .tvc-block { margin-top: 20px; } .tibor-vinilo-calc .tvc-block:first-of-type { margin-top: 0; } .tibor-vinilo-calc .tvc-h { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 10px; color: var(--tvc-ink); } .tibor-vinilo-calc .tvc-dims { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .tibor-vinilo-calc .tvc-field span { display: block; font-size: .76rem; font-weight: 600; color: var(--tvc-ink-2); margin-bottom: 6px; } .tibor-vinilo-calc .tvc-field input { width: 100%; padding: 11px 12px; border: 1px solid var(--tvc-border-strong); border-radius: var(--tvc-radius-sm); background: var(--tvc-surface); color: var(--tvc-ink); font-size: 1rem; font-family: inherit; font-variant-numeric: tabular-nums; } .tibor-vinilo-calc .tvc-field input:focus { outline: none; border-color: var(--tvc-teal); box-shadow: 0 0 0 3px var(--tvc-teal-soft); } .tibor-vinilo-calc .tvc-opts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .tibor-vinilo-calc .tvc-opt { border: 1.5px solid var(--tvc-border-strong); border-radius: var(--tvc-radius-sm); background: var(--tvc-surface); padding: 12px; cursor: pointer; text-align: left; position: relative; font-family: inherit; color: var(--tvc-ink); display: flex; flex-direction: column; gap: 3px; transition: border-color .12s, box-shadow .12s, background .12s; } .tibor-vinilo-calc .tvc-opt:hover { border-color: var(--tvc-teal); } .tibor-vinilo-calc .tvc-opt:focus-visible { outline: none; border-color: var(--tvc-teal); box-shadow: 0 0 0 3px var(--tvc-teal-soft); } .tibor-vinilo-calc .tvc-opt-name { font-weight: 650; font-size: .9rem; } .tibor-vinilo-calc .tvc-opt-meta { font-size: .76rem; color: var(--tvc-muted); font-variant-numeric: tabular-nums; } .tibor-vinilo-calc .tvc-opt--icon { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 3px 8px; text-align: center; } .tibor-vinilo-calc .tvc-opt-icon { display: inline-flex; color: var(--tvc-teal); } .tibor-vinilo-calc .tvc-opt-icon svg { width: 19px; height: 19px; } .tibor-vinilo-calc .tvc-opt--icon .tvc-opt-meta { grid-column: 1 / -1; } .tibor-vinilo-calc .tvc-opt[aria-pressed="true"] { border-color: var(--tvc-teal); background: var(--tvc-teal-soft); box-shadow: inset 0 0 0 1px var(--tvc-teal); } .tibor-vinilo-calc .tvc-opt-check { display: none; } .tibor-vinilo-calc .tvc-opt[aria-pressed="true"] .tvc-opt-check { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--tvc-teal); color: #fff; display: grid; place-items: center; font-size: 11px; } .tibor-vinilo-calc .tvc-swatch { width: 100%; height: 30px; border-radius: 6px; margin-bottom: 6px; border: 1px solid rgba(120,135,152,.25); } /* Precio: panel claro, número en teal */ .tibor-vinilo-calc .tvc-price { margin-top: 22px; border-radius: var(--tvc-radius); background: var(--tvc-surface-2); border: 1px solid var(--tvc-border); padding: 16px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .tibor-vinilo-calc .tvc-price-lead { display: flex; flex-direction: column; gap: 2px; } .tibor-vinilo-calc .tvc-price-value { font-size: 2.15rem; font-weight: 800; color: var(--tvc-teal); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tibor-vinilo-calc .tvc-price-lead small { font-size: .76rem; color: var(--tvc-muted); } .tibor-vinilo-calc .tvc-price-side { text-align: right; font-size: .82rem; color: var(--tvc-ink-2); font-variant-numeric: tabular-nums; } /* Botón píldora navy */ .tvc-add { margin-top: 14px; width: 100%; border: none; border-radius: 999px; padding: 15px 26px; background: var(--tvc-navy, #0b3989); color: #fff; font-weight: 700; font-size: 1.02rem; cursor: pointer; font-family: inherit; transition: background .12s, transform .06s, opacity .12s; } .tvc-add:hover:not(:disabled) { background: var(--tvc-navy-hover, #072866); } .tvc-add:active:not(:disabled) { transform: translateY(1px); } .tvc-add:disabled { opacity: .5; cursor: not-allowed; } .tibor-vinilo-calc .tvc-msg { margin: .6rem 0 0; min-height: 1.2em; font-size: .85rem; color: var(--tvc-teal-ink); } .tibor-vinilo-calc .tvc-msg.is-error { color: #c0392b; } /* Confianza */ .tibor-vinilo-calc .tvc-trust { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tvc-border); display: grid; gap: 12px; } .tibor-vinilo-calc .tvc-trust-row { display: flex; gap: 12px; align-items: flex-start; } .tibor-vinilo-calc .tvc-trust-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: var(--tvc-teal); } .tibor-vinilo-calc .tvc-trust-ic.navy { background: var(--tvc-navy); } .tibor-vinilo-calc .tvc-trust-ic svg { width: 17px; height: 17px; } .tibor-vinilo-calc .tvc-trust-row b { display: block; font-size: .85rem; } .tibor-vinilo-calc .tvc-trust-row small { display: block; font-size: .77rem; color: var(--tvc-muted); } /* Barra sticky */ .tvc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #e2ecf3; box-shadow: 0 -6px 22px rgba(11,57,137,.09); } .tvc-sticky[hidden] { display: none; } .tvc-sticky-inner { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .tvc-sticky-p { display: flex; flex-direction: column; min-width: 0; } .tvc-sticky-n { font-size: .78rem; color: #718096; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tvc-sticky-total { font-size: 1.3rem; font-weight: 800; color: #0b3989; line-height: 1.1; font-variant-numeric: tabular-nums; } .tvc-sticky .tvc-add { width: auto; margin: 0; padding: 12px 28px; } @media (max-width: 480px) { .tibor-vinilo-calc .tvc-dims { grid-template-columns: 1fr 1fr; } .tvc-sticky-total { font-size: 1.12rem; } .tvc-sticky .tvc-add { padding: 12px 18px; font-size: .92rem; } } @media (prefers-reduced-motion: reduce) { .tibor-vinilo-calc *, .tvc-add { transition: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ Módulo de subida de diseño (.tvu) — pasos, dropzone, lista y specs. Scopeado bajo .tibor-vinilo-calc; usa los tokens --tvc-* del bloque. ══════════════════════════════════════════════════════════════════════════ */ .tibor-vinilo-calc .tvu { margin-top: 22px; } /* Pasos 1→3 */ .tibor-vinilo-calc .tvu-steps { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; } .tibor-vinilo-calc .tvu-step { display: flex; align-items: center; gap: 8px; min-width: 0; } .tibor-vinilo-calc .tvu-step-t { font-size: .8rem; font-weight: 600; color: var(--tvc-muted); white-space: nowrap; transition: color .2s; } .tibor-vinilo-calc .tvu-dot { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tvc-surface-2); color: var(--tvc-muted); border: 1.5px solid var(--tvc-border-strong); font-size: .8rem; font-weight: 700; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; } .tibor-vinilo-calc .tvu-dot-ok { width: 14px; height: 14px; display: none; } .tibor-vinilo-calc .tvu-bar { flex: 1; height: 2px; min-width: 12px; background: var(--tvc-border-strong); border-radius: 2px; position: relative; overflow: hidden; } .tibor-vinilo-calc .tvu-bar::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--tvc-teal); transition: width .35s ease; } .tibor-vinilo-calc .tvu-bar.is-fill::after { width: 100%; } .tibor-vinilo-calc .tvu-step.is-active .tvu-dot { border-color: var(--tvc-teal); color: var(--tvc-teal); box-shadow: 0 0 0 3px var(--tvc-teal-soft); } .tibor-vinilo-calc .tvu-step.is-active .tvu-step-t { color: var(--tvc-ink); } .tibor-vinilo-calc .tvu-step.is-done .tvu-dot { background: var(--tvc-teal); border-color: var(--tvc-teal); color: #fff; } .tibor-vinilo-calc .tvu-step.is-done .tvu-dot-n { display: none; } .tibor-vinilo-calc .tvu-step.is-done .tvu-dot-ok { display: block; } .tibor-vinilo-calc .tvu-step.is-done .tvu-step-t { color: var(--tvc-teal-ink); } /* Dropzone */ .tibor-vinilo-calc .tvu-drop { border: 1.5px dashed var(--tvc-border-strong); border-radius: var(--tvc-radius-sm); background: var(--tvc-surface-2); padding: 20px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .tibor-vinilo-calc .tvu-drop:hover, .tibor-vinilo-calc .tvu-drop:focus-visible, .tibor-vinilo-calc .tvu-drop.is-drag { outline: none; border-color: var(--tvc-teal); background: var(--tvc-teal-soft); } .tibor-vinilo-calc .tvu-drop-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--tvc-teal); margin-bottom: 8px; box-shadow: var(--tvc-shadow-sm); } .tibor-vinilo-calc .tvu-drop-ic svg { width: 24px; height: 24px; } .tibor-vinilo-calc .tvu-drop-main { font-size: .92rem; color: var(--tvc-ink); } .tibor-vinilo-calc .tvu-drop-main b { font-weight: 700; } .tibor-vinilo-calc .tvu-drop-main span { color: var(--tvc-muted); } .tibor-vinilo-calc .tvu-browse { border: none; background: var(--tvc-navy); color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .85rem; cursor: pointer; font-family: inherit; margin-left: 4px; transition: background .12s; } .tibor-vinilo-calc .tvu-browse:hover { background: var(--tvc-navy-hover); } .tibor-vinilo-calc .tvu-drop-hint { display: block; margin-top: 8px; color: var(--tvc-muted); font-size: .76rem; } /* Lista de archivos */ .tibor-vinilo-calc .tvu-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .tibor-vinilo-calc .tvu-file { display: flex; align-items: center; gap: 12px; border: 1px solid var(--tvc-border); border-radius: var(--tvc-radius-sm); background: #fff; padding: 10px 12px; transition: border-color .15s, background .15s; } .tibor-vinilo-calc .tvu-file-ic { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--tvc-surface-2); color: var(--tvc-ink-2); } .tibor-vinilo-calc .tvu-file-ic svg { width: 19px; height: 19px; } .tibor-vinilo-calc .tvu-file-main { min-width: 0; flex: 1; display: flex; flex-direction: column; } .tibor-vinilo-calc .tvu-file-name { font-weight: 650; font-size: .86rem; color: var(--tvc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tibor-vinilo-calc .tvu-file-meta { font-size: .74rem; color: var(--tvc-muted); font-variant-numeric: tabular-nums; } .tibor-vinilo-calc .tvu-file-msg { display: flex; align-items: flex-start; gap: 5px; font-size: .76rem; margin-top: 3px; line-height: 1.35; } .tibor-vinilo-calc .tvu-file-msg svg { width: 14px; height: 14px; flex: none; margin-top: 1px; } .tibor-vinilo-calc .tvu-file[data-state="ready"][data-verified="1"] { border-color: #bfe6cd; } .tibor-vinilo-calc .tvu-file[data-state="ready"][data-verified="1"] .tvu-file-msg { color: #1f9254; } .tibor-vinilo-calc .tvu-file[data-state="ready"][data-verified="0"] .tvu-file-msg { color: var(--tvc-teal-ink); } .tibor-vinilo-calc .tvu-file[data-state="pending"] .tvu-file-msg { color: #b9770f; } .tibor-vinilo-calc .tvu-file[data-state="error"] { border-color: #f3c9c3; background: #fdf3f1; } .tibor-vinilo-calc .tvu-file[data-state="error"] .tvu-file-msg { color: #c0392b; } .tibor-vinilo-calc .tvu-file-del { border: none; background: none; cursor: pointer; color: var(--tvc-muted); padding: 4px; border-radius: 6px; flex: none; transition: color .12s, background .12s; } .tibor-vinilo-calc .tvu-file-del:hover { color: #c0392b; background: #fbeae7; } .tibor-vinilo-calc .tvu-file-del svg { width: 18px; height: 18px; display: block; } .tibor-vinilo-calc .tvu-spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--tvc-border-strong); border-top-color: var(--tvc-teal); animation: tvu-spin .7s linear infinite; } @keyframes tvu-spin { to { transform: rotate(360deg); } } /* Acciones (añadir otro / ver especificaciones) */ .tibor-vinilo-calc .tvu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .tibor-vinilo-calc .tvu-actions button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--tvc-border-strong); background: #fff; color: var(--tvc-navy); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: inherit; transition: border-color .12s, color .12s; } .tibor-vinilo-calc .tvu-actions button:hover { border-color: var(--tvc-teal); color: var(--tvc-teal); } .tibor-vinilo-calc .tvu-actions button svg { width: 16px; height: 16px; } .tibor-vinilo-calc .tvu-add-more[hidden] { display: none; } /* Panel de especificaciones */ .tibor-vinilo-calc .tvu-specs { margin-top: 12px; border: 1px solid var(--tvc-border); border-radius: var(--tvc-radius-sm); background: var(--tvc-surface-2); padding: 14px 16px; } .tibor-vinilo-calc .tvu-specs[hidden] { display: none; } .tibor-vinilo-calc .tvu-specs h4 { margin: 0 0 8px; font-size: .9rem; color: var(--tvc-ink); font-weight: 700; } .tibor-vinilo-calc .tvu-specs ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .tibor-vinilo-calc .tvu-specs li { font-size: .82rem; color: var(--tvc-ink-2); line-height: 1.5; } .tibor-vinilo-calc .tvu-specs b { color: var(--tvc-ink); } .tibor-vinilo-calc .tvu-spec-res { font-variant-numeric: tabular-nums; } @media (max-width: 520px) { .tibor-vinilo-calc .tvu-step-t { display: none; } .tibor-vinilo-calc .tvu-step.is-active .tvu-step-t { display: inline; } } @media (prefers-reduced-motion: reduce) { .tibor-vinilo-calc .tvu-spin { animation: none; } .tibor-vinilo-calc .tvu-bar::after { transition: none; } } /* ── Layout 2 columnas SOLO en fichas de vinilo (scopeado por body.tibor-vinilo-product) ── Galería a la izquierda, calculadora (summary) a la derecha, pestañas a todo el ancho. No afecta a otros productos (DTF/textil) porque va bajo la clase de body. */ body.tibor-vinilo-product .tibor-vinilo-top { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 30px 44px; align-items: start; margin-bottom: 24px; } /* Columna izquierda FIJA (sticky): galería + descripción + descargas. Se suelta al llegar a las pestañas (fin del wrapper). */ body.tibor-vinilo-product .tibor-vinilo-top > .tibor-vinilo-galcol { position: sticky; top: 20px; align-self: start; min-width: 0; } body.tibor-vinilo-product .tibor-vinilo-galcol .woocommerce-product-gallery { margin: 0; } body.tibor-vinilo-product .tibor-vinilo-top > .summary.entry-summary { margin: 0; width: auto; float: none; } @media (max-width: 880px) { body.tibor-vinilo-product .tibor-vinilo-top { grid-template-columns: minmax(0, 1fr); } body.tibor-vinilo-product .tibor-vinilo-top > .tibor-vinilo-galcol { position: static; } } /* ── Bloque bajo la galería: descripción general + descargas ── */ body.tibor-vinilo-product .tibor-vinilo-underimg { margin-top: 18px; } body.tibor-vinilo-product .tibor-vinilo-desc { color: #425a72; font-size: .92rem; line-height: 1.6; } body.tibor-vinilo-product .tibor-vinilo-desc p { margin: 0 0 .7em; } body.tibor-vinilo-product .tibor-vinilo-downloads { margin-top: 14px; display: grid; gap: 10px; } body.tibor-vinilo-product .tvc-dl { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 11px 14px; border: 1px solid #e2ecf3; border-radius: 10px; background: #fff; color: #0b3989; font-weight: 700; font-size: .88rem; transition: border-color .12s, background .12s; } body.tibor-vinilo-product .tvc-dl:hover { border-color: #0b3989; background: #eef3fb; } body.tibor-vinilo-product .tvc-dl svg { width: 20px; height: 20px; flex: none; color: #0b3989; } /* ── Pestaña FAQ (acordeón) — estilo Tibor teal ── */ .tibor-vinilo-faq { max-width: 780px; } .tibor-vinilo-faq .tvc-faq { border: 1px solid #e2ecf3; border-radius: 9px; background: #fff; padding: 0 16px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 4px 12px rgba(11,57,137,.05); } .tibor-vinilo-faq .tvc-faq summary { list-style: none; cursor: pointer; padding: 15px 0; font-weight: 700; color: #0d2438; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .tibor-vinilo-faq .tvc-faq summary::-webkit-details-marker { display: none; } .tibor-vinilo-faq .tvc-faq-plus { color: #0b3989; font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform .15s; } .tibor-vinilo-faq .tvc-faq[open] .tvc-faq-plus { transform: rotate(45deg); } .tibor-vinilo-faq .tvc-faq-a { padding: 0 0 16px; color: #425a72; font-size: .92rem; line-height: 1.6; } /* ── Precio "desde X €" en tienda / relacionados (sustituye el placeholder) ── */ .tibor-vinilo-price-note { color: #0b3989; font-weight: 800; font-variant-numeric: tabular-nums; } .tibor-vinilo-price-note .tibor-vinilo-price-from { color: #718096; font-weight: 600; font-size: .82em; } .tibor-vinilo-price-note .woocommerce-Price-amount { color: #0b3989; } /* ── Productos relacionados (nativos) con estilo Tibor, solo en fichas de vinilo ── */ body.tibor-vinilo-product .related.products > h2, body.tibor-vinilo-product .upsells.products > h2 { color: #0d2438; font-weight: 700; margin-bottom: 18px; } body.tibor-vinilo-product .related.products ul.products li.product .price, body.tibor-vinilo-product .related.products ul.products li.product .price .woocommerce-Price-amount { color: #0b3989; font-weight: 800; } body.tibor-vinilo-product .related.products ul.products li.product a { color: inherit; } /* ── Galería carrusel (flexslider WooCommerce) — solo en fichas de vinilo/Roll Up ── */ /* El sticky (acotado al wrapper .tibor-vinilo-top) se define arriba. */ body.tibor-vinilo-product .woocommerce-product-gallery__image img { border-radius: 12px; } body.tibor-vinilo-product .woocommerce-product-gallery .flex-viewport { border-radius: 12px; } body.tibor-vinilo-product .woocommerce-product-gallery__wrapper { position: relative; } /* Flechas ‹ › sobre la imagen principal (flexslider directionNav). El tema no carga la CSS de flexslider → las dibujamos nosotros (círculo blanco, chevron navy). */ body.tibor-vinilo-product .flex-direction-nav { list-style: none; margin: 0; padding: 0; } body.tibor-vinilo-product .flex-direction-nav li { margin: 0; } body.tibor-vinilo-product .flex-direction-nav a { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.94); color: #0b3989; font-size: 0; box-shadow: 0 2px 12px rgba(11,57,137,.18); cursor: pointer; transition: background .15s, box-shadow .15s, color .15s, opacity .15s; } body.tibor-vinilo-product .flex-direction-nav a:hover { background: #fff; color: #0b3989; box-shadow: 0 6px 18px rgba(11,57,137,.28); } body.tibor-vinilo-product .flex-direction-nav a::before { content: ''; width: 11px; height: 11px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; } body.tibor-vinilo-product .flex-direction-nav .flex-prev { left: 14px; } body.tibor-vinilo-product .flex-direction-nav .flex-next { right: 14px; } body.tibor-vinilo-product .flex-direction-nav .flex-prev::before { transform: rotate(45deg); margin-left: 4px; } body.tibor-vinilo-product .flex-direction-nav .flex-next::before { transform: rotate(-135deg); margin-right: 4px; } /* Con una sola imagen, flexslider marca las flechas como .flex-disabled → ocultar. */ body.tibor-vinilo-product .flex-direction-nav a.flex-disabled { display: none; } /* Tira de miniaturas: carrusel horizontal (una sola fila) con flechas propias. */ body.tibor-vinilo-product .tibor-thumbs { position: relative; margin-top: 12px; } body.tibor-vinilo-product .flex-control-thumbs { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; -ms-overflow-style: none; scrollbar-width: none; } body.tibor-vinilo-product .flex-control-thumbs::-webkit-scrollbar { display: none; } body.tibor-vinilo-product .flex-control-thumbs li { flex: 0 0 auto; width: 64px; float: none; margin: 0; scroll-snap-align: start; } body.tibor-vinilo-product .flex-control-thumbs img { display: block; width: 100%; height: auto; border-radius: 8px; border: 2px solid #e2ecf3; cursor: pointer; opacity: .75; transition: opacity .12s, border-color .12s; } body.tibor-vinilo-product .flex-control-thumbs img.flex-active, body.tibor-vinilo-product .flex-control-thumbs img:hover { border-color: #0b3989; opacity: 1; } /* Flechas de la tira (solo visibles si hay desbordamiento; las inyecta gallery.js). */ body.tibor-vinilo-product .tibor-thumbs-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e2ecf3; background: #fff; color: #0b3989; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 3; padding: 0; box-shadow: 0 2px 8px rgba(11,57,137,.14); transition: color .12s, border-color .12s, opacity .12s; } body.tibor-vinilo-product .tibor-thumbs.is-scrollable .tibor-thumbs-nav { display: flex; } body.tibor-vinilo-product .tibor-thumbs-nav svg { width: 15px; height: 15px; } body.tibor-vinilo-product .tibor-thumbs-nav:hover { color: #0b3989; border-color: #0b3989; } body.tibor-vinilo-product .tibor-thumbs-nav:disabled { opacity: 0; pointer-events: none; } body.tibor-vinilo-product .tibor-thumbs-prev { left: -8px; } body.tibor-vinilo-product .tibor-thumbs-next { right: -8px; } /* Botón de zoom/lightbox */ body.tibor-vinilo-product .woocommerce-product-gallery__trigger { z-index: 5; } /* ══════════════════════════════════════════════════════════════════════════ El tema no carga los estilos por defecto de WooCommerce → pintamos nosotros las PESTAÑAS y la REJILLA de productos relacionados (solo en fichas de vinilo). ══════════════════════════════════════════════════════════════════════════ */ /* ── Pestañas (Descripción / Preguntas frecuentes / Valoraciones) ── */ body.tibor-vinilo-product .woocommerce-tabs { margin-top: 8px; } body.tibor-vinilo-product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 26px; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #e2ecf3; } body.tibor-vinilo-product .woocommerce-tabs ul.tabs li { list-style: none; margin: 0; padding: 0; background: none; border: 0; } body.tibor-vinilo-product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 0 0 12px; font-weight: 700; color: #718096; text-decoration: none; position: relative; font-size: .95rem; } body.tibor-vinilo-product .woocommerce-tabs ul.tabs li a:hover { color: #0d2438; } body.tibor-vinilo-product .woocommerce-tabs ul.tabs li.active a { color: #0b3989; } body.tibor-vinilo-product .woocommerce-tabs ul.tabs li.active a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: #0b3989; border-radius: 2px; } body.tibor-vinilo-product .woocommerce-tabs .panel, body.tibor-vinilo-product .woocommerce-tabs .woocommerce-Tabs-panel { padding: 22px 0 4px; color: #425a72; max-width: none; width: 100%; } body.tibor-vinilo-product .woocommerce-tabs .panel h2, body.tibor-vinilo-product .woocommerce-tabs .panel h3 { color: #0d2438; } /* ── Rejilla de productos relacionados / upsells (tarjetas) ── */ body.tibor-vinilo-product .related.products > h2, body.tibor-vinilo-product .upsells.products > h2 { font-size: 1.6rem; color: #0d2438; font-weight: 700; margin: 0 0 18px; } body.tibor-vinilo-product ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; } @media (max-width: 760px) { body.tibor-vinilo-product ul.products { grid-template-columns: 1fr 1fr; } } body.tibor-vinilo-product ul.products li.product { list-style: none; margin: 0; padding: 0; width: auto; float: none; background: #fff; border: 1px solid #e2ecf3; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 4px 12px rgba(11,57,137,.05); display: flex; flex-direction: column; transition: transform .12s, box-shadow .12s; } body.tibor-vinilo-product ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 10px 26px rgba(11,57,137,.10); } body.tibor-vinilo-product ul.products li.product > a { text-decoration: none; color: inherit; } body.tibor-vinilo-product ul.products li.product img { width: 100%; aspect-ratio: 1/1; object-fit: cover; margin: 0; display: block; background: #eef4f9; } body.tibor-vinilo-product ul.products li.product .woocommerce-loop-product__title { font-size: .95rem; font-weight: 650; color: #0d2438; padding: 12px 14px 2px; margin: 0; line-height: 1.35; } body.tibor-vinilo-product ul.products li.product .price { display: block; padding: 0 14px; margin: 0; font-size: 1rem; } body.tibor-vinilo-product ul.products li.product .button, body.tibor-vinilo-product ul.products li.product .tibor-vinilo-loop-btn { margin: 12px 14px 14px; align-self: flex-start; display: inline-block; text-decoration: none; background: #0b3989; color: #fff; font-weight: 700; font-size: .85rem; padding: 9px 18px; border-radius: 999px; border: none; cursor: pointer; transition: background .12s; } body.tibor-vinilo-product ul.products li.product .button:hover, body.tibor-vinilo-product ul.products li.product .tibor-vinilo-loop-btn:hover { background: #072866; } /* ══════════════════════════════════════════════════════════════════════════ PESTAÑAS REDISEÑADAS (Descripción / FAQ / Valoraciones) — estilo Tibor. Scopeado a body.tibor-vinilo-product. ══════════════════════════════════════════════════════════════════════════ */ body.tibor-vinilo-product .woocommerce-tabs .panel { --v-navy:#0b3989; --v-navy-h:#072866; --v-teal:#0b3989; --v-ink:#0d2438; --v-ink2:#425a72; --v-muted:#718096; --v-border:#e2ecf3; --v-soft:#eef4f9; --v-teal-soft:#eef3fb; --v-shadow:0 1px 2px rgba(11,57,137,.05), 0 6px 16px rgba(11,57,137,.06); } body.tibor-vinilo-product .tvd-wrap, body.tibor-vinilo-product .tvf-wrap { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; } @media (max-width: 860px) { body.tibor-vinilo-product .tvd-wrap, body.tibor-vinilo-product .tvf-wrap { grid-template-columns: 1fr; } } body.tibor-vinilo-product .tvd-head, body.tibor-vinilo-product .tvf-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; } body.tibor-vinilo-product .tvd-ic, body.tibor-vinilo-product .tvf-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--v-soft); color: var(--v-navy); display: grid; place-items: center; } body.tibor-vinilo-product .tvd-ic svg, body.tibor-vinilo-product .tvf-ic svg { width: 24px; height: 24px; } body.tibor-vinilo-product .tvd-head h2, body.tibor-vinilo-product .tvf-head h2 { margin: 2px 0; font-size: 1.5rem; color: var(--v-ink); font-weight: 700; } body.tibor-vinilo-product .tvd-sub, body.tibor-vinilo-product .tvf-sub { margin: 0; color: var(--v-muted); font-size: .92rem; } body.tibor-vinilo-product .tvd-card, body.tibor-vinilo-product .tvf-card { border: 1px solid var(--v-border); border-radius: 14px; background: #fff; margin-bottom: 12px; box-shadow: var(--v-shadow); overflow: hidden; } body.tibor-vinilo-product .tvd-card > summary, body.tibor-vinilo-product .tvf-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-weight: 700; color: var(--v-ink); } body.tibor-vinilo-product .tvd-card > summary::-webkit-details-marker, body.tibor-vinilo-product .tvf-card > summary::-webkit-details-marker { display: none; } body.tibor-vinilo-product .tvd-card-ic, body.tibor-vinilo-product .tvf-card-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--v-soft); color: var(--v-navy); display: grid; place-items: center; } body.tibor-vinilo-product .tvd-card-ic svg, body.tibor-vinilo-product .tvf-card-ic svg { width: 22px; height: 22px; } body.tibor-vinilo-product .tvd-card-t, body.tibor-vinilo-product .tvf-card-t { flex: 1; font-size: 1.02rem; } body.tibor-vinilo-product .tvf-plus { color: var(--v-teal); font-size: 1.5rem; font-weight: 300; line-height: 1; transition: transform .15s; } body.tibor-vinilo-product .tvf-card[open] .tvf-plus { transform: rotate(45deg); } body.tibor-vinilo-product .tvd-chev { color: var(--v-teal); display: grid; transition: transform .15s; } body.tibor-vinilo-product .tvd-chev svg { width: 20px; height: 20px; } body.tibor-vinilo-product .tvd-card[open] .tvd-chev { transform: rotate(180deg); } body.tibor-vinilo-product .tvd-card-b, body.tibor-vinilo-product .tvf-card-b { padding: 0 18px 18px 74px; color: var(--v-ink2); font-size: .93rem; line-height: 1.65; } body.tibor-vinilo-product .tvd-card-b p { margin: 0 0 .7em; } body.tibor-vinilo-product .tvd-plain { color: var(--v-ink2); line-height: 1.7; } body.tibor-vinilo-product .tvd-plain h2, body.tibor-vinilo-product .tvd-plain h3 { color: var(--v-ink); } body.tibor-vinilo-product .tvd-side, body.tibor-vinilo-product .tvf-side { border: 1px solid var(--v-border); border-radius: 16px; background: #fff; padding: 20px; box-shadow: var(--v-shadow); position: sticky; top: 20px; } body.tibor-vinilo-product .tvd-side-title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--v-navy); font-size: 1rem; margin-bottom: 16px; } body.tibor-vinilo-product .tvd-side-title svg { width: 18px; height: 18px; color: var(--v-teal); } body.tibor-vinilo-product .tvd-feat, body.tibor-vinilo-product .tvf-side-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--v-border); } body.tibor-vinilo-product .tvd-feat:first-of-type { border-top: 0; padding-top: 0; } body.tibor-vinilo-product .tvf-side-lead { border-top: 0; padding-top: 0; } body.tibor-vinilo-product .tvd-feat-ic, body.tibor-vinilo-product .tvf-side-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--v-soft); color: var(--v-navy); display: grid; place-items: center; } body.tibor-vinilo-product .tvd-feat-ic svg, body.tibor-vinilo-product .tvf-side-ic svg { width: 21px; height: 21px; } body.tibor-vinilo-product .tvd-feat b, body.tibor-vinilo-product .tvf-side-item b { display: block; font-size: .9rem; color: var(--v-ink); } body.tibor-vinilo-product .tvd-feat small, body.tibor-vinilo-product .tvf-side-item small { display: block; font-size: .8rem; color: var(--v-muted); line-height: 1.5; margin-top: 2px; } body.tibor-vinilo-product .tvf-side-lead b { color: var(--v-navy); font-size: 1rem; } body.tibor-vinilo-product .tvd-side-hl { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--v-border); color: var(--v-teal); font-weight: 700; font-size: .88rem; } body.tibor-vinilo-product .tvd-side-hl svg { width: 18px; height: 18px; } body.tibor-vinilo-product .tvf-side-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 12px 18px; background: var(--v-navy); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; border-radius: 999px; transition: background .12s; } body.tibor-vinilo-product .tvf-side-btn:hover { background: var(--v-navy-h); } body.tibor-vinilo-product .tvf-side-btn svg { width: 18px; height: 18px; } body.tibor-vinilo-product .tvf-side-note { text-align: center; font-size: .76rem; color: var(--v-muted); margin: 8px 0 0; } /* ── Valoraciones (reseñas nativas WooCommerce) reestilizadas ── */ body.tibor-vinilo-product #reviews { --v-navy:#0b3989; --v-navy-h:#072866; --v-teal:#0b3989; --v-ink:#0d2438; --v-muted:#718096; --v-border:#e2ecf3; --v-soft:#eef4f9; --v-teal-soft:#eef3fb; } body.tibor-vinilo-product #reviews .woocommerce-Reviews-title { font-size: 1.4rem; color: var(--v-ink); font-weight: 700; margin: 0 0 16px; } body.tibor-vinilo-product #reviews .commentlist { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; } body.tibor-vinilo-product #reviews .commentlist li.review { border: 1px solid var(--v-border); border-radius: 12px; background: #fff; padding: 16px 18px; box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 4px 12px rgba(11,57,137,.05); } body.tibor-vinilo-product #reviews .woocommerce-noreviews { border: 1px solid var(--v-border); border-radius: 14px; background: var(--v-soft); padding: 22px; text-align: center; color: var(--v-muted); font-weight: 600; } body.tibor-vinilo-product #review_form_wrapper { border: 1px solid var(--v-border); border-radius: 16px; background: #fff; padding: 22px; box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 6px 16px rgba(11,57,137,.06); margin-top: 8px; } body.tibor-vinilo-product #review_form #reply-title { font-size: 1.2rem; color: var(--v-ink); font-weight: 700; margin: 0 0 16px; } body.tibor-vinilo-product #review_form .comment-form label { display: block; font-weight: 700; color: var(--v-ink); font-size: .85rem; margin-bottom: 6px; } body.tibor-vinilo-product #review_form .comment-form input[type="text"], body.tibor-vinilo-product #review_form .comment-form input[type="email"], body.tibor-vinilo-product #review_form .comment-form textarea { width: 100%; padding: 11px 13px; border: 1px solid #cddceb; border-radius: 10px; background: #fff; color: var(--v-ink); font-size: .95rem; font-family: inherit; } body.tibor-vinilo-product #review_form .comment-form input:focus, body.tibor-vinilo-product #review_form .comment-form textarea:focus { outline: none; border-color: var(--v-teal); box-shadow: 0 0 0 3px var(--v-teal-soft); } body.tibor-vinilo-product #review_form .comment-form-comment, body.tibor-vinilo-product #review_form .comment-form-author, body.tibor-vinilo-product #review_form .comment-form-email, body.tibor-vinilo-product #review_form .comment-form-rating { margin: 0 0 16px; } body.tibor-vinilo-product #review_form p.stars { display: inline-flex; gap: 4px; margin: 0; } body.tibor-vinilo-product #review_form p.stars a { position: relative; width: 1.7em; height: 1.7em; text-indent: -999em; overflow: hidden; } body.tibor-vinilo-product #review_form p.stars a::before { content: "\2605"; position: absolute; inset: 0; text-indent: 0; display: grid; place-items: center; font-size: 1.7em; color: #cdd6e2; transition: color .1s; } body.tibor-vinilo-product #review_form p.stars:hover a::before, body.tibor-vinilo-product #review_form p.stars a.active::before, body.tibor-vinilo-product #review_form p.stars a.active ~ a::before { color: #f5a623; } body.tibor-vinilo-product #review_form p.stars a:hover ~ a::before { color: #cdd6e2; } body.tibor-vinilo-product #review_form .form-submit input#submit { background: var(--v-navy); color: #fff; border: none; border-radius: 999px; padding: 13px 28px; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .12s; } body.tibor-vinilo-product #review_form .form-submit input#submit:hover { background: var(--v-navy-h); } /* ── Valoraciones: resumen + estado vacío (mockup Propuesta 2) ── */ body.tibor-vinilo-product #reviews .woocommerce-Reviews-title, body.tibor-vinilo-product #reviews > #comments > .woocommerce-noreviews { display: none; } body.tibor-vinilo-product .tvr { margin-bottom: 24px; } body.tibor-vinilo-product .tvr-top { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: stretch; } @media (max-width: 680px) { body.tibor-vinilo-product .tvr-top { grid-template-columns: 1fr; } } body.tibor-vinilo-product .tvr-summary, body.tibor-vinilo-product .tvr-empty { border: 1px solid #e2ecf3; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 6px 16px rgba(11,57,137,.06); } body.tibor-vinilo-product .tvr-summary { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } body.tibor-vinilo-product .tvr-score { font-size: 3rem; font-weight: 800; color: #0b3989; line-height: 1; font-variant-numeric: tabular-nums; } body.tibor-vinilo-product .tvr-stars { display: inline-flex; gap: 3px; font-size: 1.35rem; } body.tibor-vinilo-product .tvr-star { color: #cdd6e2; } body.tibor-vinilo-product .tvr-star.on { color: #f5a623; } body.tibor-vinilo-product .tvr-count { color: #718096; font-weight: 700; font-size: .9rem; } body.tibor-vinilo-product .tvr-empty { padding: 22px 26px; display: flex; gap: 20px; align-items: center; } body.tibor-vinilo-product .tvr-empty-ic { width: 84px; height: 84px; flex: none; border-radius: 50%; background: #eef4f9; color: #0b3989; display: grid; place-items: center; } body.tibor-vinilo-product .tvr-empty-ic svg { width: 40px; height: 40px; } body.tibor-vinilo-product .tvr-empty h3 { margin: 0 0 6px; color: #0d2438; font-size: 1.35rem; font-weight: 700; } body.tibor-vinilo-product .tvr-empty p { margin: 0; color: #718096; font-size: .92rem; line-height: 1.55; } /* Formulario de reseña en 2 columnas (re-maqueta el nativo) */ body.tibor-vinilo-product #review_form .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; align-items: start; } body.tibor-vinilo-product #review_form .comment-form-rating { grid-column: 1; grid-row: 1; margin: 0; } body.tibor-vinilo-product #review_form .comment-form-comment { grid-column: 2; grid-row: 1 / span 2; margin: 0; } body.tibor-vinilo-product #review_form .comment-form-author { grid-column: 1; grid-row: 2; margin: 0; } body.tibor-vinilo-product #review_form .comment-form-email { grid-column: 1; grid-row: 3; margin: 0; } body.tibor-vinilo-product #review_form .form-submit { grid-column: 1 / -1; grid-row: 4; margin: 0; text-align: right; } body.tibor-vinilo-product #review_form .comment-notes, body.tibor-vinilo-product #review_form .comment-form-cookies-consent { grid-column: 1 / -1; font-size: .8rem; color: #718096; } body.tibor-vinilo-product #review_form .comment-form-comment textarea { min-height: 150px; } @media (max-width: 680px) { body.tibor-vinilo-product #review_form .comment-form { grid-template-columns: 1fr; } body.tibor-vinilo-product #review_form .comment-form-rating, body.tibor-vinilo-product #review_form .comment-form-comment, body.tibor-vinilo-product #review_form .comment-form-author, body.tibor-vinilo-product #review_form .comment-form-email, body.tibor-vinilo-product #review_form .form-submit { grid-column: 1; grid-row: auto; } } /* Arreglo de las estrellas de puntuación (inline-block para ocultar el texto) */ body.tibor-vinilo-product #review_form p.stars a { display: inline-block; } body.tibor-vinilo-product #review_form p.stars { line-height: 1; } /* ══════════════════════════════════════════════════════════════════════════ PRODUCTOS RELACIONADOS (Propuesta 3) — tarjetas Tibor. Solo en fichas vinilo. ══════════════════════════════════════════════════════════════════════════ */ body.tibor-vinilo-product .tvr-rel { --v-navy:#0b3989; --v-navy-h:#072866; --v-teal:#0b3989; --v-amber:#e79a1f; --v-purple:#7c3aed; --v-ink:#0d2438; --v-muted:#718096; --v-border:#e2ecf3; --v-soft:#eef4f9; margin-top: 44px; } body.tibor-vinilo-product .tvr-rel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } body.tibor-vinilo-product .tvr-rel-head h2 { margin: 0; font-size: 1.7rem; color: var(--v-ink); font-weight: 700; } body.tibor-vinilo-product .tvr-rel-head h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--v-teal); border-radius: 2px; margin-top: 8px; } body.tibor-vinilo-product .tvr-rel-nav { display: flex; gap: 10px; flex: none; } body.tibor-vinilo-product .tvr-rel-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--v-border); background: #fff; color: var(--v-navy); display: grid; place-items: center; cursor: pointer; transition: border-color .12s, color .12s, opacity .12s; } body.tibor-vinilo-product .tvr-rel-nav button:hover:not(:disabled) { border-color: var(--v-teal); color: var(--v-teal); } body.tibor-vinilo-product .tvr-rel-nav button:disabled { opacity: .4; cursor: default; } body.tibor-vinilo-product .tvr-rel-nav svg { width: 20px; height: 20px; } /* Carril (carrusel horizontal con scroll-snap) */ body.tibor-vinilo-product .tvr-rel-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: thin; } body.tibor-vinilo-product .tvr-rel-track::-webkit-scrollbar { height: 8px; } body.tibor-vinilo-product .tvr-rel-track::-webkit-scrollbar-thumb { background: #d6e0ec; border-radius: 8px; } body.tibor-vinilo-product .tvr-card { flex: 0 0 calc((100% - 54px) / 4); min-width: 240px; scroll-snap-align: start; background: #fff; border: 1px solid var(--v-border); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 8px 22px rgba(11,57,137,.07); display: flex; flex-direction: column; } @media (max-width: 1100px) { body.tibor-vinilo-product .tvr-card { flex-basis: calc((100% - 36px) / 3); } } @media (max-width: 820px) { body.tibor-vinilo-product .tvr-card { flex-basis: calc((100% - 18px) / 2); } } @media (max-width: 520px) { body.tibor-vinilo-product .tvr-card { flex-basis: 82%; } } body.tibor-vinilo-product .tvr-card-media { position: relative; aspect-ratio: 4/3; background: var(--v-soft); } body.tibor-vinilo-product .tvr-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } body.tibor-vinilo-product .tvr-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); } body.tibor-vinilo-product .tvr-badge svg { width: 15px; height: 15px; } body.tibor-vinilo-product .tvr-badge--navy { background: var(--v-navy); } body.tibor-vinilo-product .tvr-badge--teal { background: var(--v-teal); } body.tibor-vinilo-product .tvr-badge--amber { background: var(--v-amber); } body.tibor-vinilo-product .tvr-badge--purple { background: var(--v-purple); } body.tibor-vinilo-product .tvr-card-chip { position: absolute; left: 18px; bottom: -26px; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--v-navy); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(11,57,137,.15); z-index: 2; } body.tibor-vinilo-product .tvr-card-chip svg { width: 26px; height: 26px; } body.tibor-vinilo-product .tvr-card-body { padding: 38px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } body.tibor-vinilo-product .tvr-card-title { margin: 0; font-size: 1.18rem; font-weight: 700; color: var(--v-ink); } body.tibor-vinilo-product .tvr-card-desc { margin: 0; color: var(--v-muted); font-size: .88rem; line-height: 1.5; } body.tibor-vinilo-product .tvr-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; margin: 2px 0 4px; } body.tibor-vinilo-product .tvr-pill svg { width: 15px; height: 15px; } body.tibor-vinilo-product .tvr-pill--navy { background: #e7eef5; color: var(--v-navy); } body.tibor-vinilo-product .tvr-pill--teal { background: #eef3fb; color: var(--v-teal); } body.tibor-vinilo-product .tvr-pill--amber { background: #fdf1dc; color: #b9770f; } body.tibor-vinilo-product .tvr-pill--purple { background: #efe9fd; color: var(--v-purple); } body.tibor-vinilo-product .tvr-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--v-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.tibor-vinilo-product .tvr-card-price small { display: block; color: var(--v-muted); font-size: .72rem; } body.tibor-vinilo-product .tvr-card-price b { color: var(--v-teal); font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; } body.tibor-vinilo-product .tvr-card-price .woocommerce-Price-amount { color: var(--v-teal); } body.tibor-vinilo-product .tvr-card-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--v-navy); color: #fff; text-decoration: none; font-weight: 700; font-size: .82rem; padding: 10px 16px; border-radius: 999px; transition: background .12s; white-space: nowrap; } body.tibor-vinilo-product .tvr-card-btn:hover { background: var(--v-navy-h); } body.tibor-vinilo-product .tvr-card-btn svg { width: 16px; height: 16px; } /* Iconos de fuente (Font Awesome / Tabler) en las tarjetas: son los mismos del menú. Conviven con los SVG inline, que siguen siendo el respaldo si no hay coincidencia. */ body.tibor-vinilo-product .tvr-badge i { font-size: 14px; line-height: 1; } body.tibor-vinilo-product .tvr-pill i { font-size: 14px; line-height: 1; } body.tibor-vinilo-product .tvr-card-chip i { font-size: 24px; line-height: 1; } /* Precio anterior tachado cuando el producto está de oferta en WooCommerce. */ body.tibor-vinilo-product .tvr-card-price s { color: var(--v-muted); font-size: .95rem; font-weight: 600; margin-left: 6px; } body.tibor-vinilo-product .tvr-card-price s .woocommerce-Price-amount { color: var(--v-muted); } /* Barra de confianza */ body.tibor-vinilo-product .tvr-rel-trust { margin-top: 24px; background: #fff; border: 1px solid var(--v-border); border-radius: 18px; padding: 20px 10px; display: grid; grid-template-columns: repeat(4, 1fr); box-shadow: 0 1px 2px rgba(11,57,137,.05), 0 6px 16px rgba(11,57,137,.06); } body.tibor-vinilo-product .tvr-rel-trust-i { display: flex; gap: 12px; align-items: center; padding: 4px 22px; border-left: 1px solid var(--v-border); } body.tibor-vinilo-product .tvr-rel-trust-i:first-child { border-left: 0; } body.tibor-vinilo-product .tvr-rel-trust-ic { color: var(--v-navy); flex: none; } body.tibor-vinilo-product .tvr-rel-trust-ic svg { width: 30px; height: 30px; } body.tibor-vinilo-product .tvr-rel-trust-i b { display: block; color: var(--v-ink); font-size: .9rem; } body.tibor-vinilo-product .tvr-rel-trust-i small { display: block; color: var(--v-muted); font-size: .8rem; } @media (max-width: 820px) { body.tibor-vinilo-product .tvr-rel-trust { grid-template-columns: 1fr 1fr; gap: 14px 0; } body.tibor-vinilo-product .tvr-rel-trust-i:nth-child(3) { border-left: 0; } } @media (max-width: 480px) { body.tibor-vinilo-product .tvr-rel-trust { grid-template-columns: 1fr; } body.tibor-vinilo-product .tvr-rel-trust-i { border-left: 0; } } /* Desglose fiscal de Gran formato, igual que en Stickers. */ .tibor-vinilo-calc .tvc-price { display: block; } .tibor-vinilo-calc .tvc-tax-breakdown { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--tvc-border); } .tibor-vinilo-calc .tvc-tax-breakdown > div, .tibor-vinilo-calc .tvc-price-total { display: flex; justify-content: space-between; gap: 12px; } .tibor-vinilo-calc .tvc-tax-breakdown > div { padding: 2px 0; } .tibor-vinilo-calc .tvc-tax-breakdown dt, .tibor-vinilo-calc .tvc-tax-breakdown dd { margin: 0; color: var(--tvc-muted); font-size: 14px; font-weight: 600; } .tibor-vinilo-calc .tvc-tax-breakdown dd { color: var(--tvc-navy); white-space: nowrap; } .tibor-vinilo-calc .tvc-price-total { align-items: baseline; } .tibor-vinilo-calc .tvc-price-total > span { color: var(--tvc-muted); font-size: 13px; font-weight: 600; } .tibor-vinilo-calc .tvc-price-side { margin-top: 8px; } @media (max-width: 520px) { .tibor-vinilo-calc .tvc-price-total { align-items: flex-start; flex-direction: column; } } /* Móviles muy estrechos (320-360 px): tabla de cantidades y título de relacionados sin desbordar. 25-10-2026 */ @media (max-width: 360px) { .tibor-forex-calc .tfc-qty-head, .tibor-forex-calc .tfc-qty-row, .tibor-metacrilato-calc .tfc-qty-head, .tibor-metacrilato-calc .tfc-qty-row, .tibor-lonas-calc .tlc-qty-head, .tibor-lonas-calc .tlc-qty-row { grid-template-columns: minmax(88px, 1.15fr) minmax(70px, .85fr) minmax(70px, .85fr); gap: 6px; padding-left: 10px; padding-right: 10px; } body.tibor-vinilo-product .tvr-rel-head h2 { min-width: 0; font-size: 1.45rem; } }