:root {
--fondo: #0B0D10;
--barra: #0A0A0A;
--estelar: #14171B;
--visor: #1B1F24;
--tarjeta: #1D2127;
--tarjeta-on: #173B24;
--linea: #2B3036;
--texto: #F2F5F3;
--suave: #98A3A0;
--verde: #00B34A;
--verde-oscuro: #087A36;
--logo-escala: 2.5;
--mini-lado: 58px;
--mini-gap: 6px;
--mini-ancho-1: var(--mini-lado);
--mini-ancho-2: calc(var(--mini-lado) * 2 + var(--mini-gap));
--letra-angosta: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed", "sans-serif-condensed", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: "Inter", system-ui, sans-serif;
background: var(--fondo);
color: var(--texto);
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.boton {
display: inline-block;
background: var(--verde);
color: #04150b;
font-weight: 800;
padding: 0.7rem 1.2rem;
border-radius: 0.55rem;
font-size: 0.95rem;
}
.boton:hover { background: var(--verde-oscuro); color: #fff; }
.boton.sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea); }
.boton.sec:hover { box-shadow: inset 0 0 0 1px var(--verde); color: var(--verde); }
.boton.grande { padding: 0.85rem 1.5rem; font-size: 1rem; }
.campo {
border-bottom: 2px solid var(--linea);
padding: 1.4rem 4vw;
}
.campo:last-child { border-bottom: 0; }
.campo-heading {
position: sticky;
top: 0;
z-index: 100;
background: var(--barra);
display: grid;
gap: 0.7rem;
padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
}
.heading-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"logo catalogo"
"busca busca";
align-items: center;
gap: 0.6rem 1rem;
}
.marca { grid-area: logo; justify-self: start; }
.marca img {
height: calc(34px * var(--logo-escala));
width: auto;
display: block;
}
.busca { grid-area: busca; position: relative; width: min(560px, 100%); justify-self: start; }
.busca input {
width: 100%;
background: var(--tarjeta);
color: var(--texto);
border: 1px solid var(--linea);
border-radius: 8px;
padding: 0.6rem 0.8rem;
font: inherit;
font-size: 0.95rem;
}
.sugerencias {
position: absolute; left: 0; right: 0; top: calc(100% + 4px);
background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 8px;
z-index: 40; overflow: hidden;
}
.sugerencias button {
display: block; width: 100%; text-align: left; background: transparent; color: var(--texto);
border: 0; border-bottom: 1px solid var(--linea); padding: 0.55rem 0.7rem; font: inherit; cursor: pointer;
}
.sugerencias button:last-child { border-bottom: 0; }
.sugerencias button:hover { background: #17351f; }
.sugerencias button small { display: block; color: var(--suave); font-size: 0.75rem; }
.sugerencias .sin-resultados { padding: 0.6rem 0.7rem; color: var(--suave); font-size: 0.85rem; margin: 0; }
.banner-top {
display: block; overflow: hidden; white-space: nowrap;
width: 100vw; margin-left: calc(50% - 50vw);
padding: 0.48rem 0; line-height: 1.4; font-size: 1.2rem;
background-color: var(--verde);
}
.campo-heading { padding-bottom: 0; gap: 0.45rem; }
.campo-heading.sin-saludo { padding-bottom: 0.9rem; }
img.emoji { height: 1.15em; width: 1.15em; margin: 0 0.06em; vertical-align: -0.2em; display: inline-block; }
.banner-top[hidden] { display: none; }
.banner-top[href] { cursor: pointer; }
html { overflow-x: clip; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saludo-cinta { display: block; width: 100%; overflow: hidden; }
.pista-saludo { display: inline-flex; width: max-content; animation: marquesina var(--duracion, 18s) linear infinite; }
.tramo-saludo { display: inline-flex; align-items: center; flex: 0 0 auto; padding-right: 10ch; white-space: pre; }
.icono-saludo { height: 1.35em; width: auto; max-width: 4em; object-fit: contain; margin: 0 0.35em; vertical-align: middle; }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.pista-saludo { animation: none; }
.saludo-cinta { overflow-x: auto; scrollbar-width: none; }
}
.boton-catalogo {
grid-area: catalogo;
justify-self: end;
display: inline-flex; align-items: center; gap: 0.65rem;
background: var(--verde); color: #04150b;
font-weight: 800; font-size: 1.12rem; letter-spacing: 0.01em;
padding: 0.85rem 1.5rem 0.85rem 1.2rem;
border-radius: 999px;
box-shadow: 0 0 0 3px rgba(0, 179, 74, 0.22), 0 6px 20px rgba(0, 179, 74, 0.28);
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
white-space: nowrap;
}
.boton-catalogo svg { width: 28px; height: 28px; fill: currentColor; flex-shrink: 0; }
.logo-marca { height: 1.4em; width: auto; flex-shrink: 0; vertical-align: middle; }
.boton-catalogo .logo-marca { height: 28px; }
.logo-en-texto { height: 1.25em; margin: 0 0.2em; }
.boton-catalogo:hover { background: var(--verde-oscuro); color: #fff; box-shadow: 0 0 0 4px rgba(0, 179, 74, 0.35), 0 8px 24px rgba(0, 179, 74, 0.35); }
.boton-catalogo:active { transform: translateY(1px); }
.boton-catalogo:focus-visible, .boton:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
.campo-producto {
position: relative;
z-index: 0;
isolation: isolate;
display: grid;
grid-template-columns: 1.6fr minmax(340px, 460px);
gap: 0;
padding: 0;
}
.lado-estrella { padding: 1.4rem 2vw; }
.franja-estelar {
display: grid;
gap: 0.7rem;
align-items: stretch;
grid-template-columns: var(--cols, 76px minmax(0, 1fr) minmax(0, 1fr) var(--ficha-ancho, 300px));
grid-template-areas: var(--areas, "miniaturas estatica spin info" "specs specs specs info");
grid-template-rows: auto auto;
}
#piezaMiniaturas { grid-area: miniaturas; }
#paneEstatica { grid-area: estatica; }
#paneSpin { grid-area: spin; }
#specsEstrella { grid-area: specs; }
#infoCol { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.pieza-specs[hidden] { display: none; }
.pieza-miniaturas {
display: flex; flex-direction: column; gap: var(--mini-gap);
position: relative; min-height: 0;
}
.pieza-miniaturas[hidden] { display: none; }
.pieza-visor {
position: relative;
min-height: 380px;
background: var(--visor);
border-radius: 0.6rem;
overflow: hidden;
}
.pieza-visor[hidden] { display: none; }
.pieza-visor .Sirv { width: 100%; height: 100%; min-height: 380px; }
.pieza-visor video, .pieza-visor iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.pieza-visor .foto-estrella { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vacia-grande { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 380px; color: var(--suave); font-size: 0.85rem; }
#paneEstatica { cursor: zoom-in; }
.hint-zoom {
position: absolute; bottom: 8px; right: 8px; z-index: 4;
background: rgba(0,0,0,0.55); color: #fff; font-size: 0.65rem;
padding: 0.25rem 0.5rem; border-radius: 4px; pointer-events: none;
}
.badge-medio {
position: absolute; top: 10px; left: 10px; z-index: 5; width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
}
.badge-medio img { width: 100%; height: 100%; object-fit: contain; }
.medio-selector { position: absolute; top: 10px; right: 10px; z-index: 6; display: flex; gap: 4px; background: rgba(0,0,0,0.55); padding: 3px; border-radius: 999px; }
.medio-selector button { border: 0; border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; background: transparent; color: #fff; }
.medio-selector button[aria-pressed="true"] { background: var(--verde); color: #04150b; }
.miniaturas-foto {
display: grid; grid-template-columns: var(--mini-lado); grid-auto-rows: var(--mini-lado);
gap: var(--mini-gap); align-content: start;
}
.dos-columnas .miniaturas-foto { grid-template-columns: repeat(2, var(--mini-lado)); }
.miniaturas-foto::-webkit-scrollbar { display: none; }
.miniaturas-foto button { flex: 0 0 auto; }
.flecha-foto {
position: absolute; top: 50%; z-index: 4; transform: translateY(-50%);
width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(0,0,0,0.5); color: #fff; font-size: 1.6rem; line-height: 1;
display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
opacity: 0.85; transition: opacity 0.15s ease, background 0.15s ease;
}
.flecha-foto.prev { left: 8px; }
.flecha-foto.next { right: 8px; }
.flecha-foto:hover { opacity: 1; background: rgba(0,0,0,0.72); }
.flecha-foto:focus-visible, #paneEstatica:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }
.contador-foto {
position: absolute; bottom: 8px; left: 8px; z-index: 4; pointer-events: none;
background: rgba(0,0,0,0.55); color: #fff; font-size: 0.68rem; font-weight: 600;
padding: 0.25rem 0.5rem; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.miniaturas-foto button {
padding: 0; border: 2px solid var(--linea); border-radius: 6px; overflow: hidden; width: var(--mini-lado); height: var(--mini-lado); cursor: pointer; background: transparent;
}
.miniaturas-foto button:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.miniaturas-foto button.on { border-color: var(--verde); }
.miniaturas-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza-specs {
background: var(--estelar);
border-radius: 0.6rem;
box-shadow: inset 0 0 0 1px var(--linea);
padding: 0.15rem 0.9rem 0.2rem;
}
.ficha {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: minmax(18px, auto);
gap: 0.2rem 0.5rem;
align-content: start;
min-width: 0;
font-size: calc(1rem * var(--ficha-escala-pc, 1));
}
.ficha.letra-arial { font-family: Arial, Helvetica, sans-serif; }
.ficha.letra-arial-narrow { font-family: var(--letra-angosta); font-stretch: condensed; }
.ficha > * { grid-column: var(--gc, 1 / -1); grid-row: var(--gr, auto); min-width: 0; margin: 0; }
.categoria-linea { color: var(--suave); font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em; margin: 0; line-height: 1.25; }
.linea-ajustable { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linea-ajustable.angosta { font-family: var(--letra-angosta); font-stretch: condensed; letter-spacing: 0; }
.codigo-linea .cat { color: var(--texto); opacity: 0.85; }
.ficha h1 { margin: 0; font-size: 1.3em; line-height: 1.15; overflow-wrap: anywhere; }
.precios { display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; line-height: 1.1; }
.antes { color: var(--suave); text-decoration: line-through; font-size: 1.3em; font-weight: 500; white-space: nowrap; }
.antes:empty { display: none; }
.soles { color: #fff; font-weight: 800; font-size: 1.3em; white-space: nowrap; }
.envio-gratis { flex-basis: 100%; display: grid; gap: 0.05rem; margin-top: 0.2rem; }
.envio-gratis[hidden] { display: none; }
.envio-gratis b { color: var(--verde); font-size: 0.9em; font-weight: 800; }
.envio-gratis small { color: var(--suave); font-size: 0.68em; line-height: 1.25; }
.acciones { display: grid; gap: 0.3rem; }
.acciones-botones { display: flex; gap: 0.4rem; flex-wrap: nowrap; align-items: center; }
.acciones-botones .boton { padding: 0.5rem 0.7rem; font-size: 0.84em; line-height: 1.15; text-align: center; }
.acciones-o { color: var(--suave); font-weight: 700; font-size: 0.9em; }
.acciones-o[hidden], #btnRegistrar[hidden] { display: none; }
.ficha .boton { padding: 0.55rem 1.1rem; font-size: 0.92em; }
.boton-comprar { display: inline-flex; align-items: center; gap: 0.4rem; letter-spacing: 0.02em; }
.boton-comprar { flex: 0 0 auto; white-space: nowrap; }
#btnRegistrar { font: inherit; font-weight: 700; font-size: 0.8em; border: 0; cursor: pointer; padding: 0.45rem 0.65rem; display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 1 auto; min-width: 0; line-height: 1.15; text-align: left; }
.flecha-registrar { display: inline-block; transition: transform 0.2s ease; }
#btnRegistrar.abierto { box-shadow: inset 0 0 0 1px var(--verde); color: var(--verde); }
#btnRegistrar.abierto .flecha-registrar { transform: rotate(180deg); }
.ventas-linea { margin: 0; color: var(--suave); font-size: 0.74em; line-height: 1.35; }
.ventas-linea[hidden] { display: none; }
.ventas-pagos { color: var(--texto); font-size: 0.82em; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; }
.ventas-garantia { font-size: 0.68em; }
.ficha.alinea-centro > * { text-align: center; }
.ficha.alinea-derecha > * { text-align: right; }
.ficha.alinea-centro .precios, .ficha.alinea-centro .acciones-botones, .ficha.alinea-centro .ventas-pagos { justify-content: center; }
.ficha.alinea-derecha .precios, .ficha.alinea-derecha .acciones-botones, .ficha.alinea-derecha .ventas-pagos { justify-content: flex-end; }
.rueda { position: relative; overflow: hidden; background: var(--fondo); border-left: 1px solid var(--linea); cursor: grab; }
.rueda.arrastrando { cursor: grabbing; }
.rueda.arrastrando .rueda-pista { user-select: none; }
.rueda-ayuda { position: absolute; top: 10px; right: 12px; z-index: 5; font-size: 0.72rem; color: var(--suave); }
.rueda-pista { position: absolute; inset: 0; touch-action: none; }
.carta {
position: absolute; right: 0; width: min(100%, 400px); height: 104px; padding: 0 8px;
transition: top 0.16s ease, right 0.16s ease, left 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}
.rueda.arrastrando .carta { transition: none; }
.carta > button {
all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center;
width: 100%; height: 100%; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--tarjeta);
box-shadow: inset 0 0 0 1px var(--linea);
}
.carta.es-activa > button { background: var(--tarjeta-on); box-shadow: inset 0 0 0 1px var(--verde); }
.miniatura {
position: relative;
width: 78px;
height: 86px;
flex-shrink: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: inset 0 0 0 3px var(--marco, var(--verde));
outline: 3px solid var(--marco, var(--verde));
outline-offset: -3px;
}
.carta img, .carta .foto-vacia { width: 100%; height: 100%; display: block; object-fit: cover; background: #101512; transition: transform 0.22s ease; -webkit-user-drag: none; user-select: none; }
.carta:hover img { transform: scale(1.15); }
.textos { min-width: 0; }
.textos .letra-tag { margin: 0; font-size: 0.68rem; color: var(--verde); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.textos h3 { margin: 0.15rem 0 0; font-size: 0.95rem; line-height: 1.22; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.campo-adicional #bloques {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: minmax(56px, auto);
gap: 1.2rem;
}
#bloques > .bloque-info { grid-column: var(--gc, 1 / -1); grid-row: var(--gr, auto); min-width: 0; }
.bloque-info { padding: 1rem 1.1rem; border-radius: 0.6rem; background: var(--estelar); box-shadow: inset 0 0 0 1px var(--linea); }
.fondo-real {
background-repeat: no-repeat;
background-size: auto;
background-position: var(--fondo-pos, center center);
}
.bloque-info h2 { margin: 0 0 0.4rem; font-size: 1rem; }
:root { --tam-cuerpo-ficha: 0.88rem; }
.bloque-info .parrafo { margin: 0; color: var(--suave); display: grid; gap: 0.25rem; font-size: var(--tam-cuerpo-ficha); }
.bloque-info .linea-bloque { margin: 0; }
.bloque-info .linea-bloque.vacia { min-height: 0.6rem; }
.bloque-info ol { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; color: var(--suave); font-size: var(--tam-cuerpo-ficha); }
.zona-descarga { margin-top: 1.2rem; }
.zona-descarga[hidden] { display: none; }
.zona-descarga ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; color: var(--suave); font-size: var(--tam-cuerpo-ficha); }
.zona-descarga a { color: var(--verde); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.campo-comunicaciones { text-align: center; display: grid; gap: 0.5rem; justify-items: center; }
.campo-comunicaciones .logo-pie { height: 40px; width: auto; opacity: 0.9; }
.apoyo { max-width: 560px; color: var(--suave); margin: 0; }
.horario { color: var(--texto); font-weight: 600; margin: 0; }
.acciones-comunicaciones { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 0.4rem; }
.campo-pie { text-align: center; font-size: 0.88rem; color: var(--suave); }
.pie-grid, .pie-reclamos {
font-family: var(--footer-fuente, inherit);
font-size: var(--footer-tamano, 0.88rem);
}
.pie-grid { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; text-align: center; }
.pie-grid p { margin: 0; }
.pie-linea { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 0.9rem; }
.pie-parte { display: inline; }
.pie-parte + .pie-parte::before { content: "·"; margin-right: 0.55rem; opacity: 0.6; }
.pie-banco { font-family: var(--footer-fuente, inherit); font-size: var(--footer-tamano, 0.88rem); margin: 0.2rem auto 0.7rem; padding: 0.6rem 0.9rem; max-width: 760px; border-radius: 0.55rem; box-shadow: inset 0 0 0 1px var(--linea); }
.pie-banco[hidden] { display: none; }
.pie-banco p { margin: 0; }
.pie-banco-titulo { color: var(--texto); font-weight: 700; margin-bottom: 0.25rem !important; }
.pie-banco b { color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.pie-reclamos { margin: 0.5rem 0; }
.boton-reclamos {
display: inline-flex; align-items: center; gap: 0.45rem; background: transparent; color: var(--texto);
box-shadow: inset 0 0 0 1px var(--linea); padding: 0.55rem 1rem; border-radius: 0.45rem; font-size: 0.85rem; font-weight: 700;
}
.boton-reclamos:hover { box-shadow: inset 0 0 0 1px var(--verde); color: var(--verde); }
.ico-reclamos { display: inline-flex; }
.pie-privacidad { margin: 0.2rem 0 0.7rem; font-family: var(--footer-fuente, inherit); font-size: 0.8rem; }
.pie-privacidad a { color: var(--suave); text-decoration: underline; text-underline-offset: 2px; }
.pie-privacidad a:hover { color: var(--verde); }
.legal { border-top: 1px solid var(--linea); padding-top: 0.9rem; font-size: 0.72rem; opacity: 0.8; }
@media (max-width: 900px) {
.campo-producto { grid-template-columns: 1fr; min-height: 0; }
.franja-estelar {
grid-template-columns: 1fr 1fr;
grid-template-rows: none;
gap: 0.5rem;
grid-template-areas:
"estatica spin"
"miniaturas miniaturas"
"info info"
"specs specs";
}
.franja-estelar.sin-spin { grid-template-areas: "estatica estatica" "miniaturas miniaturas" "info info" "specs specs"; }
.franja-estelar.sin-miniaturas { grid-template-areas: "estatica spin" "info info" "specs specs"; }
.franja-estelar.sin-spin.sin-miniaturas { grid-template-areas: "estatica estatica" "info info" "specs specs"; }
.lado-estrella { padding: 0.7rem 3vw 0.9rem; }
#infoCol { gap: 0.3rem; }
.pieza-visor, .foto-vacia-grande { min-height: 220px; }
.pieza-visor .Sirv, .pieza-visor video, .pieza-visor iframe { min-height: 220px; }
#piezaMiniaturas { flex-direction: row; }
#piezaMiniaturas { min-height: 0; }
#piezaMiniaturas .miniaturas-foto, #piezaMiniaturas.dos-columnas .miniaturas-foto { display: flex; flex-direction: row; gap: 0.4rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: none; }
.flecha-foto { width: 32px; height: 32px; font-size: 1.35rem; }
#piezaMiniaturas .miniaturas-foto button { width: 54px; height: 54px; }
.pieza-specs { min-height: 0; padding: 0.1rem 0.7rem 0.15rem; }
.ficha { font-size: calc(1rem * var(--ficha-escala-movil, 1)); gap: 0.15rem 0.4rem; }
.ficha > * { grid-column: var(--gcm, 1 / -1); grid-row: var(--grm, auto); }
.ficha:not(.con-disposicion-movil) > * { grid-column: 1 / -1; grid-row: auto; }
.ficha h1 { font-size: 1.2em; }
#bloques > .bloque-info { grid-column: 1 / -1; grid-row: auto; }
.campo-adicional #bloques { grid-template-columns: 1fr; grid-auto-rows: auto; }
.rueda { order: -1; }
.lado-estrella { order: 1; }
.rueda {
height: 100px;
border-left: 0;
border-top: 0;
border-bottom: 1px solid var(--linea);
overflow: hidden;
}
.carta {
width: auto;
height: 70px;
margin-top: -6px;
padding: 0;
transition: left 0.16s ease, opacity 0.16s ease;
}
.rueda.arrastrando .carta { transition: none; }
.rueda-ayuda { top: auto; bottom: 2px; right: 50%; transform: translateX(50%); margin: 0; font-size: 0.6rem; white-space: nowrap; z-index: 1; }
.carta > button { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: none; gap: 7px; padding: 0.3rem 0.45rem; align-items: center; align-content: center; }
.miniatura { width: 56px; height: 56px; margin: 0; align-self: center; box-shadow: inset 0 0 0 2px var(--marco, var(--verde)); outline: 2px solid var(--marco, var(--verde)); outline-offset: -2px; }
.carta .textos { min-width: 0; text-align: left; }
.carta h3 { font-size: 0.8rem; line-height: 1.15; text-align: left; margin: 0.05rem 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.carta .letra-tag { font-size: 0.58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.carta.al-reves > button { grid-template-columns: minmax(0, 1fr) 56px; }
.carta.al-reves .miniatura { order: 2; }
.carta.al-reves .textos { order: 1; text-align: right; }
.carta.al-reves .textos h3, .carta.al-reves .letra-tag { text-align: right; }
.carta.cambia-lado .miniatura, .carta.cambia-lado .textos { animation: cambiaLado 0.28s ease; }
.carta { transform-origin: 50% 50%; backface-visibility: hidden; }
.marca img { height: calc(18px * var(--logo-escala)); }
.boton-catalogo { font-size: 0.9rem; padding: 0.6rem 1rem 0.6rem 0.8rem; gap: 0.45rem; }
.boton-catalogo svg { width: 22px; height: 22px; }
.banner-top { font-size: 1.09rem; padding: 0.36rem 0; }
.ficha .boton { padding: 0.5rem 0.95rem; }
}
@media (max-width: 620px) {
.pie-grid { text-align: center; }
}
@media (max-width: 420px) {
.boton-catalogo { font-size: 0.8rem; padding: 0.55rem 0.8rem 0.55rem 0.65rem; }
}
@keyframes cambiaLado { from { opacity: 0.15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.carta, .carta img, .boton-catalogo { transition: none !important; }
.carta.cambia-lado .miniatura, .carta.cambia-lado .textos { animation: none !important; }
}
@media (max-width: 900px) {
.fondo-real { background-size: contain; }
}
@media (max-width: 620px) {
}
.campo-pedido[hidden] { display: none; }
.pedido-caja { max-width: 760px; margin: 0 auto; position: relative; }
.pedido-cerrar {
position: absolute; top: 0; right: 0;
display: inline-flex; align-items: center; gap: 0.3rem;
background: transparent; color: var(--suave);
border: 1px solid var(--linea); border-radius: 999px;
padding: 0.35rem 0.75rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.pedido-cerrar:hover { color: var(--verde); border-color: var(--verde); }
.pedido-cerrar:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.pedido-cerrar[hidden] { display: none; }
.pedido-caja h2 { padding-right: 7.5rem; }
.campo-pedido.abriendo .pedido-caja { animation: desplegar 0.25s ease-out; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.campo-pedido.abriendo .pedido-caja { animation: none; }
.flecha-registrar { transition: none; }
}
.pedido-caja h2 { margin: 0 0 0.3rem; font-size: 1.25rem; }
.pedido-intro { margin: 0 0 0.8rem; color: var(--suave); }
.pedido-producto {
margin: 0 0 0.8rem; padding: 0.5rem 0.7rem; border-radius: 0.55rem;
background: var(--tarjeta-on); box-shadow: inset 0 0 0 1px var(--verde);
display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; justify-content: space-between;
}
.pedido-producto strong { min-width: 0; overflow-wrap: anywhere; }
.cantidad { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.cantidad button { width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto); font: inherit; font-weight: 800; cursor: pointer; }
.cantidad button:hover { border-color: var(--verde); color: var(--verde); }
.cantidad input { width: 2.6rem; height: 2rem; text-align: center; background: var(--tarjeta); color: var(--texto); border: 1px solid var(--linea); border-radius: 6px; font: inherit; font-weight: 700; }
.pedido-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 0.42fr); gap: 0.15rem 0.8rem; }
.etiqueta-fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.1rem 1rem; }
.etiqueta-fila .ayuda-campo { text-align: right; }
.ayuda-campo.chica { font-size: 0.72rem; }
.ayuda-campo[hidden] { display: none; }
.campo-form { display: grid; gap: 0.3rem; align-content: start; }
.campo-form.ancho { grid-column: 1 / -1; }
.campo-form[hidden] { display: none; }
.campo-form label { font-size: 0.85rem; font-weight: 600; }
.campo-form input, .campo-form textarea {
width: 100%; background: var(--tarjeta); color: var(--texto);
border: 1px solid var(--linea); border-radius: 8px;
padding: 0.65rem 0.8rem; font: inherit; font-size: 0.95rem;
}
.campo-form textarea { resize: vertical; min-height: 2.8rem; }
.campo-form input:focus, .campo-form textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 179, 74, 0.25); }
.campo-form [aria-invalid="true"] { border-color: #ff6b6b; }
.campo-form.casilla { margin: 0.1rem 0 0.3rem; }
.casilla-fila, .consentimiento { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.88rem; cursor: pointer; }
.casilla-fila input, .consentimiento input { width: 1.1rem; height: 1.1rem; margin: 0.12rem 0 0; accent-color: var(--verde); flex-shrink: 0; }
.ayuda-campo { margin: 0; font-size: 0.78rem; color: var(--suave); }
.campo-form .error, .pedido-caja .error { margin: 0; min-height: 0.9rem; font-size: 0.76rem; color: #ff8a8a; }
.campo-form .error:empty { min-height: 0.35rem; }
.pedido-aviso { margin: 0.8rem 0 0.4rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--verde); background: var(--estelar); font-size: 0.85rem; }
.pedido-detalle { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--suave); }
.pedido-detalle summary { cursor: pointer; color: var(--texto); }
.pedido-detalle a, .consentimiento a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }
.pedido-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.6rem; }
.pedido-acciones button.boton { border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.pedido-acciones button.boton:disabled { opacity: 0.6; cursor: progress; }
.pedido-estado { margin: 0.7rem 0 0; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: #3a1418; color: #ffd0d0; font-size: 0.88rem; }
.pedido-estado[hidden] { display: none; }
.pedido-ok { padding: 1rem 1.1rem; border-radius: 0.7rem; background: var(--estelar); box-shadow: inset 0 0 0 1px var(--verde); }
.pedido-ok:focus { outline: none; }
.pedido-ok h3 { margin: 0 0 0.3rem; color: var(--verde); font-size: 1.15rem; }
.pedido-ok p { margin: 0 0 0.6rem; }
.pedido-codigo strong { font-size: 1.05rem; letter-spacing: 0.03em; }
@media (max-width: 620px) {
.pedido-grid { column-gap: 0.6rem; }
.etiqueta-fila .ayuda-campo { text-align: left; }
.pedido-acciones .boton { width: 100%; text-align: center; }
}
#cajaReferencia { margin-bottom: 0.4rem; }
.campo-heading.fondo-real.ajuste-repetir { background-repeat: repeat-x; }
.campo-heading.fondo-real.ajuste-estirar { background-repeat: no-repeat; background-size: 100% 100%; }
.campo-heading.fondo-real.ajuste-real { background-repeat: no-repeat; }
.campo-heading .busca input, .campo-heading .boton-catalogo { font-family: var(--fuente-heading, inherit); }
#campo-adicional .bloque-info { font-family: var(--fuente-bloques, inherit); }
.ft-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.ft-lista[hidden] { display: none; }
.ft-lista dt, .ft-lista dd { padding: 0.22rem 0; border-top: 1px solid var(--linea); font-size: var(--tam-cuerpo-ficha); line-height: 1.3; }
.ft-principal { border-top: 1px solid var(--linea); padding-top: 0.1rem; }
.ft-lista dt { color: var(--suave); padding-right: 1rem; }
.ft-lista dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.ft-lista dt:first-of-type, .ft-lista dt:first-of-type + dd, .ft-lista > dd.fila-completa:first-child { border-top: 0; }
.ft-lista dd.multilinea { white-space: pre-line; }
.ft-lista dd.fila-completa { grid-column: 1 / -1; }
.ft-lista dd.fila-completa .k { color: var(--suave); margin-right: 0.5em; }
.ft-mas { margin: 0; }
.ft-mas summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--verde); padding: 0.4rem 0; }
.ft-mas[open] summary { border-bottom: 1px solid var(--linea); margin-bottom: 0.1rem; }
.ft-mas .ft-lista dt:first-of-type, .ft-mas .ft-lista dt:first-of-type + dd { border-top: 0; }
.ft-mas summary:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 620px) {
:root { --tam-cuerpo-ficha: 0.8rem; }
}
html.visor-abierto { overflow: hidden; }
.visor-ampliado {
position: fixed; inset: 0; z-index: 1000;
background: rgba(6, 8, 10, 0.94);
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.visor-ampliado[hidden] { display: none; }
.va-lienzo {
grid-column: 2; height: 100vh; height: 100dvh; overflow: auto; overscroll-behavior: contain;
display: flex; align-items: center; justify-content: center;
touch-action: pan-x pan-y pinch-zoom; scrollbar-width: thin;
}
.va-lienzo img { max-width: 92vw; max-height: 88vh; max-height: 88dvh; object-fit: contain; cursor: zoom-in; border-radius: 6px; background: #fff; }
.va-lienzo.acercado { align-items: flex-start; justify-content: flex-start; }
.va-lienzo.acercado img { max-width: none; max-height: none; width: 200%; width: min(200%, 2400px); cursor: zoom-out; margin: auto; }
.va-cerrar, .va-flecha {
border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, 0.12);
display: flex; align-items: center; justify-content: center; z-index: 2;
}
.va-cerrar { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; }
.va-flecha { width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; padding-bottom: 4px; margin: 0 12px; }
.va-flecha.prev { grid-column: 1; grid-row: 1; }
.va-flecha.next { grid-column: 3; grid-row: 1; }
.va-lienzo { grid-row: 1; }
.va-cerrar:hover, .va-flecha:hover { background: rgba(255, 255, 255, 0.25); }
.va-cerrar:focus-visible, .va-flecha:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.va-contador { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; color: #fff; font-size: 0.8rem; font-weight: 600; background: rgba(0, 0, 0, 0.5); padding: 0.25rem 0.6rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.va-contador:empty { display: none; }
.visor-ampliado.una-foto .va-flecha { visibility: hidden; }
@media (max-width: 620px) {
.va-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; margin: 0; background: rgba(0, 0, 0, 0.45); }
.va-flecha.prev { left: 6px; }
.va-flecha.next { right: 6px; }
.va-lienzo { grid-column: 1 / -1; }
.va-lienzo img { max-width: 100vw; border-radius: 0; }
}
@media (min-width: 901px) {
.franja-estelar { grid-template-rows: var(--alto-franja, 560px) auto; }
.pieza-visor { height: var(--alto-franja, 560px); min-height: 0; }
.pieza-visor .Sirv, .pieza-visor video, .pieza-visor iframe, .foto-vacia-grande { min-height: 0; height: 100%; }
#paneEstatica { background: #fff; }
.pieza-visor .foto-estrella { object-fit: contain; }
.pieza-visor video { object-fit: contain; background: #000; }
.pieza-miniaturas { max-height: var(--alto-franja, 560px); overflow: hidden; }
#infoCol { height: var(--alto-franja, 560px); overflow: hidden; }
.rueda { align-self: start; height: calc(var(--alto-franja, 560px) + 2.8rem); }
.ft-lista { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.ft-lista dt { max-width: 8.5em; overflow-wrap: anywhere; }
}
.ft-lista dd.recortada {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lineas, 3);
line-clamp: var(--lineas, 3); overflow: hidden;
}
#paneEstatica.es-360, #paneEstatica.es-video { background: var(--visor); cursor: default; }
#paneEstatica .Sirv, #paneEstatica video, #paneEstatica iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
#paneEstatica video { object-fit: contain; background: #000; }
@media (min-width: 901px) { #paneEstatica .Sirv, #paneEstatica video, #paneEstatica iframe { min-height: 0; } }
@media (max-width: 900px) { #paneEstatica .Sirv, #paneEstatica video, #paneEstatica iframe { min-height: 220px; } }
.ampliar-360 {
position: absolute; right: 10px; bottom: 10px; z-index: 5; border: 0; border-radius: 999px; cursor: pointer;
padding: 0.35rem 0.8rem; font: inherit; font-size: 0.75rem; font-weight: 700; background: rgba(0,0,0,0.6); color: #fff;
}
.ampliar-360:hover, .ampliar-360:focus-visible { background: var(--verde); color: #04150b; outline: none; }
.miniaturas-foto button { position: relative; }
.miniaturas-foto .mini-marca {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.45); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; pointer-events: none;
}
.miniaturas-foto .mini-video .mini-marca { font-size: 1.1rem; }
.va-lienzo .va-spin { width: min(88vh, 92vw); height: min(88vh, 92vw); max-height: 88dvh; background: #fff; border-radius: 6px; }
.va-lienzo img[hidden] { display: none; }
#ventasTiempos { color: var(--c-tiempos, var(--verde)); font-weight: 600; }
.precios .compartir { position: relative; margin-left: auto; align-self: center; z-index: 6; }
.compartir-btn {
display: inline-flex; align-items: center; gap: .35rem; border: 0; cursor: pointer; background: transparent;
padding: .2rem .3rem; font: inherit; font-size: .85rem; font-weight: 700; color: var(--c-compartir, #4FC3F7); border-radius: 6px;
}
.compartir-btn svg { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; }
.compartir-btn:hover, .compartir-btn:focus-visible, .compartir-btn[aria-expanded="true"] { filter: brightness(1.25); background: rgba(255,255,255,.08); outline: none; }
.compartir-menu {
position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; display: grid;
background: #111; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.compartir-menu[hidden] { display: none; }
.compartir-menu a, .compartir-menu button {
display: block; width: 100%; text-align: left; padding: .6rem .8rem; font: inherit; font-size: .8rem;
color: #fff; background: transparent; border: 0; text-decoration: none; cursor: pointer;
}
.compartir-menu a:hover, .compartir-menu button:hover, .compartir-menu a:focus-visible, .compartir-menu button:focus-visible { background: rgba(79,195,247,.15); outline: none; }
.compartir-menu .compartir-wa { color: #25D366; font-weight: 700; }
#paneEstatica.es-360, #paneEstatica .Sirv, .va-lienzo .va-spin { overflow: hidden; }
#paneEstatica .Sirv, .va-lienzo .va-spin { position: relative; }
#paneEstatica .Sirv a[href*="sirv.com"], .va-lienzo .va-spin a[href*="sirv.com"] {
top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important;
max-width: 40% !important; transform: none !important; margin: 0 !important;
}
#paneEstatica .Sirv a[href*="sirv.com"] img, .va-lienzo .va-spin a[href*="sirv.com"] img { width: 80px !important; max-width: 100% !important; height: auto !important; }
#paneEstatica.es-360 .smv-button-fullscreen { display: none !important; }
.mini-360 img { object-fit: contain; background: #fff; }
#paneEstatica.es-360, #paneEstatica.es-360 .Sirv { background: #fff; }
.pedido-producto { font-size: 0.75em; padding: 0.4rem 0.6rem; }
.pedido-producto .cantidad button, .pedido-producto .cantidad input { width: 1.6rem; height: 1.6rem; font-size: 0.95em; }
.pedido-producto .cantidad input { width: 2.1rem; }
.pedido-nota { margin: 0 0 0.8rem; }
.selector-idioma { position: absolute; top: 74px; right: 22px; z-index: 5; display: inline-flex; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.35); background: rgba(0,0,0,.55); }
.selector-idioma button { border: 0; background: transparent; color: #fff; font: inherit; font-size: .72rem; font-weight: 700; padding: .25rem .55rem; cursor: pointer; }
.selector-idioma button.on { background: var(--verde); color: #04150b; cursor: default; }
.selector-idioma button:not(.on):hover, .selector-idioma button:focus-visible { background: rgba(255,255,255,.18); outline: none; }
@media (max-width: 900px) { .selector-idioma { top: 8px; right: auto; left: 8px; } }
#btnRegistrar { background: var(--c-registrar-fondo, transparent); color: var(--c-registrar-texto, var(--texto)); }