/* Entre Corazones Sex Shop · prototipo de alta fidelidad basado en la estructura de lapepa.com.co
   Paleta tomada del logo: morado #5E2590, negro #231F20, carbón #393536 y blanco. */

@font-face {
  font-family: 'Red Hat Display';
  src: url('../fuentes/red-hat-display-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Red Hat Text';
  src: url('../fuentes/red-hat-text-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Permanent Marker';
  src: url('../fuentes/permanent-marker-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --morado: #5E2590;
  --morado-700: #4A1D72;
  --morado-800: #3A1659;
  --morado-300: #B39AD0;
  --morado-200: #D9CBE8;
  --morado-100: #EEE6F5;
  --morado-50: #F7F3FA;
  --lavanda: #F3EEF8;
  --tinta: #231F20;
  --carbon: #393536;
  --gris-700: #5C5758;
  --gris-600: #6B6566;
  --gris-500: #8A8586;
  --gris-300: #D6D1D3;
  --gris-200: #E7E3E5;
  --gris-100: #F4F2F3;
  --blanco: #FFFFFF;
  --exito: #1F7A4D;
  --exito-fondo: #E7F4EC;
  --error: #B42318;
  --error-fondo: #FCEBEA;
  --aviso: #7A5200;
  --aviso-fondo: #FFF4D6;
  --whatsapp: #1B7F4B;

  --f-display: 'Red Hat Display', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Red Hat Text', 'Segoe UI', system-ui, sans-serif;
  --f-pincel: 'Permanent Marker', 'Red Hat Display', cursive;

  --radio-s: 8px;
  --radio: 14px;
  --radio-l: 22px;
  --sombra: 0 10px 30px rgba(35, 31, 32, .1);
  --sombra-capa: 0 22px 60px rgba(35, 31, 32, .28);
  --ancho: 1280px;
  --margen: 24px;
  --t: 180ms ease;
  --alto-cabecera: 128px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.sin-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 900; }
h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 850; }
h3 { font-size: 20px; font-weight: 800; }
p { margin: 0; }
a { color: var(--morado); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p a, .prosa a, .aviso a { text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 3px solid var(--morado); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--morado-200); color: var(--tinta); }
kbd { font-family: var(--f-display); font-weight: 700; font-size: 13px; border: 1.5px solid var(--gris-300); border-bottom-width: 3px; border-radius: 6px; padding: 1px 7px; background: #fff; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* Los contenedores con desplazamiento propio recortan también el texto oculto para lectores de pantalla */
.carrusel, .mini-lista, .chips, .pestanas, .videos__fila, .sabores__tubos, .hero__productos, .promo-sabores__lista,
.match__items, .cl__cuerpo, .tabla-envoltura, .filtros__cuerpo, .cajon__cuerpo, .promos__pista, .sugerencias, .modal { position: relative; }
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: var(--radio-s); font-weight: 700;
}
.saltar:focus { top: 12px; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.contenedor--texto { max-width: calc(780px + 2 * var(--margen)); }
.centrado { display: flex; justify-content: center; margin-top: 28px; }

.icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icono--s { width: 18px; height: 18px; }
.icono--l { width: 28px; height: 28px; }
.icono--xl { width: 44px; height: 44px; stroke-width: 1.5; }
.pincel { font-family: var(--f-pincel); font-weight: 400; letter-spacing: .01em; }
.etiqueta-mini { font-family: var(--f-display); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--morado); }
.subtitulo { font-size: 21px; font-weight: 800; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 2px solid var(--morado);
  background: var(--morado); color: #fff;
  font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.1;
  text-align: center; text-decoration: none; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.boton:hover { background: var(--morado-700); border-color: var(--morado-700); text-decoration: none; }
.boton:active { transform: scale(.98); }
.boton[disabled] { background: var(--gris-200); border-color: var(--gris-200); color: var(--gris-600); cursor: not-allowed; transform: none; }
.boton--borde { background: #fff; color: var(--tinta); border-color: var(--tinta); }
.boton--borde:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.boton--borde[disabled] { background: #fff; border-color: var(--gris-300); color: var(--gris-600); }
.boton--claro { background: #fff; color: var(--tinta); border-color: #fff; }
.boton--claro:hover { background: var(--morado-100); border-color: var(--morado-100); color: var(--tinta); }
.boton--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
.boton--whatsapp:hover { background: #146639; border-color: #146639; }
.boton--peligro { background: var(--error); border-color: var(--error); }
.boton--peligro:hover { background: #8F1C13; border-color: #8F1C13; }
.boton--listo, .boton--listo:hover { background: var(--exito-fondo); border-color: var(--exito); color: var(--exito); }
.boton--bloque { display: flex; width: 100%; }
.boton--grande { min-height: 56px; font-size: 16px; }
.boton--chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.boton--mini { min-height: 34px; padding: 0 12px; font-size: 13px; border-width: 1.5px; }
.boton.cargando { position: relative; color: transparent !important; pointer-events: none; }
.boton.cargando::after {
  content: ''; position: absolute; width: 20px; height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.boton-icono {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1.5px solid var(--gris-300); background: #fff; color: var(--tinta);
  transition: border-color var(--t), background var(--t);
}
.boton-icono:hover { border-color: var(--tinta); }
.boton-icono[disabled] { opacity: .35; cursor: default; }
.icono-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 42px; height: 42px; padding: 0 6px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tinta); font-family: var(--f-display); font-weight: 700; font-size: 15px;
}
.icono-btn:hover { background: var(--gris-100); text-decoration: none; }
.icono-btn--activo::after { content: ''; position: absolute; right: 7px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--exito); border: 2px solid #fff; }
.icono-btn--chico { min-width: 36px; height: 36px; }
.enlace-boton {
  background: none; border: 0; padding: 0; color: var(--morado); font-weight: 650; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.enlace-boton:hover { color: var(--morado-700); }
.enlace-boton--peligro { color: var(--error); }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--tinta);
}
.enlace-flecha .icono { transition: transform var(--t); }
.enlace-flecha:hover { text-decoration: none; color: var(--morado); }
.enlace-flecha:hover .icono { transform: translateX(3px); }

.pildoras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--gris-300); background: #fff; color: var(--tinta); font-size: 14px; font-weight: 650;
}
a.pildora:hover, button.pildora:hover { border-color: var(--morado); color: var(--morado); text-decoration: none; }
.pildora--suave { background: var(--morado-100); border-color: transparent; color: var(--morado-800); font-size: 12px; padding: 3px 10px; font-weight: 750; }
.pildora--codigo { background: var(--morado-100); border-color: transparent; color: var(--morado-800); font-family: var(--f-display); font-weight: 800; font-size: 13px; padding: 4px 6px 4px 10px; letter-spacing: .02em; }
.pildora--codigo button { display: inline-grid; place-items: center; border: 0; background: transparent; color: inherit; width: 24px; height: 24px; border-radius: 50%; padding: 0; }
.pildora--codigo button:hover { background: rgba(94, 37, 144, .14); }
.pildora--quitar { cursor: pointer; padding: 6px 10px 6px 14px; }
.burbuja-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--morado); color: #fff; font-size: 12px; font-weight: 800; font-family: var(--f-display); }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .etiqueta { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--tinta); }
.campo .opcional { font-weight: 500; color: var(--gris-700); }
.entrada, .campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--gris-300); border-radius: 10px; background: #fff; font-size: 16px;
  transition: border-color var(--t), box-shadow var(--t);
}
.entrada--chica { min-height: 38px; padding: 6px 34px 6px 10px; font-size: 14px; border-radius: 8px; }
.campo textarea { min-height: 120px; resize: vertical; }
.campo select, select.entrada {
  appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select.entrada--chica { background-position: right 10px center; }
.entrada:hover, .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--gris-500); }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px rgba(94, 37, 144, .18); }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--error); }
.campo__error { display: none; align-items: flex-start; gap: 6px; color: var(--error); font-size: 14px; }
.campo--error .campo__error { display: flex; }
.campo__ayuda { font-size: 13px; color: var(--gris-700); }
.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fila-campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo--ancho { grid-column: 1 / -1; }
.campo--codigo input { font-family: var(--f-display); font-size: 26px; letter-spacing: .5em; text-align: center; font-weight: 800; }

.casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; line-height: 1.4; }
.casilla input, .radio-fila input, .metodo input, .pago-op__cabeza input, .radio-tarjeta input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--gris-500); border-radius: 5px; background: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.radio-fila input, .metodo input, .pago-op__cabeza input, .radio-tarjeta input { border-radius: 50%; }
.casilla input:checked, .radio-fila input:checked, .metodo input:checked, .pago-op__cabeza input:checked, .radio-tarjeta input:checked { background: var(--morado); border-color: var(--morado); }
.casilla input[type="checkbox"]:checked::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.radio-fila input:checked::after, .metodo input:checked::after, .pago-op__cabeza input:checked::after, .radio-tarjeta input:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.casilla__cuenta { color: var(--gris-700); }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; }
.aviso .icono { margin-top: 1px; }
.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--exito { background: var(--exito-fondo); color: var(--exito); }
.aviso--info { background: var(--morado-50); color: var(--morado-800); }

/* ---------- Anuncio y encabezado ---------- */
.anuncio { background: var(--tinta); color: #fff; font-size: 14px; }
.anuncio p { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; text-align: center; }
.anuncio .icono { color: #E3B22C; fill: #E3B22C; stroke: #E3B22C; }

.cabecera { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--gris-200); }
.cabecera__fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; gap: 12px; }
.cabecera__izq, .cabecera__der { display: flex; align-items: center; gap: 4px; }
.cabecera__der { justify-content: flex-end; }
.cabecera__menu { display: none; }
.cabecera__logo { display: block; line-height: 0; }
.cabecera__logo img { height: 58px; width: auto; }
.icono-btn--texto span { font-size: 15px; }
.asesoria {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; margin-right: 6px;
  border-radius: 999px; border: 1.5px solid var(--whatsapp); background: #fff; color: var(--whatsapp);
  font-family: var(--f-display); font-weight: 800; font-size: 14px;
}
.asesoria:hover { background: var(--whatsapp); color: #fff; }
.burbuja {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--morado); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; font-family: var(--f-display);
}
.burbuja--vacia { background: var(--gris-200); color: var(--tinta); }
.burbuja.salto { animation: salto .5s ease; }
@keyframes salto { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Menú principal y mega menú */
.menu { border-top: 1px solid var(--gris-100); }
.menu__lista { list-style: none; margin: 0 auto; padding: 0 var(--margen); display: flex; justify-content: center; gap: 6px; max-width: calc(var(--ancho) + 2 * var(--margen)); }
.menu__item { position: static; }
.menu__enlace {
  display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0 14px;
  border: 0; background: transparent; color: var(--tinta);
  font-family: var(--f-display); font-weight: 750; font-size: 15px; position: relative;
}
.menu__enlace::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--morado); transform: scaleX(0); transition: transform var(--t); }
.menu__enlace:hover, .menu__item.abierto .menu__enlace { color: var(--morado); text-decoration: none; }
.menu__enlace:hover::after, .menu__item.abierto .menu__enlace::after, .menu__enlace.actual::after { transform: scaleX(1); }
.menu__enlace .icono { transition: transform var(--t); }
.menu__item.abierto .menu__enlace .icono { transform: rotate(180deg); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--gris-200); box-shadow: 0 24px 40px rgba(35, 31, 32, .12);
  max-height: calc(100vh - 160px); overflow-y: auto;
}
.mega__interior { padding-top: 22px; padding-bottom: 28px; }
.mega__cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mega__titulo { font-family: var(--f-display); font-weight: 900; font-size: 22px; }
.mega__grupos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.mega__tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.mega__tile { display: flex; flex-direction: column; gap: 10px; color: var(--tinta); font-family: var(--f-display); font-weight: 800; font-size: 15px; }
.mega__tile:hover { color: var(--morado); text-decoration: none; }
.mega__img { display: block; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; background: var(--lavanda); }
.mega__img svg { width: 100%; height: 100%; display: block; transition: transform .35s ease; }
.mega__tile:hover .mega__img svg { transform: scale(1.06); }
.mega__subs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.mega__subs a { color: var(--gris-700); font-size: 15px; }
.mega__subs a:hover { color: var(--morado); }
.mega__marcas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.marca-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 140px; padding: 18px;
  border-radius: var(--radio); background: var(--marca); color: #fff;
}
.marca-tile:hover { text-decoration: none; filter: brightness(1.12); }
.marca-tile__nombre { font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1.05; }
.marca-tile__lema { font-size: 14px; line-height: 1.35; }

/* Fondo de capas, cajón del menú y búsqueda */
.capa-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(35, 31, 32, .55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.capa-fondo.abierto { opacity: 1; visibility: visible; }
.cajon {
  position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(400px, 90vw); background: #fff;
  display: flex; flex-direction: column; transform: translateX(-102%); visibility: hidden;
  transition: transform .3s ease, visibility .3s ease; box-shadow: var(--sombra-capa);
}
.cajon.abierto { transform: none; visibility: visible; }
.cajon__cabeza { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--gris-200); }
.cajon__cabeza img { height: 46px; width: auto; }
.cajon__cuerpo { flex: 1; overflow-y: auto; padding: 6px 16px; }
.cajon__pie { padding: 14px 16px 18px; border-top: 1px solid var(--gris-200); display: grid; gap: 14px; }
.cajon__cuenta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; color: var(--tinta); }
.cerrar { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gris-100); color: var(--tinta); }
.cerrar:hover { background: var(--gris-200); }
.buscador-cajon { display: flex; margin: 14px 16px 4px; border: 1.5px solid var(--gris-300); border-radius: 999px; overflow: hidden; }
.buscador-cajon input { flex: 1; min-width: 0; border: 0; padding: 12px 16px; font-size: 16px; background: transparent; }
.buscador-cajon input:focus { outline: none; }
.buscador-cajon:focus-within { border-color: var(--morado); box-shadow: 0 0 0 3px rgba(94, 37, 144, .18); }
.buscador-cajon button { border: 0; background: transparent; padding: 0 14px; color: var(--tinta); }
.acordeon { list-style: none; margin: 0; padding: 0; }
.acordeon > li { border-bottom: 1px solid var(--gris-100); }
.acordeon a, .acordeon__boton {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0;
  background: none; border: 0; text-align: left; color: var(--tinta); font-family: var(--f-display); font-weight: 800; font-size: 17px;
}
.acordeon__boton .icono { transition: transform var(--t); }
.acordeon__boton[aria-expanded="true"] .icono { transform: rotate(180deg); }
.acordeon__panel ul, .acordeon ul ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; }
.acordeon__panel a, .acordeon__boton--sub { min-height: 42px; font-family: var(--f-texto); font-weight: 600; font-size: 16px; color: var(--carbon); }
.acordeon ul ul a { color: var(--gris-700); font-weight: 500; }

.buscador-capa {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: #fff;
  transform: translateY(-100%); visibility: hidden; transition: transform .3s ease, visibility .3s ease;
  max-height: 100vh; overflow-y: auto; box-shadow: var(--sombra-capa);
}
.buscador-capa.abierto { transform: none; visibility: visible; }
.buscador-capa__interior { padding-top: 22px; padding-bottom: 26px; max-width: calc(860px + 2 * var(--margen)); }
.buscador { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--tinta); padding-bottom: 10px; }
.buscador > .icono { color: var(--gris-700); }
.buscador input[type="search"] { flex: 1; min-width: 0; border: 0; font-size: 22px; font-family: var(--f-display); font-weight: 650; padding: 8px 0; background: transparent; }
.buscador input[type="search"]:focus { outline: none; }
.buscador:focus-within { border-bottom-color: var(--morado); }
.buscador__populares { margin-top: 18px; display: grid; gap: 10px; }
.sugerencias { display: none; margin-top: 16px; }
.sugerencias.abierto { display: grid; gap: 14px; }
.sug__grupo { display: grid; gap: 4px; }
.sug__grupo .etiqueta-mini { margin-bottom: 4px; }
.sug { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--tinta); }
.sug:hover, .sug.activo { background: var(--morado-50); text-decoration: none; }
.sug__img { width: 52px; height: 64px; border-radius: 8px; overflow: hidden; flex: none; background: var(--lavanda); }
.sug__img svg { width: 100%; height: 100%; display: block; }
.sug__texto { display: grid; gap: 2px; }
.sug__nombre { font-weight: 650; }
.sug .precio { font-size: 14px; }
.sug--todos { font-family: var(--f-display); font-weight: 800; color: var(--morado); justify-content: flex-start; gap: 6px; }
.sug__vacio { color: var(--gris-700); }

/* ---------- Carrito lateral ---------- */
.carrito-lateral {
  position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(440px, 100vw); background: #fff;
  display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden;
  transition: transform .32s ease, visibility .32s ease; box-shadow: var(--sombra-capa);
}
.carrito-lateral.abierto { transform: none; visibility: visible; }
.cl__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--gris-200); }
.cl__cabeza h2 { font-size: 24px; }
.cl__cuenta { color: var(--gris-700); font-weight: 700; }
.barra-envio { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 14px 20px; background: var(--morado-50); font-size: 14px; }
.barra-envio .icono { color: var(--morado); }
.barra-envio__pista { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--morado-200); overflow: hidden; }
.barra-envio__pista span { display: block; height: 100%; border-radius: inherit; background: var(--morado); transition: width .4s ease; }
.cl__cuerpo { flex: 1; overflow-y: auto; padding: 4px 20px 16px; }
.cl__lineas { list-style: none; margin: 0; padding: 0; }
.cl__linea { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--gris-100); }
.cl__img { display: block; width: 76px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--lavanda); }
.cl__img svg { display: block; width: 100%; height: 100%; }
.cl__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.cl__nombre { color: var(--tinta); font-weight: 700; line-height: 1.3; }
.cl__variante, .cl__precio { font-size: 14px; color: var(--gris-700); }
.cl__precio s { color: var(--gris-600); }
.cl__acciones { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.cl__acciones .enlace-boton { font-size: 14px; color: var(--gris-700); }
.cl__total { font-weight: 800; font-family: var(--f-display); white-space: nowrap; }
.cl__vacio { display: grid; justify-items: center; gap: 14px; padding: 36px 0 28px; text-align: center; color: var(--gris-700); }
.cl__vacio p { font-family: var(--f-display); font-weight: 800; font-size: 20px; color: var(--tinta); }
.cl__sugeridos { margin-top: 18px; }
.cl__sugeridos h3 { font-size: 17px; margin-bottom: 10px; }
.mini-lista { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.mini { scroll-snap-align: start; display: grid; gap: 8px; align-content: start; border: 1px solid var(--gris-200); border-radius: 14px; padding: 10px; }
.mini__img { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--lavanda); }
.mini__img svg { width: 100%; height: 100%; display: block; }
.mini__info { display: grid; gap: 6px; }
.mini__nombre { color: var(--tinta); font-size: 13px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini .precio { font-size: 14px; }
.cl__pie { padding: 16px 20px 20px; border-top: 1px solid var(--gris-200); display: grid; gap: 10px; background: #fff; }
.fila-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-display); font-size: 18px; font-weight: 800; }
.fila-total--grande { font-size: 22px; }
.cl__nota { font-size: 13px; color: var(--gris-700); }
.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--gris-300); border-radius: 999px; height: 38px; }
.cantidad button { width: 36px; height: 100%; border: 0; background: transparent; display: grid; place-items: center; border-radius: 999px; color: var(--tinta); }
.cantidad button:hover:not([disabled]) { background: var(--gris-100); }
.cantidad button[disabled] { color: var(--gris-300); cursor: default; }
.cantidad__n { min-width: 28px; text-align: center; font-weight: 800; font-family: var(--f-display); }

/* Medios de pago */
.medios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.medio { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--gris-300); background: #fff; font-family: var(--f-display); font-weight: 800; font-size: 12px; color: var(--carbon); letter-spacing: .01em; }
.medios--mini .medio { height: 24px; font-size: 11px; padding: 0 8px; }
.medios--ficha { margin-top: 16px; }
.prosa .medios { padding-left: 0; margin-top: 16px; }
.prosa .medios li + li { margin-top: 0; }
.medios--pie .medio { background: var(--carbon); border-color: #4A4546; color: #fff; }

/* ---------- Piezas de producto ---------- */
.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.precio__ahora { font-family: var(--f-display); font-weight: 850; font-size: 17px; color: var(--tinta); }
.precio--oferta .precio__ahora { color: var(--morado); }
.precio__antes { color: var(--gris-600); font-size: 14px; }
.precio--grande .precio__ahora { font-size: 30px; }
.precio--grande .precio__antes { font-size: 18px; }
.insignia {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px;
  background: var(--morado); color: #fff; font-family: var(--f-display); font-weight: 850; font-size: 13px;
}
.insignia--agotado { background: var(--tinta); }
.insignia--linea { position: static; align-self: center; }
.estrellas { position: relative; display: inline-block; width: 82px; height: 16px; flex: none; vertical-align: middle; }
.estrellas svg { display: block; width: 82px; height: 16px; max-width: none; }
.estrellas__base svg { fill: var(--gris-300); }
.estrellas__llenas { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.estrellas__llenas svg { fill: var(--morado); }
.estrellas--grande, .estrellas--grande svg { width: 124px; height: 24px; }
.sin-resenas { color: var(--gris-700); font-size: 13px; }

.tarjeta { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; }
.tarjeta__imagen { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: var(--lavanda); }
.tarjeta__imagen svg { display: block; width: 100%; height: 100%; transition: transform .45s ease; }
.tarjeta:hover .tarjeta__imagen svg { transform: scale(1.05); }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta__titulo { font-weight: 650; font-size: 15px; line-height: 1.35; }
.tarjeta__titulo a { color: var(--tinta); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__titulo a:hover { color: var(--morado); text-decoration: none; }
.tarjeta__resenas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris-700); }
.tarjeta__colores { font-size: 13px; color: var(--gris-700); }
.tarjeta__accion { margin-top: auto; padding-top: 4px; }

.seccion { padding: 56px 0; }
.seccion + .seccion { padding-top: 16px; }
.seccion--suave { background: var(--morado-50); }
.seccion + .seccion--suave, .seccion--suave + .seccion { padding-top: 56px; }
.seccion__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.seccion__sub { margin-top: 8px; color: var(--gris-700); font-size: 17px; }
.seccion__acciones { display: flex; align-items: center; gap: 14px; flex: none; }
.controles { display: flex; gap: 8px; }
.carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }
.carrusel:focus-visible { outline-offset: 6px; }
.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.chips { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px;
  border: 1.5px solid var(--gris-200); background: #fff; color: var(--tinta); white-space: nowrap; font-weight: 700; font-family: var(--f-display); font-size: 15px;
}
.chip:hover { border-color: var(--morado); text-decoration: none; }
.chip--activo { border-color: var(--morado); background: var(--morado); color: #fff; }
.chip__img { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--lavanda); flex: none; }
.chip__img svg { width: 100%; height: 100%; display: block; }

/* ---------- Inicio ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 20%, #4A1D72 0%, #2C1240 38%, var(--tinta) 72%); color: #fff; }
.hero__fondo { position: absolute; right: -6%; top: -10%; width: 62%; height: 130%; pointer-events: none; }
.hero__interior { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.hero__etiqueta { font-size: 30px; color: var(--morado-300); margin-bottom: 8px; transform: rotate(-3deg); display: inline-block; }
.hero h1 { font-size: clamp(38px, 5vw, 64px); }
.hero__bajada { margin: 18px 0 28px; font-size: 19px; color: #E9E2EF; max-width: 30em; }
.hero__productos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hero__productos li { display: flex; }
.hero__producto { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 10px 10px 14px; border-radius: 18px; background: #fff; color: var(--tinta); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); transition: transform var(--t); }
.hero__producto:hover { transform: translateY(-4px); text-decoration: none; }
.hero__img { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--lavanda); }
.hero__img svg { width: 100%; height: 100%; display: block; }
.hero__nombre { font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.2; padding: 0 4px; }
.hero__precio { font-weight: 700; color: var(--morado); padding: 0 4px; font-size: 15px; }
.hero :focus-visible, .pie :focus-visible, .promo--negro :focus-visible, .promo--morado :focus-visible, .visor :focus-visible { outline-color: #fff; }

.confianza { border-bottom: 1px solid var(--gris-200); }
.confianza__lista { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.confianza__lista li { border-right: 1px solid var(--gris-200); }
.confianza__lista li:last-child { border-right: 0; }
.confianza__lista a, .confianza__lista button {
  display: flex; gap: 14px; align-items: flex-start; width: 100%; height: 100%; padding: 22px 18px; color: var(--tinta);
  background: none; border: 0; text-align: left; font-size: 14px; line-height: 1.4;
}
.confianza__lista a:hover, .confianza__lista button:hover { background: var(--morado-50); text-decoration: none; }
.confianza__lista .icono { color: var(--morado); }
.confianza__lista strong { display: block; font-family: var(--f-display); font-size: 16px; font-weight: 850; margin-bottom: 3px; }
.confianza__lista span > span { color: var(--gris-700); }

.promos { padding: 40px 0 8px; }
.promos__pista { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radio-l); }
.promos__pista::-webkit-scrollbar { display: none; }
.promo { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; min-height: 340px; border-radius: var(--radio-l); overflow: hidden; position: relative; }
.promo--morado { background: linear-gradient(120deg, var(--morado) 0%, #7A3CB0 100%); color: #fff; }
.promo--negro { background: linear-gradient(120deg, var(--tinta) 0%, var(--carbon) 100%); color: #fff; }
.promo--lavanda { background: linear-gradient(120deg, var(--morado-100) 0%, #E2D3F0 100%); color: var(--tinta); }
.promo__texto { padding: 44px 48px; display: grid; gap: 14px; justify-items: start; }
.promo__texto h2 { font-size: clamp(28px, 3.4vw, 44px); max-width: 13em; }
.promo__texto p { font-size: 18px; max-width: 28em; opacity: .92; }
.promo__img { display: block; height: 100%; align-self: stretch; }
.promo__img svg { width: 100%; height: 100%; max-height: 360px; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .25)); }
.promos__ctrl { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.promos__puntos { display: flex; gap: 0; }
.promos__puntos button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; transition: width var(--t); }
.promos__puntos button::before { content: ''; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 999px; background: var(--gris-300); transition: width var(--t), background var(--t); }
.promos__puntos button[aria-current="true"] { width: 44px; }
.promos__puntos button[aria-current="true"]::before { width: 32px; background: var(--morado); }

.sabores { margin: 40px 0 0; background: #F7F3FA; background: color-mix(in srgb, var(--sabor) 16%, #fff); transition: background .4s ease; }
.sabores__interior { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.sabores__texto { display: grid; gap: 14px; justify-items: start; }
.sabores__texto h2 { font-size: clamp(32px, 4vw, 50px); }
.sabores__texto h2 .pincel { color: var(--morado); display: inline-block; }
.sabores__texto > p { font-size: 17px; color: var(--carbon); max-width: 30em; }
.sabores__destacado { display: grid; gap: 8px; justify-items: start; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: var(--sombra); min-width: 260px; }
.sabores__nombre a { font-family: var(--f-display); font-weight: 850; font-size: 19px; color: var(--tinta); text-decoration: none; }
.sabores__nota { font-size: 14px; color: var(--gris-700); }
.sabores__tubos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.tubo { display: grid; gap: 8px; justify-items: center; align-content: start; width: 100%; height: 100%; padding: 8px; border: 2px solid transparent; border-radius: 18px; background: rgba(255, 255, 255, .55); transition: transform var(--t), border-color var(--t), background var(--t); }
.tubo:hover { transform: translateY(-4px); }
.tubo[aria-pressed="true"] { border-color: var(--morado); background: #fff; transform: translateY(-8px); }
.tubo__img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; }
.tubo__img svg { width: 100%; height: 100%; display: block; }
.tubo__nombre { font-family: var(--f-display); font-weight: 800; font-size: 14px; line-height: 1.2; text-align: center; }
.tubo__agotado { font-size: 12px; font-weight: 700; color: var(--gris-700); }

.pestanas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 18px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--gris-300); background: #fff; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--tinta); }
.pestana:hover { border-color: var(--morado); }
.pestana[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.videos__fila { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.videos__fila::-webkit-scrollbar { display: none; }
.videos__fila li { scroll-snap-align: start; }
.video-tarjeta { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--tinta); color: #fff; text-align: left; }
.video-tarjeta .video-svg { width: 100%; height: 100%; display: block; }
.video-tarjeta__play { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.video-tarjeta__play .icono { fill: #fff; width: 18px; height: 18px; }
.video-tarjeta__nombre { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.2; }
.video-figura { transform-origin: 200px 380px; animation: v-flotar 3.6s ease-in-out infinite; }
.video-vibra { transform-origin: 200px 280px; animation: v-vibrar 2.4s linear infinite; }
.video-barrido { animation: v-barrido 3.4s ease-in-out infinite; }
.video-destellos { animation: v-parpadeo 2.2s ease-in-out infinite alternate; }
.video-halo { transform-origin: 200px 360px; animation: v-halo 3.6s ease-in-out infinite; }
.video-tarjeta .video-svg * { animation-play-state: paused; }
.video-tarjeta:hover .video-svg *, .video-tarjeta:focus-visible .video-svg * { animation-play-state: running; }
@keyframes v-flotar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes v-vibrar { 0%, 60%, 100% { transform: translate(0, 0); } 62% { transform: translate(-2px, 1px); } 64% { transform: translate(2px, -1px); } 66% { transform: translate(-2px, -1px); } 68% { transform: translate(2px, 1px); } 70% { transform: translate(-1px, 0); } 72% { transform: translate(1px, 1px); } }
@keyframes v-barrido { 0% { transform: translateX(0); } 100% { transform: translateX(760px); } }
@keyframes v-parpadeo { from { opacity: .35; } to { opacity: 1; } }
@keyframes v-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.match__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
.match__intro { display: grid; gap: 14px; align-self: start; padding-top: 24px; }
.match__intro h2 em { font-style: normal; color: var(--morado); font-size: 1.08em; }
.match__intro p { color: var(--carbon); font-size: 17px; }
.match__teclas { display: flex; align-items: center; gap: 8px; color: var(--gris-700); font-size: 15px; }
.match__juego { display: grid; gap: 14px; justify-items: center; }
.match__mazo { position: relative; width: 100%; max-width: 340px; height: 500px; border-radius: 22px; }
.mcarta {
  position: absolute; inset: 0; z-index: calc(10 - var(--k)); background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(35, 31, 32, .16); display: grid; grid-template-rows: 1fr auto;
  transform: translateY(calc(var(--k) * 14px)) scale(calc(1 - var(--k) * .05)); transition: transform .25s ease;
  touch-action: pan-y; user-select: none; cursor: grab;
}
.mcarta.arrastrando { transition: none; cursor: grabbing; }
.mcarta__img { overflow: hidden; background: var(--lavanda); min-height: 0; }
.mcarta__img svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.mcarta__info { padding: 14px 18px 18px; display: grid; gap: 4px; }
.mcarta__cat { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--morado); }
.mcarta__nombre { font-family: var(--f-display); font-weight: 850; font-size: 18px; line-height: 1.2; }
.mcarta__resenas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris-700); }
.mcarta__sello { position: absolute; top: 24px; padding: 6px 14px; border: 3px solid; border-radius: 10px; font-family: var(--f-display); font-weight: 900; font-size: 22px; text-transform: uppercase; background: rgba(255, 255, 255, .9); pointer-events: none; }
.mcarta__sello--si { left: 18px; color: var(--exito); transform: rotate(-12deg); opacity: var(--si, 0); }
.mcarta__sello--no { right: 18px; color: var(--error); transform: rotate(12deg); opacity: var(--no, 0); }
.match__fin { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; border-radius: 22px; border: 2px dashed var(--morado-200); background: var(--morado-50); }
.match__fin .icono { color: var(--morado); }
.match__fin-titulo { font-family: var(--f-display); font-weight: 900; font-size: 22px; }
.match__estado { font-size: 14px; color: var(--gris-700); text-align: center; min-height: 1.5em; }
.match__botones { display: flex; align-items: center; gap: 18px; }
.match__btn { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gris-200); background: #fff; box-shadow: var(--sombra); transition: transform var(--t); }
.match__btn:hover:not([disabled]) { transform: scale(1.08); }
.match__btn[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.match__btn--no { color: var(--error); }
.match__btn--si { color: #fff; background: var(--morado); border-color: var(--morado); }
.match__btn--si .icono { fill: #fff; }
.match__btn--deshacer { width: 48px; height: 48px; color: var(--carbon); }
.match__lista { border-radius: 22px; background: var(--morado-50); padding: 20px; display: grid; gap: 12px; align-content: start; }
.match__lista h3 { display: flex; align-items: center; gap: 10px; }
.match__vacia { color: var(--gris-700); font-size: 15px; }
.match__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 470px; overflow-y: auto; }
.match__item { display: grid; grid-template-columns: 56px 1fr; gap: 6px 12px; align-items: center; padding: 8px; border-radius: 14px; background: #fff; }
.match__item-img { grid-row: span 2; width: 56px; height: 70px; border-radius: 10px; overflow: hidden; background: var(--lavanda); }
.match__item-img svg { width: 100%; height: 100%; display: block; }
.match__item-info { display: grid; gap: 2px; min-width: 0; }
.match__item-info a { color: var(--tinta); font-weight: 700; font-size: 14px; line-height: 1.25; }
.match__item-info .precio__ahora { font-size: 15px; }
.match__item-acciones { display: flex; align-items: center; gap: 6px; }
.quitar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--gris-100); color: var(--gris-700); }
.quitar:hover { background: var(--gris-200); color: var(--tinta); }

.gusto__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gusto__tier { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 24px 24px; border-radius: var(--radio-l); background: var(--morado-50); overflow: hidden; }
.gusto__tier--2 { background: var(--morado-100); }
.gusto__tier--3 { background: var(--tinta); color: #fff; }
.gusto__tier--3 .gusto__sub, .gusto__tier--3 .gusto__productos span { color: #D8CFE0; }
.gusto__tier--3 a, .gusto__tier--3 .enlace-flecha { color: #fff; }
.gusto__tier--3 :focus-visible { outline-color: #fff; }
.gusto__sub { font-family: var(--f-pincel); font-size: 20px; color: var(--morado); }
.gusto__tier h3 { font-size: 28px; }
.gusto__abanico { position: relative; height: 196px; margin: 6px 0 2px; cursor: pointer; }
.gusto__carta { position: absolute; left: 50%; top: 6px; width: 118px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px rgba(35, 31, 32, .22); border: 3px solid #fff; transition: transform .35s ease; }
.gusto__carta svg { width: 100%; height: 100%; display: block; }
.gusto__carta--1 { transform: translateX(-62%) rotate(-7deg); z-index: 1; }
.gusto__carta--2 { transform: translateX(-50%) rotate(1deg); z-index: 3; }
.gusto__carta--3 { transform: translateX(-38%) rotate(8deg); z-index: 2; }
.gusto__tier:hover .gusto__carta--1, .gusto__tier.abierto .gusto__carta--1 { transform: translateX(-138%) rotate(-12deg); }
.gusto__tier:hover .gusto__carta--2, .gusto__tier.abierto .gusto__carta--2 { transform: translateX(-50%) translateY(-6px); }
.gusto__tier:hover .gusto__carta--3, .gusto__tier.abierto .gusto__carta--3 { transform: translateX(38%) rotate(12deg); }
.gusto__pista { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--gris-700); }
.gusto__tier--3 .gusto__pista { color: #D8CFE0; }
.solo-tactil { display: none; }
@media (hover: none) { .solo-tactil { display: inline; } .solo-puntero { display: none; } }
.gusto__productos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.gusto__productos li { display: flex; justify-content: space-between; gap: 10px; }
.gusto__productos a { color: inherit; font-weight: 650; }
.gusto__productos span { color: var(--gris-700); white-space: nowrap; }

/* ---------- Colección y listados ---------- */
.coleccion { padding-top: 32px; }
.coleccion__cabeza { display: grid; gap: 12px; margin-bottom: 20px; }
.coleccion__intro { color: var(--carbon); font-size: 17px; max-width: 60em; }
.coleccion__chips { margin-bottom: 18px; }
.listado { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; padding-bottom: 48px; }
.listado__lateral { position: sticky; top: 148px; max-height: calc(100vh - 168px); overflow-y: auto; scrollbar-width: thin; }
.filtros { display: grid; gap: 4px; }
.filtros__cabeza { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
.filtros__cabeza .cerrar { display: none; }
.filtro { border-bottom: 1px solid var(--gris-200); padding: 10px 0 14px; }
.filtro summary { cursor: pointer; font-family: var(--f-display); font-weight: 850; font-size: 16px; padding: 6px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.filtro summary::-webkit-details-marker { display: none; }
.filtro summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--t); }
.filtro[open] summary::after { transform: rotate(-135deg) translateX(-2px); }
.filtro ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.filtro__precio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.campo-precio { position: relative; display: grid; gap: 4px; }
.campo-precio label { font-size: 13px; font-weight: 700; color: var(--gris-700); }
.campo-precio span { position: absolute; left: 12px; bottom: 12px; color: var(--gris-700); }
.campo-precio input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px 8px 24px; border: 1.5px solid var(--gris-300); border-radius: 10px; font-size: 15px; }
.campo-precio input:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px rgba(94, 37, 144, .18); }
.filtro__error { margin-top: 8px; }
.filtros__pie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; }
.herramientas { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--gris-200); margin-bottom: 20px; }
.herramientas__filtrar { display: none; }
.herramientas__conteo { color: var(--gris-700); font-weight: 650; margin-right: auto; }
.herramientas__orden { display: flex; align-items: center; gap: 10px; }
.herramientas__orden label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.herramientas__orden select { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 6px 40px 6px 14px; border: 1.5px solid var(--gris-300); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font-weight: 650; font-size: 15px; }
.activos { list-style: none; margin: -6px 0 20px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paginacion { margin-top: 40px; }
.paginacion ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.paginacion a, .paginacion span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 999px; color: var(--tinta); font-weight: 750; font-family: var(--f-display); }
.paginacion a:hover { background: var(--gris-100); text-decoration: none; }
.paginacion [aria-current="page"] { background: var(--tinta); color: #fff; }
.vacio { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 56px 20px; border-radius: var(--radio-l); background: var(--morado-50); color: var(--gris-700); }
.vacio .icono { color: var(--morado); }
.vacio__titulo { font-family: var(--f-display); font-weight: 850; font-size: 22px; color: var(--tinta); }
.seo { background: var(--gris-100); }
.seo__interior { display: grid; gap: 4px; }
.resenas-tienda__resumen { display: flex; align-items: center; gap: 10px; }
.carrusel--resenas { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
.resena-tarjeta { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--radio); border: 1px solid var(--gris-200); background: #fff; }
.resena-tarjeta__titulo { font-family: var(--f-display); font-weight: 850; }
.resena-tarjeta__autor { font-size: 13px; color: var(--gris-700); }
.explorar__lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; }
.explorar__tile { display: grid; gap: 8px; justify-items: center; text-align: center; color: var(--tinta); font-family: var(--f-display); font-weight: 800; font-size: 14px; line-height: 1.2; }
.explorar__tile:hover { color: var(--morado); text-decoration: none; }
.explorar__img { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--lavanda); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--gris-200); transition: box-shadow var(--t); }
.explorar__tile:hover .explorar__img { box-shadow: 0 0 0 2.5px var(--morado); }
.explorar__img svg { width: 100%; height: 100%; display: block; }

/* Búsqueda */
.buscar { padding-top: 32px; padding-bottom: 48px; }
.buscar__cabeza { display: grid; gap: 16px; margin-bottom: 24px; }
.buscador-pagina { display: flex; gap: 10px; max-width: 640px; }
.buscador-pagina input { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border: 1.5px solid var(--gris-300); border-radius: 999px; font-size: 16px; }
.buscador-pagina input:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px rgba(94, 37, 144, .18); }
.buscar__conteo { font-weight: 700; color: var(--carbon); }
.buscar__populares { display: grid; gap: 8px; }
.buscar__ayuda { color: var(--gris-700); }
.buscar__articulos { margin-top: 36px; display: grid; gap: 12px; }
.lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-enlaces span { font-size: 13px; color: var(--gris-700); }

/* ---------- Ficha de producto ---------- */
.migas { padding: 18px 0 6px; font-size: 14px; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: var(--gris-700); }
.migas li + li::before { content: '/'; margin-right: 6px; color: var(--gris-500); }
.migas a { color: var(--gris-700); }
.ficha { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: start; padding-top: 12px; padding-bottom: 40px; }
.ficha__galeria { position: sticky; top: 140px; display: grid; gap: 12px; }
.galeria__principal { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio-l); overflow: hidden; background: var(--lavanda); }
.galeria__principal svg { width: 100%; height: 100%; display: block; }
.galeria__miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.galeria__mini { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--lavanda); }
.galeria__mini svg { width: 100%; height: 100%; display: block; }
.galeria__mini [data-vista-img] { display: block; width: 100%; height: 100%; }
.ficha__notas [data-disp-icono] { display: inline-flex; }
.galeria__mini[aria-pressed="true"] { border-color: var(--morado); }
.ficha__info { display: grid; gap: 14px; align-content: start; }
.ficha__marca { font-family: var(--f-display); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.ficha__titulo { font-size: clamp(28px, 3vw, 38px); }
.ficha__resenas { display: inline-flex; align-items: center; gap: 8px; color: var(--carbon); font-size: 15px; justify-self: start; }
.ficha__precio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ficha__destacados { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ficha__destacados li { padding: 6px 12px; border-radius: 999px; background: var(--morado-50); color: var(--morado-800); font-size: 14px; font-weight: 700; }
.ficha__opciones { display: grid; gap: 14px; }
.opcion { border: 0; margin: 0; padding: 0; min-width: 0; }
.opcion legend { font-family: var(--f-display); font-weight: 800; font-size: 15px; margin-bottom: 8px; padding: 0; }
.opcion legend span { font-weight: 600; color: var(--gris-700); }
.opcion__valores { display: flex; flex-wrap: wrap; gap: 8px; }
.valor { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 52px; justify-content: center; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--gris-300); background: #fff; font-weight: 700; font-size: 15px; color: var(--tinta); }
.valor:hover { border-color: var(--tinta); }
.valor[aria-pressed="true"] { border-color: var(--morado); box-shadow: inset 0 0 0 1.5px var(--morado); background: var(--morado-50); color: var(--morado-800); }
.valor--agotado span:last-child { text-decoration: line-through; color: var(--gris-600); }
.valor__muestra { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .18); flex: none; }
.ficha__notas { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 10px; border-radius: var(--radio); background: var(--gris-100); font-size: 15px; }
.ficha__notas li { display: flex; gap: 10px; align-items: flex-start; }
.ficha__notas .icono { margin-top: 2px; color: var(--morado); }
.ficha__notas .nota--ok .icono { color: var(--exito); }
.ficha__notas .nota--agotado .icono { color: var(--error); }
.ficha__compra { display: grid; gap: 10px; }
.ficha__video { justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; }
.complementa, .set { border: 1.5px solid var(--gris-200); border-radius: var(--radio-l); padding: 18px; display: grid; gap: 12px; }
.complementa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comp { display: grid; grid-template-columns: auto 56px 1fr; gap: 12px; align-items: center; }
.comp__img { display: block; width: 56px; height: 70px; border-radius: 10px; overflow: hidden; background: var(--lavanda); }
.comp__img svg { width: 100%; height: 100%; display: block; }
.comp__info { display: grid; gap: 4px; min-width: 0; }
.comp__info a { color: var(--tinta); font-weight: 700; font-size: 15px; line-height: 1.25; }
.comp__info .precio__ahora { font-size: 15px; }
.set { background: var(--morado-50); border-color: transparent; }
.set__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: s; }
.set__items li { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 13px; }
.set__items li + li::before { content: '+'; position: absolute; left: -10px; top: 36px; transform: translateX(-50%); font-family: var(--f-display); font-weight: 900; font-size: 20px; color: var(--morado); }
.set__img { width: 80px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #fff; }
.set__img svg { width: 100%; height: 100%; display: block; }
.set__nombre { font-weight: 700; line-height: 1.2; }
.set__precio { color: var(--gris-700); }
.set__total { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 16px; }
.set__total strong { font-family: var(--f-display); font-size: 22px; color: var(--morado); }
.set__total s { color: var(--gris-600); }
.acordeones { border-top: 1px solid var(--gris-200); }
.acordeon-item { border-bottom: 1px solid var(--gris-200); }
.acordeon-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-family: var(--f-display); font-weight: 850; font-size: 17px; }
.acordeon-item summary::-webkit-details-marker { display: none; }
.acordeon-item summary::after { content: '+'; font-size: 24px; font-weight: 500; line-height: 1; color: var(--morado); }
.acordeon-item[open] summary::after { content: '−'; }
.acordeon-item > .prosa { padding: 0 0 18px; }
.prosa { font-size: 16px; line-height: 1.65; }
.prosa > * + * { margin-top: 12px; }
.prosa h2 { font-size: 26px; margin-top: 30px; }
.prosa h3 { font-size: 18px; margin-top: 18px; }
.prosa ul, .prosa ol { padding-left: 20px; margin-bottom: 0; }
.prosa li + li { margin-top: 6px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gris-200); vertical-align: top; }
.tabla thead th { background: var(--gris-100); font-family: var(--f-display); font-weight: 800; }
.tabla--ficha th { width: 42%; color: var(--gris-700); font-weight: 650; }
.tabla--envio td:last-child, .tabla--envio th:last-child { white-space: nowrap; text-align: right; }
@media (min-width: 768px) { .tabla--envio td:first-child { white-space: nowrap; } }
.tabla-envoltura { overflow-x: auto; border-radius: 12px; border: 1px solid var(--gris-200); }
.tabla-envoltura .tabla th[scope="row"] { font-weight: 700; }

.promo-sabores { background: var(--tinta); color: #fff; }
.promo-sabores .etiqueta-mini { color: var(--morado-300); }
.promo-sabores h2 { margin: 6px 0 24px; }
.promo-sabores :focus-visible { outline-color: #fff; }
.promo-sabores__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.psabor { display: grid; gap: 8px; justify-items: start; padding: 12px; border-radius: 18px; background: #2E292B; }
.psabor__img { width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 3px var(--sabor); }
.psabor__img svg { width: 100%; height: 100%; display: block; }
.psabor__nombre a { color: #fff; font-family: var(--f-display); font-weight: 850; font-size: 17px; text-decoration: none; }
.psabor__dato { font-size: 13px; color: #CFC6D6; }
.psabor .boton--borde { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.psabor .boton--borde:hover { background: #fff; color: var(--tinta); }
.psabor .boton--borde[disabled] { color: #A9A1AE; border-color: #4A4546; }
.psabor .boton--listo { background: var(--exito-fondo); color: var(--exito); border-color: var(--exito-fondo); }

.discreto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 32px; align-items: center; margin: 48px 0 24px; padding: 36px; border-radius: var(--radio-l); background: var(--morado-50); }
.discreto__texto { display: grid; gap: 10px; }
.discreto__texto > p:last-child { color: var(--carbon); }
.discreto__pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: paso; }
.discreto__pasos li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: #fff; }
.discreto__pasos .icono { color: var(--morado); }
.discreto__pasos strong { font-family: var(--f-display); font-size: 16px; line-height: 1.25; }
.discreto__pasos span { font-size: 14px; color: var(--gris-700); }

.asesoria-bloque { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; padding: 18px; border-radius: 18px; background: #EAF5EE; }
.asesoria-bloque__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--whatsapp); color: #fff; }
.asesoria-bloque__titulo { font-family: var(--f-display); font-weight: 850; font-size: 17px; }
.asesoria-bloque p:not(.asesoria-bloque__titulo) { font-size: 14px; color: var(--carbon); }
.asesoria-bloque .boton { grid-column: 1 / -1; }
.asesoria-bloque--ancho { grid-template-columns: auto 1fr auto; margin: 0 0 40px; padding: 22px 26px; }
.asesoria-bloque--ancho .boton { grid-column: auto; }

.resenas__resumen { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 32px; align-items: center; margin: 22px 0 26px; padding: 24px; border-radius: var(--radio-l); background: var(--gris-100); }
.resenas__resumen--pagina { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
.resenas__promedio { display: grid; gap: 6px; justify-items: start; }
.resenas__numero { font-family: var(--f-display); font-weight: 900; font-size: 48px; line-height: 1; }
.resenas__vacio { font-family: var(--f-display); font-weight: 850; font-size: 20px; }
.histograma { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.histograma li { display: grid; grid-template-columns: 90px 1fr 92px; gap: 12px; align-items: center; font-size: 14px; }
.histograma__barra { height: 10px; border-radius: 999px; background: var(--gris-200); overflow: hidden; }
.histograma__barra i { display: block; height: 100%; background: var(--morado); border-radius: inherit; }
.histograma__valor { color: var(--gris-700); }
.form-resena { display: grid; gap: 16px; margin-bottom: 28px; padding: 24px; border-radius: var(--radio-l); border: 1.5px solid var(--gris-200); }
.form-resena__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.calificar { border: 0; padding: 0; margin: 0; }
.calificar legend { font-family: var(--f-display); font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.calificar__estrellas { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.calificar__estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calificar__estrellas label { cursor: pointer; color: var(--gris-300); padding: 2px; border-radius: 6px; }
.calificar__estrellas label .icono { width: 34px; height: 34px; fill: currentColor; stroke: currentColor; }
.calificar__estrellas input:checked ~ label, .calificar__estrellas label:hover, .calificar__estrellas label:hover ~ label { color: var(--morado); }
.calificar__estrellas input:focus-visible + label { outline: 3px solid var(--morado); outline-offset: 1px; }
.calificar.campo--error .campo__error { display: flex; margin-top: 6px; }
.resenas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.resenas__lista--rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.resenas__lista--rejilla .resena { border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 18px; align-content: start; }
.resena { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--gris-200); }
.resena__cabeza { display: flex; gap: 12px; align-items: center; }
.resena__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--morado-100); color: var(--morado-800); font-family: var(--f-display); font-weight: 900; }
.resena__autor { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.resena__lugar, .resena__producto { font-size: 13px; color: var(--gris-700); }
.resena__titulo { font-family: var(--f-display); font-weight: 850; font-size: 17px; }
.resena__foto { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--morado-800); }

/* ---------- Blog ---------- */
.blog { padding-top: 36px; padding-bottom: 56px; }
.blog__cabeza { margin-bottom: 28px; display: grid; gap: 10px; }
.blog__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.blog__rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.articulo-tarjeta { display: grid; gap: 10px; align-content: start; justify-items: start; }
.articulo-tarjeta__img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radio-l); overflow: hidden; }
.articulo-tarjeta__img svg { width: 100%; height: 100%; display: block; transition: transform .5s ease; }
.articulo-tarjeta:hover .articulo-tarjeta__img svg { transform: scale(1.04); }
.articulo-tarjeta__titulo { font-size: 21px; line-height: 1.2; }
.articulo-tarjeta__titulo a { color: var(--tinta); }
.articulo-tarjeta__titulo a:hover { color: var(--morado); text-decoration: none; }
.articulo-tarjeta > p { color: var(--gris-700); }
.etiqueta-blog { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: var(--morado-100); color: var(--morado-800); font-size: 13px; font-weight: 800; }
.etiqueta-blog:hover { background: var(--morado); color: #fff; text-decoration: none; }
.articulo { padding-top: 36px; }
.articulo__cabeza { display: grid; gap: 14px; justify-items: start; }
.articulo__fecha { color: var(--gris-700); }
.articulo__portada { margin: 24px 0 10px; border-radius: var(--radio-l); overflow: hidden; aspect-ratio: 16 / 10; }
.articulo__portada svg { width: 100%; height: 100%; display: block; }
.articulo__cuerpo { padding-bottom: 20px; }
.breve { padding: 18px 20px; border-radius: 16px; background: var(--morado-50); border-left: 5px solid var(--morado); }
.caja-producto, .caja-categoria { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: 18px; border: 1.5px solid var(--gris-200); }
.caja-producto > div, .caja-categoria > div { display: grid; gap: 6px; justify-items: start; }
.caja-producto__img, .caja-categoria__img { display: block; width: 110px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--lavanda); }
.caja-categoria__img { aspect-ratio: 1; border-radius: 50%; }
.caja-producto__img svg, .caja-categoria__img svg { width: 100%; height: 100%; display: block; }
.caja-producto__nombre { font-family: var(--f-display); font-weight: 850; font-size: 17px; }
.articulo__lecturas { color: var(--carbon); }
.articulo__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 24px; padding-bottom: 8px; }
.articulo__nav-enlace { display: flex; gap: 10px; align-items: center; padding: 16px; border-radius: 16px; border: 1.5px solid var(--gris-200); color: var(--tinta); font-weight: 700; line-height: 1.3; }
.articulo__nav-enlace:hover { border-color: var(--morado); text-decoration: none; }
.articulo__nav-enlace > span { display: grid; gap: 4px; }
.articulo__nav-enlace--sig { justify-content: flex-end; text-align: right; }

/* ---------- Páginas informativas ---------- */
.pagina-hero { background: var(--tinta); color: #fff; padding: 56px 0 48px; }
.pagina-hero .contenedor { display: grid; gap: 12px; max-width: calc(860px + 2 * var(--margen)); }
.pagina-hero .etiqueta-mini { color: var(--morado-300); }
.pagina-hero p:last-child { font-size: 18px; color: #E4DCEA; }
.pagina, .pagina-resenas { padding-top: 32px; padding-bottom: 56px; }
.pagina--legal { padding-top: 40px; }
.cabeza-pagina { display: grid; gap: 10px; }
.pagina .cabeza-pagina { margin-bottom: 24px; }
.linea-tiempo { list-style: none; padding: 0 !important; display: grid; gap: 12px; counter-reset: t; }
.linea-tiempo li { counter-increment: t; position: relative; padding: 14px 16px 14px 56px; border-radius: 14px; background: var(--gris-100); }
.linea-tiempo li::before { content: counter(t); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--morado); color: #fff; font-family: var(--f-display); font-weight: 900; font-size: 14px; }
.faq { border-top: 1px solid var(--gris-200); }
.no-encuentras { margin-top: 36px !important; padding: 26px; border-radius: var(--radio-l); background: var(--morado-50); display: grid; gap: 12px; justify-items: start; }
.no-encuentras h2 { margin-top: 0 !important; font-size: 24px; }
.medios-detalle { list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.medios-detalle li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px; border-radius: 14px; border: 1.5px solid var(--gris-200); margin: 0 !important; }
.medios-detalle .icono { color: var(--morado); }
.medios-detalle p { color: var(--gris-700); font-size: 15px; margin-top: 4px; }
.contacto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.contacto__canales { display: grid; gap: 20px; }
.lista-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lista-datos li { display: flex; gap: 12px; align-items: flex-start; }
.lista-datos .icono { color: var(--morado); margin-top: 3px; }
.tarjeta-form { display: grid; gap: 16px; padding: 28px; border-radius: var(--radio-l); border: 1.5px solid var(--gris-200); }

/* ---------- Carrito (página) ---------- */
.carrito { padding-top: 32px; padding-bottom: 48px; }
.carrito--vacio { display: grid; gap: 16px; justify-items: start; padding-bottom: 24px; }
.carrito__cuenta { color: var(--gris-700); }
.carrito__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.carrito__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.carrito__grid .barra-envio { border-radius: 14px; margin-bottom: 8px; }
.carrito__tabla { width: 100%; border-collapse: collapse; }
.carrito__tabla th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-700); padding: 14px 0; border-bottom: 1px solid var(--gris-200); font-family: var(--f-display); }
.carrito__tabla th:last-child, .carrito__total { text-align: right; }
.carrito__tabla td { padding: 18px 0; border-bottom: 1px solid var(--gris-200); vertical-align: top; }
.carrito__producto { display: flex; gap: 16px; }
.carrito__img { display: block; width: 92px; flex: none; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--lavanda); }
.carrito__img svg { width: 100%; height: 100%; display: block; }
.carrito__producto > div { display: grid; gap: 4px; align-content: start; }
.carrito__nombre { color: var(--tinta); font-weight: 700; }
.carrito__variante, .carrito__unitario { font-size: 14px; color: var(--gris-700); }
.carrito__control { display: flex; align-items: center; gap: 6px; }
.carrito__cantidad { padding-left: 16px !important; padding-right: 16px !important; }
.carrito__total { font-family: var(--f-display); font-weight: 850; white-space: nowrap; }
.carrito__nota { margin-top: 24px; max-width: 520px; }
.carrito__resumen { position: sticky; top: 140px; display: grid; gap: 12px; padding: 24px; border-radius: var(--radio-l); background: var(--gris-100); }
.nota { font-size: 14px; color: var(--gris-700); }
.nota--codigo { display: flex; gap: 8px; align-items: flex-start; color: var(--morado-800); background: var(--morado-50); padding: 10px 12px; border-radius: 12px; }
.carrito__discreto { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--gris-700); }

/* ---------- Pantalla de pago ---------- */
body.modo-pago .anuncio, body.modo-pago .tienda-barra, body.modo-pago .cabecera, body.modo-pago #pie,
body.modo-cuenta .anuncio, body.modo-cuenta .tienda-barra, body.modo-cuenta .cabecera, body.modo-cuenta #pie,
body.modo-acceso .anuncio, body.modo-acceso .tienda-barra, body.modo-acceso .cabecera, body.modo-acceso #pie,
body.modo-entrada .anuncio, body.modo-entrada .tienda-barra, body.modo-entrada .cabecera, body.modo-entrada #pie,
body.modo-panel .anuncio, body.modo-panel .tienda-barra, body.modo-panel .cabecera, body.modo-panel #pie { display: none; }
.checkout { min-height: 100vh; background: linear-gradient(90deg, #fff 50%, #F5F2F7 50%); }
.checkout__cabeza { background: #fff; border-bottom: 1px solid var(--gris-200); }
.checkout__cabeza-in { max-width: 1120px; margin: 0 auto; padding: 12px var(--margen); display: flex; justify-content: space-between; align-items: center; }
.checkout__logo img { height: 52px; width: auto; display: block; }
.checkout__grid {
  max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: calc(100vh - 77px);
  background: linear-gradient(90deg, #fff 0 55.55%, var(--gris-200) 55.55% calc(55.55% + 1px), #F5F2F7 calc(55.55% + 1px));
}
.checkout__principal { padding: 32px 48px 48px var(--margen); }
.checkout__lateral { padding: 32px var(--margen) 48px 40px; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
[data-direccion], [data-solo-envio] { display: grid; gap: 14px; }
.checkout__form { display: grid; gap: 30px; }
.co-seccion { display: grid; gap: 14px; }
.co-seccion h2 { font-size: 22px; }
.co-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-sesion { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--gris-100); font-size: 15px; }
.co-nota { display: flex; gap: 8px; align-items: center; color: var(--gris-700); font-size: 14px; }
.opciones-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0; padding: 0; margin: 0; }
.radio-tarjeta { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px solid var(--gris-300); cursor: pointer; background: #fff; font-weight: 700; }
.radio-tarjeta:first-of-type { border-radius: 14px 0 0 14px; }
.radio-tarjeta:last-of-type { border-radius: 0 14px 14px 0; border-left: 0; }
.radio-tarjeta span { display: inline-flex; align-items: center; gap: 8px; }
.radio-tarjeta:has(input:checked) { border-color: var(--morado); background: var(--morado-50); box-shadow: inset 0 0 0 1px var(--morado); }
.radio-tarjeta:has(input:focus-visible) { outline: 3px solid var(--morado); outline-offset: 2px; }
.caja-info { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--morado-50); }
.caja-info .icono { color: var(--morado); margin-top: 2px; }
.caja-info p { font-size: 14px; color: var(--carbon); margin-top: 4px; }
.caja-gris { display: flex; gap: 10px; align-items: center; padding: 16px; border-radius: 14px; background: var(--gris-100); color: var(--gris-700); font-size: 15px; }
.metodos { border: 1.5px solid var(--gris-300); border-radius: 14px; padding: 0; margin: 0; overflow: hidden; }
.metodo { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
.metodo + .metodo { border-top: 1px solid var(--gris-200); }
.metodo:has(input:checked) { background: var(--morado-50); }
.metodo__texto { display: grid; gap: 2px; }
.metodo__texto small { color: var(--gris-700); font-size: 13px; }
.metodo__precio { font-family: var(--f-display); font-weight: 850; white-space: nowrap; }
.metodo__precio s { color: var(--gris-600); font-weight: 600; margin-right: 4px; }
.pagos { border: 1.5px solid var(--gris-300); border-radius: 14px; padding: 0; margin: 0; overflow: hidden; }
.pago-op + .pago-op { border-top: 1px solid var(--gris-200); }
.pago-op__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px; cursor: pointer; }
.pago-op--activo .pago-op__cabeza { background: var(--morado-50); }
.pago-op--inactivo .pago-op__cabeza { cursor: not-allowed; color: var(--gris-600); }
.pago-op--inactivo input { background: var(--gris-100); border-color: var(--gris-300); }
.pago-op__nombre { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; margin-right: auto; }
.pago-op__nombre .icono { color: var(--morado); }
.pago-op__detalle { font-size: 13px; color: var(--gris-700); }
.pago-op__marcas { display: flex; gap: 4px; flex-wrap: wrap; }
.pago-op__marcas .medio { height: 24px; font-size: 11px; padding: 0 6px; }
.pago-op__panel { padding: 16px; background: #FBFAFC; border-top: 1px solid var(--gris-200); display: grid; gap: 14px; font-size: 15px; }
.pago-op__nota { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--gris-700); }
.pago-op__nota--demo { align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--aviso-fondo); color: #5A3D00; line-height: 1.45; }
.pago-op__nota--demo .icono { margin-top: 1px; }
.fila-campos--tarjeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.datos-transferencia { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.datos-transferencia li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--gris-200); }
.datos-transferencia span { color: var(--gris-700); font-size: 14px; }
.opciones-fact { border: 1.5px solid var(--gris-300); border-radius: 14px; padding: 0; margin: 0; overflow: hidden; }
.radio-fila { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.radio-fila + .radio-fila { border-top: 1px solid var(--gris-200); }
.radio-fila:has(input:checked) { background: var(--morado-50); }
[data-fact] { display: grid; gap: 14px; }
.checkout__resumen-final { display: none; }
.checkout__discreto { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--gris-700); text-align: center; margin-top: -12px; }
.checkout__legales { list-style: none; margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid var(--gris-200); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checkout__legales .enlace-boton { font-size: 14px; color: var(--morado-700); }
.checkout__movil { display: none; }
.resumen__lineas { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.resumen__lineas li { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.resumen__img { position: relative; width: 64px; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--gris-200); background: #fff; }
.resumen__img svg { width: 100%; height: 100%; display: block; border-radius: 11px; }
.resumen__cant { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--carbon); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.resumen__nombre { display: grid; gap: 2px; font-size: 14px; font-weight: 650; line-height: 1.3; }
.resumen__nombre a { color: var(--tinta); }
.resumen__nombre small { font-weight: 500; color: var(--gris-700); font-size: 13px; }
.resumen__precio { font-weight: 700; font-size: 15px; white-space: nowrap; }
.codigo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 16px 0; border-top: 1px solid var(--gris-200); border-bottom: 1px solid var(--gris-200); }
.codigo .campo input { min-height: 48px; }
.codigo .boton { min-height: 50px; border-radius: 12px; }
.codigo__aplicado { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; color: var(--gris-700); }
.resumen__totales { margin: 16px 0 0; display: grid; gap: 10px; }
.resumen__totales div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.resumen__totales dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.resumen__totales dt small { color: var(--gris-700); }
.resumen__totales dd { margin: 0; font-weight: 700; text-align: right; }
.resumen__descuento dd { color: var(--morado); }
.resumen__total { padding-top: 10px; font-family: var(--f-display); font-size: 20px !important; font-weight: 900; }
.resumen__total dd { font-weight: 900; }
.resumen__total small { font-size: 13px; color: var(--gris-700); font-weight: 700; margin-right: 4px; }
.resumen__impuestos { margin-top: 4px; font-size: 13px; color: var(--gris-700); }
.resumen__pendiente { color: var(--gris-700); font-weight: 500; font-size: 14px; }
.simulador__carga { display: grid; justify-items: center; gap: 14px; padding: 24px 0; text-align: center; }
.girador { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--morado-200); border-top-color: var(--morado); animation: girar .8s linear infinite; }
.simulador__banco, .simulador__ok { display: grid; gap: 14px; }
.simulador__ok { justify-items: center; text-align: center; }
.simulador__ok .icono { color: var(--exito); }
.simulador__titulo { font-family: var(--f-display); font-weight: 900; font-size: 22px; }
.simulador__entidad { display: flex; gap: 10px; align-items: center; font-family: var(--f-display); font-weight: 900; font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gris-200); }
.simulador__datos { display: grid; gap: 8px; margin: 0; }
.simulador__datos div { display: flex; justify-content: space-between; gap: 12px; }
.simulador__datos dt { color: var(--gris-700); }
.simulador__datos dd { margin: 0; font-weight: 800; }
.gracias__cabeza { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.gracias__check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2.5px solid var(--morado); color: var(--morado); flex: none; }
.gracias__cabeza h1 { font-size: clamp(28px, 3vw, 36px); }
.co-caja { display: grid; gap: 10px; padding: 20px 22px; border-radius: 16px; border: 1.5px solid var(--gris-200); background: #fff; margin-bottom: 16px; }
.co-caja h2 { font-size: 19px; }
.co-caja--destacada { border-color: var(--morado-200); background: var(--morado-50); }
.co-caja__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.co-caja__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.referencia { display: grid; gap: 4px; justify-items: start; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1.5px dashed var(--morado-300); }
.referencia span { font-size: 13px; color: var(--gris-700); }
.referencia strong { font-family: var(--f-display); font-size: 30px; letter-spacing: .08em; }
.detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detalles--columna { grid-template-columns: 1fr; }
.detalles h3 { font-size: 15px; margin-bottom: 4px; }
.detalles p { font-size: 15px; color: var(--carbon); }
.gracias__pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- Cuenta ---------- */
.cuenta { min-height: 100vh; background: #F7F5F8; }
.cuenta__cabeza { background: #fff; border-bottom: 1px solid var(--gris-200); }
.cuenta__cabeza-in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.cuenta__logo img { height: 50px; width: auto; display: block; }
.cuenta__nav { display: flex; gap: 4px; margin-right: auto; }
.cuenta__nav a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; color: var(--tinta); font-family: var(--f-display); font-weight: 750; font-size: 15px; }
.cuenta__nav a:hover { background: var(--gris-100); text-decoration: none; }
.cuenta__nav a[aria-current="page"] { background: var(--morado-100); color: var(--morado-800); }
.cuenta__usuario { display: flex; align-items: center; gap: 10px; }
.cuenta__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--morado); color: #fff; font-family: var(--f-display); font-weight: 900; }
.cuenta__correo { font-size: 14px; color: var(--gris-700); }
.cuenta__cuerpo { padding-top: 32px; padding-bottom: 56px; max-width: calc(1040px + 2 * var(--margen)); }
.cuenta__titulo { display: grid; gap: 6px; margin-bottom: 24px; }
.cuenta__titulo p { color: var(--gris-700); }
.cuenta__titulo--pedido { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.volver { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-weight: 700; color: var(--tinta); }
.pedidos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pedido-tarjeta { display: grid; gap: 10px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--gris-200); }
.pedido-tarjeta__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pedido-tarjeta__fecha { font-size: 14px; color: var(--gris-700); }
.pedido-tarjeta__imgs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.pedido-tarjeta__imgs li { width: 64px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--lavanda); }
.pedido-tarjeta__imgs svg { width: 100%; height: 100%; display: block; }
.pedido-tarjeta__num { font-family: var(--f-display); font-weight: 900; font-size: 18px; }
.pedido-tarjeta__meta { color: var(--gris-700); }
.pedido-tarjeta__aviso { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--aviso); background: var(--aviso-fondo); padding: 8px 12px; border-radius: 10px; }
.pedido-tarjeta__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.estado { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; font-family: var(--f-display); }
.estado--info { background: var(--morado-100); color: var(--morado-800); }
.estado--camino { background: #E3ECFB; color: #1F3A8A; }
.estado--ok { background: var(--exito-fondo); color: var(--exito); }
.estado--alerta { background: var(--aviso-fondo); color: var(--aviso); }
.seguimiento { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.seguimiento li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 14px; font-weight: 700; color: var(--gris-700); }
.seguimiento li::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--gris-200); z-index: 0; }
.seguimiento li:first-child::before { display: none; }
.seguimiento li.hecho::before, .seguimiento li.actual::before { background: var(--morado); }
.seguimiento__punto { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--gris-300); color: #fff; }
.seguimiento li.hecho .seguimiento__punto, .seguimiento li.actual .seguimiento__punto { background: var(--morado); border-color: var(--morado); }
.seguimiento li.actual { color: var(--tinta); }
.seguimiento__guia { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 14px; color: var(--carbon); }
.pedido-detalle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pedido-detalle__acciones { display: grid; gap: 10px; }
.perfil { display: grid; gap: 4px; max-width: 760px; }
.datos { margin: 0; display: grid; gap: 14px; }
.datos div { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
.datos dt { color: var(--gris-700); font-size: 15px; }
.datos dd { margin: 0; font-weight: 650; }
.direcciones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.direccion { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 16px; border-radius: 14px; border: 1px solid var(--gris-200); font-size: 15px; }
.direccion__acciones { display: flex; gap: 16px; }
.form-modal { display: grid; gap: 14px; }

/* ---------- Ingreso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(90% 70% at 50% 0%, var(--morado-100) 0%, #F7F5F8 60%); }
.acceso__caja { width: 100%; max-width: 440px; display: grid; gap: 18px; padding: 36px 32px; border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra); }
.acceso__logo { justify-self: center; line-height: 0; }
.acceso__logo img { height: 70px; width: auto; }
.acceso h1, .acceso__h { font-size: 28px; }
.acceso__texto { color: var(--gris-700); margin: 8px 0 18px; }
.acceso form { display: grid; gap: 16px; }
.acceso__acciones { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.acceso__acciones .enlace-boton[disabled] { color: var(--gris-600); cursor: default; text-decoration: none; }
.acceso__demo { font-size: 14px; }
.acceso__legal { font-size: 13px; color: var(--gris-700); text-align: center; }

/* ---------- Capas: modal, visor, avisos ---------- */
.modal-fondo { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(35, 31, 32, .6); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.modal-fondo.abierto { opacity: 1; visibility: visible; }
.modal { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: var(--radio-l); background: #fff; box-shadow: var(--sombra-capa); transform: translateY(12px); transition: transform .25s ease; }
.modal-fondo.abierto .modal { transform: none; }
.modal--ancho { max-width: 820px; }
.modal--angosto { max-width: 460px; }
.modal__cabeza { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; background: #fff; border-bottom: 1px solid var(--gris-200); }
.modal__cabeza h2 { font-size: 22px; }
.modal__cuerpo { padding: 22px; display: grid; gap: 16px; }
.modal__intro { color: var(--carbon); }
.modal__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.whatsapp-caja { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: #EAF5EE; font-size: 14px; color: var(--carbon); }
.whatsapp-caja__numero { display: flex; align-items: center; gap: 8px; font-size: 20px; color: var(--tinta); font-family: var(--f-display); }
.whatsapp-caja__numero .icono { color: var(--whatsapp); }
.rapido { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 24px; }
.rapido__img { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--lavanda); }
.rapido__img svg { width: 100%; height: 100%; display: block; }
.rapido__info { display: grid; gap: 14px; align-content: start; }
.rapido__nombre { font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1.15; }
.rapido__estado { color: var(--error); font-size: 14px; min-height: 0; }
.rapido__estado:empty { display: none; }

.visor { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: rgba(12, 9, 14, .94); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.visor.abierto { opacity: 1; visibility: visible; }
.visor__marco { position: relative; height: min(86vh, 780px); aspect-ratio: 9 / 16; max-width: calc(100vw - 32px); border-radius: 22px; overflow: hidden; background: #000; }
.visor__video, .visor__video .video-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.visor__barras { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; gap: 4px; }
.visor__barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.visor__barras i { display: block; height: 100%; width: 0; background: #fff; }
.visor__barras .visto i { width: 100%; }
.visor__barras .actual i { animation: barra 6s linear forwards; }
.visor.pausado .visor__barras .actual i { animation-play-state: paused; }
.visor.pausado .video-svg * { animation-play-state: paused; }
@keyframes barra { from { width: 0; } to { width: 100%; } }
.visor__contador { position: absolute; top: 24px; left: 16px; right: 64px; z-index: 3; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.visor__pausa { position: absolute; top: 22px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: #fff; }
.visor__pausa .icono { fill: #fff; }
.visor__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 56px 1fr; gap: 10px 12px; align-items: center; padding: 60px 16px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .85) 45%); color: #fff; }
.visor__mini { grid-row: span 2; width: 56px; height: 70px; border-radius: 10px; overflow: hidden; }
.visor__mini svg { width: 100%; height: 100%; display: block; }
.visor__datos { display: grid; gap: 2px; }
.visor__nombre { font-family: var(--f-display); font-weight: 850; font-size: 16px; line-height: 1.2; }
.visor__info .precio__ahora, .visor__info .precio--oferta .precio__ahora { color: #fff; }
.visor__info .precio__antes { color: #CFC6D6; }
.visor__info .boton { justify-self: start; }
.visor__info .insignia { position: static; justify-self: start; }
.visor__ver { grid-column: 2; color: #fff; font-size: 14px; text-decoration: underline; justify-self: start; }
.visor__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; }
.visor__nav:hover { background: rgba(255, 255, 255, .28); }
.visor__nav--prev { left: max(16px, calc(50% - min(86vh, 780px) * 9 / 32 - 80px)); }
.visor__nav--sig { right: max(16px, calc(50% - min(86vh, 780px) * 9 / 32 - 80px)); }
.visor__cerrar { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, .16); color: #fff; }
.visor__cerrar:hover { background: rgba(255, 255, 255, .28); }

#avisos { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--tinta); color: #fff; box-shadow: var(--sombra-capa); font-size: 15px; animation: subir .25s ease; }
.toast .icono { color: var(--morado-300); margin-top: 1px; }
.toast--exito .icono { color: #A7E3C0; }
.toast--error .icono { color: #FFB4AB; }
.toast.saliendo { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
@keyframes subir { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Pie de página ---------- */
.pie { background: var(--tinta); color: #E4DEE6; margin-top: 24px; }
.pie__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 36px; }
.pie__logo img { height: 84px; width: auto; display: block; margin-bottom: 14px; }
.pie__marca p { font-size: 15px; line-height: 1.6; }
.pie__marca strong { color: #fff; }
.pie h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie a { color: #E4DEE6; }
.pie a:hover { color: #fff; }
.pie__redes { display: flex; gap: 10px; margin-bottom: 18px; }
.pie__redes button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #5C5758; background: transparent; color: #fff; }
.pie__redes button:hover { background: #fff; color: var(--tinta); }
.pie__resenas { display: grid; gap: 6px; font-size: 14px; }
.pie__resenas .estrellas__llenas svg { fill: #B39AD0; }
.pie__resenas .estrellas__base svg { fill: #5C5758; }
.pie__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 28px; font-size: 14px;
  background: linear-gradient(#4A4546, #4A4546) no-repeat center top / calc(100% - 2 * var(--margen)) 1px; }
.pie ul.medios { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Página no encontrada ---------- */
.no-encontrada { display: grid; justify-items: center; gap: 16px; text-align: center; padding-top: 56px; padding-bottom: 72px; }
.no-encontrada__ilu { width: 140px; height: 140px; }
.no-encontrada p { max-width: 34em; color: var(--gris-700); }
.no-encontrada .buscador-pagina { width: 100%; }
.no-encontrada__acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Responsivo ---------- */
@media (max-width: 1279px) {
  .mega__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mega__grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explorar__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .videos__fila { grid-auto-columns: calc((100% - 3 * 16px) / 4.3); }
}

@media (max-width: 1099px) {
  .carrusel, .carrusel--resenas { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .match__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .match__intro { grid-column: 1 / -1; }
  .ficha { gap: 32px; }
  .discreto { grid-template-columns: 1fr; }
  .resenas__resumen { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .resenas__accion { grid-column: 1 / -1; }
  .promo-sabores__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  :root { --margen: 20px; }
  html { scroll-padding-top: 90px; }
  .menu { display: none; }
  .cabecera__menu { display: inline-flex; }
  .icono-btn--texto span { display: none; }
  .cabecera__fila { min-height: 64px; }
  .cabecera__logo img { height: 50px; }
  .hero__interior { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 44px; }
  .hero__fondo { width: 100%; right: -30%; }
  .confianza__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confianza__lista li:nth-child(2) { border-right: 0; }
  .confianza__lista li:nth-child(-n+2) { border-bottom: 1px solid var(--gris-200); }
  .promo { grid-template-columns: 1fr 1fr; min-height: 300px; }
  .promo__texto { padding: 32px; }
  .sabores__interior { grid-template-columns: 1fr; }
  .listado { grid-template-columns: 1fr; }
  .listado__lateral { position: static; max-height: none; overflow: visible; }
  .herramientas__filtrar { display: inline-flex; }
  .filtros {
    position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(380px, 90vw); background: #fff;
    display: flex; flex-direction: column; transform: translateX(-102%); visibility: hidden; transition: transform .3s ease, visibility .3s ease; box-shadow: var(--sombra-capa);
  }
  .filtros.abierto { transform: none; visibility: visible; }
  .filtros__cabeza { padding: 14px 18px; border-bottom: 1px solid var(--gris-200); }
  .filtros__cabeza .cerrar { display: inline-grid; }
  .filtros__cuerpo { flex: 1; overflow-y: auto; padding: 0 18px; }
  .filtros__pie { padding: 14px 18px 18px; border-top: 1px solid var(--gris-200); }
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { grid-template-columns: 1fr; }
  .ficha__galeria { position: static; }
  .blog__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carrito__grid { grid-template-columns: 1fr; }
  .carrito__resumen { position: static; }
  .contacto { grid-template-columns: 1fr; }
  .resenas__lista--rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pedido-detalle { grid-template-columns: 1fr; }
}

@media (max-width: 999px) {
  .checkout { background: #fff; }
  .checkout__grid { grid-template-columns: 1fr; background: #fff; min-height: 0; }
  .checkout__lateral { display: none; }
  .checkout__principal { padding: 24px var(--margen) 40px; }
  .checkout__movil { display: block; background: #F5F2F7; border-bottom: 1px solid var(--gris-200); }
  .checkout__toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px var(--margen); border: 0; background: transparent; color: var(--morado-800); font-weight: 750; font-size: 15px; }
  .checkout__toggle > span { display: inline-flex; align-items: center; gap: 8px; }
  .checkout__toggle[aria-expanded="true"] .icono:last-child { transform: rotate(180deg); }
  .checkout__toggle strong { color: var(--tinta); font-family: var(--f-display); font-size: 18px; }
  .checkout__movil-cuerpo { padding: 4px var(--margen) 20px; }
  .checkout__resumen-final { display: grid; padding: 20px; border-radius: 16px; background: #F5F2F7; }
}

@media (max-width: 767px) {
  :root { --margen: 16px; }
  h1 { font-size: clamp(28px, 7.4vw, 36px); }
  .anuncio { font-size: 13px; }
  .anuncio p { padding: 8px 12px; }
  .asesoria { position: relative; padding: 0; width: 42px; justify-content: center; margin-right: 0; border: 0; }
  .asesoria span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .cabecera__fila { gap: 4px; }
  .cabecera__izq, .cabecera__der { gap: 0; }
  .cabecera__logo img { height: 44px; }
  .icono-btn { min-width: 40px; }
  .seccion { padding: 40px 0; }
  .seccion + .seccion--suave, .seccion--suave + .seccion { padding-top: 40px; }
  .seccion__cabeza { flex-wrap: wrap; align-items: flex-start; }
  .seccion__acciones .controles { display: none; }
  .carrusel, .carrusel--resenas { grid-auto-columns: 46%; gap: 14px; }
  .hero__productos { grid-template-columns: repeat(3, minmax(130px, 1fr)); overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--margen)); padding-right: var(--margen); }
  .hero__productos::-webkit-scrollbar { display: none; }
  .hero__bajada { font-size: 17px; }
  .confianza__lista a, .confianza__lista button { padding: 16px 10px; gap: 10px; flex-direction: column; }
  .confianza__lista strong { font-size: 15px; }
  .promos { padding-top: 28px; }
  .promo { grid-template-columns: 1fr; min-height: 0; }
  .promo__texto { padding: 26px 22px 6px; }
  .promo__img svg { max-height: 220px; margin: 0 auto; }
  .sabores__tubos { grid-template-columns: repeat(5, minmax(84px, 1fr)); overflow-x: auto; scrollbar-width: none; padding: 10px 2px 4px; margin-right: calc(-1 * var(--margen)); padding-right: var(--margen); }
  .sabores__tubos::-webkit-scrollbar { display: none; }
  .sabores__destacado { min-width: 0; width: 100%; }
  .videos__fila { grid-auto-columns: 42%; }
  .match__grid { grid-template-columns: 1fr; }
  .match__mazo { height: 460px; }
  .match__items { max-height: none; }
  .gusto__lista { grid-template-columns: 1fr; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .herramientas { flex-wrap: wrap; gap: 10px; }
  .herramientas__conteo { order: 3; width: 100%; font-size: 14px; }
  .herramientas__orden { position: relative; margin-left: auto; }
  .herramientas__orden label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .herramientas__orden select { max-width: 210px; }
  .listado { gap: 0; }
  .explorar__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha__titulo { font-size: 28px; }
  .precio--grande .precio__ahora { font-size: 26px; }
  .complementa, .set { padding: 14px; }
  .set__img { width: 64px; }
  .asesoria-bloque--ancho { grid-template-columns: auto 1fr; padding: 18px; }
  .asesoria-bloque--ancho .boton { grid-column: 1 / -1; }
  .discreto { padding: 22px; margin-top: 32px; }
  .discreto__pasos { grid-template-columns: 1fr; }
  .promo-sabores__lista { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--margen)); padding-right: var(--margen); }
  .resenas__resumen, .resenas__resumen--pagina { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .histograma li { grid-template-columns: 76px 1fr 78px; gap: 8px; font-size: 13px; }
  .resenas__lista--rejilla { grid-template-columns: 1fr; }
  .blog__rejilla, .blog__rejilla--2 { grid-template-columns: 1fr; }
  .articulo__nav { grid-template-columns: 1fr; }
  .articulo__nav-enlace--sig { justify-content: space-between; text-align: left; }
  .caja-producto, .caja-categoria { grid-template-columns: 84px 1fr; gap: 12px; }
  .caja-producto__img, .caja-categoria__img { width: 84px; }
  .carrito__tabla thead { display: none; }
  .carrito__tabla tr { display: grid; grid-template-columns: 1fr auto; padding: 16px 0; border-bottom: 1px solid var(--gris-200); }
  .carrito__tabla td { border: 0; padding: 0; }
  .carrito__producto { grid-column: 1 / -1; }
  .carrito__cantidad { padding: 12px 0 0 108px !important; }
  .carrito__total { padding-top: 18px !important; }
  .carrito__img { width: 92px; }
  .fila-campos, .fila-campos--3, .fila-campos--tarjeta { grid-template-columns: 1fr; }
  .opciones-modo { grid-template-columns: 1fr; }
  .radio-tarjeta:first-of-type { border-radius: 14px 14px 0 0; }
  .radio-tarjeta:last-of-type { border-radius: 0 0 14px 14px; border-left: 1.5px solid var(--gris-300); border-top: 0; }
  .radio-tarjeta:last-of-type:has(input:checked) { border-top: 1.5px solid var(--morado); }
  .detalles { grid-template-columns: 1fr; }
  .gracias__pie { flex-direction: column; align-items: stretch; }
  .cuenta__cabeza-in { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
  .cuenta__nav { order: 3; width: 100%; overflow-x: auto; margin-right: 0; }
  .cuenta__usuario { margin-left: auto; }
  .cuenta__correo { display: none; }
  .pedidos, .direcciones { grid-template-columns: 1fr; }
  .datos div { grid-template-columns: 1fr; gap: 2px; }
  .seguimiento li { font-size: 12px; }
  .acceso__caja { padding: 28px 20px; }
  .rapido { grid-template-columns: 1fr; }
  .rapido__img { max-width: 220px; }
  .modal__cuerpo { padding: 18px; }
  .visor__marco { height: min(78vh, 680px); }
  .visor__nav { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
  .visor__nav--prev { left: 16px; }
  .visor__nav--sig { right: 16px; }
  .pie__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 36px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__social { grid-column: 1 / -1; }
  .pie__base { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .confianza__lista span > span { display: none; }
  .hero__productos { grid-template-columns: repeat(3, 140px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .video-svg * { animation: none !important; }
  .visor__barras .actual i { animation: none !important; width: 0; }
}


/* =========================================================
   Tres tiendas: entrada, barra de tienda, disponibilidad
   ========================================================= */

/* ---------- Entrada (mayoría de edad y elección de tienda) ---------- */
.bienvenida { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px 48px; background: radial-gradient(120% 80% at 50% 0%, #4A1D72 0%, #2C1A3B 38%, var(--tinta) 72%); color: #fff; }
.bienvenida__caja { width: 100%; max-width: 560px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.bienvenida__caja--ancha { max-width: 1160px; gap: 16px; }
.bienvenida__logo { height: 88px; width: auto; }
.bienvenida__caja--ancha .bienvenida__logo { height: 70px; }
.bienvenida__etiqueta { font-family: var(--f-display); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--morado-300); }
.bienvenida h1 { color: #fff; font-size: clamp(30px, 4vw, 46px); }
.bienvenida__texto { color: #E4DEE6; font-size: 18px; max-width: 36em; }
.bienvenida__botones { display: grid; gap: 12px; width: 100%; max-width: 380px; margin-top: 6px; }
.boton--fantasma { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.boton--fantasma:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.bienvenida__legal { font-size: 13px; color: #CFC6D6; max-width: 30em; }
.bienvenida__demo { display: flex; gap: 10px; align-items: flex-start; max-width: 32em; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #F1ECF4; font-size: 14px; line-height: 1.45; text-align: left; }
.bienvenida__demo .icono { margin-top: 1px; color: #F5C86B; }
.bienvenida__destino { display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 15px; }
.bienvenida__nota { display: flex; gap: 8px; align-items: center; justify-content: center; color: #E4DEE6; font-size: 15px; }
.bienvenida .tiendas-lista { width: 100%; text-align: left; margin-top: 8px; }

/* ---------- Tarjetas de tienda ---------- */
.tiendas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* La columna puede encogerse al ancho de la tarjeta (sin esto, el nombre en letra de pincel y los botones la
   ensanchaban y se cortaban por la derecha); el nombre se ajusta al ancho de la tarjeta. */
.tienda-tarjeta { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); container-type: inline-size; border-radius: var(--radio-l); background: #fff; color: var(--tinta); overflow: hidden; box-shadow: var(--sombra); border: 2px solid var(--gris-200); }
.bienvenida .tienda-tarjeta { border-color: transparent; }
.tienda-tarjeta--actual { border-color: var(--morado) !important; }
.tienda-tarjeta__mapa { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--morado-50); border-bottom: 1px solid var(--morado-100); }
.tienda-tarjeta__mapa svg { width: 52px; height: 44px; flex: none; }
.tienda-tarjeta__mapa span { font-family: var(--f-pincel); font-size: clamp(16px, 8cqi, 24px); line-height: 1; color: var(--morado); }
.tienda-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.tienda-tarjeta__nombre { font-size: 20px; font-weight: 850; }
.tienda-tarjeta__datos { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--carbon); }
.tienda-tarjeta__datos li { display: flex; gap: 8px; align-items: flex-start; }
.tienda-tarjeta__datos .icono { color: var(--morado); margin-top: 2px; flex: none; }
.tienda-tarjeta__carrito { color: var(--morado-800); font-weight: 750; }
.tienda-tarjeta .boton { margin-top: auto; }
.tiendas-lista--modal .tienda-tarjeta { box-shadow: none; }
.modal--tiendas { max-width: 1000px; }
/* Tarjetas angostas (celulares pequeños): menos relleno y el botón puede usar dos líneas */
@container (max-width: 300px) {
  .tienda-tarjeta__mapa { gap: 8px; padding: 12px 14px; }
  .tienda-tarjeta__mapa svg { width: 40px; height: 34px; }
  .tienda-tarjeta__cuerpo { padding: 16px 14px 18px; }
  .tienda-tarjeta .boton { white-space: normal; padding: 8px 14px; line-height: 1.25; }
}
.abierta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 750; color: var(--exito); }
.abierta::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.abierta--no { color: var(--gris-700); }

/* ---------- Barra «Estás comprando en» ---------- */
.tienda-barra { background: var(--morado-50); border-bottom: 1px solid var(--morado-100); font-size: 14px; }
.tienda-barra__in { display: flex; align-items: center; gap: 6px 18px; min-height: 42px; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; }
.tienda-barra__texto { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); }
.tienda-barra__texto .icono { color: var(--morado); flex: none; }
.tienda-barra__estado { margin-right: auto; }
.tienda-barra__cambiar { border: 1.5px solid var(--morado); background: #fff; color: var(--morado-800); font-family: var(--f-display); font-weight: 800; font-size: 14px; padding: 4px 14px; border-radius: 999px; min-height: 32px; }
.tienda-barra__cambiar:hover { background: var(--morado); color: #fff; }

/* ---------- Disponibilidad ---------- */
.tarjeta__disp { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--aviso); font-weight: 700; line-height: 1.3; }
.tarjeta__disp .icono { flex: none; }
.tarjeta__disp--otra { color: var(--morado-800); }
.linea-aviso { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--aviso); font-weight: 650; line-height: 1.35; }
.linea-aviso .icono { flex: none; margin-top: 1px; }
.linea-aviso--error { color: var(--error); }
.otras-tiendas { display: grid; gap: 10px; padding: 16px; border-radius: 14px; border: 1.5px solid var(--morado-200); background: var(--morado-50); }
.otras-tiendas__titulo { display: flex; gap: 8px; align-items: center; font-family: var(--f-display); font-weight: 800; }
.otras-tiendas__titulo .icono { color: var(--morado); }
.otras-tiendas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.otras-tiendas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.otras-tiendas li > span { display: grid; gap: 2px; }
.otras-tiendas small { color: var(--gris-700); font-size: 13px; }
.otras-tiendas__nota { font-size: 13px; color: var(--gris-700); }
.otras-tiendas--nada { display: flex; gap: 10px; align-items: flex-start; background: var(--gris-100); border-color: var(--gris-200); font-size: 14px; }
.rapido--chico { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); }
.ficha__promo { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--morado-50); color: var(--morado-800); font-size: 14px; }
.ficha__promo .icono { flex: none; }
.promo__tienda { display: inline-flex; gap: 6px; align-items: center; justify-self: start; margin-bottom: 4px; font-family: var(--f-display); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.promo--lavanda .promo__tienda { background: var(--morado); color: #fff; }

/* ---------- Carrito y pago por tienda ---------- */
.cl__cabeza > div { display: grid; gap: 2px; }
.cl__tienda { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--gris-700); }
.cl__tienda .icono { color: var(--morado); }
.carrito__tienda { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; color: var(--carbon); font-size: 15px; }
.carrito__tienda > .icono { color: var(--morado); }
.carrito__promo { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--morado-800); font-weight: 700; }
.carrito__fila--alerta td { background: #FFF7F6; }
.carrito__problema { margin-bottom: 12px; }
.checkout__tienda { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; margin-right: 12px; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--morado-800); }
.resumen__tienda { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--gris-200); margin-bottom: 4px; }
.resumen__tienda .icono { color: var(--morado); flex: none; }
.co-caja--tienda p { color: var(--carbon); font-size: 15px; }
.co-caja--tienda .boton { justify-self: start; }
.metodo--inactivo { cursor: not-allowed; color: var(--gris-600); background: var(--gris-100); }
.metodo strong .pildora--suave { vertical-align: 2px; margin-left: 6px; }
.metodos--tiendas .metodo__texto small { line-height: 1.4; }
.lista-puntos { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--carbon); }
.estado--cancelado { background: var(--error-fondo); color: var(--error); }
.pedido-tarjeta__tienda { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--carbon); }
.pedido-tarjeta__tienda .icono { color: var(--morado); flex: none; }

/* ---------- Nuestras tiendas y contacto ---------- */
.tiendas-detalle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tienda-detalle { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--radio-l); border: 1.5px solid var(--gris-200); background: #fff; }
.tienda-detalle--actual { border-color: var(--morado); box-shadow: inset 0 0 0 1px var(--morado); }
.tienda-detalle__cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.tienda-detalle__cabeza h2 { font-size: 22px; margin-bottom: 6px; }
.tienda-detalle__sub { font-size: 16px; }
.tienda-detalle .prosa { font-size: 14px; }
.tienda-detalle .tabla { font-size: 14px; }
.tienda-detalle .tabla th, .tienda-detalle .tabla td { padding: 8px 8px; }
.tienda-detalle .tabla--envio td:first-child { white-space: normal; }
.tienda-detalle__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.lista-datos--compacta { gap: 10px; font-size: 15px; }
.pagina-tiendas__nota { display: flex; gap: 8px; align-items: center; margin-top: 20px; color: var(--carbon); }
.contacto__tiendas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contacto__tiendas li { display: grid; gap: 4px; justify-items: start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--gris-200); font-size: 14px; color: var(--carbon); }
.contacto__tienda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--tinta); }
.contacto__tienda .icono { color: var(--morado); }
.pie__tienda { margin-top: 14px; display: grid; gap: 6px; font-size: 14px; }
.pie__tienda-titulo { display: flex; gap: 6px; align-items: center; color: #fff; font-weight: 700; }

@media (max-width: 1023px) {
  .tiendas-lista, .tiendas-detalle { grid-template-columns: 1fr; }
  .bienvenida .tiendas-lista { max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
  .tienda-barra__in { gap: 4px 10px; min-height: 40px; }
  .tienda-barra__largo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .tienda-barra__texto { position: relative; font-size: 13px; }
  .tienda-barra__estado { display: none; }
  .tienda-barra__cambiar { margin-left: auto; font-size: 13px; padding: 3px 12px; }
  .bienvenida { padding-top: 28px; }
  .bienvenida__logo { height: 70px; }
  .bienvenida__texto { font-size: 16px; }
  .checkout__tienda { font-size: 13px; }
  .otras-tiendas li { flex-direction: column; align-items: stretch; }
  .rapido--chico { grid-template-columns: 1fr; }
  .rapido--chico .rapido__img { max-width: 160px; }
}