/* ══════════════════════════════════════════════════════════════════════ AURELL — tienda en línea. Dos letras (elegidas el 2026-08-25, maqueta «Blanco y oro claro»): · Libre Baskerville (--titulo) es la voz de la marca: nombres, títulos y precios. Trae cursiva propia, así que la línea inclinada del titular no se la inventa el navegador. · Archivo (--letra) es el cuerpo, las etiquetitas y los datos. OJO: el PANEL sigue con Fraunces + Public Sans, así que la vista previa de "Ver como cliente" de allá ya NO dice la verdad sobre la letra de aquí. En esta tienda el precio no se esconde: se enseña cómo se arma. OJO con los lados: las secciones comparten la clase `.env`, que es la que pone los 20px de los costados. Si a `.sec` se le pone `padding` a secas, le borra esos lados y el texto queda pegado a la orilla. Por eso aquí siempre se usa `padding-top` / `padding-bottom`, nunca `padding` solo. ══════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Libre Baskerville';src:url(lib/baskerville.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Libre Baskerville';src:url(lib/baskerville-b.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Libre Baskerville';src:url(lib/baskerville-ital.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Archivo';src:url(lib/archivo.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap} :root{ color-scheme:light; /* «Blanco y oro claro», la paleta que eligió el 2026-08-25. El oro tiene DOS tonos con dos trabajos distintos, y no son intercambiables: --oro es el CLARO y luminoso, y va donde el dorado es línea, filete, corona o relleno; --oro-tinta es el mismo oro más profundo y va SOLO donde el dorado es texto. Sobre un papel casi blanco, el oro claro como texto no se alcanza a leer. */ --papel:#FDFBF7; --papel-hondo:#F8F3E9; --tinta:#23201B; /* --humo son las etiquetitas; --humo-lee son los PÁRRAFOS que lee el cliente. Va más oscuro a propósito: es texto de venta. */ --humo:#756B5C; --humo-lee:#5C5449; --linea:#EFE8D9; --linea-fina:rgba(35,32,27,.055); --oro:#D4AF37; --oro-tinta:#8A6A1C; --oro-tenue:#FAF3E1; /* el texto que va ENCIMA del oro claro: oscuro, nunca blanco */ --oro-texto:#2A2113; /* La banda oscura dentro de la página clara: la firma visual de la tienda. */ --noche:#1A1712; --noche-tinta:#F2EADA; /* La franja de anuncio tiene tokens PROPIOS: si usara --tinta/--papel se invertiría sola al cambiar de tema, porque esos dos se intercambian. */ --anuncio:#23201B; --anuncio-tinta:#F5EEDD; /* el verde de «incluido» y «gratis» */ --ok:#3E6B45; /* las rayas DENTRO de la banda oscura */ --noche-linea:#332F28; /* el gris tenue cuando el fondo es la banda oscura */ --noche-humo:#ABA08B; --sombra-tono:rgba(35,32,27,.13); --titulo:'Libre Baskerville',Georgia,'Times New Roman',serif; --letra:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ancho:1120px; --sube:cubic-bezier(.22,.61,.36,1); } /* ⚠️⚠️ AQUÍ VIVÍAN LOS DOS BLOQUES DEL MODO NOCHE, y se fueron el 2026-09-07. Miguel lo preguntó y la respuesta fue que sí, por una razón que no es de gusto: las 383 fotos del catálogo están tomadas sobre seda, satín y cojines BLANCOS. En una página oscura cada foto se vuelve un rectángulo blanco encendido — lo que se mira deja de ser la joya y pasa a ser el hueco de la foto. Y el oro se lee más cálido y más fiel sobre papel claro, que es de lo que va la marca. Es también lo que hacen todas las joyerías serias (Tiffany, Cartier, manoforjada, Bizzarro, La Esmeralda): ninguna tiene modo noche. ⚠️ EL PANEL NO SE TOCA: allá el oscuro se queda, porque es una herramienta de trabajo y no un escaparate. ⚠️ Y son CINCO sitios, no uno: además de aquí, el `theme-color` de `tienda/index.html` y el de `tienda/privacidad.html`, más las copias propias de la paleta que tienen `tienda/agendar/index.html` y `g/index.html`. Los tokens de noche están en git por si algún día se quieren de vuelta. */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--papel);color:var(--tinta); font-family:var(--letra);font-size:16.5px;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} [hidden]{display:none!important} a{color:inherit} :focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .env{max-width:var(--ancho);margin:0 auto;padding:0 20px} .mono{font-family:var(--letra);font-variant-numeric:tabular-nums} .eti{font-family:var(--letra);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--humo)} /* ── Barra ───────────────────────────────────────────────────────────── */ .barra{ position:sticky;top:0;z-index:60;background:var(--papel); border-bottom:1px solid var(--linea-fina); } .barra-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px; height:60px;max-width:var(--ancho);margin:0 auto;padding:0 20px} .barra-lado{display:flex;align-items:center;gap:2px} .barra-lado.der{justify-content:flex-end} .marca{display:flex;align-items:center;line-height:1;text-decoration:none} /* El logo oficial (2026-09-07). Reemplaza la corona + AURELL + JOYERÍA que * antes se armaban a mano; es el MISMO dibujo, ahora el archivo de verdad. * `width:auto` y el `height` mandan; los atributos width/height del son * solo para que el navegador reserve el hueco y no baile al cargar. */ /* 38 → 40px (2026-09-13, a petición de Miguel: «un 5% más grande»). En el celular, 32 → 34px, unas filas más abajo. */ .marca-logo{display:block;height:32px;width:auto} .corona{display:block;margin:0 auto 2px;width:16px;height:9px;fill:none;stroke:var(--oro);stroke-width:1.3} .icono{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:background .18s;position:relative;flex:none} .icono:hover{background:var(--papel-hondo)} .icono svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} /* ⚠️ El glifo de WhatsApp es una SILUETA, no un trazo: necesita relleno y ningún contorno. Sin esto sale un cuadro vacío, porque las dos reglas de arriba —y la de `.btn.wa svg`— dibujan todo a línea. Vale para el iconito de la cabecera y para el del botón grande, por eso lleva `!important` y no un selector más largo: las dos reglas que le ganan están escritas en dos sitios distintos del archivo. */ svg.wa-glifo{fill:currentColor!important;stroke:none!important} /* 27-oct: el glifo de WhatsApp llena TODO su cuadro de 24 y la lupa y la bolsa dejan aire alrededor; a igual tamaño de cuadro el verde se veía enorme. Cuadro 24 para los de línea y 19 para este: los tres miden ~17 px de tinta. */ .icono svg.wa-glifo{width:18px;height:18px} .globo{position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px; background:var(--oro);color:var(--oro-texto);font-family:var(--letra);font-size:10px;font-weight:700;font-style:normal; display:grid;place-items:center} /* ── El buscador (2026-09-13) ───────────────────────────────────────────── Los tres botones de la barra (buscar · WhatsApp · su pedido) se ven EXACTAMENTE igual en reposo: mismo aro, mismo relleno (ninguno). Solo el de buscar cambia, y SOLO mientras la cortina está abierta — a propósito, para que no se confunda con el roce del dedo que se queda pegado un instante en el celular (es de ahí de donde salía «se ven de tamaño distinto», no de una medida real: los dos ya miden 44×44). */ .icono#btnBuscar[aria-expanded="true"]{background:var(--tinta);color:var(--papel)} /* La cortina cuelga de la barra, no de toda la pantalla: al abrirse no tapa el resto de la tienda, solo la empuja hacia abajo. */ .buscar-panel{max-height:0;overflow:hidden;background:var(--papel); transition:max-height .32s var(--sube)} .buscar-panel.abierto{max-height:min(70vh,560px)} .buscar-in{max-width:var(--ancho);margin:0 auto;padding:4px 20px 20px; border-top:1px solid var(--linea)} .buscar-campo{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--tinta); padding:14px 2px 10px} .buscar-campo svg{width:18px;height:18px;flex:none;color:var(--humo); fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .buscar-campo input{flex:1;border:0;background:none;outline:0;min-width:0; font-family:var(--titulo);font-size:19px;color:var(--tinta);padding:0} .buscar-campo input::placeholder{color:var(--humo);font-family:var(--letra);font-size:14.5px} .buscar-limpiar{border:0;background:none;padding:4px;cursor:pointer;color:var(--humo); font-family:var(--letra);font-size:12px;flex:none} .buscar-rotulo{margin:18px 0 10px;font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--humo)} .buscar-lista{list-style:none;margin:0;padding:0;max-height:min(52vh,420px);overflow-y:auto} .buscar-fila{display:flex;align-items:center;gap:13px;padding:9px 2px;text-align:left; width:100%;border:0;background:none;cursor:pointer;border-radius:10px;transition:background .15s} .buscar-fila:hover{background:var(--papel-hondo)} .buscar-foto{width:44px;height:44px;border-radius:10px;flex:none;object-fit:cover; background:var(--papel-hondo)} .buscar-datos{flex:1;min-width:0} .buscar-nombre{font-family:var(--titulo);font-size:15.5px;color:var(--tinta);line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .buscar-nombre mark{background:none;color:var(--oro-tinta);font-weight:700} .buscar-meta{font-size:11px;color:var(--humo);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .buscar-precio{font-family:var(--letra);font-size:12.5px;font-weight:600;color:var(--oro-tinta); white-space:nowrap;flex:none} .buscar-vacio{padding:30px 4px 10px;text-align:center} .buscar-vacio p{margin:0 0 12px;color:var(--humo-lee);font-size:13.5px;line-height:1.6} .buscar-vacio a{display:inline-flex;align-items:center;gap:7px;color:var(--tinta); font-size:12.5px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--oro); padding-bottom:2px} @media (max-width:640px){ .buscar-panel.abierto{max-height:min(80vh,560px)} .buscar-in{padding:4px 14px 16px} .buscar-campo input{font-size:16px} } /* ── La guía de tallas ───────────────────────────────────────────────────── */ .modo{border-left:2px solid var(--oro);padding:2px 0 2px 16px;margin:18px 0} .modo .n{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-tinta)} .modo h4{margin:6px 0 5px;font-size:19px;font-weight:400} .modo p{margin:0;color:var(--humo-lee);font-size:15.5px} /* La tabla se desliza DENTRO de su envoltura, nunca la página. */ /* ⚠️ AQUÍ VIVÍA UN `max-height:420px; overflow-y:auto` Y SE FUE EL 2026-09-08. Era del tiempo en que este envoltorio también vestía la tabla de milímetros de la guía de tallas —larga de verdad, y con razón para deslizarse por dentro—. Esa tabla se borró entera el 7-sep y el tope se quedó: desde entonces el único que lo usaba era «La ficha», que son diez renglones y tiene que verse completa. Medido en un celular de 390: la tabla pedía 562px dentro de una caja de 418, así que «Talla» y «Hecho en» —de qué tallas se hace y dónde— NO SE VEÍAN, y como el deslizamiento era por dentro no había ni un indicio de que faltara algo. Lo vigila `pruebas/tienda-escaparate.js`. El `overflow-x` SÍ se queda: eso es para que una tabla ancha se deslice en su caja y no arrastre la página. */ .tabla-envuelta{overflow-x:auto;border:1px solid var(--linea);margin-top:12px} .tabla-tallas{width:100%;border-collapse:collapse;font-size:14px} .tabla-tallas th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--humo);border-bottom:1px solid var(--linea);padding:10px 14px 8px;font-weight:700; position:sticky;top:0;background:var(--papel);white-space:nowrap} .tabla-tallas td{border-bottom:1px solid var(--linea-fina);padding:10px 14px;color:var(--humo-lee);white-space:nowrap} .tabla-tallas td:first-child{font-family:var(--titulo);font-size:16px;font-weight:700;color:var(--tinta)} .tabla-tallas tr.comun td{background:var(--oro-tenue)} .tabla-tallas tr.comun td:first-child::after{content:"la más pedida";font-family:var(--letra); font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--oro-tinta);margin-left:10px;vertical-align:2px} .consejos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px} .consejo{border-left:2px solid var(--linea);padding:2px 0 2px 14px;font-size:14px;color:var(--humo-lee)} .consejo b{color:var(--tinta)} @media (max-width:640px){ .consejos{grid-template-columns:1fr} } /* ── La foto en grande ───────────────────────────────────────────────────── */ .visor{position:fixed;inset:0;z-index:300;background:rgba(12,10,8,.94); display:none;align-items:center;justify-content:center;padding:24px} .visor.abierto{display:flex} .visor img{max-width:min(94vw,900px);max-height:88vh;object-fit:contain} .visor-x{position:absolute;top:14px;right:14px;width:46px;height:46px;border:none; border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;cursor:pointer} .visor-x svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round} .lupa{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%; background:var(--papel);border:1px solid var(--linea);display:grid;place-items:center;cursor:pointer} .lupa svg{width:17px;height:17px;stroke:var(--tinta);fill:none;stroke-width:1.7;stroke-linecap:round} /* ── Los cuatro sellos ───────────────────────────────────────────────────── */ .sellos{border-top:1px solid var(--linea);background:var(--papel-hondo)} .sellos .env{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px; padding-top:clamp(34px,5vw,54px);padding-bottom:clamp(34px,5vw,54px)} .sello{text-align:center;padding:0 6px} .sello svg{width:28px;height:28px;stroke:var(--tinta);fill:none;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round;margin:0 auto 11px;display:block} .sello b{display:block;font-family:var(--titulo);font-size:15.5px;font-weight:700;margin-bottom:6px} .sello span{font-size:13px;color:var(--humo-lee);line-height:1.55} @media (max-width:820px){ .sellos .env{grid-template-columns:1fr 1fr;gap:22px 16px} } @media (max-width:420px){ .sellos .env{grid-template-columns:1fr} } .pie-abajo{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px} .pie .pie-abajo small{margin-top:0} /* ── El carrito y el pago ────────────────────────────────────────────────── */ .car-cab{padding:18px 0 4px} .car-cab h2{font-size:clamp(26px,5vw,32px);font-weight:400;margin:8px 0 6px;letter-spacing:-.01em} .car-cab p{margin:0 0 10px;color:var(--humo-lee);font-size:15.5px} .car-pieza{border:1px solid var(--linea);padding:16px;margin-top:14px} .car-arriba{display:flex;gap:14px;align-items:flex-start} .car-foto{width:78px;height:78px;object-fit:cover;flex:none;background:var(--papel-hondo);display:block} .car-datos{flex:1;min-width:0} .car-nom{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .car-nom h3{margin:0;font-size:21px;font-weight:400} .car-precio{font-size:16px;font-weight:700;white-space:nowrap} .car-var{font-size:11.5px;color:var(--humo);margin-top:5px;letter-spacing:.05em} /* Cada aro con SU talla y SU grabado: es lo único del pedido que ya no se puede corregir después de mandarlo a fabricar. */ .car-aros{margin-top:14px;border-top:1px solid var(--linea-fina);padding-top:12px;display:grid;gap:10px} .car-aro{display:grid;grid-template-columns:64px auto 1fr;gap:10px;align-items:baseline} .car-aro-q{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--humo)} .car-aro-t{font-size:13.5px;color:var(--tinta);white-space:nowrap} .car-aro-g{font-size:12.5px;color:var(--humo-lee);min-width:0;overflow-wrap:anywhere} .car-aro-g b{color:var(--tinta);font-weight:400;border-bottom:1px solid var(--linea)} .car-aro-g i{color:var(--humo);font-style:normal} @media (max-width:420px){ .car-aro{grid-template-columns:1fr;gap:2px} .car-aro-q{margin-top:4px} } .res-fila .gratis{color:var(--ok);font-weight:600} .car-nota{font-size:12px;color:var(--humo);text-align:center;margin:16px 0 0;line-height:1.7;max-width:34em;margin-inline:auto} /* La pastilla se queda BLANCA en los dos temas: una marca se reconoce por su color, y sobre fondo oscuro los logos dejarían de leerse. */ /* El borde va SIEMPRE contra el blanco de la pastilla, no contra el papel: con `var(--linea)` las del carrito quedaban con un aro oscuro duro de noche y las del pie no — el mismo componente con dos caras en la misma página. */ /* ── Candado temporal (2026-08-09, quitar cuando la tienda abra al público) ── * Tapa todo mientras se decide si hay sesión del panel/beta; ver js/tienda.js. */ .candado{ position:fixed;inset:0;z-index:200;background:var(--papel);color:var(--tinta); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;text-align:center;padding:24px; } .candado-logo{display:block;height:69px;width:auto;max-width:78vw} .candado p{margin:22px 0 0;font-family:var(--titulo);font-size:17px;line-height:1.5;color:var(--humo-lee);max-width:22em} /* ── La franja de anuncio, arriba de todo ────────────────────────────── */ .anuncio{background:var(--anuncio);color:var(--anuncio-tinta)} .anuncio p{margin:0;padding:9px 20px;text-align:center;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;font-weight:500} .anuncio b{color:var(--oro);font-weight:700} /* ── El menú de categorías ───────────────────────────────────────────── */ .cats{border-bottom:1px solid var(--linea);background:var(--papel)} /* Centrado SIN justify-content:center: cuando no cabe, ese recorta el inicio de la tira y la primera categoría se vuelve inalcanzable en el celular. */ .cats-in{max-width:var(--ancho);margin:0 auto;display:flex;gap:4px;overflow-x:auto; padding:0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .cats-in::-webkit-scrollbar{display:none} .cat:first-child{margin-left:auto} .cat:last-child{margin-right:auto} .cat{font-family:var(--letra);font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;padding:14px 13px;white-space:nowrap;color:var(--humo-lee); background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;min-height:46px} .cat.activa{border-bottom-color:var(--oro);color:var(--tinta)} .cat .prox{font-size:8px;letter-spacing:.08em;color:var(--oro-tinta); vertical-align:super;margin-left:4px;font-weight:700} /* ── Las dos promesas, bajo el menú ──────────────────────────────────── */ .dosfranjas{border-bottom:1px solid var(--linea);background:var(--papel-hondo)} .dosfranjas .env{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0} .franjita{padding:12px 18px;text-align:center} .franjita+.franjita{border-left:1px solid var(--linea)} .franjita b{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--tinta)} .franjita span{font-size:12.5px;color:var(--humo)} @media (max-width:640px){ .franjita span{display:none} .franjita{padding:9px 8px} } /* ── El celular: que la cabecera no se coma la pantalla ─────────────────── */ @media (max-width:640px){ .no-cel{display:none} .anuncio p{padding:7px 14px;font-size:9.5px;letter-spacing:.12em} .barra-in{height:54px;padding:0 12px} .marca-logo{height:27px} .candado-logo{height:54px} .cat{padding:12px 11px;font-size:11px} .franjita b{font-size:9.5px;letter-spacing:.14em} } /* La tira de categorías se desliza: sin una pista, en el celular parece que solo hay dos y las demás no existen. El degradado dice «hay más» sin ocupar lugar, y se apaga cuando ya se llegó al final. */ .cats{position:relative} .cats::after{content:"";position:absolute;right:0;top:0;bottom:2px;width:38px;pointer-events:none; background:linear-gradient(to right,transparent,var(--papel));opacity:1;transition:opacity .2s} .cats.hasta-el-final::after{opacity:0} @media (min-width:900px){ .cats::after{display:none} } /* ── Portada ─────────────────────────────────────────────────────────── */ /* Dos mitades a sangre: la foto de un lado, el texto sobre fondo oscuro del otro. No lleva `.env`: ocupa el ancho completo a propósito. */ .hero-rej{display:grid;grid-template-columns:1fr;align-items:stretch} @media (min-width:801px){ .hero-rej.con-foto{grid-template-columns:1fr 1fr} } .hero-foto{position:relative;background:var(--papel-hondo);overflow:hidden;min-height:clamp(320px,52vh,540px)} .hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 48%} .hero-txt{background:var(--noche);color:var(--noche-tinta);display:flex;align-items:center;padding:clamp(30px,4vw,56px) 20px} .hero-dentro{max-width:34em;margin:0 auto;width:100%} .hero .eti{display:block;margin-bottom:14px;color:var(--oro)} .hero h1{ font-size:clamp(30px,4.4vw,50px);line-height:1.12;letter-spacing:-.01em;margin:0 0 16px; font-weight:400;text-wrap:balance;color:var(--noche-tinta); } /* el oro CLARO, no el de texto: aquí el fondo es oscuro y el profundo se apaga */ .hero h1 i{font-style:italic;color:var(--oro)} .hero p{margin:0 0 24px;color:var(--noche-humo);font-size:16.5px;max-width:32em} .hero-botones{display:flex;align-items:center;gap:22px;flex-wrap:wrap} /* La foto va primero en el HTML para que en el celular se vea antes que el texto; en computadora el orden es el mismo y no hace falta moverla. */ @media (max-width:800px){ .hero-foto{min-height:0;aspect-ratio:4/3} } /* ── La franja de los tres datos ─────────────────────────────────────────── */ .prueba{border-bottom:1px solid var(--linea);background:var(--papel)} .prueba .env{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:12px clamp(16px,3vw,44px);padding-top:18px;padding-bottom:18px;text-align:center} .dato{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--humo-lee)} .dato b{font-family:var(--titulo);font-size:16px;font-weight:700;color:var(--tinta); letter-spacing:0;text-transform:none;margin-right:7px;vertical-align:-1px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;min-height:48px; border:1px solid var(--tinta);background:var(--tinta);color:var(--papel); font-family:var(--letra);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;transition:transform .16s var(--sube),opacity .16s; } .btn:active{transform:translateY(1px)} .btn.hueco{background:none;color:var(--tinta);border-color:var(--linea)} .btn.hueco:hover{border-color:var(--tinta)} .btn.ancho{width:100%} /* Un botón apagado tiene que VERSE apagado: si no, se toca, no pasa nada y parece que la página está rota. */ .btn[disabled]{opacity:.45;cursor:default} .btn.oro{background:var(--oro);border-color:var(--oro);color:var(--oro-texto)} /* el botón cuando va SOBRE la banda oscura: se invierte, no se apaga */ .btn.claro{background:var(--noche-tinta);border-color:var(--noche-tinta);color:var(--noche)} .btn-liso{font-family:var(--letra);font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--noche-tinta);text-decoration:none; border-bottom:1px solid var(--noche-tinta);padding-bottom:4px} /* la nota del oro: el mecanismo del precio, a la vista */ .oro-hoy{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px; margin-top:30px;padding:14px 16px;border:1px solid var(--linea);background:var(--oro-tenue); } .oro-hoy .p{font-family:var(--letra);font-size:11.5px;letter-spacing:.06em;color:var(--tinta)} .oro-hoy .s{font-family:var(--letra);font-size:11.5px;color:var(--humo)} .sec{padding-top:56px;padding-bottom:56px} .sec h2{font-size:clamp(25px,5vw,34px);font-weight:700;letter-spacing:-.015em;margin:8px 0 0;text-wrap:balance} .sec-sub{color:var(--humo-lee);margin:6px 0 0;max-width:36em} /* etiquetas para filtrar */ .fams{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:22px 20px 4px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .fams::-webkit-scrollbar{display:none} .fam{flex:none;min-height:44px;padding:9px 16px;border:1px solid var(--linea);background:none;white-space:nowrap; font-family:var(--letra);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--humo); transition:border-color .16s,color .16s,background .16s} .fam[aria-pressed="true"]{border-color:var(--tinta);color:var(--tinta);background:var(--papel-hondo)} /* El segundo piso va sangrado y pegado al de arriba: se lee como «dentro de Argollas», no como otra fila de filtros suelta. Vacío no ocupa nada. */ .fams2{padding-top:10px} .fams2:empty{display:none} @media (min-width:720px){.fams2{padding-left:22px}} .fams2 .fam{font-size:10.5px;padding:7px 14px} /* La liga a la otra versión de la misma argolla, en la ficha. */ .ayuda.hermana{margin-top:8px} .ayuda.hermana a{color:var(--oro-tinta);border-bottom:1px solid var(--oro)} /* retícula de piezas — sin tarjetas: la foto flota sobre el mismo papel */ .rej{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 18px;margin-top:26px} @media (min-width:720px){.rej{grid-template-columns:repeat(3,1fr);gap:46px 26px}} .pieza{text-align:left;display:block;width:100%;padding:0} .pieza-foto{position:relative;aspect-ratio:1;background:var(--papel-hondo);overflow:hidden;margin-bottom:12px} .pieza-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--sube)} .pieza:hover .pieza-foto img{transform:scale(1.04)} .pieza-fam{position:absolute;left:0;bottom:0;background:var(--papel);padding:5px 10px 4px} .pieza h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em} .pieza .precio{font-family:var(--titulo);font-size:14px;margin-top:3px;color:var(--tinta);font-variant-numeric:tabular-nums} .pieza .precio i{font-style:normal;color:var(--humo);font-size:11px} .pieza .quil{font-family:var(--letra);font-size:10.5px;letter-spacing:.12em;color:var(--humo);margin-top:5px} /* ══ YA LAS TRAEN PUESTAS — fotos de clientes (2026-09-09) ══════════════════ * * ⚠️ NO reusa `.rej`: aquélla es una cuadrícula de tarjetas de venta, con su * nombre, su precio y su hueco cuadrado. Éstas son fotos y nada más — de tres en * tres en el teléfono y de cinco en cinco en pantalla ancha, para que se lean * como un muro y no como más producto. * * ⚠️ El hueco es CUADRADO (`aspect-ratio:1`) aunque las fotos vengan de todas * formas: sin él, una vertical entre dos horizontales rompe el renglón entero, y * estas fotos las manda gente distinta con teléfonos distintos. */ .puestas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin-top:24px} @media (min-width:720px){.puestas{grid-template-columns:repeat(5,1fr);gap:18px 14px}} .puesta{margin:0} .puesta img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--papel-hondo); display:block} .puesta figcaption{font-family:var(--letra);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--humo);margin-top:7px;line-height:1.4} /* Dentro de una ficha van más grandes y menos: ahí ya se está mirando ESA pieza. */ .bloque-puestas{border-top:1px solid var(--linea);padding-top:30px;margin-top:30px} .bloque-puestas h3{margin:0} .bloque-puestas .puestas{grid-template-columns:repeat(2,1fr);margin-top:18px} @media (min-width:720px){.bloque-puestas .puestas{grid-template-columns:repeat(3,1fr)}} /* ══ EL MURO DE INSTAGRAM (2026-09-09) ═════════════════════════════════════ * * ⚠️ CON LA CARA DE LA TIENDA, no imitando la pantalla de Instagram: ni marco de * teléfono, ni barra azul, ni corazoncitos. Es una cuadrícula de fotos cuadradas * sobre el mismo papel, como todo lo demás de esta página. */ .ig-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:24px} @media (min-width:720px){.ig-rej{gap:10px}} .ig-foto{display:block;position:relative;overflow:hidden;background:var(--papel-hondo)} .ig-foto img{width:100%;aspect-ratio:1;object-fit:cover;display:block; transition:transform .5s var(--sube)} a.ig-foto:hover img{transform:scale(1.04)} /* mientras baja la lista, y cuando no hay nada que enseñar */ .hueso{background:var(--papel-hondo);animation:latir 1.4s ease-in-out infinite} @keyframes latir{0%,100%{opacity:1}50%{opacity:.45}} .hueso-nombre{height:15px;width:70%;margin-top:12px} .hueso-precio{height:12px;width:45%;margin-top:8px} .vacio{padding:56px 0;text-align:center;color:var(--humo-lee)} .vacio b{display:block;font-family:var(--titulo);font-size:22px;font-weight:400;color:var(--tinta);margin-bottom:8px} /* ── Cómo se hace ────────────────────────────────────────────────────── */ .pasos{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--linea)} .paso{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--linea)} .paso .n{font-family:var(--letra);font-size:11px;letter-spacing:.14em;color:var(--oro-tinta);padding-top:5px} .paso h4{margin:0 0 4px;font-size:19px;font-weight:400} .paso p{margin:0;color:var(--humo-lee);font-size:16px} /* ── Banda oscura: así llega ─────────────────────────────────────────── */ .banda{background:var(--noche);color:var(--noche-tinta);margin-top:20px} .banda .env{padding-top:56px;padding-bottom:56px} .banda-rej{display:grid;gap:30px;align-items:center} @media (min-width:820px){.banda-rej.con-foto{grid-template-columns:1fr 1fr;gap:54px}} .banda h2{color:var(--noche-tinta);margin-top:6px;font-size:clamp(25px,5vw,34px);font-weight:700;letter-spacing:-.015em} .banda p{color:var(--noche-humo)} /* el oro CLARO: sobre fondo oscuro el de texto (--oro-tinta) se apaga */ .banda .eti{color:var(--oro)} .banda img{aspect-ratio:4/3;object-fit:cover;width:100%} .garantias{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--noche-linea)} .gar{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--noche-linea)} .gar svg{width:20px;height:20px;flex:none;margin-top:3px;fill:none;stroke:var(--oro);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .gar b{display:block;font-weight:400;font-size:17px} .gar span{color:var(--noche-humo);font-size:15px} /* ── «Véalas puestas»: la banda de las redes (2026-09-09) ───────────────── Reusa la banda oscura que la tienda ya tiene; lo único propio son los dos botones. Se esconde entera si no hay ninguna red puesta. */ .banda-puestas{background:var(--noche);color:var(--noche-tinta);margin-top:20px} .banda-puestas .env{padding-top:52px;padding-bottom:52px} .banda-puestas .eti{color:var(--oro)} .banda-puestas h2{color:var(--noche-tinta);margin:6px 0 10px; font-size:clamp(25px,5vw,34px);font-weight:700;letter-spacing:-.015em} .banda-puestas p{color:var(--noche-humo);margin:0 0 26px;max-width:34em} .banda-puestas-btns{display:flex;flex-wrap:wrap;gap:12px} .banda-puestas .btn{display:inline-flex;align-items:center;gap:9px} /* ⚠️ El hueco va sobre la banda oscura, así que el botón de contorno lleva SU línea, no la clara del papel: con `--linea` desaparecería. */ .banda-puestas .btn.hueco{color:var(--noche-tinta);border-color:var(--noche-linea)} .banda-puestas .btn.hueco:hover{border-color:var(--oro)} .banda-puestas .btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .banda-puestas .btn svg .lleno{fill:currentColor;stroke:none} /* ── Los tres iconos del pie ────────────────────────────────────────────── ⚠️ Miden 40 px de zona de toque a propósito: `pruebas/tienda-escaparate.js` marca cualquier botón o enlace visible de menos de 40 como «muy chico para el dedo», y esta es de las pocas cosas que se tocan en el pie. */ .redes{display:flex;align-items:center;gap:9px;margin-top:16px;flex-wrap:wrap} .red{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea); display:inline-flex;align-items:center;justify-content:center;flex:none; color:var(--tinta);transition:border-color .14s ease,color .14s ease} .red:hover{border-color:var(--oro-tinta);color:var(--oro-tinta)} .red svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .red svg .lleno{fill:currentColor;stroke:none} .redes-arroba{font-size:14px;color:var(--humo);margin-left:4px} /* ── Pie ─────────────────────────────────────────────────────────────── */ .pie{border-top:1px solid var(--linea);margin-top:10px} .pie .env{padding-top:44px;padding-bottom:30px} .pie-rej{display:grid;gap:28px} @media (min-width:700px){.pie-rej{grid-template-columns:1.4fr 1fr 1fr}} .pie h5{margin:0 0 10px;font-family:var(--letra);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--humo);font-weight:500} .pie ul{list-style:none;margin:0;padding:0;display:grid;gap:7px} .pie a{text-decoration:none;color:var(--tinta);font-size:16px} .pie a:hover{color:var(--oro-tinta)} .pie small{display:block;margin-top:30px;color:var(--humo);font-family:var(--letra);font-size:11px;line-height:1.9} /* ── Hoja (ficha / pedido) ───────────────────────────────────────────── */ .hoja{ position:fixed;inset:0;z-index:200;background:var(--papel); overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateY(100%);visibility:hidden; transition:transform .34s var(--sube),visibility .34s; } .hoja.abierta{transform:none;visibility:visible} .hoja-barra{position:sticky;top:0;z-index:5;background:var(--papel);border-bottom:1px solid var(--linea-fina)} .hoja-barra-in{display:flex;align-items:center;gap:12px;height:56px;max-width:var(--ancho);margin:0 auto;padding:0 14px} .hoja-barra .t{font-family:var(--letra);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--humo)} .hoja-cuerpo{max-width:var(--ancho);margin:0 auto;padding:0 20px 170px} .ficha-rej{display:grid;gap:26px} @media (min-width:860px){.ficha-rej{grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-top:22px} .ficha-izq{position:sticky;top:78px}} .ficha-foto{position:relative;background:var(--papel-hondo);aspect-ratio:1;overflow:hidden} .ficha-foto img,.ficha-foto video{width:100%;height:100%;object-fit:cover;background:var(--papel-hondo)} .tiras{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scrollbar-width:none} .tiras::-webkit-scrollbar{display:none} .tira{flex:none;width:62px;height:62px;padding:0;border:1px solid var(--linea);background:var(--papel-hondo);overflow:hidden;position:relative} .tira img{width:100%;height:100%;object-fit:cover} .tira[aria-pressed="true"]{border-color:var(--oro)} .tira .play{position:absolute;inset:0;display:grid;place-items:center;color:#FFFFFF; background:rgba(0,0,0,.35);font-size:15px} .ficha h2{font-size:clamp(28px,7vw,40px);font-weight:700;letter-spacing:-.02em;margin:18px 0 6px;text-wrap:balance} .ficha .desc{color:var(--humo-lee);margin:0 0 4px;max-width:34em;white-space:pre-line} .tambien{margin-top:48px;padding-top:32px;border-top:1px solid var(--linea)} .tambien h3{font-size:20px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em} .tambien-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:26px 16px} .tambien-rej .pieza h3{font-size:15px;margin:0} .tambien-rej .pieza-foto{margin-bottom:9px} .campo{padding:22px 0;border-top:1px solid var(--linea)} .campo-tit{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px} .campo-tit .val{font-family:var(--letra);font-size:12px;color:var(--tinta)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ padding:11px 16px;border:1px solid var(--linea);background:none; font-family:var(--letra);font-size:12px;letter-spacing:.06em;color:var(--humo); transition:border-color .16s,color .16s,background .16s;min-width:56px;min-height:44px;text-align:center; } .chip[aria-pressed="true"]{border-color:var(--tinta);color:var(--tinta);background:var(--papel-hondo);font-weight:600} .par{display:grid;grid-template-columns:1fr 1fr;gap:14px} .par .quien{font-family:var(--letra);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo);margin-bottom:8px} select,input[type=text],textarea{ width:100%;padding:13px;border:1px solid var(--linea);background:var(--papel);color:var(--tinta); font-family:var(--letra);font-size:16px;border-radius:0;-webkit-appearance:none;appearance:none;min-height:46px; } select{background-image:linear-gradient(45deg,transparent 50%,var(--humo) 50%),linear-gradient(135deg,var(--humo) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat} input::placeholder,textarea::placeholder{color:var(--humo);opacity:.8} .ayuda{margin:8px 0 0;font-size:14px;color:var(--humo-lee)} .ligera{background:none;border:none;padding:12px 0;min-height:44px;font-family:var(--letra);font-size:11.5px;letter-spacing:.06em; color:var(--oro-tinta);text-decoration:underline;text-underline-offset:3px} /* Un botón ligero que además lleva su dibujito (hoy solo el de WhatsApp, en «Cotizar una talla más grande»). ⚠️ El subrayado se quita SOLO cuando hay icono: con él puesto, la raya cruzaba por debajo del glifo y se veía como un tachón. En su lugar el texto lleva su propio borde. */ .ligera:has(svg){display:inline-flex;align-items:center;gap:8px;text-decoration:none} .ligera svg{width:15px;height:15px;flex:none} .ligera:has(svg) span{border-bottom:1px solid var(--oro);padding-bottom:1px} /* El aviso de la talla que no sale en la lista. Va pegado a los selectores, con su rayita de oro a la izquierda: es una salida, no una advertencia — por eso no usa ni el rojo ni el recuadro de un error. */ .talla-mas{border-left:2px solid var(--oro);padding:2px 0 2px 14px;margin-top:14px} .talla-mas .ayuda{font-size:13px} .talla-mas .ligera{padding-top:6px} .grab-fila{display:flex;gap:8px;align-items:center;margin-top:8px} .grab-fila input{min-width:0;flex:1} .cuenta{font-family:var(--letra);font-size:11px;color:var(--humo);white-space:nowrap;margin-top:6px} .inf{padding:9px 12px;border:1px solid var(--linea);font-family:var(--letra);font-size:15px;line-height:1;min-height:46px;min-width:46px} /* ── La ruta del pedido ─────────────────────────────────────────────── */ .ruta{margin:20px 0 0;padding:18px 16px 14px;background:var(--papel-hondo)} .ruta-titulo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .ruta-titulo b{font-weight:400;font-size:17px} .ruta-titulo .cuando{font-family:var(--letra);font-size:11.5px;color:var(--oro-tinta);font-weight:600;letter-spacing:.03em} .ruta-pasos{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:18px} .ruta-pasos::before,.ruta-pasos::after{content:'';position:absolute;top:6px;height:1px} .ruta-pasos::before{left:12.5%;right:12.5%;background:var(--linea)} .ruta-pasos::after{left:12.5%;width:var(--avance,0%);background:var(--oro);transition:width .4s var(--sube)} .rp{text-align:center;position:relative} .rp .punto{width:13px;height:13px;border-radius:50%;border:1px solid var(--linea);background:var(--papel); margin:0 auto 9px;position:relative;z-index:1;transition:background .3s,border-color .3s} .rp.hecho .punto{background:var(--oro);border-color:var(--oro)} .rp.ahora .punto{border-color:var(--oro);box-shadow:0 0 0 3px var(--oro-tenue)} .rp span{font-family:var(--letra);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--humo);display:block} .rp.hecho span,.rp.ahora span{color:var(--tinta)} .ruta-nota{margin:14px 0 0;font-size:14.5px;color:var(--humo-lee)} .acord{border-top:1px solid var(--linea)} .acord summary{list-style:none;cursor:pointer;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:17px} .acord summary::-webkit-details-marker{display:none} .acord summary::after{content:'+';font-family:var(--letra);color:var(--oro-tinta);font-size:17px} .acord[open] summary::after{content:'–'} .acord p{margin:0 0 17px;color:var(--humo-lee);font-size:16px} /* barra de precio: el corazón de la ficha */ .precio-barra{ position:fixed;left:0;right:0;bottom:0;z-index:210; background:var(--papel);border-top:1px solid var(--linea); transform:translateY(110%);transition:transform .3s var(--sube); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -14px 40px -24px var(--sombra-tono); } .precio-barra.arriba{transform:none} /* ⚠️⚠️ LA CIFRA DE LA BARRA ESPERA SU TURNO (2026-09-09). * * El precio vive arriba, con sus tres palomas; esta cifra solo entra cuando el * de arriba se va de la pantalla, y la enciende `vigilarPrecioAlto()`. Dos * cosas que no se pueden cambiar sin romper algo: * * · **Los BOTONES no cuelgan de esto.** En la tienda abierta el bloque de * arriba no lleva botón (`fichaBoton` sale vacío), así que esconder la barra * entera dejaría la ficha sin «Lo quiero así». Aquí solo se esconde la mitad * de la cifra. * · Se abre con `grid-template-rows` y no con `display:none` para que la barra * no dé un tirón ni empuje los botones. Donde el navegador no entienda el * `0fr`, la cifra aparece de golpe: se ve peor, no se rompe. */ .precio-cifra-caja{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .24s var(--sube),opacity .18s ease} .precio-cifra-caja > div{overflow:hidden;min-height:0} .precio-barra.cifra-fuera .precio-cifra-caja{grid-template-rows:1fr;opacity:1} /* Sin la cifra a la vista, el hueco entre ella y los botones tampoco. */ .precio-barra:not(.cifra-fuera) .precio-barra-in{gap:0} .precio-barra-in{max-width:var(--ancho);margin:0 auto;padding:13px 20px 15px;display:grid;gap:12px} @media (min-width:720px){.precio-barra-in{grid-template-columns:1fr auto;align-items:center}} .precio-cifra{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .precio-cifra .n{font-family:var(--titulo);font-size:29px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1} .precio-cifra .u{font-family:var(--letra);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo)} .precio-detalle{font-family:var(--letra);font-size:11px;color:var(--humo);letter-spacing:.04em;margin-top:2px;transition:opacity .14s ease} .precio-detalle b{color:var(--oro-tinta);font-weight:600} .precio-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media (min-width:720px){.precio-botones{grid-template-columns:auto auto}} /* En modo catálogo hay UN solo botón. En el celular ocupa el ancho entero —es la única salida de la pantalla, no debe quedar a medias— y en computadora se queda del tamaño de su texto, como los otros. */ .precio-botones.solo{grid-template-columns:1fr} @media (min-width:720px){.precio-botones.solo{grid-template-columns:auto}} /* ⚠️ Aquí vivían `.saltando` y `@keyframes salto`. Se fueron el 2026-09-09: se buscaron en toda la tienda y NO LOS USABA NADIE. Se borran para que nadie los vuelva a enganchar creyendo que hacen falta. Están en git. */ /* ── Resumen del pedido ──────────────────────────────────────────────── */ .res-caja{border:1px solid var(--linea);padding:20px;margin-top:22px} .res-fila{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-family:var(--letra);font-size:13px} .res-fila span:first-child{color:var(--humo);letter-spacing:.04em} .res-fila.tot{border-top:1px solid var(--linea);margin-top:8px;padding-top:14px;font-size:15px;font-weight:600} .pago{border:1px solid var(--oro);background:var(--oro-tenue);padding:18px;margin-top:18px} .pago h4{margin:0 0 6px;font-weight:400;font-size:19px} .pago p{margin:0;color:var(--humo-lee);font-size:15px} .pago .cif{font-family:var(--titulo);font-size:26px;font-weight:600;color:var(--oro-tinta);display:block;margin:10px 0 4px} /* ── Los datos de quien compra ───────────────────────────────────────── */ /* Dos columnas donde cabe y una donde no. Los campos largos (nombre, calle, referencias) cruzan las dos: partirlos a la mitad los vuelve ilegibles. */ .pago-campos{display:grid;grid-template-columns:1fr;gap:14px} .pago-campo{display:flex;flex-direction:column;gap:5px} .pago-campo.ancho2{grid-column:1/-1} .pago-campo span{font-family:var(--letra);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--humo)} .pago-campo input{ font-family:var(--letra);font-size:16px;color:var(--tinta);background:transparent; border:0;border-bottom:1px solid var(--linea);padding:10px 2px;min-height:44px; } .pago-campo input:focus{outline:none;border-bottom-color:var(--oro)} @media (min-width:560px){ .pago-campos{grid-template-columns:1fr 1fr} } /* ── Avisos ──────────────────────────────────────────────────────────── */ .aviso{ position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:300; max-width:calc(100vw - 32px);padding:12px 18px;background:var(--noche);color:var(--noche-tinta); font-family:var(--letra);font-size:12px;letter-spacing:.04em;text-align:center; box-shadow:0 14px 40px -18px var(--sombra-tono); } .cinta{background:var(--oro-tenue);border-bottom:1px solid var(--linea)} .cinta p{margin:0;padding:10px 20px;text-align:center;font-family:var(--letra);font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--oro-tinta)} @media (min-width:860px){ /* La portada NO lleva gap ni padding: son dos mitades a sangre. Lo que había aquí les metía 48px de papel claro EN MEDIO y soltaba el panel oscuro del alto de la foto — a 859px se veía bien y a 860 saltaba. */ .hero-dentro{padding-right:12px} } /* ══════════════════════════════════════════════════════════════════════ LO NUEVO DEL 2026-09-07 — el rediseño para abrir al público. Cada bloque dice qué problema resuelve; los porqués largos viven en `TIENDA-ABIERTA-PENDIENTE.md`. ══════════════════════════════════════════════════════════════════════ */ /* ── Con qué se está tocando ────────────────────────────────────────────── `data-toque` en el cuando el último toque fue con el DEDO. De ahí cuelga todo lo que solo tiene sentido con cursor. ⚠️ NUNCA `@media (hover:hover)`: en un iPad con teclado o con lápiz esa consulta dice «aquí no hay cursor» y apagaría cosas a quien sí lo tiene. Es la misma regla que el panel tiene escrita desde el 2026-08-30. El CSS DESHACE el hover repitiendo el estado de reposo, así que una regla nueva solo hay que sumarla a esta lista. */ html[data-toque] .pieza:hover .pieza-foto img{transform:none} html[data-toque] .pieza.con-color:hover .pieza-f2{opacity:0} html[data-toque] .gotas.vivas .gota:hover{transform:none} /* ── El menú de arriba ──────────────────────────────────────────────────── */ .cat .caret{font-size:9px;color:var(--humo);margin-left:5px;vertical-align:1px} /* ⚠️⚠️ AQUÍ VIVÍA `.cats-in{position:relative}`, Y ERA LO QUE ROMPÍA EL MENÚ. * * `.cats-in` pide `overflow-x:auto` para que la tira de categorías se deslice de * lado en el celular. Lo que casi nadie tiene presente es que **el navegador * computa el otro eje a `auto` también**: una caja que se desliza de lado * RECORTA hacia abajo. Y como además era el bloque contenedor, el `.colmenu` * con su `top:100%` nacía justo donde termina la tira, o sea entero del lado de * fuera: se dibujaba completo (230×95), no se veía y no se podía tocar. * * Ahora cuelga de `.cats`, que ya es `position:relative` (más arriba) y NO se * desliza. De paso deja de irse de lado cuando alguien arrastra las categorías. * * Es el mismo defecto que el menú «⋯» de 💬 Mensajes del panel, cazado el * 2026-08-29. La regla que quedó entonces vale igual aquí: **un menú que cuelga * de una tira que se desliza no puede vivir DENTRO de esa tira.** */ /* Las colecciones, colgadas de «Colecciones ▾» */ .colmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:30; background:var(--papel);border:1px solid var(--linea);border-radius:2px; box-shadow:0 10px 34px var(--sombra-tono);padding:6px;min-width:230px;text-align:left} .colmenu button{display:flex;justify-content:space-between;align-items:baseline;gap:14px; width:100%;border:0;background:none;padding:9px 12px;cursor:pointer; font:inherit;font-size:14px;color:var(--tinta);text-align:left} .colmenu button:hover{background:var(--papel-hondo)} .colmenu button i{font-style:normal;font-size:11.5px;color:var(--humo)} /* ── La barra de filtros ────────────────────────────────────────────────── */ .filtros{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea); background:var(--papel);margin-top:22px} .filtros-in{max-width:var(--ancho);margin:0 auto;padding:16px 20px;display:flex; gap:26px;align-items:flex-start;flex-wrap:wrap} .fgrupo{display:flex;flex-direction:column;gap:7px} .fgrupo .eti{color:var(--humo)} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{border:1px solid var(--linea);background:transparent;color:var(--humo-lee); padding:6px 13px;border-radius:99px;font-size:12.5px;cursor:pointer; display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:inherit} .chip:hover{border-color:var(--oro);color:var(--tinta)} .chip[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)} .chip[aria-pressed="true"] .n{color:rgba(253,251,247,.6)} .chip .n{font-size:11px;color:var(--humo)} .chip .gota{width:11px;height:11px} .cuenta-fila{display:flex;justify-content:space-between;align-items:baseline; gap:14px;flex-wrap:wrap;padding-top:26px;padding-bottom:14px} .cuenta-fila .n{font-size:13.5px;color:var(--humo)} .cuenta-fila .n b{color:var(--tinta);font-weight:600} /* ⚠️ `min-height:40px` y no más relleno a ojo: es el mínimo que exige `tienda-escaparate.js` para cualquier botón que se toca con el dedo, y este salía en 30 px en las doce pantallas que barre. */ .orden{border:1px solid var(--linea);background:transparent;color:var(--humo-lee); display:inline-flex;align-items:center;min-height:40px; padding:7px 13px;border-radius:2px;font-size:12.5px;cursor:pointer;font-family:inherit} .orden:hover{border-color:var(--oro);color:var(--tinta)} /* ── Las muestras del color del oro ───────────────────────────────────── Cinco degradados dibujados, sin una sola imagen. ⚠️ `background-image` y NUNCA el atajo `background`: el atajo reinicia `background-clip` a `border-box`, y con el borde transparente que hace de zona de toque el degradado se pintaría sobre ella — la gota saldría del doble de grande. Es la misma trampa que ya costó en `.btn` del panel. */ .gotas{display:flex;gap:5px;margin-top:8px} .gota{width:13px;height:13px;border-radius:99px;border:1px solid var(--linea-fina); background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);flex:none} .g-amarillo{background-image:linear-gradient(135deg,#E8C877,#C69B3A)} .g-blanco{background-image:linear-gradient(135deg,#F2F1EE,#C9C7C1)} .g-rosa{background-image:linear-gradient(135deg,#EFC3AE,#CE9077)} .g-dos{background-image:linear-gradient(115deg,#E8C877 48%,#DEDCD7 52%)} .g-florentino{background-image:repeating-linear-gradient(48deg,#DFC492 0 2px,#C0A164 2px 4px)} /* Las que se tocan, en la tarjeta. Miden 13 px a la vista y 21 de zona de toque, con borde transparente + `background-clip` — la receta del panel: agranda lo que se toca sin cambiar lo que se ve. */ .gotas.vivas{gap:1px;margin-left:-4px} .gotas.vivas .gota{width:21px;height:21px;border:4px solid transparent; cursor:pointer;position:relative;transition:transform .18s var(--sube)} .gotas.vivas .gota:hover{transform:scale(1.18)} .gotas.vivas .gota.aqui::after{content:"";position:absolute;inset:-2px; border-radius:99px;border:1px solid var(--oro-tinta)} /* La segunda foto de una tarjeta, encima y apagada */ .pieza-f2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .5s var(--sube)} .pieza.con-color:hover .pieza-f2{opacity:1} /* ⚠️ Las tarjetas arrancan TODAS arriba. Una tarjeta es un