en la hoja que lo necesite. Lo mismo
vale para ".avisos", en la seccion 8.
===================================================================== */
.page-head__nota {
text-transform: none;
letter-spacing: .01em;
font-size: .82rem;
line-height: 1.8;
}
.page-head__nota strong { font-weight: 600; }
/* =====================================================================
14. LOS AVISOS DE ENTREGA Y ENVIO DE LA PORTADA (8 de septiembre 2026)
---------------------------------------------------------------------
La franja de tres renglones que va justo debajo del carrete de
precios especiales, en la portada.
Para hacerla mas alta o mas baja se cambia el 30px de "padding".
Para que la letra sea mas grande se cambia el .95rem de
".entregas__linea".
===================================================================== */
.entregas {
background: var(--bg-alt);
border-bottom: 1px solid var(--line);
padding: clamp(22px, 3vw, 30px) 0;
text-align: center;
}
.entregas__linea {
margin: 0 auto;
max-width: 62ch;
color: var(--ink-soft);
font-size: .95rem;
line-height: 1.7;
}
.entregas__linea + .entregas__linea { margin-top: 7px; }
.entregas__linea strong { color: var(--ink); font-weight: 600; }
/* El renglon de las ciudades se separa un poquito mas y va en
el color de la marca, para que se distinga de los otros dos. */
.entregas__linea + .entregas__zonas { margin-top: 14px; }
.entregas__zonas strong { color: var(--accent-dk); letter-spacing: .01em; }
@media (max-width: 560px) {
.entregas__linea { font-size: .89rem; }
}
/* =====================================================================
15. EL AVISO DE PRIVACIDAD Y EL LETRERO DE COOKIES (8 de sep. 2026)
---------------------------------------------------------------------
La hoja del aviso es puro texto: se lee de corrido, en una columna
angosta. Para hacerla mas ancha se cambia el 68ch de ".legal__caja".
===================================================================== */
.legal { padding: calc(var(--nav-h) + clamp(40px, 6vw, 72px)) 0 clamp(56px, 8vw, 96px); }
.legal__caja { max-width: 68ch; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.14; margin: 6px 0 0; }
.legal h2 {
font-size: 1.06rem; margin: clamp(34px, 4vw, 46px) 0 12px;
padding-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--line);
}
.legal p, .legal li { color: var(--ink-soft); font-size: .95rem; line-height: 1.75; }
.legal p { margin: 0 0 14px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 2px; }
.legal__fecha { color: var(--ink-mute); font-size: .82rem; margin: 14px 0 0; }
.legal__entrada {
margin: 26px 0 0; padding: 18px 20px; background: var(--bg-alt);
border-left: 3px solid var(--dorado); font-size: 1rem;
}
.legal__lista { margin: 0 0 14px; padding-left: 20px; }
.legal__lista li { margin-bottom: 9px; }
.legal__accion { margin-top: 20px; }
/* El enlace al aviso, en el pie de todas las hojas */
.footer__copy a { color: #d8d1c5; text-decoration: underline; text-underline-offset: 2px; }
.footer__copy a:hover { color: #fff; }
/* ---------------------------------------------------------------------
EL LETRERO DE COOKIES
Sale abajo a la izquierda la primera vez que alguien entra.
Para que salga de lado a lado, se le quita el "max-width".
--------------------------------------------------------------------- */
.cookies {
position: fixed; z-index: 900;
left: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px);
max-width: 380px;
background: var(--bg-deep); color: #d8d1c5;
padding: 18px 20px; border-radius: var(--r);
box-shadow: 0 14px 40px rgba(0,0,0,.34);
opacity: 0; transform: translateY(14px);
transition: opacity .35s ease, transform .35s ease;
}
.cookies--se-ve { opacity: 1; transform: none; }
.cookies__texto { margin: 0 0 14px; font-size: .84rem; line-height: 1.65; }
.cookies__texto a { color: var(--dorado); text-decoration: underline; text-underline-offset: 2px; }
.cookies__botones { display: flex; gap: 10px; flex-wrap: wrap; }
/* El de rechazar va sin fondo, para que se lea sobre el oscuro. Los
dos se leen igual de bien a proposito: no se vale esconder el que
dice que no. */
.cookies .btn--ghost {
color: #ffffff; background: transparent;
border-color: rgba(255,255,255,.55);
}
.cookies .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
/* En celular el boton flotante de WhatsApp esta abajo a la derecha,
asi que el letrero se pone de lado a lado pero mas arriba. */
@media (max-width: 620px) {
.cookies { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.cookies { transition: none; }
}
/* =====================================================================
16. EL MUESTRARIO DE TELAS DE LAS SALAS (8 de septiembre de 2026)
---------------------------------------------------------------------
Debajo de la ficha de cada sala (menos las modulares) va una fila de
circulitos con las once telas en las que la hacemos. Son de adorno:
no se les da clic, nada mas ensenan el color y el tejido.
LAS FOTOS estan en img/telas y se llaman igual que la tela, en
minusculas y con guiones: "Bart Nickel" -> bart-nickel.jpg
Estan recortadas del muestrario que nos pasaron, del centro de cada
foto, donde se ve el tejido y no le pega la sombra ni la etiqueta.
PARA AGREGAR UNA TELA: sube su foto a img/telas, ponle su renglon en
la lista de aqui abajo, y agrega su en las hojas.
===================================================================== */
.muestrario { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.muestrario__titulo {
margin: 0 0 12px; font-size: .68rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-mute);
}
.muestrario__fila { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.muestrario__nota { margin: 14px 0 0; font-size: .8rem; color: var(--ink-mute); }
/* Aqui son etiquetas de adorno, no botones: ni cambian de tamano al
pasarles el raton ni se pueden apretar. */
.muestrario .tela { cursor: default; width: 66px; }
.muestrario .tela:hover .tela__muestra { transform: none; }
.muestrario .tela__muestra { width: 46px; height: 46px; }
@media (max-width: 560px) {
.muestrario .tela { width: 58px; }
.muestrario .tela__muestra { width: 40px; height: 40px; }
.muestrario__fila { gap: 10px; }
}
/* ---- LAS ONCE TELAS ----
El color de respaldo es el promedio de cada foto: es lo que se ve
mientras la foto carga, o si algun dia se borra. */
.tela--bart-nickel .tela__muestra { background-color: #8d9091; background-image: url('img/telas/bart-nickel.jpg'); }
.tela--bart-fog .tela__muestra { background-color: #a1a19f; background-image: url('img/telas/bart-fog.jpg'); }
.tela--bart-bone .tela__muestra { background-color: #b4b6b3; background-image: url('img/telas/bart-bone.jpg'); }
.tela--gravity-smoke .tela__muestra { background-color: #777777; background-image: url('img/telas/gravity-smoke.jpg'); }
.tela--kelsi-ebony .tela__muestra { background-color: #747274; background-image: url('img/telas/kelsi-ebony.jpg'); }
.tela--kelsi-dolphin .tela__muestra { background-color: #999c9c; background-image: url('img/telas/kelsi-dolphin.jpg'); }
.tela--belucci-black .tela__muestra { background-color: #6c6b70; background-image: url('img/telas/belucci-black.jpg'); }
.tela--belucci-grey .tela__muestra { background-color: #878787; background-image: url('img/telas/belucci-grey.jpg'); }
.tela--belucci-navy .tela__muestra { background-color: #6c7b90; background-image: url('img/telas/belucci-navy.jpg'); }
.tela--rivoli-navy .tela__muestra { background-color: #526787; background-image: url('img/telas/rivoli-navy.jpg'); }
.tela--rivoli-beige .tela__muestra { background-color: #a7a8a7; background-image: url('img/telas/rivoli-beige.jpg'); }
/* =====================================================================
17. QUIEN VA HASTA ARRIBA LE DEJA SU ESPACIO A LA BARRA (8 sep. 2026)
---------------------------------------------------------------------
La barra de arriba va fija, encima de la pagina, asi que lo primero
que aparece tiene que empezar mas abajo o se le mete debajo.
Antes lo primero era el carrete de precios especiales; ahora es la
fila de "Lo mas vendido". Estan puestas las dos, para que si algun
dia se cambia el orden otra vez, siga saliendo bien.
===================================================================== */
main > .fila:first-of-type { margin-top: var(--nav-h); }
main > .cartel:first-of-type { margin-top: var(--nav-h); }
/* Ya en medio de la pagina, el carrete de precios especiales necesita
aire arriba y abajo: arriba para despegarse de las cuatro lineas de
muebles, abajo para no quedar encima de la fila de recamaras.
El "clamp" son tres numeros: el minimo en celular, cuanto crece
segun el ancho de la pantalla, y el maximo en monitor grande.
Para mas separacion, sube el primero y el tercero. */
main > .cartel:not(:first-of-type) {
margin-top: clamp(22px, 3.4vw, 52px);
margin-bottom: clamp(22px, 3.4vw, 52px);
}
/* Si ningun mueble trae precio especial, el carrete se queda vacio.
No se borra para que el programa lo vuelva a encontrar despues,
pero vacio no tiene por que ocupar lugar. */
.cartel--vacio { display: none !important; }
/* =====================================================================
18. EL CARRETE DE "LO MAS VENDIDO" (8 de septiembre de 2026)
---------------------------------------------------------------------
Es el MISMO carrete que el de los precios especiales: usa las mismas
reglas de la seccion 12. Aqui abajo va lo poquito que le hace falta.
La diferencia entre los dos no es el diseno, es de donde salen:
- el de precios especiales lo arma solo .claude\ofertas.ps1
- este se edita a mano, en index.html
===================================================================== */
/* La palabra "Desde", para los muebles que tienen varias medidas y el
precio es el de la mas chica. Va chiquita, junto al precio. */
.cartel__desde {
font-size: .95rem;
color: rgba(255, 255, 255, .74);
letter-spacing: .02em;
}
/* =====================================================================
19. LA TABLA DE MEDIDAS (9 de septiembre de 2026)
---------------------------------------------------------------------
Debajo de la ficha de cada mueble va una tabla con una hilera por
pieza y una columna por medida, como en el documento de Word.
Antes iban todas de corrido en un renglon y no habia manera de
comparar dos piezas de un vistazo.
RECAMARAS: en centimetros, columnas Ancho / Alto / Fondo.
SALAS: en metros, columnas Largo / Fondo / Alto.
La tabla vive en la hoja de cada mueble, escrita a mano. No la
arma ningun programa: lo que esta en el HTML es la unica version
que hay, y de ahi la lee el documento de Word de las fichas.
Se ve asi:
Para agregarle una pieza a mano basta con copiar una hilera
completa, de Pieza Ancho ...Cabecera 200 ... a , y cambiarle el nombre y los numeros.
===================================================================== */
.medidas {
width: 100%;
margin: 0 0 26px;
border-collapse: collapse;
/* las columnas de numeros no crecen: todas miden lo mismo y lo
que sobra se lo queda el nombre de la pieza */
table-layout: fixed;
}
.medidas caption {
text-align: left;
padding: 0 0 10px;
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* El encabezado: el mismo rengloncito chico y espaciado que ya
usan las etiquetas de la ficha, para que no se vea de otra casa. */
.medidas thead th {
padding: 0 0 9px;
font-size: .66rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-mute);
border-bottom: 1px solid var(--line);
}
.medidas tbody th,
.medidas tbody td {
padding: 11px 0;
border-bottom: 1px solid var(--line);
font-size: .94rem;
color: var(--ink);
}
/* El nombre de la pieza, a la izquierda */
.medidas tbody th {
text-align: left;
font-weight: 500;
padding-right: 14px;
}
/* Los numeros, alineados a la derecha: asi las centenas quedan
una debajo de otra y se comparan de un vistazo. */
.medidas thead th:not(:first-child),
.medidas tbody td {
text-align: right;
font-variant-numeric: tabular-nums;
}
.medidas thead th:not(:first-child) { width: 4.6rem; }
/* "van dos", "con luz": lo que antes iba entre parentesis */
.medidas__nota {
display: block;
margin-top: 2px;
font-size: .74rem;
font-weight: 400;
color: var(--ink-mute);
}
/* El renglon de abajo, para lo que no cabe en una casilla */
.medidas__pie {
margin: -14px 0 26px;
font-size: .82rem;
color: var(--ink-mute);
}
@media (max-width: 560px) {
.medidas tbody th,
.medidas tbody td { font-size: .88rem; padding: 10px 0; }
.medidas thead th:not(:first-child) { width: 3.6rem; }
.medidas tbody th { padding-right: 8px; }
}
/* =====================================================================
20. QUIENES SOMOS: LA VENTANITA DE ARRIBA (10 de septiembre de 2026)
---------------------------------------------------------------------
La presentacion de la casa no ocupa lugar en la portada. En la
esquina de arriba a la derecha, justo debajo de la barra, queda una
ventanita chica que nada mas dice "Quienes somos". Al tocarla se
despliega el texto en un recuadro que cae de ahi mismo.
El texto se edita en index.html, en el bloque que dice
"QUIENES SOMOS". Aqui solo esta como se ve.
PARA MOVERLA DE LUGAR se cambian el "top" y el "right" de ".nos".
El "top" va calculado a partir de "--nav-h", que es lo que mide la
barra de arriba: asi, si la barra cambia de alto, la ventanita se
acomoda sola.
PARA QUE EL RECUADRO SEA MAS ANCHO se cambia el 420px de
".nos__panel".
===================================================================== */
.nos {
position: fixed;
top: calc(var(--nav-h) + 12px);
right: clamp(12px, 2vw, 22px);
z-index: 130;
display: flex;
flex-direction: column;
align-items: flex-end;
}
/* ---------------------------------------------------------------------
EL LETRERO CERRADO
Chico y discreto: el logo, el nombre y una flechita.
--------------------------------------------------------------------- */
.nos__boton {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 11px;
border: 1px solid var(--line);
border-radius: 100px;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(6px);
color: var(--ink);
font-family: inherit;
font-size: .78rem;
font-weight: 500;
letter-spacing: .02em;
cursor: pointer;
box-shadow: 0 6px 20px rgba(28, 26, 23, .14);
transition: background .2s, box-shadow .2s, border-color .2s;
}
.nos__boton:hover {
background: #fff;
border-color: var(--dorado);
box-shadow: 0 10px 26px rgba(28, 26, 23, .18);
}
.nos__marca { display: block; color: var(--accent); }
.nos__marca svg { display: block; width: 16px; height: 15px; }
.nos__flecha { display: block; color: var(--ink-mute); transition: transform .2s; }
.nos__flecha svg { display: block; width: 14px; height: 14px; }
/* con el recuadro abierto, la flechita apunta para arriba */
.nos__boton[aria-expanded="true"] .nos__flecha { transform: rotate(180deg); }
.nos__boton[aria-expanded="true"] { border-color: var(--dorado); background: #fff; }
/* ---------------------------------------------------------------------
EL RECUADRO QUE SE DESPLIEGA
Cae debajo del letrero, pegado a la derecha. Si no cabe de alto, se
baja con el dedo o con la rueda del raton.
--------------------------------------------------------------------- */
.nos__panel {
position: relative;
width: min(420px, calc(100vw - 24px));
max-height: calc(100vh - var(--nav-h) - 66px);
overflow-y: auto;
margin-top: 9px;
padding: 22px 22px 24px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: 0 22px 60px rgba(28, 26, 23, .22);
animation: nos-cae .18s ease both;
}
@keyframes nos-cae {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
/* La X de la esquina */
.nos__x {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-mute);
cursor: pointer;
transition: background .2s, color .2s;
}
.nos__x:hover { background: var(--bg-alt); color: var(--ink); }
.nos__x svg { width: 17px; height: 17px; }
.nos__panel h2 {
margin: 0 0 12px;
padding-right: 26px; /* que el titulo no se meta debajo de la X */
font-size: 1.12rem;
line-height: 1.25;
}
.nos__texto-largo {
margin: 0;
color: var(--ink-soft);
font-size: .88rem;
line-height: 1.7;
}
.nos__texto-largo strong { color: var(--ink); font-weight: 600; }
/* Cuando son dos parrafos o mas, se separan un poco */
.nos__texto-largo + .nos__texto-largo { margin-top: 12px; }
/* Los tres puntos, uno debajo de otro. La rayita dorada de arriba es
el "border-top": para quitarla, se borra ese renglon. */
.nos__puntos {
margin-top: 20px;
display: grid;
gap: 16px;
}
.nos__punto {
border-top: 2px solid var(--accent);
padding-top: 11px;
}
.nos__punto h3 {
margin: 0 0 5px;
font-size: .92rem;
font-weight: 600;
}
.nos__punto p {
margin: 0;
color: var(--ink-soft);
font-size: .84rem;
line-height: 1.65;
}
/* En celular el letrero se encoge un poco mas, para no taparle la
foto de arriba, y el recuadro se pega a las dos orillas. */
@media (max-width: 620px) {
.nos { top: calc(var(--nav-h) + 9px); right: 10px; left: 10px; align-items: flex-end; }
.nos__boton { font-size: .74rem; padding: 7px 11px 7px 10px; gap: 7px; }
.nos__marca svg { width: 15px; height: 14px; }
.nos__panel { width: 100%; padding: 20px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.nos__boton, .nos__flecha, .nos__x { transition: none; }
.nos__panel { animation: none; }
}
/* =====================================================================
21. LA BARRA DE CONFIANZA, AHORA CON CUATRO (10 de septiembre 2026)
---------------------------------------------------------------------
La franja de datos que va debajo de los tres bloques grandes tenia
tres frases y ahora tiene cuatro: se le agrego la de la garantia.
Al quitarle la clase "strip__grid--tres" en index.html volvio a su
forma de cuatro columnas. El problema es la pantalla mediana —una
tableta, una laptop chica—: cuatro columnas ahi salen tan angostas
que las frases se parten en cuatro renglones.
Por eso, de 1100px para abajo se acomodan de dos en dos. Mas abajo
de 720px ya lo hacia styles.css por su cuenta.
Si algun dia son otra vez tres frases, se le regresa la clase
"strip__grid--tres" a index.html y este bloque deja de estorbar.
===================================================================== */
@media (max-width: 1100px) {
.strip__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}
/* =====================================================================
22. EL CARRITO (10 de septiembre de 2026)
---------------------------------------------------------------------
Todo lo que se ve del carrito: el boton "Agregar al carrito" de
cada mueble, el icono con el numero en la barra de arriba, el cajon
que sale por la derecha y el avisito de "Agregado".
Nada de esto esta escrito en las paginas: lo pone carrito.js al
abrir cada hoja. Aqui solo esta como se ve.
PARA QUE EL CAJON SEA MAS ANCHO se cambia el 420px de
".carrito__cajon".
===================================================================== */
/* Lo que carrito.js esconde se esconde de verdad, aunque mas abajo
diga "display: flex" o "display: grid". */
.carrito[hidden],
.carrito [hidden],
.nav__carrito-num[hidden] { display: none !important; }
/* ---------------------------------------------------------------------
EL ICONO DE LA BARRA
Va a la derecha, despues del boton de WhatsApp. En celular queda
junto a las tres rayitas del menu.
--------------------------------------------------------------------- */
.nav__links { margin-left: auto; } /* que todo lo de la derecha vaya junto */
.nav__carrito {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: inherit;
cursor: pointer;
transition: color .2s, background .2s;
}
.nav__carrito:hover { color: var(--accent); background: var(--bg-alt); }
.nav__carrito svg { width: 23px; height: 23px; }
/* El numerito dorado */
.nav__carrito-num {
position: absolute;
top: 2px;
right: 0;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--accent);
color: #fff;
font-size: .64rem;
font-weight: 600;
line-height: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
.nav__carrito { margin-left: auto; }
}
/* ---------------------------------------------------------------------
EL BOTON DE CADA MUEBLE
Va junto al verde de WhatsApp, delineado para no competir con el.
--------------------------------------------------------------------- */
.btn--carrito {
border-color: var(--ink);
background: transparent;
color: var(--ink);
}
.btn--carrito:hover { background: var(--ink); color: #fff; }
.btn--carrito svg { width: 18px; height: 18px; flex: none; }
.btn--carrito.es-agregado { background: var(--ink); border-color: var(--ink); color: #fff; }
/* ---------------------------------------------------------------------
EL CAJON
--------------------------------------------------------------------- */
.carrito { position: fixed; inset: 0; z-index: 1300; }
.carrito__velo {
position: absolute;
inset: 0;
background: rgba(18, 16, 13, .52);
animation: carrito-velo .2s ease both;
}
.carrito__cajon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 100%);
display: flex;
flex-direction: column;
background: var(--bg);
box-shadow: -24px 0 60px rgba(0, 0, 0, .18);
animation: carrito-entra .26s cubic-bezier(.2, .8, .2, 1) both;
}
.carrito__cabeza {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 16px 16px 22px;
border-bottom: 1px solid var(--line);
}
.carrito__cabeza h2 { margin: 0; font-size: 1.1rem; }
.carrito__x {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
}
.carrito__x:hover { background: var(--bg-alt); color: var(--ink); }
.carrito__x svg { width: 19px; height: 19px; }
/* 14 sep 2026: la lista de muebles ya no se aplasta cuando la parte de
abajo es larga. Toma lo que midan los muebles, hasta casi la mitad de
la pantalla (45%); si hay mas, se bajan aqui adentro con el dedo.
Para darle mas o menos lugar, cambia los dos 45. */
.carrito__cuerpo {
flex: 0 0 auto;
max-height: 45vh;
max-height: 45dvh;
overflow-y: auto;
padding: 0 22px;
overscroll-behavior: contain;
}
.carrito__lista { list-style: none; margin: 0; padding: 0; }
/* Un mueble: la foto, sus datos y lo que cuesta */
.carrito__item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.carrito__foto {
width: 64px;
height: 64px;
border-radius: var(--r);
background: var(--bg-alt) center / cover no-repeat;
}
.carrito__nombre {
margin: 0 0 3px;
font-size: .9rem;
font-weight: 600;
line-height: 1.3;
}
.carrito__detalle {
display: block;
font-size: .78rem;
line-height: 1.5;
color: var(--ink-mute);
}
.carrito__subtotal {
font-size: .92rem;
font-weight: 600;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.carrito__fila {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
}
/* El - 1 + */
.carrito__cantidad {
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-radius: 100px;
}
.carrito__cantidad button {
width: 32px;
height: 30px;
border: 0;
background: none;
color: var(--ink);
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.carrito__cantidad button:disabled { color: var(--line); cursor: default; }
.carrito__cantidad span {
min-width: 20px;
text-align: center;
font-size: .86rem;
font-variant-numeric: tabular-nums;
}
.carrito__quitar,
.carrito__vaciar {
border: 0;
background: none;
padding: 4px 0;
font-family: inherit;
font-size: .76rem;
color: var(--ink-mute);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.carrito__quitar:hover,
.carrito__vaciar:hover { color: var(--ink); }
/* Cuando el carrito esta vacio */
.carrito__vacio { padding: 56px 8px; text-align: center; }
.carrito__vacio svg { width: 46px; height: 46px; color: var(--line); }
.carrito__vacio-titulo { margin: 14px 0 6px; font-weight: 600; }
.carrito__vacio-texto {
margin: 0 auto 22px;
max-width: 30ch;
font-size: .88rem;
line-height: 1.65;
color: var(--ink-soft);
}
/* Abajo: el total y el boton verde */
.carrito__pie {
padding: 16px 22px 20px;
border-top: 1px solid var(--line);
background: var(--bg);
/* 14 sep 2026: con el formulario de pago abierto, esta parte crece mas
que la pantalla del celular y el boton "Ir a pagar" quedaba fuera.
Ahora se encoge y se puede bajar con el dedo. */
flex: 0 1 auto;
min-height: 0;
margin-top: auto; /* si sobra lugar, se queda pegada abajo */
overflow-y: auto;
overscroll-behavior: contain;
}
.carrito__total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.carrito__total span {
font-size: .74rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-mute);
}
.carrito__total strong {
font-size: 1.3rem;
font-variant-numeric: tabular-nums;
}
/* 15 sep 2026: el aviso de IVA y meses sin intereses, debajo del total */
.carrito__iva {
margin: 0 0 8px;
font-size: .72rem;
line-height: 1.5;
color: var(--ink-soft);
}
.carrito__nota {
margin: 0 0 14px;
font-size: .76rem;
line-height: 1.55;
color: var(--ink-mute);
}
.carrito__vaciar { display: block; margin: 12px auto 0; }
.carrito__vaciar.es-seguro { color: #a33a2a; }
/* La pagina de atras no se mueve con el cajon abierto */
.carrito-abierto { overflow: hidden; }
/* ---------------------------------------------------------------------
EL AVISITO DE "AGREGADO"
Sale abajo, en medio, cuatro segundos. En celular va arriba del
boton de WhatsApp para no taparlo.
--------------------------------------------------------------------- */
.carrito-aviso {
position: fixed;
z-index: 1250;
left: 50%;
bottom: 26px;
display: flex;
align-items: center;
gap: 14px;
max-width: min(460px, calc(100vw - 24px));
padding: 10px 10px 10px 18px;
border-radius: var(--r);
background: var(--bg-deep);
color: #f2ece1;
font-size: .84rem;
line-height: 1.4;
box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
transform: translate(-50%, 12px);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.carrito-aviso--se-ve {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition: opacity .22s ease, transform .22s ease;
}
.carrito-aviso__ver {
flex: none;
padding: 8px 12px;
border: 0;
border-radius: var(--r);
background: var(--dorado);
color: var(--bg-deep);
font-family: inherit;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
}
@media (max-width: 720px) {
.carrito-aviso { left: 12px; right: 12px; bottom: 84px; max-width: none; transform: translateY(12px); }
.carrito-aviso--se-ve { transform: none; }
.carrito__item { grid-template-columns: 56px 1fr auto; gap: 12px; }
.carrito__foto { width: 56px; height: 56px; }
}
@keyframes carrito-entra { from { transform: translateX(100%); } to { transform: none; } }
@keyframes carrito-velo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.carrito__cajon, .carrito__velo { animation: none; }
.carrito-aviso, .carrito-aviso--se-ve { transition: none; }
}
/* Con el cajon abierto, el avisito de "Agregado" se esconde: ya se ve
la lista completa, y no debe quedar encima del velo. */
.carrito-abierto .carrito-aviso { opacity: 0; visibility: hidden; }
/* La nota en PDF (12 de septiembre de 2026): el boton delineado debajo
del verde de WhatsApp, y el rengloncito que dice que ya se descargo. */
.carrito__pdf { margin-top: 10px; gap: 8px; }
.carrito__pdf svg { width: 18px; height: 18px; flex: none; }
.carrito__pdf[aria-busy="true"] { opacity: .7; cursor: progress; }
.carrito__compartir {
display: block;
margin: 8px auto 0;
padding: 4px 0;
border: 0;
background: none;
font-family: inherit;
font-size: .76rem;
color: var(--ink-soft);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.carrito__pdf-aviso {
margin: 8px 0 0;
font-size: .74rem;
line-height: 1.5;
text-align: center;
color: var(--ink-mute);
}
/* La barra de arriba entre 721 y 1000 pixeles (tabletas y laptops
chicas): con el icono del carrito ya no cabia todo en un renglon y
el carrito se salia de la pantalla. Ahi se esconde el boton de
WhatsApp de la barra; el verde flotante de abajo sigue en todas las
hojas, asi que nadie se queda sin manera de escribirnos. */
@media (min-width: 721px) and (max-width: 1000px) {
.nav__links .btn { display: none; }
/* y los enlaces no se parten en dos renglones ("Arte / exclusivo"):
se juntan un poco para que quepan en uno solo */
.nav__links { gap: 18px; }
.nav__links a { white-space: nowrap; }
}
/* =====================================================================
EL PAGO CON MERCADO PAGO (13 de septiembre de 2026)
---------------------------------------------------------------------
En el carrito: el boton "Pagar con Mercado Pago" y, al tocarlo, el
formulario con los datos de entrega. Solo aparece cuando en Vercel
ya esta puesto MP_ACCESS_TOKEN (lo decide carrito.js).
Mas abajo, la hoja pago.html a donde regresa el cliente.
===================================================================== */
.carrito__pago { margin-bottom: 10px; }
.carrito__pagar,
.carrito__ir { gap: 8px; }
.carrito__pagar[aria-busy="true"],
.carrito__ir[aria-busy="true"] { opacity: .7; cursor: progress; }
/* 14 sep 2026: aclara que se paga con cualquier tarjeta, sin cuenta MP */
.carrito__tarjetas {
margin: 8px 0 0;
font-size: .74rem;
line-height: 1.5;
text-align: center;
color: var(--ink-soft);
}
.carrito__tarjetas b { color: var(--ink); font-weight: 600; }
.carrito__pago-medida {
margin: 0;
padding: 10px 12px;
border-radius: var(--r);
background: var(--bg-alt);
font-size: .76rem;
line-height: 1.55;
color: var(--ink-soft);
}
.carrito__datos {
display: grid;
gap: 10px;
margin-top: 4px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--r);
}
.carrito__datos-titulo { margin: 0; font-weight: 600; font-size: .9rem; }
.carrito__datos label {
display: grid;
gap: 4px;
font-size: .74rem;
color: var(--ink-soft);
}
.carrito__datos input,
.carrito__datos select {
width: 100%;
min-height: 42px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: var(--r);
background: #fff;
color: var(--ink);
font-family: inherit;
font-size: 16px; /* 16 o mas: el iPhone no hace zoom al escribir */
}
.carrito__datos input:focus,
.carrito__datos select:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }
.carrito__datos-fila { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.carrito__datos-error {
margin: 0;
font-size: .78rem;
line-height: 1.5;
color: #a33a2a;
}
.carrito__datos-letra {
margin: 0;
font-size: .72rem;
line-height: 1.5;
text-align: center;
color: var(--ink-mute);
}
.carrito__datos-letra a { color: inherit; }
/* 14 sep 2026: antes era una ligita subrayada ("Mejor no, volver") que
quedaba escondida hasta abajo. Ahora es un boton completo, debajo de
"Ir a pagar", que cierra el formulario y regresa a la lista. */
.carrito__cancelar { cursor: pointer; }
/* La hoja pago.html */
.pago__datos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin: 24px 0;
padding: 18px;
border: 1px solid var(--line);
border-radius: var(--r);
}
.pago__datos dt {
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-mute);
}
.pago__datos dd { margin: 4px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pago__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.pago__letra { font-size: .84rem; color: var(--ink-soft); }
/* El envio en el carrito (13 de septiembre de 2026, tarde): la lista
"Entrega en" arriba del total, y los renglones Muebles y Envio. */
.carrito__zona {
display: grid;
gap: 4px;
margin-bottom: 12px;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-mute);
}
.carrito__zona select {
width: 100%;
min-height: 42px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: var(--r);
background: #fff;
color: var(--ink);
font-family: inherit;
font-size: 16px;
letter-spacing: 0;
text-transform: none;
}
.carrito__zona select:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }
.carrito__desglose { display: grid; gap: 4px; margin-bottom: 8px; font-size: .84rem; color: var(--ink-soft); }
.carrito__desglose div { display: flex; justify-content: space-between; gap: 12px; }
.carrito__desglose span:last-child { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.carrito__desglose .es-pendiente { color: var(--ink-mute); }
/* ---------------------------------------------------------------------
AGREGAR AL CARRITO POR MEDIDA (14 sep 2026)
En los muebles que cambian de precio segun la medida (espejo octagonal,
mesas Diamond), cada renglon de la tabla ("0.80 m $7,900") trae su
propio boton "Agregar". Lo pone carrito.js.
--------------------------------------------------------------------- */
.specs dd.medida {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.medida__agregar {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
min-height: 40px;
padding: 8px 14px;
border: 1px solid var(--ink);
border-radius: var(--r);
background: #fff;
color: var(--ink);
font-family: inherit;
font-size: .72rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
.medida__agregar svg { width: 16px; height: 16px; flex: none; }
.medida__agregar:hover { background: var(--ink); color: #fff; }
.medida__agregar.es-agregado { background: var(--ink); color: #fff; }
.medida__nota {
margin: 6px 0 0;
font-size: .78rem;
color: var(--ink-mute);
}
/* =====================================================================
"LO MAS VENDIDO": EL TEXTO ARRIBA A LA IZQUIERDA (14 sep 2026)
---------------------------------------------------------------------
Antes el nombre, el precio y el boton iban abajo, encima del mueble.
Ahora van en la esquina de arriba a la izquierda y un poco mas
chicos, para que se vea la foto. La sombra solo oscurece esa
esquina. Solo aplica al carrete de "Lo mas vendido" (cartel--vendido);
el de precios especiales se queda igual.
===================================================================== */
.cartel--vendido .cartel__hoja { align-items: flex-start; }
.cartel--vendido .cartel__velo {
background:
linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.26) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 84%, rgba(0,0,0,.30) 100%),
linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 62%);
}
/* padding-top deja libre la ventanita "Quienes somos" de la derecha */
.cartel--vendido .cartel__texto {
max-width: 560px;
padding-top: clamp(56px, 5vw, 70px);
padding-bottom: 0;
}
.cartel--vendido .cartel__texto .eyebrow { margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.cartel--vendido .cartel__hoja h2 {
font-size: clamp(1.5rem, 3.6vw, 2.6rem);
text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.cartel--vendido .cartel__precio { margin: 8px 0 14px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.cartel--vendido .cartel__precio b { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
/* ===== PIE: ICONOS DE FACEBOOK E INSTAGRAM (14 sep 2026) ===== */
.footer__redes { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.footer__redes span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #9d968b; margin-right: 4px; }
.footer__red { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(216,209,197,.32); color: #d8d1c5; transition: color .2s, border-color .2s, background-color .2s; }
.footer__red svg { width: 20px; height: 20px; }
.footer__red:hover, .footer__red:focus-visible { color: var(--dorado); border-color: var(--dorado); background-color: rgba(255,255,255,.04); }
/* ===== ICONOS FLOTANTES DE FACEBOOK E INSTAGRAM (14 sep 2026) =====
Arriba a la derecha, justo debajo de la barra. En la portada van
debajo del boton "Quienes somos". El z-index es menor que el de la
barra (100) para que el menu del celular los tape al abrirse. */
.redes-flota { position: fixed; top: calc(var(--nav-h) + 12px); right: clamp(12px, 2vw, 22px); z-index: 90; display: flex; gap: 8px; }
.nos ~ .redes-flota { top: calc(var(--nav-h) + 56px); }
.redes-flota__red { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); color: var(--ink); box-shadow: 0 6px 20px rgba(28, 26, 23, .14); transition: color .2s, border-color .2s, box-shadow .2s; }
.redes-flota__red svg { width: 19px; height: 19px; }
.redes-flota__red:hover, .redes-flota__red:focus-visible { color: var(--accent); border-color: var(--dorado); box-shadow: 0 10px 26px rgba(28, 26, 23, .18); }
@media (max-width: 560px) {
.redes-flota { top: calc(var(--nav-h) + 9px); right: 10px; gap: 7px; }
.nos ~ .redes-flota { top: calc(var(--nav-h) + 50px); }
.redes-flota__red { width: 38px; height: 38px; }
.redes-flota__red svg { width: 18px; height: 18px; }
}
/* En la portada van EN EL MISMO RENGLON que "Quienes somos", a su izquierda,
para no encimarse con el texto de "Lo mas vendido". 166px = ancho del
boton "Quienes somos" (156) + 10 de separacion. */
.nos ~ .redes-flota { top: calc(var(--nav-h) + 7px); right: calc(clamp(12px, 2vw, 22px) + 166px); }
@media (max-width: 560px) {
.nos ~ .redes-flota { top: calc(var(--nav-h) + 5px); right: 174px; }
}
/* =====================================================================
RESEÑAS (17 de septiembre de 2026)
---------------------------------------------------------------------
- resenas.html: el formulario "Deja tu reseña" (se manda por WhatsApp).
- index.html: la seccion "Lo que dicen nuestros clientes".
===================================================================== */
.resena__form { margin-top: 30px; display: grid; gap: 20px; }
.resena__estrellas { border: 0; margin: 0; padding: 0; }
.resena__estrellas legend, .resena__campo > span {
display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 500; color: var(--ink);
}
.resena__campo em { font-style: normal; font-weight: 400; color: var(--ink-mute); font-size: .82rem; }
.resena__campo input, .resena__campo select, .resena__campo textarea {
width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 1rem;
color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.resena__campo textarea { resize: vertical; min-height: 120px; }
.resena__campo input:focus, .resena__campo select:focus, .resena__campo textarea:focus {
outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
/* Las estrellas: van al reves en el HTML (5 a 1) y se voltean aqui, asi
al pasar el dedo o el raton se pintan todas las de la izquierda. */
.estrellas { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrellas label { font-size: 2.3rem; line-height: 1; color: var(--line); cursor: pointer; transition: color .15s; }
.estrellas input:checked ~ label,
.estrellas label:hover, .estrellas label:hover ~ label { color: #c9a24a; }
.estrellas input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.resena__acepto { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.resena__acepto input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.resena__error { margin: 0; padding: 10px 14px; background: #fbeaea; color: #8a2a2a; border-radius: var(--r); font-size: .9rem; }
.legal .resena__letra { font-size: .82rem; color: var(--ink-mute); margin: 0; }
/* La seccion de la portada */
.resenas { padding: clamp(56px, 8vw, 96px) 0; background: var(--bg); }
.resenas .section__head { margin-bottom: clamp(28px, 4vw, 44px); }
.resenas__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 30px; }
.resenas__lista:empty { display: none; }
.resena-tarjeta { margin: 0; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.resena-tarjeta__estrellas { color: #c9a24a; letter-spacing: .12em; font-size: 1.05rem; }
.resena-tarjeta blockquote { margin: 12px 0 16px; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.resena-tarjeta figcaption { font-size: .85rem; color: var(--ink); }
.resena-tarjeta figcaption span { display: block; color: var(--ink-mute); font-size: .8rem; margin-top: 2px; }
.resenas__vacio { color: var(--ink-soft); margin: 0 0 22px; max-width: 60ch; }
.resenas__lista:not(:empty) + .resenas__vacio { display: none; }