/* ─── COSPOR STORE — CSS ─────────────────────────────────────── */
/* Fuentes (Barlow Condensed, Inter, Oswald, Anton) ahora self-hosteadas en
assets/fonts/cospor-fonts.css (enqueued por separado en functions.php).
Antes había @font-face inline a fonts.gstatic.com como fallback porque
LiteSpeed CSS Combine eliminaba el a Google Fonts — ya no es
necesario porque eliminamos todas las refs a gstatic. */
/* Skip-link accesibilidad (oculto por default, visible on focus).
Sirve para usuarios de teclado/screen reader: tab desde la URL bar
muestra el botón "Saltar al contenido" antes que la navbar. */
.cospor-skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 999999;
padding: 10px 16px;
background: #FF5200;
color: #fff;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .04em;
text-decoration: none;
border-radius: 4px;
transition: top .15s ease;
}
.cospor-skip-link:focus,
.cospor-skip-link:focus-visible {
top: 8px;
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Focus-visible global: usuarios de teclado ven outline naranja en cualquier
elemento focusable (links, buttons, inputs). Mouse users no ven outline
(porque :focus-visible solo aplica con teclado/AT). */
:focus-visible {
outline: 2px solid #FF5200;
outline-offset: 2px;
}
/* Texto solo para screen readers (oculto visualmente). Patrón estándar de
WP/WCAG: clip + position:absolute para que screen readers lo lean pero
no ocupe espacio visual. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* Inputs ya tienen estilos custom de focus en cospor.css más abajo, evitamos
doble outline en ellos. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline-offset: 0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0c0c0c;
--surface: #181818;
--surface2: #222222;
--surface3: #2a2a2a;
--orange: #D33523;
--orange-d: #B02C1E;
--text: #f0eeeb;
--text-2: #b0aca6;
--muted: #6a6560;
--border: #2c2c2c;
--font-head: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ── UTILITY ── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section-label {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(22px, 3vw, 30px);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text);
}
.orange-underline {
display: inline-block;
position: relative;
}
.orange-underline::after {
content: '';
display: block;
height: 3px;
width: 40px;
background: var(--orange);
margin-top: 6px;
}
.btn-orange {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--orange);
color: #fff;
font-family: var(--font-head);
font-weight: 800;
font-size: 14px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 13px 26px;
border: 2px solid var(--orange);
cursor: pointer;
transition: background .18s, transform .15s;
}
.btn-orange:hover { background: var(--orange-d); border-color: var(--orange-d); transform: translateY(-1px); }
.btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--text);
font-family: var(--font-head);
font-weight: 800;
font-size: 14px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 13px 26px;
border: 2px solid rgba(255,255,255,.35);
cursor: pointer;
transition: border-color .18s, transform .15s;
}
.btn-outline:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
color: var(--text-2);
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
letter-spacing: .07em;
text-transform: uppercase;
padding: 10px 22px;
border: 1px solid var(--border);
cursor: pointer;
transition: border-color .18s, color .18s;
}
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
/* ── TOPBAR ── */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 7px 0;
font-size: 12px;
color: var(--text-2);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; }
.topbar-links { display: flex; gap: 24px; }
.topbar-links a { transition: color .15s; }
.topbar-links a:hover { color: var(--orange); }
/* ── NAVBAR ── */
.navbar {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(8,8,8,.96);
border-bottom: 1px solid transparent;
padding: 0;
transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.navbar.at-top {
background: rgba(8,8,8,.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.navbar.scrolled {
background: rgba(8,8,8,.97);
border-bottom-color: rgba(255,255,255,.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.navbar .container {
display: flex;
align-items: center;
height: 80px;
gap: 0;
}
.nav-logo { display: flex; align-items: center; margin-right: 36px; flex-shrink: 0; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.nav-link {
font-family: 'Inter', var(--font-body);
font-weight: 500;
font-size: 14px;
letter-spacing: .02em;
text-transform: none;
color: rgba(255,255,255,.72);
padding: 0 18px;
height: 80px;
display: flex;
align-items: center;
gap: 4px;
transition: color .2s;
position: relative;
white-space: nowrap;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; }
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 2px;
background: var(--orange);
}
.nav-link.highlight { color: var(--orange); font-weight: 600; }
.nav-link.highlight:hover { color: var(--orange-d); }
.nav-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-shrink: 0; }
/* ── NAV INLINE SEARCH ── */
.nav-search {
display: flex;
align-items: stretch;
flex: 1;
min-width: 0;
margin: 0 18px 0 24px;
}
/* Fallback form (cuando FiboSearch no está activo) */
.nav-search-fallback {
display: flex;
flex: 1;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
overflow: hidden;
}
.nav-search-fallback:focus-within {
border-color: var(--orange);
background: rgba(255,255,255,.08);
}
.nav-search-input {
flex: 1;
min-width: 0;
padding: 0 14px;
background: transparent;
border: none;
outline: none;
font-family: 'Inter', var(--font-body);
font-size: 14px;
color: #fff;
height: 40px;
}
.nav-search-input::placeholder { color: rgba(255,255,255,.45); }
.nav-search-submit {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
background: var(--orange);
border: none;
cursor: pointer;
color: #fff;
transition: background .2s;
}
.nav-search-submit:hover { background: var(--orange-d); }
/* Overrides para FiboSearch (Pirx style) dentro del navbar — specificity alta */
html body .nav-search .dgwt-wcas-search-wrapp,
html body .nav-search .dgwt-wcas-search-wrapp[style] {
display: flex !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
flex: 1 1 auto !important;
box-sizing: border-box !important;
}
.nav-search .dgwt-wcas-search-wrapp {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.nav-search .dgwt-wcas-search-form,
.nav-search .dgwt-wcas-style-pirx .dgwt-wcas-search-form,
html body .nav-search form.dgwt-wcas-search-form {
display: flex !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
flex: 1 1 auto !important;
}
.nav-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp,
html body .nav-search .dgwt-wcas-sf-wrapp {
position: relative !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 8px !important;
height: 40px !important;
padding: 0 !important;
box-shadow: none !important;
transition: border-color .2s, background .2s;
display: flex !important;
align-items: stretch !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
.nav-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp:focus-within {
border-color: var(--orange) !important;
background: rgba(255,255,255,.08) !important;
}
.nav-search .dgwt-wcas-style-pirx input.dgwt-wcas-search-input[type="search"],
.nav-search .dgwt-wcas-search-input {
flex: 1 1 auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #fff !important;
font-family: 'Inter', var(--font-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
height: 38px !important;
line-height: 38px !important;
padding: 0 56px 0 14px !important;
margin: 0 !important;
border-radius: 0 !important;
min-width: 0 !important;
width: auto !important;
}
.nav-search .dgwt-wcas-search-input::placeholder { color: rgba(255,255,255,.45) !important; opacity: 1 !important; }
.nav-search .dgwt-wcas-style-pirx .dgwt-wcas-search-submit,
.nav-search .dgwt-wcas-search-submit,
html body .nav-search .dgwt-wcas-search-submit {
position: absolute !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: auto !important;
transform: none !important;
background: var(--orange) !important;
border: none !important;
color: #fff !important;
width: 48px !important;
height: auto !important;
border-radius: 0 8px 8px 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: none !important;
flex-shrink: 0 !important;
z-index: 2 !important;
}
.nav-search .dgwt-wcas-search-submit:hover { background: var(--orange-d) !important; }
.nav-search .dgwt-wcas-search-submit svg,
.nav-search .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier {
width: 18px !important;
height: 18px !important;
fill: #fff !important;
}
.nav-search .dgwt-wcas-search-submit svg path { fill: #fff !important; }
.nav-search .dgwt-wcas-preloader,
.nav-search .dgwt-wcas-voice-search,
.nav-search .dgwt-wcas-close,
.nav-search .js-dgwt-wcas-search-close { display: none !important; }
/* Panel de sugerencias: dark theme */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-style-pirx .dgwt-wcas-suggestions-wrapp {
background: #1a1a1a !important;
border: 1px solid rgba(255,255,255,.12) !important;
color: #fff !important;
border-radius: 8px !important;
margin-top: 6px !important;
}
.dgwt-wcas-suggestion,
.dgwt-wcas-suggestion * { color: #fff !important; }
.dgwt-wcas-suggestion-product { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion-hovered,
.dgwt-wcas-suggestion.selected { background: rgba(255,82,0,.12) !important; }
.dgwt-wcas-st { color: rgba(255,255,255,.85) !important; }
.dgwt-wcas-st-price { color: var(--orange) !important; font-weight: 600 !important; }
.dgwt-wcas-st-title strong,
.dgwt-wcas-st strong { color: var(--orange) !important; }
.nav-icon-btn {
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.65);
background: none;
border: none;
cursor: pointer;
transition: color .2s;
position: relative;
padding: 4px;
width: auto; height: auto;
}
.nav-icon-btn:hover { color: var(--orange); background: none; }
.cart-badge {
position: absolute;
top: -4px; right: -7px;
width: 16px; height: 16px;
background: var(--orange);
color: #fff;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Inter', var(--font-body);
line-height: 1;
}
/* push body content down to account for fixed navbar */
.topbar + .navbar { top: 0; }
.hero-carousel { padding-top: 0; }
/* ── HERO CAROUSEL ── */
.hero-carousel {
position: relative;
min-height: 520px;
height: calc(100vh - 117px); /* descuenta topbar (~36px) + navbar (81px) */
max-height: 720px;
overflow: hidden;
background: #0c0c0c;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .7s ease;
pointer-events: none;
}
.hero-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1;
}
.hero-slide--default {
display: flex;
align-items: center;
cursor: pointer;
}
.hero-slide--default::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 45%, rgba(0, 0, 0, 0.2) 75%);
z-index: 1;
pointer-events: none;
}
.hero-slide--hot-sale,
.hero-slide--loboo {
display: block;
text-decoration: none;
}
.hero-slide--hot-sale {
background: #000;
cursor: pointer;
}
.hero-slide--loboo {
background: #fff;
cursor: pointer;
}
.hero-slide--hot-sale picture,
.hero-slide--loboo picture {
display: block;
width: 100%;
height: 100%;
}
.hero-slide--hot-sale img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
}
.hero-slide--loboo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* Sin picture wrapper, el img directo dentro del necesita position:absolute
para llenar (porque el es position:absolute con inset:0 pero el img inline
no se estira sin tamaño explícito por padre relativo). */
.hero-slide--loboo > img.hero-loboo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* Flechas */
.hero-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background .18s ease, border-color .18s ease, opacity .18s ease;
opacity: .85;
}
.hero-carousel-arrow:hover {
background: rgba(0, 0, 0, 0.7);
border-color: rgba(255, 255, 255, 0.55);
opacity: 1;
}
.hero-carousel-arrow svg { width: 22px; height: 22px; }
.hero-carousel-arrow--prev { left: 18px; }
.hero-carousel-arrow--next { right: 18px; }
/* Dots */
.hero-carousel-dots {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: 10px;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.35);
border-radius: 999px;
backdrop-filter: blur(4px);
}
.hero-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: none;
padding: 0;
cursor: pointer;
transition: background .18s ease, transform .18s ease, width .25s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-dot.is-active {
background: #D33523;
width: 26px;
border-radius: 6px;
}
/* Si hay un solo slide, ocultar controles */
.hero-carousel:not(.has-multiple) .hero-carousel-arrow,
.hero-carousel:not(.has-multiple) .hero-carousel-dots {
display: none;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
transform: scale(1.03);
transition: transform 8s ease-out;
}
.hero-bg.loaded { transform: scale(1); }
.hero-content {
position: relative;
z-index: 2;
padding: 0 24px 0 120px;
width: 100%;
box-sizing: border-box;
}
.hero-content .container {
display: block;
max-width: 100%;
margin: 0;
padding-left: 0;
padding-right: 24px;
}
.hero-copy {
max-width: 100%;
padding-left: 0;
text-align: left;
}
.hero-eyebrow {
color: #D33523;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 28px;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 700;
}
.hero-title { padding-top: 6px; }
.hero-title {
font-family: 'Anton', sans-serif;
font-size: 120px;
line-height: 0.9;
letter-spacing: 0;
font-weight: 400;
color: #fff;
margin: 0 0 20px;
max-width: none;
text-transform: uppercase;
word-break: normal;
white-space: nowrap;
}
.hero-title br {
display: block;
}
.hero-title .highlight {
color: #D33523;
}
.hero-description {
color: #cccccc;
font-size: 16px;
max-width: 420px;
line-height: 1.6;
margin-bottom: 20px;
font-family: 'Inter', system-ui, sans-serif;
}
.hero-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-btn-primary {
background: #D33523;
color: #fff;
padding: 14px 26px;
font-weight: 600;
border: none;
text-transform: uppercase;
text-decoration: none;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.18s;
}
.hero-btn-primary:hover {
background: #e04e00;
color: #fff;
}
.hero-btn-secondary {
border: 1px solid #666;
color: #fff;
padding: 14px 26px;
background: transparent;
text-transform: uppercase;
text-decoration: none;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.18s, background 0.18s;
}
.hero-btn-secondary:hover {
border-color: #999;
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
@media (max-width: 900px) {
.hero-title {
font-size: clamp(56px, 14vw, 110px);
}
}
@media (max-width: 768px) {
.hero-content {
padding-left: 24px;
max-width: 100%;
}
/* Mobile: flechas más chicas y pegadas al borde para no tapar contenido */
.hero-carousel-arrow {
width: 36px;
height: 36px;
}
.hero-carousel-arrow svg { width: 18px; height: 18px; }
.hero-carousel-arrow--prev { left: 10px; }
.hero-carousel-arrow--next { right: 10px; }
/* Dots más cerca del fondo del slide */
.hero-carousel-dots { bottom: 14px; }
}
/* ── Checkout (spec: grid + botones; el layout real es .cospor-checkout-wrap hijo del form) ── */
body.woocommerce-checkout form.checkout.woocommerce-checkout .cospor-checkout-wrap {
display: grid;
grid-template-columns: 1fr 380px;
gap: 40px;
align-items: start;
}
@media (max-width: 900px) {
body.woocommerce-checkout form.checkout.woocommerce-checkout .cospor-checkout-wrap {
grid-template-columns: 1fr;
}
}
body.woocommerce-checkout form.checkout.woocommerce-checkout .form-row {
margin-bottom: 18px;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout button.button {
background: #D33523;
color: #fff;
padding: 16px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout button.button:hover {
background: #e04e00;
color: #fff;
}
/* ── HERO TRUST STRIP ── */
.hero-trust {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 18px 0;
}
.hero-trust .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.trust-item {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 20px;
border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
color: var(--orange);
}
.trust-item-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text);
line-height: 1.2;
}
.trust-item-sub {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
/* ── FIND SECTION ── */
.find-section {
background: #f5f5f5;
color: #111;
padding: 56px 0 60px;
}
/* Compensar el navbar sticky al scrollear a anchors dentro de esta sección. */
#categorias,
#find-brands { scroll-margin-top: 90px; }
.find-section .section-header {
text-align: center;
margin-bottom: 36px;
}
.find-section .section-label {
font-family: 'Oswald', var(--font-head);
font-weight: 700;
font-size: clamp(24px, 2.5vw, 32px);
letter-spacing: .03em;
text-transform: uppercase;
color: #111;
}
.find-section .orange-underline::after {
margin: 8px auto 0;
width: 40px;
height: 3px;
}
.find-cols {
display: flex;
flex-direction: column;
gap: 32px;
}
.find-cols > div {
display: flex;
flex-direction: column;
}
.find-col-title {
font-family: 'Inter', var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: #888;
margin-bottom: 14px;
}
/* Type cards — fila horizontal ancho completo */
.type-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.type-card {
position: relative;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 3 / 2;
cursor: pointer;
background: #1a1a1a;
}
.type-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease, filter .4s ease;
filter: brightness(.88);
}
.type-card:hover .type-card-img {
transform: scale(1.06);
filter: brightness(1);
}
.type-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.08) 55%, transparent 100%);
display: flex;
align-items: flex-end;
padding: 12px;
}
.type-card-label {
font-family: 'Inter', var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
line-height: 1.2;
}
/* Outline button for light section */
.btn-outline-dark {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #111;
font-family: 'Inter', var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 11px 22px;
border: 1.5px solid #333;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
border-radius: 4px;
width: 100%;
justify-content: center;
}
.btn-outline-dark:hover {
background: #111;
color: #fff;
border-color: #111;
}
/* Brand logos — compact 2-col */
.brand-logos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 14px;
align-content: start;
}
.brand-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 16px 10px 12px;
border: 1px solid #e5e5e5;
background: #fff;
cursor: pointer;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
transition: box-shadow .22s, border-color .22s, transform .22s;
min-height: 70px;
position: relative;
}
/* Skeleton: muestra el nombre de la marca como texto mientras la imagen
carga. Se oculta cuando .brand-logo-img.is-loaded aparece (onload). */
.brand-card-skeleton {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
background: linear-gradient(90deg, #f5f5f5 0%, #f0f0f0 50%, #f5f5f5 100%);
background-size: 200% 100%;
animation: brandSkeleton 1.6s linear infinite;
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: .05em;
text-transform: uppercase;
color: #888;
text-align: center;
line-height: 1.1;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
.brand-card .brand-logo-img { position: relative; z-index: 2; opacity: 0; transition: opacity .25s; }
.brand-card .brand-logo-img.is-loaded { opacity: 1; }
.brand-card .brand-logo-img.is-loaded ~ .brand-card-cta { z-index: 3; }
.brand-card .brand-logo-img.is-loaded + .brand-card-cta,
.brand-card:has(.brand-logo-img.is-loaded) .brand-card-skeleton { display: none; }
/* Fallback si la imagen falla: dejamos el skeleton sin animación, con el nombre. */
.brand-card--img-failed .brand-card-skeleton {
animation: none;
background: #fafafa;
}
@keyframes brandSkeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.brand-card:hover {
border-color: var(--orange);
box-shadow: 0 4px 14px rgba(0,0,0,.1), 0 0 0 1px var(--orange);
transform: translateY(-2px);
}
.brand-logo-img {
height: 30px;
width: auto;
max-width: 54px;
object-fit: contain;
}
.brand-card-name {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 15px;
letter-spacing: .06em;
text-transform: uppercase;
color: #1a1a1a;
text-align: center;
line-height: 1.1;
}
.brand-card--text:hover .brand-card-name { color: var(--orange); }
.brand-name {
font-family: 'Inter', var(--font-body);
font-weight: 600;
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
color: #666;
}
/* ── FEATURED PRODUCTS ── */
.products-section {
background: var(--bg);
padding: 60px 0 64px;
border-top: 1px solid var(--border);
}
.products-section .section-header {
text-align: center;
margin-bottom: 32px;
}
.products-tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 36px;
}
.tab-btn {
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
padding: 9px 22px;
background: none;
border: 1px solid transparent;
cursor: pointer;
transition: color .18s, border-color .18s;
position: relative;
}
.tab-btn.active {
color: var(--orange);
border-color: var(--border);
background: var(--surface);
}
.tab-btn:not(.active):hover { color: var(--text); }
.products-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 32px;
}
.product-card {
background: var(--surface);
border: 1px solid var(--border);
overflow: hidden;
cursor: pointer;
transition: border-color .2s, transform .2s;
position: relative;
}
.product-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.product-img-wrap {
position: relative;
aspect-ratio: 1;
background: #fff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.product-img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
}
.product-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(
-45deg,
#1e1e1e,
#1e1e1e 5px,
#222 5px,
#222 10px
);
font-family: monospace;
font-size: 10px;
color: #444;
text-align: center;
padding: 8px;
line-height: 1.4;
}
.product-badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--orange);
color: #fff;
font-family: var(--font-head);
font-weight: 800;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 8px;
}
.product-add-btn {
position: absolute;
bottom: 8px;
right: 8px;
width: 34px;
height: 34px;
background: var(--orange);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
opacity: 0;
transform: scale(.8);
transition: opacity .2s, transform .2s;
}
.product-card:hover .product-add-btn { opacity: 1; transform: scale(1); }
.product-card:hover .product-add-btn:hover { background: var(--orange-d); }
.product-info { padding: 12px 14px 14px; }
.product-name {
font-family: var(--font-head);
font-weight: 700;
font-size: 14px;
letter-spacing: .03em;
color: var(--text);
line-height: 1.2;
margin-bottom: 4px;
text-transform: uppercase;
}
.product-compat {
font-size: 11px;
color: var(--muted);
margin-bottom: 10px;
line-height: 1.3;
}
.product-price {
font-family: var(--font-head);
font-weight: 800;
font-size: 20px;
color: var(--orange);
letter-spacing: .02em;
}
.product-price-old {
font-size: 13px;
color: var(--muted);
text-decoration: line-through;
margin-left: 6px;
font-weight: 400;
}
.products-cta { text-align: center; }
/* ── WHY COSPOR ── */
.why-section {
background: var(--surface);
padding: 0;
border-top: 1px solid var(--border);
overflow: hidden;
}
.why-inner {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 400px;
align-items: center;
}
.why-content {
padding: 64px 56px 64px 24px;
margin-left: max(24px, calc((100vw - 1240px) / 2 + 24px));
}
.why-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 40px;
margin-top: 36px;
}
.why-feature { display: flex; gap: 14px; }
.why-feature-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border: 1.5px solid var(--orange);
display: flex;
align-items: center;
justify-content: center;
color: var(--orange);
margin-top: 2px;
}
.why-feature-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 14px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 5px;
}
.why-feature-text { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.why-image-side {
position: relative;
overflow: hidden;
}
.why-image-side img {
width: 100%;
height: 100%;
object-fit: cover;
}
.why-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--surface) 0%, transparent 30%);
}
.why-ig-pill {
position: absolute;
bottom: 28px;
left: 24px;
right: 24px;
background: rgba(8,8,8,.82);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
border-radius: 6px;
}
.why-ig-handle {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-2);
font-size: 13px;
flex: 1;
}
.why-ig-handle svg { color: var(--orange); flex-shrink: 0; }
.why-ig-btn {
background: var(--orange);
color: #fff;
font-family: var(--font-head);
font-weight: 800;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 8px 16px;
border: none;
cursor: pointer;
transition: background .18s;
}
.why-ig-btn:hover { background: var(--orange-d); }
/* ── REVIEWS ── */
.reviews-section {
background: var(--bg);
padding: 44px 0 36px;
border-top: 1px solid var(--border);
}
.reviews-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.reviews-nav { display: flex; gap: 8px; }
.rev-nav-btn {
width: 40px;
height: 40px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .18s, border-color .18s, color .18s;
}
.rev-nav-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* ── Cinta transportadora (marquee) — usada cuando hay reviews dinámicas.
El grid es un viewport scrolleable (overflow-x:auto). JS controla la
posición vía scrollLeft + requestAnimationFrame (desktop y mobile). */
.reviews-grid.reviews-marquee {
display: block;
overflow-x: auto;
overflow-y: hidden;
position: relative;
scrollbar-width: none; /* Firefox */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.reviews-grid.reviews-marquee::-webkit-scrollbar { display: none; } /* WebKit */
.reviews-marquee .reviews-track {
display: flex;
align-items: stretch; /* todas las cards al alto de la más alta */
gap: 16px;
width: max-content;
}
.reviews-marquee .review-card {
flex: 0 0 340px;
max-width: 340px;
cursor: default;
display: flex; /* permite que el body de la card crezca */
flex-direction: column;
}
/* Sin highlight rojo en hover — las cards no son clickeables en modo marquee */
.reviews-marquee .review-card:hover {
transform: none;
border-color: var(--border) !important;
}
.reviews-marquee .review-card:hover .review-source { opacity: .85; }
.reviews-marquee .review-text { flex: 1 1 auto; } /* empuja date/source al pie */
@media (max-width: 720px) {
.reviews-marquee .review-card { flex-basis: 280px; max-width: 280px; }
.reviews-marquee {
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
}
/* ── Los más vendidos — cinta transportadora de productos ─────────────── */
.bestsellers-section {
background: #f2f2f2;
padding: 32px 0 28px;
}
.bestsellers-section .section-header { margin-bottom: 20px; text-align: center; }
.bestsellers-section .section-label {
font-family: 'Oswald', var(--font-head);
font-weight: 700;
font-size: clamp(24px, 2.5vw, 32px);
letter-spacing: .03em;
text-transform: uppercase;
color: #111;
}
.bestsellers-section .orange-underline::after {
margin: 8px auto 0;
width: 40px;
height: 3px;
}
.bestsellers-marquee-wrap { position: relative; }
.bestsellers-marquee {
display: block;
overflow-x: auto;
overflow-y: hidden;
position: relative;
scrollbar-width: none; /* Firefox */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.bestsellers-marquee::-webkit-scrollbar { display: none; } /* WebKit */
.bestsellers-track {
display: flex;
align-items: stretch;
gap: 14px;
width: max-content;
}
/* Flechas flotantes (desktop). Ocultas en mobile (scroll touch nativo). */
.bs-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid #d8d8d8;
color: #1a1a1a;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.bs-nav-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.bs-nav-btn--prev { left: 8px; }
.bs-nav-btn--next { right: 8px; }
.bs-card {
flex: 0 0 200px;
max-width: 200px;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none !important;
color: #1a1a1a;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.bs-card:hover {
transform: translateY(-2px);
border-color: var(--orange);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.bs-card-img-wrap {
aspect-ratio: 1 / 1;
background: #f6f6f6;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.bs-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.bs-card-name {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 1.3;
color: #1a1a1a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 34px;
}
.bs-card-price {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--orange);
line-height: 1.1;
}
.bs-card-price del { color: #999; font-size: 12px; font-weight: 400; margin-right: 4px; }
.bs-card-price ins { text-decoration: none; }
.bs-card-price .woocommerce-Price-amount { font-family: 'Oswald', sans-serif; }
@media (max-width: 720px) {
.bestsellers-section { padding: 24px 0 22px; }
.bs-card { flex-basis: 160px; max-width: 160px; padding: 10px; gap: 6px; }
.bs-card-name { font-size: 12px; min-height: 30px; }
.bs-card-price { font-size: 14px; }
.bs-nav-btn { display: none !important; }
.bestsellers-marquee {
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.bestsellers-marquee::-webkit-scrollbar { display: none; }
}
.review-card {
background: var(--surface);
border: 1px solid var(--border);
padding: 24px;
transition: border-color .2s;
}
.review-card:hover { border-color: var(--surface3); }
.reviewer-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.reviewer-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid var(--surface3);
}
.reviewer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviewer-name {
font-family: var(--font-head);
font-weight: 700;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text);
}
.reviewer-moto { font-size: 12px; color: var(--muted); margin-top: 1px; }
.review-stars { display: flex; gap: 2px; margin-bottom: 12px; color: var(--orange); }
.review-text { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.review-card { color: inherit; text-decoration: none; display: block; cursor: pointer; }
.review-card:hover { border-color: var(--orange); transform: translateY(-2px); transition: border-color .2s, transform .2s; }
.review-date { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: .03em; }
.review-source { font-size: 11px; color: var(--orange); margin-top: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; opacity: .85; }
.review-card:hover .review-source { opacity: 1; }
/* ── TIENDA OFICIAL ML / TRUST FALLBACK ── */
.trust-ml { display: grid; gap: 22px; }
.trust-ml-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--orange);
padding: 32px 36px;
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: center;
}
.trust-ml-badge {
width: 72px; height: 72px;
background: rgba(255,82,0,.08);
border: 1px solid rgba(255,82,0,.25);
display: flex; align-items: center; justify-content: center;
}
.trust-ml-eyebrow {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--orange); font-weight: 700; margin-bottom: 6px;
}
.trust-ml-title {
font-family: var(--font-head, 'Barlow Condensed', sans-serif);
font-weight: 800;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.15;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 12px;
}
.trust-ml-text {
font-size: 14px;
line-height: 1.65;
color: var(--text-2);
margin-bottom: 20px;
max-width: 720px;
}
.trust-ml-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-ml-btn-primary {
display: inline-flex; align-items: center; gap: 8px;
background: var(--orange); color: #fff;
padding: 13px 22px;
font-family: var(--font-head, 'Barlow Condensed', sans-serif);
font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
font-size: 13px; text-decoration: none;
border: 1px solid var(--orange);
transition: background .18s, transform .18s;
}
.trust-ml-btn-primary:hover { background: var(--orange-d, #B02C1E); transform: translateY(-1px); }
.trust-ml-btn-ghost {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: var(--text);
padding: 13px 22px;
font-family: var(--font-head, 'Barlow Condensed', sans-serif);
font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
font-size: 13px; text-decoration: none;
border: 1px solid var(--border);
transition: border-color .18s, color .18s;
}
.trust-ml-btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.trust-ml-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.trust-ml-feat {
background: var(--surface);
border: 1px solid var(--border);
padding: 18px 18px 16px;
display: flex; flex-direction: column; gap: 4px;
}
.trust-ml-feat-icon { color: var(--orange); margin-bottom: 4px; }
.trust-ml-feat-title {
font-family: var(--font-head, 'Barlow Condensed', sans-serif);
font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
font-size: 14px; color: var(--text);
}
.trust-ml-feat-text { font-size: 12px; color: var(--muted); }
@media (max-width: 920px) {
.trust-ml-card { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; }
.trust-ml-badge { width: 56px; height: 56px; }
.trust-ml-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.trust-ml-actions .trust-ml-btn-primary,
.trust-ml-actions .trust-ml-btn-ghost { width: 100%; justify-content: center; }
}
/* ── BOTTOM TRUST STRIP ── */
.bottom-trust {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 24px 0;
}
.bottom-trust .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.btrust-item {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 24px;
border-right: 1px solid var(--border);
}
.btrust-item:last-child { border-right: none; }
.btrust-icon { color: var(--orange); flex-shrink: 0; }
.btrust-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text);
line-height: 1.2;
}
.btrust-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* ── FOOTER ── */
.footer {
background: #080808;
padding: 56px 0 0;
border-top: 1px solid var(--border);
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--border);
}
.footer-brand img { height: 28px; width: auto; margin-bottom: 16px; }
.footer-brand-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 20px;
max-width: 240px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social-link {
width: 34px;
height: 34px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition: border-color .18s, color .18s;
}
.footer-social-link:hover { border-color: var(--orange); color: var(--orange); }
.footer-col-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a {
font-size: 13px;
color: var(--muted);
transition: color .15s;
}
.footer-links a:hover { color: var(--orange); }
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
font-size: 13px;
color: var(--muted);
}
.footer-contact-item svg { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
padding: 18px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-bottom-text { font-size: 12px; color: var(--muted); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 12px; color: var(--muted); transition: color .15s; }
.footer-bottom-links a:hover { color: var(--text-2); }
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .5s ease forwards; }
.fade-up-2 { animation: fadeUp .5s .12s ease both; }
.fade-up-3 { animation: fadeUp .5s .24s ease both; }
/* ═══════════════════════════════════════════════════
BRAND PAGE
═══════════════════════════════════════════════════ */
.brand-page { background: #f4f4f4; min-height: 80vh; }
.brand-hero {
background: #fff;
text-align: center;
padding: 56px 24px 40px;
border-bottom: 1px solid #e8e8e8;
position: relative;
overflow: hidden;
}
.brand-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('https://tiendacospor.com.ar/wp-content/uploads/fondo-ruta-montana.jpg') center/cover no-repeat; filter: grayscale(100%) blur(1px); transform: scale(1.05);
opacity: .12;
z-index: 0;
pointer-events: none;
}
.brand-hero > .container { position: relative; z-index: 1; }
.brand-logo {
width: 120px;
height: 120px;
object-fit: contain;
margin: 0 auto 20px;
filter: drop-shadow(0 4px 16px rgba(0,0,0,.12));
}
.brand-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(28px, 4vw, 42px);
letter-spacing: .04em;
text-transform: uppercase;
color: #111;
margin-bottom: 10px;
}
.brand-title span { color: var(--orange); }
.brand-subtitle { color: #666; font-size: 15px; }
/* Quick filter chips */
.brand-quick-filter {
background: #fff;
padding: 20px 0;
border-bottom: 1px solid #e8e8e8;
}
.quick-filter-label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .08em;
color: #888;
text-align: center;
margin-bottom: 12px;
}
.quick-filter-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.qf-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border: 1.5px solid #d0d0d0;
border-radius: 4px;
font-family: 'Barlow', sans-serif;
font-weight: 600;
font-size: 13px;
color: #222;
background: #fff;
transition: border-color .18s, background .18s, color .18s;
white-space: nowrap;
}
.qf-chip:hover, .qf-chip.active {
border-color: var(--orange);
background: var(--orange);
color: #fff;
}
.qf-chip--all { border-style: dashed; }
/* Models grid */
.brand-models { padding: 48px 0 64px; }
.brand-models-title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: clamp(20px, 2.5vw, 26px);
text-transform: uppercase;
letter-spacing: .04em;
color: #111;
margin-bottom: 32px;
text-align: center;
}
.models-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .models-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .models-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
.model-card {
background: #fff;
border: 1.5px solid #e8e8e8;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color .18s, transform .18s, box-shadow .18s;
cursor: pointer;
}
.model-card:hover {
border-color: var(--orange);
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,.1);
}
.model-card__img {
background: #f9f9f9;
padding: 20px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
.model-card__img img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .3s ease;
}
.model-card:hover .model-card__img img { transform: scale(1.05); }
.model-card__no-img {
display: flex;
align-items: center;
justify-content: center;
color: #ccc;
}
.model-card__info {
padding: 14px 16px 4px;
flex: 1;
}
.model-card__name {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 17px;
text-transform: uppercase;
color: #111;
letter-spacing: .02em;
}
.model-card__year {
display: block;
font-size: 12px;
color: #888;
margin-top: 3px;
}
.model-card__cta {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--orange);
border-top: 1px solid #f0f0f0;
margin-top: 8px;
transition: gap .18s;
}
.model-card:hover .model-card__cta { gap: 10px; }
.brand-models-footer {
text-align: center;
margin-top: 40px;
}
.btn-all-models {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border: 2px solid #222;
border-radius: 4px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .06em;
color: #222;
background: transparent;
transition: background .18s, color .18s, border-color .18s;
}
.btn-all-models:hover {
background: #222;
color: #fff;
}
/* ═══════════════════════════════════════════════════
MODEL PAGE
═══════════════════════════════════════════════════ */
.model-page { background: #f4f4f4; }
/* Hero del modelo — fondo oscuro */
.model-hero {
background: var(--bg);
padding: 36px 0 0;
position: relative;
overflow: hidden;
}
.model-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, #f4f4f4);
pointer-events: none;
}
.model-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-2);
margin-bottom: 28px;
text-transform: uppercase;
letter-spacing: .06em;
}
.model-breadcrumb a { color: var(--orange); }
.model-breadcrumb a:hover { text-decoration: underline; }
.model-breadcrumb span { color: var(--muted); }
/* ── Breadcrumbs unificados ── */
.cospor-bc { margin: 0 0 22px; }
.cospor-bc-list {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px; list-style: none; padding: 0; margin: 0;
font-family: "Inter", sans-serif;
font-size: 12px; line-height: 1.5;
text-transform: uppercase; letter-spacing: .06em;
color: var(--muted, #888);
}
.cospor-bc-item { display: inline-flex; align-items: center; gap: 6px; }
.cospor-bc-item a { color: var(--orange, #D33523); text-decoration: none; font-weight: 600; }
.cospor-bc-item a:hover { text-decoration: underline; }
.cospor-bc-item span[aria-current="page"] {
color: #22b35e;
font-weight: 700;
}
.cospor-bc-sep { color: var(--muted, #888); opacity: .6; font-size: 13px; }
/* Light contexts (cart, checkout, my-account): mismo verde — tiene contraste
AA tanto sobre #f2f2f2 como sobre #0c0c0c. */
body.woocommerce-cart .cospor-bc-item span[aria-current="page"],
body.woocommerce-checkout .cospor-bc-item span[aria-current="page"] { color: #1a8a3a; }
@media (max-width: 720px) {
.cospor-bc-list { font-size: 11px; gap: 4px; }
.cospor-bc-sep { font-size: 12px; }
}
.model-hero__inner {
display: flex;
align-items: flex-end;
gap: 40px;
padding-bottom: 40px;
}
.model-hero__content { flex: 1; }
.model-hero__brand-logo {
width: 48px;
height: 48px;
object-fit: contain;
margin-bottom: 14px;
filter: brightness(0) invert(1) opacity(.6);
}
.model-hero__title {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 900;
font-size: clamp(32px, 5vw, 52px);
text-transform: uppercase;
color: var(--text);
letter-spacing: .02em;
line-height: 1;
margin-bottom: 8px;
}
.model-hero__year {
font-weight: 500;
font-size: .7em;
color: var(--text-2);
}
.model-hero__subtitle {
color: var(--text-2);
font-size: 14px;
margin-bottom: 20px;
}
.model-hero__bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
}
.model-hero__bullets li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-2);
}
.model-hero__img {
flex: 0 0 45%;
max-width: 480px;
position: relative;
z-index: 1;
}
.model-hero__img img {
width: 100%;
object-fit: contain;
filter: drop-shadow(0 16px 40px rgba(0,0,0,.5));
}
@media (max-width: 768px) {
.model-hero__inner { flex-direction: column; align-items: flex-start; }
.model-hero__img { width: 100%; max-width: 300px; margin: 0 auto; }
}
/* Sección de productos */
.model-products { padding: 40px 0 64px; }
.model-products__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.cat-tabs {
display: flex;
gap: 4px;
background: #fff;
border: 1.5px solid #e0e0e0;
border-radius: 6px;
padding: 4px;
flex-wrap: wrap;
}
.cat-tab {
padding: 8px 18px;
border: none;
border-radius: 4px;
background: transparent;
font-family: 'Barlow', sans-serif;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .05em;
color: #555;
cursor: pointer;
transition: background .15s, color .15s;
white-space: nowrap;
}
.cat-tab:hover { background: #f0f0f0; color: #111; }
.cat-tab.active { background: #111; color: #fff; }
.sort-select {
padding: 9px 14px;
border: 1.5px solid #e0e0e0;
border-radius: 6px;
background: #fff;
font-family: 'Barlow', sans-serif;
font-size: 13px;
color: #333;
cursor: pointer;
}
/* Product cards */
.model-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1024px) { .model-products__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .model-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .model-products__grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.prod-card {
background: #fff;
border-radius: 8px;
border: 1.5px solid #ebebeb;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .2s, transform .2s;
}
.prod-card:hover {
box-shadow: 0 6px 24px rgba(0,0,0,.1);
transform: translateY(-2px);
}
.prod-card__img-wrap {
position: relative;
display: block;
overflow: hidden;
background: #f9f9f9;
aspect-ratio: 1;
}
.prod-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
background: #fff;
transition: transform .3s ease;
}
.prod-card:hover .prod-card__img-wrap img { transform: scale(1.04); }
.prod-card__wishlist {
position: absolute;
top: 10px; right: 10px;
background: rgba(255,255,255,.9);
border: none;
border-radius: 50%;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: #aaa;
transition: color .15s, background .15s;
}
.prod-card__wishlist:hover { color: var(--orange); background: #fff; }
.prod-card__body {
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.prod-card__name {
display: block;
font-weight: 600;
font-size: 13px;
color: #111;
line-height: 1.3;
}
.prod-card__name:hover { color: var(--orange); }
.prod-card__price {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 20px;
color: #111;
}
.prod-card__price ins { text-decoration: none; }
.prod-card__price del { font-size: .7em; color: #aaa; margin-right: 4px; }
.prod-card__compat {
font-size: 11px;
color: #888;
}
.prod-card__atc {
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
border-radius: 4px;
background: var(--orange);
color: #fff;
border: none;
cursor: pointer;
transition: background .15s;
}
.prod-card__atc:hover { background: var(--orange-d); color: #fff; }
.prod-card__out-of-stock {
margin-top: auto;
text-align: center;
padding: 10px;
background: #f0f0f0;
border-radius: 4px;
font-size: 12px;
color: #888;
font-weight: 600;
text-transform: uppercase;
}
.model-no-products {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: #666;
}
.model-no-products p { margin-bottom: 20px; font-size: 16px; }
/* ── Fix 5: logos de marca más grandes ── */
.brand-card { padding: 0 0 12px; }
.brand-logo-img {
width: 100% !important;
height: 96px !important;
object-fit: contain;
padding: 0;
}
.brand-card-cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'Inter', var(--font-body);
font-weight: 600;
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: #888;
line-height: 1;
transition: color .22s, gap .22s;
}
.brand-card-cta svg { display: block; }
.brand-card:hover .brand-card-cta {
color: var(--orange);
gap: 7px;
}
.brand-card--text .brand-card-cta { margin-top: 4px; }
/* ── Fix 3: search overlay ── */
.search-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.search-overlay.open {
opacity: 1;
pointer-events: all;
}
.search-overlay-inner {
width: min(680px, 90vw);
position: relative;
}
.search-form {
display: flex;
align-items: center;
background: #1a1a1a;
border: 1.5px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.search-input {
flex: 1;
padding: 18px 20px;
background: transparent;
border: none;
outline: none;
font-family: var(--font-body);
font-size: 18px;
color: var(--text);
}
.search-input::placeholder { color: var(--muted); }
.search-submit {
padding: 14px 20px;
background: var(--orange);
border: none;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
}
.search-submit:hover { background: var(--orange-d); }
.search-close {
position: absolute;
top: -48px;
right: 0;
background: transparent;
border: none;
color: var(--text-2);
cursor: pointer;
font-size: 28px;
line-height: 1;
padding: 4px;
transition: color .15s;
}
.search-close:hover { color: var(--orange); }
.search-hint {
text-align: center;
font-size: 12px;
color: var(--muted);
margin-top: 12px;
}
/* ── Fix 8: cat archive hero ── */
.cat-archive-page { background: #f4f4f4; min-height: 80vh; }
.cat-archive-hero {
background: var(--bg);
padding: 22px 0 20px;
border-bottom: 2px solid var(--border);
}
.cat-archive-title {
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 900 !important;
font-size: clamp(28px, 3.4vw, 38px);
text-transform: uppercase;
color: var(--text);
letter-spacing: .04em;
margin: 10px 0 0;
}
.cat-archive-desc { color: var(--text-2); font-size: 15px; }
.cat-archive-products { padding: 24px 0 56px; }
.cat-archive-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 12px;
}
.cat-archive-count { font-size: 14px; color: #666; }
@media (max-width: 600px) {
.cat-archive-hero { padding: 16px 0 14px; }
.cat-archive-title { margin: 6px 0 4px; }
.cat-archive-products { padding: 16px 0 40px; }
.cat-archive-toolbar { margin-bottom: 10px; }
}
/* ── Fix 6: product card image area cursor ── */
.product-img-wrap { cursor: pointer; }
/* ═══════════════════════════════════════════════════
SHOP FILTER CHIPS (archive-product.php)
═══════════════════════════════════════════════════ */
.shop-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.shop-filter-chips .qf-chip { text-decoration: none; }
.shop-orderby-form { display: inline-flex; }
/* ═══════════════════════════════════════════════════
SINGLE PRODUCT PAGE — layout
═══════════════════════════════════════════════════ */
.product-single-page { background: #f4f4f4; }
.product-single-hero {
background: #ffffff;
color: #1a1a1a;
padding: 36px 0 48px;
}
/* Overrides para que textos/iconos queden legibles con fondo blanco
(decisión 2026-06-06: producto en hero claro, no dark). */
.product-single-hero .prod-single__title { color: #1a1a1a; }
.product-single-hero .prod-single__cat { color: #555; }
.product-single-hero .prod-single__desc { color: #555; }
.product-single-hero .prod-single__trust .trust-item { color: #1a1a1a; }
.product-single-hero .prod-single__trust .trust-item svg { color: var(--orange); }
/* "X cuotas sin interés de $..." — el global lo deja en blanco casi opaco
asumiendo fondo dark. Lo bajamos a gris medio para fondo claro. */
.product-single-hero .prod-single__price .cospor-price-cuotas { color: #555; }
.product-single-hero .prod-single__cart .quantity label { color: #555; }
.product-single-hero .product-single-gallery .woocommerce-product-gallery {
border-color: #e2e2e2;
}
.product-single-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-top: 28px;
align-items: start;
}
/* min-width:0 evita que el min-content del gallery (fila de thumbs ancha) empuje
la columna del summary fuera del viewport en productos con muchas fotos. */
.product-single-inner > .product-single-gallery,
.product-single-inner > .product-single-summary { min-width: 0; }
@media (max-width: 768px) {
.product-single-inner { grid-template-columns: 1fr; gap: 28px; }
}
/* Gallery area */
.product-single-gallery .woocommerce-product-gallery {
position: relative;
background: #ffffff;
border-radius: 8px;
overflow: hidden;
border: 1px solid #1f1f1f;
}
.product-single-gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.product-single-gallery .woocommerce-product-gallery__image { margin: 0; }
.product-single-gallery .woocommerce-product-gallery__image img {
width: 100%;
height: 420px;
object-fit: contain;
background: #ffffff;
}
.product-single-gallery .flex-control-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
background: #ffffff;
border-top: 1px solid #ececec;
list-style: none;
margin: 0;
}
.product-single-gallery .flex-control-thumbs li { flex: 0 0 60px; }
.product-single-gallery .flex-control-thumbs li img {
width: 60px;
height: 60px;
object-fit: contain;
border: 1.5px solid #e2e2e2;
border-radius: 4px;
cursor: pointer;
opacity: .75;
transition: opacity .15s, border-color .15s;
background: #ffffff;
}
.product-single-gallery .flex-control-thumbs li img.flex-active,
.product-single-gallery .flex-control-thumbs li img:hover {
opacity: 1;
border-color: var(--orange);
}
.product-single-gallery .woocommerce-product-gallery__trigger { display: none; }
/* Onsale badge */
.product-single-gallery span.onsale {
background: var(--orange);
border-radius: 3px;
top: 12px;
left: 12px;
right: auto;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
}
/* Summary area */
.prod-single__brand {
display: inline-block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--orange);
margin-bottom: 4px;
text-decoration: none;
}
.prod-single__brand:hover { text-decoration: underline; }
.prod-single__cat {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-2);
margin-left: 8px;
text-decoration: none;
}
.prod-single__cat:hover { color: var(--orange); }
.prod-single__title {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(22px, 3vw, 32px);
text-transform: uppercase;
color: var(--text);
letter-spacing: .02em;
line-height: 1.1;
margin: 12px 0;
}
.prod-single__price {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(28px, 3vw, 38px);
color: var(--orange);
margin-bottom: 16px;
}
.prod-single__price ins { text-decoration: none; color: var(--orange); }
.prod-single__price del { font-size: .6em; color: var(--muted); margin-right: 8px; }
.prod-single__desc {
font-size: 15px;
color: var(--text-2);
line-height: 1.6;
margin-bottom: 20px;
border-top: 1px solid var(--border);
padding-top: 16px;
}
.prod-single__desc p { margin: 0 0 10px; }
.prod-single__desc p:last-child { margin-bottom: 0; }
.prod-single__desc strong { color: inherit; font-weight: 700; }
/* Add to cart */
.prod-single__cart .quantity { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.prod-single__cart .quantity label { color: var(--text-2); font-size: 13px; }
.prod-single__cart .qty {
width: 72px;
padding: 10px 12px;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text);
border-radius: 4px;
font-size: 16px;
text-align: center;
}
.prod-single__cart .single_add_to_cart_button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px 24px;
background: var(--orange);
color: #fff;
border: none;
border-radius: 4px;
font-family: var(--font-head);
font-weight: 800;
font-size: 16px;
text-transform: uppercase;
letter-spacing: .06em;
cursor: pointer;
transition: background .15s;
}
.prod-single__cart .single_add_to_cart_button:hover { background: var(--orange-d); }
.prod-single__cart .single_add_to_cart_button.added { background: #2a7a2a; }
/* Out of stock */
.prod-single__cart .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button,
.product-single-page .out-of-stock + form .single_add_to_cart_button {
background: #555; cursor: not-allowed;
}
/* Trust badges */
.prod-single__trust {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text-2);
}
.trust-item svg { color: var(--orange); flex-shrink: 0; }
/* ── Product tabs ── */
.product-single-body { padding: 40px 0 64px; }
.product-single-body .woocommerce-tabs { background: #fff; border-radius: 8px; overflow: hidden; }
.product-single-body .woocommerce-tabs ul.tabs {
display: flex;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
background: #f0f0f0;
border-bottom: 2px solid #e0e0e0;
}
.product-single-body .woocommerce-tabs ul.tabs li {
padding: 0;
margin: 0;
background: transparent;
border: none;
}
.product-single-body .woocommerce-tabs ul.tabs li a {
display: block;
padding: 14px 24px;
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .06em;
color: #555;
text-decoration: none;
}
.product-single-body .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom: 2px solid #fff; margin-bottom: -2px; }
.product-single-body .woocommerce-tabs ul.tabs li.active a { color: #111; }
.product-single-body .woocommerce-tabs ul.tabs li::before,
.product-single-body .woocommerce-tabs ul.tabs li::after { display: none; }
.product-single-body .woocommerce-tabs .panel { padding: 32px 28px; color: #1a1a1a; line-height: 1.65; }
.product-single-body .woocommerce-tabs .panel,
.product-single-body .woocommerce-tabs .panel p,
.product-single-body .woocommerce-tabs .panel li,
.product-single-body .woocommerce-tabs .panel span,
.product-single-body .woocommerce-tabs .panel strong { color: #1a1a1a !important; }
.product-single-body .woocommerce-tabs h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #0f0f0f !important; }
/* Espaciado entre elementos de la descripción del producto (renglones
no pegados — decisión 2026-06-07). */
.product-single-body .woocommerce-tabs .panel p { margin: 0 0 16px; font-size: 15px; }
.product-single-body .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
.product-single-body .woocommerce-tabs .panel h3 {
font-size: 17px; font-weight: 800; color: #0f0f0f !important;
margin: 28px 0 12px; padding-top: 8px;
}
.product-single-body .woocommerce-tabs .panel h3:first-child { margin-top: 0; }
.product-single-body .woocommerce-tabs .panel ul,
.product-single-body .woocommerce-tabs .panel ol {
margin: 8px 0 20px; padding-left: 24px;
}
.product-single-body .woocommerce-tabs .panel li {
margin-bottom: 10px; line-height: 1.6;
}
.product-single-body .woocommerce-tabs .panel li:last-child { margin-bottom: 0; }
.product-single-body .woocommerce-tabs .panel a {
color: var(--orange); text-decoration: underline; text-underline-offset: 2px;
}
.product-single-body .woocommerce-tabs .panel a:hover { color: var(--orange-d); }
.product-single-body .woocommerce-tabs table.shop_attributes {
width: 100%;
border-collapse: collapse;
}
.product-single-body .woocommerce-tabs table.shop_attributes th,
.product-single-body .woocommerce-tabs table.shop_attributes td {
padding: 10px 14px;
border-bottom: 1px solid #eee;
font-size: 14px;
}
.product-single-body .woocommerce-tabs table.shop_attributes th { font-weight: 700; width: 30%; background: #fafafa; }
/* Related products */
.product-single-body .related.products { margin-top: 32px; }
.product-single-body .related.products > h2 {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(20px, 2.5vw, 26px);
text-transform: uppercase;
letter-spacing: .04em;
color: #111;
margin-bottom: 20px;
}
.product-single-body .related.products ul.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 900px) { .product-single-body .related.products ul.products { grid-template-columns: repeat(2,1fr); } }
.product-single-body .related.products ul.products li.product { background: #fff; border-radius: 6px; border: 1.5px solid #eee; overflow: hidden; }
.product-single-body .related.products ul.products li.product a img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 12px; background: #f9f9f9; }
.product-single-body .related.products ul.products li.product .woocommerce-loop-product__title { font-size: 13px; font-weight: 600; padding: 10px 12px 4px; }
.product-single-body .related.products ul.products li.product .price { font-family: var(--font-head); font-weight: 700; font-size: 18px; padding: 0 12px 12px; display: block; }
.product-single-body .related.products ul.products li.product .add_to_cart_button {
display: block;
margin: 0 12px 12px;
padding: 9px 14px;
background: var(--orange);
color: #fff;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
.product-single-body .related.products ul.products li.product .add_to_cart_button:hover { background: var(--orange-d); }
/* prod-card__cat style used in archive/category templates */
.prod-card__cat {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--orange);
}
/* ── Related products section (single product page) ── */
.cospor-related-products {
margin-top: 40px;
padding-top: 32px;
border-top: 2px solid #e8e8e8;
}
.related-products-title {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(18px, 2.5vw, 24px);
text-transform: uppercase;
letter-spacing: .04em;
color: #111;
margin-bottom: 24px;
}
/* Add-to-cart form on single product (WC output) */
.prod-single__cart form.cart {
display: flex;
flex-direction: column;
gap: 10px;
}
.prod-single__cart .quantity {
display: flex;
align-items: center;
gap: 12px;
}
.prod-single__cart .quantity label {
font-size: 13px;
font-weight: 600;
color: var(--text-2);
}
.prod-single__cart input.qty {
width: 72px;
padding: 10px 12px;
background: var(--surface);
border: 1.5px solid var(--border);
color: var(--text);
border-radius: 4px;
font-size: 16px;
text-align: center;
}
.prod-single__cart button.single_add_to_cart_button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px 24px;
background: var(--orange);
color: #fff;
border: none;
border-radius: 4px;
font-family: var(--font-head);
font-weight: 800;
font-size: 16px;
text-transform: uppercase;
letter-spacing: .06em;
cursor: pointer;
transition: background .15s;
}
.prod-single__cart button.single_add_to_cart_button:hover { background: var(--orange-d); }
.prod-single__cart button.single_add_to_cart_button.loading { opacity: .7; cursor: wait; }
.prod-single__cart button.single_add_to_cart_button.added { background: #1a7a2e; }
/* Stock messages: ocultamos "X disponibles" cuando hay stock (decisión
2026-06-05: no mostramos la cantidad para no condicionar la compra).
Mantenemos visible el mensaje "agotado" para no confundir al cliente. */
.prod-single__cart p.stock {
font-size: 13px;
font-weight: 700;
padding: 8px 0;
}
.prod-single__cart p.stock.in-stock { display: none; }
.prod-single__cart p.stock.out-of-stock { color: #c62828; }
/* ═══════════════════════════════════════════════════
MODEL HERO — light theme (mockup)
═══════════════════════════════════════════════════ */
.model-page .model-hero {
background: #fff;
padding: 36px 0 48px;
border-bottom: 1px solid #ebebeb;
}
.model-page .model-hero::after {
display: none;
}
.model-page .model-hero__inner {
align-items: center;
}
.model-page .model-breadcrumb {
color: #aaa;
}
.model-page .model-breadcrumb a {
color: var(--orange);
}
.model-page .model-breadcrumb span {
color: #bbb;
}
.model-page .model-hero__brand-logo {
display: none;
}
.model-page .model-hero__title {
font-size: clamp(28px, 4vw, 48px);
color: #111;
margin-bottom: 6px;
}
.model-page .model-hero__year {
color: #888;
font-size: .65em;
}
.model-page .model-hero__subtitle {
color: #666;
font-size: 15px;
margin-bottom: 24px;
}
.model-page .model-hero__bullets {
gap: 14px;
}
.model-page .model-hero__bullets li {
font-size: 14px;
color: #444;
gap: 12px;
}
.model-page .model-hero__img img {
filter: drop-shadow(0 8px 32px rgba(0,0,0,.10));
}
/* product grid below hero — keep light gray */
.model-page .model-products { background: #f4f4f4; }
/* ── Model hero v2: brand badge, count, glow, image wrap ── */
/* Overwrite previous model-hero light overrides */
.model-page .model-hero {
background: #fff;
padding: 40px 0 0;
border-bottom: 1px solid #ebebeb;
overflow: hidden;
}
.model-page .model-hero::after { display: none; }
.model-page .model-hero__inner {
align-items: center;
min-height: 320px;
padding-bottom: 0;
gap: 0;
}
/* Left content */
.model-page .model-hero__content {
flex: 1;
padding-bottom: 48px;
}
/* Brand badge — logo + name */
.model-hero__brand-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #f5f5f5;
border: 1px solid #e8e8e8;
border-radius: 20px;
padding: 5px 12px 5px 6px;
margin-bottom: 18px;
}
.model-hero__brand-badge img {
width: 24px;
height: 24px;
object-fit: contain;
}
.model-hero__brand-badge span {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: #555;
}
/* Title */
.model-page .model-hero__brand-logo { display: none; }
.model-page .model-hero__title {
font-size: clamp(32px, 4.5vw, 56px);
color: #111;
line-height: 1;
margin-bottom: 8px;
}
.model-page .model-hero__year { color: #999; font-size: .65em; }
.model-page .model-hero__subtitle {
color: #888;
font-size: 15px;
margin-bottom: 16px;
}
/* Product count badge */
.model-hero__count {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #666;
background: #fff8f4;
border: 1px solid #ffd5ba;
border-radius: 4px;
padding: 5px 12px;
margin-bottom: 20px;
font-weight: 600;
}
.model-hero__count-num {
font-family: var(--font-head);
font-weight: 800;
font-size: 18px;
color: var(--orange);
line-height: 1;
}
/* Bullets */
.model-page .model-hero__bullets { gap: 12px; }
.model-page .model-hero__bullets li { font-size: 14px; color: #555; gap: 10px; }
/* Right: image with glow */
.model-hero__img-wrap {
flex: 0 0 50%;
max-width: 540px;
position: relative;
align-self: flex-end;
height: 320px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.model-hero__img-glow {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 420px;
height: 280px;
background: radial-gradient(ellipse at center bottom, rgba(255,82,0,.10) 0%, transparent 70%);
pointer-events: none;
}
.model-hero__img-photo {
position: relative;
z-index: 1;
width: 100%;
max-height: 300px;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 12px 32px rgba(0,0,0,.12));
}
/* Cat-select (mobile alternative to tabs) */
.cat-select { display: none; }
.model-products__filters { display: contents; }
/* qf-chip-select (mobile alternative to chip groups) */
.qf-chip-select { display: none; }
@media (max-width: 768px) {
.quick-filter-chips,
.shop-filter-chips { display: none !important; }
.qf-chip-select {
display: block;
width: 100%;
max-width: 100%;
padding: 11px 14px;
background: #fff;
border: 1.5px solid #ddd;
border-radius: 6px;
font-family: 'Inter', var(--font-body);
font-size: 14px;
color: #1a1a1a;
margin-bottom: 18px;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.qf-chip-select:focus { outline: none; border-color: var(--orange); }
.brand-quick-filter .qf-chip-select { margin-bottom: 0; margin-top: 10px; }
}
@media (max-width: 768px) {
/* Filtros: dropdown de categoría + sort, lado a lado */
.model-page .model-products__header {
flex-direction: row;
gap: 10px;
align-items: center;
padding: 10px 0;
}
.cat-tabs { display: none; }
.model-products__filters {
display: flex;
gap: 10px;
flex: 1;
width: 100%;
}
.cat-select { display: block; flex: 1; min-width: 0; }
.model-products__sort { flex: 1; min-width: 0; }
.sort-select { width: 100%; }
/* Hero del modelo con la misma proporción que el de la landing */
.model-page .model-hero {
padding: 0 !important;
background: #fff !important;
min-height: 0 !important;
}
.model-page .model-hero > .container { padding: 0 !important; max-width: 100% !important; }
/* El container del model-hero pierde padding en mobile para que el hero use
ancho completo; el breadcrumb necesita su propio padding lateral para no
quedar pegado al borde. */
.model-page .model-hero > .container > .cospor-bc {
padding: 10px 16px 4px !important;
margin: 0 !important;
}
.model-page .model-hero__inner {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
min-height: 0 !important;
aspect-ratio: 1897 / 829 !important;
gap: 0 !important;
padding: 0 16px !important;
overflow: hidden !important;
}
.model-page .model-hero__content {
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 12px 8px 12px 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.model-hero__brand-badge {
padding: 2px 8px 2px 3px;
margin-bottom: 4px;
border-radius: 12px;
align-self: flex-start;
}
.model-hero__brand-badge img { width: 16px; height: 16px; }
.model-hero__brand-badge span { font-size: 8px; letter-spacing: .06em; }
.model-page .model-hero__title {
font-size: clamp(18px, 5vw, 26px);
margin-bottom: 2px;
line-height: 1;
}
.model-hero-accent { width: 32px !important; height: 2px !important; margin: 2px 0 4px !important; }
.model-page .model-hero__subtitle { font-size: 10px; margin-bottom: 4px; }
.model-hero__count { font-size: 10px; padding: 2px 6px; margin-bottom: 0; align-self: flex-start; }
.model-hero__count-num { font-size: 12px; }
.model-page .model-hero__bullets { display: none; }
/* Imagen a la derecha — fill column con object-fit cover */
.model-page .model-hero__img-wrap {
flex: 0 0 50% !important;
max-width: 50% !important;
width: 50% !important;
height: 100% !important;
aspect-ratio: auto !important;
align-self: stretch !important;
position: relative;
overflow: hidden;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.model-page .model-hero__img-glow {
width: 100% !important;
height: 100% !important;
bottom: auto !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
.model-page .model-hero__img-photo {
max-height: 100% !important;
max-width: 100% !important;
width: auto !important;
height: 100% !important;
margin-left: 0 !important;
object-fit: contain !important;
object-position: center center !important;
}
}
@media (max-width: 420px) {
/* En pantallas muy chicas ocultamos los bullets para que no apretuje */
.model-page .model-hero__bullets { display: none; }
}
/* ════ COSPOR — Modelo Page: Design Update ════ */
/* Fondo claro + imagen de montaña en hero */
.model-page .model-hero {
background: #f5f5f5;
border-bottom: none;
}
.model-page .model-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('https://tiendacospor.com.ar/wp-content/uploads/fondo-ruta-montana.jpg') center/cover no-repeat;
filter: grayscale(40%) blur(1px);
opacity: 0.07;
transform: scale(1.04);
z-index: 0;
pointer-events: none;
}
.model-page .model-hero .container { position: relative; z-index: 2; }
.model-page .model-hero__inner { position: relative; z-index: 2; }
/* Título más grande */
.model-page .model-hero__title {
font-size: clamp(48px, 6vw, 72px);
}
/* Línea naranja decorativa debajo del título */
.model-page .model-hero__content .model-hero-accent {
width: 48px;
height: 3px;
background: var(--orange);
border-radius: 2px;
margin-bottom: 4px;
}
/* Barra de filtros sticky */
.model-page .model-products__header {
position: sticky;
top: 80px;
z-index: 88;
background: #f2f2f2;
border-bottom: 1px solid #e0e0e0;
padding: 14px 0;
border-radius: 0;
margin-bottom: 28px;
}
/* Precio en naranja en páginas de modelo */
.model-page .prod-card__price { color: var(--orange); }
/* Texto "Compatible con..." en naranja */
.model-page .prod-card__compat {
color: var(--orange);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
/* Hover con borde naranja */
.model-page .prod-card:hover {
border-color: rgba(255,82,0,0.35);
box-shadow: 0 10px 32px rgba(0,0,0,.12);
transform: translateY(-4px);
}
.model-page .model-hero { min-height: 480px; }
.model-page .model-hero__inner { min-height: 460px; align-items: flex-end; }
.model-page .model-hero__content { padding-bottom: 60px; }
.model-hero__img-wrap { flex: 0 0 52%; max-width: 620px; height: 460px; }
.model-hero__img-photo { max-height: 440px; width: 110%; margin-left: -5%; filter: drop-shadow(0 16px 48px rgba(0,0,0,0.15)); }
.model-hero__img-glow { width: 500px; height: 340px; }
.model-page .model-hero__inner { align-items: center; }
.model-hero__img-wrap { display: flex; align-items: center; justify-content: center; }
.model-hero__img-photo { object-fit: contain; }
/* ── NAV DROPDOWN BASE ── */
.nav-item { position: relative; display: inline-block; }
.nav-has-drop .nav-dropdown { display: none; position: absolute; top: calc(100% + 12px); left: 0; background: #111; border-top: 2px solid var(--orange); border-radius: 0 0 8px 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.6); z-index: 9999; }
.nav-has-drop:hover .nav-dropdown { display: block; }
.nav-chevron { transition: transform 0.2s; vertical-align: middle; margin-left: 4px; margin-bottom: 1px; }
.nav-has-drop:hover .nav-chevron { transform: rotate(180deg); }
/* ── PRODUCTOS DROPDOWN ── */
.nav-dropdown--cats { min-width: 220px; padding: 10px 0; }
.nav-drop-cat { display: block; padding: 9px 20px; color: rgba(255,255,255,0.78); font-size: 14px; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.nav-drop-cat:hover { background: rgba(255,82,0,0.12); color: #D33523; }
.nav-drop-cat--all { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px; padding-top: 12px; color: var(--orange); font-weight: 600; font-size: 13px; }
/* ── POR MOTO DROPDOWN ── */
.nav-dropdown--brands { display: none; flex-direction: row; width: 440px; min-height: 300px; left: -160px; }
.nav-has-drop:hover .nav-dropdown--brands { display: flex; }
.brand-nav-left { width: 190px; border-right: 1px solid rgba(255,255,255,0.07); padding: 8px 0; flex-shrink: 0; overflow-y: auto; max-height: 400px; }
.brand-nav-right { flex: 1; padding: 18px 16px; background: #0d0d0d; border-radius: 0 0 8px 0; display: flex; flex-direction: column; justify-content: flex-start; }
.brand-nav-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; cursor: pointer; transition: background 0.15s; gap: 8px; }
.brand-nav-row:hover, .brand-nav-row.active { background: rgba(255,82,0,0.1); }
.brand-nav-link { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: none; flex: 1; font-weight: 500; }
.brand-nav-row:hover .brand-nav-link, .brand-nav-row.active .brand-nav-link { color: #D33523; }
.brand-nav-logo { width: 38px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.65; transition: opacity 0.15s; }
.brand-nav-row:hover .brand-nav-logo, .brand-nav-row.active .brand-nav-logo { opacity: 1; }
.brand-nav-arrow { color: rgba(255,255,255,0.25); flex-shrink: 0; transition: color 0.15s; }
.brand-nav-row:hover .brand-nav-arrow, .brand-nav-row.active .brand-nav-arrow { color: var(--orange); }
.brand-models-panel { display: none; }
.brand-models-panel.active { display: block; }
.brand-models-title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px; font-weight: 700; }
.brand-models-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 14px; }
.brand-model-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 12px; border: none; border-radius: 6px; color: rgba(255,255,255,0.78); font-size: 13px; text-decoration: none; transition: background 0.15s, color 0.15s; white-space: nowrap; line-height: 1.4; width: auto; max-width: 100%; }
.brand-model-chip:hover { background: rgba(255,82,0,0.1); color: var(--orange); }
.brand-model-chip small { font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 400; }
.brand-model-chip:hover small { color: rgba(255,82,0,0.7); }
.brand-see-all { font-size: 12px; color: var(--orange); text-decoration: none; font-weight: 600; opacity: 0.85; }
.brand-see-all:hover { opacity: 1; }
.brand-models-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; color: rgba(255,255,255,0.25); font-size: 13px; text-align: center; min-height: 200px; }
/* ── MOBILE TOGGLE ── */
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-mobile-toggle span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.85); border-radius: 2px; transition: all 0.3s; }
/* ── MOBILE DRAWER (drill-down) — solo mobile ── */
.m-drawer { display: none; }
@media (max-width: 900px) {
/* Navbar 2 filas: [hamburger | logo | account | cart] / [search full width] */
.navbar .container {
flex-wrap: wrap;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
row-gap: 10px;
column-gap: 12px;
align-items: center;
}
.nav-mobile-toggle { display: flex; order: 0; flex-shrink: 0; }
.nav-logo { order: 1; margin-right: auto; margin-left: 4px; }
.nav-actions { order: 2; margin-left: 0; gap: 18px; }
.nav-search { order: 3; flex: 1 1 100%; margin: 0; max-width: none; width: 100%; }
/* Oculta el menú desktop en mobile */
.nav-links { display: none !important; }
/* Mobile drawer */
.m-drawer {
display: block;
position: fixed;
inset: 0;
z-index: 10000;
visibility: hidden;
pointer-events: none;
}
.m-drawer.is-open { visibility: visible; pointer-events: auto; }
.m-drawer__overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,.55);
opacity: 0;
transition: opacity .25s;
}
.m-drawer.is-open .m-drawer__overlay { opacity: 1; }
.m-drawer__panel {
position: absolute;
top: 0; left: 0; bottom: 0;
width: min(360px, 90%);
background: #0c0c0c;
transform: translateX(-100%);
transition: transform .28s ease;
display: flex;
flex-direction: column;
z-index: 1;
box-shadow: 4px 0 24px rgba(0,0,0,.5);
overflow: hidden;
}
.m-drawer.is-open .m-drawer__panel { transform: translateX(0); }
body.m-drawer-open { overflow: hidden; }
.m-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,.08);
flex-shrink: 0;
}
.m-drawer__title {
color: #fff;
font-family: 'Inter', var(--font-body);
font-weight: 600;
font-size: 15px;
letter-spacing: .02em;
}
.m-drawer__close {
background: none;
border: none;
color: rgba(255,255,255,.75);
font-size: 30px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.m-drawer__close:hover { color: var(--orange); }
.m-view {
display: none;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.m-view.is-active { display: flex; }
.m-back {
background: none;
border: none;
color: rgba(255,255,255,.55);
padding: 14px 20px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,.04);
font-size: 14px;
font-family: 'Inter', var(--font-body);
cursor: pointer;
flex-shrink: 0;
}
.m-back:hover { color: var(--orange); }
.m-h {
padding: 18px 20px 4px;
color: #fff;
font-family: 'Inter', var(--font-body);
font-size: 18px;
font-weight: 600;
margin: 0;
}
.m-sub {
padding: 0 20px 14px;
color: rgba(255,255,255,.45);
font-size: 13px;
margin: 0;
}
.m-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
color: rgba(255,255,255,.88);
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.05);
font-size: 15px;
font-family: 'Inter', var(--font-body);
text-align: left;
cursor: pointer;
width: 100%;
text-decoration: none;
}
.m-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.m-row > span:first-child small {
color: rgba(255,255,255,.4);
font-size: 12px;
font-weight: 400;
}
.m-row:hover, .m-row:active { background: rgba(255,82,0,.08); color: #fff; }
.m-row--leaf { color: rgba(255,255,255,.88); }
.m-row--drill { font-weight: 500; }
.m-row--highlight {
background: linear-gradient(180deg, rgba(255,82,0,.14), rgba(255,82,0,.06));
border-bottom-color: rgba(255,82,0,.25);
}
.m-row--highlight:hover { background: linear-gradient(180deg, rgba(255,82,0,.20), rgba(255,82,0,.08)); }
.m-row--all { color: var(--orange); font-weight: 600; justify-content: center; }
.m-row--model { font-size: 14px; padding: 14px 20px; }
.m-row--model small {
display: inline-block;
color: rgba(255,255,255,.4);
font-size: 11px;
margin-left: 4px;
}
.m-chev {
color: rgba(255,255,255,.4);
font-size: 22px;
line-height: 1;
font-weight: 300;
}
.m-brands {
display: flex;
flex-direction: column;
}
.m-brand {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
background: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,.05);
color: rgba(255,255,255,.88);
cursor: pointer;
text-align: left;
width: 100%;
text-decoration: none;
font-family: 'Inter', var(--font-body);
font-size: 15px;
}
.m-brand img {
height: 22px;
width: 44px;
object-fit: contain;
flex-shrink: 0;
filter: brightness(0) invert(1);
opacity: .7;
transition: opacity .15s;
}
.m-brand:hover img, .m-brand:active img { opacity: 1; }
.m-brand:hover, .m-brand:active { background: rgba(255,82,0,.08); color: #fff; }
/* Hero mobile: aspect ratio igual al desktop (1897×829 ≈ 2.288:1) */
.hero-carousel {
min-height: 0;
max-height: none;
height: auto;
aspect-ratio: 1897 / 829;
}
.hero-slide--default,
.hero-slide--hot-sale,
.hero-slide--loboo { height: 100%; }
/* Texto del default slide adaptado al alto reducido */
.hero-slide--default::before {
background: linear-gradient(90deg, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0.1) 80%);
}
.hero-slide--default .container { padding: 0 18px; }
.hero-title {
font-size: clamp(18px, 5.2vw, 30px) !important;
line-height: 1 !important;
margin-bottom: 10px !important;
}
.hero-buttons { flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; }
.hero-btn-primary, .hero-btn-secondary {
width: auto;
padding: 8px 14px;
font-size: 11px;
letter-spacing: .04em;
}
/* Flechas y dots más chicos */
.hero-carousel-arrow { width: 32px; height: 32px; }
.hero-carousel-arrow svg { width: 16px; height: 16px; }
.hero-carousel-arrow--prev { left: 8px; }
.hero-carousel-arrow--next { right: 8px; }
.hero-carousel-dots { bottom: 8px; padding: 4px 10px; gap: 6px; }
.hero-dot { width: 7px; height: 7px; }
}
@media (max-width: 480px) {
.nav-actions { gap: 14px; }
.m-drawer__panel { width: min(320px, 88%); }
.hero-title { font-size: clamp(15px, 4.6vw, 22px) !important; }
.hero-btn-secondary { display: none; } /* dejar solo el primario en pantallas muy chicas */
}
/* Fix dropdown gap — padding-top reemplaza el top offset para que no haya hueco */
.nav-has-drop .nav-dropdown { top: 100%; padding-top: 12px; }
.nav-dropdown--cats { padding-top: 12px; }
.nav-has-drop:hover .nav-dropdown--brands { padding-top: 0; }
.nav-dropdown--brands { top: 100%; padding-top: 0; }
/* Puente invisible: pseudo-elemento que llena el gap antes de la lista */
.nav-has-drop::after { content: ''; position: absolute; bottom: -12px; left: 0; right: 0; height: 12px; }
/* Glow de la moto: sutil, solo blanco/gris difuso */
.model-hero__img-glow { background: radial-gradient(ellipse 70% 40% at 50% 80%, rgba(200,200,200,0.35) 0%, transparent 70%) !important; }
/* ── CARRITO WOOCOMMERCE ── */
.woocommerce-cart .woocommerce { padding: 48px 0 56px; }
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; font-size: 14px; }
.woocommerce table.shop_table th { padding: 14px 18px; text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid #e8e8e8; font-weight: 700; }
.woocommerce table.shop_table td { padding: 20px 18px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; }
.woocommerce-cart .product-thumbnail,
.woocommerce-page.woocommerce-cart td.product-thumbnail {
width: 120px;
height: 120px;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
}
.woocommerce-cart .product-thumbnail a,
.woocommerce-page.woocommerce-cart td.product-thumbnail a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 120px;
}
.woocommerce-cart .product-thumbnail img,
.woocommerce-page.woocommerce-cart td.product-thumbnail img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.woocommerce table.shop_table .product-name { font-weight: 600; }
.woocommerce table.shop_table .product-name a { color: inherit; text-decoration: none; }
.woocommerce table.shop_table .product-name a:hover { color: var(--orange); }
.woocommerce table.shop_table .product-remove a { font-size: 20px; color: #aaa; text-decoration: none; line-height: 1; }
.woocommerce table.shop_table .product-remove a:hover { color: #e00; }
.woocommerce .cart-collaterals { margin-top: 32px; }
.woocommerce .cart_totals { max-width: 420px; margin-left: auto; background: #f8f8f8; border-radius: 10px; padding: 28px; }
.woocommerce .cart_totals h2 { font-size: 18px; margin-bottom: 16px; }
.woocommerce .cart_totals table { width: 100%; border-collapse: collapse; }
.woocommerce .cart_totals table th, .woocommerce .cart_totals table td { padding: 10px 0; border-bottom: 1px solid #e8e8e8; }
.woocommerce .cart_totals .wc-proceed-to-checkout { margin-top: 20px; }
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; background: var(--orange); color: #fff; padding: 14px; border-radius: 6px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background 0.2s; }
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover { background: var(--orange-d, #e05a00); }
.woocommerce-page .woocommerce-cart-form { overflow-x: auto; }
/* ── CART FIX v2 (miniatura 120×120 centrada, spec) ── */
table.woocommerce-cart-form__contents td.product-thumbnail {
width: 120px !important;
height: 120px !important;
max-width: 120px !important;
box-sizing: border-box !important;
text-align: center !important;
vertical-align: middle !important;
}
table.woocommerce-cart-form__contents td.product-thumbnail a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
min-height: 120px !important;
}
table.woocommerce-cart-form__contents td.product-thumbnail img,
table.shop_table td.product-thumbnail img,
.woocommerce table.cart img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
width: auto !important;
height: auto !important;
}
table.woocommerce-cart-form__contents td,
table.shop_table.cart td { vertical-align: middle !important; padding: 20px 18px !important; }
table.woocommerce-cart-form__contents th,
table.shop_table.cart th { padding: 14px 18px !important; font-size: 12px !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; }
/* ── CART BLOCKS (WooCommerce 8+) ── */
.wc-block-cart-item__image,
.wc-block-cart-item__image a {
width: 120px !important;
min-width: 120px !important;
max-width: 120px !important;
height: 120px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f4f4f4 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
.wc-block-cart-item__image img,
.wc-block-cart-item__image a img,
.wc-block-components-product-image img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
.wc-block-cart-items__row { align-items: center !important; }
body.woocommerce-cart td.product-thumbnail {
width: 120px !important;
height: 120px !important;
text-align: center !important;
vertical-align: middle !important;
box-sizing: border-box !important;
}
body.woocommerce-cart td.product-thumbnail a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
min-height: 120px !important;
}
body.woocommerce-cart td.product-thumbnail img,
body.woocommerce-cart td.product-thumbnail a img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
width: auto !important;
height: auto !important;
}
/* ── Tab panels (hide non-active) ── */
.tab-panel { display: none; }
.tab-panel.active { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 32px; }
@media (max-width: 900px) { .tab-panel.active { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tab-panel.active { grid-template-columns: repeat(2, 1fr); } }
/* ── Trust item: reset para single product (no hereda padding/border del hero trust) ── */
.prod-single__trust .trust-item {
padding: 0 !important;
border-right: none !important;
}
/* ── Hero trust: más específico ── */
.hero-trust .trust-item {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 20px;
border-right: 1px solid var(--border);
font-size: inherit;
color: inherit;
}
.hero-trust .trust-item:last-child { border-right: none; }
/* ── Bottom trust: más específico ── */
.bottom-trust .btrust-item {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 24px;
border-right: 1px solid var(--border);
}
.bottom-trust .btrust-item:last-child { border-right: none; }
/* ── Mobile: trust strip ── */
@media (max-width: 768px) {
.hero-trust { padding: 12px 0; }
.hero-trust .container { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 8px; }
.hero-trust .trust-item {
flex-direction: column;
text-align: center;
align-items: center;
gap: 6px;
padding: 8px 4px !important;
border-right: 1px solid var(--border);
border-bottom: none;
}
.hero-trust .trust-item:nth-child(even) { border-left: none; }
.hero-trust .trust-item:last-child { border-right: none; }
.hero-trust .trust-icon { width: 24px; height: 24px; }
.hero-trust .trust-item-title { font-size: 10px; letter-spacing: .04em; line-height: 1.15; }
.hero-trust .trust-item-sub { display: none; }
.bottom-trust .container { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 8px; }
.bottom-trust .btrust-item {
flex-direction: column;
text-align: center;
align-items: center;
gap: 6px;
padding: 10px 4px !important;
border-right: 1px solid var(--border);
border-bottom: none;
border-left: none;
}
.bottom-trust .btrust-item:last-child { border-right: none; }
.bottom-trust .btrust-icon svg { width: 24px; height: 24px; }
.bottom-trust .btrust-title { font-size: 10px; letter-spacing: .04em; line-height: 1.15; }
.bottom-trust .btrust-sub { display: none; }
}
/* ── Prod-card image: contain (no crop para accesorios) ── */
.prod-card__img-wrap { background: #f9f9f9; }
/* ── Nav mobile dropdown ── */
@media (max-width: 900px) {
.nav-has-drop .nav-drop-trigger { cursor: pointer; }
.nav-mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* ── Footer responsive ── */
@media (max-width: 900px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
.footer-top { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
/* ── Products section responsive ── */
@media (max-width: 900px) {
.products-grid { grid-template-columns: repeat(2, 1fr); }
.tab-panel.active { grid-template-columns: repeat(2, 1fr); }
}
/* ── Find section: btn-outline-dark full width en mobile ── */
@media (max-width: 640px) {
.find-cols { gap: 40px; }
.type-cards { grid-template-columns: repeat(2, 1fr); }
.brand-logos { grid-template-columns: repeat(3, 1fr); }
.brand-card-cta {
width: 100%;
justify-content: center;
text-align: center;
font-size: 9px;
letter-spacing: .08em;
gap: 3px;
}
}
/* ── Checkout responsive ── */
@media (max-width: 768px) {
.cospor-checkout-wrap { grid-template-columns: 1fr !important; }
.cospor-checkout-right { order: -1; }
}
/* ── Why section responsive ── */
@media (max-width: 900px) {
.why-inner { grid-template-columns: 1fr; }
.why-content { padding: 48px 24px; margin-left: 0; }
.why-image-side { min-height: 300px; }
}
/* ── Reviews responsive ── */
@media (max-width: 768px) {
.reviews-grid { grid-template-columns: 1fr; }
}
/* ── Back to top button ── */
.back-to-top {
position: fixed;
bottom: 32px;
right: 28px;
width: 44px;
height: 44px;
background: var(--orange);
color: #fff;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: translateY(10px);
transition: opacity .25s, transform .25s, background .15s;
z-index: 800;
box-shadow: 0 4px 14px rgba(255,82,0,.35);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--orange-d); }
/* ── Mejorar visibilidad del precio en product cards homepage ── */
.product-price { color: var(--orange); }
/* ── WooCommerce notices styling ── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-left: 4px solid var(--orange);
background: var(--surface);
color: var(--text);
padding: 14px 20px;
margin-bottom: 20px;
border-radius: 4px;
}
.woocommerce-message::before { color: var(--orange); }
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info {
background: #fff8f5;
color: #1a1a1a;
border-left-color: #D33523;
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
background: #fff5f5;
color: #1a1a1a;
border-left-color: #e53e3e;
}
/* ── Pagination ── */
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
box-sizing: border-box;
border: 1.5px solid #e0e0e0;
border-radius: 4px;
font-size: 13px;
font-weight: 700;
color: #555;
margin: 0 3px;
text-decoration: none;
transition: all .15s;
background: #fff;
}
.page-numbers:hover, .page-numbers.current {
background: var(--orange);
border-color: var(--orange);
color: #fff;
}
/* ===== Static Pages (page.php) ===== */
.cospor-page-wrap {
background: #f2f2f2;
min-height: 80vh;
}
.cospor-page-header {
background: var(--bg);
padding: 40px 0 32px;
border-bottom: 2px solid var(--border);
}
.cospor-page-title {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(26px, 3.5vw, 40px);
text-transform: uppercase;
color: var(--text);
letter-spacing: .04em;
margin: 14px 0 0;
}
.cospor-page-body {
padding: 48px 0 72px;
}
.cospor-page-content {
max-width: 860px;
background: #fff;
border-radius: 8px;
padding: 40px 48px;
box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.cospor-page-content h1,
.cospor-page-content h2,
.cospor-page-content h3,
.cospor-page-content h4 {
font-family: var(--font-head);
font-weight: 700;
color: #1a1a1a;
margin: 32px 0 12px;
letter-spacing: .02em;
text-transform: uppercase;
}
.cospor-page-content h1 { font-size: clamp(22px, 2.8vw, 32px); }
.cospor-page-content h2 { font-size: clamp(20px, 2.4vw, 26px); }
.cospor-page-content h3 { font-size: clamp(16px, 2vw, 20px); }
.cospor-page-content p {
color: #333;
font-size: 15px;
line-height: 1.75;
margin-bottom: 18px;
}
.cospor-page-content ul,
.cospor-page-content ol {
color: #333;
font-size: 15px;
line-height: 1.75;
padding-left: 24px;
margin-bottom: 18px;
}
.cospor-page-content a {
color: var(--orange);
text-decoration: underline;
}
.cospor-page-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 16px 0;
}
.cospor-page-content strong { color: #1a1a1a; }
.cospor-page-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
font-size: 14px;
}
.cospor-page-content table th,
.cospor-page-content table td {
border: 1px solid #e0e0e0;
padding: 10px 14px;
text-align: left;
}
.cospor-page-content table th {
background: #f4f4f4;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .05em;
color: #444;
}
/* ── Página Preguntas Frecuentes / Políticas ───────────────────────── */
.cospor-page-content .cospor-policy-intro {
background: #fafafa;
border-left: 3px solid var(--orange);
padding: 14px 18px;
margin-bottom: 36px;
font-size: 15px;
color: #444;
line-height: 1.55;
}
.cospor-page-content .cospor-policy-block {
margin-bottom: 40px;
}
.cospor-page-content .cospor-policy-block:last-of-type {
margin-bottom: 12px;
}
.cospor-page-content .cospor-policy-title {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: clamp(20px, 2.3vw, 26px);
text-transform: uppercase;
letter-spacing: .03em;
color: var(--orange);
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 2px solid #eee;
}
.cospor-page-content .cospor-policy-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
color: var(--orange);
}
.cospor-page-content .cospor-policy-icon svg { width: 100%; height: 100%; }
.cospor-page-content .cospor-policy-subtitle {
font-weight: 600;
color: #1a1a1a;
margin-top: 18px;
margin-bottom: 8px;
}
.cospor-page-content .cospor-policy-list,
.cospor-page-content .cospor-policy-notes {
margin: 0 0 18px;
padding-left: 22px;
}
.cospor-page-content .cospor-policy-list li,
.cospor-page-content .cospor-policy-notes li {
margin-bottom: 8px;
color: #444;
line-height: 1.55;
}
.cospor-page-content .cospor-policy-callout {
background: #fff5ef;
border-left: 4px solid var(--orange);
padding: 16px 20px;
margin: 0 0 18px;
border-radius: 0 6px 6px 0;
}
.cospor-page-content .cospor-policy-callout strong {
display: block;
font-family: 'Oswald', sans-serif;
font-size: 16px;
letter-spacing: .02em;
color: #1a1a1a;
margin-bottom: 8px;
}
.cospor-page-content .cospor-policy-callout p {
margin: 0;
color: #444;
font-size: 14px;
}
.cospor-page-content .cospor-policy-disclaimer {
margin-top: 20px;
padding: 12px 14px;
background: #f7f7f7;
border-radius: 6px;
font-size: 13px;
color: #666;
font-style: italic;
line-height: 1.5;
}
.cospor-page-content .cospor-policy-notes {
list-style: none;
padding-left: 0;
margin-top: 18px;
border-top: 1px solid #eee;
padding-top: 18px;
}
.cospor-page-content .cospor-policy-notes li {
position: relative;
padding-left: 24px;
margin-bottom: 10px;
}
.cospor-page-content .cospor-policy-notes li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5200' stroke-width='3'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cospor-page-content .cospor-faq-item {
border: 1px solid #e6e6e6;
border-radius: 6px;
margin-bottom: 10px;
background: #fff;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.cospor-page-content .cospor-faq-item[open] {
border-color: var(--orange);
box-shadow: 0 2px 12px rgba(255,82,0,.06);
}
.cospor-page-content .cospor-faq-item summary {
list-style: none;
cursor: pointer;
padding: 14px 48px 14px 18px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
color: #1a1a1a;
position: relative;
user-select: none;
}
.cospor-page-content .cospor-faq-item summary::-webkit-details-marker { display: none; }
.cospor-page-content .cospor-faq-item summary::after {
content: '';
position: absolute;
right: 18px;
top: 50%;
width: 12px;
height: 12px;
border-right: 2px solid var(--orange);
border-bottom: 2px solid var(--orange);
transform: translateY(-75%) rotate(45deg);
transition: transform .2s;
}
.cospor-page-content .cospor-faq-item[open] summary::after {
transform: translateY(-25%) rotate(-135deg);
}
.cospor-page-content .cospor-faq-item summary:hover { color: var(--orange); }
.cospor-page-content .cospor-faq-answer {
padding: 0 18px 16px;
font-size: 14px;
color: #444;
line-height: 1.6;
border-top: 1px solid #f0f0f0;
}
.cospor-page-content .cospor-faq-answer p { margin: 12px 0 0; }
.cospor-page-content .cospor-faq-answer a {
color: var(--orange);
font-weight: 600;
}
@media (max-width: 600px) {
.cospor-page-content .cospor-policy-title { font-size: 19px; }
.cospor-page-content .cospor-policy-icon { width: 24px; height: 24px; }
.cospor-page-content .cospor-faq-item summary { font-size: 14px; padding: 12px 40px 12px 14px; }
.cospor-page-content .cospor-faq-answer { padding: 0 14px 14px; font-size: 13.5px; }
}
@media (max-width: 768px) {
.cospor-page-content {
padding: 24px 20px;
}
}
/* ===== 404 Page ===== */
.cospor-404-wrap {
max-width: 520px;
margin: 0 auto;
text-align: center;
padding: 60px 24px;
}
.cospor-404-icon {
color: var(--orange);
margin-bottom: 24px;
opacity: .7;
}
.cospor-404-msg {
font-size: 17px;
color: #555;
margin-bottom: 32px;
line-height: 1.6;
}
.cospor-404-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ===== WooCommerce My Account / Order Received ===== */
body.woocommerce-account .woocommerce,
body.woocommerce-order-received .woocommerce,
body.woocommerce-order-pay .woocommerce {
max-width: 1140px;
margin: 0 auto;
padding: 40px 20px 80px;
}
body.woocommerce-account,
body.woocommerce-order-received,
body.woocommerce-order-pay {
background: #f2f2f2;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
float: left;
width: 220px;
}
.woocommerce-account .woocommerce-MyAccount-content {
float: left;
width: calc(100% - 260px);
margin-left: 40px;
background: #fff;
border-radius: 8px;
padding: 28px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 12px 20px;
font-size: 14px;
color: #333;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
font-weight: 500;
transition: background .15s, color .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
background: #fff8f5;
color: var(--orange);
}
@media (max-width: 768px) {
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: 100%;
margin-left: 0;
margin-bottom: 20px;
}
}
/* Order received page */
.woocommerce-order .woocommerce-order-received {
text-align: center;
}
.woocommerce-order .entry-title {
font-family: var(--font-head);
font-size: clamp(22px, 3vw, 32px);
font-weight: 900;
text-transform: uppercase;
color: #1a1a1a;
margin-bottom: 12px;
}
.woocommerce-thankyou-order-received {
font-size: 18px;
color: #2a7a2a;
font-weight: 600;
margin-bottom: 24px;
}
/* ── Footer: text visibility (muted was #6a6560 — invisible on #080808) ── */
.footer-brand-desc { color: rgba(255,255,255,.6) !important; }
.footer-social-link { color:#fff !important; border-color:rgba(255,255,255,.3) !important; }
.footer-links a { color: rgba(255,255,255,.65) !important; }
.footer-links a:hover { color: var(--orange) !important; }
.footer-contact-item { color: rgba(255,255,255,.65) !important; }
.footer-bottom-text { color: rgba(255,255,255,.42) !important; }
.footer-bottom-links a { color: rgba(255,255,255,.42) !important; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.75) !important; }
.footer-col-title { color: rgba(255,255,255,.9) !important; }
/* ── Nav dropdown: force correct colors on ALL pages (overrides body.woocommerce-checkout * rule) ── */
.nav-dropdown { background: #111 !important; }
.nav-dropdown .nav-drop-cat { color: rgba(255,255,255,.78) !important; }
.nav-dropdown .nav-drop-cat:hover { background: rgba(255,82,0,.12) !important; color: #D33523 !important; }
.nav-dropdown .nav-drop-cat--all { color: #D33523 !important; }
.nav-dropdown--brands .nav-brand-link { color: rgba(255,255,255,.72) !important; }
.nav-dropdown--brands .nav-brand-link:hover { color: #D33523 !important; }
/* ── Social icons: force white SVG stroke/fill on dark footer (all pages) ── */
.footer-social-link { color: #fff !important; border-color: rgba(255,255,255,.3) !important; }
.footer-social-link svg { color: #fff !important; stroke: #fff !important; }
.footer-social-link:hover { border-color: #D33523 !important; color: #D33523 !important; }
.footer-social-link:hover svg { stroke: #D33523 !important; }
/* ── Brand nav dropdown: force white colors on WooCommerce pages ── */
/* (body.woocommerce-checkout * {color:#1a1a1a} has spec 0,1,1 — needs !important to override) */
.brand-nav-link { color: rgba(255,255,255,.75) !important; }
.brand-nav-row:hover .brand-nav-link, .brand-nav-row.active .brand-nav-link { color: #D33523 !important; }
.brand-nav-arrow { color: rgba(255,255,255,.25) !important; }
.brand-nav-row:hover .brand-nav-arrow, .brand-nav-row.active .brand-nav-arrow { color: #D33523 !important; }
.brand-nav-right { background: #0d0d0d !important; }
.brand-models-title { color: rgba(255,255,255,.35) !important; }
.brand-model-chip { color: rgba(255,255,255,.78) !important; border: none !important; }
.brand-model-chip:hover { color: #D33523 !important; background: rgba(255,82,0,.1) !important; }
.brand-model-chip small { color: rgba(255,255,255,.35) !important; }
.brand-see-all { color: #D33523 !important; }
.brand-models-placeholder { color: rgba(255,255,255,.25) !important; }
/* ── SAFETY: prevent any horizontal overflow at any viewport ── */
/* overflow-x: clip prevents horizontal scroll WITHOUT creating a scroll
container, so position:sticky descendants (checkout sidebar) keep working.
The `hidden` fallback is for very old browsers (Safari <16) — there sticky
simply won't engage, but layout stays the same. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100vw; }
img, video, iframe { max-width: 100%; }
/* ── Step bar fix for very small viewports ── */
@media (max-width: 480px) {
.cospor-step-bar .cospor-container { padding: 0 12px !important; }
.cospor-steps { gap: 4px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.cospor-steps::-webkit-scrollbar { display: none; }
.cospor-step { font-size: 11px !important; gap: 5px; }
.cospor-step .step-num { width: 22px !important; height: 22px !important; font-size: 10px !important; }
.step-line { min-width: 6px !important; max-width: 18px !important; margin: 0 1px !important; }
}
@media (max-width: 360px) {
.cospor-step { font-size: 10px !important; }
.cospor-step span:not(.step-num) { display: none; }
}
/* ── Why-section breakpoints intermedios ── */
@media (min-width: 768px) and (max-width: 1100px) {
.why-features { grid-template-columns: 1fr !important; gap: 20px !important; }
}
@media (min-width: 921px) and (max-width: 1100px) {
.why-content { padding: 56px 28px 56px 24px !important; }
}
/* ── Fix: select2 hidden accessible debe ser 1x1px (no expandir layout) ── */
/* Specificity-aware: la regla `.woocommerce-checkout .form-row select { width:100% !important }` (0,2,2) ganaría sobre 0,2,1. Usamos 0,3,2+ para ganar. */
.woocommerce-checkout .form-row select.select2-hidden-accessible,
.woocommerce-checkout select.select2-hidden-accessible,
body select.select2-hidden-accessible,
body .select2-hidden-accessible {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
/* ── COSPOR Pricing Engine — precio de lista + N cuotas sin interés ──
Política: el precio que el cliente ve siempre es el precio de lista.
Los descuentos por transferencia (-15%) o MP custom (-5%) se aplican
recién al elegir medio de pago en el checkout. Sin tachado. */
.cospor-price {
display: inline-block;
line-height: 1.25;
font-family: var(--font-head);
}
.cospor-price-list {
color: var(--orange, #FF5200);
font-weight: 800;
text-decoration: none;
vertical-align: middle;
}
.cospor-price-cuotas {
display: block;
margin-top: 4px;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: .01em;
}
/* Línea destacada con precio por transferencia bancaria — solo en single product. */
.cospor-price-transfer {
display: block;
margin-top: 6px;
color: #d32f2f;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: .01em;
}
.cospor-price-transfer .woocommerce-Price-amount { font-weight: 800; }
/* En cards los tamaños se controlan por el contenedor */
.prod-card__price .cospor-price-list { font-size: 22px; }
.prod-card__price .cospor-price-cuotas { font-size: 11.5px; }
/* Single product hero tiene fondo oscuro → precio en rojo (var(--orange))
para destacarlo, cuotas en gris claro para jerarquía. */
.prod-single__price .cospor-price-list { font-size: 1em; color: var(--orange); }
.prod-single__price .cospor-price-cuotas { font-size: 14px; color: rgba(255,255,255,.75); }
.prod-single__price .cospor-price-transfer { font-size: 15px; }
/* Aviso "Última unidad disponible" (stock = 1). Refuerza urgencia y suple
al selector de cantidad oculto por WC cuando min == max == 1. */
.prod-single__last-unit {
display: inline-block;
margin: 8px 0 12px;
padding: 6px 12px;
background: #fff3e0;
border: 1px solid #ffb74d;
border-radius: 4px;
color: #e65100;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
}
/* ── Ocultar el botón rojo "Realizar el pedido" — usamos solo el verde del sidebar ── */
body.woocommerce-checkout #place_order { display: none !important; }
/* ── Datos bancarios dentro del radio BACS del checkout ── */
.cospor-bacs-details {
margin: 14px 0 4px;
padding: 16px 18px;
background: #fff;
border: 1px solid #f0c8be;
border-radius: 10px;
font-family: 'Inter', sans-serif;
color: #1a1a1a;
}
/* Monto a transferir: row destacado arriba, grid de 3 cols igual que las demás. */
.cospor-bacs-amount {
display: grid;
grid-template-columns: minmax(80px, auto) 1fr auto;
gap: 12px;
align-items: center;
margin: 0 0 14px;
padding: 0 0 14px;
border-bottom: 1px dashed #e8c5bc;
font-size: 14px;
color: #444;
}
.cospor-bacs-amount > span {
color: #888;
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
}
.cospor-bacs-amount > strong {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 22px;
color: #D33523;
letter-spacing: .01em;
word-break: keep-all;
white-space: nowrap;
}
.cospor-bacs-data {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: flex;
flex-direction: column;
}
.cospor-bacs-data li {
display: grid;
grid-template-columns: minmax(80px, auto) 1fr auto;
gap: 12px;
align-items: center;
padding: 9px 0;
border-bottom: 1px dotted #eee;
min-height: 36px;
}
.cospor-bacs-data li:last-child { border-bottom: none; }
.cospor-bacs-data li span {
color: #888;
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
}
.cospor-bacs-data li strong {
color: #1a1a1a;
font-weight: 700;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 13.5px;
letter-spacing: 0;
word-break: break-all;
overflow-wrap: anywhere;
line-height: 1.35;
}
/* Filas sin botón "Copiar" (TITULAR, BANCO): el value ocupa cols 2-3 alineado a la izq. */
.cospor-bacs-data li:not(:has(.cospor-copy-btn)) strong { grid-column: 2 / -1; }
/* Botón Copiar: tamaño compacto y alineado a la derecha. */
.cospor-bacs-details .cospor-copy-btn {
margin-left: 0;
padding: 5px 9px;
font-size: 10.5px;
letter-spacing: .06em;
white-space: nowrap;
justify-self: end;
}
.cospor-bacs-details .cospor-copy-btn svg { width: 11px; height: 11px; }
.cospor-bacs-hint {
margin: 12px 0 0;
padding: 10px 12px;
background: #fff7f4;
border-left: 3px solid #D33523;
border-radius: 4px;
font-size: 13px;
color: #555;
line-height: 1.5;
}
@media (max-width: 540px) {
.cospor-bacs-details { padding: 14px 14px; }
.cospor-bacs-data li { grid-template-columns: 64px 1fr auto; gap: 8px; }
.cospor-bacs-data li strong { font-size: 12.5px; }
.cospor-bacs-amount { grid-template-columns: 64px 1fr auto; gap: 8px; }
.cospor-bacs-amount > strong { font-size: 20px; }
/* En mobile, el botón Copiar es solo el ícono (sin texto) para ganar espacio. */
.cospor-bacs-details .cospor-copy-btn span,
.cospor-comprobante-box .cospor-copy-btn span { display: none !important; }
.cospor-bacs-details .cospor-copy-btn,
.cospor-comprobante-box .cospor-copy-btn {
width: 34px; height: 34px;
padding: 0 !important;
border-radius: 50% !important;
justify-content: center;
gap: 0 !important;
}
.cospor-bacs-details .cospor-copy-btn svg,
.cospor-comprobante-box .cospor-copy-btn svg { width: 14px !important; height: 14px !important; }
.cospor-bacs-details .cospor-copy-btn.is-copied,
.cospor-comprobante-box .cospor-copy-btn.is-copied {
/* Feedback visual cuando se copia: relleno verde sólido */
background: #22b35e !important; border-color: #22b35e !important; color: #fff !important;
}
}
/* ── Banner comprobante en thank-you (versión prominente al tope) ── */
.cospor-thankyou-container > .cospor-comprobante-box {
margin: 24px 0 36px;
padding: 28px 32px;
border-width: 3px;
background: linear-gradient(135deg, #fff7f4 0%, #ffeae3 100%);
position: relative;
animation: cosporPulseAttention .8s ease-out 0.3s 1;
}
.cospor-thankyou-container > .cospor-comprobante-box::before {
content: '📎';
position: absolute;
top: -16px;
left: 24px;
background: #D33523;
color: #fff;
font-size: 18px;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(211, 53, 35, .35);
}
.cospor-thankyou-container > .cospor-comprobante-box h3 {
font-size: 24px;
margin-bottom: 18px;
}
.cospor-thankyou-container > .cospor-comprobante-box .cospor-comprobante-submit {
padding: 16px 32px;
font-size: 15px;
}
@keyframes cosporPulseAttention {
0%, 100% { box-shadow: 0 0 0 0 rgba(211, 53, 35, .4); }
50% { box-shadow: 0 0 0 12px rgba(211, 53, 35, 0); }
}
/* ── Cart rows: precio plano (ya descontado por método) + etiqueta ── */
.cospor-cart-method {
display: block;
margin-top: 2px;
color: #888;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ── Comprobante de transferencia: caja en thank-you / view-order ── */
.cospor-comprobante-box {
border: 2px solid #D33523;
border-radius: 10px;
padding: 22px 24px;
margin: 0 0 28px;
background: #fff7f4;
font-family: 'Inter', sans-serif;
color: #1a1a1a;
}
.cospor-comprobante-box h3 {
margin: 0 0 14px;
font-family: var(--font-head);
font-weight: 800;
font-size: 22px;
color: #D33523;
letter-spacing: .01em;
text-transform: uppercase;
}
.cospor-comprobante-data {
background: #fff;
border: 1px solid #f0c8be;
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 16px;
}
.cospor-comprobante-amount {
margin: 0 0 10px;
font-size: 16px;
}
.cospor-comprobante-amount strong { color: #D33523; font-weight: 800; font-size: 18px; }
.cospor-comprobante-data ul {
list-style: none;
padding: 0;
margin: 0 0 10px;
font-size: 14.5px;
line-height: 1.7;
}
.cospor-comprobante-data li { padding: 2px 0; }
.cospor-comprobante-hint { margin: 0; font-size: 13px; color: #666; }
.cospor-comprobante-status {
background: #e8f6ed;
border: 1px solid #b7e1c4;
border-radius: 6px;
padding: 10px 14px;
margin: 0 0 14px;
font-size: 14px;
color: #1a6b35;
}
.cospor-comprobante-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.cospor-comprobante-file {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #444;
}
.cospor-comprobante-file input[type=file] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-size: 14px;
}
.cospor-comprobante-submit {
align-self: stretch;
padding: 14px 24px;
background: #22b35e;
color: #fff;
font-family: "Barlow Condensed", sans-serif;
font-weight: 800;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
letter-spacing: .06em;
box-shadow: 0 4px 14px rgba(34,179,94,.28);
transition: background .2s, box-shadow .2s, transform .15s;
}
.cospor-comprobante-submit:hover:not(:disabled) {
background: #1a8a3a;
box-shadow: 0 6px 18px rgba(34,179,94,.36);
transform: translateY(-1px);
}
.cospor-comprobante-submit:disabled,
.cospor-comprobante-submit[disabled] {
background: #ccc !important;
color: #666 !important;
cursor: not-allowed !important;
box-shadow: none !important;
transform: none !important;
}
.cospor-comprobante-submit-hint {
margin: 6px 0 0 !important;
font-size: 12px !important;
color: #888 !important;
text-align: center;
}
.cospor-comprobante-status--error {
background: #fff3f0;
border: 1px solid #f5b6a8;
color: #B02C1E;
}
/* ── Pantalla "comprobante recibido" (post-upload) ── */
.cospor-comprobante-box.cospor-comprobante-box--ok {
border: 2px solid #1a9b55;
background: linear-gradient(180deg, #f0fdf5 0%, #ffffff 100%);
text-align: center;
padding: 36px 28px 32px;
}
.cospor-comprobante-ok-icon {
width: 76px;
height: 76px;
margin: 0 auto 18px;
border-radius: 999px;
background: #1a9b55;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(26,155,85,.28);
}
.cospor-comprobante-ok-title {
font-family: var(--font-head);
font-weight: 900;
font-size: 30px;
color: #1a1a1a !important;
text-transform: uppercase;
margin: 0 0 10px !important;
letter-spacing: .01em;
}
.cospor-comprobante-ok-lead {
font-size: 16px;
color: #444;
margin: 0 auto 22px;
line-height: 1.55;
max-width: 560px;
}
.cospor-comprobante-ok-lead strong { color: #1a1a1a; }
.cospor-comprobante-ok-steps {
list-style: none;
padding: 0;
margin: 0 auto 22px;
max-width: 480px;
text-align: left;
background: #fff;
border: 1px solid #d3e9dd;
border-radius: 10px;
padding: 16px 20px;
}
.cospor-comprobante-ok-steps li {
padding: 8px 0;
font-size: 14.5px;
color: #1a1a1a;
border-bottom: 1px solid #ecf3ef;
}
.cospor-comprobante-ok-steps li:last-child { border-bottom: 0; }
.cospor-comprobante-ok-steps li strong {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
background: #1a9b55;
color: #fff;
border-radius: 999px;
font-size: 12px;
margin-right: 8px;
vertical-align: 2px;
}
.cospor-comprobante-ok-foot {
font-size: 13px;
color: #666;
margin: 0 0 22px;
}
.cospor-comprobante-ok-foot code {
background: #f3f3f3;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.cospor-comprobante-ok-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.cospor-comprobante-ok-btn-wa,
.cospor-comprobante-ok-btn-replace,
.cospor-comprobante-ok-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .04em;
transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.cospor-comprobante-ok-btn-primary {
background: #D33523;
color: #fff;
}
.cospor-comprobante-ok-btn-primary:hover {
background: #b22b1c;
color: #fff;
transform: translateY(-1px);
}
.cospor-comprobante-ok-btn-primary svg { transition: transform .15s; }
.cospor-comprobante-ok-btn-primary:hover svg { transform: translateX(3px); }
.cospor-comprobante-ok-btn-wa {
background: #25D366;
color: #fff;
}
.cospor-comprobante-ok-btn-wa:hover { background: #1fb858; }
.cospor-comprobante-ok-btn-replace {
background: transparent;
color: #1a1a1a;
border: 1.5px solid #c9d3cd;
}
.cospor-comprobante-ok-btn-replace:hover { border-color: #1a9b55; color: #1a9b55; }
@media (max-width: 560px) {
.cospor-comprobante-box { padding: 18px 16px; }
.cospor-comprobante-box h3 { font-size: 19px; }
.cospor-comprobante-box.cospor-comprobante-box--ok { padding: 26px 18px; }
.cospor-comprobante-ok-title { font-size: 24px; }
}
/* ── COSPOR Top Ribbon (cinta superior con scroll infinito) ── */
.cospor-ribbon {
position: relative;
width: 100%;
background: #1a1a1a;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.08);
overflow: hidden;
z-index: 1001;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.cospor-ribbon.is-hotsale {
background: linear-gradient(90deg, #D33523 0%, #B02C1E 50%, #D33523 100%);
border-bottom-color: rgba(0,0,0,.18);
}
.cospor-ribbon__viewport {
overflow: hidden;
width: 100%;
}
.cospor-ribbon__track {
display: inline-flex;
width: max-content;
animation: cospor-ribbon-scroll 13s linear infinite;
will-change: transform;
}
.cospor-ribbon:hover .cospor-ribbon__track { animation-play-state: paused; }
.cospor-ribbon__group {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 9px 0;
}
.cospor-ribbon__item {
display: inline-block;
padding: 0 22px;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
}
.cospor-ribbon.is-hotsale .cospor-ribbon__item { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.cospor-ribbon__sep {
display: inline-block;
font-size: 10px;
line-height: 1;
opacity: .55;
transform: translateY(-1px);
}
@keyframes cospor-ribbon-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-25%, 0, 0); }
}
@media (max-width: 560px) {
.cospor-ribbon__item { padding: 0 16px; font-size: 12px; letter-spacing: .03em; }
.cospor-ribbon__group { padding: 8px 0; }
.cospor-ribbon__track { animation-duration: 9s; }
}
@media (prefers-reduced-motion: reduce) {
.cospor-ribbon__track { animation: none; transform: translateX(0); }
}
/* ── Mini-cart popup ── */
.cospor-mini-cart {
position: fixed;
top: 90px;
right: 16px;
width: 320px;
max-width: calc(100vw - 32px);
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
padding: 16px 16px 14px;
z-index: 10000;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
font-family: 'Inter', var(--font-body);
color: #1a1a1a;
}
.cospor-mini-cart.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cospor-mini-cart__close {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
background: transparent;
border: 0;
font-size: 22px;
line-height: 1;
color: #888;
cursor: pointer;
border-radius: 50%;
transition: background .15s, color .15s;
}
.cospor-mini-cart__close:hover { background: #f2f2f2; color: #1a1a1a; }
.cospor-mini-cart__row {
display: flex;
align-items: center;
gap: 12px;
padding-right: 24px;
margin-bottom: 10px;
}
.cospor-mini-cart__img {
width: 56px;
height: 56px;
object-fit: contain;
background: #f7f7f7;
border-radius: 6px;
flex-shrink: 0;
}
.cospor-mini-cart__info { min-width: 0; flex: 1; }
.cospor-mini-cart__name {
font-weight: 700;
font-size: 13px;
line-height: 1.3;
margin-bottom: 3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cospor-mini-cart__qty { font-size: 12px; color: #666; }
.cospor-mini-cart__added {
font-size: 12px;
font-weight: 600;
color: #1a9b55;
margin-bottom: 12px;
}
.cospor-mini-cart__total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 10px;
border-top: 1px solid #eee;
margin-bottom: 12px;
font-size: 13px;
}
.cospor-mini-cart__total-label { color: #555; }
.cospor-mini-cart__total { font-size: 15px; color: var(--orange); font-weight: 700; }
.cospor-mini-cart__btn {
display: block;
width: 100%;
padding: 12px 16px;
background: #1a1a1a;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 6px;
font-weight: 700;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
transition: background .15s;
}
.cospor-mini-cart__btn:hover { background: var(--orange); color: #fff; }
.cospor-mini-cart__btn { border: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 768px) {
.cospor-mini-cart { top: 72px; right: 12px; left: 12px; width: auto; }
}
/* ── Cart drawer (sidebar lateral) ── */
.cospor-cart-drawer {
position: fixed;
inset: 0;
z-index: 10500;
pointer-events: none;
visibility: hidden;
}
.cospor-cart-drawer.is-open {
pointer-events: auto;
visibility: visible;
}
.cospor-cart-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.5);
opacity: 0;
transition: opacity .25s ease;
}
.cospor-cart-drawer.is-open .cospor-cart-drawer__overlay { opacity: 1; }
.cospor-cart-drawer__panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
height: 100dvh; /* dvh > vh: respeta URL bar en iOS */
width: 420px;
max-width: 100vw;
background: #fff;
color: #1a1a1a;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
box-shadow: -8px 0 32px rgba(0,0,0,.15);
font-family: 'Inter', var(--font-body);
overscroll-behavior: contain;
}
.cospor-cart-drawer.is-open .cospor-cart-drawer__panel { transform: translateX(0); }
.cospor-cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid #eee;
flex-shrink: 0;
}
.cospor-cart-drawer__title {
font-weight: 700;
font-size: 16px;
letter-spacing: .02em;
}
.cospor-cart-drawer__close {
width: 32px;
height: 32px;
background: transparent;
border: 0;
font-size: 26px;
line-height: 1;
color: #555;
cursor: pointer;
border-radius: 50%;
transition: background .15s, color .15s;
}
.cospor-cart-drawer__close:hover { background: #f2f2f2; color: #1a1a1a; }
.cospor-cart-drawer__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 12px 20px;
}
.cospor-cart-drawer__loading {
text-align: center;
padding: 40px 0;
color: #888;
font-size: 13px;
}
.cospor-cart-drawer__empty {
text-align: center;
padding: 60px 20px 40px;
color: #555;
}
.cospor-cart-drawer__empty-icon { color: #ccc; margin-bottom: 14px; }
.cospor-cart-drawer__empty p { font-size: 14px; margin: 0 0 18px; }
.cospor-cart-drawer__shop-btn {
display: inline-block;
padding: 10px 22px;
background: #1a1a1a;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
letter-spacing: .04em;
text-transform: uppercase;
transition: background .15s;
}
.cospor-cart-drawer__shop-btn:hover { background: var(--orange); }
.cospor-cart-drawer__item {
display: flex;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.cospor-cart-drawer__item:last-child { border-bottom: 0; }
.cospor-cart-drawer__item-img {
width: 72px;
height: 72px;
flex-shrink: 0;
background: #f7f7f7;
border-radius: 6px;
overflow: hidden;
display: block;
}
.cospor-cart-drawer__item-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cospor-cart-drawer__item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cospor-cart-drawer__item-name {
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
text-decoration: none;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding-right: 24px;
}
.cospor-cart-drawer__item-name:hover { color: var(--orange); }
.cospor-cart-drawer__item-price { font-size: 12px; color: #888; }
.cospor-cart-drawer__item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.cospor-cart-drawer__qty {
display: inline-flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.cospor-cart-drawer__qty-btn {
width: 26px;
height: 26px;
background: #fff;
border: 0;
font-size: 15px;
color: #555;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .12s;
}
.cospor-cart-drawer__qty-btn:hover { background: #f5f5f5; color: #1a1a1a; }
.cospor-cart-drawer__qty-val {
min-width: 28px;
text-align: center;
font-size: 13px;
font-weight: 600;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 4px 0;
}
.cospor-cart-drawer__item-line {
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
}
.cospor-cart-drawer__remove {
position: absolute;
top: 14px;
right: 0;
width: 24px;
height: 24px;
background: transparent;
border: 0;
color: #aaa;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .12s, color .12s;
}
.cospor-cart-drawer__remove:hover { background: #fee; color: #d33523; }
.cospor-cart-drawer__footer {
flex-shrink: 0;
padding: 16px 20px 20px;
border-top: 1px solid #eee;
background: #fafafa;
}
.cospor-cart-drawer__totals { margin-bottom: 14px; }
.cospor-cart-drawer__total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 15px;
margin-bottom: 6px;
}
.cospor-cart-drawer__total-row span { color: #555; }
.cospor-cart-drawer__subtotal {
font-size: 18px;
font-weight: 700;
color: var(--orange);
}
.cospor-cart-drawer__hint {
font-size: 11px;
color: #888;
margin: 4px 0 0;
}
.cospor-cart-drawer__checkout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 18px;
background: var(--orange);
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
letter-spacing: .08em;
text-transform: uppercase;
transition: background .15s, transform .12s;
}
.cospor-cart-drawer__checkout-btn:hover {
background: #d94500;
color: #fff;
transform: translateY(-1px);
}
.cospor-cart-drawer__checkout-btn svg { transition: transform .15s; }
.cospor-cart-drawer__checkout-btn:hover svg { transform: translateX(3px); }
@media (max-width: 480px) {
.cospor-cart-drawer__panel { width: 100vw; }
.cospor-cart-drawer__header { padding: 14px 16px; }
.cospor-cart-drawer__body { padding: 8px 16px; }
.cospor-cart-drawer__footer { padding: 14px 16px 18px; }
}
body.cospor-drawer-open,
html.cospor-drawer-open { overflow: hidden; position: relative; }
body.cospor-drawer-open { overscroll-behavior: none; }
/* iOS auto-zoom fix: inputs con font-size < 16px disparan zoom al focusear.
Forzamos 16px en mobile en todos los form fields. Usamos body[class] para
subir specificity (0,2,3) y vencer reglas previas tipo .woocommerce-form-login input[type=text] (0,2,1). */
@media (max-width: 768px) {
html body[class] input[type="text"],
html body[class] input[type="search"],
html body[class] input[type="email"],
html body[class] input[type="tel"],
html body[class] input[type="number"],
html body[class] input[type="password"],
html body[class] input[type="url"],
html body[class] input[type="date"],
html body[class] input[type="datetime-local"],
html body[class] input[type="month"],
html body[class] input[type="time"],
html body[class] input[type="week"],
html body[class] textarea,
html body[class] select,
html body[class] .nav-search input,
html body[class] .nav-search-input,
html body[class] .nav-search .dgwt-wcas-style-pirx input.dgwt-wcas-search-input[type="search"],
html body[class] .nav-search .dgwt-wcas-search-input,
html body[class] .dgwt-wcas-search-input,
html body[class] .qf-chip-select,
html body[class] .cat-select,
html body[class] .sort-select,
html body[class] .input-text { font-size: 16px !important; }
}
/* ════════════════════════════════════════════════════════
Fix mobile touch — single-tap navegable + feedback táctil
────────────────────────────────────────────────────────
PROBLEMA: iOS Safari dispara :hover en el primer tap (pinta el botón)
y recién en el segundo tap navega. Resultado: doble-tap obligatorio.
SOLUCIÓN:
1) touch-action: manipulation + tap-highlight transparente → iOS
no espera doble-tap-to-zoom y dispara el click en el primer tap.
2) En (hover: none) anulamos TODOS los cambios visuales :hover que
son lo que iOS interpreta como "preview" del primer tap.
3) Agregamos un :active sutil (scale + opacity) que da feedback
INSTANTÁNEO al apretar — el usuario ve que el click registró.
════════════════════════════════════════════════════════ */
/* Aplicar manipulation a TODOS los elementos navegables/interactivos */
a, button, [role="button"], .btn-orange, .btn-outline, .btn-ghost,
.btn-outline-dark, .brand-card, .product-card, .model-card, .prod-card,
.type-card, .bs-card, .review-card, .nav-link, .product-add-btn,
.single_add_to_cart_button, .checkout-button, input[type="submit"],
input[type="button"], .cospor-faq-item summary {
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* ── Feedback táctil via JS — clase `.is-pressed` agregada por pointerdown.
Aplica en TODOS los devices (no depende de @media (hover: none)). ── */
.is-pressed {
transform: scale(.96) !important;
opacity: .82 !important;
transition: transform .07s ease-out, opacity .07s ease-out !important;
}
.btn-orange.is-pressed,
.btn-outline.is-pressed,
.btn-outline-dark.is-pressed,
.btn-ghost.is-pressed,
.single_add_to_cart_button.is-pressed,
.checkout-button.is-pressed {
filter: brightness(.92);
}
.cospor-faq-item summary.is-pressed {
background: #fff5ef !important;
transform: none !important;
opacity: 1 !important;
}
/* Brand cards: efecto explícito al apretar — borde naranja + leve tint + scale.
Selector reforzado con html.is-touch para ganarle a la regla :hover reset. */
html.is-touch .brand-card.is-pressed,
.brand-card.is-pressed {
border-color: var(--orange) !important;
background: #fff5ef !important;
box-shadow: 0 4px 14px rgba(255,82,0,.18) !important;
transform: scale(.96) !important;
opacity: 1 !important;
transition: transform .1s ease-out, background .1s, border-color .1s, box-shadow .1s !important;
}
html.is-touch .brand-card.is-pressed .brand-card-cta,
.brand-card.is-pressed .brand-card-cta {
color: var(--orange) !important;
gap: 6px !important;
}
html.is-touch .brand-card--text.is-pressed .brand-card-name,
.brand-card--text.is-pressed .brand-card-name {
color: var(--orange) !important;
}
/* ── Reset hover en devices touch via clase JS (más robusto que @media hover:none).
La clase `is-touch` se agrega a al primer touchstart. ── */
html.is-touch .brand-card:hover {
border-color: #e5e5e5 !important;
box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
transform: none !important;
}
html.is-touch .brand-card:hover .brand-card-cta { color: #888 !important; gap: 4px !important; }
html.is-touch .product-card:hover { border-color: inherit !important; transform: none !important; }
html.is-touch .model-card:hover {
border-color: inherit !important;
transform: none !important;
box-shadow: none !important;
}
html.is-touch .model-card:hover .model-card__img img { transform: none !important; }
html.is-touch .model-card:hover .model-card__cta { gap: 4px !important; }
html.is-touch .prod-card:hover {
border-color: inherit !important;
transform: none !important;
box-shadow: none !important;
}
html.is-touch .prod-card:hover .prod-card__img-wrap img { transform: none !important; }
html.is-touch .type-card:hover .type-card-img { transform: none !important; }
html.is-touch .bs-card:hover {
transform: none !important;
border-color: #e2e2e2 !important;
box-shadow: none !important;
}
html.is-touch .btn-orange:hover { transform: none !important; }
html.is-touch .btn-outline:hover { transform: none !important; }
html.is-touch .btn-outline-dark:hover { transform: none !important; }
html.is-touch .btn-ghost:hover { border-color: rgba(255,255,255,.3) !important; color: rgba(255,255,255,.8) !important; }
html.is-touch a:hover { text-decoration: none !important; }
@media (hover: none) {
/* ── 1) Reset hover en todos los cards y botones navegables ── */
.brand-card:hover {
border-color: #e5e5e5 !important;
box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
transform: none !important;
}
.brand-card--text:hover .brand-card-name { color: #1a1a1a !important; }
.brand-card:hover .brand-card-cta { color: #888 !important; gap: 4px !important; }
.product-card:hover { border-color: inherit !important; transform: none !important; }
.product-card .product-add-btn { opacity: 1 !important; transform: none !important; }
.product-card:hover .product-add-btn { opacity: 1 !important; transform: none !important; }
.model-card:hover {
border-color: inherit !important;
transform: none !important;
box-shadow: none !important;
}
.model-card:hover .model-card__img img { transform: none !important; }
.model-card:hover .model-card__cta { gap: 4px !important; }
.prod-card:hover {
border-color: inherit !important;
transform: none !important;
box-shadow: none !important;
}
.prod-card:hover .prod-card__img-wrap img { transform: none !important; }
.type-card:hover .type-card-img { transform: none !important; }
.bs-card:hover {
transform: none !important;
border-color: #e2e2e2 !important;
box-shadow: none !important;
}
/* Reset hover en botones */
.btn-orange:hover { transform: none !important; }
.btn-outline:hover { transform: none !important; border-color: #fff !important; color: #fff !important; }
.btn-outline-dark:hover { transform: none !important; }
.btn-ghost:hover { border-color: rgba(255,255,255,.3) !important; color: rgba(255,255,255,.8) !important; }
/* Links de navegación */
a:hover { text-decoration: none !important; }
/* ── 2) Feedback táctil :active — confirma al usuario que tocó ── */
a.brand-card:active,
a.type-card:active,
a.bs-card:active,
a.model-card:active,
a.prod-card:active,
.product-card:active {
transform: scale(.97) !important;
transition: transform .08s ease-out !important;
opacity: .85 !important;
}
.btn-orange:active,
.btn-outline:active,
.btn-outline-dark:active,
.btn-ghost:active,
button:active,
.single_add_to_cart_button:active,
.checkout-button:active,
.product-add-btn:active,
input[type="submit"]:active,
input[type="button"]:active {
transform: scale(.96) !important;
opacity: .85 !important;
transition: transform .08s ease-out, opacity .08s ease-out !important;
}
.cospor-faq-item summary:active {
background: #fff5ef !important;
transition: background .08s ease-out !important;
}
/* Links genéricos sin clase de card/btn (menú, footer, etc.) */
nav a:active,
.footer-links a:active,
.menu-item a:active {
opacity: .55 !important;
transition: opacity .08s ease-out !important;
}
}
/* ════════════════════════════════════════════════════════
Botones "Copiar" (CVU, Alias, Monto en transferencia)
════════════════════════════════════════════════════════ */
.cospor-copy-btn {
display: inline-flex; align-items: center; gap: 4px;
margin-left: 8px; padding: 4px 10px;
background: #fff; color: #1a1a1a;
border: 1px solid #d8d8d8; border-radius: 999px;
font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
cursor: pointer; vertical-align: middle;
transition: background .15s, border-color .15s, color .15s, transform .12s;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.cospor-copy-btn:hover { border-color: #D33523; color: #D33523; }
.cospor-copy-btn:active { transform: scale(.96); }
.cospor-copy-btn.is-copied {
background: #22b35e; border-color: #22b35e; color: #fff;
}
.cospor-copy-btn.is-copied:hover { color: #fff; }
.cospor-copy-btn svg { display: block; flex-shrink: 0; }
.cospor-copy-btn span { line-height: 1; }
/* ════════════════════════════════════════════════════════
Instagram feed (Smash Balloon) en la sección "Por qué COSPOR"
════════════════════════════════════════════════════════ */
.cospor-ig-feed-side {
display: flex;
flex-direction: column;
justify-content: center; /* centra header+feed verticalmente en el row */
gap: 16px;
background: transparent;
padding: 28px 16px 28px 16px;
padding-right: max(16px, calc((100vw - 1240px) / 2));
border-radius: 0;
margin: 0;
align-self: stretch;
width: 100%;
}
.cospor-ig-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.cospor-ig-handle {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.cospor-ig-handle svg { color: var(--orange, #D33523); flex-shrink: 0; }
.cospor-ig-eyebrow {
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
font-weight: 600;
margin-bottom: 3px;
}
.cospor-ig-username {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: #fff;
}
.cospor-ig-feed-wrap { width: 100%; }
.cospor-ig-feed-wrap #sb_instagram { padding-bottom: 0 !important; }
.cospor-ig-feed-wrap #sb_instagram .sbi_item { border-radius: 8px; overflow: hidden; }
.cospor-ig-feed-wrap #sb_instagram .sbi_photo_wrap { border-radius: 8px; overflow: hidden; }
.cospor-ig-feed-wrap #sb_instagram .sbi_photo { transition: transform .25s; }
.cospor-ig-feed-wrap #sb_instagram .sbi_photo:hover { transform: scale(1.04); }
.cospor-ig-feed-wrap #sb_instagram .sbi_load,
.cospor-ig-feed-wrap #sb_instagram .sbi_header_text,
.cospor-ig-feed-wrap #sb_instagram .sb_instagram_header { display: none !important; }
/* Cap a 3 items visibles — el plugin a veces renderea +1 de buffer post-filter. */
.cospor-ig-feed-wrap #sb_instagram #sbi_images .sbi_item:nth-child(n+4) { display: none !important; }
/* Cursor pointer en las fotos clickeables (el lightbox custom las maneja). */
.cospor-ig-feed-wrap a.sbi_photo { cursor: pointer; }
/* ── Lightbox custom para Instagram feed (SBI Free no lo incluye) ── */
.cospor-ig-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 99998;
opacity: 0;
visibility: hidden;
transition: opacity .25s, visibility .25s;
padding: 32px 16px;
}
.cospor-ig-lightbox.is-open { opacity: 1; visibility: visible; }
.cospor-ig-lightbox-close {
position: absolute;
top: 14px; right: 18px;
width: 44px; height: 44px;
background: transparent;
border: none;
color: #fff;
font-size: 36px;
line-height: 1;
cursor: pointer;
z-index: 99999;
border-radius: 50%;
transition: background .15s;
}
.cospor-ig-lightbox-close:hover { background: rgba(255,255,255,.12); }
.cospor-ig-lightbox-inner {
max-width: 720px;
max-height: 92vh;
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
.cospor-ig-lightbox-img {
max-width: 100%;
max-height: 75vh;
width: auto;
height: auto;
border-radius: 8px;
background: #111;
object-fit: contain;
}
.cospor-ig-lightbox-caption {
margin: 0;
color: rgba(255,255,255,.85);
font-family: 'Inter', sans-serif;
font-size: 13.5px;
line-height: 1.5;
text-align: center;
max-width: 100%;
max-height: 12vh;
overflow-y: auto;
}
.cospor-ig-lightbox-caption:empty { display: none; }
@media (max-width: 720px) {
.cospor-ig-lightbox { padding: 16px 8px; }
.cospor-ig-lightbox-img { max-height: 68vh; }
}
@media (max-width: 720px) {
.cospor-ig-feed-side { padding: 20px 16px; }
.cospor-ig-header { flex-direction: column; align-items: flex-start; }
}