/* ── tokens de la capa del generador ── */ :root{--pc-fondo:#FFFFFF; --pc-texto:#0B0B0B; --pc-amarillo:#0B0B0B; --pc-naranja:#B3261E; --pc-gris:#707070; --pc-verde:#1F7A4D; --pc-whatsapp:#25D366; --pc-sobre-acento:#FFFFFF; --pc-linea:#E3E3E3; --pc-texto-suave:#4A4A4A; --pc-panel:#F5F5F4; --pc-panel-borde:#E3E3E3; --pc-fondo-control:#FFFFFF; --pc-caja:#FFFFFF; --pc-radio:2px; --pc-radio-c:2px; --pc-peso:500; --pc-cifra:'IBM Plex Mono',monospace; --pc-vidrio:none; --pc-titulo:Archivo,system-ui,sans-serif; --pc-cuerpo:Archivo,system-ui,sans-serif; --pc-mono:'IBM Plex Mono',monospace;} :root{--on-ink:#0B0B0B; --on-ink-soft:#4A4A4A; --on-ink-mute:#707070; --on-ink-mute-oscuro:#8A8A8A; --on-line:#E3E3E3; --on-line-deep:#C9C9C7; --on-surface:#F5F5F4; --on-signal:#B3261E; --on-ok:#1F7A4D; --on-display:'Bodoni Moda',serif; --on-cuerpo:Archivo,system-ui,sans-serif; --on-mono:'IBM Plex Mono',monospace;} *{box-sizing:border-box} body{margin:0;background:#FFFFFF;color:#0B0B0B;font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty} a{color:#0B0B0B;text-decoration:none} a:hover{color:#4A4A4A} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} input,select{font:inherit} :focus-visible{outline:2px solid #0B0B0B;outline-offset:2px} @keyframes rv{from{clip-path:inset(0 0 100% 0);transform:translateY(6px)}to{clip-path:inset(0 0 -2% 0);transform:none}} @keyframes sl{from{transform:translateX(100%)}to{transform:none}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} [data-ir]{cursor:pointer;} .organic_nails-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .organic_nails-toque{position:relative} .organic_nails-toque::after{content:'';position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;height:44px;min-height:100%} [data-rama]{display:contents} [data-rama="escritorio"]{display:none} @media (min-width:1280px){[data-rama="movil"]{display:none}[data-rama="escritorio"]{display:contents}} /* Comportamiento. Ver INVENTARIO-COMPORTAMIENTOS.md. */ /* Las capas se emiten SIEMPRE y se esconden hasta que se abren: con la regla normal del sc-if desaparecerian del HTML y el boton que las abre no tendria nada que abrir. */ [data-superpuesta][hidden]{display:none!important} /* El envoltorio del aviso NO se posiciona: la caja que se ve ya viene del diseno con su propio position:fixed dentro. Aqui habia un segundo fixed con left:50% y transform, y los dos juntos rompian el aviso: un hijo fixed no aporta ancho a su padre, asi que el envoltorio se encogia a nada, y como llevaba transform pasaba a ser el bloque contenedor del hijo — su max-width:calc(100% - 32px) se resolvia contra esa nada y la caja quedaba en 40 px. Lo que se veia era una columna negra con el nombre del producto partido letra a letra. display:contents lo saca de la caja sin sacarlo del arbol: el hijo vuelve a anclarse al viewport y el aria-live sigue en pie. Dicho corto: doble posicionamiento, y gana el peor de los dos. */ [data-superpuesta="aviso"]{display:contents} /* Carriles. El scrollBy lo hace el JS con los pasos del diseno, pero el arrastre tactil necesita que el carril sea desplazable de verdad. */ [data-carril]{overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;user-select:none;-webkit-user-select:none} [data-carril]::-webkit-scrollbar{display:none} [data-carril][data-arrastrando]{scroll-behavior:auto;cursor:grabbing} [data-carril][data-arrastrando] *{pointer-events:none} /* La tarjeta del carril en el telefono. El tema recorre UNA plantilla de tarjeta (la de escritorio, 268px) en las dos ramas; el diseno movil la pinta a 168. En las vistas estaticas la movil ya mide 168 y el selector no casa. */ @media (max-width:1279px){[data-carril]>div[style*="width:268px"]{width:168px!important}} /* Carrusel: las laminas se apilan en la misma celda y solo una se ve. */ [data-lista="laminas"]{display:grid} [data-lista="laminas"]>*{grid-area:1/1} /* Cabecera compacta. El diseno lo resolvia con «hNav»: 46px cuando esta arriba, 0 al bajar de 80px de scroll. Los dos valores son suyos, no mios. */ [data-cabecera]{transition:none} [data-cabecera][data-compacta] [style*="height:46px"]{height:0!important;overflow:hidden} @media (prefers-reduced-motion:no-preference){ [data-cabecera] [style*="height:46px"]{transition:height .25s cubic-bezier(.22,1,.36,1)} } @media (prefers-reduced-motion:reduce){[data-carril]{scroll-behavior:auto}} .pc-ha60ohe:hover{border-color:#0B0B0B} .pc-h9uk9tl:hover{background:#0B0B0B;color:#fff} .pc-h1dksrir:hover{background:rgba(255,255,255,.14)} /* ── páginas internas ── */ @media (prefers-reduced-motion:no-preference){[data-cabecera] [style*="height:46px"]{transition:height .25s cubic-bezier(.22,1,.36,1)}} .pc-hzh4qyb:hover{transform:scale(1.06)} .on-prog{min-width:auto;max-width:1440px;margin:0 auto;padding:0 20px} .on-prog-cab{display:block} .on-prog-dos{display:grid;grid-template-columns:1fr;gap:44px} .on-prog-hechos{display:grid;grid-template-columns:1fr;gap:0} .on-prog-hechos > li{padding:16px 0;border-bottom:1px solid #E3E3E3} /* El corte es el mismo que declara el diseño (1280): un segundo punto de ruptura propio haría que esta página cambiara de forma donde ninguna otra lo hace. */ .on-prog{padding:0 48px} .on-prog-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:60px} .on-prog-dos{grid-template-columns:1fr 340px;gap:64px} .on-prog-hechos{grid-template-columns:repeat(4,1fr);gap:1px;background:#E3E3E3;border-top:1px solid #E3E3E3;border-bottom:1px solid #E3E3E3} .on-prog-hechos > li{background:#fff;padding:18px 20px;border:0} .on-prog a:focus-visible,.on-prog button:focus-visible{outline:2px solid #0B0B0B;outline-offset:2px} /* Zona de toque de 44 px sin agrandar el enlace a la vista. */ .on-toque::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px} /* ── buscador por vehículo ── */ [data-pc-buscador] select:disabled{opacity:0.5; cursor:not-allowed;} [data-pc-buscador] select:focus{outline:2px solid var(--pc-amarillo); outline-offset:1px;} .organic_nails-buscador [data-pc-res-cards] a{transition:transform .3s cubic-bezier(0.22,1,0.36,1);} .organic_nails-buscador [data-pc-res-cards] a:hover{transform:translateY(-3px);} @media (max-width:767px){ .organic_nails-buscador [data-pc-res-cards]{grid-template-columns:1fr !important;} } /* ── 404 ── */ /* ── cabecera y panel del carrito ── */ /* ── El panel del carrito del diseño: el widget ES el contenido ────────────── minicartEnPanel() sustituye la columna congelada del diseño por el mini-carrito, así que ya no hay bloques hermanos que esconder — la regla vieja (.widget…:not(:empty) ~ div{display:none}) escondía por POSICIÓN y acabó tragándose la cabecera del panel móvil entera. display:contents para que el cuerpo del widget participe del flex del panel. */ .widget_shopping_cart_content{display:contents;} .widget_shopping_cart_content .remove_from_cart_button:hover{color:#B3261E;} /* La composición del panel del diseño (espec 1:1, líneas 978-1061 y 142-224 del diseño): valores de la rama MÓVIL por defecto y los de ESCRITORIO desde 1280, que es donde conmutan las ramas. En móvil scrollea el aside y el pie va pegado abajo; en escritorio scrollea el cuerpo y el pie queda anclado. */ .organic_nails-scv{display:flex; flex-direction:column; min-height:0;} .organic_nails-scv button{border:0; background:none; cursor:pointer; padding:0; font:inherit;} .organic_nails-scv-env{padding:14px 16px; border-bottom:1px solid var(--pc-linea);} .organic_nails-scv-env p{margin:0 0 9px; font-family:var(--pc-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-texto-suave);} .organic_nails-scv-cuerpo{flex:1; padding:0 16px;} .organic_nails-scv-fila{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--pc-linea);} .organic_nails-scv-img{width:68px; height:68px; flex:none; background:var(--pc-panel); padding:6px; box-sizing:border-box;} .organic_nails-scv-img img{width:100%; height:100%; object-fit:contain; display:block;} .organic_nails-scv-nombre{font-size:14px; font-weight:500; line-height:1.35; color:inherit; text-decoration:none;} .organic_nails-scv-fila .remove_from_cart_button{flex:none; color:var(--pc-gris); font-size:13px; text-decoration:none; line-height:1;} .organic_nails-scv-etq{margin:4px 0 0; font-family:var(--pc-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-gris);} .organic_nails-scv-cant{display:inline-flex; align-items:center; border:1px solid var(--pc-linea); height:40px;} .organic_nails-scv-cant button{width:40px; height:40px; color:var(--pc-texto-suave); font-size:15px;} .organic_nails-scv-cant button[disabled]{opacity:.35; cursor:default;} .organic_nails-scv-cant span{width:28px; text-align:center; font-family:var(--pc-mono); font-size:13px;} .organic_nails-scv-sub{font-family:var(--pc-mono); font-size:14px; font-weight:500;} .organic_nails-scv-carril-rotulo{margin:0 0 12px; font-family:var(--pc-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-gris);} .organic_nails-scv-carril{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;} .organic_nails-scv-carta{flex:none; width:126px;} .organic_nails-scv-carta-img{display:block; aspect-ratio:1; background:var(--pc-panel); padding:9%; box-sizing:border-box;} .organic_nails-scv-carta-img img{width:100%; height:100%; object-fit:contain; display:block;} .organic_nails-scv-carta-nombre{margin:7px 0 0; font-size:12px; font-weight:500; line-height:1.3;} .organic_nails-scv-carta-precio{margin:3px 0 0; font-family:var(--pc-mono); font-size:12px; color:var(--pc-texto-suave);} .organic_nails-scv-agregar{display:flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border:1px solid var(--pc-texto); font-size:13px; font-weight:500; border-radius:2px; color:inherit; text-decoration:none; box-sizing:border-box; background:none;} .organic_nails-scv-carta .organic_nails-scv-agregar{margin-top:8px; width:100%; height:36px; font-size:12px;} .organic_nails-scv-pie{position:sticky; bottom:0; background:var(--pc-fondo); border-top:1px solid var(--pc-linea); padding:16px; margin-top:auto;} .organic_nails-scv-pie-linea{display:flex; align-items:baseline; justify-content:space-between;} .organic_nails-scv-pie-rotulo{font-family:var(--pc-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-gris);} .organic_nails-scv-cifra{font-family:var(--pc-mono); font-size:22px; font-weight:500;} .organic_nails-scv-pagar{margin-top:12px; display:flex; align-items:center; justify-content:center; width:100%; height:52px; background:var(--pc-amarillo); color:var(--pc-sobre-acento); font-size:16px; font-weight:500; border-radius:2px; text-decoration:none;} .organic_nails-scv-medios{margin:10px 0 0; text-align:center; font-family:var(--pc-mono); font-size:9px; letter-spacing:.08em; color:var(--pc-gris); text-transform:uppercase;} .organic_nails-scv-ver{display:block; margin:12px auto 0; width:max-content; font-family:var(--pc-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-gris); text-decoration:underline; text-underline-offset:3px;} .organic_nails-scv[data-pc-sc-espera] .organic_nails-scv-cuerpo{opacity:.5; pointer-events:none;} .organic_nails-scv-vacio{padding:24px 0;} .organic_nails-scv-vacio h2{margin:0; font-size:18px; font-weight:500;} .organic_nails-scv-vacio > p{margin:8px 0 18px; font-size:14px; color:var(--pc-texto-suave);} .organic_nails-scv-sug{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--pc-linea);} .organic_nails-scv-sug-img{width:56px; height:56px; flex:none; background:var(--pc-panel); padding:5px; box-sizing:border-box;} .organic_nails-scv-sug-img img{width:100%; height:100%; object-fit:contain; display:block;} .organic_nails-scv-sug-nombre{margin:0; font-size:13px; font-weight:500; line-height:1.35;} .organic_nails-scv-sug-precio{margin:2px 0 0; font-family:var(--pc-mono); font-size:12px; color:var(--pc-texto-suave);} @media (min-width:1280px){ .organic_nails-scv{flex:1;} .organic_nails-scv-env{padding:18px 28px;} .organic_nails-scv-env p{font-size:11px; margin-bottom:10px;} .organic_nails-scv-cuerpo{overflow-y:auto; overscroll-behavior:contain; padding:0 28px; min-height:0;} .organic_nails-scv-fila{gap:16px; padding:20px 0;} .organic_nails-scv-img{width:76px; height:76px;} .organic_nails-scv-etq{font-size:10px;} .organic_nails-scv-cant{height:34px;} .organic_nails-scv-cant button{width:32px; height:34px;} .organic_nails-scv-cant span{width:30px;} .organic_nails-scv-carril-rotulo{font-size:11px;} .organic_nails-scv-carril{gap:12px;} .organic_nails-scv-carta{width:132px;} .organic_nails-scv-agregar{height:36px;} .organic_nails-scv-carta .organic_nails-scv-agregar{height:32px;} .organic_nails-scv-pie{position:static; padding:22px 28px;} .organic_nails-scv-pie-rotulo{font-size:11px;} .organic_nails-scv-cifra{font-size:24px;} .organic_nails-scv-pagar{margin-top:16px; height:56px;} .organic_nails-scv-medios{margin-top:12px; font-size:10px;} .organic_nails-scv-vacio{padding:32px 0;} .organic_nails-scv-vacio h2{font-size:19px;} .organic_nails-scv-vacio > p{margin-bottom:22px;} .organic_nails-scv-sug{gap:14px;} } /* ── La tarjeta de producto, clicable entera ────────────────────────────────── El título es el único enlace real de la tarjeta y su ::after se estira sobre ella: así toda la tarjeta lleva a la ficha con UN solo enlace en el árbol de accesibilidad, en vez de tres al mismo sitio. Va en site.css y no en woocommerce.css porque la tarjeta también se pinta en la portada, que no es una página de WooCommerce. */ /* OJO con el position: el ::after se estira contra el ancestro POSICIONADO más cercano, y ése tiene que ser la TARJETA. Si el propio enlace llevara position:relative, el ::after cubriría sólo el título y la tarjeta seguiría sin ser clicable — con la particularidad de que el enlace funciona, así que parece que está bien hasta que pinchas en el precio. La tarjeta recibe su position:relative en el generador, al emitirla. */ .organic_nails-card-enlace::after{ content:''; position:absolute; inset:0; z-index:1; /* Sin fondo: es una zona de clic, no una capa que tape el vidrio. */ } /* El botón «Añadir» queda POR ENCIMA del enlace estirado. Sin esto la tarjeta se lo come y añadir al carrito llevaría a la ficha. */ .add_to_cart_button{position:relative; z-index:2;} /* El color del rótulo, en HOJA y no inline. El que sustituye al