/* ── 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-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;}
[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}
[data-superpuesta="aviso"]{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:400}

/* 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}
[data-carril]::-webkit-scrollbar{display:none}
[data-carril][data-arrastrando]{scroll-behavior:auto;cursor:grabbing}

/* 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 ── */


/* ── 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 ── */

/* ── 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 crédito de la agencia: el color y el tamaño son los de la barra legal del
   diseño. Sólo se distingue al pasar por encima, que es lo que hace un enlace. */
.organic_nails-credito{color:var(--pc-gris); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.18);}
.organic_nails-credito:hover{color:var(--pc-amarillo); border-bottom-color:var(--pc-amarillo);}

/* ── El mega-menú de «Tienda» ─────────────────────────────────────────────────
   El vidrio y la sombra son los del diseño (línea 218). Lo que cambia es que
   abre por CSS en vez de por manejadores de ratón: así también abre con el
   teclado, que con onMouseEnter no lo hacía.

   El contenedor de la entrada del menú ya trae position:relative del diseño. */
.organic_nails-mega{
  position:absolute; top:calc(100% + 10px); left:50%;
  padding:20px; border-radius:20px; z-index:90;
  background:rgba(16,15,12,0.92);
  backdrop-filter:blur(30px) saturate(150%); -webkit-backdrop-filter:blur(30px) saturate(150%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 44px 90px -30px rgba(0,0,0,0.9);
  display:grid; gap:18px;
  /* Cerrado se va del flujo del ratón, no sólo de la vista: con visibility
     puesta seguiría tapando lo que hay debajo del menú. */
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .28s cubic-bezier(0.22,1,0.36,1), transform .28s cubic-bezier(0.22,1,0.36,1), visibility .28s;
}
.organic_nails-mega:hover,
*:hover > .organic_nails-mega,
*:focus-within > .organic_nails-mega{opacity:1; visibility:visible; transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  .organic_nails-mega{transition:none; transform:none;}
}

.organic_nails-mega-punta{
  position:absolute; top:-8px; left:50%; margin-left:-7px; width:14px; height:14px;
  background:rgba(16,15,12,0.92);
  border-left:1px solid rgba(255,255,255,0.12); border-top:1px solid rgba(255,255,255,0.12);
  transform:rotate(45deg);
}
.organic_nails-mega-cat{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:12px; color:var(--pc-texto);
  text-decoration:none; transition:background .25s;
}
.organic_nails-mega-cat:hover{background:rgba(255,212,0,0.10);}
.organic_nails-mega-dest{
  border-radius:14px; padding:16px; text-decoration:none;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  transition:border-color .25s;
}
.organic_nails-mega-dest:hover{border-color:rgba(255,212,0,0.4);}
.organic_nails-mega-dest img{max-height:80px; width:auto; display:block;}

/* En el teléfono el menú de escritorio no se pinta, así que el mega tampoco
   tiene dónde abrirse. Fuera, para que ni ocupe ni se abra por un toque. */
@media (max-width:1023px){
  .organic_nails-mega{display:none;}
}

/* ── El panel del carrito ─────────────────────────────────────────────────────
   El vidrio, el radio y la sombra son los del mini-carrito de v5 (línea 264 del
   diseño). Lo que cambia es que ocupa el alto de la pantalla y entra desde el
   borde, no que sea otro lenguaje visual.

   El ancho: 380px en vez de los 320 de la tarjeta, porque aquí cada línea lleva
   además la pastilla de cantidad y el botón de quitar. Con 320 los tres se
   pisan. */
.organic_nails-sc-fondo{
  position:fixed; inset:0; z-index:190; background:rgba(0,0,0,0.55);
  opacity:0; transition:opacity .3s ease;
}
.organic_nails-sc-fondo.pc-sc-ve{opacity:1;}

.organic_nails-sc{
  position:fixed; top:0; right:0; bottom:0; z-index:200;
  width:380px; max-width:92vw;
  display:flex; flex-direction:column;
  background:rgba(16,15,12,0.92);
  backdrop-filter:blur(30px) saturate(150%); -webkit-backdrop-filter:blur(30px) saturate(150%);
  border-left:1px solid rgba(255,255,255,0.12);
  box-shadow:0 44px 90px -30px rgba(0,0,0,0.9);
  transform:translateX(100%); transition:transform .34s cubic-bezier(0.22,1,0.36,1);
}
.organic_nails-sc.pc-sc-ve{transform:translateX(0);}

/* Sin transición si el visitante la pidió apagada. El resto del sitio ya lo
   respeta; el panel es lo único que se movía sin preguntarlo. */
@media (prefers-reduced-motion:reduce){
  .organic_nails-sc, .organic_nails-sc-fondo{transition:none;}
}

.organic_nails-sc-cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 18px 14px; border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0;
}
.organic_nails-sc-rotulo{
  font-family:var(--pc-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--pc-gris);
}
.organic_nails-sc-x{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:10px; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16); cursor:pointer; color:var(--pc-texto);
  transition:border-color .3s, color .3s;
}
.organic_nails-sc-x:hover{border-color:var(--pc-amarillo); color:var(--pc-amarillo);}

/* El cuerpo es el que se sustituye por fragmentos, así que ES el que scrollea:
   si el scroll colgara de un padre, cada refresco lo devolvería arriba. */
.organic_nails-sc-cuerpo{
  flex:1; display:flex; flex-direction:column; min-height:0;
  overflow-y:auto; overscroll-behavior:contain; padding:14px 18px 18px;
}

.organic_nails-sc-linea{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.08);
}
.organic_nails-sc-foto{
  width:52px; height:52px; border-radius:10px; flex-shrink:0; padding:4px;
  background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center;
}
.organic_nails-sc-foto img{width:100%; height:100%; object-fit:contain; display:block;}
.organic_nails-sc-datos{flex:1; min-width:0;}
.organic_nails-sc-nombre{
  display:block; font-size:12.5px; font-weight:600; color:var(--pc-texto);
  text-decoration:none; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.organic_nails-sc-nombre:hover{color:var(--pc-amarillo);}
.organic_nails-sc-precio{font-family:var(--pc-mono); font-size:10.5px; color:var(--pc-gris); margin-top:3px;}

/* La misma pastilla − n + de la ficha y del carrito, en pequeño. */
.organic_nails-sc-cant{
  display:inline-flex; align-items:center; gap:2px; margin-top:8px;
  border-radius:10px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
}
.organic_nails-sc-cant button{
  width:26px; height:26px; background:none; border:none; cursor:pointer;
  color:var(--pc-gris); font-family:inherit; font-size:15px; font-weight:700; line-height:1; padding:0;
}
.organic_nails-sc-cant button:hover{color:var(--pc-texto);}
.organic_nails-sc-cant span{
  min-width:22px; text-align:center; font-family:var(--pc-mono);
  font-size:12px; color:var(--pc-texto);
}
.organic_nails-sc-quitar{
  background:none; border:none; cursor:pointer; color:var(--pc-gris);
  padding:2px; flex-shrink:0; line-height:0; transition:color .3s;
}
.organic_nails-sc-quitar:hover{color:#f86368;}

/* El pie no scrollea con las líneas: el total y «Finalizar compra» tienen que
   estar a la vista con el carrito lleno, que es cuando más largo es. */
.organic_nails-sc-pie{
  margin-top:auto; padding-top:14px; position:sticky; bottom:-18px;
  background:linear-gradient(to top, rgba(16,15,12,0.98) 60%, rgba(16,15,12,0));
}
.organic_nails-sc-total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px;}
.organic_nails-sc-cifra{font-family:var(--pc-titulo); font-size:20px; font-weight:700; color:var(--pc-amarillo);}
.organic_nails-sc-cifra .woocommerce-Price-amount{font-family:inherit;}
.organic_nails-sc-btn{
  display:block; width:100%; text-align:center; box-sizing:border-box;
  background:var(--pc-amarillo); color:var(--pc-sobre-acento); border:none; border-radius:12px;
  padding:13px; font-family:inherit; font-size:13.5px; font-weight:700;
  text-decoration:none; cursor:pointer;
}
.organic_nails-sc-btn-fantasma{
  margin-top:8px; background:transparent; color:var(--pc-texto);
  border:1px solid rgba(255,255,255,0.18);
}
.organic_nails-sc-btn-fantasma:hover{border-color:var(--pc-amarillo); color:var(--pc-amarillo);}
.organic_nails-sc-seguir{
  display:block; width:100%; margin-top:10px; background:none; border:none;
  cursor:pointer; font-family:var(--pc-mono); font-size:10.5px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--pc-gris);
}
.organic_nails-sc-seguir:hover{color:var(--pc-texto);}

.organic_nails-sc-vacio{text-align:center; padding:28px 0;}
.organic_nails-sc-vacio p{font-size:13px; color:#c9c4b8; margin:10px 0 20px;}

/* Mientras el servidor responde, el cuerpo se atenúa y no acepta más clics: sin
   esto, tres toques rápidos en «+» mandan tres peticiones y gana la última que
   conteste, que no tiene por qué ser la última que se pidió. */
.organic_nails-sc-cuerpo[data-pc-sc-espera]{opacity:0.5; pointer-events:none;}