/* ========================================================================== PERFUMASTE — CSS PRINCIPAL Capas `components` y `views` extraidas del prototipo, sin tocar. ⚠️ GENERADO DESDE diseno/perfumaste-tema.html. No editar a mano. Se excluye la capa `chrome`, que era la barra de la maqueta. ========================================================================== */ @layer components { /* ---- Cabecera: UNA barra (hoy son cuatro, 229px) ---- */ /* ---- SIGNATURE: sello de verificación ---- */ .sello { position: relative; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); padding: var(--s4) var(--s4) var(--s3); } .sello__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 1px solid var(--hilo); } .sello__tit { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); } .sello__marca { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--rojo); border-radius: 50%; color: var(--rojo); font-family: var(--dato); font-size: 8px; letter-spacing: .04em; line-height: 1.05; text-align: center; transform: rotate(-8deg); animation: estampar .5s cubic-bezier(.2,.9,.3,1.2) both; } @keyframes estampar { from { opacity: 0; transform: rotate(-8deg) scale(1.5); } to { opacity: 1; transform: rotate(-8deg) scale(1); } } .sello__fila { display: flex; gap: var(--s3); justify-content: space-between; padding-block: 5px; font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; } .sello__k { color: var(--humo); text-transform: uppercase; } .sello__v { color: var(--tinta); text-align: right; } .sello__pie { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hilo); font-size: .875rem; line-height: 1.45; color: var(--tinta); } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 52px; padding-inline: var(--s6); background: var(--tinta); color: var(--papel); border-radius: var(--r-md); font-size: .95rem; font-weight: 600; letter-spacing: -.005em; text-decoration: none; transition: background .18s ease; } .btn:hover { background: #2C2F29; } .btn--full { width: 100%; } .btn--fantasma { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); } .btn--fantasma:hover { background: rgba(26,28,24,.06); } .btn--quieto { height: 44px; font-weight: 500; background: transparent; color: var(--tinta); border: 1px solid var(--hilo); } .btn--quieto:hover { background: var(--blanco); border-color: var(--humo); } /* ---- Tarjeta de producto ---- */ /* Sin caja: la foto es una plancha blanca contenida y la información respira sobre el papel. Blanco sobre blanco no separaba nada. */ /* ⚠️ `min-width:0` NO ES DECORATIVO — SIN EL, UNA FOTO ROTA TUMBA LA REJILLA. Medido en produccion el 2026-08-10 en /categoria-producto/perfumes-para-mujer/: una sola foto que fallo al cargar (la lazyload le pone la clase `error`) perdio su tamaño intrinseco y se estiro a 3.340 px. Como una tarjeta de rejilla trae de fabrica `min-width:auto`, esa anchura se convirtio en el minimo de su columna: la pista paso de 356 px a 3.002 px, las otras dos se quedaron en 127 px y el catalogo entero se vio como UNA columna estrecha con el resto en blanco. Es exactamente el fallo que reporto el dueño. Con `min-width:0` aqui y `minmax(0,1fr)` en las pistas (ver `.cat__grid` y `.grid3`), el contenido ya no puede empujar su columna: la foto rota deja un hueco blanco de su tamaño normal y las otras 23 tarjetas siguen bien. */ .card { display: flex; flex-direction: column; min-width: 0; } .card__media { position: relative; aspect-ratio: 3/4; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; padding: 11%; /* Segundo cinturon: aunque algo dentro se desborde, no sale del marco. */ overflow: hidden; transition: border-color .18s ease; } .card:hover .card__media { border-color: var(--humo); } /* Foto de producto: multiply funde el fondo blanco del packshot con el papel */ /* Fondo blanco real: sin mix-blend-mode, que era frágil con packshots de fondo no-blanco y se rompía con cualquier contexto de apilamiento. */ /* `max-*` ademas de `width/height`: cuando la imagen no carga, los porcentajes se resuelven contra un tamaño indefinido y el navegador cae en el tamaño intrinseco. Los topes lo cortan en seco. */ .foto { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .card__cuerpo { padding: var(--s4) 2px 0; display: flex; flex-direction: column; gap: var(--s2); flex: 1; } /* La MARCA manda: es lo que el cliente busca */ .card__marca { font-family: var(--dato); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta); } .card__meta { color: var(--humo); } .card__nom { font-size: .95rem; font-weight: 500; line-height: 1.3; } .card__ml { font-family: var(--dato); font-size: 9.5px; letter-spacing: .05em; color: var(--humo); } .card__val { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--humo); } .card__precio { margin-top: auto; padding-top: var(--s2); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; } .card__ahora { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; } .card__antes { font-size: .8rem; color: var(--humo); text-decoration: line-through; } .card__ahorro { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; color: var(--laca); } .card__ok { display: flex; align-items: center; gap: 5px; font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .card__ok::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rojo); } .logo { height: 54px; width: auto; } @media (min-width: 760px) { .logo { height: 66px; } } .foot .logo { height: 72px; } /* ---- Tira de evidencia ---- */ /* Banda a todo el ancho: fondo, filetes y celdas comparten los mismos bordes. Nada se corta a media página. */ .evid { background: var(--blanco); border-block: 1px solid var(--hilo); } .evid__in { display: grid; grid-template-columns: repeat(2, 1fr); } /* Cada cifra es verificable: lleva a la evidencia que la sostiene */ .evid__i { display: block; padding: var(--s4) var(--s3); text-align: center; text-decoration: none; border-right: 1px solid var(--hilo); border-bottom: 1px solid var(--hilo); transition: background .2s ease; } .evid__i:nth-child(2n) { border-right: 0; } .evid__i:nth-last-child(-n+2) { border-bottom: 0; } .evid__i:hover { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); } .evid__n { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; transition: color .2s ease; } .evid__i:hover .evid__n { color: var(--laca); } .evid__l { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .evid__mas { display: block; margin-top: 7px; font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--laca); } .evid__mas::after { content: " →"; } @media (min-width: 760px) { .evid__in { grid-template-columns: repeat(4, 1fr); } .evid__i { padding: var(--s6) var(--s4); border-bottom: 0; } .evid__i:nth-child(2n) { border-right: 1px solid var(--hilo); } .evid__i:last-child { border-right: 0; } .evid__n { font-size: 2rem; } /* El enlace se insinúa solo cuando hay intención */ .evid__mas { opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; } .evid__i:hover .evid__mas, .evid__i:focus-visible .evid__mas { opacity: 1; transform: none; } } /* ---- Familias olfativas: la navegación por metas del cliente ---- */ .fam { display: flex; gap: var(--s2); flex-wrap: wrap; } .fam__c { display: inline-flex; align-items: baseline; gap: var(--s2); padding: 9px 15px; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-pill); text-decoration: none; font-size: .9rem; transition: border-color .15s ease; } .fam__c:hover { border-color: var(--tinta); } .fam__c i { font-family: var(--dato); font-size: 9px; letter-spacing: .05em; color: var(--humo); font-style: normal; } /* Variante compacta del lanzamiento: para tendencias dentro del flujo */ .lanza--tendencia { margin-block: 0; } .lanza--tendencia .lanza__panel { padding-block: var(--s6); } .lanza--tendencia .lanza__marca { font-size: clamp(1.5rem, 3.4vw, 2.1rem); } .lanza--tendencia .lanza__nombre { font-size: clamp(1.9rem, 4vw, 2.7rem); } .lanza--tendencia .lanza__meta { margin-bottom: var(--s6); } @media (min-width: 900px) { .lanza--tendencia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lanza--tendencia .lanza__vis { order: -1; } /* alterna el lado: ritmo de revista */ .lanza--tendencia .lanza__panel { padding: var(--s7); } } /* ---- Las casas: tipografía, no logos placeholder ---- */ .casas { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--hilo); border-left: 1px solid var(--hilo); } @media (min-width: 640px) { .casas { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 940px) { .casas { grid-template-columns: repeat(5, 1fr); } } .casa { display: grid; place-items: center; gap: 3px; padding: var(--s5) var(--s3); min-height: 96px; border-right: 1px solid var(--hilo); border-bottom: 1px solid var(--hilo); text-decoration: none; text-align: center; transition: background .15s ease; } .casa:hover { background: var(--blanco); } .casa b { font-weight: 600; font-size: .95rem; letter-spacing: .02em; } .casa span { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .sec { padding-block: var(--s8); } .sec__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); } .sec__t { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.02em; } .sec__v { font-size: .875rem; color: var(--humo); text-decoration: none; border-bottom: 1px solid var(--hilo); padding-bottom: 2px; white-space: nowrap; } .sec__v:hover { color: var(--tinta); border-bottom-color: var(--rojo); } .grid3 { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 860px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } } .foot { background: var(--tinta); color: #C9CCC5; padding-block: var(--s8) var(--s6); margin-top: var(--s9); } .foot a { color: #C9CCC5; text-decoration: none; font-size: .875rem; } .foot a:hover { color: var(--blanco); } .foot__g { display: grid; gap: var(--s6); grid-template-columns: 1fr; } /* CUATRO columnas: la marca manda y las otras tres reparten el ancho. Con tres quedaba un hueco muerto en el centro (2026-08-09). */ @media (min-width: 760px) { .foot__g { grid-template-columns: 1.6fr .9fr .9fr 1.1fr; gap: var(--s7) var(--s6); } } .foot__g > div { min-width: 0; } /* El subrayado nace bajo la palabra al pasar: gesto editorial, no boton. */ .foot__l a { position: relative; } .foot__l a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.16,.84,.44,1); } .foot__l a:hover::after { transform: scaleX(1); } .foot__c { gap: var(--s4); } .foot__wa { display: flex; align-items: center; gap: var(--s3); } .foot__wa b { display: block; font-weight: 600; } .foot__wa-n { display: block; font-size: .8rem; color: #7E837A; } .foot__wa::after { display: none; } /* el subrayado no le sienta a un bloque */ .foot__wa-p { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(240,238,234,.22); background: no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9CCC5'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 15L2 22l5.2-1.3A10 10 0 1 0 12 2zm5.5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1-1.4-1-2.6 0-1.2.6-1.8.9-2 .2-.3.5-.3.6-.3h.5c.2 0 .4-.1.6.4l.8 2c.1.2.1.3 0 .5l-.3.5-.3.3c-.1.1-.3.3-.1.6.1.3.6 1.1 1.4 1.8 1 .8 1.7 1.1 2 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.5-.1l1.9.9c.2.1.4.2.4.3.1.1.1.5-.1 1z'/%3E%3C/svg%3E"); transition: border-color .25s ease; } .foot__wa:hover .foot__wa-p { border-color: rgba(240,238,234,.5); } .foot__t { font-family: var(--dato); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #7E837A; margin-bottom: var(--s3); } .foot__l { list-style: none; padding: 0; display: grid; gap: 9px; } } @layer views { /* ====== BANNER DE LANZAMIENTO ====== Componente reutilizable. La MARCA es la portada; Perfumaste firma como editor. Se replica a lo largo del sitio para tendencias y novedades. */ .lanza { display: grid; background: var(--tinta); color: var(--papel); isolation: isolate; } /* 50/50 exacto: el corte entre paneles cae sobre el mismo eje que el divisor central de la banda de cifras. */ @media (min-width: 900px) { .lanza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .lanza__panel { padding: var(--s6) var(--s5) var(--s7); display: flex; flex-direction: column; } @media (min-width: 900px) { .lanza__panel { padding: var(--s7) var(--s8); justify-content: center; } } .lanza__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; padding-bottom: var(--s4); margin-bottom: var(--s7); border-bottom: 1px solid rgba(240,238,234,.18); font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,238,234,.62); } .lanza__editor { display: inline-flex; align-items: center; gap: var(--s2); } .lanza__editor img { height: 26px; width: auto; } /* Cabecera de la marca — convención del género: versales con tracking abierto */ .lanza__marca { font-family: var(--texto); font-weight: 700; font-size: clamp(1.9rem, 5.4vw, 3.1rem); letter-spacing: .17em; text-transform: uppercase; line-height: 1; margin-right: -.17em; } .lanza__kicker { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); font-family: var(--dato); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--papel); } .lanza__kicker::before { content: ""; width: 34px; height: 2px; background: var(--rojo); flex: none; } .lanza__nombre { font-size: clamp(2.5rem, 6.4vw, 4.1rem); margin-top: var(--s3); max-width: 11ch; } .lanza__desc { margin-top: var(--s4); color: rgba(240,238,234,.76); max-width: 40ch; font-size: .975rem; } .lanza__datos { display: flex; gap: var(--s5); flex-wrap: wrap; align-items: baseline; margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(240,238,234,.18); } .lanza__precio { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; } .lanza__ficha { font-family: var(--dato); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(240,238,234,.62); } .lanza__cta { margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; } .btn--claro { background: var(--papel); color: var(--tinta); } .btn--claro:hover { background: #FFF; } .lanza__garantia { display: inline-flex; align-items: center; gap: var(--s2); font-size: .875rem; color: rgba(240,238,234,.8); } .lanza__garantia::before { content: "100%"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--rojo); border-radius: 50%; font-family: var(--dato); font-size: 7px; color: #E8767C; transform: rotate(-8deg); } /* El sujeto va en su propia plancha clara: así el packshot funde y el negro respira */ .lanza__vis { order: -1; /* móvil: el producto primero, es el gancho del lanzamiento */ position: relative; overflow: hidden; background: var(--blanco); display: grid; place-items: center; padding: var(--s6) var(--s5); isolation: isolate; } /* La luz recorre la plancha: es lo que hace un cristal lacado bajo un foco. Sin humo, sin destellos, sin partículas — eso es el cliché del sector. */ .lanza__vis::after { content: ""; position: absolute; inset: -40% -10%; background: linear-gradient(102deg, transparent 40%, rgba(255,255,255,.72) 50%, transparent 60%); pointer-events: none; z-index: 2; animation: recorrido 9s cubic-bezier(.45,0,.35,1) 1.4s infinite; } @keyframes recorrido { 0% { transform: translateX(-78%); opacity: 0; } 7% { opacity: 1; } 26% { transform: translateX(78%); opacity: 0; } 100% { transform: translateX(78%); opacity: 0; } } /* Sin position, z-index ni animación: los tres crean contexto de apilamiento y aislarían el multiply del packshot contra el degradado del panel. */ .lanza__foto { width: min(430px, 88%); } /* La entrada solo en modo fotografía, donde no hay fundido que preservar */ /* ⚠️ ANIMACION DE ENTRADA RETIRADA. El prototipo hacia entrar la foto del hero con `asienta`: opacidad de 0 a 1 y 16 px de desplazamiento hacia arriba, durante un segundo. Se leia como un descuadre, no como una entrada. Y ademas costaba: esa foto es el elemento LCP de la portada. Empezar en `opacity: 0` significa que el navegador no la cuenta como pintada hasta que termina de aparecer, asi que la animacion se sumaba entera a la metrica que estamos persiguiendo. Quitarla mejora las dos cosas a la vez. */ /* Paralaje: el frasco se despega del fondo al mover el cursor */ .lanza__foto img { width: 100%; height: auto; max-height: 38vh; object-fit: contain; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(var(--sc, 1)); transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; } .lanza__vis[data-activo] .lanza__foto img { transition: transform .12s linear; } @media (min-width: 900px) { .lanza__vis { order: 0; padding: var(--s7) var(--s6); } .lanza__foto { width: min(480px, 92%); } .lanza__foto img { max-height: none; } } /* Modo fotografía: imagen editorial a sangre, sin plancha ni fundido. Se activa añadiendo la clase --foto al panel. */ .lanza__vis--foto { padding: 0; background: none; } .lanza__vis--foto .lanza__foto { width: 100%; height: 100%; } .lanza__vis--foto .lanza__foto picture { display: block; width: 100%; height: 100%; } .lanza__vis--foto .lanza__foto img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 62% center; /* mantiene al sujeto en cuadro al recortar */ mix-blend-mode: normal; aspect-ratio: 4/5; } @media (min-width: 900px) { /* El panel es casi cuadrado y la foto 3:2: anclamos al sujeto, que está a la derecha del encuadre, y dejamos que se recorte el aire. */ .lanza__vis--foto .lanza__foto img { aspect-ratio: auto; object-position: 72% center; } } @media (min-width: 1500px) { .lanza__vis--foto .lanza__foto img { object-position: 60% center; } } /* Sobre fotografía real el barrido de luz se retira: la escena ya trae la suya, y superponer otra se lee como un defecto, no como un efecto. Queda el paralaje, que sí aporta profundidad. */ .lanza__vis--foto::after { display: none; } @media (prefers-reduced-motion: reduce) { .lanza__vis::after { animation: none; opacity: 0; } .lanza__foto img { transform: none; } } /* Encuadre con el sujeto a la izquierda (banner de imagen a la izquierda) */ .lanza__vis--izq .lanza__foto img { object-position: 38% center; } @media (min-width: 1500px) { .lanza__vis--izq .lanza__foto img { object-position: 45% center; } } /* ---- "Cómo sabes que es original": las tres pruebas de autenticidad ---- */ .como { background: var(--blanco); border-block: 1px solid var(--hilo); } .como__g { display: grid; gap: var(--s6); } @media (min-width: 860px) { .como__g { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } } .como__i { padding-top: var(--s4); border-top: 1px solid var(--hilo); } .como__i h3 { font-size: 1.05rem; margin-bottom: var(--s2); } .como__i p { font-size: .925rem; color: var(--humo); } .como__n { display: block; margin-bottom: var(--s3); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .09em; text-transform: uppercase; color: var(--laca); } /* ---- Placa de transacción ---- Con la galería en blanco, el bloque de compra necesita su propio peso. Una sola placa: precio, cuotas, certificado y botones separados por filetes. */ .compra { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); margin-top: var(--s5); } .compra__s { padding: var(--s5); border-bottom: 1px solid var(--hilo); } .compra__s:last-child { border-bottom: 0; } .compra__s--cert { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); } /* ====== CATÁLOGO ====== */ .cat { padding-block: var(--s5) var(--s8); } .cat__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-bottom: var(--s4); border-bottom: 1px solid var(--hilo); } .cat__t { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -.022em; } .cat__n { font-family: var(--dato); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--humo); } /* Facetas: familia, momento y clima como filtro principal — no solo marca */ .cat__facetas { display: grid; gap: var(--s5); padding-block: var(--s5); border-bottom: 1px solid var(--hilo); } @media (min-width: 760px) { .cat__facetas { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } } .faceta__t { font-family: var(--dato); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s3); } .faceta__o { display: flex; gap: 6px; flex-wrap: wrap; } .op { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-pill); font-size: .85rem; text-decoration: none; color: var(--tinta); transition: border-color .15s ease; } .op:hover { border-color: var(--humo); } .op[data-on] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); } .op i { font-family: var(--dato); font-size: 9px; font-style: normal; color: var(--humo); } .op[data-on] i { color: rgba(240,238,234,.7); } /* Filtros aplicados, retirables (66% de los sitios móviles no los muestra) */ .cat__aplicados { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding-block: var(--s4); } .cat__aplicados > span { font-family: var(--dato); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--humo); margin-right: var(--s2); } .quitar { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 13px; background: var(--tinta); color: var(--papel); border-radius: var(--r-pill); font-size: .8rem; } .quitar b { font-weight: 400; opacity: .65; } .cat__orden { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s4); border-bottom: 1px solid var(--hilo); font-size: .875rem; color: var(--humo); } .cat__grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--s6); } @media (min-width: 860px) { .cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } } /* ====== FICHA ====== */ .pdp { padding-block: var(--s5) var(--s8); } .pdp__g { display: grid; gap: var(--s6); } @media (min-width: 940px) { .pdp__g { grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: start; } } .pdp__mig { font-size: .8rem; color: var(--humo); margin-bottom: var(--s4); } .pdp__mig a { text-decoration: none; } /* Móvil: imagen arriba, miniaturas en fila debajo (nunca puntos) */ .pdp__gal { display: grid; gap: var(--s3); } .pdp__th { display: grid; grid-auto-flow: column; grid-auto-columns: 62px; gap: var(--s2); overflow-x: auto; min-width: 0; } .pdp__t { aspect-ratio: 1; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; min-width: 0; overflow: hidden; padding: 8%; } .pdp__t[aria-current="true"] { border-color: var(--tinta); } .pdp__big { order: -1; } @media (min-width: 640px) { .pdp__gal { grid-template-columns: 62px 1fr; } .pdp__th { grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: 62px; align-content: start; overflow-x: visible; } .pdp__big { order: 0; } } .pdp__big { aspect-ratio: 4/5; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; position: relative; padding: 7% 9%; } .pdp__ph { position: absolute; top: var(--s3); left: var(--s3); font-family: var(--dato); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--humo); } .pdp__nom { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144; font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.022em; line-height: 1.03; } .pdp__casa { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s3); } .pdp__val { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: .875rem; } .pdp__val a { color: var(--humo); } .estrellas { color: var(--tinta); letter-spacing: .08em; font-size: .8rem; } .pdp__precio { margin-top: var(--s5); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; } .pdp__ahora { font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; } .pdp__antes { color: var(--humo); text-decoration: line-through; } .pdp__ahorro { font-family: var(--dato); font-size: .7rem; letter-spacing: .05em; color: var(--laca); } .pdp__unit { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; color: var(--humo); margin-top: 6px; } .pdp__cuotas { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); font-size: .9rem; display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; } .pdp__cuotas b { font-weight: 600; } .pdp__cuotas i { font-style: normal; font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .pdp__compra { margin-top: var(--s5); display: grid; gap: var(--s3); } .pdp__fila { display: grid; grid-template-columns: 108px 1fr; gap: var(--s3); } .qty { display: flex; align-items: center; justify-content: space-between; height: 52px; padding-inline: var(--s3); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); } .qty span { font-size: .95rem; font-weight: 600; } .qty button { color: var(--humo); font-size: 1.1rem; line-height: 1; padding: 4px 6px; } .pdp__entrega { margin-top: var(--s4); font-size: .9rem; color: var(--tinta); } .pdp__entrega b { font-weight: 600; } /* ⚠️ LAS NOTAS VAN EN CHIPS, NO EN FILA INDIA (orden del dueno, 2026-08-08: "una lista muy larga para los productos que tienen muchos aromas... se pierde mucho"). Antes cada nota era una fila con su filete: un perfume de diez notas media medio metro de scroll y las notas —que son EL argumento de venta de un perfume— llegaban diluidas. En chips, diez notas son dos lineas que se leen de un golpe, y la placa blanca las levanta del marmol igual que a las fotos de las tarjetas. */ .notas { margin-top: var(--s7); } .notas__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s4); } .notas__l { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .notas__i { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-pill); padding: 7px 15px; font-size: .875rem; } .notas__n { font-weight: 600; letter-spacing: -.01em; } .notas__d { color: var(--humo); } /* ⚠️ FICHA TECNICA: FILAS, NO COLUMNAS. Aqui estuvo `.attr`, una rejilla de `repeat(4,1fr)`, y era el fallo. Con los cuatro datos se veia bien; con dos dejaba media rejilla vacia y con uno, una celda suelta flotando. Como el 37% del catalogo no tiene NINGUNO de estos atributos y el resto los tiene casi todos, la seccion salia distinta en cada ficha. Una tabla de filas se ve igual de intencionada con tres datos que con siete: cambia el numero de filas, no la forma. */ .ficha-t { margin-top: var(--s7); } .ficha-t__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin-bottom: var(--s4); } /* ⚠️ LA TABLA VIVE SOBRE UNA PLACA BLANCA (orden del dueno, 2026-08-08: "se pierde con el fondo sin diseño"). Las filas sueltas sobre el marmol se leian como texto perdido; la placa —la misma superficie blanca con filete de las tarjetas— le da un cuerpo que se recorta del fondo. El filete exterior lo pone la placa, asi que la primera fila ya no abre con borde. */ .ficha-t__l { margin: 0; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); padding: 4px var(--s5); } /* La etiqueta a la izquierda con ancho fijo y el valor alineado a la derecha: asi las etiquetas forman una columna limpia y los valores otra, aunque unos midan "Floral" y otros "Eau de Toilette". Mismo patron que `.sello__fila`. */ .ficha-t__f { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: var(--s4); align-items: baseline; padding-block: var(--s3); border-top: 1px solid var(--hilo); } .ficha-t__f:first-child { border-top: 0; } .ficha-t__k { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .ficha-t__v { margin: 0; font-size: .925rem; font-weight: 500; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* Los tres segmentos de intensidad, a lo ancho del valor y no de la fila: una barra que cruzara toda la ficha pesaria mas que el dato. */ .ficha-t__seg { display: flex; gap: 5px; width: 84px; } .ficha-t__seg i { height: 3px; flex: 1; background: var(--hilo); border-radius: 2px; } .ficha-t__seg i[data-on] { background: var(--tinta); } /* ====== PÁGINA DE MARCA ====== */ .casa-cab { background: var(--tinta); color: var(--papel); padding-block: var(--s7) var(--s8); } .casa-cab__meta { font-family: var(--dato); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(240,238,234,.6); } .casa-cab__n { font-family: var(--texto); font-weight: 700; font-size: clamp(2.4rem, 8vw, 5.2rem); letter-spacing: .12em; text-transform: uppercase; line-height: 1; margin: var(--s4) 0 0; margin-right: -.12em; } .casa-cab__g { display: grid; gap: var(--s6); margin-top: var(--s6); } @media (min-width: 860px) { .casa-cab__g { grid-template-columns: 1.35fr 1fr; gap: var(--s8); align-items: start; } } .casa-cab__txt { color: rgba(240,238,234,.8); font-size: 1.02rem; max-width: 52ch; } .casa-cab__datos { display: grid; gap: 0; } .casa-cab__f { display: flex; justify-content: space-between; gap: var(--s4); padding-block: 9px; border-top: 1px solid rgba(240,238,234,.18); font-family: var(--dato); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; } .casa-cab__f:last-child { border-bottom: 1px solid rgba(240,238,234,.18); } .casa-cab__f span:first-child { color: rgba(240,238,234,.6); } /* ====== CARRITO ====== */ .carro { padding-block: var(--s5) var(--s8); } .carro__g { display: grid; gap: var(--s6); } @media (min-width: 940px) { .carro__g { grid-template-columns: 1.5fr 1fr; gap: var(--s8); align-items: start; } } .barra { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); padding: var(--s4); margin-bottom: var(--s5); } .barra__t { font-size: .9rem; margin-bottom: var(--s3); } .barra__t b { font-weight: 600; } .barra__p { height: 4px; background: var(--hilo); border-radius: 4px; overflow: hidden; } .barra__p i { display: block; height: 100%; width: 72%; background: var(--tinta); } .barra--ok .barra__t b::before { content: "✓ "; color: var(--laca); } .item { display: grid; grid-template-columns: 78px 1fr; gap: var(--s4); padding-block: var(--s5); border-top: 1px solid var(--hilo); } .item__im { aspect-ratio: 3/4; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; padding: 8%; } .item__marca { font-family: var(--dato); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); } .item__nom { font-size: 1rem; font-weight: 500; margin-top: 3px; } .item__ml { font-family: var(--dato); font-size: 9.5px; letter-spacing: .05em; color: var(--humo); margin-top: 4px; } .item__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); } .qty--sm { height: 40px; width: 104px; } .item__precio { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; } .item__quitar { font-size: .8rem; color: var(--humo); text-decoration: underline; text-underline-offset: 3px; } /* Order bump — palanca nº1 de ticket medio */ .bump { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4); margin-top: var(--s5); background: var(--blanco); border: 1px dashed var(--humo); border-radius: var(--r-sm); } .bump__ck { width: 20px; height: 20px; flex: none; margin-top: 2px; border: 1.5px solid var(--tinta); border-radius: 3px; display: grid; place-items: center; font-size: 12px; color: var(--tinta); } .bump__t { display: block; font-weight: 600; font-size: .95rem; } .bump__d { display: block; font-size: .875rem; color: var(--humo); margin-top: 3px; } .bump__p { display: block; font-family: var(--dato); font-size: 10px; letter-spacing: .06em; color: var(--laca); margin-top: 6px; } /* ====== MINI-CARRITO (cajón lateral) ====== */ .fondo { position: fixed; inset: 0; background: rgba(28,23,20,.42); z-index: 60; } .cajon { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(400px, 92vw); background: var(--papel); border-left: 1px solid var(--hilo); display: flex; flex-direction: column; } .cajon__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); border-bottom: 1px solid var(--hilo); } .cajon__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .12em; text-transform: uppercase; } .cajon__x { font-size: 1.3rem; line-height: 1; color: var(--humo); padding: 4px 8px; } .cajon__aviso { padding: var(--s3) var(--s5); background: var(--blanco); border-bottom: 1px solid var(--hilo); font-size: .85rem; } .cajon__aviso b::before { content: "✓ "; color: var(--laca); } .cajon__cuerpo { flex: 1; overflow-y: auto; padding-inline: var(--s5); } .cajon__pie { padding: var(--s5); border-top: 1px solid var(--hilo); background: var(--blanco); } .cajon__tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); } .cajon__tot b { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; } .mini { display: grid; grid-template-columns: 58px 1fr; gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--hilo); } .mini:last-of-type { border-bottom: 0; } .mini__im { aspect-ratio: 3/4; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); display: grid; place-items: center; padding: 8%; } .mini__marca { font-family: var(--dato); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); } .mini__nom { font-size: .925rem; font-weight: 500; margin-top: 2px; } .mini__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); } .mini__precio { font-weight: 600; font-size: .95rem; } .qty--xs { height: 32px; width: 88px; font-size: .85rem; } /* ====== MI CUENTA ====== */ .cta-g { padding-block: var(--s5) var(--s8); display: grid; gap: var(--s6); } @media (min-width: 940px) { .cta-g { grid-template-columns: 232px minmax(0, 1fr); gap: var(--s8); align-items: start; } } .menu-c { display: grid; gap: 0; border-top: 1px solid var(--hilo); } .menu-c a { padding-block: var(--s3); border-bottom: 1px solid var(--hilo); text-decoration: none; font-size: .925rem; display: flex; justify-content: space-between; gap: var(--s3); } .menu-c a[aria-current] { font-weight: 600; } .menu-c a[aria-current]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rojo); align-self: center; } .puntos { margin-top: var(--s5); background: var(--tinta); color: var(--papel); border-radius: var(--r-sm); padding: var(--s4); } .puntos__n { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; } .puntos__l { font-family: var(--dato); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: rgba(240,238,234,.62); } .puntos__eq { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid rgba(240,238,234,.18); font-size: .85rem; color: rgba(240,238,234,.8); } .pedido { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); } .pedido__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s5); border-bottom: 1px solid var(--hilo); } .pedido__id { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); } .pedido__n { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; margin-top: 3px; } .estado { font-family: var(--dato); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--r-pill); background: var(--tinta); color: var(--papel); } .pedido__b { padding: var(--s5); } .pedido__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); margin-bottom: var(--s5); } /* Línea de tiempo del rastreo — conserva los estados de producción */ .ruta { display: flex; position: relative; margin-bottom: var(--s5); } .ruta::before { content: ""; position: absolute; top: 13px; left: 12%; right: 12%; height: 1px; background: var(--hilo); } .paso { flex: 1; text-align: center; position: relative; } .paso__p { width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; background: var(--papel); border: 1px solid var(--hilo); display: grid; place-items: center; font-size: 11px; color: transparent; } .paso__l { font-family: var(--dato); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--humo); line-height: 1.35; } .paso__f { display: block; font-family: var(--dato); font-size: 8.5px; color: var(--humo); opacity: .75; margin-top: 3px; } .paso[data-ok] .paso__p { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } .paso[data-ok] .paso__l { color: var(--tinta); font-weight: 500; } .paso[data-ahora] .paso__p { background: var(--tinta); border-color: var(--tinta); color: var(--papel); box-shadow: 0 0 0 4px rgba(28,23,20,.12); } .paso[data-ahora] .paso__l { color: var(--tinta); font-weight: 600; } .paso[data-alerta] .paso__p { background: var(--laca); border-color: var(--laca); color: #fff; } .paso[data-alerta] .paso__l { color: var(--laca); font-weight: 600; } .guia { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: center; padding: var(--s4); background: var(--papel); border-radius: var(--r-sm); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; } .guia b { color: var(--tinta); font-weight: 400; } .guia span { color: var(--humo); text-transform: uppercase; } .pedido__acc { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); } .pedido__items { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--hilo); } /* ====== CHECKOUT ====== */ .ck { min-height: 100vh; background: var(--papel); } .ck__top { border-bottom: 1px solid var(--hilo); background: var(--papel); } .ck__top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: var(--s4); flex-wrap: wrap; padding-block: 10px; } .ck__seg { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); display: flex; align-items: center; gap: 6px; } .ck__seg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); } .ck__g { display: grid; gap: var(--s6); padding-block: var(--s6) var(--s8); } @media (min-width: 940px) { .ck__g { grid-template-columns: 1.08fr .92fr; gap: var(--s8); align-items: start; } } .campo { display: grid; gap: 5px; margin-bottom: var(--s3); } .campo > label { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .campo input, .campo select { height: 48px; padding-inline: var(--s3); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); font-size: 1rem; } .campo input::placeholder { color: #A7ABA3; } .campo__ayuda { font-size: .8rem; color: var(--humo); } .par { display: grid; gap: var(--s3); } @media (min-width: 560px) { .par { grid-template-columns: 1fr 1fr; } } .ck__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); margin-bottom: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--hilo); } .ck__blq { margin-bottom: var(--s7); } .pago { display: grid; gap: var(--s2); } .pago__o { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); cursor: pointer; } .pago__o[data-sel] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); } .pago__r { width: 17px; height: 17px; border: 1px solid var(--humo); border-radius: 50%; flex: none; margin-top: 2px; display: grid; place-items: center; } .pago__o[data-sel] .pago__r { border-color: var(--tinta); } .pago__o[data-sel] .pago__r::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); } .pago__n { font-weight: 600; font-size: .95rem; } .pago__d { font-size: .85rem; color: var(--humo); margin-top: 2px; } .pago__tag { margin-left: auto; font-family: var(--dato); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--laca); white-space: nowrap; } .res { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); padding: var(--s5); position: sticky; top: 78px; } .res__i { display: flex; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--hilo); margin-bottom: var(--s4); } .res__im { width: 62px; aspect-ratio: 3/4; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); flex: none; display: grid; place-items: center; padding: 8%; } .res__l { display: flex; justify-content: space-between; gap: var(--s3); font-size: .9rem; padding-block: 5px; } .res__l span:last-child { font-variant-numeric: tabular-nums; } .res__tot { display: flex; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); margin-top: var(--s3); border-top: 1px solid var(--hilo); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; } .res__nota { margin-top: var(--s4); font-size: .85rem; color: var(--humo); } } /* ========================================================================== AÑADIDOS POSTERIORES AL PROTOTIPO Todo lo de arriba viene del diseno aprobado. Esto se anadio despues, y va separado a proposito: al regenerar desde el prototipo hay que volver a pegarlo, y conviene que se vea que no formaba parte del diseno original. ========================================================================== */ @layer views { /* Barra de anuncio. Las tres tiendas de referencia (Everyday Love, Lummia, Mumu) la usan para resolver las objeciones antes de mostrar un producto. Sin contadores ni urgencia fabricada. */ .anuncio { background: var(--tinta); color: var(--papel); } .anuncio__in { display: flex; justify-content: center; align-items: center; gap: var(--s4); min-height: 34px; text-align: center; } .anuncio__in .dato { color: color-mix(in srgb, var(--papel) 86%, transparent); } @media (max-width: 639px) { /* ⚠️ ANTES SE OCULTABAN DOS DE LAS TRES. En movil solo cabia una linea, asi que se escondian la segunda y la tercera — que resultan ser las dos mas fuertes: "pagas al recibir" y "envio gratis". Ahora rotan: las tres se ven, la barra sigue midiendo una linea. Quien haya pedido menos movimiento ve solo la primera. */ /* ⚠️ `min-height`, NO `height: 1.15em`. Con la altura clavada a la línea de texto, el bloque medía 18 px dentro de una banda de 34 y el mensaje quedaba pegado arriba: la banda se veía descentrada. Ahora el contenedor ocupa la banda entera y cada mensaje se centra dentro con `place-items`. */ .anuncio__in { position: relative; display: block; min-height: 34px; } .anuncio__in .dato { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; white-space: nowrap; opacity: 0; animation: pfp-anuncio 12s infinite; } .anuncio__in .dato:nth-child(2) { animation-delay: 4s; } .anuncio__in .dato:nth-child(3) { animation-delay: 8s; } @keyframes pfp-anuncio { 0%, 2% { opacity: 0; } 5%, 30% { opacity: 1; } 33%,100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .anuncio__in .dato { animation: none; opacity: 0; } .anuncio__in .dato:first-child { opacity: 1; } } } /* Pie */ .pie { margin-top: var(--s9); padding-block: var(--s7) var(--s5); border-top: 1px solid var(--hilo); } .pie__nav, .pie__legal { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0; padding: 0; list-style: none; font-size: .875rem; } .pie__nav a, .pie__legal a { color: var(--humo); text-decoration: none; } .pie__nav a:hover, .pie__legal a:hover { color: var(--tinta); } .pie__legal { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hilo); font-size: .75rem; } .pie__sello { margin-top: var(--s6); color: var(--humo); } /* Boton de la tarjeta: no estaba en el prototipo. Va discreto porque en una rejilla de 24 productos, 24 botones solidos no los gana ninguno. */ .card__btn { margin-top: var(--s3); } /* WhatsApp: lo inyecta un snippet de HFCM cuyo CSS no se aplica con este tema. Se asume aqui. ⚠️ LA ALTURA SE ADAPTA SOLA. Iba fija a 88 px para quedar apilado encima del Asesor IA; con el asesor suspendido dejaba un hueco flotando. Ahora se apoya abajo, y solo sube si el asesor esta presente. Si vuelve —o llega su reemplazo con esa clase— recupera su sitio sin tocar nada. */ .pfm-wa-btn { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 90; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-pill); background: #25D366; color: #fff; font-size: .875rem; line-height: 1; text-decoration: none; } .pfm-wa-btn__text { display: inline-flex; align-items: center; gap: var(--s2); } .pfm-wa-btn img { width: 20px; height: 20px; } body:has(.pfp-fab-wrap) .pfm-wa-btn { bottom: 88px; } @media (max-width: 639px) { .pfm-wa-btn { padding: var(--s3); } body:has(.pfp-fab-wrap) .pfm-wa-btn { bottom: 76px; } .pfm-wa-btn__text { font-size: 0; gap: 0; } .pfm-wa-btn img { width: 24px; height: 24px; } } /* El checkout va limpio: sin flotantes que tapen campos. */ .woocommerce-checkout .pfm-wa-btn { display: none; } } /* El nombre de la tarjeta enlaza, pero se ve como el texto plano del prototipo. */ .card__nom a { color: inherit; text-decoration: none; } .card__nom a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== CATALOGO — piezas que el prototipo no maquetó El prototipo dibujó la vista con datos de mentira: no tenía paginación, ni selector de orden, ni estado vacío, ni el texto SEO de la categoría. Todo eso existe en la tienda real y necesita estilo. ========================================================================== */ /* El texto de la categoría va DEBAJO de los productos y con ancho de lectura: a 1.400 px de línea no lo lee nadie. */ .cat__seo { max-width: 68ch; margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--hilo); color: var(--humo); font-size: .925rem; } .cat__seo > * + * { margin-top: var(--s3); } .cat__seo strong, .cat__seo b { color: var(--tinta); font-weight: 600; } .cat__seo h2, .cat__seo h3 { color: var(--tinta); font-size: 1.05rem; margin-top: var(--s5); } /* El selector de orden vive dentro de `.cat__orden`, a la derecha. Se le quita la caja del sistema para que lea como texto, igual que en el prototipo. */ .cat__orden form { margin: 0; } .cat__orden select { font: inherit; color: var(--tinta); font-weight: 600; background: transparent; border: 0; border-bottom: 1px solid var(--hilo); padding: 2px 18px 2px 2px; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 6px center, right 1px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .cat__orden select:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; } /* Sin resultados: la salida es quitar filtros, no volver al principio. */ .cat__vacio { display: grid; place-items: center; gap: var(--s4); padding-block: var(--s9); text-align: center; color: var(--humo); } /* Paginación */ .woocommerce-pagination { margin-top: var(--s7); } .woocommerce-pagination ul { list-style: none; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--hilo); border-radius: var(--r-pill); background: var(--blanco); color: var(--tinta); text-decoration: none; font-size: .875rem; } .woocommerce-pagination a:hover { border-color: var(--humo); } .woocommerce-pagination .current { background: var(--tinta); color: var(--papel); border-color: var(--tinta); } /* La descripción de la casa llega como HTML del editor: va en un div, no en un párrafo, así que hereda el estilo aquí. */ .casa-cab__txt > * + * { margin-top: var(--s3); } .casa-cab__txt strong, .casa-cab__txt b { color: var(--papel); } /* Solo para lectores de pantalla: el "quitar este filtro" de las etiquetas. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== FICHA — piezas que el prototipo no maquetó El prototipo dibujó el botón de compra a mano. En la tienda real ese formulario lo pinta WooCommerce —nonce, stock, variaciones, AJAX— y además los plugins le meten dentro cosas propias (el aviso de puntos de YITH). Así que aquí se le da la forma del prototipo en vez de rehacerlo. ========================================================================== */ .pdp__compra form.cart { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 0; } /* ⚠️ POR DEFECTO, ANCHO COMPLETO. Sin esta regla, todo lo que los plugins inserten dentro del formulario —el aviso de "ganas 25 Puntos"— se convierte en una columna de flex de 100 px y el texto sale partido palabra por palabra. Solo cantidad y botón comparten fila. */ .pdp__compra form.cart > * { flex: 1 1 100%; min-width: 0; } /* El selector de cantidad, con la forma de `.qty` del prototipo. */ .pdp__compra form.cart .quantity { flex: 0 0 auto; display: inline-flex; align-items: center; height: 52px; padding-inline: var(--s2); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); } .pdp__compra form.cart .quantity input { width: 62px; height: 100%; padding: 0 4px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; color: var(--tinta); } /* El botón principal: es `.btn` del prototipo, aunque WooCommerce no le ponga esa clase. Ocupa el resto de la fila. */ .pdp__compra form.cart .single_add_to_cart_button { flex: 1 1 240px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 52px; padding-inline: var(--s6); background: var(--tinta); color: var(--papel); border: 0; border-radius: var(--r-md); font-size: .95rem; font-weight: 600; letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background .18s ease; } .pdp__compra form.cart .single_add_to_cart_button:hover { background: #2C2F29; } /* ⚠️ LA MUESTRA DE 3 ML VA SUBORDINADA. El plugin la pinta como un segundo `single_add_to_cart_button`, idéntico al de comprar. Dos botones sólidos iguales hacen que la muestra le gane la atención a la venta: por eso este se reduce a `.btn--quieto`. Se identifica por el campo oculto que el propio plugin deja justo antes, no por su posición, que puede cambiar. */ .pdp__compra form.cart .dsfps-add-to-cart-id ~ .single_add_to_cart_button { flex: 1 1 100%; width: 100%; /* ⚠️ `block`, NO EL `inline-flex` QUE HEREDA DEL BOTÓN DE COMPRAR. El plugin mete DENTRO del botón un nodo de texto suelto ("…muestra 3 ml por $") y un `` aparte con la cifra. En un contenedor flex eso son dos elementos independientes: la frase envolvía sola a dos líneas y el precio se quedaba plantado al lado, centrado en vertical, sin poder unirse a ella. En un móvil real se leía "Probarlo primero · muestra 3 ml / por $ 5.396". Como bloque, texto y cifra vuelven a ser una sola frase que envuelve junta. De paso desaparece el `gap` de 8 px que separaba el "$" de su número. */ display: block; text-align: center; white-space: normal; line-height: 1.35; /* Alto mínimo, no fijo: con 44 px clavados, la segunda línea se salía. */ height: auto; min-height: 44px; padding: 10px var(--s4); background: transparent; /* ⚠️ `!important` a proposito, y solo aquí: el plugin escribe `style="color:#ffffff"` DIRECTAMENTE en el botón. Sobre fondo transparente eso lo dejaba en blanco sobre blanco — un botón vacío. Contra un estilo en línea no hay otra forma de ganar desde la hoja. */ color: var(--tinta) !important; border: 1px solid var(--hilo); font-weight: 500; } .pdp__compra form.cart .dsfps-add-to-cart-id ~ .single_add_to_cart_button:hover { background: var(--blanco); border-color: var(--humo); } /* ⚠️ EL PRECIO, `inline` A LA FUERZA: SI NO, EL "$" SE QUEDA HUÉRFANO. El plugin escribe `…por $22.996`, sin espacio entre el signo y la cifra, y le da al span `display:inline-block`. Un `inline-block` ES una oportunidad de salto de línea: el navegador puede cortar JUSTO ANTES de él aunque no haya espacio. Con muestras de cuatro dígitos casi nunca tocaba ahí, pero al pasar de $9.596 a $22.996 la frase creció lo justo para que el corte cayera en ese punto y se leyera "…muestra 3 ml por $ / 22.996". Como `inline`, el signo y la cifra son un solo trozo de texto y no hay dónde partir. ⚠️ `!important` A PROPÓSITO, igual que con el `color` de más arriba. El plugin declara `#fps-sample-btn-price { display: inline-block !important }` en su propia hoja; contra eso no hay especificidad que sirva, hay que responder con la misma prioridad. Comprobado en vivo: sin el `!important` la regla se evaluaba pero perdía, y el span seguía en `inline-block`. */ .pdp__compra form.cart .single_add_to_cart_button #fps-sample-btn-price { display: inline !important; white-space: nowrap; } .pdp__compra form.cart .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; } /* Existencias: dato, no titular. */ .pdp__compra .stock { font-family: var(--dato); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .pdp__compra .stock.out-of-stock { color: var(--rojo); } /* La miniatura activa de la galería se distingue: sin esto no se sabe cuál se está viendo. */ .pdp__t { border: 1px solid var(--hilo); background: var(--blanco); padding: 6px; cursor: pointer; border-radius: var(--r-sm); } .pdp__t[aria-current="true"] { border-color: var(--tinta); } .pdp__t:hover { border-color: var(--humo); } /* Descripción larga y reseñas: ancho de lectura, no ancho de pantalla. */ .pdp__desc, .pdp__resenas { max-width: 68ch; margin-top: var(--s8); } .pdp__desc > * + * { margin-top: var(--s3); } .pdp__desc h2 { margin-bottom: var(--s4); } .pdp__resenas { padding-top: var(--s6); border-top: 1px solid var(--hilo); } /* Insignias de confianza de un snippet ("Producto Original · Paga Contraentrega · Envío Gratis"). No están en el prototipo y repiten lo que el certificado ya dice tres centímetros más arriba, así que se pintan como dato discreto y no como un tercer titular compitiendo con el botón. */ .pdp .pfm-badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } .pdp .pfm-badge { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-pill); padding: 5px 11px; } /* -------------------------------------------------------------------------- RECOMPENSA POR LA COMPRA (YITH Points & Rewards) Llegaba como texto suelto dentro de la caja de compra: un párrafo gris con un icono de 16 px, indistinguible del resto. Es un beneficio real —25 puntos son $2.500 en la próxima compra— y merece leerse de un vistazo. NO va en rojo: en este sistema el rojo tiene un solo trabajo (logo, contador del carrito, sello del certificado). Un premio no es una alarma. -------------------------------------------------------------------------- */ .compra .yith-par-message { display: none !important; } /* --- lo de abajo queda inerte; se conserva por si se reactiva el aviso --- */ .compra .yith-par-message-desactivado { /* ⚠️ BLOQUE, NO FLEX. Con `display:flex` cada trozo suelto del párrafo —el , el de los puntos, el de la letra pequeña— se vuelve una columna y la frase sale partida en cuatro tiras verticales. El icono flota y el texto lo rodea. */ display: block; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hilo); font-size: .875rem; line-height: 1.45; color: var(--humo); background: none !important; /* el plugin escribe blanco en línea, y sobre la plancha blanca eso dibuja una caja fantasma con un borde invisible */ } .compra .yith-par-message img { float: left; width: 20px !important; height: 20px; max-width: 20px !important; margin: 2px 10px 0 0 !important; } .compra .yith-par-message strong { color: var(--tinta); font-weight: 600; } /* La cifra de puntos, como dato: es el número que hay que poder leer sin leer la frase entera. */ .compra .yith-par-message .product_point { font-family: var(--dato); font-size: 1rem; font-weight: 500; color: var(--tinta); letter-spacing: -.02em; } /* La letra pequeña, más pequeña de verdad. */ .compra .yith-par-message em { font-style: normal; font-size: .8rem; opacity: .75; } /* ========================================================================== EL CAJON: ESTADOS ABIERTO Y CERRADO El prototipo lo dibujó siempre visible —era una maqueta— así que no trae estados. Aquí entra deslizándose desde la derecha: el movimiento dice de dónde viene y hacia dónde vuelve, que es justo lo que le faltaba al aviso diminuto de antes. ========================================================================== */ .fondo, .cajon { transition: opacity .22s ease, transform .24s cubic-bezier(.22,.61,.36,1); } .fondo[hidden], .cajon[hidden] { display: none; } .fondo { opacity: 0; } .fondo[data-abierto] { opacity: 1; } .cajon { transform: translateX(100%); } .cajon[data-abierto] { transform: translateX(0); } /* Quien haya pedido menos movimiento no lo tiene: aparece y ya. */ @media (prefers-reduced-motion: reduce) { .fondo, .cajon { transition: none; } .cajon { transform: none; } } /* `.cajon__datos` es el envoltorio que se reemplaza entero en cada añadido; sin heredar la columna, el pie se despega del fondo. */ .cajon__datos { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* Los botones de cantidad del cajón son botones de verdad, no adornos. */ .qty button { background: none; border: 0; cursor: pointer; font: inherit; } .qty button:hover { color: var(--tinta); } /* Mientras viaja la petición, el botón no acepta un segundo clic: era exactamente el problema —pulsarlo tres veces sin saber si pasó algo. */ .single_add_to_cart_button.loading { opacity: .6; pointer-events: none; } /* -------------------------------------------------------------------------- LA MUESTRA, DISTINGUIBLE DE UN VISTAZO El plugin añade la muestra con el MISMO producto, así que en el carrito son dos líneas con el mismo nombre y la misma foto a distinto precio. La primera versión de esta etiqueta era una píldora gris con borde fino y se perdía entre el resto del texto gris. Ahora usa el tratamiento que el sistema ya tiene para los estados de pedido (`.estado`): sólida en tinta sobre papel. Es el único contraste fuerte disponible sin tocar el rojo, que aquí tiene un solo trabajo — logo, contador y sello del certificado. Van TRES señales, cada una independiente: la etiqueta, el tamaño en la ficha ("3 ml" frente a "105 ml") y la foto más pequeña dentro del mismo marco, porque un vial de 3 ml es más pequeño de verdad. -------------------------------------------------------------------------- */ .mini__tag { display: inline-block; margin-left: 7px; vertical-align: 2px; font-family: var(--dato); font-size: 8.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--papel); background: var(--tinta); border-radius: var(--r-pill); padding: 3px 9px; } /* La foto, más pequeña dentro del mismo marco: el frasco lleva 8% de aire, el vial 26%. Se lee sin leer. */ .mini[data-muestra] .mini__im { padding: 26%; } /* ========================================================================== AVISOS DEL PLUGIN DE MUESTRAS: FUERA Al añadir una muestra el plugin pinta dos cosas propias: · `.dsfps-ajax-success-msg` — un recuadro fijo abajo a la derecha que dice "Muestra Seleccionada". Es el aviso diminuto que nadie veía y que hizo que los clientes pulsaran el botón tres veces. · `.dsfps_added_to_cart` — un enlace "View cart" en inglés que aparece y desaparece bajo el botón. Los dos sobran: el cajón lateral ya confirma el añadido, con la línea, el subtotal y la fecha de entrega. Dos confirmaciones a la vez se estorban, y una de ellas ni siquiera está traducida. ========================================================================== */ .dsfps-ajax-success-msg, .dsfps_added_to_cart, .dsfps-sample-added-notice { display: none !important; } /* ========================================================================== CANTIDAD Y RECOMPENSA ========================================================================== */ /* El control de cantidad del prototipo: menos, número, más. WooCommerce solo pinta el campo; los dos botones los añade inc/ficha.php con los ganchos que deja alrededor, así que aquí solo hay que quitarle la caja al campo y dársela al envoltorio. */ .pdp__compra form.cart .qty { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 52px; padding-inline: var(--s2); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); } .pdp__compra form.cart .qty .quantity { border: 0; background: none; height: auto; padding: 0; } .pdp__compra form.cart .qty input { width: 46px; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; color: var(--tinta); -moz-appearance: textfield; } .pdp__compra form.cart .qty input::-webkit-outer-spin-button, .pdp__compra form.cart .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty__b { display: grid; place-items: center; width: 30px; height: 100%; background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--humo); transition: color .15s ease; } .qty__b:hover { color: var(--tinta); } .qty__b:disabled { opacity: .3; cursor: not-allowed; } /* -------------------------------------------------------------------------- LO QUE GANAS Sustituye al párrafo gris de YITH, que decía "ganas 25 Puntos — 1 punto = $100" y obligaba al cliente a multiplicar. La cifra que se lee primero es la que importa: $2.500. NO va en rojo: en este sistema el rojo tiene un solo trabajo (logo, contador del carrito, sello del certificado). Un premio no es una alarma. -------------------------------------------------------------------------- */ .compra__s--premio { background: color-mix(in srgb, var(--papel) 55%, var(--blanco)); } .premio { display: flex; align-items: center; gap: var(--s4); } .premio__n { flex: 0 0 auto; font-family: var(--dato); font-size: 1.35rem; font-weight: 500; letter-spacing: -.03em; color: var(--tinta); padding-right: var(--s4); border-right: 1px solid var(--hilo); } .premio__t { font-size: .925rem; font-weight: 600; color: var(--tinta); } .premio__d { font-size: .8rem; color: var(--humo); margin-top: 3px; } @media (max-width: 420px) { .premio { gap: var(--s3); } .premio__n { font-size: 1.15rem; padding-right: var(--s3); } } /* ========================================================================== LAS DOS PASARELAS DE CUOTAS, SIMETRICAS Sistecredito y Addi son dos componentes de terceros que llegan cada uno con su maquetacion. Van juntos justo debajo de la valoracion (la caja de compra se movio a prioridad 12 para dejarles sitio), y aqui se les iguala el marco. ⚠️ Addi usa shadow DOM: su interior NO se puede tocar desde aqui, y por eso su borde, radio y tipografia se configuran en los ajustes del plugin. Lo que si se controla desde el CSS es la caja exterior de ambos. Sistecredito NO usa shadow DOM, asi que su tipografia si se puede alinear con la del sitio. ========================================================================== */ /* ⚠️ EL MARCO LO DIBUJA EL TEMA, SOBRE EL ELEMENTO ANFITRION. Tres intentos hasta dar con esto, y conviene dejar por que: 1. Darle a Addi el recuadro azul de Sistecredito por sus ajustes — no se puede garantizar: su interior vive en un shadow DOM inalcanzable desde aqui, asi que el marco se configuraba a ciegas. 2. Quitarles el marco a los dos — simetricos, si, pero sin ningun peso visual: dos opciones de pago que importan se perdian entre el texto. 3. Este: el marco va sobre `app-simulator` y `addi-product-widget`, y por dentro se les neutraliza el suyo. Identicos por construccion, porque los dibuja la misma regla. La clave esta en ponerlo sobre el ANFITRION y no sobre su envoltorio: cuando Addi no responde, su anfitrion queda en `visibility:hidden`, y eso oculta tambien el borde. Sobre un div envoltorio quedaria un recuadro vacio que parece un error. */ app-simulator, addi-product-widget { display: block; width: 100%; margin-top: var(--s3); /* Las medidas exactas del recuadro original de Sistecredito, medidas en la pagina: 1px solid #00369C, radio 8px, fondo transparente, 8/16 de padding. */ padding: 8px 16px; background: transparent; border: 1px solid #00369C; border-radius: 8px; font-size: 1rem; } .pdp__val + app-simulator, .pdp__val + addi-product-widget { margin-top: var(--s4); } /* Sistecredito trae su propio recuadro azul y "Red Hat Display" dentro. Se le retira todo para que solo aporte el contenido; el marco ya lo pone el tema. */ app-simulator .simulador-box { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important; font-family: var(--texto) !important; } /* ⚠️ SI SISTECREDITO NO PINTA, EL MARCO NO PUEDE QUEDARSE SOLO. Su API rechaza ciertos productos —`ErrorSearchingForProductClient`, 400, visto el 2026-08-10 en el 212 VIP de $414.900— y en ese caso deja el anfitrion `app-simulator` en el DOM pero SIN NADA DENTRO. Como el marco azul lo dibuja el tema sobre el anfitrion (ver la nota de arriba), el cliente ve un rectangulo azul vacio de 18 px justo encima de Addi: se lee como una pagina rota, no como una opcion de pago que no aplica. `:empty` es exacto aqui porque Sistecredito pinta en el DOM normal: mientras no haya contenido no hay recuadro, y en cuanto lo hay aparece entero. ⚠️ NO extender esta regla a `addi-product-widget`: Addi vive en shadow DOM, asi que su anfitrion cumple `:empty` SIEMPRE —incluso funcionando— y la regla lo borraria de todas las fichas. */ app-simulator:empty { display: none; } /* ========================================================================== MOVIL: LA COMPRA, ANTES QUE LA TRANQUILIDAD ⚠️ MEDIDO. En 375x812 el boton de comprar caia a 1.617 px —dos pantallas— y el precio a 1.087. La ficha esta pensada en dos columnas: foto a un lado, compra al otro. Al apilarse en movil, entre el precio y el boton se metian los 250 px del certificado. El certificado TRANQUILIZA, y tranquilizar va despues de decidir — es la misma regla por la que el panel de atributos ya iba detras del boton. Aqui solo se aplica esa regla tambien en movil. ========================================================================== */ /* ⚠️ EL ORDEN VA FUERA DE LA MEDIA QUERY. Estaba dentro de `max-width:859px` con la nota "aquí solo se aplica esa regla también en móvil" — dando por hecho que en escritorio el orden ya era correcto. NO LO ERA: ahí mandaba el orden del HTML, así que el certificado (275 px) se metía entre el precio y el botón y dejaba el botón en 927 px, 27 por debajo del pliegue en una pantalla de 900. Medido el 2026-08-03. El certificado tranquiliza, y tranquilizar va DESPUÉS de decidir — en las dos anchuras. */ .compra { display: flex; flex-direction: column; } .compra__s:has(.pdp__precio) { order: 1; } /* precio */ .compra__s:has(.pdp__compra) { order: 2; } /* comprar */ .compra__s--cert { order: 3; } /* certificado */ .compra__s--premio { order: 4; } /* puntos */ @media (max-width: 859px) { /* La foto ocupaba 469 px de los 812 de pantalla. Cuadrada deja ver el nombre y la valoracion sin desplazarse. */ .pdp__big { aspect-ratio: 1 / 1; } } /* ========================================================================== BARRA DE COMPRA FIJA (SOLO MOVIL) Aparece cuando el boton real sale de pantalla y desaparece cuando vuelve: no compite con el, lo sustituye. Sin cuenta atras ni "quedan pocas": el material es el que ya estaba en la pagina, solo que sin tener que buscarlo. ========================================================================== */ /* ⚠️ FONDO BLANCO Y SOMBRA, NO `--papel`. Con `--papel` la barra era EXACTAMENTE del color de la pagina: no se despegaba de nada, y lo que deberia leerse como una pieza que flota sobre el contenido parecia un renglon mas al final del texto. El blanco la separa y la sombra hacia arriba dice que hay pagina por debajo. */ .compra-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--blanco); border-top: 1px solid var(--hilo); box-shadow: 0 -14px 30px -22px rgba(0, 0, 0, .45); padding: var(--s3) var(--s4); padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .22s cubic-bezier(.22,.61,.36,1); } .compra-fija[hidden] { display: none; } .compra-fija[data-visible] { transform: translateY(0); } /* ⚠️ TAMBIEN EN ESCRITORIO. Al principio era solo movil porque ahi el boton caia a dos pantallas. Pero en escritorio la ficha tambien es larga —notas, atributos, descripcion, resenas— y en cuanto se pasa de la caja de compra el cliente se queda sin precio y sin boton igual que en el movil. El contenido se centra al mismo ancho que el resto de la pagina para que no quede desparramado de borde a borde. */ .compra-fija__in { display: flex; align-items: center; gap: var(--s4); width: 100%; max-width: var(--ancho); margin-inline: auto; } @media (min-width: 900px) { .compra-fija { padding-inline: var(--s6); } } /* ⚠️ `flex: 0 1 auto`, NO `flex: 1`. Estirandose, el bloque de nombre y precio empujaba el boton hasta el borde opuesto de una barra de 1.240 px y abria el desierto del medio. Ahora se queda del tamano de su contenido y forma un grupo compacto a la izquierda; quien se lleva el espacio sobrante es la promesa de pago, centrada. */ .compra-fija__d { min-width: 0; flex: 0 1 auto; } /* La promesa de pago ocupa el hueco y se centra en el. En movil desaparece —el hueco tampoco existe— y el `margin-left:auto` del boton lo manda a la derecha igual que antes. */ .compra-fija__ok { display: none; } /* ⚠️ NI UN CHULO. La primera version era `✓ Pagas al recibir` en gris y frase: el patron de CUALQUIER tienda, y en una pagina que tiene su propio idioma para dar datos se leia como un pegote de plantilla ajena. Este es ese idioma: la mono del tema en versalitas con interletraje ancho, igual que el titulo del sello de garantia y que la marca en las tarjetas. Los filetes convierten la promesa en un compartimento con sitio propio dentro de la barra, en vez de dos frases flotando en el hueco. */ @media (min-width: 1000px) { .compra-fija__ok { display: flex; flex: 1 1 auto; justify-content: center; align-items: center; min-width: 0; padding-block: var(--s3); margin-inline: clamp(var(--s4), 3vw, var(--s7)); border-inline: 1px solid var(--hilo); } .compra-fija__ok span { display: inline-flex; align-items: center; padding-inline: clamp(var(--s4), 2.2vw, var(--s6)); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--humo); white-space: nowrap; } .compra-fija__ok span + span { border-left: 1px solid var(--hilo); } } /* La miniatura da contexto cuando el cliente lleva media pagina leida y ya no ve la foto. Fuera en pantallas estrechas: ahi manda el precio. */ /* Sin borde: sobre la barra blanca, un recuadro con filete se lee como una casilla de formulario. El fondo `--papel` ya la separa y ademas la ata al color de la pagina. */ .compra-fija__im { flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain; background: var(--papel); border: 0; border-radius: var(--r-sm); padding: 5px; } @media (max-width: 479px) { .compra-fija__im { display: none; } } /* ⚠️ EN `--display`, NO EN GRIS DE SISTEMA. A .8rem y color humo el nombre del perfume se leia como un pie de foto. En la serif del tema —la misma con la que esta titulada la ficha entera— la barra deja de parecer un aviso del navegador y sigue siendo la pagina. */ .compra-fija__nom { display: block; font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 24; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .compra-fija__p { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } /* El precio es la razon de ser de la barra: a 1,05rem competia de tu a tu con el nombre del perfume, que es lo de menos aqui. */ .compra-fija__p b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; } /* El ahorro, como distintivo. Suelto en la tipografia de dato y con interletraje ancho se leia como una linea de consola, no como la cifra que inclina la compra. */ .compra-fija__p i { font-family: var(--dato); font-size: var(--fs-dato); font-style: normal; letter-spacing: .05em; color: var(--laca); background: color-mix(in srgb, var(--laca) 9%, transparent); padding: 4px 8px; border-radius: 999px; line-height: 1; } .compra-fija__b { flex: 0 0 auto; margin-left: auto; height: 48px; padding-inline: var(--s6); font-weight: 600; } /* El boton de WhatsApp se aparta cuando la barra esta arriba, en vez de quedar tapado por ella. */ body:has(.compra-fija[data-visible]) .pfm-wa-btn { bottom: 92px; } /* ========================================================================== CON EL CAJON ABIERTO, LO QUE FLOTA SE APARTA ⚠️ Problema de capas, no de estilo. El cajon vive en `z-index: 61` y por encima flotan el boton de WhatsApp (90), la barra fija de compra (95) y el asesor (9998, hoy suspendido). Los tres podian taparle informacion al carrito abierto — el de WhatsApp lo hacia siempre. Se arregla por los dos lados a la vez: 1. El cajon y su fondo suben por encima de todo lo flotante. Es la garantia estructural: aunque manana aparezca otro boton flotante, no puede taparlo. 2. Y ademas se apartan, con la misma curva y duracion que usa el cajon para entrar. El carrito llega por la derecha; ellos salen por donde no estorban. No desaparecen de golpe: acompanan el movimiento. ========================================================================== */ .fondo { z-index: 120; } .cajon { z-index: 121; } .pfm-wa-btn, .pfp-fab-wrap { transition: transform .24s cubic-bezier(.22,.61,.36,1), bottom .2s ease; } /* El de WhatsApp sale por la derecha, por donde entra el cajon. */ body:has(.cajon[data-abierto]) .pfm-wa-btn { transform: translateX(calc(100% + var(--s4))); } /* El asesor vive centrado abajo: se retira hacia abajo, no hacia un lado. */ body:has(.cajon[data-abierto]) .pfp-fab-wrap { transform: translateX(-50%) translateY(calc(100% + var(--s5))); } /* La barra de compra se repliega igual que aparecio. */ body:has(.cajon[data-abierto]) .compra-fija { transform: translateY(100%); } /* ========================================================================== OPINIONES BAJO EL BOTON No viene del prototipo: alli las reseñas solo existian como pagina aparte. Se diseña con el material del sistema —filete `--hilo`, humo para los datos, la tipografia de datos para el meta— para que no parezca un widget pegado. ⚠️ Deliberadamente SIN caja ni fondo: la caja de compra que tiene justo encima ya es una pieza fuerte, y dos planchas seguidas compiten. Aqui basta con un filete por reseña. ========================================================================== */ .opiniones { margin-top: var(--s5); } .opiniones__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .opiniones__n { display: flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--humo); } .opiniones__n b { font-size: 1rem; font-weight: 600; color: var(--tinta); } .opiniones__v { font-size: .8rem; color: var(--humo); border-bottom: 1px solid var(--hilo); padding-bottom: 1px; text-decoration: none; } .opiniones__v:hover { color: var(--tinta); border-bottom-color: var(--rojo); } .opinion { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); padding: var(--s4); margin-top: var(--s3); } /* Las estrellas de cada reseña van más pequeñas que las del encabezado: la nota media es el dato, la de una reseña suelta es contexto. */ .estrellas--mini { font-size: .72rem; letter-spacing: .06em; } .opinion__t { font-size: .925rem; line-height: 1.5; margin-top: 5px; } .opinion__m { margin-top: 6px; font-family: var(--dato); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--humo); } /* "compra verificada" es lo que da valor a la firma; se separa del nombre. */ .opinion__m i { font-style: normal; color: var(--laca); } /* La entrega, ya dentro de la caja de compra y pegada al boton. */ .pdp__compra .pdp__entrega { margin-top: var(--s3); font-size: .875rem; } /* ========================================================================== LA PORTADA EN MOVIL: QUE LA PRIMERA PANTALLA VENDA ⚠️ MEDIDO. En 375x812 el hero ocupaba 1.168 px —foto 469 + panel 699— y el primer precio caia a 1.084. La primera pantalla no contenia una sola cifra comercial: logo, buscador y una foto de revista. La foto se queda, porque es lo que genera deseo. Lo que se va es lo que no ayuda a decidir en un telefono: · `.lanza__meta` (43 px) — "L01/2026 · Colombia · Presenta". Es firma editorial; en movil ocupa el sitio del precio. · `.lanza__desc` (97 px) — la descripcion completa ya esta en la ficha, a un toque de distancia. Aqui solo empuja el boton fuera de pantalla. No se recorta la elegancia: se recorta lo que sobra en una pantalla de mano. ========================================================================== */ @media (max-width: 899px) { /* La foto pasa de 469 a 320: sigue mandando, deja de ocupar media pantalla. */ .lanza__vis { height: 320px; min-height: 0; } .lanza__vis .foto, .lanza__foto img { height: 100%; object-fit: cover; } .lanza__meta, .lanza__desc { display: none; } .lanza__panel { padding: var(--s5) var(--s5) var(--s6); } } /* La nota que convierte la muestra en argumento. Va debajo de su botón, en gris: explica el botón, no compite con él ni con el de comprar. */ .pdp__prueba { margin-top: var(--s3); font-size: .85rem; line-height: 1.45; color: var(--humo); } .pdp__prueba b { color: var(--tinta); font-weight: 600; } /* ========================================================================== CLUB PERFUMASTE EN EL RESUMEN DEL CARRITO ⚠️ VISTE MARCADO AJENO. El formulario de canje lo genera YITH y se deja intacto a propósito: sus campos, su nonce y sus identificadores los usa el JavaScript del plugin para validar el mínimo y aplicar el descuento. Aquí solo se le da forma desde fuera, igual que se hizo con Sistecrédito. Va SIN capa (fuera de `@layer components`) porque tiene que ganarle al CSS que el propio plugin encola. ========================================================================== */ .club { margin-top: var(--s5); padding: var(--s4); background: var(--papel); border: 1px solid var(--hilo); border-radius: var(--r-sm); } .club__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); margin-bottom: var(--s3); } /* ⚠️ EL AVISO DE YITH LLEGA EN `display:flex`, Y DESDE UN SELECTOR DE ID. El plugin envuelve su mensaje en `#yith-par-message-cart` y le pone flex en su propia hoja (`frontend.css`) para alinear el icono. Dentro de la caja eso convertía cada `` en una COLUMNA: "¡al completar tu pedido ganas" · "29" · "Puntos! (1 punto = $100…)" en tres bloques. ⚠️ HAY QUE NOMBRAR LOS IDs. Un selector de clase pierde siempre contra uno de ID por especificidad, así que la primera versión de esta regla —solo con `.club .woocommerce-info`— estaba en la hoja y no hacía nada. Con `.club` delante del ID sí gana, y sin recurrir a `!important`. */ .club #yith-par-message-cart, .club #yith-par-message-reward-cart, .club .woocommerce-info, .club .woocommerce-message, .club .woocommerce-error, .club .woocommerce-cart-notice { display: block; margin: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; } .club #yith-par-message-cart::before, .club #yith-par-message-reward-cart::before, .club .woocommerce-info::before, .club .woocommerce-message::before, .club .woocommerce-cart-notice::before { content: none; } /* El mensaje de YITH es una frase con el campo incrustado en medio. Se deja fluir como texto y solo se corrigen tamaño y color. */ .club__canje, .club__gana { font-size: .85rem; line-height: 1.55; color: var(--humo); } .club__canje strong, .club__gana strong { color: var(--tinta); font-weight: 600; } /* El separador entre lo que se canjea y lo que se gana: son dos ideas distintas —gastar ahora, acumular después— y sin línea se leían como una. ⚠️ SOLO CUANDO HAY ALGO ENCIMA. Un visitante sin sesión no puede canjear, así que solo ve el mensaje de lo que gana: con la línea puesta siempre, le salía una divisoria suelta justo debajo del título. */ .club__canje + .club__gana { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hilo); } .club__gana p { margin: 0; } /* El campo de puntos: del ancho de la cifra, no de la columna. Rectangular y contenido a propósito. Va incrustado en mitad de una frase, así que cuanto más se parezca a una caja de formulario al uso —alta y redondeada— más rompe la línea de lectura. Con 34 px de alto y el radio de 2 px del sistema se lee como parte del texto, no como un salto. */ .club input[type="text"], .club input[type="number"] { width: 58px; height: 34px; margin-inline: 5px; padding-inline: 6px; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); font-family: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; text-align: center; color: var(--tinta); } .club input[type="text"]:focus, .club input[type="number"]:focus { outline: none; border-color: var(--tinta); } /* El botón de aplicar es `.btn--quieto`, copiado declaración a declaración. ⚠️ EL RADIO ES `--r-md` (4px), NO PÍLDORA. Aquí estuvo el error: le puse `--r-pill` y quedó como un botón de otra web. En este sistema la píldora está reservada a chips y etiquetas —familias, facetas, `.estado`, `.mini__tag`—; ningún botón de acción la usa, `.btn` va con `--r-md`. Basta con que uno se salte la regla para que cante. El resto (altura 44, peso 500, el mismo interletrado y la misma transición) también sale de `.btn--quieto`; no se hereda la clase porque el marcado lo genera YITH y no podemos añadírsela. A lo ancho porque en una columna de 320 px un botón corto flotando tras una frase larga no se lee como el final de la acción. */ .club button { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: var(--s4); padding-inline: var(--s6); background: transparent; color: var(--tinta); border: 1px solid var(--hilo); border-radius: var(--r-md); font-family: inherit; font-size: .95rem; font-weight: 500; letter-spacing: -.005em; cursor: pointer; transition: background .18s ease, border-color .18s ease; } .club button:hover { background: var(--blanco); border-color: var(--humo); } /* El aviso de mínimo que YITH mantiene oculto hasta que hace falta. */ .club .ywpar_min_reedem_value_error { margin-top: var(--s2); font-size: .8rem; color: var(--laca); } /* La caja del Club se esconde mientras no tenga nada que decir. ⚠️ LOS CONTENEDORES DE YITH SE PINTAN SIEMPRE, aunque vengan vacíos: si no están, su JavaScript se fabrica uno nuevo arriba de la página al refrescar el carrito (ver `pfp_carro_club()`). Pero una caja con solo el título y dos divs vacíos ocupa el sitio del botón de pagar sin informar de nada. `:has()` resuelve las dos cosas: mientras los dos contenedores estén vacíos la caja no se ve, y en cuanto el JavaScript rellena uno reaparece sola, sin recargar y sin una línea de script nuestro. */ .club:not(:has(.club__canje > *:not(:empty), .club__gana > *:not(:empty))) { display: none; } /* ========================================================================== DIRECCIONES DEL PEDIDO ⚠️ `font-style: normal` NO ES REDUNDANTE. WooCommerce entrega las direcciones dentro de `
`, y los navegadores pintan ese elemento en cursiva por omisión — de ahí el aire de formulario antiguo que tenía este bloque. ========================================================================== */ .dir { font-style: normal; font-size: .925rem; line-height: 1.65; color: var(--humo); } /* La primera línea es el nombre de quien recibe: es el dato con el que el cliente comprueba de un vistazo que el pedido va a donde debe. */ .dir::first-line { color: var(--tinta); font-weight: 600; } /* Los pares de dato —teléfono, correo, cédula— con el mismo lenguaje que el certificado y la ficha de envío, en vez de líneas sueltas de dirección. */ .dir__datos { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hilo); } /* ⚠️ LOS CAMPOS EXTRA LOS PINTA WOOCOMMERCE, NO UN PLUGIN SUELTO. La cédula llega del propio core como `
` con pares `
`/`
` — que es justo la estructura que el tema ya usa en el certificado. En vez de esconderla o duplicarla, se le da el mismo aspecto que a `.sello__fila` para que continúe la lista de arriba sin costura. */ .wc-block-components-additional-fields-list { margin: 0; display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; } .wc-block-components-additional-fields-list dt { padding-block: 5px; color: var(--humo); text-transform: uppercase; } .wc-block-components-additional-fields-list dd { margin: 0; padding-block: 5px; color: var(--tinta); text-align: right; } /* Sin teléfono ni correo encima, la lista de campos extra hereda la línea. */ .dir + .wc-block-components-additional-fields-list { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hilo); } /* Cualquier otro añadido de plugin, al menos sin el margen del navegador. */ .dir + p, .dir__datos + p { margin: 0; font-size: .85rem; color: var(--humo); } /* Los campos extra bajo una dirección guardada —la cédula—, al nivel de dato. ⚠️ AQUÍ LLEGAN COMO TEXTO SUELTO, no como el `
` de la ficha del pedido: WooCommerce los emite como `Etiqueta: valor` tras un `
`. La plantilla los envuelve en `.dir__extra` para poder bajarlos de peso; sin eso salían en negrita de cuerpo, pesando más que la propia dirección. */ .dir__extra { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hilo); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; color: var(--tinta); } .dir__extra strong { color: var(--humo); font-weight: 400; text-transform: uppercase; } /* ========================================================================== FORMULARIO DE DIRECCIÓN ⚠️ VISTE MARCADO DE WOOCOMMERCE. Los campos los genera `woocommerce_form_field()`, que resuelve el desplegable de país y el de departamento —repoblado por JavaScript—, los marcadores de obligatorio y los campos que añaden otros plugins. Se conserva tal cual y solo se le da la forma de `.campo`. ========================================================================== */ .dir-form .form-row { display: grid; gap: 5px; margin-bottom: var(--s3); } .dir-form .form-row label { font-family: var(--dato); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--humo); } .dir-form .form-row .required { color: var(--laca); text-decoration: none; border: 0; } /* `.optional` sobra: si no lleva asterisco, ya se entiende. */ .dir-form .form-row .optional { display: none; } .dir-form .form-row input, .dir-form .form-row select, .dir-form .form-row textarea { width: 100%; height: 48px; padding-inline: var(--s3); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); font-family: inherit; font-size: 1rem; color: var(--tinta); } .dir-form .form-row textarea { height: auto; min-height: 96px; padding-block: var(--s3); } .dir-form .form-row input:focus, .dir-form .form-row select:focus, .dir-form .form-row textarea:focus { outline: none; border-color: var(--tinta); } .dir-form .form-row input::placeholder { color: #A7ABA3; } /* Dos campos por fila cuando WooCommerce los marca como mitad —nombre y apellido, ciudad y departamento—: en móvil se apilan solos. */ @media (min-width: 560px) { .dir-form .form-row-first, .dir-form .form-row-last { display: inline-grid; width: calc(50% - var(--s2)); vertical-align: top; } .dir-form .form-row-first { margin-right: var(--s3); } } /* El desplegable mejorado, si WooCommerce llega a cargar select2. */ .dir-form .select2-container--default .select2-selection--single { height: 48px; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); } .dir-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: var(--s3); color: var(--tinta); } .dir-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } /* Los avisos de validación, en el rojo de marca y sin la caja del navegador. */ .dir-form .woocommerce-invalid input, .dir-form .woocommerce-invalid select { border-color: var(--laca); } /* El asterisco de obligatorio, en el rojo de marca y sin el subrayado que le pone el navegador a ``/``. Vale para los campos que escribe el tema (`.campo`) y para los que llegan de WooCommerce (`.form-row`). */ .campo .required { color: var(--laca); text-decoration: none; border: 0; } .campo .optional { display: none; } /* ========================================================================== CLUB PERFUMASTE — pestañas y movimientos de puntos ⚠️ LAS CLASES `.ywpar_*` SON EL CONTRATO CON EL JAVASCRIPT DE YITH: su script busca `.ywpar_tabs_links` y `.ywpar_tabcontent` para abrir y cerrar paneles. Se conservan tal cual y solo se les da forma; renombrarlas deja las pestañas muertas. ========================================================================== */ .club__tabs { display: flex; gap: var(--s5); list-style: none; margin: 0 0 var(--s5); padding: 0 0 var(--s3); border-bottom: 1px solid var(--hilo); font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .1em; text-transform: uppercase; } .club__tabs .ywpar_tabs_links { cursor: pointer; color: var(--humo); padding-bottom: var(--s3); margin-bottom: calc(var(--s3) * -1 - 1px); border-bottom: 1px solid transparent; transition: color .15s ease; } .club__tabs .ywpar_tabs_links:hover { color: var(--tinta); } .club__tabs .ywpar_tabs_links.active { color: var(--tinta); border-bottom-color: var(--tinta); } /* Cada movimiento del historial. En vez de la tabla de cuatro columnas de YITH —que en móvil, el 87% del tráfico, se desborda— el motivo manda a la izquierda y el saldo queda a la derecha. */ .mov { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); border-top: 1px solid var(--hilo); } .mov:first-child { border-top: 0; } .mov__r { font-size: .95rem; color: var(--tinta); } .mov__f { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; color: var(--humo); margin-top: 2px; } .mov__f a { color: var(--humo); } .mov__f a:hover { color: var(--tinta); } /* El signo lleva el peso: lo ganado en tinta, lo descontado en el rojo de marca. Nada de verde — no pertenece a esta paleta. No hay columna de saldo histórico: el que reconstruye YITH no cuadra con este historial (ver el comentario en `my-points-view.php`). */ .mov__p { flex: none; font-size: 1.05rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; } .mov__p[data-resta] { color: var(--laca); } /* ========================================================================== CLUB — REGALAR PUNTOS ⚠️ EL PANEL LO PINTA YITH ENTERO (`Share_Points::print_tab()`), con su formulario, su nonce y su JavaScript de validación. No se reescribe: se viste desde fuera, igual que el canje del carrito. Llegaba con caja gris `#f5f5f5`, 40 px de relleno, un `

` de cuerpo y el botón gris por defecto del navegador (30 px de alto). Se usa el selector de ID para ganarle a su hoja sin recurrir a `!important`. ========================================================================== */ #share_points { background: none; padding: 0; font-size: .95rem; color: var(--humo); } #share_points h3 { font-family: var(--dato); font-size: var(--fs-dato); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); margin: 0 0 var(--s3); } #share_points > p { max-width: 58ch; margin: 0 0 var(--s4); line-height: 1.55; } /* El formulario, en una línea que se lee como una frase. */ #ywpar-share-points { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); } #ywpar-share-points > span { color: var(--tinta); } #ywpar_share_points_to_share { width: 84px; height: 40px; padding-inline: var(--s2); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); font-family: inherit; font-size: .95rem; font-variant-numeric: tabular-nums; text-align: center; color: var(--tinta); } #ywpar_share_points_to_share:focus { outline: none; border-color: var(--tinta); } /* El botón, con la forma del botón discreto del sistema: radio de 4px, nunca píldora — la píldora aquí está reservada a chips y etiquetas. ⚠️ SE REPITE EL SELECTOR DE YITH (`#share_points input#ywpar-share-points__submit`, dos IDs) porque con uno solo perdía por especificidad y el botón seguía gris `rgb(91,91,91)`. Mismo caso que el aviso de puntos del carrito. */ #share_points input#ywpar-share-points__submit { flex: none; height: 44px; padding-inline: var(--s6); background: transparent; color: var(--tinta); border: 1px solid var(--hilo); border-radius: var(--r-md); font-family: inherit; font-size: .95rem; font-weight: 500; letter-spacing: -.005em; cursor: pointer; transition: background .18s ease, border-color .18s ease; } #share_points input#ywpar-share-points__submit:hover { background: var(--blanco); border-color: var(--humo); } /* En móvil el botón cierra la acción a lo ancho, debajo de la frase. */ @media (max-width: 559px) { #share_points input#ywpar-share-points__submit { width: 100%; margin-top: var(--s2); } } /* Los avisos de mínimo y máximo, que YITH muestra y oculta por JavaScript. */ .ywpar-share-points-error { margin: var(--s3) 0 0; } .ywpar-share-points-error .error { color: var(--laca); font-size: .85rem; } /* ========================================================================== LA GALERÍA ACOMPAÑA AL SCROLL EN ESCRITORIO ⚠️ `--cabecera` ES LA ALTURA REAL DE LA CABECERA PEGAJOSA, MEDIDA. `.top` es `position:sticky; top:0`, así que cualquier elemento que también se pegue tiene que empezar por debajo de ella o se le mete detrás. ⚠️ NO MIDE LO MISMO EN TODAS LAS PÁGINAS. En el embudo —carrito y pago— el tema NO imprime la fila de navegación, así que la cabecera baja de 146 px a 93. No es que esté oculta: no está en el DOM, y por eso `:has()` puede distinguirlo. Medido el 2026-08-03: escritorio con navegación 92 (logo) + 53 (nav) = 146 escritorio sin navegación 93 móvil (nav siempre oculta) 129 Si cambia el alto de la cabecera se cambia AQUÍ, no en cada elemento pegajoso. ========================================================================== */ :root { --cabecera: 129px; } @media (min-width: 940px) { /* Por defecto, el embudo: cabecera corta. */ :root { --cabecera: 93px; } /* Y si la fila de navegación está en la página, la cabecera es la alta. */ body:has(.top__nav) { --cabecera: 146px; } } /* ⚠️ EL RESUMEN DEL CARRITO ESTABA MAL DESDE EL PRINCIPIO: usaba `top:78px` contra una cabecera de 146, así que al hacer scroll se escondía 68 px por debajo. Ahora ambos salen de la misma variable. */ .res { top: calc(var(--cabecera) + var(--s4)); } /* La galería se queda a la vista mientras se lee la columna de compra. ⚠️ SOLO EN ESCRITORIO. En móvil las dos columnas se apilan y pegar la galería dejaría el precio y el botón empujados fuera de la pantalla. Funciona porque `.pdp__g` ya tiene `align-items:start` —sin eso el elemento se estiraría a toda la altura de la fila y no tendría margen para desplazarse— y porque ningún ancestro corta con `overflow`. Comprobado: galería 598 px contra 1.656 de la columna de compra, así que hay recorrido de sobra. */ @media (min-width: 940px) { .pdp__gal { position: sticky; top: calc(var(--cabecera) + var(--s4)); } } /* ========================================================================== DIRECTORIO DE MARCAS ========================================================================== */ /* El índice de letras: una fila de saltos, no una lista. */ .abc { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s5) var(--s7); padding-bottom: var(--s4); border-bottom: 1px solid var(--hilo); } .abc a { min-width: 30px; padding: 5px 8px; font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .08em; color: var(--humo); text-align: center; text-decoration: none; border: 1px solid var(--hilo); border-radius: var(--r-sm); transition: color .15s ease, border-color .15s ease; } .abc a:hover { color: var(--tinta); border-color: var(--humo); } .abc__g { margin-bottom: var(--s7); } /* ⚠️ `scroll-margin-top` DEJA SITIO A LA CABECERA PEGAJOSA. Sin esto, al saltar a una letra el título quedaba justo debajo de la cabecera y no se veía. */ .abc__g { scroll-margin-top: calc(var(--cabecera) + var(--s4)); } .abc__t { font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .14em; color: var(--humo); padding-bottom: var(--s3); margin-bottom: var(--s5); border-bottom: 1px solid var(--hilo); } .marcas { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .casa { display: block; padding: var(--s5) var(--s4); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-sm); text-align: center; text-decoration: none; transition: border-color .15s ease; } .casa:hover { border-color: var(--tinta); } /* ⚠️ LA TARJETA SE LLAMA `.casa`, NO `.marca`. `.marca` YA EXISTE: es el enlace del logotipo en la cabecera y en el pie (`critico.css` le da la tipografía display). Llamar igual a la tarjeta del directorio convertía el logotipo del sitio en un recuadro blanco con borde. Se usa "casa" —casa de perfumería—, que además es el término que ya usa la banda de la portada. Alto fijo para que la rejilla no baile entre marcas con logo y sin él. */ .casa__im { display: grid; place-items: center; height: 62px; margin-bottom: var(--s3); } .casa__logo { max-width: 100%; max-height: 62px; object-fit: contain; } /* Sin logo, el nombre compuesto ES la imagen: en una tienda de perfumes la tipografía es parte del producto, y un recuadro vacío no lo es. */ .casa__txt { font-family: var(--display); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 100; font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; color: var(--tinta); } .casa__n { display: block; font-size: .9rem; color: var(--tinta); } .casa__c { display: block; margin-top: 3px; font-family: var(--dato); font-size: var(--fs-dato); letter-spacing: .05em; color: var(--humo); } /* ⚠️ SIN LOGO, EL NOMBRE DEBAJO SOBRA — la regla estaba al revés. Cuando no hay imagen, el nombre compuesto YA es lo que se ve arriba, así que repetirlo debajo lo escribía dos veces en la misma tarjeta ("ADIDAS / adidas"). Con logo sí se conserva: un logotipo puede ser un símbolo y no decir la marca. */ .casa:has(.casa__txt) .casa__n { display: none; } /* Y entonces el conteo sube a ocupar su sitio. */ .casa:has(.casa__txt) .casa__c { margin-top: 0; } /* ========================================================================== PALABRAS OCULTAS A LA VISTA, PRESENTES EN EL HTML ⚠️ NO ES `display:none`. Eso las borraría también para los lectores de pantalla y para el buscador. El recorte de 1px las saca de la vista dejándolas en el documento — el patrón estándar de WordPress para `screen-reader-text`. ========================================================================== */ .solo-lectores { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Con los rótulos ya cortos, la barra cabe en una línea: se impide que una entrada se parta por la mitad y se reparte el espacio sobrante. */ .top__nav ul { flex-wrap: nowrap; } .top__nav li { white-space: nowrap; } /* ========================================================================== PRIMERA PANTALLA DE LA FICHA EN MÓVIL Medido el 2026-08-03 en 375×812, que es por donde entra el 87% del tráfico y donde caen los anuncios: el nombre del perfume quedaba en 721 px y el precio en 963. El cliente veía un logo, unas migas y una foto — ni qué perfume era, ni cuánto costaba. Nada de esto reduce el registro editorial: solo recorta el espacio que se gastaba en llegar al precio. ========================================================================== */ @media (max-width: 859px) { /* Las migas no se ven, pero SIGUEN EN EL HTML. ⚠️ `display:none`, no borrarlas de la plantilla: el rastro de navegación es una señal de estructura para el buscador y Yoast lo publica además como datos estructurados. Quien llega de un anuncio no las usa —viene de fuera, no de una categoría— y ocupan 56 px justo encima de la foto. */ .pdp__mig { display: none; } /* ⚠️ NO PONER AQUÍ `.pdp__big { aspect-ratio: 5/4 }`. YA SE INTENTÓ Y ROMPIÓ DOS COSAS A LA VEZ (2026-08-04): 1. La caja apaisada es MÁS ANCHA que la foto, que es cuadrada sobre fondo blanco. El frasco dejaba de estar centrado y le salía un apéndice de blanco a la derecha. 2. La rejilla de la galería pasaba a resolver la fila de miniaturas como `0px`. Las miniaturas seguían midiendo 62 y por tanto SE DESBORDABAN encima del texto de la marca que va justo debajo. Le puse `height: 62px` a la fila creyendo que la arreglaba: solo tapó el síntoma —la fila seguía en 0— y el desbordamiento se quedó. La foto cuadrada cuesta 69 px de alto y no rompe nada; se pagan. */ } /* ========================================================================== CABECERA MÓVIL: DOS FILAS, Y EL BUSCADOR COMO CAMPO DE VERDAD ⚠️ AQUÍ ESTUVO LA "CABECERA DE UNA SOLA FILA" Y SE RETIRÓ (2026-08-04). Metía logo + MENÚ + buscador + cuenta + carrito en 390 px y ahorraba 64 px de alto, pero el precio real fueron tres estropicios: · El buscador se plegaba a una lupa de 30 px. En una tienda de perfumes se busca por marca todo el rato: es de las funciones más usadas y quedó convertida en un icono. · Para que cupiera le quité `margin-left:auto` a `.top__acc`. Sin eso, cuenta y carrito dejaban de anclarse al borde derecho y se quedaban amontonados en mitad de la fila, con 66 px muertos a su derecha. · El logotipo bajaba a 118 px. Sesenta y cuatro píxeles no valen el buscador de una tienda. Las dos filas vuelven, y la segunda —que antes era un filete finito— pasa a ser un campo con caja, que es lo que la gente reconoce como buscador. ========================================================================== */ @media (max-width: 899px) { /* Campo con caja, no un subrayado. El filete inferior era elegante y pasaba desapercibido; para la función más usada del sitio eso es un defecto. */ .top__buscar { height: 42px; padding: 0 var(--s4); background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--r-md); } .top__buscar:hover, .top__buscar:focus-within { border-color: var(--tinta); } .top__buscar input { flex: 1; min-width: 0; font-size: .95rem; } /* El aire de la fila se queda como estaba: el campo ya creció 8 px y no hace falta pagar otros 4 de margen. */ .top__util { gap: var(--s4); } } /* ========================================================================== EL AURA — el lienzo del humo ⚠️ `position: fixed` Y AL FONDO DE TODO. El humo acompaña la pagina entera, no una seccion: si viviera dentro de un bloque, cada vez que ese bloque saliera de pantalla el aroma desapareceria de golpe. `pointer-events:none` es obligatorio — sin eso el lienzo se traga los clics de toda la pagina, incluido el boton de comprar. ========================================================================== */ .aura { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* El contenido flota por encima del humo. `.top` y lo que flota ya llevan sus propios z-index altos; esto cubre el cuerpo de las paginas. */ .pdp, .cat, .carro, .sec, .evid, main > * { position: relative; z-index: 1; } /* ========================================================================== LA FIRMA DEL PIE — "Perfumaste" monumental en trazo hueco Cierra todas las paginas. Recortada por el borde inferior a proposito (`line-height` corto + margen negativo + overflow del footer): una palabra entera a este tamano seria un cartel; asomando, es una firma. ========================================================================== */ .foot { overflow: hidden; } .foot__firma { font-weight: 700; font-size: clamp(72px, 15.5vw, 230px); letter-spacing: -.05em; line-height: .72; text-align: center; white-space: nowrap; color: transparent; margin-bottom: -.14em; padding-top: clamp(16px, 2.4vw, 36px); user-select: none; /* LAS LETRAS SE DESVANECEN. Relleno de color plano recortado por la forma de la letra (`background-clip:text`) que se apaga hacia el pie hasta desaparecer. ⚠️ SIN TEXTURA, por orden del dueno (2026-08-09): se probo una turbulencia fractal dentro de las letras y la devolvio — "que sea mas bien un color solido pero degradado hacia abajo". ⚠️ SIN CONTORNO tampoco (misma orden, minutos despues): el trazo hueco es de donde venia esta firma, y con relleno propio sobraba — marcaba el borde de letras que ya se estaban desvaneciendo. Nada de `-webkit-text-stroke` aqui. */ background-image: linear-gradient(to bottom, rgba(240, 238, 234, .30) 0%, rgba(240, 238, 234, .17) 42%, rgba(240, 238, 234, .06) 74%, rgba(240, 238, 234, 0) 100%); -webkit-background-clip: text; background-clip: text; /* Y el conjunto se disuelve hacia abajo en vez de cortarse en seco. */ -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.45) 100%); mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.45) 100%); } /* El renglon de cierre: filete, quien vende, año y ciudad. */ .foot__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-top: var(--s5); margin-top: var(--s7); border-top: 1px solid rgba(240, 238, 234, .1); } .foot__legal { color: #7E837A; } /* Los simuladores de las financieras: PLACA BLANCA para que no se pierdan sobre el marmol — orden del dueno (2026-08-09). Sus marcos y logos son su marca y no se tocan. ⚠️ ADDI NECESITA LAS DOS MITADES, y por eso fallo dos veces: su contenido vive en shadow DOM y sus areas internas (el circulo del logo y la franja del texto) venian en `transparent`, asi que con la placa puesta dejaban ver el marmol por dentro y se leian como un RECUADRO INTERNO. La otra mitad se arregla en la configuracion del propio plugin (wp_wc_addi_config: conf_widgetBadgeBackgroundColor y conf_widgetInfoBackgroundColor = #FFFFFF). Si algun dia vuelve el recuadro, mirar ahi antes que aqui. El radio 8px es el del marco azul de Addi. */ app-simulator{ display:block; background:var(--blanco); border-radius:var(--r-md); } addi-product-widget{ display:block; background:var(--blanco); border-radius:8px; }