nativo: sin JavaScript.
============================================================ */
.faq{ width:100%; background:var(--void); padding:0 0 101px; }
.faq-grid{ display:grid; grid-template-columns:30.92% 69.08%; align-items:start; }
.faq h2{
font-family:var(--font-display); font-weight:700; font-size:39px; line-height:39px;
color:var(--cosmic); padding-top:1px;
}
.faq-list{ border-bottom:1px solid var(--dust); }
.faq details{ border-top:1px solid var(--dust); }
.faq summary{
display:flex; align-items:center; justify-content:space-between; gap:20px;
height:62px; cursor:pointer; list-style:none;
font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--cosmic);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:'+'; font-family:var(--font-body); font-weight:300; font-size:21px; line-height:1;
color:var(--cosmic); flex:none;
}
.faq details[open] summary::after{ content:'−'; }
.faq details p{
font-size:15px; line-height:1.56; color:rgba(242,237,228,.62);
max-width:616px; margin-top:-4px; padding-bottom:14px;
}
/* El reset global deja los enlaces con color:inherit y sin subrayado, que está bien
en el menú y en el pie —donde se sabe que son enlaces por dónde están— pero no en
mitad de un párrafo: ahí la única señal de que se puede tocar es cómo se ve.
Subrayado separado del texto y el color entero de la marca frente al 62% del
párrafo, que es lo que lo despega. */
.faq details p a{
color:var(--cosmic); text-decoration:underline;
text-underline-offset:3px; text-decoration-thickness:1px;
text-decoration-color:rgba(242,237,228,.5);
transition:color .16s, text-decoration-color .16s;
}
.faq details p a:hover, .faq details p a:focus-visible{
color:var(--acid); text-decoration-color:var(--acid);
}
.faq details p a:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; border-radius:2px; }
/* ---------- Aviso de cookies ----------
Abajo y a lo ancho, por encima de todo menos de los paneles (la ficha es
10001 y el carrito 10002; esto va por debajo a propósito: si alguien abre una
pieza, el aviso no se le pone encima del botón de comprar). */
.cookies{
position:fixed; left:0; right:0; bottom:0; z-index:9000;
display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
background:var(--ink); color:rgba(242,237,228,.86);
border-top:1px solid var(--dust);
}
/* Sin esto, el display:flex de arriba pisa el display:none que el navegador da a
[hidden] y la barra se ve SIEMPRE: tanto a quien no debería verla como después
de pulsar un botón. Todos los demás paneles del proyecto (.pm, .cart, .cm,
.mmenu, .busca, .hdr-mini) llevan su regla equivalente; esta faltaba. */
.cookies[hidden]{ display:none; }
.cookies p{ font-size:13px; line-height:1.45; margin:0; max-width:560px; }
.cookies b{ color:var(--cosmic); font-weight:600; }
.cookies a{ color:var(--acid); text-decoration:underline; text-underline-offset:3px; }
.cookies-btns{ display:flex; gap:10px; flex:none; }
.cookies button{
font-family:var(--font-display); font-weight:700; font-size:13px;
padding:10px 18px; border-radius:30px; white-space:nowrap;
}
.ck-si{ background:var(--acid); color:var(--void); }
.ck-no{ background:transparent; color:rgba(242,237,228,.72); border:1px solid var(--dust); }
.ck-no:hover{ color:var(--cosmic); }
/* ============================================================
RESPONSIVE — SIEMPRE EL ÚLTIMO ARCHIVO
------------------------------------------------------------
Va al final a propósito: así ninguna regla base puede anular
un media query por venir después. Si añades un bloque nuevo,
que sea aquí o en un archivo con número mayor que 90.
Escritorio (1440px) replica el diseño al píxel; por debajo
se reacomoda en tablet y mobile.
============================================================ */
@media (max-width: 1100px){
.hero{ height:560px; }
.nav::after{ left:48px; right:48px; }
.logo{ left:48px; }
.nav-links{ display:none; }
.nav-icons{ right:48px; }
.nav-burger{ display:block !important; }
.mega{ display:none; }
.hero-content h1{ top:290px; font-size:40px; line-height:44px; }
.hero-cta{ top:370px; }
.wrap, .sec-lonuevo .wrap, .sec-edit .wrap{ padding:0 48px; }
.busca-in{ padding:22px 48px 28px; }
.edit-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
.ed-sets{ grid-column:1 / 3; grid-row:auto; height:420px; }
.ed-pendientes{ grid-column:1 / 3; grid-row:auto; height:300px; }
.ed-anillos,.ed-collares{ grid-column:auto; grid-row:auto; height:300px; }
.trust{ height:auto; padding:56px 0 64px; }
.trust-row{ flex-wrap:wrap; gap:32px 40px; height:auto; padding:0 48px; }
.t1,.t2,.t3{ width:auto; }
.rev-rule{ margin:56px 48px 0; }
.rev-h{ margin-top:56px; }
.rev-grid{ padding-left:48px; margin-top:40px; overflow-x:auto; }
.site-footer{ height:auto; padding-bottom:32px; }
.footer-grid{ grid-template-columns:1fr 1fr; height:auto; gap:32px; }
.footer-bottom{ height:auto; flex-wrap:wrap; gap:16px; margin-top:24px; }
.pn{ grid-template-columns:1fr 1fr 1fr; }
.pn .go{ grid-column:1 / -1; justify-self:end; width:176px; }
.solo-disp{ margin-left:0; }
}
@media (max-width: 760px){
.hero{ height:520px; }
/* En una pantalla estrecha la foto apaisada pierde 599 de sus 989px de ancho, y
centrada el recorte caía sobre el pelo negro de la modelo justo debajo del
logo, que es casi negro: desaparecía media palabra. Desplazando el encuadre
al 30% el logo queda entero sobre el cuero rosa claro y la cara sigue bien
encuadrada. Probé 0 / 18 / 30 / 70%: a 0 se pierde la modelo, a 70 vuelve el
pelo. 30 es el único que resuelve las dos cosas. */
.hero-bg{ object-position:30% center; }
.nav::after{ left:22px; right:22px; }
.logo{ left:22px; transform:scale(.72); transform-origin:left top; }
.nav-icons{ right:22px; gap:12px; }
.hero-content h1{ top:258px; font-size:28px; line-height:34px; padding:0 16px; }
.hero-cta{ top:350px; gap:10px; }
.hero-cta .btn, .hero-cta .btn-outline{ width:150px; font-size:13px; }
.ed-label{ font-size:20px; }
.wrap, .sec-lonuevo .wrap, .sec-edit .wrap{ padding:0 22px; }
.busca-in{ padding:18px 22px 24px; }
.busca-campo input{ font-size:18px; }
.cm{ padding:30px 24px 26px; } .cm h2{ font-size:28px; }
.cm-pagina{ padding:0; height:88vh; height:88dvh; } .pagina-cuerpo{ padding:28px 22px 26px; }
.cm-pagina h2{ font-size:26px; }
/* 20px y no 16: el botón "+" ahora asoma 15px por la esquina de cada tarjeta
(ver .add en 20-secciones.css) y con 16 rozaba la tarjeta de al lado. */
.nu-grid,.grid,.nu-grupo{ grid-template-columns:repeat(2, 1fr); gap:20px; }
/* El hueco entre grupos no es decorativo: es el sitio por el que asoma el botón
"+" sin que se vea el grupo de al lado. Tiene que ser el mismo que en
escritorio, porque el JS lo tiene en cuenta al desplazar la pista. */
.nu-grid.nu-pista{ gap:32px; }
.sec-lonuevo{ padding:64px 0 64px; }
.edit-grid{ grid-template-columns:1fr; }
.ed-sets,.ed-pendientes,.ed-anillos,.ed-collares{ grid-column:1; height:320px; }
.ed-pendientes img{ object-position:22% 85%; }
.tabs{ gap:18px; overflow-x:auto; white-space:nowrap; }
/* Por debajo de 760 el panel de filtros deja de ser una rejilla en línea y pasa
a ser el panel lateral de 40-paneles.css. Lo único que queda aquí es deshacer
el ancho fijo que le puso el tramo de 1100, que también alcanza a este: este
archivo va después y ganaría. */
.pn .go{ grid-column:auto; justify-self:stretch; width:auto; }
.fb{ row-gap:14px; }
/* overscroll-behavior:contain — la tira es el único scroller horizontal de la
página, y sin esto el gesto se encadena al documento de atrás. */
.pm-thumbs{ max-height:none; overflow-x:auto; overflow-y:visible; overscroll-behavior:contain; }
.pg{ margin-top:32px; }
/* El botón al lado del nombre, no debajo. Antes la rejilla era
"icon title" / "icon count" / "btn btn" y el botón se llevaba una fila entera.
Ahora son tres columnas y el botón ocupa las dos filas, centrado.
El sitio para el nombre no sale solo de bajar la fuente: medido a 390px, el más
largo ("Lucky Year°") mide 281px a 30, 224 a 24 y 187 a 20 — ni a 20 cabía en los
182px que quedaban. Hay que sacarlo también de los lados: el icono baja de 48 a
40, el hueco de 22 a 12 y el botón se aprieta. Con eso quedan 222px.
Y la fuente va fluida en vez de fija: 20px es el suelo (por debajo deja de leerse
como titular) y 26 el techo (el valor de escritorio es 30). Comprobado que los
cinco nombres caben en una línea de 360px para arriba; a 320 el más largo se
parte en dos y el botón sigue al lado, que es lo que importa. */
.ix{
grid-template-columns:36px 1fr auto;
/* En celular no cabe una columna propia, así que la descripción baja a su
propia fila — pero alineada con el nombre y el lema, sin meterse debajo del
icono ni del botón: la descripción solo ocupa la columna del centro.
El icono y el botón, en cambio, SÍ abarcan las tres filas: así se centran
contra el alto real de la tarjeta en vez de quedarse arriba, que es como se
veían cuando solo abarcaban las dos primeras. */
grid-template-areas:"icon title btn" "icon count btn" "icon desc btn";
/* 16px de separación entre columnas, no 12. Los 4px extra NO salen de la
columna del nombre —ahí no hay de dónde: a 360px "Lucky Year°" ya roza el
límite y con 15px se parte en dos líneas— sino de recortar el icono de 40
a 36 y el aire del botón de 14 a 12. Medido a 360/390/430: ni un nombre
partido y la descripción conserva exactamente el ancho que tenía. */
column-gap:16px; row-gap:4px; padding:20px 0;
}
.ic{ grid-area:icon; width:36px; height:36px; align-self:center; }
.ixt{ grid-area:title; }
.ixt h3{ font-size:clamp(20px, 5.6vw, 26px); line-height:1.1; }
.ixt p{ font-size:12px; }
/* En celular la descripción queda debajo del lema, dentro del área "title",
con el botón al lado — por eso el cuerpo baja un punto: la columna mide
unos 220px y el texto tiene que caber en dos líneas sin recortarse. */
.ix-desc{ grid-area:desc; font-size:11.5px; line-height:1.4; margin-top:6px; -webkit-line-clamp:3; }
.ix em{ grid-area:count; text-align:left; }
/* Centrado contra el alto completo de la tarjeta, igual que el icono. */
.ix-btn{ grid-area:btn; align-self:center; padding:9px 12px; }
/* "Ver colección ↓" -> "Ver ↓". La palabra va en su propio justo para esto. */
.ix-btn i{ display:none; }
/* Los anchos de .t1-.t4 (284, 301, 291px) y los max-width de los (162-176px)
vienen del diseño de 1440, donde las cuatro casillas van en fila. En una pantalla
de 390 dejaban el bloque pegado a la izquierda con un hueco muerto a la derecha.
Aquí se sueltan: cada casilla usa el ancho que hay, y la columna va centrada. */
.trust-row{ padding:0 22px; flex-direction:column; align-items:center; }
.trust-item{ width:100%; max-width:420px; }
/* width:100% y NO auto. Con auto cada casilla se encogía a su contenido y, al ir
la columna centrada, cada una se centraba por su cuenta: los cuatro iconos
acababan en sitios distintos —medido a 430px: 65, 22, 22 y 38— y la franja se
veía desordenada. Esto es lo que hace que compartan borde izquierdo. */
.t1, .t2, .t3, .t4{ width:100%; }
.t1 p, .t2 p, .t3 p, .t4 p, .trust-item p{ max-width:none; }
.t4 > div{ margin-left:0; }
.rev-rule{ margin:48px 22px 0; }
.rev-grid{ padding-left:22px; }
.rev{ flex:0 0 280px; }
.footer-grid{ grid-template-columns:1fr; }
/* height:auto: el alto de 59px venía del diseño de 1440, donde los logos van en
una sola fila. Aquí se envuelven y con el alto fijo se salían de su caja —se veía
media fila de logos cortada por abajo. Las alturas dejan de colgar del borde de
abajo (los márgenes del diseño ancho) y se centran entre ellas. */
.pay{ flex-wrap:wrap; height:auto; align-items:center; row-gap:14px; }
.pay img{ margin-bottom:0; margin-top:0; }
.pay-label{ flex:0 0 100%; margin:0 0 4px; }
}
/* Desde 1101px la hamburguesa abre un panel lateral por la derecha en vez de
tomarse la pantalla entera: en escritorio hay sitio de sobra y tapar todo
para enseñar ocho enlaces es desproporcionado. */
@media (min-width:1101px){
.mmenu{ background:rgba(13,13,13,.5); backdrop-filter:blur(2px); }
.mmenu-panel{
left:auto; right:0; top:0; bottom:0; width:420px; max-width:92vw;
padding:28px 32px 44px; box-shadow:-20px 0 60px rgba(0,0,0,.4);
transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.mmenu.open .mmenu-panel{ transform:none; }
.mmenu-main a{ font-size:24px; }
}
@media (max-width:1100px){
.hecho-t h2{ font-size:54px; } .hecho-im{ width:360px; height:360px; }
.hecho-notas .hn-alta p{ font-size:16px; }
.faq{ padding-bottom:64px; }
.faq-grid{ grid-template-columns:1fr; gap:28px; }
.faq h2{ font-size:34px; line-height:34px; padding-top:0; }
}
@media (max-width:760px){
/* Las dos secciones se tocaban: "hecho" acaba con 16px de padding y el FAQ
empezaba en 0. 15px más de aire, pedidos a ojo sobre el teléfono. */
.faq{ padding-top:15px; }
/* Anclada abajo, no centrada: así el borde superior queda SIEMPRE en el mismo
sitio (15% de la ventana) en vez de moverse según cuánto contenido tenga el
producto. Entra deslizándose desde abajo con la misma curva y el mismo tiempo
que el carrito, que ya era bottom-sheet en celular — ver .cart aquí abajo. */
.pm{
top:15vh; bottom:0; height:85vh; max-height:85vh;
/* dvh y no solo vh: en iOS (Safari y Chrome) `vh` se calcula sobre el viewport
MÁS GRANDE POSIBLE —el de cuando las barras del navegador están escondidas—,
no sobre lo que de verdad se ve. Con las barras a la vista, el 85% se iba por
debajo de la barra inferior y la ficha salía cortada; reportado desde un
iPhone 15 Plus con Chrome. `dvh` sigue el viewport real y se reajusta solo
cuando las barras aparecen o se esconden.
Las dos declaraciones a propósito: un navegador que no entienda dvh descarta
esta línea y se queda con la de arriba, que es el comportamiento de antes. */
top:15dvh; height:85dvh; max-height:85dvh;
transform:translateY(100%);
}
.pm.open{ transform:none; }
/* Columna flex, no grid: con el cuerpo de alto fijo el grid daba filas de
0.19px a las miniaturas y a la foto, y las tres partes se montaban encima.
En flex el alto lo pone el contenido y "order" sigue funcionando igual. */
.pm-body{ display:flex; flex-direction:column; row-gap:12px; padding:16px; overflow-x:hidden; }
.pm-body > *{ flex:none; }
/* Miniaturas de verdad: 72px fijos, y la tira se desplaza si no caben.
Antes era flex:1, o sea que se repartían el ancho de la pantalla: con dos fotos
cada una medía 172px y a ese tamaño el navegador pide la foto de 678px —unos
200 KB— solo para pintar una miniatura. Medido contra /nuevo/ con la caché fría
a 700 kbps, a los 6 segundos la segunda seguía bajando y la tira parecía vacía.
A 72px el sizes del JS hace que elija la variante de 199px, que son 8 KB, y
además la foto principal recupera el alto que se llevaban. */
/* min-width:0 es lo que impide que la tira ensanche la ficha entera. Es un flex
horizontal cuyos hijos no encogen (flex:0 0 66px), colgando de un .pm-body que
es columna: sin esto su ancho MÍNIMO es la suma de las miniaturas, así que con
muchas fotos empuja el ancho del panel aunque el overflow-x ya esté puesto. */
.pm-thumbs{ flex-direction:row; order:2; gap:8px; min-width:0; width:100%; }
/* 66px y no 72, y los 6px de diferencia no son estéticos. A 3x —un iPhone normal—
un cuadro de 72px pide 216px de imagen, y la variante estrecha del catálogo tiene
199: por 17px el navegador se iba a la de 678 y no se ahorraba nada. Con 66 pide
198, que entra justo en los 199, así que baja 8 KB en vez de 200 y además la
pinta uno a uno. Si algún día cambian los anchos del srcset (elegirSrcset en
src/build/normalizar.mjs, objetivos 300/500/700 con tope 800), hay que rehacer
esta cuenta: la prueba r13 la comprueba. */
.pm-thumbs button{ flex:0 0 66px; width:66px; height:66px; aspect-ratio:1; }
.pm-main{ width:100%; height:auto; aspect-ratio:2/3; max-height:42vh; max-height:42dvh; justify-self:center; }
.pm-info{ height:auto; margin-left:0; padding-top:8px; order:3; }
.pm-info h2{ font-size:32px; }
/* "Agregar al carrito" pegado al borde inferior de la ficha.
Medido antes de esto: el botón caía en y=1272 con una ventana de 844, o sea
que había que desplazar 531px DENTRO de la ficha para llegar a él, y al abrir
no se veía nunca. No es culpa del alto de 85vh —antes, con 94vh, hacían falta
455px igual— es que la ficha lleva foto, miniaturas, descripción, specs y
opciones por delante del botón.
Sticky y no fijo: cuando se llega al final del contenido deja de flotar y se
queda en su sitio, así no tapa nada de forma permanente.
Los -16px de margen lateral y el bottom negativo compensan el padding de
.pm-body, para que la banda llegue de borde a borde y no deje ver el contenido
colándose por debajo. */
.pm-buy{
position:sticky; bottom:-16px; z-index:2;
margin:22px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background:var(--cosmic);
box-shadow:0 -10px 16px -10px rgba(13,13,13,.28);
}
.pm-x{ top:14px; right:14px; }
/* El carrito arrastraba el mismo problema de vh en iOS, y ahí es peor: al fondo
está "Comprar por WhatsApp", que es como se cierra la venta. */
.cart{ top:auto; left:0; right:0; width:100%; max-height:86vh; max-height:86dvh; border-radius:24px 24px 0 0; transform:translateY(100%); }
.cart.open{ transform:none; }
.cart-h{ padding:24px 22px 0; } .cart-list{ padding:0 22px; } .cart-ship{ padding:14px 22px 0; } .cart-f{ padding:16px 22px 24px; }
.cart-n{ display:inline; font-size:inherit; color:inherit; margin:0; }
.cart-n:not(:empty)::before{ content:' · '; }
.cart-h h2{ display:inline; font-size:18px; } .cart-h{ font-family:var(--font-display); font-weight:700; font-size:18px; }
.ci{ gap:14px; padding:14px 0; } .ci-th{ width:48px; height:48px; } .ci{ grid-template-columns:48px 1fr; } .ci-m{ display:none; } .qty{ margin-top:8px; }
/* En columna la foto cuadrada dispararía el alto de la sección; se recorta a una
franja para que el bloque siga cabiendo en los 800px. */
.hecho{ flex-direction:column; align-items:flex-start; gap:20px; }
.hecho-t h2{ font-size:44px; }
.hecho-im{ width:100%; height:178px; aspect-ratio:auto; object-position:center 35%; }
.hecho-lead{ margin-top:18px; font-size:15.5px; line-height:1.5; }
.hecho-notas{ margin-top:18px; gap:12px; }
.hecho-notas p{ font-size:14px; }
.hecho-notas .hn-alta p{ font-size:15.5px; }
/* El enlace a "Nuestra historia" añade 54px y en celular la sección ya rozaba
los 800px que es su tope. Se recorta su separación y la del pie de la franja
para devolver ese espacio: el bloque sigue cabiendo. */
.hecho-mas{ margin-top:14px; }
.faq{ padding-bottom:48px; }
.faq h2{ font-size:30px; line-height:31px; }
.faq summary{ font-size:16px; height:auto; min-height:58px; padding:14px 0; }
.faq details p{ font-size:14px; padding-bottom:20px; }
.sec-hecho{ padding:40px 0 16px; }
}
/* ---------- Teléfonos estrechos (360px y por debajo) ----------
A 390px la descripción de colección entra justo en tres líneas, pero a 360 —un
Galaxy A, un Pixel en varios modos— la columna baja de 218 a 188px y tres de las
cinco necesitan una cuarta. Con el tope en tres se cortaban con puntos
suspensivos, y lo que se perdía era siempre el final: "hechas para darte…",
"…o un martes cualquiera", "…obsequiar suerte" — justo la ocasión de uso, que es
para lo que se escribieron. Aquí la tarjeta crece unos 16px y no se pierde texto. */
@media (max-width:380px){
.ix-desc{ -webkit-line-clamp:4; }
}
/* ---------- Aviso de cookies en celular ----------
En columna: a lo ancho de un teléfono, el texto y los dos botones en la misma
fila dejarían el texto en una tira de 120px. */
@media (max-width:760px){
.cookies{ flex-direction:column; align-items:stretch; gap:12px; padding:16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
.cookies p{ font-size:12.5px; max-width:none; }
.cookies-btns{ justify-content:stretch; }
.cookies-btns button{ flex:1; }
}