/* ============================================================
   ESTILOS
   ------------------------------------------------------------
   Para cambiar la marca: editar los colores y fuentes de :root.
   ============================================================ */

:root {
  /* ===== CORE Supplements · Brand Book v1.1 =====
     Azul Core domina (55 %), Tinta (25 %), Papel (15 %), Azul Luz solo para brillos (5 %). */
  --c-azul: #1B3BFF;
  --c-luz: #5B74FF;
  --c-tinta: #060608;
  --c-papel: #F1F3FF;

  /* Alias que usa el resto del sitio */
  --c-marca: #060608;          /* texto fuerte, títulos */
  --c-marca-2: #1B3BFF;
  --c-acento: #1B3BFF;
  --c-suave: #F1F3FF;
  --c-suave-2: #F5F6FF;
  --c-crema: #F1F3FF;
  --c-tarjeta: #F1F3FF;
  --c-lila: #E4E8FF;
  --c-oscuro: #060608;
  --c-fondo: #FFFFFF;
  --c-texto: #060608;
  --c-gris: #5B5E70;
  --c-gris-2: #6B6E82;
  --c-gris-3: #A5A8BC;
  --c-borde: #E1E4F2;
  --c-blanco: #FFFFFF;
  --c-ok: #16875A;
  --c-estrella: #1B3BFF;
  --c-tarjeta-2: #FFFFFF;
  --c-rebaja: #1B3BFF;

  /* Una sola familia: Geist (SIL OFL) */
  --f-titulo: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --f-texto: 'Geist', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-letra: 'Geist', 'Helvetica Neue', sans-serif;

  /* Grano de película que usa la marca sobre azul y tinta */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  /* Patrón de cápsulas (la C repetida) para fondos */
  --patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140' viewBox='0 0 358 422'%3E%3Cg fill='%23ffffff' fill-opacity='.10'%3E%3Crect x='0' y='82' width='45' height='258' rx='22.5'/%3E%3Crect x='63' y='28' width='45' height='367' rx='22.5'/%3E%3Crect x='125' y='5' width='45' height='160' rx='22.5'/%3E%3Crect x='125' y='258' width='45' height='159' rx='22.5'/%3E%3Crect x='188' y='0' width='45' height='115' rx='22.5'/%3E%3Crect x='188' y='305' width='45' height='117' rx='22.5'/%3E%3Crect x='251' y='5' width='45' height='141' rx='22.5'/%3E%3Crect x='251' y='277' width='45' height='140' rx='22.5'/%3E%3Crect x='313' y='28' width='45' height='90' rx='22.5'/%3E%3Crect x='313' y='304' width='45' height='91' rx='22.5'/%3E%3C/g%3E%3C/svg%3E");

  --radio: 14px;
  --radio-lg: 20px;
  --sombra: 0 10px 30px rgba(6, 6, 8, .07);
  --sombra-lg: 0 24px 60px rgba(6, 6, 8, .16);
  --ancho: 1600px;
  --lado: 60px;
  --alto-enc: 68px;
  --espaciado: .08em;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-fondo); color: var(--c-texto);
  font: 400 16px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.bloqueado { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--c-marca); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.seccion { padding: 72px 0; }
.titulo {
  font-family: var(--f-titulo); font-weight: 500; color: var(--c-marca);
  letter-spacing: -.015em; line-height: 1.1;
}
.titulo-seccion { font-size: clamp(1.5rem, 2.2vw, 1.9rem); text-align: center; margin-bottom: 32px; }
.gorro-seccion { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-marca); }
.letra { font-family: var(--f-letra); font-weight: 400; letter-spacing: 0; }
.ic { width: 22px; height: 22px; flex: none; }
.solo-movil { display: none !important; }
.mini-emoji { display: inline-block; width: 1.6em; }

/* ---------- Botones ---------- */
.boton {
  --b: var(--c-azul); --t: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border: 1.5px solid var(--b); border-radius: 100px;
  background: var(--b); color: var(--t); font-weight: 500; font-size: 15px; line-height: 1;
  text-decoration: none; text-align: center; transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.boton:hover { --b: #0F2BE0; }
.boton:active { transform: scale(.98); }
.boton-claro { --b: #fff; --t: var(--c-tinta); }
.boton-claro:hover { --b: var(--c-papel); }
.boton-borde { background: transparent; color: var(--c-tinta); --b: var(--c-tinta); }
.boton-borde:hover { background: var(--c-tinta); color: #fff; }
.boton-sm { padding: 10px 18px; font-size: 13px; }
.boton-grande { padding: 18px 32px; font-size: 16px; }
.boton-bloque { display: flex; width: 100%; }
.boton.agregado { --b: var(--c-ok); }
.ms {
  font-family: 'Material Symbols Sharp'; font-weight: normal; font-style: normal; font-size: 28px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga'; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; user-select: none;
}
.detalle, .gorro-mini { font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.titulo-grande { font-size: clamp(2rem, 3.6vw, 3.3rem); font-weight: 500; line-height: 1.04; letter-spacing: -.025em; }
.cabeza-seccion { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; color: var(--c-azul); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; }
.enlace-flecha .ic { width: 18px; height: 18px; transition: transform .2s; }
.enlace-flecha:hover .ic { transform: translateX(3px); }
.icono-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--c-marca); position: relative;
  transition: background .2s;
}
.icono-btn:hover { background: var(--c-suave-2); }
.icono-btn .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--c-borde);
  border-radius: 999px; background: #fff; color: var(--c-marca); font-size: 13px; font-weight: 500; text-decoration: none;
  transition: border-color .2s, background .2s; white-space: nowrap;
}
.chip:hover { border-color: var(--c-marca); }
.chip.activo { background: var(--c-marca); border-color: var(--c-marca); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Aviso superior ---------- */
.aviso { background: var(--c-azul); color: #fff; font-size: 13px; font-weight: 400; text-align: center; letter-spacing: .01em; }
.aviso-pista { position: relative; height: 34px; overflow: hidden; }
.aviso-msj {
  position: absolute; inset: 0; display: block; line-height: 34px; padding: 0 16px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aviso-msj.activo { opacity: 1; transform: none; }
.aviso b { font-weight: 600; }

/* ---------- Encabezado ---------- */
.encabezado { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--c-borde); }
.encabezado-fila {
  margin: 0 auto; padding: 0 var(--lado); height: var(--alto-enc);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.encabezado-fila > .logo { justify-self: start; }
.nav-principal { display: flex; align-items: center; justify-content: center; gap: 40px; height: 100%; }
.nav-item { height: 100%; display: flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none;
  color: var(--c-tinta); font-weight: 500; font-size: 16px; letter-spacing: 0; text-decoration: none; transition: color .2s;
}
.nav-link:hover, .con-mega.abierto > .nav-link { color: var(--c-azul); }
.logo { text-decoration: none; display: inline-flex; color: var(--c-marca); }
.logo-core { display: inline-flex; align-items: center; gap: .5em; font-size: 16px; color: var(--c-tinta); }
.logo-iso { height: 2.1em; width: auto; flex: none; color: var(--c-azul); }
.logo-palabra { display: grid; font-weight: 500; line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.logo-negativo, .logo-negativo .logo-iso, .logo-claro .logo-iso { color: #fff; }
.logo-sobre-negro { color: #fff; }
.logo-sobre-negro .logo-iso { color: var(--c-azul); }
.logo-img { display: block; height: 46px; width: auto; }
.panel-cabeza .logo-img, .pedido-enc .logo-img { height: 42px; }
.club-logo .logo-img { height: 38px; margin: -8px 0 0 -8px; }
.pie-firma .logo-img { height: clamp(64px, 9vw, 132px); margin-left: -2.2%; }
.caja-envio .logo-img { height: clamp(34px, 4vw, 54px); }
.bienvenida-logo .logo-img { height: 44px; }
.acciones { justify-self: end; display: flex; align-items: center; gap: 6px; }
.enc-ayuda { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--c-marca); text-decoration: none; font-size: 15px; font-weight: 500; }
.enc-ayuda .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.enc-ayuda:hover span { text-decoration: underline; text-underline-offset: 3px; }
.contador {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--c-azul); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* Mega menú */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--c-borde);
  box-shadow: 0 24px 40px rgba(0, 0, 0, .08); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.con-mega.abierto .mega { opacity: 1; visibility: visible; transform: none; }
.mega-interior { max-width: 1440px; margin: 0 auto; padding: 36px 40px 40px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 32px; }
.mega-titulo { font-size: 12px; font-weight: 600; letter-spacing: var(--espaciado); text-transform: uppercase; color: var(--c-marca); margin-bottom: 14px; }
.mega-col a { display: block; padding: 5px 0; color: var(--c-gris); text-decoration: none; font-size: 15px; }
.mega-col a:hover { color: var(--c-marca); }
.mega-col .mini-emoji { display: none; }
.mega-promo { display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; text-decoration: none; background: var(--fondo); }
.mega-promo-arte { aspect-ratio: 4 / 3; padding: 10px; display: grid; place-items: center; }
.mega-promo-arte svg { height: 100%; transition: transform .3s; }
.mega-promo:hover svg { transform: scale(1.05); }
.mega-promo-texto { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 600; color: var(--c-marca); font-size: 12px; letter-spacing: var(--espaciado); text-transform: uppercase; }
.mega-promo-texto .ic { width: 16px; height: 16px; }

/* ---------- Paneles laterales ---------- */
.capa { position: fixed; inset: 0; z-index: 90; background: rgba(15, 18, 40, .45); opacity: 0; transition: opacity .3s; }
.capa.visible { opacity: 1; }
.panel {
  position: fixed; top: 0; bottom: 0; z-index: 100; width: min(440px, 100%); background: #fff;
  display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
}
.panel.abierto { transform: none; visibility: visible; }
.panel-der { right: 0; transform: translateX(100%); }
.panel-izq { left: 0; transform: translateX(-100%); width: min(380px, 92%); }
.panel-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--c-borde); }
.panel-pie { padding: 16px 22px 22px; border-top: 1px solid var(--c-borde); }
.menu-movil { flex: 1; overflow-y: auto; padding: 8px 22px; }
.menu-movil > a, .menu-movil summary {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--c-borde);
  font-weight: 500; font-size: 18px; color: var(--c-marca); text-decoration: none;
}
.menu-movil .mini-emoji { display: none; }
.menu-movil summary::after { content: '+'; font-weight: 400; font-size: 22px; line-height: 1; transition: transform .2s; }
.menu-movil details[open] summary::after { transform: rotate(45deg); }
.menu-movil ul { padding: 6px 0 12px; }
.menu-movil ul a { display: block; padding: 8px 0; text-decoration: none; color: var(--c-gris); font-size: 16px; }

/* Bolsa */
.bolsa-titulo { font: 600 16px var(--f-texto); color: var(--c-marca); letter-spacing: .1em; text-transform: uppercase; }
.bolsa-titulo small { font-weight: 400; color: var(--c-gris); font-size: 13px; letter-spacing: 0; text-transform: none; }
.bolsa-cuerpo { flex: 1; overflow-y: auto; padding: 18px 22px; }
.bolsa-pie { padding: 0 22px 20px; border-top: 1px solid var(--c-borde); background: #fff; }
.bolsa-pie:empty { display: none; }
.bolsa-vacia { text-align: center; }
.bolsa-vacia .titulo { font-size: 22px; margin: 14px 0 22px; }
.atajos { display: grid; gap: 10px; margin-bottom: 18px; }
.atajo {
  display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--c-borde); border-radius: 14px; text-decoration: none; color: var(--c-marca); font-weight: 500; text-align: left;
  transition: border-color .2s, transform .2s;
}
.atajo:hover { border-color: var(--c-marca); transform: translateX(2px); }
.atajo-arte { background: var(--fondo); border-radius: 10px; aspect-ratio: 1; display: grid; place-items: center; }
.atajo .ic { width: 18px; height: 18px; }
.bolsa-confianza { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--c-gris); }
.bolsa-confianza .ic { width: 18px; height: 18px; color: var(--c-ok); }
.envio-barra { background: var(--c-suave-2); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; color: var(--c-marca); }
.barra { height: 8px; background: #fff; border-radius: 999px; margin-top: 8px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--c-marca); border-radius: inherit; transition: width .5s; }
.bolsa-lista { display: grid; gap: 14px; }
.bolsa-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--c-borde); }
.bolsa-item-arte, .sugerido-arte, .buscador-arte { background: var(--fondo); border-radius: 12px; aspect-ratio: 1; display: grid; place-items: center; }
.bolsa-item-nombre { display: block; font-weight: 600; color: var(--c-marca); text-decoration: none; line-height: 1.3; font-size: 14.5px; }
.bolsa-item-var { font-size: 12.5px; color: var(--c-gris); margin-top: 2px; }
.etiqueta-plan { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--c-suave); color: var(--c-marca); font-size: 11.5px; font-weight: 600; }
.etiqueta-plan .ic { width: 13px; height: 13px; }
.bolsa-item-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.bolsa-item-precio { font-weight: 600; font-size: 14px; text-align: right; }
.bolsa-item-precio s, .tarjeta-precio s { color: var(--c-gris); font-weight: 400; }
.bolsa-quitar { width: 34px; height: 34px; color: var(--c-gris); }
.bolsa-quitar .ic { width: 18px; height: 18px; }
.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--c-borde); border-radius: 999px; height: 36px; }
.cantidad button { width: 34px; height: 100%; border: 0; background: none; display: grid; place-items: center; color: var(--c-marca); border-radius: 999px; }
.cantidad button:hover { background: var(--c-suave-2); }
.cantidad .ic { width: 16px; height: 16px; }
.cantidad span { min-width: 22px; text-align: center; font-weight: 600; font-size: 14px; }
.bolsa-sugerido { margin-top: 18px; }
.bolsa-sub { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gris); margin-bottom: 10px; }
.sugerido { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--c-suave-2); }
.bolsa-codigo { padding: 14px 0 4px; font-size: 13.5px; }
.bolsa-codigo summary { color: var(--c-marca); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.codigo-form { display: flex; gap: 8px; margin-top: 10px; }
.codigo-form input, .campo input, .campo select, .campo textarea {
  flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--c-borde); border-radius: 12px; background: #fff; font-size: 14px;
}
.codigo-form input { text-transform: uppercase; }
.codigo-form input:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--c-marca); box-shadow: 0 0 0 3px var(--c-suave-2); }
.codigo-msj { color: #C23A3A; font-size: 12.5px; margin-top: 6px; min-height: 0; }
.codigo-msj:empty { display: none; }
.resumen { margin: 10px 0 14px; display: grid; gap: 6px; font-size: 14px; }
.resumen div { display: flex; justify-content: space-between; gap: 10px; }
.resumen dt, .resumen dd { margin: 0; }
.resumen .ahorro { color: var(--c-ok); }
.resumen .total { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--c-borde); font-weight: 700; font-size: 16px; color: var(--c-marca); }
.bolsa-nota { text-align: center; font-size: 12px; color: var(--c-gris); margin-top: 10px; }

/* Buscador */
.buscador { position: fixed; inset: 0 0 auto; z-index: 100; background: #fff; box-shadow: var(--sombra-lg); transform: translateY(-105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); visibility: hidden; }
.buscador.abierto { transform: none; visibility: visible; }
.buscador-caja { max-width: 820px; margin: 0 auto; padding: 18px var(--lado) 28px; }
.buscador-form { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--c-marca); padding: 6px 0 10px; color: var(--c-marca); }
.buscador-form input { flex: 1; border: 0; background: none; font-size: 20px; padding: 8px 0; outline: none; min-width: 0; }
.buscador-resultados { padding-top: 18px; }
.buscador-sub { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gris); margin-bottom: 12px; }
.buscador-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.buscador-lista a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; text-decoration: none; }
.buscador-lista a:hover { background: var(--c-suave-2); }
.buscador-lista small { display: block; color: var(--c-gris); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.buscador-lista b { display: block; color: var(--c-marca); font-weight: 600; line-height: 1.25; }
.buscador-lista span span { font-size: 13px; }
.buscador-vacio { color: var(--c-gris); }

/* Bienvenida (ventana con mosaico de productos) */
.bienvenida {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.bienvenida.abierto { opacity: 1; visibility: visible; }
.bienvenida-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.bienvenida-tarjeta {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(880px, 100%); max-height: calc(100vh - 40px);
  background: #fff; border-radius: 24px; overflow: auto; transform: translateY(16px); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.bienvenida.abierto .bienvenida-tarjeta { transform: none; }
.bienvenida-cerrar { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 1px solid var(--c-borde); background: #fff; }
.bienvenida-cerrar .ic { width: 18px; height: 18px; }
.bienvenida-arte { background: var(--c-azul) var(--patron) 0 0 / 120px 140px; display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 10px; padding: 26px; }
.bienvenida-arte [data-envase] { aspect-ratio: 1; display: grid; place-items: center; }
.bienvenida-arte svg { width: 100%; height: 100%; object-fit: contain; }
.bienvenida-lado { padding: 56px 44px 28px; display: grid; align-content: center; gap: 22px; }
.bienvenida-contenido { display: grid; gap: 16px; }
.bienvenida-gorro { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.bienvenida-titulo { font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--c-azul); }
.bienvenida-contenido > p:not(.bienvenida-gorro) { font-size: 15px; }
.bienvenida-opciones { display: grid; gap: 10px; margin-top: 4px; }
.bienvenida-letra { font-size: 11px; color: var(--c-gris); text-align: center; }
.codigo-copiar {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 12px 12px 20px; border: 2px dashed var(--c-marca); border-radius: 12px;
  background: var(--c-papel); color: var(--c-azul); font: 600 24px var(--f-texto); letter-spacing: .14em;
}
.codigo-copiar span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--c-marca); color: #fff; font-size: 12px; letter-spacing: 0; font-weight: 600; }
.codigo-copiar .ic { width: 15px; height: 15px; }
.fruta { position: absolute; font-style: normal; font-size: clamp(38px, 6vw, 72px); animation: flotar 6s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-14px) rotate(8deg); } }

/* WhatsApp flotante y cinta de demo */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px 0 16px;
  border-radius: 999px; background: var(--c-tinta); color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; box-shadow: 0 8px 24px rgba(6,6,8,.28); transition: transform .2s;
}
.wa-flotante:hover { transform: translateY(-2px); }
.wa-flotante .ic { width: 24px; height: 24px; }
.pestana-opiniones {
  position: fixed; left: 0; top: 50%; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 14px 0; width: 42px;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); background: var(--c-azul); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px 0 0 4px; justify-content: center;
}
.pestana-opiniones .ic { width: 14px; height: 14px; transform: rotate(90deg); }
[data-pagina="pedido"] .pestana-opiniones { display: none; }
.demo-cinta {
  position: fixed; left: 16px; bottom: 16px; z-index: 40; padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .8); color: #fff; font-size: 11.5px; font-weight: 500; pointer-events: none;
}

/* ---------- Tarjeta de producto ---------- */
.tarjeta {
  display: flex; flex-direction: column; min-width: 0; padding: 16px;
  background: #fff; border-radius: 18px;
}
.rejilla .tarjeta { background: var(--c-papel); }
.insignia {
  align-self: flex-start; margin-bottom: 20px; padding: 7px 13px; border-radius: 30px;
  background: var(--c-tinta); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
}
.tarjeta-media { position: relative; }
.tarjeta-img {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px;
  background: transparent; overflow: hidden; isolation: isolate;
}
.tarjeta-img svg, .tarjeta-img img { width: 90%; height: 90%; object-fit: contain; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tarjeta-resumen {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 14%;
  background: rgba(241, 243, 255, .94); color: var(--c-tinta); font-size: 14px; line-height: 1.45; text-align: center;
  opacity: 0; transition: opacity .3s;
}
@media (hover: hover) { .tarjeta-img:hover .tarjeta-resumen { opacity: 1; } }
.tarjeta-resumen:empty { display: none; }
.tarjeta-mas {
  position: absolute; left: 0; bottom: 3px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--c-azul); color: #fff; display: grid; place-items: center; transition: transform .2s, background .2s;
}
.tarjeta-mas:hover { transform: scale(1.08); background: var(--c-tinta); }
.tarjeta-mas.agregado { background: var(--c-ok); }
.tarjeta-mas .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.tarjeta-info { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 2px; align-items: start; margin-top: 22px; }
.tarjeta-info > * { grid-column: 1 / -1; }
.tarjeta-marca { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gris-2); }
.tarjeta-nombre { grid-column: 1; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--c-tinta); }
.tarjeta-nombre a { text-decoration: none; }
.tarjeta-nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tarjeta-precio { grid-column: 2; font-weight: 600; font-size: 16px; line-height: 1.35; text-align: right; white-space: nowrap; color: var(--c-azul); }
.tarjeta-precio small { font-size: 13px; font-weight: 500; color: var(--c-gris); }
.tarjeta-precio s { color: var(--c-gris-2); font-weight: 600; text-decoration-thickness: 1px; }
.rebaja { color: var(--c-rebaja); }
.tarjeta-variante { font-size: 13px; color: var(--c-gris-2); margin-top: 4px; }
.tarjeta-variante b { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; color: var(--c-marca); }
.tarjeta-boton { margin-top: auto; padding: 13px 16px; font-size: 14px; background: transparent; color: var(--c-azul); --b: var(--c-azul); }
.tarjeta .muestras { margin-bottom: 16px; }
/* En la rejilla de la tienda, las tarjetas sin etiqueta dejan el mismo espacio para que las fotos queden alineadas */
.rejilla .tarjeta:not(.con-insignia)::before { content: ''; display: block; height: 46px; flex: none; }
.tarjeta-boton:hover { background: var(--c-azul); color: #fff; }
.tarjeta-boton.agregado { color: #fff; }
.muestras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.muestra { padding: 0; border: 0; background: none; display: grid; justify-items: center; gap: 4px; }
.muestra-bola {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--f);
  font-size: 17px; line-height: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent; transition: box-shadow .2s, transform .2s;
}
.muestra-bola i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.muestra:hover .muestra-bola { transform: scale(1.08); }
.muestra[aria-pressed="true"] .muestra-bola { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-marca); }
.muestra-mas { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--c-borde); display: grid; place-items: center; color: var(--c-marca); }
.muestra-mas .ic { width: 16px; height: 16px; }
.muestras-grandes { gap: 14px; }
.muestras-grandes .muestra-bola { width: 56px; height: 56px; font-size: 27px; }
.muestra-nombre { font-size: 12px; color: var(--c-texto); max-width: 72px; line-height: 1.2; text-align: center; }
.muestra[aria-pressed="true"] .muestra-nombre { font-weight: 600; color: var(--c-marca); }

/* ---------- Carrusel ---------- */
.carrusel { position: relative; }
.carrusel-pista {
  --vis: 5; --gap: 20px;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis));
  gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding: 0 var(--lado);
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > * { scroll-snap-align: start; }
.carrusel-btn {
  position: absolute; top: var(--btn-top, 50%); z-index: 2; width: 60px; height: 60px; padding: 0; border-radius: 50%; border: 0;
  background: #fff; color: var(--c-tinta); display: grid; place-items: center; transform: translateY(-50%); transition: opacity .2s; box-shadow: 0 6px 20px rgba(6,6,8,.12);
}
.carrusel-btn .ic { width: 24px; height: 24px; stroke-width: 2.6; }
.carrusel-btn:disabled { opacity: 0; pointer-events: none; }
.carrusel-btn.prev { left: 0; } .carrusel-btn.sig { right: 0; }
.sin-desborde .carrusel-btn { display: none; }
/* Se sale por la derecha hasta el borde de la pantalla */
.carrusel-sangrado { margin-right: calc(var(--lado) * -1); }
.carrusel-sangrado .carrusel-pista { scroll-padding: 0; }
.carrusel-sangrado .carrusel-btn.sig { right: var(--lado); }
.carrusel-ancho .carrusel-pista { padding: 0 var(--lado); }
.carrusel-ancho .carrusel-btn.prev { left: 12px; } .carrusel-ancho .carrusel-btn.sig { right: 12px; }
/* En los carruseles del inicio la tarjeta va limpia: etiqueta, foto, +, nombre y precio */
.carrusel-compacto .tarjeta { aspect-ratio: 420 / 550; }
.carrusel-compacto .tarjeta-img { background: transparent; }
.carrusel-compacto .tarjeta-boton, .carrusel-compacto .tarjeta-variante, .carrusel-compacto .muestras, .carrusel-compacto .tarjeta-marca { display: none; }
.carrusel-compacto .tarjeta-info { margin-top: 53px; }
.carrusel-compacto .con-insignia .tarjeta-info { margin-top: 18px; }
.carrusel-compacto .insignia { margin-bottom: 35px; }

/* ---------- Portada "núcleo" ---------- */
.nucleo {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: 24px; min-height: clamp(640px, calc(100vh - var(--alto-enc) - 34px), 880px); padding: 56px var(--lado); background: var(--c-tinta); color: #fff;
}
.nucleo::before { content: ''; position: absolute; z-index: -1; right: -10%; bottom: -30%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(27,59,255,.45), rgba(27,59,255,.12) 55%, transparent); }
.nucleo::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--grano); opacity: .13; mix-blend-mode: overlay; pointer-events: none; }
.nucleo-texto { position: relative; z-index: 4; display: grid; gap: 26px; align-content: center; max-width: 720px; }
.nucleo .detalle { color: rgba(255,255,255,.66); }
.nucleo-titulo { font-size: clamp(2.8rem, 5.4vw, 5.9rem); font-weight: 500; line-height: .98; letter-spacing: -.035em; }
.nucleo-titulo span { display: block; }
.nucleo-azul { color: var(--c-luz); }
.nucleo-sub { font-size: clamp(1rem, 1.35vw, 1.2rem); color: rgba(255,255,255,.72); max-width: 480px; }
.nucleo-buscar { position: relative; display: flex; align-items: center; gap: 10px; max-width: 580px; padding: 6px 6px 6px 20px; border-radius: 100px; background: #fff; color: var(--c-tinta); box-shadow: 0 0 0 6px rgba(27,59,255,.18); transition: box-shadow .25s; }
.nucleo-buscar:focus-within { box-shadow: 0 0 0 6px rgba(91,116,255,.45); }
.nucleo-lupa .ic { width: 22px; height: 22px; color: var(--c-gris); }
.nucleo-buscar input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; font-size: 16px; outline: none; }
.nucleo-buscar input::placeholder { color: var(--c-gris-3); }
.nucleo-buscar input::-webkit-search-cancel-button { display: none; }
.nucleo-sugerencias { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 10; padding: 8px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.nucleo-sugerencias a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; text-decoration: none; color: var(--c-tinta); }
.nucleo-sugerencias a:hover, .nucleo-sugerencias a.activa, .nucleo-sugerencias a:focus { background: var(--c-papel); outline: none; }
.sug-arte { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: var(--fondo); }
.sug-arte svg { width: 90%; height: 90%; }
.nucleo-sugerencias small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gris); }
.nucleo-sugerencias b { font-weight: 500; font-size: 15px; }
.nucleo-sugerencias em { font-style: normal; font-weight: 600; color: var(--c-azul); font-size: 14px; }
.nucleo-sugerencias .sug-todos { display: flex; justify-content: center; gap: 6px; margin-top: 4px; padding: 12px; color: var(--c-azul); font-weight: 500; font-size: 14px; }
.sug-todos .ic { width: 16px; height: 16px; }
.sug-vacio { padding: 16px; font-size: 14px; color: var(--c-gris); }
.nucleo-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.nucleo-atajos a { padding: 8px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; color: rgba(255,255,255,.85); text-decoration: none; font-size: 13.5px; transition: background .2s, border-color .2s; }
.nucleo-atajos a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.nucleo-datos { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 10px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.nucleo-datos div { display: grid; gap: 2px; }
.nucleo-datos dt { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nucleo-datos dd { margin: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.nucleo-escena { position: relative; z-index: 2; height: min(78vh, 720px); min-height: 460px; }
.nucleo-c { position: absolute; inset: 0 4% 8%; display: grid; place-items: center; }
.nucleo-c svg { width: 100%; height: 100%; overflow: visible; }
.c-halo { opacity: .5; }
.cap, .cap-in { transform-box: fill-box; transform-origin: 50% 50%; }
.cap { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cap-in { animation: respirar 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.42s); }
.cap-pulso { opacity: 0; animation: pulso 5.5s ease-in-out infinite; animation-delay: calc(var(--col) * .16s); }
.cap-luz { opacity: 0; transition: opacity .3s; }
@keyframes respirar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.93); } }
@keyframes pulso { 0%, 60%, 100% { opacity: 0; } 70% { opacity: .75; } }
.nucleo-envase { position: absolute; z-index: 2; filter: drop-shadow(0 40px 50px rgba(0,0,0,.65)); translate: calc(var(--mx, 0) * -34px) calc(var(--my, 0) * -22px); transition: translate .5s ease-out; animation: flotar-envase 7s ease-in-out infinite; }
.nucleo-envase svg, .nucleo-envase img { width: 100%; height: auto; }
.nucleo-envase.e1 { left: 2%; bottom: 6%; width: 36%; --r: -8deg; }
.nucleo-envase.e2 { left: 33%; bottom: 0; width: 34%; z-index: 3; --r: 2deg; animation-delay: -2.4s; translate: calc(var(--mx, 0) * -52px) calc(var(--my, 0) * -30px); }
.nucleo-envase.e3 { right: 0; bottom: 9%; width: 30%; --r: 8deg; animation-delay: -4.6s; }
@keyframes flotar-envase { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-16px) rotate(calc(var(--r) * .6)); } }
.capsula { position: absolute; z-index: 1; width: 64px; height: 26px; border-radius: 13px; background: linear-gradient(90deg, var(--c-azul) 50%, #EDEFFF 50%); box-shadow: inset -4px -5px 8px rgba(0,0,0,.28), inset 4px 4px 8px rgba(255,255,255,.35), 0 18px 30px rgba(0,0,0,.45); translate: calc(var(--mx, 0) * 40px) calc(var(--my, 0) * 26px); transition: translate .6s ease-out; animation: flotar-capsula 9s ease-in-out infinite; }
.capsula.c1 { top: 8%; left: 12%; --r: -32deg; }
.capsula.c2 { top: 18%; right: 6%; --r: 24deg; width: 48px; height: 20px; animation-delay: -3s; }
.capsula.c3 { bottom: 38%; left: -2%; --r: 62deg; width: 40px; height: 16px; filter: blur(1.5px); animation-delay: -5s; }
.capsula.c4 { top: 44%; right: -3%; --r: -58deg; width: 72px; height: 29px; z-index: 4; filter: blur(2.5px); animation-delay: -1.5s; }
@keyframes flotar-capsula { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-22px) rotate(calc(var(--r) + 14deg)); } }

/* ---------- Secciones de inicio ---------- */
/* Piezas de las composiciones: posición con variables --x --y --w --rot --z */
.pieza { position: absolute; display: block; left: var(--x, 0); bottom: var(--y, 0); width: var(--w, 50%); transform: rotate(var(--rot, 0deg)); z-index: var(--z, 0); }
.pieza svg, .pieza img { width: 100%; height: auto; }
.centrado { text-align: center; margin-top: 30px; }
.titulo-seccion { font-size: 24px; font-weight: 500; line-height: 1.33; letter-spacing: -.01em; }
.seccion { padding: 88px 0; }

/* Confianza (franja azul) */
.beneficios-banda { position: relative; isolation: isolate; overflow: hidden; background: var(--c-azul); padding: 56px 0; }
.beneficios-banda::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grano); opacity: .14; mix-blend-mode: overlay; }
.beneficios-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.beneficio-item { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; color: #fff; }
.beneficio-ic { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--c-azul); display: grid; place-items: center; }
.beneficio-ic .ms { font-size: 28px; }
.beneficio-item h3 { font-size: 16px; font-weight: 500; line-height: 1.25; align-self: end; }
.beneficio-item p { font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.75); align-self: start; }

/* Categorías (íconos del brand book) */
.categorias-core { background: var(--c-papel); }
.cat-iconos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.cat-icono { display: grid; gap: 14px; text-decoration: none; color: var(--c-tinta); }
.cat-icono .ms { display: grid; place-items: center; aspect-ratio: 1; width: 100%; background: #fff; color: var(--c-azul); font-size: clamp(52px, 6.2vw, 104px); transition: background .3s, color .3s, transform .3s; }
.cat-icono.azul .ms { background: var(--c-azul); color: #fff; }
.cat-icono:hover .ms { background: var(--c-tinta); color: #fff; transform: translateY(-6px); }
.cat-icono b { font-weight: 500; font-size: 17px; text-align: center; }

/* Marcas oficiales */
.marcas-core { padding: 34px 0 38px; background: #fff; border-bottom: 1px solid var(--c-borde); text-align: center; }
.marcas-core .detalle { color: var(--c-gris); margin-bottom: 18px; }
.marcas-core-franja { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marcas-core .marcas-pista { font-size: 30px; gap: 80px; padding-right: 80px; }
.marcas-core .marcas-pista a { color: var(--c-tinta); opacity: .78; transition: opacity .2s, color .2s; }
.marcas-core .marcas-pista a:hover { opacity: 1; color: var(--c-azul); }
.marcas-core-franja:hover .marcas-pista { animation-play-state: paused; }

/* Más pedidos */
.vendidos-banda { background: var(--c-papel); }
.vendidos-pista { --vis: 3.3; --gap: 20px; }
.foto-tarjeta {
  position: relative; display: block; border-radius: 18px; overflow: hidden; text-decoration: none; isolation: isolate;
  background: var(--tono, var(--c-azul)) var(--foto, none) center / cover no-repeat;
}
.patron-capsulas { background-color: var(--c-azul); background-image: var(--patron); background-size: 120px 140px; }
.foto-tarjeta-arte { position: absolute; inset: 4% 8% 26%; display: grid; place-items: center; }
.foto-tarjeta-arte > span { width: 86%; filter: drop-shadow(0 30px 34px rgba(0,0,0,.35)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.foto-tarjeta:hover .foto-tarjeta-arte > span { transform: translateY(-8px) rotate(-2deg); }
.foto-tarjeta[style*="--foto"] .foto-tarjeta-arte { display: none; }
.foto-tarjeta-texto { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 8px; color: #fff; font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.foto-tarjeta-texto small { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.foto-tarjeta-texto .ic { width: 24px; height: 24px; }

/* Comparador por porción (barras de cápsulas) */
.comparar { position: relative; isolation: isolate; overflow: hidden; background: var(--c-tinta); color: #fff; padding: 110px 0; }
.comparar::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grano); opacity: .12; mix-blend-mode: overlay; pointer-events: none; }
.comparar::before { content: ''; position: absolute; z-index: -1; right: -8%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(27,59,255,.32), transparent); }
.comparar-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: end; }
.comparar-texto { display: grid; gap: 20px; align-content: start; align-self: center; }
.comparar .detalle { color: var(--c-luz); }
.comparar-texto > p:not(.detalle):not(.comparar-nota) { font-size: 17px; color: rgba(255,255,255,.72); max-width: 420px; }
.comparar-texto b { color: #fff; font-weight: 500; }
.comparar-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.comparar-tabs button { padding: 10px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; background: none; color: #fff; font-size: 14px; font-weight: 500; transition: background .2s, border-color .2s; }
.comparar-tabs button:hover { border-color: rgba(255,255,255,.55); }
.comparar-tabs button[aria-selected="true"] { background: var(--c-azul); border-color: var(--c-azul); }
.comparar-nota { font-size: 12.5px; color: rgba(255,255,255,.45); max-width: 380px; }
.comparar-barras { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; height: 470px; }
.barra-cap { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; min-width: 0; text-decoration: none; color: #fff; }
.barra-valor { text-align: center; font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.2; }
.barra-valor b { display: block; font-size: 26px; font-weight: 500; color: #fff; letter-spacing: -.02em; }
.barra-pista { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.barra-cuerpo {
  width: min(64px, 62%); height: calc(var(--h) * 100%); min-height: 40px; border-radius: 999px;
  background: linear-gradient(0deg, rgba(27,59,255,.2) 0%, #1B3BFF 42%, #5B74FF 78%, #EEF1FF 100%);
  transition: height .9s cubic-bezier(.2, .8, .2, 1), filter .2s; transition-delay: calc(var(--i) * 70ms);
}
.creciendo .barra-cuerpo { height: 40px; }
.barra-cap.mejor .barra-cuerpo { box-shadow: 0 0 48px rgba(91,116,255,.55), 0 0 0 1px rgba(255,255,255,.2); }
.barra-cap:hover .barra-cuerpo { filter: brightness(1.2); }
.barra-etiqueta { display: grid; gap: 2px; text-align: center; font-size: 12.5px; line-height: 1.3; min-height: 88px; align-content: start; }
.barra-etiqueta em { justify-self: center; margin-bottom: 6px; padding: 4px 10px; border-radius: 100px; background: var(--c-azul); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.barra-etiqueta small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.barra-etiqueta b { font-weight: 500; font-size: 14px; }
.barra-etiqueta span { color: rgba(255,255,255,.55); }

/* Campaña: "Fuerza desde el núcleo." con efecto de arrastre */
.campana { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: clamp(560px, 70vh, 780px); background: var(--c-azul); color: #fff; }
.campana::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--grano); opacity: .2; mix-blend-mode: overlay; pointer-events: none; }
.campana-arrastre { position: absolute; z-index: 0; top: -10%; bottom: -10%; right: 4%; width: min(62vw, 900px); transform: translateY(var(--desliz, 0)); }
.campana-arrastre svg { width: 100%; height: 100%; }
.arrastre-vetas { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(6,6,8,.14) 6px 7px, transparent 7px 13px, rgba(6,6,8,.07) 13px 14px, transparent 14px 23px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mix-blend-mode: multiply; }
.campana-texto { position: relative; z-index: 3; display: grid; gap: 26px; justify-items: start; padding: 90px var(--lado); }
.campana-texto h2 { font-size: clamp(3.2rem, 8.4vw, 9rem); font-weight: 500; line-height: .9; letter-spacing: -.045em; }

/* CORE Club */
.club { background: var(--c-papel); padding: 110px 0; overflow: hidden; }
.club-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.club-texto { display: grid; gap: 22px; justify-items: start; }
.club .detalle { color: var(--c-azul); }
.club-sub { font-size: 18px; color: var(--c-gris); max-width: 460px; }
.club-lista { display: grid; gap: 18px; margin: 6px 0 8px; }
.club-lista li { padding-left: 16px; border-left: 4px solid var(--c-azul); font-size: 14.5px; color: var(--c-gris); }
.club-lista b { display: block; color: var(--c-tinta); font-weight: 500; font-size: 17px; }
.club-escena { display: grid; place-items: center; min-height: 440px; perspective: 1200px; }
.club-tarjeta {
  position: relative; width: min(500px, 100%); aspect-ratio: 1.586; overflow: hidden; border-radius: 24px; padding: 28px;
  background: var(--c-tinta); color: #fff; transform: rotateX(10deg) rotateY(-16deg) rotateZ(5deg); transform-style: preserve-3d;
  box-shadow: 0 50px 80px -20px rgba(6,6,8,.55), 0 0 0 1px rgba(255,255,255,.06) inset; transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  animation: flotar-tarjeta 8s ease-in-out infinite;
}
.club-tarjeta.siguiendo { animation: none; transition: transform .12s linear; }
@keyframes flotar-tarjeta { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.club-tarjeta::after { content: ''; position: absolute; inset: 0; background: var(--grano); opacity: .12; mix-blend-mode: overlay; pointer-events: none; }
.club-logo { position: relative; z-index: 2; display: inline-flex; }
.club-logo .logo-core { font-size: 13px; }
.club-barras { position: absolute; top: -12%; bottom: -12%; right: 8%; display: flex; align-items: center; gap: 12px; }
.club-barras i { display: block; width: 34px; border-radius: 999px; background: #1C1D26; }
.club-barras i:nth-child(1) { height: 58%; margin-top: 14%; }
.club-barras i:nth-child(2) { height: 88%; }
.club-barras i:nth-child(3) { height: 40%; align-self: flex-start; margin-top: 8%; }
.club-barras i:nth-child(4) { height: 30%; align-self: flex-start; margin-top: 4%; }
.club-barras i:nth-child(5) { height: 46%; align-self: flex-end; margin-bottom: 10%; }
.club-barras i:nth-child(6) { height: 26%; align-self: flex-end; margin-bottom: 14%; }
.club-nombre { position: absolute; z-index: 2; left: 28px; bottom: 64px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: .01em; }
.club-lema { position: absolute; z-index: 2; left: 28px; bottom: 36px; font-size: 13px; color: rgba(255,255,255,.72); }
.club-chip { position: absolute; z-index: 2; right: 28px; bottom: 30px; width: 60px; height: 44px; border-radius: 9px; background: var(--c-azul); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.club-brillo { position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle at var(--bx, 25%) var(--by, 15%), rgba(255,255,255,.2), transparent 45%); pointer-events: none; }

/* Comunidad (reels verticales) */
.comunidad { padding: 96px 0; }
.comunidad-titulo { text-align: center; margin-bottom: 44px; }
.comunidad-titulo span { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--c-azul); }
.comunidad .carrusel { max-width: 1240px; margin: 0 auto; }
.comunidad .carrusel-pista { --vis: 5; --gap: 18px; }
.comunidad .carrusel-btn { display: none; }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--fondo); display: block; text-decoration: none; isolation: isolate; }
.reel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.14), transparent 60%); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-arte { position: absolute; left: 18%; right: 18%; top: 11%; filter: drop-shadow(0 18px 22px rgba(0,0,0,.3)); transition: transform .5s; }
.reel:hover .reel-arte { transform: translateY(-6px) rotate(-3deg); }
.reel-silencio { position: absolute; top: 18px; right: 18px; z-index: 1; color: #fff; }
.reel-silencio .ic { width: 22px; height: 22px; }
.reel-play { position: absolute; left: 50%; top: 60%; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; transform: translate(-50%, -50%); transition: transform .2s, background .2s; }
.reel-play .ic { width: 26px; height: 26px; margin-left: 3px; }
.reel:hover .reel-play { transform: translate(-50%, -50%) scale(1.08); background: var(--c-azul); }
.reel-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 16px; background: linear-gradient(0deg, rgba(6,6,8,.6), transparent); color: #fff; font-weight: 500; font-size: 14.5px; line-height: 1.25; }

/* Opiniones */
.opiniones { display: grid; grid-template-columns: 360px 1fr; gap: 60px; align-items: center; background: var(--c-papel); padding: 96px 0 96px var(--lado); overflow: hidden; }
.opiniones-texto { display: grid; gap: 24px; align-content: start; }
.opiniones .detalle { color: var(--c-azul); }
.opiniones-cita { margin: 0; font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; min-height: 6.5em; }
.opiniones-autor { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.opiniones-autor .ic { width: 18px; height: 18px; color: var(--c-azul); }
.opiniones-autor:hover { color: var(--c-azul); }
.opiniones-flechas { display: flex; gap: 10px; }
.opiniones-flechas button { width: 48px; height: 48px; padding: 0; border: 1px solid var(--c-borde); border-radius: 50%; background: #fff; color: var(--c-tinta); display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.opiniones-flechas button:hover { background: var(--c-azul); border-color: var(--c-azul); color: #fff; }
.opiniones-flechas .ic { width: 20px; height: 20px; }
.opiniones-pista { display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--lado); }
.opiniones-pista::-webkit-scrollbar { display: none; }
.opinion { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 20px; background: #fff; overflow: hidden; scroll-snap-align: start; text-align: left; transition: box-shadow .3s; }
.opinion.activa { box-shadow: 0 0 0 2px var(--c-azul); }
.opinion-arte { position: absolute; left: 6%; bottom: 6%; width: 58%; }
.opinion-arte svg, .opinion-arte img { width: 100%; height: auto; }
.opinion-globo { position: absolute; top: 12%; right: 7%; max-width: 54%; display: grid; gap: 6px; padding: 14px 16px 12px; background: var(--c-azul); border-radius: 16px 16px 16px 4px; color: #fff; }
.opinion-globo b { font-size: 18px; font-weight: 500; line-height: 1.2; }
.opinion-globo .estrellas-base { color: rgba(255,255,255,.3); }
.opinion-globo .estrellas-llenas { color: #fff; }
.opinion-globo .estrellas .ic { width: 13px; height: 13px; }

/* Bandas que usan otras páginas (plan mensual y nosotros) */
.plan-banda { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; background: var(--c-suave-2); }
.plan-texto { display: grid; align-content: center; justify-items: center; gap: 30px; padding: 56px 32px; text-align: center; }
.plan-texto .titulo { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 500; }
.ventajas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 560px; }
.ventaja { display: grid; justify-items: center; gap: 10px; font-size: 13px; color: var(--c-marca); line-height: 1.3; }
.ventaja-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.ventaja-ic .ic { width: 28px; height: 28px; stroke-width: 1.5; }
.plan-arte { position: relative; overflow: hidden; background: var(--c-azul) var(--patron) 0 0 / 120px 140px; }
.plan-arte > .pieza { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .2)); }
.caja-envio { position: absolute; left: 12%; right: 12%; bottom: -4%; height: 42%; background: #C9A878; border-radius: 6px 6px 0 0; display: grid; place-items: center; box-shadow: inset 0 18px 0 rgba(0,0,0,.06); }
.caja-envio::before, .caja-envio::after { content: ''; position: absolute; top: -18%; width: 46%; height: 22%; background: #BBA98E; }
.caja-envio::before { left: 0; transform: skewX(24deg); transform-origin: bottom left; }
.caja-envio::after { right: 0; transform: skewX(-24deg); transform-origin: bottom right; }
.caja-envio .logo-core { font-size: clamp(13px, 1.8vw, 20px); }

.historia { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; background: var(--c-suave-2); }
.historia-arte { position: relative; overflow: hidden; background: var(--c-azul) var(--patron) 0 0 / 120px 140px; }
.historia-arte > .pieza { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .22)); }
.historia-etiqueta { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 8px 14px; border-radius: 10px; background: #fff; font-size: 13px; color: var(--c-marca); line-height: 1.3; }
.historia-etiqueta b { display: block; }
.historia-texto { display: grid; align-content: center; justify-items: start; gap: 18px; padding: 72px max(var(--lado), 7vw); color: var(--c-marca); }
.historia-texto .titulo { font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 500; }
.historia-texto p { max-width: 520px; font-size: 16px; color: var(--c-gris); }

.marcas-franja { background: var(--c-marca); color: #fff; overflow: hidden; padding: 22px 0; }
.marcas-pista { display: flex; width: max-content; gap: 72px; padding-right: 72px; animation: franja 38s linear infinite; font-size: 24px; }
.marcas-franja:hover .marcas-pista { animation-play-state: paused; }
.marcas-pista a { white-space: nowrap; color: #fff; text-decoration: none; opacity: .85; line-height: 1.4; }
.marcas-pista a:hover { opacity: 1; }
@keyframes franja { to { transform: translateX(-50%); } }

/* ---------- Pie ---------- */
.pie { position: relative; isolation: isolate; background: var(--c-tinta); color: #fff; padding: 72px 0 40px; }
.pie::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grano); opacity: .1; mix-blend-mode: overlay; pointer-events: none; }
.pie a { color: inherit; }
.pie-boletin { display: grid; grid-template-columns: 90px minmax(0, 620px) minmax(260px, 380px); align-items: center; justify-content: space-between; column-gap: 24px; }

.pie-marca { display: inline-flex; text-decoration: none; }
.pie-marca .iso { width: 48px; height: auto; color: var(--c-azul); }
.pie-marca .logo-img { height: 60px; }
.pie-boletin-titulo { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.boletin { position: relative; display: grid; gap: 12px; }
.boletin-fila { display: flex; align-items: center; padding: 4px 4px 4px 18px; border-radius: 100px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.boletin-fila input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 15px; font-weight: 400; outline: none; }
.boletin-fila input::placeholder { color: rgba(255,255,255,.5); }
.boletin-fila button { width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--c-azul); color: #fff; display: grid; place-items: center; }
.boletin-fila button .ic { width: 20px; height: 20px; }
.boletin-ok { font-size: 13px; font-weight: 500; color: var(--c-luz); }
.boletin-acepto { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.62); cursor: pointer; }
.boletin-acepto input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--c-azul); }
.boletin-acepto a { color: #fff; }

/* Consentimiento en el pedido y página de privacidad (Ley 8968) */
.consentimientos { display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: var(--c-papel); }
.check-legal { align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.check-legal input { flex: none; margin-top: 1px; }
.check-legal a { color: var(--c-azul); }
.check-legal small { color: var(--c-gris); }
.check-legal:has([aria-invalid="true"]) { color: #C23A3A; }
.legal { max-width: 760px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.65; color: #2A2C38; }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 10px; margin: 12px 0 14px; padding-left: 20px; list-style: disc; }
.legal li::marker { color: var(--c-azul); }
.legal a { color: var(--c-azul); }
.legal .ayuda-bloque > .titulo { font-size: 26px; margin-bottom: 14px; }
.derechos-caja { display: grid; gap: 16px; margin-top: 24px; padding: 28px; border-radius: 20px; background: var(--c-papel); }
.derechos-caja h3 { font-size: 20px; font-weight: 500; }
.derechos-form { display: grid; gap: 18px; justify-items: start; }
.derechos-form .campos { width: 100%; }
.derechos-ok { padding: 14px 16px; border-radius: 12px; background: #fff; color: var(--c-ok); font-weight: 500; }
.pie-grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 640px); justify-content: space-between; gap: 48px; padding-top: 72px; padding-bottom: 56px; }
.pie-izq { display: grid; gap: 32px; align-content: start; }
.redes { display: flex; gap: 42px; }
.redes a { display: grid; place-items: center; color: rgba(255,255,255,.85); }
.redes a:hover { color: var(--c-luz); }
.redes .ic { width: 20px; height: 20px; }
.pie-aviso { padding: 16px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.5; }
.pie-nota { color: rgba(255,255,255,.45); font-size: 12.5px; line-height: 1.5; }
.pie-cols { display: grid; grid-template-columns: repeat(4, 128px); justify-content: end; column-gap: 30px; }
.pie-cols h3 { font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--c-luz); margin-bottom: 20px; }
.pie-cols ul { display: grid; gap: 0; }
.pie-cols a { text-decoration: none; font-size: 15px; font-weight: 400; line-height: 1.9; color: rgba(255,255,255,.82); }
.pie-cols a:hover { color: #fff; }
.pie-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie-firma { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 44px; padding-bottom: 44px; border-top: 1px solid rgba(255,255,255,.1); }
.pie-firma .logo-core { font-size: clamp(28px, 4.4vw, 64px); }
.pie-firma > span { font-size: 15px; color: rgba(255,255,255,.55); }
.pie-base { display: grid; gap: 28px; font-size: 13px; color: var(--c-gris-3); }
.pie-base p { text-align: center; color: rgba(255,255,255,.45); }
.pie-legales { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.pie-legales a { color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Tienda (colección) ---------- */
.coleccion-cabeza { padding: 30px 0 8px; }
.coleccion-titulo { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 500; }
.coleccion-desc { color: var(--c-gris); margin-top: 6px; max-width: 640px; }
.coleccion-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 26px; }
.pildoras { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.pildoras::-webkit-scrollbar { display: none; }
.ordenar { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-marca); font-size: 14px; white-space: nowrap; }
.ordenar select { border: 1.5px solid var(--c-borde); border-radius: 999px; padding: 9px 34px 9px 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212721' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; appearance: none; font-weight: 500; color: var(--c-marca); }
.coleccion { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding-bottom: 80px; }
.filtros-titulo { font-size: 26px; margin-bottom: 10px; }
.filtro { border-bottom: 1px solid var(--c-borde); }
.filtro summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 600; color: var(--c-marca); }
.filtro summary .ic { width: 18px; height: 18px; transition: transform .2s; }
.filtro[open] summary .ic { transform: rotate(180deg); }
.filtro-opciones { display: grid; gap: 8px; padding-bottom: 16px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--c-marca); }
.check small { color: var(--c-gris); margin-left: auto; }
.filtros-limpiar { margin-top: 14px; background: none; border: 0; padding: 0; color: var(--c-marca); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 22px; align-content: start; }
.rejilla-vacia { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--c-gris); display: grid; justify-items: center; gap: 14px; }
.filtros-abrir { display: none; }
.filtros-listo { display: none; }
.resultados { font-size: 13px; color: var(--c-gris); margin-bottom: 14px; }
.filtros-cabeza { display: none; }

/* ---------- Producto ---------- */
.pagina-producto { background: var(--c-suave-2); }
.migas { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 0; font-size: 13px; color: var(--c-gris); }
.migas a { text-decoration: none; } .migas a:hover { color: var(--c-marca); text-decoration: underline; }
.producto { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding-bottom: 64px; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.galeria-item { position: relative; aspect-ratio: 1; border-radius: var(--radio-lg); overflow: hidden; background: var(--fondo, var(--c-tarjeta)); display: grid; place-items: center; }
.galeria-principal { grid-column: 1 / -1; }
.galeria-principal > svg, .galeria-principal > img { width: 86%; height: 86%; object-fit: contain; }
.galeria-principal > svg { position: relative; }
.sello { position: absolute; top: 22px; left: 22px; z-index: 1; width: 86px; height: 86px; display: grid; place-items: center; text-align: center; color: #fff; font: 700 16px/1 var(--f-titulo); }
.sello::before { content: ''; position: absolute; inset: 0; background: var(--c-marca); clip-path: polygon(50% 0%, 61% 11%, 75% 6%, 79% 21%, 94% 25%, 89% 39%, 100% 50%, 89% 61%, 94% 75%, 79% 79%, 75% 94%, 61% 89%, 50% 100%, 39% 89%, 25% 94%, 21% 79%, 6% 75%, 11% 61%, 0% 50%, 11% 39%, 6% 25%, 21% 21%, 25% 6%, 39% 11%); z-index: -1; }
.sello span { max-width: 64px; }
.galeria-ficha { padding: 26px; align-content: center; justify-items: start; text-align: left; color: var(--c-marca); display: grid; gap: 10px; }
.galeria-ficha .titulo { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.galeria-ficha ul { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.galeria-ficha li::before { content: '✓ '; color: var(--c-acento); }
.galeria-arte-2 > span { position: absolute; width: 72%; bottom: 4%; }
.tabla-nutri { width: 100%; font-size: 12.5px; border-collapse: collapse; background: #fff; border: 2px solid var(--c-texto); }
.tabla-nutri caption { text-align: left; font: 900 19px var(--f-titulo); padding: 6px 8px; border: 2px solid var(--c-texto); border-bottom: 0; background: #fff; color: var(--c-texto); }
.tabla-nutri td { padding: 5px 8px; border-top: 1px solid var(--c-texto); }
.tabla-nutri td:last-child { text-align: right; font-weight: 600; }
.pasos-uso { display: grid; gap: 10px; counter-reset: paso; font-size: 13.5px; }
.pasos-uso li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; color: var(--c-texto); font-weight: 400; }
.pasos-uso li::before { counter-increment: paso; content: counter(paso); width: 28px; height: 28px; border-radius: 50%; background: var(--c-marca); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }

.ficha { position: sticky; top: calc(var(--alto-enc) + 16px); display: grid; gap: 16px; }
.ficha-caja { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--radio-lg); padding: 28px; display: grid; gap: 18px; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-rating { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1.5px solid var(--c-borde); border-radius: 999px; font-size: 12.5px; color: var(--c-gris); text-decoration: none; background: #fff; }
.chip-oscuro { padding: 4px 12px; border-radius: 999px; background: var(--c-marca); color: #fff; font-size: 12px; font-weight: 600; }
.estrellas { position: relative; display: inline-flex; vertical-align: middle; }
.estrellas-base, .estrellas-llenas { display: flex; gap: 1px; }
.estrellas-base { color: #E4E1DA; }
.estrellas-llenas { position: absolute; inset: 0 auto 0 0; width: var(--r); overflow: hidden; color: var(--c-estrella); }
.estrellas .ic { width: 15px; height: 15px; }
.ficha-marca { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gris); }
.ficha-marca a { text-decoration: none; } .ficha-marca a:hover { color: var(--c-marca); }
.ficha h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; margin-top: 4px; }
.ficha-desc { font-size: 14.5px; }
.beneficios { display: flex; flex-wrap: wrap; gap: 8px; }
.beneficio { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-borde); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-marca); }
.beneficio .ic { width: 15px; height: 15px; }
.ficha-etiqueta { font-weight: 600; font-size: 14px; color: var(--c-marca); margin-bottom: 10px; }
.ficha-etiqueta span { font-weight: 400; color: var(--c-texto); }
.tamanos { display: flex; flex-wrap: wrap; gap: 8px; }
.tamano { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--c-borde); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--c-marca); }
.tamano[aria-pressed="true"] { background: var(--c-marca); border-color: var(--c-marca); color: #fff; }
.compra-opciones { display: grid; gap: 10px; }
.opcion { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 16px; border: 1.5px solid var(--c-borde); border-radius: 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.opcion:has(input:checked) { border-color: var(--c-marca); background: var(--c-suave-2); box-shadow: 0 0 0 1px var(--c-marca); }
.opcion input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-marca); }
.opcion-titulo { font-weight: 600; color: var(--c-marca); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.opcion-badge { padding: 2px 8px; border-radius: 6px; background: var(--c-marca); color: #fff; font-size: 11px; font-weight: 700; }
.opcion-sub { font-size: 12.5px; color: var(--c-gris); margin-top: 2px; }
.opcion-sub select { border: 0; background: none; text-decoration: underline; color: var(--c-marca); font-weight: 600; padding: 0; font-size: 12.5px; }
.opcion-precio { text-align: right; font-weight: 700; color: var(--c-marca); white-space: nowrap; }
.opcion-precio s { font-weight: 400; color: var(--c-gris); font-size: 13px; }
.opcion-precio small { display: block; font-weight: 400; font-size: 11.5px; color: var(--c-gris); }
.opcion-lista { grid-column: 2 / -1; display: grid; gap: 4px; font-size: 12.5px; margin-top: 6px; }
.opcion-lista li { display: flex; gap: 6px; align-items: center; }
.opcion-lista .ic { width: 14px; height: 14px; color: var(--c-ok); }
.comprar-fila { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.comprar-fila .cantidad { height: 54px; }
.comprar-fila .cantidad button { width: 42px; }
.confianza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 11.5px; color: var(--c-gris); text-align: center; }
.confianza div { display: grid; justify-items: center; gap: 4px; }
.confianza .ic { width: 20px; height: 20px; color: var(--c-marca); }
.combina { background: #fff; border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--c-borde); }
.combina-tabs { display: flex; gap: 4px; padding: 8px 8px 0; background: var(--c-suave-2); }
.combina-tabs button { padding: 10px 18px; border: 0; border-radius: 12px 12px 0 0; background: var(--c-suave); color: var(--c-marca); font-weight: 600; font-size: 13.5px; }
.combina-tabs button[aria-selected="true"] { background: #fff; }
.combina-panel { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 18px; align-items: center; }
.combina-arte { border-radius: 14px; aspect-ratio: 1; background: var(--fondo); display: grid; place-items: center; }
.combina-panel h3 { font-weight: 600; color: var(--c-marca); font-size: 16px; }
.combina-panel p { font-size: 13px; }
.combina-panel .boton { margin-top: 10px; }
.donde { text-align: center; }
.donde a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-marca); font-size: 14px; }
.donde .ic { width: 18px; height: 18px; }

.bloque-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bloque-arte { position: relative; min-height: 420px; border-radius: var(--radio-lg); overflow: hidden; background: var(--fondo); }
.bloque-arte > span { position: absolute; width: 64%; left: 18%; bottom: 6%; filter: drop-shadow(0 26px 30px rgba(0,0,0,.14)); }
.bloque-caja { background: #fff; border-radius: var(--radio-lg); padding: 44px; box-shadow: var(--sombra); display: grid; align-content: center; gap: 16px; }
.bloque-caja .titulo { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.faq details { border-bottom: 1px solid var(--c-borde); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 500; color: var(--c-marca); }
.faq summary::after { content: '+'; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-marca); color: #fff; display: grid; place-items: center; font-size: 18px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 18px 0; font-size: 14px; color: var(--c-texto); }
.nota-firma { font-weight: 600; color: var(--c-marca); }
.nota-firma small { display: block; font-weight: 400; color: var(--c-gris); }
.cita { font-size: 16px; color: var(--c-marca); }

.resenas { display: grid; grid-template-columns: 300px 1fr; gap: 48px; }
.resenas-resumen { display: grid; gap: 12px; align-content: start; }
.resenas-nota { display: flex; align-items: center; gap: 12px; }
.resenas-nota b { font: 900 48px/1 var(--f-titulo); color: var(--c-marca); }
.resenas-nota .estrellas .ic { width: 20px; height: 20px; }
.barras { display: grid; gap: 6px; font-size: 13px; }
.barras div { display: grid; grid-template-columns: 30px 1fr 40px; gap: 8px; align-items: center; }
.barras span { height: 7px; border-radius: 999px; background: var(--c-borde); overflow: hidden; }
.barras span i { display: block; height: 100%; background: var(--c-estrella); }
.barras small { color: var(--c-gris); text-align: right; }
.resena { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--c-borde); }
.resena-autor b { display: block; color: var(--c-marca); }
.resena-autor small { color: var(--c-gris); display: flex; align-items: center; gap: 4px; }
.resena-autor .ic { width: 14px; height: 14px; color: var(--c-ok); }
.resena h3 { font-weight: 600; font-size: 16px; margin: 6px 0 4px; }
.resena p { font-size: 14.5px; }

.barra-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px var(--lado) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--c-borde); box-shadow: 0 -8px 24px rgba(0,0,0,.06); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .3s; }
.barra-fija.visible { transform: none; }
.barra-fija-info { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.barra-fija-info b { display: block; color: var(--c-marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Páginas de contenido ---------- */
.cabecera { padding: 64px 0 40px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.cabecera .titulo { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 500; }
.cabecera p { max-width: 640px; font-size: 16px; color: var(--c-texto); }
.gorro { font-size: 13px; font-weight: 600; letter-spacing: var(--espaciado); text-transform: uppercase; color: var(--c-gris); }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.paso { background: #fff; border-radius: var(--radio-lg); padding: 30px; box-shadow: var(--sombra); display: grid; gap: 10px; align-content: start; }
.paso-num { width: 48px; height: 48px; border-radius: 50%; background: var(--c-marca); color: #fff; display: grid; place-items: center; font: 900 22px var(--f-titulo); }
.paso h3 { font-weight: 600; color: var(--c-marca); font-size: 18px; }
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.valor { border-radius: var(--radio-lg); padding: 30px; background: var(--fondo, var(--c-crema)); display: grid; gap: 10px; align-content: start; }
.valor-emoji { font-size: 38px; }
.valor h3 { font-weight: 600; color: var(--c-marca); font-size: 18px; }
.marcas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.marca-tarjeta { background: #fff; border-radius: var(--radio); padding: 24px; border: 1.5px solid var(--c-borde); display: grid; gap: 8px; align-content: start; text-decoration: none; transition: border-color .2s, transform .2s; }
.marca-tarjeta:hover { border-color: var(--c-marca); transform: translateY(-2px); }
.marca-tarjeta b { font-size: 24px; color: var(--c-marca); line-height: 1.3; }
.marca-tarjeta p { font-size: 13.5px; color: var(--c-gris); }
.marca-tarjeta span { font-size: 13px; font-weight: 600; color: var(--c-marca); }
.ayuda-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-bottom: 80px; }
.ayuda-indice { position: sticky; top: calc(var(--alto-enc) + 20px); display: grid; gap: 4px; align-self: start; }
.ayuda-indice a { padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--c-marca); font-weight: 500; }
.ayuda-indice a:hover { background: var(--c-suave-2); }
.ayuda-bloque { scroll-margin-top: calc(var(--alto-enc) + 20px); margin-bottom: 44px; }
.ayuda-bloque > .titulo { font-size: 30px; margin-bottom: 8px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0; }
.tabla th, .tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-borde); }
.tabla th { color: var(--c-gris); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.contacto-caja { background: var(--c-suave); border-radius: var(--radio-lg); padding: 36px; display: grid; gap: 12px; justify-items: start; }

/* Pedido (checkout) */
.pedido-enc { border-bottom: 1px solid var(--c-borde); background: #fff; }
.pedido-enc .contenedor { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.pedido-enc a:not(.logo) { font-size: 14px; color: var(--c-marca); font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.pedido-enc .ic { width: 18px; height: 18px; }
.pedido { display: grid; grid-template-columns: 1fr 440px; min-height: calc(100vh - 72px); }
.pedido-form { padding: 40px 56px 64px max(var(--lado), calc((100vw - var(--ancho)) / 2 + var(--lado))); display: grid; gap: 30px; align-content: start; }
.pedido-form h1 { font-size: 34px; }
.pedido-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; }
.pedido-form legend { font-weight: 700; font-size: 17px; color: var(--c-marca); margin-bottom: 12px; padding: 0; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.campo-ancho { grid-column: 1 / -1; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo small { color: var(--c-gris); font-weight: 400; }
.radios { display: grid; gap: 10px; }
.radio { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border: 1.5px solid var(--c-borde); border-radius: 14px; cursor: pointer; }
.radio:has(input:checked) { border-color: var(--c-marca); background: var(--c-suave-2); box-shadow: 0 0 0 1px var(--c-marca); }
.radio input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-marca); }
.radio b { color: var(--c-marca); font-weight: 600; display: block; }
.radio small { color: var(--c-gris); font-size: 12.5px; }
.radio-precio { font-weight: 600; font-size: 14px; }
.pedido-resumen { background: var(--c-crema); border-left: 1px solid var(--c-borde); padding: 40px max(var(--lado), calc((100vw - var(--ancho)) / 2 + var(--lado))) 40px 40px; }
.pedido-resumen-caja { position: sticky; top: 24px; display: grid; gap: 14px; }
.pedido-linea { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; font-size: 13.5px; }
.pedido-linea-arte { position: relative; border-radius: 12px; aspect-ratio: 1; background: var(--fondo); display: grid; place-items: center; border: 1px solid var(--c-borde); }
.pedido-linea-arte i { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--c-gris); color: #fff; font: 600 12px/22px var(--f-texto); text-align: center; font-style: normal; }
.pedido-linea b { display: block; color: var(--c-marca); font-weight: 600; }
.pedido-linea small { color: var(--c-gris); }
.aviso-pago { background: #fff; border: 1.5px dashed var(--c-marca); border-radius: 14px; padding: 16px; font-size: 13.5px; display: grid; gap: 4px; }
.aviso-pago b { color: var(--c-marca); }
.error-campo { color: #C23A3A; font-size: 12.5px; }
.listo { text-align: center; display: grid; gap: 16px; justify-items: center; padding: 40px 0; }
.listo-emoji { font-size: 64px; }

/* Test */
.test { min-height: calc(100vh - 36px - var(--alto-enc)); background: linear-gradient(180deg, var(--c-suave-2), var(--c-suave)); padding: 48px 0 80px; }
.test-caja { max-width: 860px; margin: 0 auto; padding: 0 var(--lado); text-align: center; }
.test-progreso { height: 8px; border-radius: 999px; background: #fff; overflow: hidden; max-width: 420px; margin: 0 auto 30px; }
.test-progreso span { display: block; height: 100%; background: var(--c-marca); transition: width .4s; }
.test-paso-num { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gris); }
.test-pregunta { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 10px 0 30px; }
.test-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.test-opcion { display: grid; justify-items: center; gap: 10px; padding: 26px 16px; border-radius: var(--radio-lg); border: 2px solid transparent; background: #fff; box-shadow: var(--sombra); color: var(--c-marca); font-weight: 600; font-size: 15px; transition: transform .2s, border-color .2s; }
.test-opcion:hover { transform: translateY(-3px); border-color: var(--c-marca); }
.test-opcion[aria-pressed="true"] { border-color: var(--c-marca); background: var(--c-suave-2); }
.test-opcion span { font-size: 40px; line-height: 1; }
.test-opcion small { font-weight: 400; color: var(--c-gris); font-size: 12.5px; }
.test-acciones { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.test-resultado .rejilla { grid-template-columns: repeat(3, 1fr); text-align: left; margin: 30px 0; }

/* Animación de entrada */
.aparecer { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.aparecer.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparecer { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1300px) {
  :root { --lado: 40px; }
  .nav-principal { gap: 28px; }
  .carrusel-pista { --vis: 4; }
  .vendidos-pista { --vis: 2.7; }
  .beneficios-grid { gap: 24px; }
  .comparar-grid { gap: 48px; }
  .mega-interior { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .mega-promo:last-child { display: none; }
  .pie-cols { grid-template-columns: repeat(4, 118px); column-gap: 22px; }
}
@media (max-width: 1024px) {
  :root { --lado: 32px; }
  .nav-principal { gap: 20px; }
  .nav-link { font-size: 15px; }
  .enc-ayuda span { display: none; }
  .carrusel-pista { --vis: 3; }
  .vendidos-pista { --vis: 2.3; }
  .comunidad .carrusel-pista { --vis: 4.2; }
  .comunidad .carrusel { max-width: none; margin-right: calc(var(--lado) * -1); }
  .beneficios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nucleo { grid-template-columns: 1fr; padding-top: 64px; }
  .nucleo-escena { height: 520px; min-height: 0; }
  .cat-iconos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comparar-grid { grid-template-columns: 1fr; }
  .club-grid { grid-template-columns: 1fr; }
  .club-escena { min-height: 360px; }
  .pie-boletin { grid-template-columns: 70px minmax(0, 1fr); row-gap: 24px; }
  .pie-boletin .boletin { grid-column: 2; max-width: 460px; }
  .pie-grid { grid-template-columns: 1fr; padding-top: 64px; }
  .pie-cols { justify-content: start; }
  .opiniones { grid-template-columns: 1fr; gap: 28px; }
  .opiniones-texto { padding-right: var(--lado); }
  .opiniones-cita { min-height: 0; }
  .coleccion { grid-template-columns: 200px 1fr; gap: 28px; }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .producto { gap: 28px; }
  .resenas { grid-template-columns: 1fr; gap: 24px; }
  .pedido { grid-template-columns: 1fr 380px; }
  .pedido-form { padding-right: 32px; }
}
@media (max-width: 900px) {
  :root { --alto-enc: 58px; --lado: 16px; }
  .solo-escritorio { display: none !important; }
  .solo-movil { display: flex !important; }
  .aviso { font-size: 11.5px; }
  .aviso-msj { padding: 0 10px; }
  .encabezado-fila { padding: 0 6px; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .encabezado-fila > .logo { justify-self: center; }
  .enc-movil { gap: 0; }
  .acciones { gap: 0; }
  .icono-btn .ic { width: 28px; height: 28px; }
  .encabezado-fila .logo-img { height: 40px; }
  .seccion { padding: 36px 0; }
  .carrusel-pista { --vis: 2.3; --gap: 14px; }
  .carrusel-btn { display: none; }
  .carrusel-ancho .carrusel-pista, .carrusel-movil-ancho .carrusel-pista { margin: 0 calc(var(--lado) * -1); padding: 0 var(--lado); }
  .carrusel-sangrado { margin-left: calc(var(--lado) * -1); }
  .carrusel-sangrado .carrusel-pista { padding: 0 var(--lado); scroll-padding: 0 var(--lado); }
  .titulo-seccion { font-size: 22px; margin-bottom: 24px; }

  .seccion { padding: 60px 0; }
  .cabeza-seccion { margin-bottom: 24px; }
  .nucleo { padding: 44px var(--lado) 24px; min-height: 0; gap: 8px; }
  .nucleo-texto { gap: 20px; }
  .nucleo-titulo { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .nucleo-buscar { padding-left: 16px; }
  .nucleo-buscar .boton { padding: 13px 16px; }
  .nucleo-datos { gap: 10px 26px; padding-top: 20px; }
  .nucleo-escena { height: 380px; margin: 0 calc(var(--lado) * -1); }
  .capsula.c4 { display: none; }
  .beneficios-banda { padding: 36px 0; }
  .beneficios-grid { grid-template-columns: 1fr; gap: 18px; }
  .cat-iconos { gap: 10px; }
  .cat-icono b { font-size: 14px; }
  .marcas-core .marcas-pista { font-size: 22px; gap: 48px; padding-right: 48px; }
  .vendidos-pista { --vis: 1.3; --gap: 14px; }
  .foto-tarjeta-texto { font-size: 19px; left: 22px; right: 22px; bottom: 22px; }
  .comparar { padding: 64px 0; }
  .comparar-grid { gap: 32px; }
  .comparar-barras { height: 400px; gap: 8px; overflow-x: auto; grid-template-columns: repeat(var(--n, 4), minmax(92px, 1fr)); margin: 0 calc(var(--lado) * -1); padding: 0 var(--lado); scrollbar-width: none; }
  .barra-valor b { font-size: 20px; }
  .barra-etiqueta { font-size: 11.5px; }
  .campana { min-height: 520px; }
  .campana-arrastre { right: -30%; width: 130vw; }
  .campana-texto { padding: 56px var(--lado); }
  .club { padding: 64px 0; }
  .club-escena { min-height: 280px; }
  .club-tarjeta { padding: 20px; border-radius: 18px; }
  .club-nombre { left: 20px; bottom: 50px; }
  .club-lema { left: 20px; bottom: 26px; font-size: 11.5px; }
  .club-chip { right: 20px; bottom: 22px; width: 46px; height: 34px; }
  .club-barras { gap: 8px; }
  .club-barras i { width: 22px; }
  .comunidad { padding: 60px 0; }
  .comunidad-titulo { margin-bottom: 28px; }
  .comunidad .carrusel { margin-right: 0; }
  .comunidad .carrusel-pista { --vis: 2.3; }
  .opiniones { padding: 60px 0 64px var(--lado); }
  .opiniones-cita { font-size: 20px; }
  .opiniones-pista { grid-auto-columns: 78%; gap: 16px; }
  .pie { padding-top: 52px; }
  .pie-firma .logo-img { height: 56px; }
  .plan-banda, .historia { grid-template-columns: 1fr; }
  .plan-arte { min-height: 380px; }
  .historia-arte { min-height: 420px; }
  .ventajas { grid-template-columns: repeat(2, 1fr); }

  .pie-boletin { grid-template-columns: 1fr; }
  .pie-boletin .boletin { grid-column: 1; }
  .pie-boletin-titulo { font-size: 20px; }
  .pie-grid { padding-top: 48px; }
  .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .pie-base { gap: 32px; }
  .pestana-opiniones { display: none; }
  .wa-flotante { height: 44px; font-size: 15px; padding: 0 16px 0 13px; }

  .bienvenida-tarjeta { grid-template-columns: 1fr; }
  .bienvenida-arte { grid-template-columns: repeat(5, 1fr); padding: 16px; gap: 6px; }
  .bienvenida-arte [data-envase]:nth-child(n+6) { display: none; }
  .bienvenida-lado { padding: 28px 22px 20px; gap: 16px; }
  .bienvenida-cerrar { background: #fff; }

  .coleccion { grid-template-columns: 1fr; }
  .coleccion-barra { flex-wrap: wrap; }
  .pildoras { order: 2; width: 100%; margin: 0 calc(var(--lado) * -1); padding: 2px var(--lado); }
  .filtros-abrir { display: inline-flex; }
  .ordenar-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ordenar select { padding: 8px 32px 8px 14px; font-size: 13px; }
  .filtros {
    position: fixed; inset: auto 0 0; z-index: 100; max-height: 82vh; overflow-y: auto; background: #fff; padding: 0 20px 20px;
    border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
  }
  .filtros.abierto { transform: none; visibility: visible; }
  .filtros-cabeza { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; padding: 16px 0 6px; z-index: 1; }
  .filtros-titulo { display: none; }
  .filtros-listo { display: flex; margin-top: 16px; position: sticky; bottom: 0; }
  .rejilla { gap: 14px; }
  .tarjeta { padding: 10px; }
  .rejilla .tarjeta-info { margin-top: 14px; }
  .tarjeta-nombre, .tarjeta-precio { font-size: 14px; }
  .tarjeta-info { grid-template-columns: 1fr; }
  .tarjeta-precio { grid-column: 1; text-align: left; }
  .tarjeta-precio s { display: inline; }
  .tarjeta-boton { padding: 10px 10px; font-size: 10.5px; letter-spacing: .08em; }
  .muestra-bola { width: 30px; height: 30px; font-size: 15px; }

  .producto { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--lado) * -1); padding: 0 var(--lado); scrollbar-width: none; }
  .galeria::-webkit-scrollbar { display: none; }
  .galeria-item { scroll-snap-align: center; }
  .galeria-principal { grid-column: auto; }
  .ficha { position: static; }
  .ficha-caja { padding: 20px; }
  .bloque-dos { grid-template-columns: 1fr; }
  .bloque-arte { min-height: 320px; }
  .bloque-caja { padding: 28px 22px; }
  .resena { grid-template-columns: 1fr; gap: 6px; }
  .barra-fija { display: flex; }
  .pagina-producto .wa-flotante { bottom: 86px; }

  .pasos, .valores { grid-template-columns: 1fr; }
  .ayuda-grid { grid-template-columns: 1fr; gap: 20px; }
  .ayuda-indice { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .ayuda-indice a { white-space: nowrap; border: 1px solid var(--c-borde); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; }

  .pedido { grid-template-columns: 1fr; }
  .pedido-resumen { order: -1; border-left: 0; border-bottom: 1px solid var(--c-borde); padding: 20px var(--lado); }
  .pedido-form { padding: 28px var(--lado) 56px; }
  .campos { grid-template-columns: 1fr; }
  .test-resultado .rejilla { grid-template-columns: repeat(2, 1fr); }
  .buscador-lista { grid-template-columns: 1fr; }
  .demo-cinta { left: 12px; bottom: 18px; font-size: 10.5px; max-width: calc(100% - 96px); line-height: 1.3; }
  .pagina-producto .demo-cinta { display: none; }
}
@media (max-width: 520px) {
  .carrusel-pista { --vis: 1.7; }
  .comunidad .carrusel-pista { --vis: 1.7; }
  .beneficios-grid { gap: 36px 14px; }
  .beneficio-item h3 { font-size: 14.5px; }
  .beneficio-item p { font-size: 13px; }
  .ventaja-ic { width: 56px; height: 56px; }
  .muestras-grandes { gap: 10px; }
  .muestras-grandes .muestra-bola { width: 50px; height: 50px; font-size: 24px; }
  .combina-panel { grid-template-columns: 96px 1fr; gap: 14px; }
  .confianza { font-size: 10.5px; }
  .comprar-fila .boton { padding: 14px 12px; font-size: 12px; }
  .comprar-fila .cantidad button { width: 34px; }
  .opcion { padding: 14px 12px; gap: 10px; }
  .test-opciones { grid-template-columns: 1fr 1fr; }
  .test-opcion { padding: 18px 10px; font-size: 14px; }
}
.boton .ic { width: 18px; height: 18px; }
.boton-sm .ic { width: 16px; height: 16px; }

/* Producto: paquetes y bloque de marca */
.incluye { display: grid; gap: 8px; }
.incluye .ficha-etiqueta { margin-bottom: 2px; }
.incluye-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 6px; border-radius: 14px; background: var(--c-suave-2); text-decoration: none; }
.incluye-item:hover { background: var(--c-suave); }
.incluye-arte { border-radius: 10px; aspect-ratio: 1; background: var(--fondo); display: grid; place-items: center; }
.incluye-item b { display: block; color: var(--c-marca); font-weight: 600; font-size: 14px; }
.incluye-item small { color: var(--c-gris); font-size: 12px; }
.marca-arte { display: block; text-decoration: none; }
.marca-nombre { position: absolute; top: 12%; left: 0; right: 0; text-align: center; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; padding: 0 20px; }
.marca-arte .pieza { filter: drop-shadow(0 24px 28px rgba(0,0,0,.18)); transition: transform .4s; }
.marca-arte:hover .pieza { transform: translateY(-6px) rotate(var(--rot, 0deg)); }
.pildoras { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 40px; }
.campo [aria-invalid="true"] { border-color: #C23A3A; box-shadow: 0 0 0 3px #F8DADA; }
[data-pagina="pedido"] .wa-flotante { display: none; }
.pedido-form .ic { width: 22px; height: 22px; }