/* ── 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 (min-width:1280px){[data-rama="movil"]{display:none} [data-rama="escritorio"]{display:contents}} @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} @media (min-width:1280px){.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-curso{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:18px 0;border-bottom:1px solid #E3E3E3} .on-curso-n{font-family:'Bodoni Moda',serif;font-size:20px;line-height:1.2;color:#C9C9C7} .on-curso-fecha{grid-column:2;margin-top:10px} @media (min-width:900px){.on-curso{grid-template-columns:52px 1fr auto;gap:20px;padding:22px 0} .on-curso-n{font-size:26px;line-height:1} .on-curso-fecha{grid-column:auto;margin-top:0;text-align:right;white-space:nowrap}} .on-prog a:focus-visible,.on-prog button:focus-visible{outline:2px solid #0B0B0B;outline-offset:2px} .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;} /* z-index explícito: el pie pegajoso compite con las tarjetas del carril de venta cruzada durante el scroll con inercia de iOS, y con z auto Safari pintaba los «Agregar» ENCIMA del subtotal (capturas del cliente, 2026-08-28). El fondo es opaco por la misma razón. */ .organic_nails-scv-pie{position:sticky; bottom:0; z-index:2; 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 AQUÍ, anclado al data-producto que la propia pasada del enlace garantiza en la raíz de toda tarjeta (lo necesita favoritos). Antes lo ponía un replace del generador que buscaba el marcado de PowerCar (data-reveal + border-radius:22px): con la anatomía de Organic no casaba NUNCA y no avisaba, así que el ::after se estiraba hasta el body — medido en el teléfono del cliente: los siete pseudo-elementos del carril de la portada y los 24 de la tienda cubrían la PÁGINA ENTERA apilados, y cualquier tap abría el ÚLTIMO producto pintado. Con el ancla en el atributo vale para cualquier anatomía y no puede dejar de casar en silencio. (button[data-producto] queda fuera a propósito: el corazón de la ficha también lleva el atributo y no es una tarjeta.) */ div[data-producto], li[data-producto], article[data-producto]{position:relative;} .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