/* LOXEL · tienda virtual (NEOX IA) · versión 2
   Reglas sacadas del estudio de tiendas de belleza (Ulta, Sally Beauty, Lookfantastic, Cult Beauty,
   Fenty, Rare Beauty, Olaplex, Bella Piel, O Boticário, Farmatodo):
   - 2 familias: Fraunces (solo títulos) + Figtree (todo lo demás). 3 pesos. Escala 12/14/16/24/40.
   - Un contenedor de 1280 px, un espacio fijo entre secciones (80 px), una sola tarjeta, un solo botón.
   - Casi monocromo: el color lo ponen las fotos. Magenta solo en precios rebajados y promos.
   - Movimiento mínimo: transiciones de 150-300 ms y el fundido de la portada. */

:root {
  --tinta: #16110f;        /* texto · 18.6:1 sobre blanco */
  --gris: #645a55;         /* texto secundario · 6.6:1 sobre blanco */
  --linea: #e8e1db;
  --crema: #f8f4f0;        /* fondo de fotos y bandas */
  --arena: #f1e9e1;
  --blanco: #ffffff;
  --promo: #b8125a;        /* SOLO precios rebajados, % y Ofertas · 6.0:1 sobre blanco */
  --plumi: #6d2bc4;        /* SOLO Plumi · 7.4:1 sobre blanco */
  --ia: linear-gradient(120deg, #efe3ff, #fbe4ef);
  --wa: #0f7a42;           /* verde WhatsApp oscurecido · blanco encima 5.4:1 */
  --r: 8px;
  --f-titulo: 'Fraunces', Georgia, serif;
  --f: 'Figtree', system-ui, -apple-system, sans-serif;
  --sal: cubic-bezier(.2, .8, .2, 1);
  --espacio: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 16px/1.5 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 1em; height: 1em; flex: none; }
h1, h2, h3, .h1 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.contenedor { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 40px; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 8px 16px; }
.saltar:focus { left: 16px; }
.solo-movil { display: none !important; }
.precio, .num { font-variant-numeric: tabular-nums; }

/* Títulos: Fraunces 400, una sola escala */
.titulo { font: 400 32px/1.15 var(--f-titulo); letter-spacing: -.01em; }
.sobre { margin: 0 0 12px; font: 600 12px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.sub { margin: 8px 0 24px; color: var(--gris); max-width: 64ch; }

/* Botón único: píldora negra de 48 px; variantes solo de color */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 28px; border-radius: 99px; border: 1px solid var(--tinta); background: var(--tinta); color: #fff; font: 600 14px/1 var(--f); letter-spacing: .04em; text-decoration: none; transition: background-color .2s, color .2s, transform .15s; white-space: nowrap; }
.btn:hover { background: #3a2f2b; }
.btn:active { transform: scale(.98); }
.btn svg { font-size: 18px; }
.btn-borde { background: transparent; color: var(--tinta); }
.btn-borde:hover { background: var(--tinta); color: #fff; }
.btn-ia { background: var(--ia); border-color: transparent; color: var(--tinta); }
.btn-ia:hover { background: #e8d6ff; }
.btn-wa { background: var(--wa); border-color: var(--wa); }
.btn-wa:hover { background: #0b6435; }
.ancho { width: 100%; }

/* ---------- Cinta y cabecera ---------- */
.promo { background: var(--tinta); color: #fff; text-align: center; font-size: 13px; padding: 9px 16px; }
.promo p { margin: 0; transition: opacity .3s; }
.promo p.sale { opacity: 0; }
.cab { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cab-fila { display: flex; align-items: center; gap: 32px; height: 76px; }
.logo { font: 500 28px/1 var(--f-titulo); letter-spacing: .14em; text-decoration: none; margin: 0; }
.busca { position: relative; flex: 1; max-width: 640px; display: flex; align-items: center; }
.busca > svg { position: absolute; left: 18px; font-size: 18px; color: var(--gris); pointer-events: none; }
.busca input { width: 100%; height: 46px; padding: 0 20px 0 48px; border: 1px solid var(--linea); border-radius: 99px; background: var(--crema); font-size: 15px; transition: border-color .2s, background-color .2s; }
.busca input:focus { outline: none; border-color: var(--tinta); background: #fff; }
.busca input::placeholder { color: #8a7f79; }
.cab-acc { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cab-plumi { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 8px; border: 0; border-radius: 99px; background: var(--ia); font-size: 14px; font-weight: 600; }
.cab-plumi img { width: 24px; height: auto; }
.cab-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; }
.cab-btn:hover { background: var(--crema); }
.cab-btn svg { font-size: 24px; }
.bolsa b { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--tinta); color: #fff; font: 600 11px/18px var(--f); text-align: center; transition: transform .25s var(--sal); }
.bolsa b[data-v="0"] { transform: scale(0); }
.bolsa.pulso b { animation: pulso .4s var(--sal); }
@keyframes pulso { 50% { transform: scale(1.3); } }
.cab-nav { border-top: 1px solid var(--linea); }
.cab-nav .contenedor { display: flex; gap: 32px; height: 48px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.cab-nav a { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; padding: 14px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.cab-nav a:hover { border-color: var(--tinta); }
.cab-nav a.oferta { color: var(--promo); }

/* Sugerencias del buscador (dos bloques: búsquedas y productos, como Sephora) */
.sugerencias { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 24px 48px -24px rgba(22, 17, 15, .35); padding: 16px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; max-height: 70vh; overflow-y: auto; }
.sugerencias h3 { font: 600 12px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.sug-lista { display: grid; gap: 2px; }
.sug-lista button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.sug-lista button:hover, .sug-lista button:focus-visible { background: var(--crema); }
.sug-lista mark { background: none; font-weight: 600; color: inherit; }
.sug-lista .ia { color: var(--plumi); font-weight: 600; }
.sug-prods { display: grid; gap: 4px; }
.sp { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 6px; border-radius: 10px; font-size: 14px; }
.sp:hover, .sp:focus-visible { background: var(--crema); }
.sp img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--crema); }
.sp small { display: block; font-size: 12px; color: var(--gris); }
.sp .precio { font-weight: 600; }
.sug-tonos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sug-tonos button { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linea); background: #fff; border-radius: 99px; padding: 4px 10px 4px 4px; font-size: 13px; }
.sug-tonos i, .mt i { width: 22px; height: 22px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sug-nada { color: var(--gris); font-size: 14px; }
.sug-todo { grid-column: 1 / -1; justify-self: start; border: 0; background: none; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; font-size: 14px; }

/* ---------- Portada: texto a la izquierda sobre fondo liso, foto a la derecha ---------- */
.portada { position: relative; background: var(--arena); height: clamp(460px, 42vw, 580px); overflow: hidden; }
.portada-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.portada-slide.activa { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.portada-slide img { position: absolute; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.portada-slide::before { content: ''; position: absolute; top: 0; bottom: 0; left: 40%; width: 12%; z-index: 1; background: linear-gradient(90deg, var(--arena), rgba(241, 233, 225, 0)); }
.portada-txt { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.portada-txt > * { max-width: 460px; }
.portada h1, .portada .h1 { font: 400 clamp(36px, 4.2vw, 56px)/1.06 var(--f-titulo); letter-spacing: -.015em; margin: 0 0 16px; }
.portada .bajada { margin: 0 0 28px; font-size: 17px; color: #4a403b; }
.portada-puntos { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3; display: flex; gap: 8px; }
.portada-puntos button { width: 28px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(22, 17, 15, .2); transition: background-color .3s, width .3s var(--sal); }
.portada-puntos button[aria-current="true"] { background: var(--tinta); width: 44px; }
.portada-puntos button::after { content: ''; display: block; height: 24px; margin-top: -10px; } /* área táctil */

.beneficios { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--linea); }
.beneficios li { display: flex; align-items: center; gap: 12px; padding: 20px 16px; font-size: 13px; color: var(--gris); }
.beneficios li + li { border-left: 1px solid var(--linea); }
.beneficios svg { font-size: 24px; color: var(--tinta); }
.beneficios b { display: block; color: var(--tinta); font-size: 14px; font-weight: 600; }

/* ---------- Secciones ---------- */
.seccion { margin-top: var(--espacio); }
.seccion > .titulo { margin-bottom: 24px; }

/* Categorías en círculos */
.circulos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.circulo { display: grid; justify-items: center; gap: 12px; text-decoration: none; border: 0; background: none; padding: 0; font-size: 14px; font-weight: 600; text-align: center; }
.circulo span:first-child { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--crema); }
.circulo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--sal); }
.circulo:hover img { transform: scale(1.05); }
.circulo small { display: block; font-size: 12px; font-weight: 400; color: var(--gris); }

/* ---------- Tienda ---------- */
.tienda-cab { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.cuenta { margin: 0; color: var(--gris); font-size: 14px; }
.tienda-cuerpo { display: grid; grid-template-columns: 248px 1fr; gap: 40px; align-items: start; }
.filtros { position: sticky; top: 148px; max-height: calc(100vh - 168px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.filtros-cab { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--tinta); }
.filtros-cab h2 { font: 600 14px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; }
.limpiar { border: 0; background: none; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: var(--gris); padding: 4px 0; }
.grupo { border-bottom: 1px solid var(--linea); }
.grupo summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 14px; font-weight: 600; }
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; rotate: 45deg; translate: 0 -2px; transition: rotate .2s var(--sal); }
.grupo[open] summary::after { rotate: 225deg; translate: 0 2px; }
.grupo .ops { display: grid; gap: 2px; padding-bottom: 16px; }
.op { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.op input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid #b9aea8; border-radius: 4px; display: grid; place-items: center; flex: none; transition: background-color .15s, border-color .15s; }
.op input[type="radio"] { border-radius: 50%; }
.op input:checked { background: var(--tinta); border-color: var(--tinta); }
.op input:checked::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; translate: 0 -1px; }
.op input[type="radio"]:checked::after { width: 6px; height: 6px; border: 0; background: #fff; border-radius: 50%; rotate: 0deg; translate: 0; }
.op span { flex: 1; }
.op small { color: var(--gris); font-size: 12px; }
.op.vacia { opacity: .45; }

.barra { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.busca-tienda { flex: 1; max-width: 360px; position: relative; display: flex; align-items: center; }
.busca-tienda svg { position: absolute; left: 14px; color: var(--gris); }
.busca-tienda input { width: 100%; height: 44px; border: 1px solid var(--linea); border-radius: 99px; padding: 0 16px 0 40px; font-size: 14px; background: #fff; }
.busca-tienda input:focus { outline: none; border-color: var(--tinta); }
.orden { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris); }
.orden select { height: 44px; border: 1px solid var(--linea); border-radius: 99px; padding: 0 40px 0 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2316110f' stroke-width='1.6' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; appearance: none; color: var(--tinta); font-size: 14px; }
.activos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.activos:empty { display: none; }
.activo { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 99px; background: var(--crema); font-size: 13px; }
.activo svg { font-size: 12px; }

.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.card { display: flex; flex-direction: column; }
.card-foto { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--crema); }
.card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.card-foto img.alt { opacity: 0; }
@media (hover: hover) { .card:hover .card-foto img.alt { opacity: 1; } }
.badge { position: absolute; top: 12px; left: 12px; z-index: 1; font: 600 11px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; background: #fff; }
.badge.promo-b { background: var(--promo); color: #fff; }
.card-info { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.card-marca { font: 600 12px/1.2 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.card-nombre { margin: 6px 0 8px; font: 400 15px/1.4 var(--f); }
.card-nombre button { all: unset; cursor: pointer; }
.card-nombre button:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-nombre button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.card-tonos { font-size: 13px; color: var(--gris); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.card-tonos i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: -9px; box-shadow: 0 0 0 1.5px #fff; }
.card-tonos i:last-of-type { margin-right: 4px; }
.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 16px; font-weight: 600; }
.precio s { font-size: 14px; font-weight: 400; color: var(--gris); }
.precio .rebajado { color: var(--promo); }
.precio .por { font-size: 13px; font-weight: 400; color: var(--gris); }
.precio .consulta { font-size: 14px; font-weight: 500; }
.card .btn { margin-top: auto; height: 40px; width: 100%; font-size: 13px; }
.card-info .precio { margin-bottom: 14px; }
.vacio { grid-column: 1 / -1; text-align: center; padding: 56px 16px; background: var(--crema); border-radius: var(--r); }
.vacio p { margin: 0 0 16px; }
.ayuda-plumi { display: flex; align-items: center; gap: 16px; margin-top: 48px; padding: 16px 24px; border-radius: var(--r); background: var(--ia); }
.ayuda-plumi img { width: 48px; height: auto; }
.ayuda-plumi p { margin: 0; flex: 1; font-size: 15px; }

/* ---------- Banner 50/50 (rutina y Plumi) ---------- */
.banner { display: grid; grid-template-columns: 1fr 1fr; background: var(--crema); border-radius: var(--r); overflow: hidden; min-height: 480px; }
.banner-foto { position: relative; }
.banner-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-txt { padding: 56px; align-self: center; }
.banner-txt h2 { font: 400 40px/1.1 var(--f-titulo); letter-spacing: -.01em; margin-bottom: 16px; }
.banner-txt > p { color: var(--gris); margin: 0 0 24px; max-width: 48ch; }
.pasos { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.pasos li { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 8px; border-radius: var(--r); background: #fff; font-size: 14px; }
.pasos img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.pasos b { display: block; font-weight: 600; }
.pasos small { color: var(--gris); }
.pasos .precio { font-size: 14px; padding-right: 8px; }
.rutina-precio { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.precio-oferta { font: 400 32px/1 var(--f-titulo); color: var(--promo); }
.rutina-precio s { color: var(--gris); }
.ahorro { font-size: 13px; font-weight: 600; color: var(--promo); }
.banner-plumi { background: var(--ia); }
.plumi-fig { display: grid; place-items: center; padding: 32px; }
.plumi-fig img { position: static; width: auto; height: auto; max-width: 300px; max-height: 360px; filter: drop-shadow(0 24px 24px rgba(109, 43, 196, .25)); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 40px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 99px; background: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color .2s; }
.chip:hover { border-color: var(--tinta); }

/* ---------- Carta de tonos ---------- */
.pestanas { display: flex; gap: 32px; border-bottom: 1px solid var(--linea); margin-bottom: 20px; }
.pestanas button { border: 0; background: none; padding: 0 0 12px; font-size: 16px; font-weight: 500; color: var(--gris); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-color: var(--tinta); font-weight: 600; }
.familias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.familias button { height: 34px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 99px; background: #fff; font-size: 13px; }
.familias button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.familias small { opacity: .6; margin-left: 4px; }
.tonos-cuerpo { display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start; }
.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 20px 12px; }
.muestra { border: 0; background: none; padding: 0; text-align: center; font-size: 12px; line-height: 1.3; color: var(--gris); }
.muestra i { display: block; width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: box-shadow .2s; }
.muestra b { display: block; color: var(--tinta); font-weight: 600; font-size: 13px; }
.muestra[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tinta); }
.tono-panel { position: sticky; top: 148px; border: 1px solid var(--linea); border-radius: var(--r); padding: 20px; }
.tono-grande { aspect-ratio: 1; border-radius: 6px; margin-bottom: 16px; background-size: contain !important; background-color: #fff !important; } /* el mechón completo, sin recortar */
.tono-panel h3 { font: 400 24px/1.2 var(--f-titulo); margin: 4px 0 6px; }
.tono-panel p { margin: 0 0 16px; font-size: 14px; color: var(--gris); }
.tono-panel .btn { width: 100%; margin-bottom: 8px; }
.link-ia { border: 0; background: none; color: var(--plumi); font-weight: 600; font-size: 14px; padding: 8px 0; }

/* ---------- FAQ ---------- */
.faq-lista { max-width: 880px; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-size: 16px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-size: 22px; font-weight: 300; transition: rotate .2s var(--sal); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: 0 0 20px; color: var(--gris); max-width: 70ch; }

/* ---------- Pie ---------- */
.pie { margin-top: 96px; background: var(--crema); padding: 56px 0 112px; font-size: 14px; color: var(--gris); }
.pie-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.5fr; gap: 40px; }
.pie .logo { color: var(--tinta); font-size: 26px; margin-bottom: 12px; }
.pie h3 { font: 600 12px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); margin-bottom: 14px; }
.pie p { margin: 0; line-height: 1.8; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-nota { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 12px; }

/* ---------- Plumi flotante y chat ---------- */
.plumi-flota { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: flex; align-items: flex-end; gap: 8px; border: 0; background: none; padding: 0; transition: opacity .25s, transform .25s var(--sal); }
.plumi-flota img { width: 56px; height: auto; filter: drop-shadow(0 8px 14px rgba(109, 43, 196, .35)); transition: transform .25s var(--sal); }
.plumi-flota:hover img { transform: translateY(-3px); }
.plumi-globo { margin-bottom: 36px; background: #fff; border: 1px solid var(--linea); padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: 13px; font-weight: 500; box-shadow: 0 12px 24px -16px rgba(22, 17, 15, .5); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--sal); pointer-events: none; }
.plumi-globo.ver { opacity: 1; transform: none; }
body.chat-abierto .plumi-flota { opacity: 0; pointer-events: none; }
.plumi-chat { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 380px; height: min(620px, calc(100dvh - 48px)); display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 32px 64px -24px rgba(22, 17, 15, .45), 0 0 0 1px var(--linea); }
.plumi-chat:not([hidden]) { animation: entra .25s var(--sal); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.plumi-chat > header { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--ia); }
.plumi-chat > header img { width: 36px; height: auto; }
.plumi-chat h2 { font: 600 16px/1.2 var(--f); }
.plumi-chat header p { margin: 0; font-size: 12px; color: var(--gris); }
.plumi-chat header div { flex: 1; }
.cerrar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); display: grid; place-items: center; flex: none; }
.cerrar svg { font-size: 18px; }
.plumi-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.m { max-width: 88%; padding: 10px 14px; font-size: 14px; line-height: 1.5; animation: entra .2s var(--sal); }
.m p { margin: 0 0 6px; }
.m p:last-child { margin: 0; }
.m-plumi { align-self: flex-start; background: var(--crema); border-radius: 14px 14px 14px 4px; }
.m-tu { align-self: flex-end; background: var(--tinta); color: #fff; border-radius: 14px 14px 4px 14px; }
.m-escribe { display: flex; gap: 4px; padding: 14px 16px; }
.m-escribe i { width: 6px; height: 6px; border-radius: 50%; background: var(--plumi); animation: punto 1s infinite; }
.m-escribe i:nth-child(2) { animation-delay: .15s; }
.m-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.m-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; align-self: stretch; scroll-snap-type: x mandatory; }
.mc { flex: 0 0 164px; scroll-snap-align: start; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; font-size: 13px; background: #fff; }
.mc img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--crema); }
.mc div { padding: 10px; }
.mc b { display: block; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.mc .precio { font-size: 14px; }
.mc .acc { display: flex; gap: 6px; margin-top: 8px; }
.mc .acc button { flex: 1; height: 32px; border: 1px solid var(--linea); border-radius: 99px; background: #fff; font-size: 12px; font-weight: 600; }
.mc .acc button.si { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.plumi-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.plumi-chips .chip { height: 34px; font-size: 13px; padding: 0 12px; flex: none; }
.plumi-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linea); }
.plumi-form input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--linea); border-radius: 99px; padding: 0 16px; font-size: 16px; }
.plumi-form input:focus { outline: none; border-color: var(--plumi); }
.plumi-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--plumi); color: #fff; display: grid; place-items: center; }
.plumi-aviso { margin: 0; padding: 0 16px 10px; font-size: 11px; color: var(--gris); }
.m a.wa { display: inline-flex; margin-top: 6px; padding: 8px 14px; border-radius: 99px; background: var(--wa); color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; }

/* ---------- Diálogos ---------- */
dialog { border: 0; padding: 0; color: var(--tinta); }
dialog::backdrop { background: rgba(22, 17, 15, .4); }
dialog[open] { animation: entra .25s var(--sal); }

.ficha { width: min(1120px, calc(100% - 48px)); max-height: calc(100dvh - 48px); border-radius: 16px; background: #fff; overflow: hidden; }
.ficha > .cerrar { position: absolute; right: 16px; top: 16px; z-index: 3; background: #fff; box-shadow: 0 0 0 1px var(--linea); }
.ficha-in { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.ficha-top { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; } /* la galería solo se pega mientras dura la información del producto */
.galeria { position: sticky; top: 0; align-self: start; padding: 24px; }
.galeria-vista { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--crema); }
.galeria-vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.galeria-flechas { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.galeria-flechas button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.galeria-flechas button:first-child svg { rotate: 180deg; }
.galeria-cont { position: absolute; left: 12px; bottom: 12px; background: #fff; border-radius: 99px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.miniaturas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.miniaturas button { aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 6px; overflow: hidden; background: var(--crema); }
.miniaturas button[aria-current="true"] { border-color: var(--tinta); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ficha-info { padding: 48px 48px 40px 16px; }
.ficha-info .card-marca { display: block; margin-bottom: 8px; }
.ficha-info h2 { font: 400 32px/1.15 var(--f-titulo); margin-bottom: 12px; }
.ficha-info > .precio { font-size: 24px; font-weight: 500; margin-bottom: 4px; }
.ficha-info > .precio s { font-size: 16px; }
.contenido { margin: 0 0 20px; font-size: 14px; color: var(--gris); }
.ficha-desc { margin: 0 0 24px; color: #4a403b; }
.selector { margin-bottom: 20px; }
.selector-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.selector-cab b { font-weight: 600; }
.mini-tonos { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 8px; max-height: 152px; overflow-y: auto; padding: 4px; }
.mini-tonos button { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.mini-tonos button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--tinta); }
.campo-tono { display: grid; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.campo-tono input, .checkout input { height: 48px; border: 1px solid var(--linea); border-radius: var(--r); padding: 0 14px; font-size: 16px; width: 100%; background: #fff; }
.campo-tono input:focus, .checkout input:focus { outline: none; border-color: var(--tinta); }
.comprar { display: flex; gap: 12px; margin-bottom: 16px; }
.cantidad { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 99px; }
.cantidad button { width: 40px; height: 46px; border: 0; background: none; font-size: 18px; }
.cantidad output { min-width: 20px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.comprar .btn { flex: 1; }
.garantias { list-style: none; padding: 16px 0; margin: 0 0 8px; display: grid; gap: 10px; font-size: 14px; border-top: 1px solid var(--linea); }
.garantias li { display: flex; gap: 10px; align-items: center; }
.garantias svg { font-size: 20px; }
.acordeon details { border-top: 1px solid var(--linea); }
.acordeon details:last-child { border-bottom: 1px solid var(--linea); }
.acordeon summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; font-weight: 300; font-size: 20px; line-height: 1; transition: rotate .2s var(--sal); }
.acordeon details[open] summary::after { rotate: 45deg; }
.acordeon .cont { padding-bottom: 16px; font-size: 14px; color: #4a403b; }
.acordeon ul, .acordeon ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.acordeon dl { margin: 0; display: grid; gap: 12px; }
.acordeon dt { font-weight: 600; color: var(--tinta); }
.acordeon dd { margin: 2px 0 0; }
.ficha-plumi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding: 14px 16px; border-radius: var(--r); background: var(--ia); }
.ficha-plumi img { width: 28px; height: auto; }
.ficha-plumi p { margin: 0 8px 0 0; font-size: 14px; font-weight: 600; }
.ficha-plumi .chip { height: 32px; font-size: 13px; border-color: transparent; }
.relacionados { padding: 16px 24px 32px; border-top: 1px solid var(--linea); background: #fff; }
.relacionados > h3 { font: 400 24px/1.2 var(--f-titulo); margin: 16px 0 20px; }
.relacionados .grilla { grid-template-columns: repeat(4, 1fr); }
.comprar-fijo { display: none; }

.carrito { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(460px, 100%); display: none; flex-direction: column; background: #fff; }
.carrito[open] { display: flex; animation: lateral .3s var(--sal); }
@keyframes lateral { from { transform: translateX(32px); opacity: 0; } }
.carrito-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--linea); }
.carrito-cab h2 { font: 400 24px/1 var(--f-titulo); }
.carrito-cab .cerrar { background: var(--crema); }
.carrito-cuerpo { flex: 1; overflow-y: auto; padding: 0 24px 16px; overscroll-behavior: contain; }
.linea { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.linea img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--crema); }
.linea b { display: block; font-weight: 500; line-height: 1.3; }
.linea small { color: var(--gris); }
.linea .der { text-align: right; display: grid; justify-items: end; gap: 6px; }
.linea .cantidad button { width: 30px; height: 30px; font-size: 15px; }
.quitar { border: 0; background: none; color: var(--gris); font-size: 12px; text-decoration: underline; padding: 2px 0; }
.carrito-vacio { text-align: center; padding: 48px 0; }
.carrito-vacio img { width: 96px; height: auto; margin: 0 auto 12px; }
.sugerido { margin-top: 16px; padding: 14px; border-radius: var(--r); background: var(--crema); display: flex; gap: 12px; align-items: center; font-size: 14px; }
.sugerido img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.sugerido div { flex: 1; }
.sugerido small { color: var(--gris); }
.sugerido button { height: 34px; padding: 0 14px; border: 1px solid var(--tinta); border-radius: 99px; background: #fff; font-size: 13px; font-weight: 600; }
.checkout h3 { font: 400 22px/1.2 var(--f-titulo); margin: 24px 0 12px; }
.checkout label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.checkout .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout input[aria-invalid="true"] { border-color: var(--promo); }
.opciones { border: 0; padding: 0; margin: 8px 0 14px; display: grid; gap: 8px; }
.opciones legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.opciones label { grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r); margin: 0; cursor: pointer; font-weight: 400; }
.opciones label:has(input:checked) { border-color: var(--tinta); }
.opciones input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinta); }
.opciones b { display: block; font-size: 14px; font-weight: 600; }
.opciones small { color: var(--gris); font-size: 13px; }
.check { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 400 !important; font-size: 13px !important; }
.check input { width: 18px; height: 18px; accent-color: var(--tinta); margin-top: 2px; }
.carrito-pie { padding: 16px 24px 24px; border-top: 1px solid var(--linea); }
#totales div { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; font-variant-numeric: tabular-nums; }
#totales .ahorro-l { color: var(--promo); }
#totales .total { font-weight: 600; font-size: 17px; padding-top: 10px; }
.error { color: var(--promo); font-size: 13px; font-weight: 600; margin: 6px 0; min-height: 1em; }
.mini { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--gris); }

.barra-movil { display: none; }
.velo { position: fixed; inset: 0; z-index: 54; background: rgba(22, 17, 15, .4); }
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 80; translate: -50% 0; background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 99px; font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .25s var(--sal); pointer-events: none; }
.toast.si { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cab-plumi span { display: none; }
  .cab-plumi { padding: 0 10px; }
  .grilla { grid-template-columns: repeat(2, 1fr); }
  .circulos { grid-template-columns: repeat(3, 1fr); }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .beneficios li:nth-child(3) { border-left: 0; }
  .pie-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --espacio: 56px; }
  html { scroll-padding-top: 120px; }
  .contenedor { padding-inline: 16px; }
  .solo-movil { display: inline-flex !important; }
  .cab-fila { height: auto; flex-wrap: wrap; gap: 8px 12px; padding-block: 10px; }
  .busca { order: 3; flex-basis: 100%; max-width: none; }
  .busca input { height: 42px; }
  .logo { font-size: 22px; }
  .cab-nav .contenedor { gap: 24px; height: 44px; }
  .portada { height: auto; }
  .portada-slide { position: relative; display: none; }
  .portada-slide.activa { display: block; }
  .portada-slide img { position: relative; width: 100%; height: 300px; object-position: 70% 25%; }
  .portada-slide::before { display: none; }
  .portada-txt { padding-block: 24px 48px; height: auto; }
  .portada .bajada { font-size: 15px; margin-bottom: 20px; }
  .portada-puntos { bottom: 20px; }
  .beneficios { grid-template-columns: 1fr 1fr; }
  .beneficios li { padding: 14px 8px; font-size: 12px; gap: 8px; }
  .beneficios li:nth-child(odd) { border-left: 0; }
  .beneficios svg { font-size: 20px; }
  .circulos { grid-template-columns: repeat(6, 104px); overflow-x: auto; gap: 16px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .tienda-cuerpo { grid-template-columns: 1fr; }
  .filtros { position: fixed; inset: auto 0 0 0; top: auto; z-index: 55; max-height: 86dvh; background: #fff; border-radius: 16px 16px 0 0; padding: 16px 16px 0; transform: translateY(105%); transition: transform .3s var(--sal); display: flex; flex-direction: column; }
  .filtros.abierto { transform: none; }
  .filtros-cab { gap: 12px; }
  .filtros-cab h2 { flex: 1; }
  .filtros-cuerpo { flex: 1; overflow-y: auto; }
  .filtros-pie { display: block !important; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .barra { flex-wrap: wrap; gap: 8px; }
  .busca-tienda { max-width: none; flex-basis: 100%; }
  .orden { margin-left: auto; }
  .orden span { display: none; }
  .grilla { gap: 28px 12px; }
  .card-nombre { font-size: 14px; }
  .banner { grid-template-columns: 1fr; min-height: 0; }
  .banner-foto { height: 300px; }
  .banner-txt { padding: 28px 20px 32px; }
  .banner-txt h2 { font-size: 30px; }
  .plumi-fig { height: auto; padding: 24px 0 0; }
  .plumi-fig img { max-height: 220px; }
  .tonos-cuerpo { grid-template-columns: 1fr; }
  .tono-panel { position: static; }
  .muestras { grid-template-columns: repeat(4, 1fr); }
  .pestanas { gap: 24px; }
  .ayuda-plumi { flex-wrap: wrap; }
  .ayuda-plumi .btn { width: 100%; }
  .ficha { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .ficha-in { max-height: 100dvh; }
  .ficha-top { grid-template-columns: 1fr; }
  .galeria { position: static; padding: 0; }
  .galeria-vista { border-radius: 0; }
  .miniaturas { padding: 0 16px; }
  .ficha-info { padding: 20px 16px 24px; }
  .ficha-info h2 { font-size: 26px; }
  .relacionados { padding: 8px 16px 24px; }
  .relacionados .grilla { grid-template-columns: 1fr 1fr; }
  .comprar-fijo { display: flex; position: sticky; bottom: 0; z-index: 4; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linea); }
  .comprar-fijo .btn { flex: 1; }
  .sugerencias { grid-template-columns: 1fr; position: fixed; top: auto; left: 8px; right: 8px; margin-top: 8px; max-height: 70dvh; }
  .pie { padding-bottom: 120px; }
  .pie-in { grid-template-columns: 1fr; gap: 28px; }
  .barra-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linea); }
  .barra-movil > * { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linea); border-radius: 99px; background: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
  .barra-movil img { width: 20px; height: auto; }
  .barra-movil svg { font-size: 18px; color: var(--wa); }
  .barra-movil .ver { background: var(--tinta); border-color: var(--tinta); color: #fff; flex: 1.3; }
  .plumi-flota { display: none; }
  .plumi-chat { inset: auto 0 0 0; width: 100%; height: 88dvh; border-radius: 16px 16px 0 0; }
  .carrito { width: 100%; }
  .toast { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Carta de tonos: mechón + modelo de espaldas (liso o crespo) teñidos con el tono elegido */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--crema); margin-bottom: 12px; }
.seg button { flex: 1; height: 36px; border: 0; border-radius: 99px; background: none; font-size: 14px; font-weight: 600; color: var(--gris); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(22, 17, 15, .15); }
.tono-vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tono-vistas .tono-grande { aspect-ratio: 2 / 3; margin: 0; }
.tono-modelo { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 6px; background: #fff; display: block; }
.tono-vistas.sin-modelo { grid-template-columns: 1fr; }
.tono-vistas.sin-modelo .tono-modelo { display: none; }