/* ==========================================================================
PromoWatch — sistema visual
LUXURY × PERFORMANCE × PRECISION × TECHNOLOGY
Reglas de uso del color corporativo (naranja): reservado para estados
activos/foco y el acento del wordmark. Los botones/CTA usan negro o
grafito, no naranja. El resto de la interfaz se mantiene neutral
(blanco/negro/grises) para que el reloj sea siempre el elemento
dominante. Verde = disponibilidad, nada más.
Mobile-first. Tipografías autohospedadas, sin CDN externo.
========================================================================== */
/* ---------- Tipografía autohospedada: Montserrat (familia única) ---------- */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../fonts/Montserrat-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../fonts/Montserrat-var-latin-ext.woff2") format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces: uso puntual (banner de línea Advanced), no forma parte de
la jerarquía general Montserrat. Variable font — se activa el eje
"SOFT" vía font-variation-settings para lograr el trazo redondeado. */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 600 800;
font-display: swap;
src: url("../fonts/Fraunces-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 600 800;
font-display: swap;
src: url("../fonts/Fraunces-var-latin-ext.woff2") format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed: título + subtítulo del banner de catálogo (líneas y
marcas) — misma tipografía que promowatch.com.mx. */
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/BarlowCondensed-Bold-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Barlow Condensed";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/BarlowCondensed-Bold-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Anton: se conserva autohospedada por compatibilidad, ya no se usa en el banner. */
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/Anton-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/Anton-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* base — paleta oficial Promowatch */
--color-black: #000000;
--color-white: #ffffff;
--color-graphite: #1a1a1a;
--bg: #ffffff;
--bg-alt: #f5f5f5;
--border: #d9d9d9;
--ink: #000000;
--ink-soft: #6b6b6b;
--surface-premium: var(--color-black);
--surface-premium-alt: var(--color-graphite);
--accent: #dc8027; /* color oficial del logo PW — uso reservado a estados activos/foco */
/* Rojo institucional. Estaba escrito a mano en el contorno de las tarjetas
de Condiciones comerciales; se promueve a token para que la sección de
personalización use EXACTAMENTE el mismo tono y no haya dos rojos. */
--rojo-institucional: #ff2c2c;
--accent-strong: #b8681e;
--success: #00843d; /* disponibilidad únicamente */
--cta: var(--color-graphite); /* botones/CTA: negro o grafito, no naranja */
--cta-hover: var(--color-black);
--font-display: "Montserrat", -apple-system, sans-serif;
--font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--radius: 7px;
--radius-lg: 14px;
--max-width: 1180px;
--header-h: 60px;
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Montserrat", sans-serif;
font-weight: 300;
color: var(--ink);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ---------- Jerarquía tipográfica de marca ---------- */
.hero-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
h1, h2 {
font-family: "Montserrat", sans-serif;
font-weight: 600;
letter-spacing: 0.01em;
}
h3, h4 {
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
.product-reference {
font-family: "Montserrat", sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
}
button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 16px;
}
/* ---------- Header / nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: var(--surface-premium);
color: var(--color-white);
height: var(--header-h);
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.brand {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
color: var(--color-white);
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
}
.brand-logo { height: 22px; width: auto; display: block; }
/* ---------- Portada de acceso (portal distribuidores) ---------- */
.access-gate {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--color-black);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.access-gate-panel {
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.access-gate-logo { height: 48px; width: auto; margin-bottom: 20px; }
.access-gate-eyebrow {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 32px;
}
.access-gate-form { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.access-gate-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
text-align: left;
margin-top: 14px;
}
.access-gate-input {
width: 100%;
padding: 11px 2px;
background: transparent;
border: none;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
color: var(--color-white);
font-family: var(--font-ui);
font-size: 0.95rem;
transition: border-color 0.12s var(--ease);
}
.access-gate-input:focus { outline: none; border-color: var(--accent); }
.access-gate-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.access-gate-submit {
margin-top: 28px;
width: 100%;
justify-content: center;
background: var(--accent);
color: var(--color-black);
border-color: var(--accent);
}
.access-gate-submit:hover { background: #c46f1f; border-color: #c46f1f; }
.access-gate-error {
margin: 14px 0 0;
font-family: var(--font-ui);
font-size: 0.82rem;
color: #ff8a6a;
}
.brand-portal-tag {
font-family: -apple-system, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-black);
background: var(--accent);
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
/* Insignia "Distribuidores" más compacta solo en móvil — en pantallas
angostas llegaba a ser más ancha que el propio logotipo PW junto a ella.
Se reduce proporcionalmente (tipografía, padding y el espacio del .brand
que la separa del logo); el logo de PromoWatch (.brand-logo) no se toca.
Incluye también teléfono apaisado (ancho >767px pero alto bajo). */
@media (max-width: 767px), (max-height: 480px) and (orientation: landscape) {
.brand { gap: 6px; }
.brand-portal-tag {
font-size: 7.5px;
padding: 2px 6px;
letter-spacing: 0.03em;
}
}
.header-actions { display: flex; align-items: center; gap: 6px; }
.quote-toggle {
position: relative;
background: none;
border: none;
color: var(--color-white);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.quote-toggle svg { width: 20px; height: 20px; }
.quote-badge {
position: absolute;
top: 0;
right: 0;
min-width: 16px;
height: 16px;
padding: 0 3px;
border-radius: 20px;
background: var(--accent);
color: var(--color-white);
font-family: "Montserrat", sans-serif;
font-size: 0.62rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.quote-badge[hidden] { display: none; }
.site-nav {
display: none;
gap: 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: none;
font-weight: 400;
white-space: nowrap;
}
.site-nav a {
text-decoration: none;
color: #b3b3b3;
padding-bottom: 4px;
border-bottom: 1px solid transparent;
transition: color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.site-nav a:hover { color: var(--color-white); }
.site-nav a.active { color: var(--color-white); border-color: var(--accent); }
.nav-toggle {
background: none;
border: none;
color: var(--color-white);
font-size: 1.4rem;
line-height: 1;
padding: 6px;
cursor: pointer;
}
/* Encontrado al probar teléfono horizontal (ancho ~780-900px): con los 10
enlaces completos del menú más la insignia "Distribuidores", el nav de
escritorio ya no cabía a partir de 780px y generaba desplazamiento
horizontal en toda la página — no tenía relación con los cambios de esta
tarea, pero bloqueaba justo la prueba obligatoria de "sin scroll
horizontal en teléfono horizontal", así que se corrige aquí: el punto de
cambio sube a 1024px (ancho de escritorio ya verificado sin desbordes),
y por debajo se mantiene el menú hamburguesa. */
@media (min-width: 1024px) {
.site-nav { display: flex; }
.nav-toggle { display: none; }
}
.mobile-menu {
display: none;
background: var(--surface-premium);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
display: block;
padding: 13px 16px;
color: #b3b3b3;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-transform: none;
}
/* ---------- Hero ---------- */
.hero {
background: var(--surface-premium);
color: var(--color-white);
padding: 52px 0 44px;
text-align: center;
}
.hero h1 {
font-family: "Montserrat", sans-serif;
font-size: clamp(1.7rem, 4vw, 2.5rem);
font-weight: 700;
text-transform: uppercase;
margin: 0 0 12px;
letter-spacing: 0.02em;
}
.hero p {
color: #a8a8a8;
max-width: 540px;
margin: 0 auto;
font-size: 0.98rem;
font-weight: 400;
}
/* Banner de catálogo (líneas y marcas) — diseño definitivo aprobado: foto
fija a la derecha, título + subtítulo reales (no texto quemado en la
imagen) en Anton/naranja, alineados a la izquierda y centrados
verticalmente. Se respeta la proporción exacta de la imagen fuente
(5426×824) para que nunca se recorte ni se distorsione. */
.banner-hero {
position: relative;
overflow: hidden;
aspect-ratio: 5426 / 824;
background: var(--color-white);
}
.banner-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.banner-hero .container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: left;
}
.banner-hero h1 {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
line-height: 0.92;
color: #222222;
font-size: clamp(1.5rem, 6.2vw, 4.4rem);
margin: 0;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.banner-hero h1.banner-hero-title-long {
font-size: clamp(1rem, 3.4vw, 2.4rem);
max-width: 620px;
}
.banner-hero p {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
color: #222222;
font-size: clamp(0.6rem, 1.7vw, 1.05rem);
line-height: 1.3;
margin: 8px 0 0;
max-width: 340px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}
@media (max-width: 480px) {
.banner-hero p { max-width: 78%; }
}
/* Cápsula de rango de precios — debajo del banner de cada línea, fuera de
la foto. Fondo blanco + borde delgado en el mismo verde de "disponibilidad"
(--success, único verde de la identidad visual), alineada a la izquierda
con el mismo margen del .container — compacta y puramente informativa
(sin sombra, sin ícono, sin apariencia de botón). Se oculta por completo
en modo "ver modelos sin precio" para no revelar información comercial,
igual que el resto de los precios de este catálogo. */
.price-range-bar {
background: var(--bg);
padding: 8px 0 6px;
}
.price-range-pill {
display: inline-block;
max-width: 100%;
background: var(--color-white);
border: 1px solid var(--success);
color: var(--success);
border-radius: 999px;
padding: 3px 11px;
font-family: var(--font-ui);
font-weight: 600;
font-size: 0.64rem;
letter-spacing: 0.04em;
line-height: 1.5;
text-transform: uppercase;
white-space: normal;
}
@media (max-width: 480px) {
.price-range-pill {
font-size: 0.58rem;
padding: 3px 9px;
letter-spacing: 0.03em;
}
}
.prices-hidden .price-range-bar { display: none; }
/* ---------- Banner de línea de catálogo (ej. Advanced) ---------- */
.catalog-hero {
position: relative;
overflow: hidden;
/* respeta la proporción real del banner (1337 × 197px) en vez de
forzar una altura y recortar la imagen con object-fit:cover */
aspect-ratio: 1337 / 197;
text-align: left;
}
.catalog-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.catalog-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 100%);
}
/* el contenido se ancla abajo-izquierda, alineado con el mismo borde
izquierdo que usa .container en el resto del sitio (no centrado) */
.catalog-hero .container {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
z-index: 1;
padding-bottom: 10px;
}
.catalog-hero h1 {
font-family: "Fraunces", serif;
font-variation-settings: "SOFT" 100, "opsz" 60;
font-weight: 800;
font-size: clamp(1.3rem, 3.2vw, 2.2rem);
text-transform: none;
letter-spacing: 0;
margin: 0 0 6px;
}
.catalog-hero p {
font-family: "Fraunces", serif;
font-variation-settings: "SOFT" 100, "opsz" 24;
font-weight: 600;
color: #eaeaea;
font-size: 0.85rem;
margin: 0;
max-width: none;
}
@media (min-width: 720px) {
.catalog-hero .container { padding-bottom: 22px; }
}
/* Hero con foto (home) */
/* El banner ya trae su propio texto e identidad integrados en la imagen
(Distribuidor Oficial, "Celebra y Reconoce."), así que el contenedor
solo respeta la proporción panorámica original — sin overlay ni
texto HTML duplicado encima. */
.hero-photo {
position: relative;
padding: 0;
aspect-ratio: 5577 / 825;
display: block;
overflow: hidden;
}
.hero-photo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-content {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* Contenedor del bloque oculto que sustituye al banner retirado. Necesita
`position: relative` porque .hero-content va en posición absoluta; sin un
ancestro posicionado se anclaría al documento. Altura cero: la portada
arranca directo con las tarjetas de línea, que ya traen sus 40 px de aire
por arriba — la misma separación que había entre el banner y las líneas. */
.hero-seo {
position: relative;
height: 0;
}
/* ---------- Módulos de información (condiciones comerciales) ---------- */
.info-modules-section {
background: var(--bg-alt);
padding: 48px 0 56px;
border-top: 1px solid var(--border);
}
.section-eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.76rem;
font-weight: 600;
color: var(--ink-soft);
margin: 0 0 20px;
}
.info-modules-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 640px) {
.info-modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.info-modules-grid { grid-template-columns: repeat(5, 1fr); }
}
.info-card {
background: var(--color-white);
border: 1px solid var(--rojo-institucional);
border-radius: var(--radius);
padding: 20px 18px;
}
.info-icon {
display: block;
width: 26px;
height: 26px;
color: var(--ink);
margin-bottom: 14px;
}
.info-icon svg { width: 100%; height: 100%; }
.info-card h3 {
font-size: 0.92rem;
margin: 0 0 8px;
}
.info-card p {
font-size: 0.8rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.5;
}
/* ---------- Carrusel "Novedades" (portada) --------------------------------
Debajo de Condiciones comerciales. Usa la MISMA tarjeta de producto
(.product-card) y la MISMA ficha (lightbox) que cualquier catálogo — lo
único nuevo aquí es cómo se recorren: una franja con scroll horizontal y
snap en vez de una grilla, reutilizando el contenedor (.pz-container) y
el botón circular (.pz-nav) ya definidos para "Personaliza cada detalle",
así comparten identidad visual sin duplicar CSS. Sin scroll infinito ni
autoplay: el usuario controla el avance con flechas, teclado o gesto. */
.novedades-section {
background: var(--color-white);
border-top: 1px solid var(--border);
padding: 48px 0 52px;
}
.novedades-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 0 0 16px;
}
.novedades-header .pz-title { margin: 0; }
.novedades-arrows { flex: 0 0 auto; display: flex; gap: 8px; }
.novedades-track {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding: 2px 2px 10px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.novedades-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.novedades-track::-webkit-scrollbar { height: 6px; }
.novedades-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* Tamaño de tarjeta dentro del carrusel: en móvil, una completa y el borde
de la siguiente (mismo criterio que .pz-card); en pantallas más anchas,
más tarjetas completas más el asomo de la que sigue. El ancho de
.product-card normalmente lo da la celda del grid — aquí no hay grid, así
que se fija por flex-basis. */
.novedades-track .product-card {
flex: 0 0 calc(100% - 16px - 34px);
max-width: 230px;
min-width: 0;
scroll-snap-align: start;
}
@media (min-width: 640px) {
.novedades-track .product-card { flex-basis: calc((100% - 2 * 16px) / 2.3); max-width: none; }
}
@media (min-width: 960px) {
.novedades-track .product-card { flex-basis: calc((100% - 3 * 16px) / 3.35); }
}
@media (min-width: 1400px) {
.novedades-track .product-card { flex-basis: calc((100% - 4 * 16px) / 4.35); }
}
@media (max-width: 479px) {
.novedades-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.novedades-track { scroll-behavior: auto; }
}
/* ---------- Video Tissot (debajo del carrusel de Marcas) ----------
ESCRITORIO / TABLETA (desde 768px): de extremo a extremo de la pantalla (sin
100vw: incluiría la barra de scroll y provocaría desplazamiento horizontal),
caja 16:9 sobre negro y object-fit: contain, así nunca se deforma ni se
recorta.
MÓVIL (< 768px, mismo corte que la galería de TAG, y también teléfonos en
horizontal): formato vertical 4:5 como la referencia de TAG, dentro de
.container (mismos márgenes laterales de 16px), centrado, con
object-fit: cover — el video llena todo el recuadro, sin barras negras ni
vacíos, recortando los laterales. Punto focal al centro (object-position
50% 50%): el producto del video va centrado en toda la secuencia. En
horizontal el ancho se limita por la altura de la pantalla para que el 4:5
quepa completo.
En todos los tamaños: franja ligera (16px) del color de fondo de la página
entre la zona negra del carrusel y el video. */
.tissot-video-section {
margin: 0;
padding: 16px 0 0;
background: var(--bg);
}
.tissot-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--color-black);
}
.tissot-video video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: var(--color-black);
}
@media (min-width: 768px) {
.tissot-video-section > .container {
max-width: none;
padding: 0;
}
}
@media (max-width: 767px),
(pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
.tissot-video-section > .container {
max-width: var(--max-width);
padding: 0 16px;
}
.tissot-video {
aspect-ratio: 4 / 5;
width: 100%;
margin: 0 auto;
}
.tissot-video video {
object-fit: cover;
object-position: 50% 50%;
}
}
/* Teléfono en horizontal: el ancho se limita por la ALTURA de la pantalla para que
el recuadro 4:5 quepa completo (si no, mediría más que la pantalla). */
@media (orientation: landscape) and (max-width: 767px),
(pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
.tissot-video {
width: min(100%, calc((100vh - 96px) * 0.8));
width: min(100%, calc((100svh - 96px) * 0.8));
}
}
/* ---------- Galería de marca destacada (video + 2 fotos) ----------
3 columnas iguales, mismo ancho que el resto del sitio, sin esquinas
redondeadas — mismo orden y proporción que la referencia aprobada. */
.brand-showcase-section {
background: var(--bg);
padding: 48px 0 20px;
}
.brand-showcase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
margin-top: 20px;
}
.brand-showcase-tile {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--color-black);
}
.brand-showcase-tile img,
.brand-showcase-tile video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Móvil: el video va grande y solo arriba, las 2 fotos quedan en una
segunda fila de 2 columnas debajo — mismo orden que la referencia. */
@media (max-width: 767px) {
.brand-showcase-grid {
grid-template-columns: repeat(2, 1fr);
}
.brand-showcase-video {
grid-column: 1 / -1;
}
}
.timepro-strip-section {
padding: 6px 0 44px;
}
/* Contenedor ligeramente más ancho que el resto del sitio (en vez del
.container estándar de 1180px) para que el banner crezca un poco tanto
en computadora como en teléfono, sin llegar a pantalla completa —
sigue dejando aire a los lados para que se vean las esquinas
redondeadas. */
.timepro-strip-section .container {
max-width: 1220px;
padding: 0 12px;
}
.timepro-strip-img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-lg);
}
.timepro-strip-cta {
display: flex;
justify-content: center;
margin-top: 16px;
}
.timepro-strip-cta .btn {
text-transform: none;
}
/* ---------- Líneas / colecciones (home) ---------- */
.lineas-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 40px 0 60px;
}
@media (min-width: 640px) {
.lineas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.lineas-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- Carrusel de marcas (cinta continua) ---------- */
.brand-marquee {
background: var(--color-black);
overflow: hidden;
padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-marquee-track {
display: flex;
align-items: center;
width: max-content;
gap: 28px;
animation: brand-marquee-scroll 34s linear infinite;
will-change: transform;
}
/* pausa completa del banner al pasar el cursor — solo en dispositivos
con hover real (mouse/trackpad), para no dejar el carrusel "pegado"
en un tap accidental en móvil/touch */
@media (hover: hover) and (pointer: fine) {
.brand-marquee:hover .brand-marquee-track {
animation-play-state: paused;
}
}
@media (prefers-reduced-motion: reduce) {
.brand-marquee-track { animation: none; }
}
@keyframes brand-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.brand-marquee-item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
opacity: 0.62;
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.brand-marquee-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.brand-marquee-item:hover,
.brand-marquee-item:focus-visible {
opacity: 1;
transform: scale(1.08);
}
.brand-marquee-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
@media (min-width: 720px) {
.brand-marquee-item { width: 108px; height: 108px; }
}
/* ---------- Cuadrícula estática de marcas (debajo de TIMEPRO Box) ----------
Mismos logos y enlaces que la cinta (brand-marquee), pero fijos en una
grilla en vez de animados — otra forma de llegar directo al catálogo de
cada marca para quien prefiera no esperar a que pase en el carrusel. */
.brand-grid-section {
background: var(--surface-premium);
padding: 40px 0 56px;
}
.brand-grid-section .container {
max-width: 1360px;
}
.brand-grid-eyebrow {
color: #8a8a8a;
text-align: center;
}
.brand-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 44px;
}
/* Desde tablet grande hacia arriba, las 36 marcas se acomodan en exactamente
4 renglones (9 columnas) en vez de ajustarse al ancho disponible. Si la
ventana es más angosta que las 9 columnas necesarias, la cuadrícula
permite scroll horizontal en vez de romper el layout. */
@media (min-width: 860px) {
.brand-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(4, auto);
justify-content: center;
overflow-x: auto;
padding-bottom: 4px;
}
}
.brand-grid-item {
position: relative;
flex: 0 0 auto;
width: 84px;
height: 84px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@media (min-width: 720px) {
.brand-grid-item { width: 108px; height: 108px; }
}
.brand-grid-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
position: relative;
z-index: 1;
}
/* degradado muy sutil (color de acento de la marca) que aparece al pasar el
mouse, tipo "glow" difuminado — no debe leerse como un recuadro sólido */
.brand-grid-item::after {
content: "";
position: absolute;
inset: -20%;
background: radial-gradient(circle at 50% 50%, rgba(220, 128, 39, 0.22), rgba(220, 128, 39, 0) 68%);
opacity: 0;
transition: opacity 0.3s var(--ease);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.brand-grid-item:hover::after { opacity: 1; }
.brand-grid-item:hover img { transform: scale(1.06); }
}
.brand-grid-item:focus-visible::after { opacity: 1; }
.brand-grid-item img { transition: transform 0.25s var(--ease); }
.brand-grid-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
z-index: 2;
}
.linea-card {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 22px;
background: var(--color-white);
text-decoration: none;
color: var(--ink);
transition: border-color 0.14s var(--ease);
position: relative;
}
.linea-card:hover { border-color: var(--success); }
.linea-card.disabled { opacity: 0.5; pointer-events: none; }
.linea-card h3 {
margin: 0 0 8px;
font-size: 1.1rem;
}
.linea-card p { margin: 0; color: var(--ink-soft); font-size: 0.87rem; }
.linea-card .price-range {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
font-size: 0.95rem;
margin: 0 0 10px;
}
.linea-card .price-range span {
font-family: var(--font-ui);
font-weight: 400;
color: var(--ink-soft);
font-size: 0.7rem;
display: block;
margin-top: 2px;
/* Tipo oración (sin mayúsculas forzadas): "Por pieza antes de IVA nacional" */
letter-spacing: 0.01em;
}
/* Sin descripción debajo, el rango cierra la tarjeta sin espacio extra. */
.linea-card .price-range:last-child { margin-bottom: 0; }
.badge {
position: absolute;
top: 14px;
right: 14px;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 9px;
border-radius: 20px;
font-weight: 600;
background: rgba(0, 132, 61, 0.08);
color: var(--success);
}
.badge.soon { background: var(--bg-alt); color: var(--ink-soft); }
/* ---------- Toolbar de catálogo (filtros + búsqueda) ---------- */
.catalog-toolbar {
position: sticky;
top: var(--header-h);
z-index: 30;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 14px 0;
}
.toolbar-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.search-box { flex: 1 1 220px; position: relative; }
.search-box input {
width: 100%;
padding: 10px 12px 10px 30px;
border: none;
border-bottom: 1.5px solid var(--border);
border-radius: 0;
font-family: var(--font-ui);
font-size: 0.92rem;
background: transparent url("data:image/svg+xml;utf8,") no-repeat 4px center;
transition: border-color 0.12s var(--ease);
}
.search-box input:focus { outline: none; border-color: var(--accent); }
.search-box input::placeholder { color: #9a9a9a; }
.filter-select {
padding: 10px 10px;
border: none;
border-bottom: 1.5px solid var(--border);
border-radius: 0;
background: transparent;
font-family: var(--font-ui);
font-size: 0.84rem;
min-width: 128px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ink);
transition: border-color 0.12s var(--ease);
}
.filter-select:focus { outline: none; border-color: var(--accent); }
.results-count {
font-size: 0.78rem;
color: var(--ink-soft);
padding: 10px 0 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ---------- Logos de marca en el toolbar del catálogo ----------
Muestra de un vistazo qué marca(s) incluye la sección — misma imagen que
la cinta/cuadrícula de marcas, solo que aquí con las esquinas suavizadas
en vez de ir integradas al fondo negro. */
.toolbar-footer-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 12px;
}
.toolbar-footer-row .results-count { padding-top: 10px; }
.brand-logo-strip {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.brand-logo-strip img {
width: 32px;
height: 32px;
border-radius: 7px;
display: block;
object-fit: cover;
}
/* En móvil, justify-content:space-between solo empuja el strip de marcas
a la derecha (pegado a "N PRODUCTOS") cuando hay pocas marcas y ambos
caben en la misma línea — con muchas marcas, el strip ya se desborda y
cae solo a flex-start en su propio renglón. Forzar columna aquí hace que
TODAS las líneas (sin importar cuántas marcas tengan) se comporten igual
en móvil: logos en su propio renglón, alineados a la izquierda, mismo
margen que el resto del contenido. Escritorio no se toca. El criterio
combina ancho angosto (portrait) con alto bajo en horizontal, porque un
teléfono grande apaisado (ej. 812px de ancho) supera los 767px pero
sigue siendo un teléfono — sin el alto bajo, ahí se reproducía el mismo
problema que en portrait. */
@media (max-width: 767px), (max-height: 480px) and (orientation: landscape) {
.toolbar-footer-row { flex-direction: column; align-items: flex-start; }
}
/* ---------- Acciones exclusivas del portal de distribuidores:
ocultar precios para compartir el catálogo a sus clientes, y
descargar esa misma vista sin precios en PDF ---------- */
.price-toggle-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-top: 12px;
}
.price-toggle-row .btn {
text-transform: none;
background: #006039;
border-color: #006039;
}
.price-toggle-row .btn:hover:not([disabled]) {
background: #00492c;
border-color: #00492c;
}
.price-toggle-row .btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Versión compacta de los 3 controles exclusivos de Distribuidores
("Mostrar Modelos Sin Precios", "Descargar PDF", "Mis Favoritos") en
teléfono — se reduce el contenedor completo (alto, ancho, padding,
ícono, radio), no solo la tipografía. El criterio de "teléfono" combina
ancho angosto (portrait) con alto bajo en horizontal, para no afectar
tablets (que conservan más alto incluso apaisadas). El área táctil
invisible se amplía con ::after (hereda pointer-events del botón, así
que un botón [disabled] sigue sin responder). */
@media (max-width: 767px), (max-height: 480px) and (orientation: landscape) {
.price-toggle-row { gap: 6px; padding-top: 8px; }
.price-toggle-row .btn,
.btn.btn-fav-filter {
padding: 6px 10px;
font-size: 0.64rem;
gap: 4px;
letter-spacing: 0.03em;
border-radius: 5px;
white-space: nowrap;
position: relative;
}
.price-toggle-row .btn::after,
.btn.btn-fav-filter::after {
content: "";
position: absolute;
inset: -7px;
}
.btn-fav-filter .fav-icon { width: 13px; height: 13px; }
}
.prices-hidden .prod-price,
.prices-hidden .price-block,
.prices-hidden .discount-badge {
display: none !important;
}
/* El badge de descuento (.discount-badge) es un elemento aparte de
.prod-price/.price-block — está en position:absolute en la tarjeta
(.product-card > .discount-badge) y en flujo normal dentro del header
de la ficha (#lb-discount-badge), así que ocultarlo con display:none no
deja hueco en ninguno de los dos casos: ni desplaza el layout absoluto
de la tarjeta ni dejan un espacio en el renglón flex de la ficha. */
@media print {
.site-header, .mobile-menu, .banner-hero, .catalog-toolbar,
.site-footer, .quote-drawer-overlay, .access-gate, .lightbox-overlay,
.skip-link {
display: none !important;
}
/* CSS Grid no respeta bien "no cortar" en el motor de impresión de
Safari — se usa flexbox aquí en su lugar, que sí lo respeta. */
.product-grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
}
.product-card {
width: 31% !important;
flex: 0 0 31% !important;
page-break-inside: avoid;
break-inside: avoid-page;
}
.product-card * { break-inside: avoid; }
}
/* ---------- Grid de productos ---------- */
.product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
padding: 24px 0 64px;
}
@media (min-width: 640px) {
.product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 960px) {
.product-grid { grid-template-columns: repeat(4, 1fr); }
}
.product-card {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--color-white);
cursor: pointer;
text-align: left;
padding: 0;
font: inherit;
color: inherit;
transition: border-color 0.12s var(--ease);
}
.product-card:hover, .product-card:focus-visible { border-color: var(--color-black); }
.product-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-card .thumb-wrap {
background: var(--bg-alt);
aspect-ratio: 1 / 1.05;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-card img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.product-card .info { padding: 12px 13px 15px; }
.product-card .brand-name {
font-size: 0.64rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-soft);
font-weight: 600;
margin: 0 0 3px;
}
.product-card .prod-name {
font-size: 0.85rem;
margin: 0 0 3px;
color: var(--ink);
font-weight: 500;
}
/* Clave del modelo bajo la descripción: sutil (gris claro, más chica que el resto
del texto de la tarjeta) pero legible; sirve para identificar el modelo en las
capturas que mandan los clientes. Nunca se corta: si es larga, baja de renglón. */
.product-card .prod-sku {
margin: 0 0 8px;
font-size: 0.68rem;
line-height: 1.3;
font-weight: 500;
letter-spacing: 0.02em;
color: #8a8a8a;
overflow-wrap: anywhere;
}
.product-card .prod-price {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--ink);
}
.product-card .prod-price small {
font-family: var(--font-ui);
font-weight: 400;
color: var(--ink-soft);
font-size: 0.7rem;
}
/* ---------- Precio público / precio distribuidor (con descuento) ----------
Se activa solo en los modelos que ya tienen precio público capturado
(por marca, según se van llenando) — el resto sigue viendo el precio
normal sin cambios. */
.discount-badge {
display: inline-block;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 0.68rem;
text-transform: none;
letter-spacing: 0.02em;
color: var(--color-white);
background: #006039;
border: 1px solid #006039;
border-radius: var(--radius);
padding: 4px 9px;
white-space: nowrap;
}
.product-card > .discount-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
}
.prod-price.has-discount { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.price-original {
text-decoration: line-through;
color: var(--ink-soft);
font-weight: 400;
font-size: 0.78rem;
}
.price-discounted {
color: #006039;
font-weight: 700;
}
.lightbox-header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding-right: 34px;
}
.lightbox-header-row .brand-name { margin: 0; }
.lightbox-header-actions { display: flex; align-items: center; gap: 10px; }
.lightbox-details .price-main .price-discounted { font-size: 15px; }
/* ---------- Favoritos (corazón) — guardar productos en una lista personal
para poder ir "depurando" los que interesan. Persistido en localStorage,
por navegador, igual que la cotización. No afecta precios ni cotización. */
.fav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--border);
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--ink-soft);
cursor: pointer;
transition: color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.fav-btn:hover { border-color: var(--color-black); color: var(--ink); }
.fav-btn .fav-icon { fill: none; stroke: currentColor; stroke-width: 1.7; display: block; }
.fav-btn.is-fav { color: #d33a2c; border-color: #d33a2c; }
.fav-btn.is-fav .fav-icon { fill: currentColor; }
.product-card > .fav-btn {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
}
.lightbox-fav-btn { position: static; flex: 0 0 auto; }
.btn.btn-fav-filter {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-white);
color: var(--ink);
border: 1px solid var(--border);
text-transform: none;
}
.btn-fav-filter .fav-icon { fill: none; stroke: currentColor; stroke-width: 1.7; }
.btn-fav-filter:hover { border-color: var(--color-black); }
.btn-fav-filter[aria-pressed="true"] {
background: #d33a2c;
border-color: #d33a2c;
color: var(--color-white);
}
.btn-fav-filter[aria-pressed="true"] .fav-icon { fill: currentColor; }
/* ---------- Miniatura de marca + "Authorized Dealer" en la ficha de producto --- */
.lb-brand-id {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 12px;
}
.lb-brand-id img {
width: 28px;
height: 28px;
border-radius: 6px;
object-fit: cover;
display: block;
}
.lb-authorized {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
}
.cat-tag {
display: inline-block;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
padding: 3px 8px;
border-radius: 3px;
margin-top: 8px;
border: 1px solid var(--border);
color: var(--ink-soft);
}
.no-results {
text-align: center;
padding: 60px 20px;
color: var(--ink-soft);
display: none;
}
.no-results.visible { display: block; }
/* ---------- Lightbox / ficha de producto ---------- */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.72);
display: none;
align-items: flex-end;
justify-content: center;
z-index: 100;
}
.lightbox-overlay.open { display: flex; }
/* Un solo contenedor para todas las entradas a la ficha (listado, marca,
línea, búsqueda, favoritos y carrusel de la portada). El overlay deja
fuera del panel las zonas no seguras del dispositivo (notch, isla
dinámica, barra de estado) con env(safe-area-inset-*): el panel — y con
él el botón de cerrar, que se ancla al panel — nunca queda bajo ellas,
en vertical ni en horizontal. */
.lightbox-overlay {
padding-top: env(safe-area-inset-top, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
box-sizing: border-box;
overscroll-behavior: contain;
}
@media (min-width: 720px) {
.lightbox-overlay {
align-items: center;
padding-top: max(20px, env(safe-area-inset-top, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px));
padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
padding-left: max(20px, env(safe-area-inset-left, 0px));
}
}
/* El panel no hace scroll: lo hace .lightbox-body. Así el botón de cerrar
(absoluto respecto al panel) queda siempre a la vista y no se desplaza
con el contenido. La altura nunca supera el área visible real (100% del
overlay): en iOS/Android 92vh incluye la zona tapada por las barras del
navegador. */
.lightbox-panel {
background: var(--color-white);
width: 100%;
max-width: 780px;
max-height: 92vh;
max-height: min(92vh, 100%);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px 12px 0 0;
position: relative;
animation: fadeIn 0.14s var(--ease);
}
@media (min-width: 720px) {
.lightbox-panel { border-radius: var(--radius); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.lightbox-close {
position: absolute;
top: 14px;
right: 14px;
background: var(--color-white);
border: 1px solid var(--border);
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 1rem;
cursor: pointer;
z-index: 2;
transition: border-color 0.12s var(--ease);
}
.lightbox-close:hover { border-color: var(--color-black); }
.lightbox-body {
display: grid;
grid-template-columns: 1fr;
align-content: start;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 620px) {
.lightbox-body { grid-template-columns: 1fr 1fr; }
}
.lightbox-image {
background: var(--bg-alt);
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.lightbox-image img {
width: auto;
height: auto;
max-width: 100%;
max-height: 60vh;
max-height: min(60vh, 60dvh);
object-fit: contain;
}
/* Tipografía de la ficha (lightbox): marca + nombre de producto en
Montserrat SemiBold 15px; todo lo demás en Montserrat Regular 13px. */
.lightbox-details { padding: 28px 26px 32px; }
.lightbox-details .brand-name {
font-family: "Montserrat", sans-serif;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-soft);
font-weight: 600;
margin: 0 0 6px;
}
.lightbox-details h2 {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 15px;
margin: 0 0 4px;
}
.lightbox-details .sku {
font-family: "Montserrat", sans-serif;
font-weight: 400;
color: var(--ink-soft);
font-size: 13px;
margin: 0 0 14px;
}
.lightbox-details .cat-tag {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 13px;
}
/* Fila de etiquetas de la ficha de producto (categoría + info de
personalización) — mismo tag visual (.cat-tag), en fila con ajuste
automático de línea en pantallas angostas, sin superponerse ni cortarse. */
.lightbox-tags-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.lightbox-tags-row .cat-tag {
margin-top: 0;
}
.lightbox-tags-row .cat-tag-info {
flex: 1 1 0%;
min-width: 0;
background: rgba(0, 132, 61, 0.08);
color: var(--success);
border: none;
border-radius: 20px;
text-transform: none;
font-weight: 600;
}
.price-block {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 14px 0;
margin: 16px 0;
}
.price-block .price-main {
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-weight: 400;
}
.price-block .price-main small {
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-weight: 400;
color: var(--ink-soft);
}
.price-block .price-total {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 13px;
color: var(--ink-soft);
margin-top: 3px;
}
.details-section { margin-bottom: 18px; }
.details-section h4 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 13px;
text-transform: none;
letter-spacing: 0.02em;
color: var(--ink-soft);
margin: 0 0 10px;
}
.methods-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.methods-list li {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 13px;
border: 1px solid #006039;
border-radius: 3px;
padding: 4px 9px;
color: var(--ink);
}
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
#lb-add-quote { text-transform: none; }
#lb-add-quote:not(.is-added) { background: #006039; border-color: #006039; }
#lb-add-quote:not(.is-added):hover { background: #00492c; border-color: #00492c; }
#lb-add-offer { text-transform: none; }
#lb-add-offer.is-added { background: rgba(0, 132, 61, 0.06); border-color: #006039; color: #006039; }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius);
text-decoration: none;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.btn-primary { background: var(--cta); color: var(--color-white); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: var(--color-white); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { border-color: var(--color-black); }
/* ---------- Footer ---------- */
.site-footer {
background: var(--surface-premium);
color: #a8a8a8;
padding: 34px 0;
margin-top: 20px;
text-align: center;
font-size: 0.82rem;
}
.site-footer strong { color: var(--color-white); }
/* ---------- Mi cotización (panel lateral) ---------- */
.quote-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: flex-end;
z-index: 110;
}
.quote-drawer-overlay.open { display: flex; }
.quote-drawer {
background: var(--color-white);
width: 100%;
max-width: 420px;
height: 100%;
display: flex;
flex-direction: column;
animation: quoteDrawerIn 0.2s var(--ease);
}
@keyframes quoteDrawerIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.quote-drawer-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 22px 22px 16px;
border-bottom: 1px solid var(--border);
}
.quote-drawer-eyebrow {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.68rem;
color: var(--ink-soft);
margin: 0 0 4px;
}
.quote-drawer-header h2 { margin: 0; font-size: 1.15rem; }
.quote-drawer-close {
background: none;
border: 1px solid var(--border);
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 1rem;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.12s var(--ease);
}
.quote-drawer-close:hover { border-color: var(--color-black); }
.quote-drawer-body {
flex: 1;
overflow-y: auto;
padding: 8px 22px;
}
.quote-empty {
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.6;
padding: 30px 0;
}
.quote-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.quote-item-thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
background: var(--bg-alt);
border-radius: var(--radius);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.quote-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.quote-item-info { flex: 1 1 auto; min-width: 0; }
.quote-item-brand {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
font-weight: 600;
margin: 0 0 2px;
}
.quote-item-name {
font-size: 0.86rem;
font-weight: 500;
margin: 0 0 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quote-item-sku {
font-size: 0.72rem;
color: var(--ink-soft);
margin: 0;
}
.quote-item-remove {
flex: 0 0 auto;
background: none;
border: none;
color: var(--ink-soft);
font-size: 1rem;
width: 28px;
height: 28px;
cursor: pointer;
transition: color 0.12s var(--ease);
}
.quote-item-remove:hover { color: var(--color-black); }
.quote-drawer-footer {
padding: 16px 22px 22px;
border-top: 1px solid var(--border);
}
.quote-drawer-note {
font-size: 0.76rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0 0 14px;
}
/* Excepción puntual a la regla general .btn{text-transform:uppercase} — el
texto de este botón debe mostrarse en mayúscula solo inicial. */
.quote-send-btn { width: 100%; justify-content: center; text-transform: none; }
.quote-send-btn.is-disabled {
background: var(--bg-alt);
color: var(--ink-soft);
pointer-events: none;
}
/* estado del botón "Agregar a mi cotización" dentro de la ficha, una
vez que el modelo ya está en la lista */
.btn-primary.is-added {
background: var(--color-white);
color: var(--success);
border-color: var(--success);
}
.btn-primary.is-added:hover { background: rgba(0, 132, 61, 0.06); }
/* ---------- Utilidades ---------- */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--color-white);
padding: 10px 14px;
z-index: 200;
}
.skip-link:focus { left: 10px; top: 10px; }
/* ==========================================================================
COTIZACIÓN — control de cantidad, resumen, datos del cliente
========================================================================== */
:root {
/* Rojo de error. Único uso: validación. No es color de marca y no debe
emplearse para acentos ni CTAs. Contraste 6.5:1 sobre blanco. */
--error: #b3261e;
}
/* El panel crece con su contenido y hace scroll completo. Antes .quote-drawer-body
era un ítem flex con overflow-y:auto, y eso hace que su altura mínima automática
sea 0: con el resumen, el formulario y el pie debajo, la lista de partidas se
colapsaba a cero. Ahora scrollea el panel entero y quedan fijos el encabezado
(para no perder el botón de cerrar) y el pie (para no perder las acciones). */
.quote-drawer {
display: block;
overflow-y: auto;
overscroll-behavior: contain;
}
.quote-drawer-header {
position: sticky;
top: 0;
z-index: 2;
background: var(--color-white);
}
.quote-drawer-body {
flex: none;
overflow: visible;
}
.quote-drawer-footer {
position: sticky;
bottom: 0;
z-index: 2;
background: var(--color-white);
}
.quote-item-unit {
font-size: 0.74rem;
color: var(--ink-soft);
margin: 6px 0 0;
}
.quote-item-unit strong { color: var(--ink); font-weight: 600; }
/* Control de cantidad. Los tres elementos son operables con teclado; el
nombre accesible de cada uno incluye el SKU. */
.quote-qty {
display: inline-flex;
align-items: stretch;
margin: 8px 0 0;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.quote-qty-btn {
width: 32px;
min-height: 32px;
background: var(--bg-alt);
border: none;
font-size: 1rem;
line-height: 1;
cursor: pointer;
color: var(--ink);
transition: background 0.12s var(--ease);
}
.quote-qty-btn:hover { background: #e9e9e9; }
.quote-qty-input {
width: 62px;
border: none;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
text-align: center;
font: inherit;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
padding: 6px 4px;
color: var(--ink);
background: var(--color-white);
-moz-appearance: textfield;
}
.quote-qty-input:focus-visible,
.quote-qty-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* Error de cantidad: rojo + borde grueso + texto explícito. Nunca solo color. */
.quote-qty-input[aria-invalid="true"] {
border: 2px solid var(--error);
background: #fdf3f2;
}
.quote-qty-error,
.quote-field-error,
.quote-form-error {
color: var(--error);
font-size: 0.74rem;
line-height: 1.4;
margin: 6px 0 0;
font-weight: 600;
}
.quote-qty-error::before,
.quote-field-error::before,
.quote-form-error::before {
content: "⚠ ";
}
.quote-qty-error[hidden],
.quote-field-error[hidden],
.quote-form-error[hidden] { display: none; }
.quote-item-amount {
font-size: 0.78rem;
color: var(--ink-soft);
margin: 8px 0 0;
}
.quote-item-amount strong {
color: var(--ink);
font-weight: 700;
font-size: 0.92rem;
font-variant-numeric: tabular-nums;
}
/* ---------- Partidas de servicio (no son productos del catálogo) ------- */
.quote-service {
padding: 14px 22px 16px;
border-top: 2px solid var(--border); /* separación visual de los relojes */
background: var(--bg-alt);
}
.quote-service[hidden] { display: none; }
.quote-service-title {
margin: 0 0 10px;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
font-weight: 600;
}
.quote-service + .quote-service { border-top: 1px solid var(--border); }
.quote-service-row { display: flex; gap: 12px; align-items: flex-start; }
.quote-service-desc {
margin: 0 0 8px;
font-size: 0.76rem;
line-height: 1.5;
color: var(--ink-soft);
}
.quote-service-amount {
margin: 0 0 10px;
font-size: 0.78rem;
color: var(--ink-soft);
}
.quote-service-amount strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.quote-service-hint {
margin: 4px 0 0 24px;
font-size: 0.7rem;
line-height: 1.45;
color: var(--ink-soft);
}
/* Estado "previamente cubierto": atenuado, pero el precio fijo sigue a la
vista y el estado se dice con texto, no solo con color. */
.quote-service-row.is-covered .quote-service-name,
.quote-service-row.is-covered .quote-service-desc,
.quote-service-row.is-covered .quote-service-amount { color: var(--ink-soft); }
.quote-service-row.is-covered .quote-service-amount strong { color: var(--ink-soft); }
.quote-service-row.is-covered .quote-service-icon { opacity: 0.55; }
/* Confirmación en línea antes de retirar el Servicio de Diseño */
.quote-confirm {
margin: 10px 0 0;
padding: 10px 12px;
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
background: var(--color-white);
}
.quote-confirm[hidden] { display: none; }
.quote-confirm p { margin: 0 0 10px; font-size: 0.76rem; line-height: 1.5; }
.quote-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quote-confirm-actions .btn { padding: 7px 12px; font-size: 0.72rem; }
.quote-confirm-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quote-service-icon {
flex: 0 0 auto;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--color-white);
color: var(--ink);
}
.quote-service-icon svg { width: 20px; height: 20px; }
.quote-service-body { flex: 1 1 auto; min-width: 0; }
.quote-service-name { margin: 0 0 2px; font-size: 0.88rem; font-weight: 600; }
.quote-service-meta { margin: 0 0 10px; font-size: 0.72rem; color: var(--ink-soft); }
/* Campo de importe con la moneda siempre a la vista */
.quote-money {
display: flex;
align-items: stretch;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--color-white);
overflow: hidden;
max-width: 240px;
}
.quote-money-sign,
.quote-money-cur {
display: flex; align-items: center;
padding: 0 8px;
background: var(--bg-alt);
color: var(--ink-soft);
font-size: 0.8rem;
font-weight: 600;
}
.quote-money input {
flex: 1 1 auto;
min-width: 0;
border: none;
font: inherit;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
text-align: right;
padding: 8px;
color: var(--ink);
background: var(--color-white);
}
.quote-money input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.quote-money input[aria-invalid="true"] { background: #fdf3f2; }
.quote-money:has(input[aria-invalid="true"]) { border: 2px solid var(--error); }
.quote-money input:disabled { background: var(--bg-alt); color: var(--ink-soft); cursor: not-allowed; }
/* Estado deshabilitado: se comunica con TEXTO además de con el color */
.quote-service-row.is-deferred .quote-service-name,
.quote-service-row.is-deferred .quote-service-meta { color: var(--ink-soft); }
.quote-service-row.is-deferred .quote-service-icon { opacity: 0.55; }
.quote-service-state {
margin: 6px 0 0;
font-size: 0.72rem;
color: var(--ink-soft);
line-height: 1.45;
}
.quote-check {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
}
.quote-check input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto; }
.quote-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quote-check label { font-size: 0.8rem; line-height: 1.4; cursor: pointer; }
/* Resumen de importes */
.quote-summary {
padding: 14px 22px;
border-top: 1px solid var(--border);
background: var(--bg-alt);
}
.quote-summary[hidden] { display: none; }
.quote-summary-title {
margin: 0 0 8px;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
font-weight: 600;
}
.quote-summary-list { margin: 0; }
.quote-summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 3px 0;
}
.quote-summary-row dt { font-size: 0.84rem; color: var(--ink-soft); }
.quote-summary-row dd {
margin: 0;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.quote-summary-row.is-total {
border-top: 1px solid var(--border);
margin-top: 6px;
padding-top: 8px;
}
.quote-summary-row.is-total dt { color: var(--ink); font-weight: 600; }
.quote-summary-row.is-total dd { font-size: 1.05rem; font-weight: 700; }
.quote-summary-note {
margin: 8px 0 0;
font-size: 0.7rem;
color: var(--ink-soft);
}
/* Datos del cliente */
.quote-client {
padding: 16px 22px 4px;
border-top: 1px solid var(--border);
}
.quote-client-title {
margin: 0 0 10px;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
font-weight: 600;
}
.quote-field { margin-bottom: 10px; }
.quote-field label {
display: block;
font-size: 0.76rem;
font-weight: 600;
margin-bottom: 4px;
}
.quote-optional { font-weight: 400; color: var(--ink-soft); }
.quote-field input,
.quote-field textarea {
width: 100%;
font: inherit;
font-size: 0.88rem;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--color-white);
color: var(--ink);
}
.quote-field input:focus-visible,
.quote-field textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -1px;
border-color: var(--accent);
}
.quote-field textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.quote-field input[aria-invalid="true"] {
border: 2px solid var(--error);
background: #fdf3f2;
}
.quote-client-privacy {
font-size: 0.7rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 2px 0 0;
}
/* Excepción puntual a la regla general .btn{text-transform:uppercase} — el
texto de este botón debe mostrarse en mayúscula solo inicial. */
.quote-generate-btn {
width: 100%;
justify-content: center;
margin-bottom: 10px;
text-transform: none;
}
.quote-generate-btn:disabled {
background: var(--bg-alt);
border-color: var(--border);
color: var(--ink-soft);
cursor: not-allowed;
}
.quote-form-error { margin: 0 0 10px; }
@media (max-width: 480px) {
.quote-drawer-body { padding: 8px 16px; }
.quote-summary, .quote-client { padding-left: 16px; padding-right: 16px; }
.quote-drawer-footer { padding-left: 16px; padding-right: 16px; }
.quote-item-thumb { width: 48px; height: 48px; }
.quote-qty-btn { width: 38px; min-height: 38px; } /* objetivo táctil */
.quote-qty-input { width: 56px; padding: 8px 4px; }
.quote-service { padding-left: 16px; padding-right: 16px; }
.quote-check input { width: 20px; height: 20px; }
}
/* ==========================================================================
DOCUMENTO "SOLICITUD DE COTIZACIÓN" — PDF del catálogo web
Carta vertical de medida FIJA: todo en pt, sin vw, %, ni media queries de
viewport, para que el PDF sea idéntico desde computadora, teléfono o
tableta. app.js arma una por hoja (612 x 791 pt)
tras medir las partidas; aquí solo se define su apariencia. Referencia
visual: "Formato Cotización Actualizado.pdf" (fondo blanco, acentos y
líneas en rojo, tabla con encabezado oscuro, bloques con borde suave).
========================================================================== */
.quote-doc {
display: none;
background: #fff;
color: #111;
font-family: "Montserrat", Arial, Helvetica, sans-serif;
/* El body del catálogo usa peso 300 y `strong` es relativo (bolder): sin
este reset las negritas del documento saldrían en peso normal. */
font-weight: 400;
font-size: 7.6pt;
line-height: 1.35;
/* iOS/Android no deben reescalar el texto: el PDF se lee de esta maquetación. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.quote-doc *,
.quote-doc *::before,
.quote-doc *::after { box-sizing: border-box; }
.quote-doc p { margin: 0; }
.quote-doc strong,
.quote-doc b { font-weight: 700; }
.quote-doc img { max-width: none; }
/* Estado previo a imprimir: renderizado fuera de pantalla, pero a la medida
real de la hoja, para poder medir las partidas y cargar las imágenes. */
.quote-doc.is-preparing {
display: block;
position: fixed;
left: -10000px;
top: 0;
width: 612pt;
z-index: -1;
}
.qp-page {
position: relative;
width: 612pt;
height: 791pt;
padding: 24pt 32pt 0;
overflow: hidden;
background: #fff;
break-after: page;
page-break-after: always;
}
.qp-page:last-child { break-after: auto; page-break-after: auto; }
/* hoja de medición: sin alto fijo ni recorte */
.qp-page.qp-probe { height: auto; overflow: visible; break-after: auto; page-break-after: auto; }
.qp-sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
/* --- encabezado --- */
.qp-top1, .qp-top2 { display: flow-root; }
.qp-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14pt;
}
/* Mismo tamaño del logotipo del grupo en TODAS las hojas: 77.88 pt (66 pt + 18 %). */
.qp-logo { display: block; width: 77.88pt; height: auto; }
.qp-logo-cap {
margin-top: 4pt;
font-size: 5.8pt;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #444;
}
.qp-title-block { text-align: right; }
.qp-title {
font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
font-weight: 700;
font-size: 26pt;
line-height: 1;
letter-spacing: 0.01em;
color: #111;
text-transform: uppercase;
}
.qp-folio-label {
margin-top: 4.5pt;
font-size: 6pt;
font-weight: 700;
letter-spacing: 0.14em;
color: #e10600;
text-transform: uppercase;
}
.qp-folio {
font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
font-weight: 700;
font-size: 18pt;
line-height: 1.05;
color: #e10600;
}
.qp-dates { font-size: 7pt; color: #555; line-height: 1.4; }
.qp-dates b { color: #333; font-weight: 600; }
.qp-rule { height: 1.5pt; background: #e10600; margin: 8pt 0 7pt; }
/* hojas 2+: encabezado compacto */
.qp-head-compact { align-items: center; }
.qp-head-compact .qp-logo { width: 77.88pt; }
.qp-head-compact .qp-title { font-size: 16pt; }
.qp-head-compact .qp-folio-line { margin-top: 3pt; line-height: 1.1; }
.qp-head-compact .qp-folio-label { display: inline; margin: 0 4pt 0 0; vertical-align: 2pt; }
.qp-head-compact .qp-folio { display: inline; font-size: 12pt; }
/* --- cuadros: cliente y aviso del folio --- */
.qp-boxes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10pt;
margin-bottom: 7pt;
}
.qp-box {
border: 0.8pt solid #cfcfcf;
border-radius: 6pt;
padding: 6pt 9pt 6.5pt;
min-width: 0;
}
.qp-box-label {
font-size: 6.6pt;
font-weight: 700;
letter-spacing: 0.16em;
color: #e10600;
text-transform: uppercase;
margin-bottom: 4pt;
}
.qp-client-name { font-size: 9.6pt; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.qp-line { font-size: 7.8pt; margin-top: 1.5pt; overflow-wrap: anywhere; }
.qp-k { color: #666; }
.qp-k::after { content: ":"; }
.qp-notice { font-size: 7.8pt; line-height: 1.45; color: #222; }
.qp-comments { white-space: pre-line; }
/* --- franja gris de datos --- */
.qp-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8pt;
background: #f1f1f1;
border: 0.8pt solid #d6d6d6;
border-radius: 5pt;
padding: 5pt 9pt;
margin-bottom: 8pt;
}
.qp-strip.qp-strip-3 { grid-template-columns: repeat(2, 1fr); }
.qp-sk {
display: block;
font-size: 6.2pt;
letter-spacing: 0.1em;
color: #666;
text-transform: uppercase;
}
.qp-sv { display: block; font-size: 8.2pt; font-weight: 700; margin-top: 1pt; }
/* --- tabla de partidas --- */
.qp-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.qp-table thead th {
background: #111;
color: #fff;
font-size: 6.4pt;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
text-align: left;
padding: 4.5pt 5pt;
}
.qp-table th.ctr, .qp-table td.ctr { text-align: center; }
.qp-table th.num, .qp-table td.num { text-align: right; }
.qp-table td {
padding: 3pt 5pt;
border-bottom: 0.6pt solid #d9d9d9;
vertical-align: middle;
font-size: 7.6pt;
line-height: 1.3;
overflow-wrap: anywhere;
}
.qp-table tr { break-inside: avoid; page-break-inside: avoid; }
.qp-table td.qp-c-img { padding: 2pt 2pt 2pt 4pt; }
.qp-thumb {
display: block;
width: 24pt;
height: 24pt;
object-fit: contain;
background: #f4f4f4;
border-radius: 3pt;
}
.qp-key { display: block; font-size: 8pt; font-weight: 700; }
.qp-ann { display: block; margin-top: 1pt; font-size: 7pt; color: #555; }
.qp-key-svc { display: block; font-size: 7.8pt; font-weight: 600; }
.qp-sub { display: block; margin-top: 1pt; font-size: 6.8pt; color: #777; }
/* --- condiciones y totales (última hoja) --- */
.qp-bottom-wrap { display: flow-root; padding-top: 7pt; }
.qp-bottom {
display: grid;
grid-template-columns: 1fr 172pt;
gap: 10pt;
align-items: start;
}
.qp-bottom.qp-bottom-solo { grid-template-columns: 1fr; }
.qp-cl { font-size: 7.2pt; line-height: 1.34; margin-top: 1.5pt; }
.qp-cl:first-of-type { margin-top: 0; }
.qp-totals {
border: 0.8pt solid #cfcfcf;
border-radius: 6pt;
overflow: hidden;
}
.qp-tr {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 5pt 9pt;
font-size: 8pt;
border-bottom: 0.6pt solid #e2e2e2;
}
.qp-tr:last-child { border-bottom: 0; }
.qp-tr.qp-grand {
border-top: 2.4pt solid #e10600;
border-bottom: 0;
padding: 6pt 9pt 7pt;
font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
font-size: 18pt;
font-weight: 700;
line-height: 1.05;
}
.qp-tr.qp-grand span, .qp-tr.qp-grand b { font-family: inherit; font-size: inherit; }
.qp-covered { font-size: 7.2pt; color: #555; margin-bottom: 6pt; }
.qp-legal { margin-top: 6pt; font-size: 7pt; line-height: 1.45; color: #444; }
.qp-legal b { color: #222; font-weight: 600; }
/* --- pie de cada hoja --- */
.qp-foot {
position: absolute;
left: 32pt;
right: 32pt;
bottom: 18pt;
display: flex;
justify-content: space-between;
font-size: 7pt;
color: #333;
}
/* ---------- Impresión ----------
OJO: la regla @page NO va aquí. @page es global y no se puede limitar a una
sección, así que fijarla en la hoja cambiaría también el tamaño y los
márgenes de cualquier otra impresión del sitio (en el portal de
distribuidores existe "Descargar PDF", que imprime el catálogo). app.js la
inyecta al vuelo solo mientras se imprime la solicitud y la retira después.
---------------------------------------------------------------------- */
@media print {
/* Solo el documento. Nada de header, panel, navegación ni catálogo. */
body.pw-printing > * { display: none !important; }
body.pw-printing > .quote-doc {
display: block !important;
position: static !important;
left: auto !important;
width: auto !important;
z-index: auto !important;
}
body.pw-printing {
background: #fff !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* Barras rojas, encabezado negro de la tabla y fondos grises son color:
hay que pedir explícitamente que se impriman. */
.quote-doc,
.quote-doc * {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* ---------- Aviso "Tu PDF está listo" ----------------------------------
Se muestra tras generar la solicitud: el PDF ya existe como archivo, así
que se ofrece descargarlo, abrirlo o compartirlo (en teléfono la descarga
no puede arrancar sola de forma fiable). Mismo lenguaje visual que el resto
de paneles: blanco, borde suave, botones .btn. ------------------------- */
.pdfready-overlay {
position: fixed;
inset: 0;
z-index: 130;
display: none;
align-items: center;
justify-content: center;
padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
background: rgba(0, 0, 0, 0.6);
}
.pdfready-overlay.open { display: flex; }
.pdfready-panel {
width: 100%;
max-width: 420px;
max-height: 100%;
overflow-y: auto;
background: var(--color-white);
border-radius: var(--radius);
padding: 22px 22px 16px;
box-sizing: border-box;
}
.pdfready-kicker {
margin: 0 0 4px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #e10600;
}
.pdfready-title { margin: 0 0 6px; font-size: 1.15rem; }
.pdfready-file { margin: 0 0 16px; font-size: 0.82rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.pdfready-actions { display: flex; flex-direction: column; gap: 10px; }
.pdfready-actions .btn { width: 100%; text-align: center; box-sizing: border-box; cursor: pointer; }
.pdfready-actions [hidden] { display: none; }
.pdfready-hint { margin: 14px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); }
.pdfready-close {
display: block;
margin: 12px auto 0;
padding: 10px 16px;
background: none;
border: 0;
font: inherit;
font-size: 0.85rem;
color: var(--ink);
text-decoration: underline;
cursor: pointer;
}
/* ---------- Métodos de personalización (home) ----------------------------
Franja entre las tarjetas de línea y la cinta de marcas.
ANCHO: esta sección NO usa .container. Ese contenedor está calibrado para
bloques de texto (1180 px) y aquí dejaba franjas vacías enormes a los
lados en monitores anchos. `.pz-container` toma el ancho completo con
márgenes seguros: 16 px en móvil y de 32 a 48 px en escritorio. El
encabezado, el selector, las cápsulas, las tarjetas y los controles
comparten esa misma caja, así que todo queda alineado.
---------------------------------------------------------------------- */
.personalizacion-section {
background: var(--bg-alt);
border-top: 1px solid var(--border);
padding: 48px 0 52px;
--pz-gap: 20px;
/* Fondo exacto de los siete diagramas originales (muestreado de los PNG:
rgb(231,232,233) en las siete). El recuadro usa ese mismo color para que
la imagen y su caja se lean como una sola superficie: la proporción 4:3
del recuadro no coincide con la de la imagen, y con otro gris se veía el
escalón entre ambos. Si algún día cambian los diagramas, este valor se
vuelve a muestrear de los archivos. */
--pz-fondo-imagen: #e7e8e9;
}
.pz-container {
width: 100%;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 640px) {
.pz-container { padding: 0 32px; }
}
@media (min-width: 1200px) {
.pz-container { padding: 0 48px; }
}
/* El rótulo de esta sección se escribe tal cual, sin mayúsculas forzadas.
La regla se limita al contenedor para no alterar los rótulos del resto de
la página ("Condiciones comerciales", "Catálogos por marca"). */
#personalizacion .section-eyebrow { text-transform: none; }
/* Tipografía a la escala del resto del sitio: el título de sección al mismo
tamaño que el del panel de cotización (1.15rem) y el texto introductorio
al de los párrafos de las tarjetas de línea (0.87rem). Antes el título
llegaba a 1.9rem y no se parecía a nada más de la página. */
.pz-title {
margin: 0 0 6px;
font-size: 1.15rem;
}
.pz-intro {
margin: 0 0 20px;
max-width: 62ch;
font-size: 0.87rem;
color: var(--ink-soft);
}
/* ---------- Selector de línea ---------- */
.pz-line-picker {
margin: 0 0 20px;
padding: 16px;
background: var(--color-white);
border: 1px solid var(--color-black);
border-radius: var(--radius);
max-width: 560px;
}
.pz-line-label {
display: block;
margin: 0 0 8px;
font-weight: 600;
font-size: 0.92rem;
}
.pz-line-select {
width: 100%;
font-family: var(--font-ui);
font-size: 0.95rem;
font-weight: 400;
color: var(--ink);
background: var(--color-white);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 12px;
}
.pz-line-select:hover { border-color: var(--color-black); }
.pz-line-select:focus-visible {
outline: 2px solid var(--color-black);
outline-offset: 1px;
}
.pz-line-note {
margin: 10px 0 0;
font-size: 0.85rem;
color: var(--ink-soft);
}
.pz-line-note strong { color: var(--ink); font-weight: 600; }
/* ---------- Cápsulas de método ----------------------------------------
Fondo oscuro y contorno discreto en reposo. El estado activo se marca con
el rojo institucional en el borde, el texto y una barra inferior: el rojo
sobre grafito da 4,7:1 de contraste, mientras que texto blanco sobre un
relleno rojo se queda en 3,7:1 y no pasaría AA a este tamaño. Además del
color hay `aria-current` y un peso tipográfico mayor, para no depender
únicamente del color.
-------------------------------------------------------------------- */
.pz-chips {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 2px 10px;
margin: 0 0 4px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.pz-chips::-webkit-scrollbar { height: 5px; }
.pz-chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.pz-chip {
flex: 0 0 auto;
position: relative;
padding: 9px 18px;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: var(--color-white);
background: var(--surface-premium-alt);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pz-chip:hover { border-color: rgba(255, 255, 255, 0.42); }
.pz-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz-chip.is-active {
color: var(--rojo-institucional);
border-color: var(--rojo-institucional);
font-weight: 600;
}
.pz-chip.is-active::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 4px;
height: 2px;
background: var(--rojo-institucional);
border-radius: 2px;
}
/* ---------- Ventana de tarjetas ---------------------------------------
Tres tarjetas completas más una parte de la cuarta, para que se vea que
hay más contenido a la derecha. La fórmula sale de:
ancho = 3·c + 3·hueco + 0,35·c → c = (ancho − 3·hueco) / 3,35
-------------------------------------------------------------------- */
.pz-track {
display: flex;
gap: var(--pz-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding: 2px 2px 14px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.pz-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz-track::-webkit-scrollbar { height: 6px; }
.pz-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* ---------- Tarjeta de método ---------- */
.pz-card {
/* Móvil: una tarjeta y el borde de la siguiente. */
flex: 0 0 calc(100% - var(--pz-gap) - 34px);
max-width: 460px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
background: var(--color-white);
/* Mismo rojo que el contorno de Condiciones comerciales, vía token. */
border: 1px solid var(--rojo-institucional);
border-radius: var(--radius-lg);
overflow: hidden;
/* El grosor del borde nunca cambia: el refuerzo de hover, foco y estado
activo se hace con sombra, que no ocupa espacio y no mueve nada. */
transition: box-shadow 0.2s var(--ease);
}
.pz-card:hover,
.pz-card:focus-within {
box-shadow: 0 0 0 2px rgba(255, 44, 44, 0.22);
}
.pz-card.is-active {
box-shadow: 0 0 0 2px rgba(255, 44, 44, 0.38);
}
/* La proporción del original (640×653) se respeta con `contain`: el diagrama
nunca se estira ni se recorta, y las siete imágenes ocupan el mismo hueco.
La caja es más ancha que alta para que la tarjeta no crezca de más al
ensancharse la sección. */
.pz-card-media {
/* 4:3 y no la proporción del original (casi cuadrada): al ensanchar la
sección, una caja cuadrada de ~390 px dejaba la tarjeta en 684 px de
alto y ya no se veían la imagen y el botón a la vez. El diagrama sigue
completo y más grande que antes; solo se recorta el aire sobrante. */
aspect-ratio: 4 / 3;
/* El color solo se ve mientras la imagen carga: los archivos vienen con
este mismo fondo ya incluido y en proporción 4:3, así que cubren el
recuadro entero. */
background: var(--pz-fondo-imagen);
border-bottom: 1px solid var(--border);
/* El contenido va en posición absoluta: `picture` es un elemento en línea
y no acepta `height: 100%`, así que la imagen imponía su propia altura y
estiraba el recuadro por encima de la proporción 4:3. Con inset:0 la caja
manda y la imagen se ajusta a ella. */
position: relative;
overflow: hidden;
}
.pz-card-media picture {
display: block;
position: absolute;
inset: 0;
}
.pz-card-media img {
width: 100%;
height: 100%;
/* `cover` y sin relleno: la imagen y el recuadro comparten proporción, de
modo que no recorta nada y no deja ningún borde del contenedor a la
vista. El aire alrededor del diagrama va dentro del propio archivo. */
object-fit: cover;
display: block;
}
.pz-card-body {
display: flex;
flex-direction: column;
gap: 7px;
padding: 14px 16px 16px;
/* Empuja el botón al fondo para que los siete queden a la misma altura
aunque el aviso de estado ocupe una línea o dos. */
flex: 1 1 auto;
}
.pz-card-index {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
}
.pz-card-name { margin: 0; font-size: 1.1rem; font-weight: 600; }
.pz-card-price { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.pz-card-price small {
display: block;
font-size: 0.72rem;
font-weight: 400;
color: var(--ink-soft);
}
.pz-card-line {
margin: 0;
font-size: 0.78rem;
font-weight: 500;
color: var(--ink);
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 10px;
align-self: flex-start;
}
/* ---------- Cantidad (mismo control que el panel de cotización) ---------- */
/* La regla global de `button` pone MAYÚSCULAS; en esta sección ningún botón
las lleva, así que se anula en todos (los de cantidad, indicadores y
flechas solo tienen símbolos, pero conviene que la regla sea explícita). */
.pz-qty-btn, .pz-dot, .pz-nav { text-transform: none; }
.pz-qty { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pz-qty-btn {
width: 34px;
height: 34px;
flex: 0 0 auto;
font-size: 1rem;
line-height: 1;
color: var(--ink);
background: var(--color-white);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
}
.pz-qty-btn:hover { border-color: var(--color-black); }
.pz-qty-input {
width: 66px;
height: 34px;
text-align: center;
font-family: var(--font-ui);
font-size: 0.92rem;
color: var(--ink);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--color-white);
}
.pz-qty-btn:focus-visible,
.pz-qty-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz-qty-input[aria-invalid="true"] { border-color: var(--rojo-institucional); }
.pz-qty-error {
margin: 0;
font-size: 0.75rem;
font-weight: 500;
color: var(--rojo-institucional);
}
/* Botón de alta. El texto va en formato de oración: la regla global de
`button` pone MAYÚSCULAS y aquí se anula a propósito. */
.pz-add {
width: 100%;
margin-top: auto;
text-transform: none;
letter-spacing: 0.01em;
font-size: 0.88rem;
padding: 11px 12px;
white-space: normal;
}
.pz-card-state {
margin: 0;
min-height: 1.1em;
font-size: 0.75rem;
color: var(--success);
}
/* ---------- Controles inferiores ---------- */
/* Rejilla de tres columnas y no `space-between`: los indicadores deben
quedar centrados respecto a la sección, no a medio camino entre dos
bloques de distinto ancho. */
.pz-controls {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
margin-top: 6px;
}
.pz-controls > .pz-first { justify-self: start; }
.pz-controls > .pz-dots { justify-self: center; }
.pz-controls > .pz-arrows { justify-self: end; }
.pz-first {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: none;
color: var(--ink);
background: var(--color-white);
border: 1px solid var(--border);
border-radius: 999px;
cursor: pointer;
}
.pz-first:hover:not(:disabled) { border-color: var(--color-black); }
.pz-first:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz-first:disabled { opacity: 0.4; cursor: default; }
.pz-first-icon { font-size: 0.95rem; line-height: 1; }
.pz-dots {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.pz-dot {
display: block;
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 999px;
background: #c4c4c4;
cursor: pointer;
transition: width 0.2s var(--ease), background-color 0.2s var(--ease);
}
.pz-dot:hover { background: var(--ink-soft); }
.pz-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* El activo es más ancho ADEMÁS de rojo: la forma comunica el estado aunque
el color no se distinga. */
.pz-dot.is-active {
width: 26px;
background: var(--rojo-institucional);
}
.pz-arrows { flex: 0 0 auto; display: flex; gap: 8px; }
.pz-nav {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
line-height: 1;
color: var(--ink);
background: var(--color-white);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
transition: border-color 0.2s var(--ease);
}
.pz-nav:hover:not(:disabled) { border-color: var(--color-black); }
.pz-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz-nav:disabled { opacity: 0.35; cursor: default; }
.pz-hint {
margin: 14px 0 0;
font-size: 0.8rem;
color: var(--ink-soft);
}
/* ---------- Escalado de la ventana ---------- */
@media (min-width: 700px) {
/* Dos tarjetas completas y el arranque de la tercera. */
.pz-card { flex-basis: calc((100% - 2 * var(--pz-gap)) / 2.3); }
}
@media (min-width: 1100px) {
/* Tres completas y una parte de la cuarta. */
.pz-card { flex-basis: calc((100% - 3 * var(--pz-gap)) / 3.35); }
}
@media (min-width: 1700px) {
/* En monitores muy anchos, tres tarjetas obligarían a una pieza de más de
500 px que solo agrega aire alrededor del diagrama. Se pasa a cuatro
completas más el asomo de la quinta: misma señal de continuidad, sin
estirar la imagen. */
.pz-card { flex-basis: calc((100% - 4 * var(--pz-gap)) / 4.35); }
}
@media (max-width: 639px) {
/* En móvil no caben las tres zonas en una línea: los indicadores bajan a
su propio renglón, centrados. */
.pz-controls { grid-template-columns: auto auto; justify-content: space-between; }
.pz-controls > .pz-dots {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 6px;
}
}
/* Sin animación de desplazamiento cuando el sistema la desaconseja; app.js
salta directo a la tarjeta en vez de animar. */
@media (prefers-reduced-motion: reduce) {
.pz-track { scroll-behavior: auto; }
.pz-card, .pz-nav, .pz-chip, .pz-dot { transition: none; }
}
/* ---------- Servicio de personalización dentro del panel ---------- */
/* Se distingue del reloj por su rótulo ("Servicio de personalización" y la
línea), no por el color: el fondo es un refuerzo, no la señal. */
.quote-item.is-service .quote-item-thumb {
background: #e7e8e9; /* mismo fondo de los diagramas — ver --pz-fondo-imagen */
border: 1px solid var(--border);
border-radius: var(--radius);
}
.quote-item.is-service .quote-item-thumb img {
object-fit: contain;
padding: 3px;
}
/* ==========================================================================
OFERTA RÁPIDA — panel lateral y documento imprimible
Segunda ruta paralela a "Mi cotización" (ver .quote-drawer-overlay arriba
y window.PWOffer en app.js). Mismo lenguaje visual (tokens de color,
tipografía, radios y botones .btn) pero con clases y overlay PROPIOS: no
comparte ninguna regla con .quote-drawer-*, para que los dos flujos nunca
puedan interferirse visualmente entre sí.
========================================================================== */
.offer-toggle {
position: relative;
background: none;
border: none;
color: var(--color-white);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.offer-toggle svg { width: 20px; height: 20px; }
.offer-badge {
position: absolute;
top: 0;
right: 0;
min-width: 16px;
height: 16px;
padding: 0 3px;
border-radius: 20px;
background: var(--accent);
color: var(--color-white);
font-family: "Montserrat", sans-serif;
font-size: 0.62rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.offer-badge[hidden] { display: none; }
.offer-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: flex-end;
z-index: 110;
}
.offer-drawer-overlay.open { display: flex; }
.offer-drawer {
background: var(--color-white);
width: 100%;
max-width: 420px;
height: 100%;
display: block;
overflow-y: auto;
overscroll-behavior: contain;
animation: offerDrawerIn 0.2s var(--ease);
}
@keyframes offerDrawerIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.offer-drawer-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 22px 22px 16px;
border-bottom: 1px solid var(--border);
background: var(--color-white);
}
.offer-drawer-eyebrow {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.68rem;
color: var(--ink-soft);
margin: 0 0 4px;
}
.offer-drawer-header h2 { margin: 0; font-size: 1.15rem; }
.offer-drawer-close {
background: none;
border: 1px solid var(--border);
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 1rem;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.12s var(--ease);
}
.offer-drawer-close:hover { border-color: var(--color-black); }
.offer-drawer-body { padding: 8px 22px; }
.offer-empty {
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.6;
padding: 30px 0;
}
.offer-item {
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.offer-item-row {
display: flex;
align-items: center;
gap: 12px;
}
.offer-item-thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
background: var(--bg-alt);
border-radius: var(--radius);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.offer-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.offer-item-info { flex: 1 1 auto; min-width: 0; }
.offer-item-brand {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
font-weight: 600;
margin: 0 0 2px;
}
.offer-item-name {
font-size: 0.86rem;
font-weight: 500;
margin: 0 0 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.offer-item-sku { font-size: 0.72rem; color: var(--ink-soft); margin: 0; }
.offer-item-price { font-size: 0.74rem; color: var(--ink-soft); margin: 6px 0 0; }
.offer-item-price strong { color: var(--ink); font-weight: 600; }
.offer-item-remove {
flex: 0 0 auto;
background: none;
border: none;
color: var(--ink-soft);
font-size: 1rem;
width: 28px;
height: 28px;
cursor: pointer;
transition: color 0.12s var(--ease);
}
.offer-item-remove:hover { color: var(--color-black); }
/* Comentario libre por modelo — pequeño apartado debajo de cada producto
del carrito, pensado para sugerencias por quinquenio de antigüedad
("Sugerencia 5 años", "Sugerencia 10 años"), aunque admite cualquier
texto. Se imprime en el documento con el mismo formato "pill" que
REALIZADO POR, solo si el usuario escribió algo. */
.offer-item-comment-field { margin-top: 10px; }
.offer-item-comment-field label {
display: block;
font-size: 0.7rem;
color: var(--ink-soft);
margin-bottom: 4px;
}
.offer-item-comment {
width: 100%;
resize: vertical;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: Arial, Helvetica, sans-serif;
font-size: 0.82rem;
color: var(--ink);
background: var(--color-white);
}
.offer-item-comment:focus-visible { outline: none; border-color: var(--accent); }
.offer-client { padding: 6px 22px 4px; }
.offer-client-title { font-size: 0.92rem; margin: 10px 0 12px; }
.offer-optional { color: var(--ink-soft); font-weight: 400; text-transform: none; }
.offer-field { margin-bottom: 10px; }
.offer-field label {
display: block;
font-size: 0.76rem;
color: var(--ink-soft);
margin-bottom: 4px;
}
.offer-field input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: Arial, Helvetica, sans-serif;
font-size: 0.88rem;
color: var(--ink);
background: var(--color-white);
}
.offer-field input:focus-visible { outline: none; border-color: var(--accent); }
.offer-field input[aria-invalid="true"] { border-color: var(--error); }
.offer-field-error { color: var(--error); font-size: 0.74rem; margin: 4px 0 0; }
.offer-field-error[hidden] { display: none; }
.offer-drawer-footer {
position: sticky;
bottom: 0;
z-index: 2;
padding: 16px 22px 22px;
border-top: 1px solid var(--border);
background: var(--color-white);
}
.offer-form-error { color: var(--error); font-size: 0.8rem; margin: 0 0 10px; }
.offer-form-error[hidden] { display: none; }
.offer-drawer-note {
font-size: 0.76rem;
color: var(--ink-soft);
line-height: 1.5;
margin: 0 0 14px;
}
/* Excepción puntual a la regla general .btn{text-transform:uppercase} — el
texto de este botón debe mostrarse en mayúscula solo inicial. */
.offer-generate-btn { width: 100%; justify-content: center; text-transform: none; }
.offer-generate-btn:disabled {
background: var(--bg-alt);
color: var(--ink-soft);
cursor: not-allowed;
}
@media (max-width: 480px) {
.offer-drawer-body { padding: 8px 16px; }
.offer-client { padding-left: 16px; padding-right: 16px; }
.offer-drawer-footer { padding-left: 16px; padding-right: 16px; }
}
/* ==========================================================================
DOCUMENTO DE OFERTA RÁPIDA — una página por modelo
Réplica del formato oficial aprobado "FORMATO OFERTA RAPIDA.pdf" (instrucción
del 15-09-2026): banda superior e inferior en degradado rojo→negro, franja
de avisos legales, y un recuadro central con borde rojo redondeado que
contiene los datos (CLIENTE/EJECUTIVO/MARCA/MODELO-SKU/REALIZADO POR a la
izquierda, GENERO/PRECIO/MARCA-logotipo a la derecha) con la fotografía del
reloj al centro. Independiente por completo de .quote-doc — otra sección,
otra clase de al imprimir, otra regla @page (inyectada al vuelo por
PWOffer, igual que hace PWQuote con la suya, sin tocarla).
Orientación horizontal (apaisada): tamaño de página EXACTO del PDF de
referencia — 1043×657pt (instrucción del 15-09-2026: "el tamaño que debe
de tener la hoja de PDF es 1043 WIDTH, 657 HEIGHT"). Se usa pt y no su
equivalente en mm para no introducir redondeo de conversión — mismas
unidades nativas que trae el PDF original. Los colores (degradado
#cd2d1d → #000, borde #cd2d1d) se tomaron por muestreo de píxel directo
de ese mismo PDF.
========================================================================== */
.offer-doc { display: none; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; }
.offer-doc.is-preparing {
display: block;
position: fixed;
left: -10000px;
top: 0;
width: 1043pt;
z-index: -1;
}
.offer-page {
background: #fff;
color: #000;
width: 1043pt;
height: 657pt;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
page-break-after: always;
break-after: page;
}
.offer-page:last-child { page-break-after: auto; break-after: auto; }
/* --- bandas superior/inferior: degradado horizontal rojo -> negro --- */
.of-banner {
flex: 0 0 auto;
background: linear-gradient(to right, #cd2d1d 0%, #000000 100%);
color: #fff;
}
.of-banner-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 7mm 10mm 6mm;
}
.of-banner-title {
margin: 0;
font-family: "Barlow Condensed", Arial, Helvetica, sans-serif;
font-size: 32pt;
font-weight: 700;
letter-spacing: 0.01em;
}
.of-banner-brand { text-align: right; flex: 0 0 auto; }
.of-banner-official { margin: 0; font-size: 8pt; letter-spacing: 0.02em; }
.of-banner-date { margin: 0.8mm 0 0; font-size: 6.5pt; color: #e9c7c2; }
.of-banner-logo { height: 6mm; margin-top: 1.5mm; }
.of-banner-bottom { padding: 4mm 10mm; }
.of-conditions { margin: 0; font-size: 6.4pt; line-height: 1.5; text-align: justify; }
/* --- franja de avisos, entre la banda superior y el recuadro --- */
.of-notice-row {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
gap: 10mm;
padding: 3mm 10mm 2mm;
font-size: 6.5pt;
line-height: 1.4;
}
.of-notice-left { margin: 0; color: #333; }
.of-notice-right { margin: 0; font-weight: 700; text-align: right; }
/* --- recuadro central: borde rojo redondeado, foto al centro --- */
.of-box {
flex: 1 1 auto;
min-height: 0;
margin: 0 10mm 5mm;
border: 1.6px solid #cd2d1d;
border-radius: 8mm;
padding: 6mm;
display: flex;
align-items: stretch;
gap: 6mm;
}
.of-box-side { flex: 0 0 56mm; display: flex; flex-direction: column; min-width: 0; }
.of-box-side-left { justify-content: flex-start; }
.of-box-side-right { justify-content: flex-end; }
.of-box-image { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.of-box-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.of-box-image.is-missing::before { content: "—"; color: #999; font-size: 28pt; }
.of-field { margin-bottom: 4mm; }
.of-field:last-child { margin-bottom: 0; }
.of-field-label {
margin: 0 0 1.2mm;
font-size: 7.5pt;
font-weight: 700;
letter-spacing: 0.02em;
}
.of-field-pill {
margin: 0;
background: #d9d9d9;
border-radius: 5mm;
padding: 2mm 4mm;
min-height: 5.5mm;
display: flex;
align-items: center;
font-size: 9pt;
font-weight: 700;
word-break: break-word;
}
.of-field-pill-price { font-size: 11pt; }
.of-field-legend { margin: 1.5mm 0 0; font-size: 6.5pt; color: #555; }
/* Miniatura de marca: mismo tratamiento que en las listas de precios
(.brand-logo-strip img) y la ficha de producto (.lb-brand-id img) —
swatch cuadrado con esquinas redondeadas y object-fit: cover. */
.of-field-pill-logo { justify-content: center; padding: 2mm; }
.of-field-pill-logo img {
width: 13mm;
height: 13mm;
border-radius: 2.8mm;
object-fit: cover;
display: block;
}
/* ---------- Hoja 2 de la Oferta rápida: condiciones comerciales generales ----------
Formato aprobado "OFERTA-RAPIDA-FORMATO-DEFINITIVO-2-hojas". Mismo encabezado que
la hoja de producto (se reutiliza .of-banner-top, así franja, degradado, título,
fecha y logotipo coinciden al punto) y mismo recuadro rojo (misma posición y
trazo). Medidas fijas en pt: el PDF no depende del tamaño de la pantalla. */
.offer-page.offer-cond { position: relative; display: block; }
/* El encabezado conserva el interlineado de la hoja de producto (misma altura de franja); el resto, el del formato aprobado. */
.offer-cond .oc-box, .offer-cond .oc-foot, .offer-cond .oc-folio { line-height: normal; font-weight: 400; }
.oc-foot b, .oc-folio b { font-weight: 700; }
.oc-folio { position: absolute; right: 128pt; top: 29pt; text-align: right; color: #fff; z-index: 1; }
.oc-folio-l { margin: 0; font-size: 6pt; font-weight: 700; letter-spacing: 0.14em; color: #ffd5d0; }
.oc-folio-v { margin: 0; font-family: "Barlow Condensed", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 17pt; line-height: 1.05; color: #fff; }
.oc-box { position: absolute; left: 28.88pt; right: 28.62pt; top: 120.37pt; bottom: 55.13pt; border: 0.75pt solid #cd2d1d; border-radius: 23pt; padding: 22pt 28pt; }
.oc-title { margin: 0; font-family: "Barlow Condensed", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 28pt; line-height: 1; letter-spacing: 0.01em; color: #000; }
.oc-rule { display: block; width: 38pt; height: 2.6pt; background: #cd2d1d; margin-top: 8pt; }
.oc-sub { margin: 9pt 0 0; font-size: 10.5pt; color: #444; }
.oc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12pt; margin-top: 22pt; }
.oc-fact { background: #efefef; border-radius: 14pt; padding: 14pt 16pt 16pt; min-height: 118pt; display: flex; flex-direction: column; }
.oc-fl { font-size: 6.8pt; font-weight: 700; letter-spacing: 0.06em; color: #666; }
.oc-fbig { margin-top: 5pt; font-family: "Barlow Condensed", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 27pt; line-height: 1.02; color: #000; }
.oc-fnote { margin-top: 5pt; font-size: 8pt; line-height: 1.45; color: #444; }
.oc-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30pt; margin-top: 20pt; }
.oc-term { padding: 14pt 0 15pt; border-top: 0.7pt solid #d4d4d4; }
.oc-tl { margin: 0 0 5pt; font-size: 8pt; font-weight: 700; letter-spacing: 0.02em; }
.oc-tx { margin: 0; font-size: 10pt; line-height: 1.55; color: #222; }
.oc-closing { margin: 18pt 0 0; background: #f4f4f4; border-left: 2.6pt solid #cd2d1d; border-radius: 0 8pt 8pt 0; padding: 13pt 18pt 14pt; font-size: 10pt; line-height: 1.5; color: #222; }
.oc-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 34pt; background: linear-gradient(to right, #cd2d1d 0%, #000000 100%); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 28pt; font-size: 8pt; }
/* ---------- Impresión ----------
Misma técnica que .quote-doc/.pw-printing (ver comentario arriba), con su
propia clase de para que un documento nunca pueda imprimir sobre
el otro. app.js inyecta la regla @page solo mientras se imprime la oferta
y la retira después. */
@media print {
body.pw-offer-printing > * { display: none !important; }
body.pw-offer-printing > .offer-doc {
display: block !important;
position: static !important;
left: auto !important;
width: auto !important;
z-index: auto !important;
}
body.pw-offer-printing {
background: #fff !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.offer-doc, .offer-page {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.offer-page { break-inside: avoid; page-break-inside: avoid; }
}
/* ==========================================================================
MUESTRAS VIRTUALES
--------------------------------------------------------------------------
1) Menú: pestaña nueva + grupo «Más» entre 1024 y 1279 px
2) Botón de la ficha
3) Página del módulo (.vs-*)
4) Hojas de la muestra (.vp-*), medidas fijas en pt: la vista previa y el PDF
usan exactamente este marcado.
========================================================================== */
/* Rojo institucional del módulo: ÚNICA fuente del color. Dentro de la página del módulo también sustituye
al acento naranja del sitio (--accent), de modo que foco, pestaña activa y estados quedan en el mismo rojo. */
:root { --color-institucional-rojo: #E10600; }
.vs-body { --accent: var(--color-institucional-rojo); --accent-strong: var(--color-institucional-rojo); --error: var(--color-institucional-rojo); }
/* Foco explícito: sin esto el navegador usa el anillo del sistema, que en macOS sigue el color de resalte
(p. ej. naranja). Mismo grosor de 2 px que el resto de los focos del sitio. */
.vs-body :focus-visible, .vs-body input:focus-visible, .lb-add-vs:focus-visible, .vs-toast a:focus-visible { outline: 2px solid var(--color-institucional-rojo); outline-offset: 2px; }
/* ---------- 1) menú ---------- */
.nav-vs { display: inline-flex; align-items: center; gap: 6px; }
.vs-nav-badge {
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 16px;
background: var(--color-institucional-rojo); color: #fff; font: 600 10px/16px "Montserrat", Arial, sans-serif; text-align: center;
}
.vs-nav-badge[hidden] { display: none; }
.mobile-menu .vs-nav-badge { display: inline-block; margin-left: 8px; vertical-align: middle; }
.mobile-menu .vs-nav-badge[hidden] { display: none; }
.nav-more { display: none; position: relative; }
.nav-more > summary {
list-style: none; cursor: pointer; color: #b3b3b3; padding-bottom: 4px; border-bottom: 1px solid transparent;
display: inline-flex; align-items: center; gap: 4px;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-2px); }
.nav-more > summary:hover, .nav-more[open] > summary { color: #fff; }
.nav-more-menu {
position: absolute; top: calc(100% + 14px); right: 0; min-width: 170px; background: var(--surface-premium);
border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; z-index: 60;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.nav-more-menu a { padding: 9px 12px; border: 0; border-radius: 5px; color: #d6d6d6; }
.nav-more-menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* 1024–1279 px: «Todas las líneas» y «Contacto» pasan a «Más» para que la barra no se desborde */
@media (min-width: 1024px) and (max-width: 1279px) {
.site-nav { gap: 13px; }
.site-nav .nav-secondary { display: none; }
.site-nav .nav-more { display: block; }
}
/* ---------- 2) ficha de producto ---------- */
.lb-add-vs { text-transform: none; letter-spacing: normal; }
.lb-add-vs:focus-visible, .vs-toast a:focus-visible, .nav-vs:focus-visible { outline: 2px solid var(--color-institucional-rojo); outline-offset: 2px; } /* formato oración: «Agregar a muestra virtual» */
.lb-add-vs.is-added { background: rgba(0, 132, 61, 0.06); border-color: #006039; color: #006039; }
/* ---------- confirmación breve al agregar desde la ficha ---------- */
.vs-toast {
position: fixed; left: 50%; bottom: 22px; z-index: 400; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 10px;
background: #111; color: #fff; font: 500 .84rem/1.35 var(--font-ui); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); transition: opacity .2s, transform .2s;
}
.vs-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.vs-toast a { color: #fff; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--color-institucional-rojo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* ---------- 3) página ---------- */
.vs-body { background: var(--bg-alt); }
.vs-hero { background: var(--surface-premium); color: #fff; padding: 36px 0 28px; }
.vs-hero .container { max-width: var(--max-width); }
.vs-hero h1 { margin: 0 0 10px; font: 700 clamp(1.6rem, 4vw, 2.3rem)/1.1 var(--font-display); }
.vs-lead { margin: 0; max-width: 62ch; color: #cfcfcf; font: 400 .95rem/1.55 var(--font-ui); }
.vs-flow { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 .8rem var(--font-ui); color: #e6e6e6; }
.vs-flow li { display: flex; align-items: center; gap: 8px; }
.vs-flow b { width: 22px; height: 22px; border-radius: 50%; background: var(--color-institucional-rojo); color: #fff; font: 700 .7rem/22px var(--font-ui); text-align: center; }
.vs-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 22px; padding-top: 24px; padding-bottom: 60px; align-items: start; }
@media (max-width: 899px) { .vs-layout { display: flex; flex-direction: column; gap: 16px; } .vs-side { width: 100%; } }
@media (min-width: 900px) { .vs-side { position: sticky; top: 76px; } }
.vs-main-col { min-width: 0; width: 100%; }
.vs-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.vs-card h2, .vs-h-items { margin: 0 0 12px; font: 700 1rem/1.2 var(--font-display); }
.vs-count { color: var(--ink-soft); font-weight: 500; }
.vs-fine { margin: 0 0 10px; font: 400 .78rem/1.5 var(--font-ui); color: var(--ink-soft); }
.vs-fine-i { font: 400 .74rem var(--font-ui); color: var(--ink-soft); }
.vs-pending { color: #222; background: #f6f6f6; border-left: 3px solid var(--vs-borde-hover); padding: 8px 10px; border-radius: 8px; }
.vs-pending[hidden] { display: none; }
.vs-wide { width: 100%; justify-content: center; margin-top: 8px; min-height: 44px; }
.vs-wide:disabled { opacity: .45; cursor: not-allowed; }
.vs-error { margin: 8px 0 0; color: var(--color-institucional-rojo); font: 500 .78rem var(--font-ui); }
.vs-error:empty { display: none; }
.vs-link { background: none; border: 0; padding: 0; font: 600 .78rem var(--font-ui); text-decoration: underline; cursor: pointer; color: var(--ink); }
.vs-danger { color: var(--color-institucional-rojo); margin-top: 14px; }
.vs-danger[hidden] { display: none; }
.vs-notice { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; background: #e8f0fb; color: #1d3f6e; font: 500 .84rem/1.45 var(--font-ui); }
.vs-notice[hidden] { display: none; }
.vs-notice p { margin: 0; flex: 1 1 260px; }
.vs-notice .btn { min-height: 40px; }
.vs-empty { background: #fff; border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 28px; text-align: center; font: 400 .9rem var(--font-ui); }
.vs-empty[hidden] { display: none; }
.vs-items { display: flex; flex-direction: column; gap: 16px; }
.vs-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.vs-item-h { display: flex; gap: 12px; padding: 12px 14px; align-items: center; flex-wrap: wrap; }
.vs-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--border); flex: none; }
.vs-item-t { flex: 1 1 180px; min-width: 0; }
.vs-item-t p { margin: 0; }
.vs-item-b { font: 600 .7rem var(--font-ui); color: var(--ink-soft); }
.vs-item-n { font: 600 .9rem/1.3 var(--font-ui); }
.vs-item-k { font: 500 .78rem var(--font-ui); color: #333; overflow-wrap: anywhere; }
.vs-item-a, .vs-sheet-a, .vs-pick-a { display: flex; gap: 6px; flex-wrap: wrap; }
.vs-ib { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: 600 .76rem var(--font-ui); cursor: pointer; min-height: 40px; min-width: 40px; color: var(--ink); }
.vs-ib:hover:not(:disabled) { border-color: #000; }
.vs-ib:disabled { opacity: .4; cursor: default; }
.vs-ib-del { color: var(--color-institucional-rojo); }
.vs-ib:focus-visible, .vs-prev:focus-visible, .vs-opt:has(input:focus-visible), .vs-body .vs-main .btn:focus-visible { outline: 2px solid var(--color-institucional-rojo); outline-offset: 2px; }
.vs-item-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid #eee; }
.vs-item-bar .vs-fine { margin: 0; flex: 1 1 200px; }
.vs-addv { min-height: 40px; }
/* selector de componentes */
.vs-pick { border-top: 1px solid #eee; padding: 14px; background: #fafafa; }
.vs-pick-q { margin: 0 0 4px; font: 700 .95rem/1.3 var(--font-display); }
.vs-grp { border: 0; margin: 0; padding: 12px 0 0; min-width: 0; }
.vs-grp + .vs-grp { border-top: 1px solid #ececec; margin-top: 12px; }
.vs-grp legend { padding: 0; margin-bottom: 8px; font: 700 .74rem var(--font-ui); }
.vs-bybrand { margin: 0 0 8px; }
.vs-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.vs-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: 500 .74rem/1.3 var(--font-ui); cursor: pointer; text-align: center; color: var(--ink); min-width: 0; }
.vs-opt input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; margin: 0; }
.vs-opt img { width: 104px; height: 104px; object-fit: contain; background: transparent; }
.vs-opt-ill img { width: 120px; height: 120px; } /* ilustraciones de Métodos (fondo transparente, sin recuadro gris) */
.vs-opt-l { overflow-wrap: anywhere; }
.vs-opt-c { font: 500 .66rem var(--font-ui); color: var(--ink-soft); overflow-wrap: anywhere; }
.vs-opt.is-on { border-color: var(--color-institucional-rojo); box-shadow: 0 0 0 1px var(--color-institucional-rojo) inset; }
.vs-lv { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 600 .64rem/1.3 var(--font-ui); letter-spacing: .02em; }
/* etiquetas informativas: neutras (no son selección) */
.vs-lv-a { background: #222; color: #fff; } .vs-lv-b { background: #fff; color: #333; box-shadow: 0 0 0 1px var(--vs-borde-hover) inset; } .vs-lv-p { background: #eee; color: #444; } .vs-lv-m { background: #fff; color: #333; box-shadow: 0 0 0 1px var(--vs-borde-hover) inset; }
.vs-auth { border: 1px solid var(--border); border-radius: 10px; margin: 12px 0 4px; padding: 10px 12px; }
.vs-auth legend { padding: 0 4px; font: 700 .7rem var(--font-ui); }
.vs-auth label { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font: 500 .78rem/1.4 var(--font-ui); cursor: pointer; }
.vs-auth input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--color-institucional-rojo); }
.vs-ai-help { margin: 6px 0 0; }
.vs-ready-kicker { margin: 0 0 2px !important; font: 600 .7rem var(--font-ui); color: var(--ink-soft); }
.vs-ready-title { margin: 0 0 6px; font: 700 1.05rem/1.3 var(--font-display); }
.vs-ready-title + .vs-fine, #vs-ready-hint { margin: 0 0 12px !important; }
.vs-pick-a { margin-top: 14px; }
.vs-pick-a .btn { min-height: 44px; }
/* hojas */
.vs-sheets { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; border-top: 1px solid #eee; }
.vs-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vs-sheet + .vs-sheet { border-top: 1px solid #f0f0f0; padding-top: 12px; }
@media (min-width: 700px) { .vs-sheet { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); } }
.vs-sheet-s { margin: 0 0 8px; font: 500 .84rem/1.5 var(--font-ui); }
.vs-prev { display: block; width: 100%; padding: 0; border: 1px solid var(--border); background: #fff; cursor: zoom-in; overflow: hidden; position: relative; border-radius: 6px; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); }
.vs-prev .vp-svg { pointer-events: none; }
.vs-err-box { padding: 14px; background: #fff; color: var(--color-institucional-rojo); border: 1px solid var(--color-institucional-rojo); border-radius: 8px; font: 500 .85rem var(--font-ui); }
.vs-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .82); display: flex; flex-direction: column; }
.vs-zoom[hidden], .vs-confirm[hidden] { display: none; }
.vs-zoom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: #fff; font: 600 .86rem var(--font-ui); }
.vs-zoom-head p { margin: 0; }
.vs-zoom-close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #fff; font-size: 1.1rem; cursor: pointer; }
.vs-zoom-body { flex: 1; overflow: auto; padding: 0 12px 24px; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vs-zoom-wait { color: #ddd; }
.vs-zoom-sheet { position: relative; background: #fff; overflow: hidden; flex: none; width: min(100%, 1400px); }
.vs-noscroll { overflow: hidden; }
.vs-confirm { position: fixed; inset: 0; z-index: 210; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vs-confirm-panel { background: #fff; border-radius: 14px; padding: 20px; max-width: 420px; width: 100%; font: 500 .88rem/1.5 var(--font-ui); }
.vs-confirm-panel p { margin: 0 0 16px; }
.vs-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* ---- Estados en la interfaz del módulo (regla del 10-10-2026): el rojo institucional SOLO indica lo que está
seleccionado, marcado, activo o en foco. Todo lo demás usa un borde gris claro neutral (--vs-borde).
El rojo se activa por clase o estado (.is-on / .is-selected / :checked / :focus-visible / [aria-invalid]),
nunca desde una clase base compartida. El borde rojo del formato del documento (SVG y PDF) no cambia. */
:root { --vs-borde: #d9d9d9; --vs-borde-hover: #a8a8a8; --vs-casilla: #949494; }
@media (hover: hover) { /* solo con cursor real: en pantallas táctiles el hover se queda «pegado» tras tocar */
.vs-body .vs-opt:hover:not(.is-on), .vs-body .vs-ib:hover:not(:disabled), .vs-body .vs-prev:hover { border-color: var(--vs-borde-hover); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
}
.vs-body .vs-opt.is-on, .vs-body .vs-opt:has(input:checked) { border-color: var(--color-institucional-rojo); box-shadow: 0 0 0 1px var(--color-institucional-rojo) inset; }
.vs-review { display: inline-block; margin-top: 4px; color: var(--color-institucional-rojo); font: 600 .74rem/1.4 var(--font-ui); }
/* Opciones de autorización: gris sin seleccionar; la elegida, casilla y contorno en rojo (solo una a la vez). */
.vs-body .vs-auth label { padding: 6px 8px; border: 1px solid var(--vs-borde); border-radius: 8px; }
.vs-body .vs-auth label.is-selected, .vs-body .vs-auth label:has(input:checked) { border-color: var(--color-institucional-rojo); }
/* Campos de formulario (incluidos los paneles que se abren desde el módulo): gris en reposo y con contenido;
rojo solo mientras se edita (foco) o ante un error con su mensaje. Autocompletado: fondo blanco, mismo criterio. */
.vs-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .vs-body textarea, .vs-body select { border: 1px solid var(--vs-borde); }
@media (hover: hover) { .vs-body input:not([type="checkbox"]):not([type="radio"]):hover, .vs-body textarea:hover, .vs-body select:hover { border-color: var(--vs-borde-hover); } }
.vs-body input:not([type="checkbox"]):not([type="radio"]):focus, .vs-body textarea:focus, .vs-body select:focus {
outline: none; border-color: var(--color-institucional-rojo); box-shadow: 0 0 0 1px var(--color-institucional-rojo) inset, 0 0 0 3px rgb(225 6 0 / 0.12); }
.vs-body input:-webkit-autofill, .vs-body input:-webkit-autofill:hover, .vs-body textarea:-webkit-autofill, .vs-body select:-webkit-autofill {
border: 1px solid var(--vs-borde); -webkit-text-fill-color: var(--ink, #111); caret-color: var(--ink, #111);
-webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; }
.vs-body input:-webkit-autofill:focus, .vs-body textarea:-webkit-autofill:focus { border-color: var(--color-institucional-rojo);
-webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 1px var(--color-institucional-rojo) inset, 0 0 0 3px rgb(225 6 0 / 0.12);
box-shadow: 0 0 0 1000px #fff inset, 0 0 0 1px var(--color-institucional-rojo) inset, 0 0 0 3px rgb(225 6 0 / 0.12); }
.vs-body input:autofill, .vs-body textarea:autofill { border-color: var(--vs-borde); }
.vs-body input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"], .vs-body textarea[aria-invalid="true"] { border: 2px solid var(--color-institucional-rojo); background: #fff; }
.vs-body .quote-field-error, .vs-body .offer-field-error { color: var(--color-institucional-rojo); }
.vs-body input:disabled, .vs-body textarea:disabled, .vs-body select:disabled { border-color: var(--vs-borde); background: #f5f5f5; box-shadow: none; }
.vs-body .quote-money { border-color: var(--vs-borde); }
.vs-body .quote-money:focus-within { border-color: var(--color-institucional-rojo); box-shadow: 0 0 0 1px var(--color-institucional-rojo) inset; }
.vs-body .quote-money input:not([type="checkbox"]), .vs-body .quote-money input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"] { border: 0; box-shadow: none; }
.vs-body .quote-money:has(input[aria-invalid="true"]) { border-color: var(--color-institucional-rojo); } /* el marco es del contenedor, como en el diseño original */
/* Casillas: vacías con borde gris; marcadas con fondo rojo y marca blanca; aro rojo solo con foco de teclado. */
.vs-body input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; box-sizing: border-box;
border: 1.5px solid var(--vs-casilla); border-radius: 3px; background: #fff; cursor: pointer; }
.vs-body input[type="checkbox"]:checked { border-color: var(--color-institucional-rojo);
background: var(--color-institucional-rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat; }
.vs-body input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-institucional-rojo); outline-offset: 2px; }
.vs-body input[type="checkbox"]:disabled { border-color: var(--vs-borde); background: #f2f2f2; }
.vs-body input[type="radio"] { accent-color: var(--color-institucional-rojo); }
/* ---------- 4) hojas: SVG con las medidas exactas del formato (367.97 × 231.9 mm) ---------- */
/* Título «Muestra virtual» de la hoja: Bebas Neue local (assets/vs/fonts, licencia SIL OFL), sin descargas externas */
@font-face { font-family: "Bebas Neue PW"; src: url("../vs/fonts/bebasneue-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
.vp-svg { display: block; width: 100%; height: auto; background: #fff; }
/* Formato oración en todo el módulo (botones, títulos, leyendas y etiquetas no van en mayúsculas sostenidas) */
.vs-body .vs-main .btn, .vs-body .vs-confirm .btn, .vs-body .vs-main button, .vs-hero h1, .vs-grp legend, .vs-item-b, .vs-auth legend, .vs-ready-kicker, .vs-link, .vp-svg, .vp-svg text {
text-transform: none; letter-spacing: normal;
}
/* Distribuidores (lleva además la insignia del portal): la etiqueta larga se acorta en todo escritorio para que la barra respire (el enlace no cambia) */
@media (min-width: 1024px) { .site-nav .nav-x { display: none; } }
/* ---------- Novedades: logotipo de la marca destacada + "Authorized Dealer" ----------
Bloque pequeño cargado a la izquierda, encima del indicador; el SVG oficial
conserva su proporción (solo se fija la altura). */
.novedades-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
margin: 0 0 16px;
}
.novedades-brand-logo { display: block; height: 46px; width: auto; max-width: 100%; }
.novedades-brand-legend {
margin: 0;
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-soft);
line-height: 1.2;
}
@media (max-width: 480px) {
.novedades-brand { gap: 4px; margin-bottom: 12px; }
.novedades-brand-logo { height: 36px; }
.novedades-brand-legend { font-size: 0.66rem; }
}