/* ==========================================================================
   JASALTEC — sistema de diseño
   CSS propio, sin dependencias externas. Tema claro/oscuro con variables.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Widgets y barras de desplazamiento nativos en tono oscuro (el tema
     base de la página es morado profundo; theme.js aplica "claro" si el
     usuario o el sistema lo elige). */
  color-scheme: dark;

  /* Marca. La pagina vive entera sobre morado oscuro, así que --rosa es la
     versión clara (5:1 sobre el fondo, para texto y bordes). Los rellenos
     con texto blanco usan --rosa-boton (5.5:1) y --rosa-fuerte es la versión
     clara del rosa intenso, para texto sobre --rosa-tenue. */
  --rosa: #ec407a;
  --rosa-fuerte: #ff7aa6;
  --rosa-boton: #c81e5e;
  --rosa-tenue: #3a1024;
  --morado: #a78bfa;
  --morado-profundo: #18092b;
  /* Magenta exacto de los puntos del logo (#A81BBB). Es el acento de los
     fondos animados; para texto se usan siempre --hero-* (contraste AA). */
  --punto: #a81bbb;

  /* Superficies: UN fondo morado profundo de arriba a abajo (mismo color
     en portada, secciones, tienda y pie: no hay bloques alternos). Las
     tarjetas y paneles son morados apenas más claros que el fondo. */
  --fondo: #150a24;   /* morado profundo del logo */
  --fondo-alt: #1d0f33;
  --fondo-inverso: #f7f7f9;
  --superficie: #1c0e33;
  --borde: #35214f;
  --borde-fuerte: #4b3070;

  /* Texto: claro sobre el morado. Los dos tenues pasan AA de sobra
     (9:1 o más): letras opacas en toda la página. */
  --texto: #f3f0f7;
  --texto-suave: #c9bedb;
  --texto-tenue: #bcafd0;
  --texto-inverso: #111827;

  /* Estado: tonos claros para que el texto pase AA sobre los fondos
     oscuros de aviso (mismos valores en los dos temas). */
  --exito: #34d399;
  --exito-fondo: #052e23;
  --error: #f87171;
  --error-fondo: #2f0d0d;
  --aviso: #d97706;
  --aviso-fondo: #2e2005;

  /* Forma */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Sombras sobre fondo oscuro: negras, con más densidad que en claro. */
  --sombra-sm: 0 1px 2px rgb(0 0 0 / 35%);
  --sombra-md: 0 4px 12px -2px rgb(0 0 0 / 45%), 0 2px 6px -2px rgb(0 0 0 / 30%);
  --sombra-lg: 0 12px 32px -8px rgb(0 0 0 / 55%), 0 4px 12px -4px rgb(0 0 0 / 35%);
  --sombra-rosa: 0 10px 28px -8px rgb(236 64 122 / 40%);

  /* Ritmo */
  --ancho: 1140px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --seccion: clamp(3.5rem, 9vw, 7rem);

  --transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------------------
     Bloques de marca: la pagina entera es oscura (mismo morado en
     portada, secciones y pie), así que estos tonos verificados contra
     WCAG AA se usan para los rótulos, entradillas y bordes de marca.
     Todos los valores de abajo estan verificados sobre --fondo.
     ---------------------------------------------------------------------- */
  --hero-texto: #ffffff;        /* 19.1:1 sobre --fondo */
  --hero-tenue: #d8d2e4;        /* 13.0:1 */
  --hero-acento: #ff85b0;       /* 8.4:1  (rosa aclarado) */
  --hero-borde: #6b5a80;        /* borde solido del boton secundario */
  --hero-boton-fg: #18092b;     /* texto del boton blanco solido */
}

/* El fondo base (arriba) YA es el morado de la marca en los dos temas: la
   página es uniforme de arriba a abajo. El modo oscuro solo hunde un punto
   más las superficies. El JS escribe "claro" u "oscuro"; "dark" es alias. */
[data-theme="oscuro"],
[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0b0512;
  --fondo-alt: #140a22;
  --superficie: #150b23;
  --borde: #2c1a44;
  --borde-fuerte: #432a66;

  --rosa-tenue: #2e0c1c;

  --sombra-sm: 0 1px 2px rgb(0 0 0 / 45%);
  --sombra-md: 0 4px 12px -2px rgb(0 0 0 / 55%);
  --sombra-lg: 0 12px 32px -8px rgb(0 0 0 / 65%);
}

/* Tema claro: fondo blanco (no lila). Las letras pasan a morado casi
   negro y los acentos se oscurecen para seguir pasando AA sobre blanco
   (todos verificados 4.5:1 o más). Los puntos flotantes se mantienen
   tal cual (el magenta se lee perfecto sobre blanco); el rayo se
   oscurece con un filtro para que su núcleo casi blanco no se pierda. */
[data-theme="claro"] {
  color-scheme: light;
  --fondo: #ffffff;
  --fondo-alt: #f4f1fa;
  --fondo-inverso: #150a24;
  --superficie: #ffffff;
  --borde: #e0d5ef;
  --borde-fuerte: #c9b8e3;

  --texto: #241536;
  --texto-suave: #574a6e;
  --texto-tenue: #6f6189;
  --texto-inverso: #ffffff;

  --rosa: #c81e5e;
  --rosa-fuerte: #b31252;
  --rosa-boton: #c81e5e;
  --rosa-tenue: #fbe4ee;

  --morado: #6d28d9;

  --exito: #047857;
  --exito-fondo: #d9f5e8;
  --error: #b91c1c;
  --error-fondo: #fbe3e3;
  --aviso: #92400e;
  --aviso-fondo: #fdf0d8;

  --hero-texto: #1c0e33;
  --hero-tenue: #574a6e;
  --hero-acento: #c81e5e;
  --hero-borde: #c9b8e3;
  --hero-boton-fg: #ffffff;

  --sombra-sm: 0 1px 2px rgb(60 30 110 / 12%);
  --sombra-md: 0 4px 12px -2px rgb(60 30 110 / 14%), 0 2px 6px -2px rgb(60 30 110 / 10%);
  --sombra-lg: 0 12px 32px -8px rgb(60 30 110 / 18%), 0 4px 12px -4px rgb(60 30 110 / 12%);
}

/* En tema claro el botón secundario pasa a morado sólido con texto
   blanco: el botón blanco desaparecería sobre el fondo blanco. */
[data-theme="claro"] .boton--claro {
  --btn-bg: #1c0e33;
  --btn-fg: #ffffff;
  --btn-borde: #1c0e33;
}

[data-theme="claro"] .boton--claro:hover {
  --btn-bg: #2c1a44;
  --btn-borde: #2c1a44;
  box-shadow: 0 10px 28px -10px rgb(60 30 110 / 35%);
}

/* En tema claro el motivo de puntos se marca un poco más para que
   siga presente sobre el blanco. */
[data-theme="claro"] body::after {
  opacity: 0.5;
}

/* En tema claro el rayo se oscurece para que no se pierda sobre el
   blanco (su núcleo es casi blanco). La forma y el parpadeo no cambian. */
[data-theme="claro"] .relampago {
  filter: blur(6px) brightness(0.68) saturate(1.5);
}

/* El logo cambia a su tinta morada (#A81BBB): la versión blanca sería
   invisible sobre el fondo blanco. */
[data-theme="claro"] .marca__logo--claro {
  display: block;
}

[data-theme="claro"] .marca__logo--oscuro {
  display: none;
}

/* El pie comparte el fondo de la página, así que en tema claro también
   lleva la variante morada del logo (la regla base del pie, escrita con
   una página siempre morada, forzaba la blanca). */
[data-theme="claro"] .pie .marca__logo--claro {
  display: block;
}

[data-theme="claro"] .pie .marca__logo--oscuro {
  display: none;
}

/* La etiqueta de estado del producto invierte su texto: en tema claro el
   error es rojo oscuro (#b91c1c) y el texto oscuro se perdería (1.6:1);
   en blanco da 5.3:1. La de OFERTA queda fuera: su fondo es ámbar
   (#f59e0b) y ahí el texto correcto es el oscuro #3b1c00 (7.2:1); el
   blanco sobre ámbar solo da 2.15:1. */
[data-theme="claro"] .producto__etiqueta:not(.producto__etiqueta--oferta) {
  color: #ffffff;
}

/* El botón de peligro al pasar el cursor pone texto #18092b sobre el
   error: en tema claro ese error ya es rojo oscuro, así que el texto
   pasa a blanco. */
[data-theme="claro"] .boton--peligro:hover {
  --btn-fg: #ffffff;
}

/* Las estrellas de valoración: el ámbar claro (#f59e0b) casi desaparece
   sobre el blanco (2:1); en tema claro se oscurecen (4.8:1). */
[data-theme="claro"] .estrellas {
  color: #b45309;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transicion), color var(--transicion);
}

/* Fondo animado de la página: un destello magenta respira en la esquina
   superior derecha y el motivo completo (los 14 puntos) flota a la
   derecha. La rejilla de puntos estáticos (cuadrícula) se eliminó: los
   únicos círculos del fondo son los puntos flotantes —que siguen al
   cursor, de puntos.js— y el motivo de la derecha (body::after). Estas
   capas de textura del fondo UNIFORME son fijas, con z-index negativo,
   quedan sobre el fondo y bajo TODO el contenido. Solo transform/opacity:
   va en la GPU y no hay JS. prefers-reduced-motion las congela (regla
   global); la capa de puntos que sigue al cursor vive en la seccion 8 y en
   static/js/puntos.js. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

body::before {
  inset: -3rem;
  background-image:
    radial-gradient(52rem at 88% -10rem, rgb(168 27 187 / 22%), transparent 70%);
  background-repeat: no-repeat;
  animation: deriva-fondo 40s ease-in-out infinite alternate;
}

body::after {
  inset: 0;
  background-image: url("../img/puntos-marca.svg");
  background-repeat: no-repeat;
  background-position: right -4rem top 16vh;
  background-size: clamp(13rem, 22vw, 24rem) auto;
  opacity: 0.3;
  animation: flotar 26s ease-in-out infinite alternate;
}

@keyframes deriva-fondo {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-30px, -18px, 0); }
}

@keyframes flotar {
  from { transform: translate3d(0, 0, 0) rotate(-2deg); }
  to { transform: translate3d(-18px, 14px, 0) rotate(2deg); }
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Enlaces dentro de bloques de texto (WCAG 1.4.1): el color solo no
   alcanza para distinguirlos del texto que los rodea (el rosa del enlace
   queda casi al mismo nivel que la letra tenue), así que van subrayados
   con grosor fino y bien pegados a la letra. No aplica a navegación ni
   botones: esos enlaces ya tienen su propio estilo visual. */
p a:not(.boton),
.pie__col a,
.u-rosa {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--rosa-boton);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Utilidades de layout
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.seccion {
  padding-block: var(--seccion);
}

/* Línea divisoria gruesa entre cada sección de la página pública. */
main.principal > section:not(:first-child),
main.principal > div > section:not(:first-child) {
  border-top: 3px solid var(--borde);
}

/* .seccion--alt no se estiliza aqui: sus rótulos de marca viven en la
   seccion 8, junto al resto del texto sobre el fondo uniforme. */

.principal {
  flex: 1;
}

.pila {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.fila.u-entre {
  justify-content: space-between;
}

.rejilla {
  display: grid;
  gap: var(--gap);
}

.rejilla--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.rejilla--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.rejilla--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* En pantallas angostas las cuadrículas se compactan a 2 columnas en vez
   de una sola: evita listas interminables hacia abajo en el móvil. */
@media (max-width: 40rem) {
  .rejilla--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  }
  .rejilla--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chip-logo,
  .chip-logo--tarjeta {
    min-width: 0;
  }
}

.centrado {
  text-align: center;
}

.centrado > * {
  margin-inline: auto;
}

/* Las cuadrículas y tarjetas dentro de una pila flex deben estirarse al
   ancho completo: el margin auto de .centrado las encogía al mínimo y la
   cuadrícula colapsaba a una sola columna. */
.pila > .rejilla,
.pila > .tarjeta {
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   4. Tipografía
   -------------------------------------------------------------------------- */
.titulo-hero {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.titulo-seccion {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 850;
}

.titulo-bloque {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosa);
}

.entradilla {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--texto-suave);
  max-width: 42ch;
}

.tenue {
  color: var(--texto-suave);
}

.tenue-2 {
  color: var(--texto-tenue);
}

.pequeno {
  font-size: 0.875rem;
}

.diminuta {
  font-size: 0.78rem;
}

.negrita {
  font-weight: 700;
}

.acento {
  color: var(--rosa);
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.boton {
  --btn-bg: var(--rosa-boton);
  --btn-fg: #fff;
  --btn-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transicion), box-shadow var(--transicion),
    background-color var(--transicion), opacity var(--transicion);
}

.boton:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-rosa);
}

.boton:active {
  transform: translateY(1px) scale(0.97);
}

.boton[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.boton--bloque {
  width: 100%;
}

.boton--fantasma {
  --btn-bg: transparent;
  --btn-fg: var(--texto);
  --btn-borde: var(--borde-fuerte);
}

.boton--fantasma:hover {
  --btn-borde: var(--rosa);
  --btn-fg: var(--rosa);
  box-shadow: none;
}

.boton--suave {
  --btn-bg: var(--fondo-alt);
  --btn-fg: var(--texto);
  --btn-borde: var(--borde);
}

.boton--suave:hover {
  --btn-borde: var(--rosa);
  box-shadow: var(--sombra-sm);
}

.boton--peligro {
  --btn-bg: var(--error-fondo);
  --btn-fg: var(--error);
  --btn-borde: var(--error);
}

.boton--peligro:hover {
  --btn-fg: #18092b;
  --btn-bg: var(--error);
  box-shadow: none;
}

.boton--icono {
  padding: 0.65rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-full);
}

/* --------------------------------------------------------------------------
   6. Superficies
   -------------------------------------------------------------------------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion);
}

.tarjeta--interactiva:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--rosa) 45%, transparent);
  box-shadow: var(--sombra-lg);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: var(--rosa-tenue);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Los íconos SVG reemplazan a los emojis: rosa de marca sobre el fondo rosa
   suave de las tarjetas, y en los estados vacíos. */
.tarjeta__icono svg,
.vacio svg {
  color: var(--rosa);
}

.producto__imagen svg {
  color: var(--rosa);
  opacity: 0.65;
}

.aviso-origen svg,
.burbuja--bot svg {
  vertical-align: -0.15em;
}

/* --------------------------------------------------------------------------
   7. Encabezado / navegación
   -------------------------------------------------------------------------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 85%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--transicion), background-color var(--transicion);
}

.encabezado[data-desplazado="1"] {
  box-shadow: var(--sombra-md);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  /* La barra necesita más ancho que las secciones (1140px): con marca,
     7 enlaces, "Cotizar", cuenta, carrito y tema no entraba y el flex
     aplastaba los enlaces ("Armar PC" se partía en dos líneas). */
  max-width: 80rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  /* La marca no debe aplastarse: como es un item flex del encabezado y la
     imagen trae max-width:100%, el contenedor podia colapsar a ancho 0 y el
     logo desaparecia. flex-shrink:0 fija su tamaño de contenido. */
  flex-shrink: 0;
}

.marca__logo {
  display: block;
  height: 2.05rem;
  width: auto;
  /* El ancho sale de la proporcion (ancho×alto fijos en el <img>), no del
     100% del contenedor flex: con max-width:100% la imagen heredaba el ancho
     colapsado del contenedor y media 0 px. */
  max-width: none;
}

.marca__logo--pie {
  height: 2rem;
  margin-bottom: 0.85rem;
}

/* Con el fondo morado de la página va la versión blanca (logo-blanco.png),
   con la misma forma pero tinta blanco puro: el logo oscuro (#A81BBB sobre
   transparente) quedaría casi invisible. En tema claro estas reglas se
   invierten (seccion 2: la variante morada sobre el blanco). La versión
   oculta sale del árbol de accesibilidad con display: none. */
.marca__logo--claro {
  display: none;
}

.marca__logo--oscuro {
  display: block;
}

.navegacion {
  display: none;
  align-items: center;
  /* 1.25rem y no 1.75rem: con el resto de la barra, 1.75rem desbordaba
     el contenedor y los enlaces se partían en dos líneas. */
  gap: 1.25rem;
}

/* `:not(.boton)` es imprescindible: sin esto, estas reglas (0,1,1) ganan
   sobre `.boton` (0,1,0) y el botón "Cotizar" queda con texto gris sobre
   fondo rosa. */
.navegacion a:not(.boton) {
  position: relative;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding-block: 0.35rem;
  white-space: nowrap;
  transition: color var(--transicion), transform 150ms ease;
}

.navegacion a:not(.boton):hover {
  color: var(--rosa);
  transform: translateY(-2px);
}

/* Subrayado que se desliza desde la izquierda al pasar el cursor.
   La página actual lo lleva siempre visible. */
.navegacion a:not(.boton)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--rosa);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transicion);
}

.navegacion a:not(.boton):hover::after,
.navegacion a:not(.boton)[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Al hacer clic el enlace se "hunde" un instante. */
.navegacion a:not(.boton):active {
  transform: scale(0.93);
}

.navegacion a:not(.boton)[aria-current="page"] {
  color: var(--rosa);
}

.acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Boton circular de la cabecera. Lo usan el de tema y el del menu movil,
   asi que comparten estilo. Antes el de tema usaba la misma clase que el
   menu y este selector lo ocultaba en pantallas anchas. */
.boton-menu,
.boton-tema {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  transition: transform var(--transicion), border-color var(--transicion),
    color var(--transicion), background-color var(--transicion);
}

.boton-menu:hover,
.boton-tema:hover {
  transform: scale(1.06);
  border-color: var(--rosa);
  color: var(--rosa);
}

/* Al hacer clic el botón circular se comprime un instante. */
.boton-menu:active,
.boton-tema:active {
  transform: scale(0.9);
}

/* Solo se muestra el icono del modo al que se puede pasar:
   en tema claro se ofrece pasar a oscuro (luna), y al revés. */
.icono-tema {
  grid-area: 1 / 1;
  pointer-events: none;
}

.icono-sol {
  display: none;
}

[data-theme="oscuro"] .icono-sol,
[data-theme="dark"] .icono-sol {
  display: block;
}

[data-theme="oscuro"] .icono-luna,
[data-theme="dark"] .icono-luna {
  display: none;
}

/* Carrito: mismo aspecto que el botón de tema, con el contador encima. */
.boton-carrito {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--superficie);
  color: var(--texto);
  transition: transform var(--transicion), border-color var(--transicion),
    color var(--transicion), background-color var(--transicion);
}

.boton-carrito:hover {
  transform: scale(1.06);
  border-color: var(--rosa);
  color: var(--rosa);
}

.boton-carrito:active {
  transform: scale(0.9);
}

.boton-carrito__contador {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  border-radius: var(--r-full);
  background: var(--rosa-boton);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
}

.boton-carrito__contador[hidden] {
  display: none;
}

/* Aviso efímero tras agregar al carrito. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-full);
  background: var(--texto);
  color: var(--fondo);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--sombra-lg);
  animation: toast-entra 0.25s ease-out;
}

@keyframes toast-entra {
  from {
    opacity: 0;
    transform: translate(-50%, 0.6rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.menu-movil {
  display: none;
  border-top: 1px solid var(--borde);
  background: var(--fondo);
}

.menu-movil[data-abierto="1"] {
  display: block;
}

.menu-movil nav {
  display: flex;
  flex-direction: column;
  padding-block: 0.75rem;
}

/* Igual que en el escritorio: el botón no debe heredar el estilo de enlace. */
.menu-movil a:not(.boton) {
  padding: 0.8rem 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  transition: color var(--transicion), transform 150ms ease,
    background-color var(--transicion);
}

/* En el móvil el enlace se corre a la derecha al tocarlo... */
.menu-movil a:not(.boton):hover {
  color: var(--rosa);
  transform: translateX(6px);
}

/* ...y al hacer clic destella y se comprime un instante. */
.menu-movil a:not(.boton):active {
  transform: scale(0.98);
  background-color: var(--rosa-tenue);
}

.menu-movil a:not(.boton)[aria-current="page"] {
  color: var(--rosa);
}

.menu-movil .boton {
  margin-top: 1rem;
  border-bottom: 0;
}

@media (min-width: 80rem) {
  .navegacion {
    display: flex;
  }
  /* En pantallas anchas la navegacion ya esta en la barra, asi que solo
     se oculta el boton del menu movil. El de tema se mantiene siempre
     visible: es la unica forma de cambiar de modo en computador.
     80rem y no 62rem: entre 992px y 1280px la barra completa no cabia
     de un solo renglon y los enlaces se partian. */
  .boton-menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Fondo uniforme de marca + puntos que reaccionan al cursor
   ---------------------------------------------------------------------------
   La pagina entera es de un solo color: el morado profundo del logo que
   pinta body (seccion 2). Portada, secciones alternas y pie NO llevan
   fondo propio (son transparentes y heredan), asi que no hay bloques que
   alternen claro/oscuro: el color es uno de arriba a abajo y lo que
   cambia es la textura, que ponen las capas fijas de body.
   La textura reactiva la pone esta capa de puntos: la crea
   static/js/puntos.js y cada punto deriva solo y ademas se aparta y crece
   cuando el cursor o el dedo pasan por encima. */
.portada,
.seccion--alt,
.pie {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--texto);
}

.portada {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

/* Puntos del logo en el fondo. z-index negativo: quedan sobre el morado
   de body y bajo TODO el contenido. El JS solo escribe transform (GPU). */
.capa-puntos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.punto-vivo {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--r-full);
  background: radial-gradient(
    circle at 32% 30%, #e76bf3, var(--punto) 62%, #6c0f78 100%
  );
  will-change: transform;
}

/* Luz magenta que sigue al puntero POR ENCIMA del contenido: es lo que
   hace visible la reaccion tambien sobre tarjetas, botones y el pie.
   z-index 40: debajo de la cabecera (50), los avisos (70) y el toast (90). */
.luz-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 20rem;
  height: 20rem;
  margin: -10rem 0 0 -10rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  will-change: transform;
}

.luz-cursor[data-activa="1"] {
  opacity: 1;
}

/* El latido va en el pseudo: el transform del contenedor lo escribe el JS
   y no debe pisarse con una animacion. */
.luz-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: radial-gradient(
    circle, rgb(168 27 187 / 40%), rgb(168 27 187 / 12%) 48%, transparent 70%
  );
  animation: latido 10s ease-in-out infinite alternate;
}

@keyframes latido {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.18); opacity: 1; }
}

/* Onda magenta que estalla donde se hace clic (o toque) en cualquier
   parte de la pagina. El JS solo escribe el translate del contenedor. */
.onda-clic {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

.onda-clic::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -10rem;
  width: 20rem;
  height: 20rem;
  border-radius: var(--r-full);
  border: 2px solid rgb(236 64 122 / 75%);
  background: radial-gradient(
    circle, rgb(168 27 187 / 34%), transparent 62%
  );
  animation: onda 750ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes onda {
  from { transform: scale(0.12); opacity: 1; }
  to { transform: scale(1); opacity: 0; }
}

/* Relámpagos morados: rayos finos y ramificados (como en una tormenta),
   dibujados en static/img/rayo-*.svg. Cada rayo mide más que el alto
   visible y nace sobre el borde superior, así cruza la pantalla de
   extremo a extremo. El JS elige una de las 3 formas al azar, además de
   la posición lateral y si va espejado, por CSSOM. Van DENTRO de
   .capa-puntos: sobre el morado y bajo todo el contenido. */
.relampago {
  position: absolute;
  background: url("../img/rayo-1.svg") no-repeat center / contain;
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity;
  animation: destello 900ms ease-in-out forwards;
}

/* El rayo solo parpadea (sin zoom): así nunca se "encoje" a la mitad,
   siempre toca ambos bordes mientras está visible. */
@keyframes destello {
  0% {
    opacity: 0;
    transform: rotate(var(--giro, 0deg));
  }
  10% {
    opacity: 0.5;
    transform: rotate(var(--giro, 0deg));
  }
  22% {
    opacity: 0.05;
    transform: rotate(var(--giro, 0deg));
  }
  34% {
    opacity: 0.35;
    transform: rotate(var(--giro, 0deg));
  }
  52% {
    opacity: 0.12;
    transform: rotate(var(--giro, 0deg));
  }
  100% {
    opacity: 0;
    transform: rotate(var(--giro, 0deg));
  }
}

/* --------------------------------------------------------------------------
   8b. Halo sólido para el texto sobre el fondo animado
   Los puntos flotantes y los relámpagos viven en .capa-puntos, fija y con
   z-index negativo: sobre el fondo y bajo TODO el contenido. Se probaron
   dos versiones antes: cajas opacas (el borde recto cortaba los círculos
   a la mitad y se notaba) y halo solo difuminado (el blur es
   semitransparente y los puntos se transparentaban pegados a la letra).
   Versión final: cada letra lleva un ANILLO SÓLIDO del color del fondo
   (8 sombras sin blur en las 8 direcciones: tapa por completo los puntos
   que tocan la letra) más una transición difuminada hacia afuera. El
   fondo animado sigue visible entre líneas y alrededor del párrafo, y
   como el despeje sigue la forma de cada glifo no hay ningún borde recto
   ni rectángulo. Vale en los dos temas porque usa --fondo (morado en
   oscuro, blanco en claro). text-shadow se hereda, así que basta con
   ponerlo en los contenedores (.pie__col, .marcas).
   -------------------------------------------------------------------------- */
.titulo-hero,
.titulo-seccion,
.entradilla,
.etiqueta,
.marcas,
.pie__col,
.pie__legal,
.tenue,
.tenue-2,
.pequeno,
.campo label {
  text-shadow:
    -2px 0 0 var(--fondo),
    2px 0 0 var(--fondo),
    0 -2px 0 var(--fondo),
    0 2px 0 var(--fondo),
    -1.5px -1.5px 0 var(--fondo),
    1.5px -1.5px 0 var(--fondo),
    -1.5px 1.5px 0 var(--fondo),
    1.5px 1.5px 0 var(--fondo),
    0 0 8px var(--fondo),
    0 0 18px var(--fondo);
}

/* Dentro de superficies ya opacas (--superficie) el halo debe ser de ese
   tono, no del fondo de la página: si no, se vería un filo oscuro
   alrededor de cada letra dentro de tarjetas y paneles. */
.tarjeta .entradilla,
.tarjeta .etiqueta,
.tarjeta .tenue,
.tarjeta .tenue-2,
.tarjeta .pequeno,
.tarjeta .campo label,
.carrito .tenue,
.carrito .pequeno,
.login__caja .tenue,
.login__caja .pequeno,
.armado__panel .tenue,
.armado__panel .pequeno {
  text-shadow:
    -2px 0 0 var(--superficie),
    2px 0 0 var(--superficie),
    0 -2px 0 var(--superficie),
    0 2px 0 var(--superficie),
    -1.5px -1.5px 0 var(--superficie),
    1.5px -1.5px 0 var(--superficie),
    -1.5px 1.5px 0 var(--superficie),
    1.5px 1.5px 0 var(--superficie),
    0 0 8px var(--superficie),
    0 0 18px var(--superficie);
}

.portada__contenido {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Rotulo del hero: el rosa de marca se queda a 3.5:1 sobre morado, asi que
   aqui se usa el rosa aclarado (7.4:1). */
.portada .etiqueta {
  color: var(--hero-acento);
}

/* Palabra destacada del titulo, por la misma razon. */
.portada .acento {
  color: var(--hero-acento);
}

.portada .entradilla {
  color: var(--hero-tenue);
  max-width: 38rem;
}

/* Texto suelto dentro de las secciones alternas oscuras: los mismos
   valores verificados del hero (WCAG AA sobre el morado profundo). */
.seccion--alt .etiqueta,
.seccion--alt .acento,
.seccion--alt .u-rosa {
  color: var(--hero-acento);
}

.seccion--alt .entradilla,
.seccion--alt .tenue,
.seccion--alt .tenue-2 {
  color: var(--hero-tenue);
}

.seccion--alt .vacio svg {
  color: var(--hero-acento);
}

/* Islas: componentes con fondo claro dentro de bloques oscuros (tarjetas,
   carrito, avisos). Siempre recuperan los colores normales; la mayor
   especificidad (.seccion--alt X .clase) gana a las reglas de arriba. */
.tarjeta,
.carrito,
.aviso-inline {
  color: var(--texto);
}

.seccion--alt .tarjeta .etiqueta,
.seccion--alt .tarjeta .u-rosa {
  color: var(--rosa);
}

.seccion--alt .tarjeta .entradilla,
.seccion--alt .tarjeta .tenue,
.seccion--alt .carrito .tenue {
  color: var(--texto-suave);
}

.seccion--alt .tarjeta .tenue-2 {
  color: var(--texto-tenue);
}

/* El boton del hero usa el blanco por defecto de `.boton`.
   Antes habia aqui un `.portada .boton { --btn-fg: #fff }` que, por tener mas
   especificidad que `.boton--claro`, dejaba el boton blanco con texto blanco. */

/* Boton secundario: blanco solido con texto oscuro.
   Antes era blanco al 12% de opacidad; sobre el destello rosado del hero
   el texto blanco se perdia. Ahora el contraste es de 15.6:1. */
.boton--claro {
  --btn-bg: #ffffff;
  --btn-fg: var(--hero-boton-fg);
  --btn-borde: #ffffff;
  backdrop-filter: none;
}

.boton--claro:hover {
  --btn-bg: #f1e9f5;
  --btn-borde: #f1e9f5;
  box-shadow: 0 10px 28px -10px rgb(0 0 0 / 55%);
}

.marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
  font-size: 0.95rem;
}

.marcas span {
  transition: color var(--transicion);
}

.marcas span:hover {
  color: var(--rosa);
}

.metrica {
  text-align: center;
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.metrica__cifra {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 850;
  color: var(--rosa);
  letter-spacing: -0.02em;
}

.metrica__texto {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   9. Formularios
   -------------------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.campo label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--fondo);
  color: var(--texto);
  font-size: 0.95rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-tenue);
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosa) 18%, transparent);
}

.campo textarea {
  resize: vertical;
  min-height: 7rem;
}

.campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. Tienda
   -------------------------------------------------------------------------- */
.buscador {
  position: relative;
}

.buscador input {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--superficie);
  /* Isla clara: aunque la seccion sea oscura, el texto va en color normal. */
  color: var(--texto);
  box-shadow: var(--sombra-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.buscador input:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosa) 18%, transparent);
}

.buscador__lupa {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  pointer-events: none;
}

.filtros {
  position: sticky;
  top: 4.25rem;
  z-index: 30;
  padding-block: 0.9rem;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--borde);
}

.filtros select {
  width: 100%;
  max-width: 22rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--superficie);
  cursor: pointer;
}

.grupo-producto {
  padding-top: 2.5rem;
}

.grupo-producto__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.25rem;
}

.grupo-producto__titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  min-width: 0;
}

.grupo-producto__titulo span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.punto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--rosa);
  flex-shrink: 0;
}

.contador {
  flex-shrink: 0;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--fondo-alt);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.controles {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.carrusel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.75rem;
  scrollbar-width: none;
}

.carrusel::-webkit-scrollbar {
  display: none;
}

.producto {
  flex: 0 0 16.5rem;
  width: 16.5rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion);
}

.producto:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--rosa) 45%, transparent);
  box-shadow: var(--sombra-lg);
}

.producto[hidden] {
  display: none;
}

.producto__imagen {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--fondo-alt);
  overflow: hidden;
  font-size: 2.75rem;
}

.producto__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.producto:hover .producto__imagen img {
  transform: scale(1.05);
}

.producto__etiqueta {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  background: var(--error);
  /* Sobre el rojo claro del error (tema oscuro) el texto va oscuro: 7.2:1 */
  color: #18092b;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Oferta: aparece cuando el producto lleva la etiqueta "oferta" en Shopify.
   Si el mismo producto está "Sin stock", el pill de oferta baja un renglón. */
.producto__etiqueta--oferta {
  background: #f59e0b;
  color: #3b1c00;
}

.producto__etiqueta + .producto__etiqueta--oferta {
  top: 2.2rem;
}

.producto__nombre {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.8em;
}

.producto__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
}

.producto__precio {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--rosa);
}

.producto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

/* Página del carrito */
.carrito {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
}

.carrito__lineas {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carrito__linea {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--borde);
}

.carrito__linea:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.carrito__imagen {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-md);
  background: var(--fondo);
  font-size: 1.4rem;
  overflow: hidden;
}

.carrito__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrito__titulo {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.carrito__precio {
  font-size: 0.8rem;
  color: var(--rosa);
  font-weight: 700;
}

.carrito__cantidad {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
}

.carrito__paso {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: var(--r-full);
  background: var(--fondo);
  color: var(--texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transicion);
}

.carrito__paso:hover {
  background: var(--rosa-boton);
  color: #fff;
}

.carrito__paso[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.carrito__numero {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.carrito__resumen {
  display: grid;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.carrito__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1rem;
}

.carrito__total strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--rosa);
}

/* Aviso del carrito cuando hay productos sin precio publicado. Bloquea el
   "Ir a pagar" para que nadie pague de menos. */
.aviso-carrito {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--aviso);
  border-radius: var(--r-md);
  background: var(--aviso-fondo);
  color: var(--texto);
  font-size: 0.85rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .carrito {
    padding: 1.75rem;
  }

  .carrito__linea {
    grid-template-columns: 4.5rem 1fr auto;
  }
}

.vacio {
  padding-block: 4rem;
  text-align: center;
  display: grid;
  gap: 0.75rem;
  place-items: center;
}

.vacio[hidden] {
  display: none;
}

.aviso-origen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--fondo-alt);
  font-size: 0.72rem;
  color: var(--texto-suave);
}

/* Canal de venta externo (MercadoLibre): la píldora entera es el enlace. */
.aviso-origen--enlace {
  text-decoration: none;
  color: var(--morado);
  font-weight: 600;
}

.aviso-origen--enlace:hover {
  border-color: var(--morado);
}

/* --------------------------------------------------------------------------
   11. Servicios / listas
   -------------------------------------------------------------------------- */
.servicio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-sm);
}

@media (min-width: 60rem) {
  .servicio {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.servicio__cabeza {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.lista-check {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.lista-check li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.lista-check li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--rosa);
  font-weight: 800;
}

.testimonio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}

.testimonio__comilla {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--rosa);
  font-weight: 900;
}

.testimonio__firma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--borde);
}

.estrellas {
  color: #f59e0b;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   12. Pie
   -------------------------------------------------------------------------- */
.pie {
  /* El pie es parte del fondo uniforme de la pagina (seccion 8); aqui
     solo los specifics del pie. */
  border-top: 1px solid var(--hero-borde);
  padding-block: 3rem 1.5rem;
}

.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
}

.pie__col h2 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-texto);
  margin-bottom: 0.85rem;
}

.pie__col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--hero-tenue);
}

.pie__col a:hover {
  color: var(--hero-acento);
}

.pie .tenue {
  color: var(--hero-tenue);
}

.pie__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hero-borde);
  text-align: center;
  font-size: 0.8rem;
  /* Token en vez de lavanda fijo: el pie comparte el fondo de la página
     y con fondo blanco el lavanda hardcodeado desaparecía. */
  color: var(--hero-tenue);
}

/* El pie comparte el fondo de la página (no tiene tinte propio), así que
   por defecto —página morada— lleva la variante blanca. La especificidad
   (0,2,0) empata con las reglas de tema en la seccion 5 y al venir despues
   gana; en tema claro la gana la regla de la seccion 2 (0,3,0). */
.pie .marca__logo--claro {
  display: none;
}

.pie .marca__logo--oscuro {
  display: block;
}

/* --------------------------------------------------------------------------
   13. Avisos flotantes
   -------------------------------------------------------------------------- */
.avisos {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(100% - 2rem, 28rem);
  display: grid;
  gap: 0.5rem;
}

.aviso {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--sombra-lg);
  font-size: 0.88rem;
  animation: aparecer 250ms ease-out;
}

.aviso--exito {
  background: var(--exito-fondo);
  border-color: color-mix(in srgb, var(--exito) 40%, transparent);
  color: var(--exito);
}

.aviso--error {
  background: var(--error-fondo);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
  color: var(--error);
}

.aviso--aviso {
  background: var(--aviso-fondo);
  border-color: color-mix(in srgb, var(--aviso) 40%, transparent);
  color: var(--aviso);
}

.aviso__cerrar {
  flex-shrink: 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}

.aviso__cerrar:hover {
  opacity: 1;
}

.aviso--saliendo {
  animation: desaparecer 400ms ease forwards;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes desaparecer {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* --------------------------------------------------------------------------
   14. Chat JasalBot
   -------------------------------------------------------------------------- */
.chat {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.chat__panel {
  width: min(calc(100vw - 2rem), 22rem);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  animation: salir 220ms ease-out;
}

.chat__panel[hidden] {
  display: none;
}

.chat__cabeza {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--morado-profundo);
  color: #fff;
}

.chat__identidad {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  margin: 0;
}

/* Punto de estado junto al nombre: verde si el asistente responde de verdad,
   apagado si está desconectado. */
.punto-online,
.punto-offline {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: var(--r-full);
  vertical-align: baseline;
}

.punto-online {
  background: #34d399;
}

.punto-offline {
  background: #94a3b8;
}

[data-theme="oscuro"] .chat__cabeza,
[data-theme="dark"] .chat__cabeza {
  background: #0f0720;
}

.chat__avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-full);
  background: var(--rosa);
  flex-shrink: 0;
}

.chat__estado {
  font-size: 0.7rem;
  color: #b3aac0;
}

.chat__cerrar {
  margin-left: auto;
  background: none;
  border: 0;
  color: #a79fb5;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.chat__cerrar:hover {
  color: #fff;
}

.chat__mensajes {
  height: 17rem;
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  background: var(--fondo-alt);
}

.burbuja {
  max-width: 88%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-md);
  font-size: 0.87rem;
  line-height: 1.5;
  /* Preserva los saltos de línea de las respuestas del bot. Por eso el texto
     de las burbujas fijas debe escribirse en una sola línea en la plantilla:
     si no, la sangría del código fuente se vería dentro del chat. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.burbuja--bot {
  justify-self: start;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 0.25rem;
  color: var(--texto);
}

.burbuja--yo {
  justify-self: end;
  background: var(--rosa-boton);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

/* Aviso del sistema: no es respuesta del bot, asi que ocupa todo el ancho y
   se distingue con una barra lateral. */
.burbuja--aviso {
  justify-self: stretch;
  max-width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--texto-tenue);
  border-radius: var(--r-md);
  color: var(--texto-suave);
  font-size: 0.82rem;
}

.burbuja--aviso strong {
  color: var(--texto);
}

.puntos span {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.2rem;
  border-radius: var(--r-full);
  background: var(--texto-tenue);
  animation: saltar 1.2s infinite ease-in-out;
}

.puntos span:nth-child(2) {
  animation-delay: 0.15s;
}

.puntos span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes saltar {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.chat__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}

.chat__form input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--fondo);
  font-size: 0.88rem;
}

.chat__form input:focus {
  outline: none;
  border-color: var(--rosa);
}

.chat__enviar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--rosa);
  color: #fff;
  cursor: pointer;
  transition: transform var(--transicion);
}

.chat__enviar:hover {
  transform: scale(1.08);
}

.chat__boton {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: var(--r-full);
  background: var(--rosa);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--sombra-rosa);
  transition: transform var(--transicion);
}

.chat__boton:hover {
  transform: scale(1.06);
}

@keyframes salir {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

/* --------------------------------------------------------------------------
   15. Panel de administración
   -------------------------------------------------------------------------- */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--fondo-alt);
}

.login__caja {
  width: min(100%, 24rem);
  padding: 2rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
}

.panel {
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
}

.panel__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.5rem;
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.insignia--nueva {
  background: var(--rosa-boton);
  color: #fff;
}

.insignia--leida {
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
}

.consulta {
  padding: 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--r-md);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.consulta[data-leida="0"] {
  border-left-color: var(--rosa);
  background: color-mix(in srgb, var(--rosa) 4%, var(--superficie));
}

.consulta + .consulta {
  margin-top: 0.75rem;
}

.consulta__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.consulta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.consulta__mensaje {
  margin-top: 0.75rem;
  padding: 0.85rem;
  background: var(--fondo-alt);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.consulta__acciones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.filtros-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.enlace-sutil {
  background: none;
  border: 0;
  padding: 0;
  color: var(--rosa);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.enlace-sutil:hover {
  text-decoration: underline;
}

/* Panel: edición de precios de la tienda */
.ta-der {
  text-align: right;
}

.campo-precios {
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  min-width: 0;
}

.campo-precios:focus {
  outline: 2px solid var(--rosa);
  outline-offset: 1px;
  border-color: transparent;
}

.campo-precios--corto {
  width: 7.5rem;
}

.precio-editor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.precio-editor .sin-iva {
  font-size: 0.68rem;
  color: var(--rosa);
  font-weight: 700;
  white-space: nowrap;
}

.tabla-precios {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
}

.tabla-precios table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tabla-precios th {
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla-precios td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
  min-width: 0;
}

.tabla-precios tbody tr:last-child td {
  border-bottom: 0;
}

.tabla-precios tbody tr:hover {
  background: var(--fondo-alt);
}

.tabla-precios__producto {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 26rem;
}

.tabla-precios__producto img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  flex-shrink: 0;
}

@media (max-width: 46rem) {
  .tabla-precios th:nth-child(2),
  .tabla-precios td:nth-child(2) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   15b. Margen global (panel de administración)
   -------------------------------------------------------------------------- */
.campo-etiqueta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 13rem;
  flex: 1;
}

/* Casilla con su explicación al lado (panel de stock). */
.opcion-casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

.opcion-casilla input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--rosa);
}

.opcion-casilla > span {
  min-width: 0;
}

.aviso-error {
  color: var(--error);
  font-weight: 600;
}

.progreso-margen {
  border-top: 1px solid var(--borde);
  padding-top: 1rem;
}

.progreso-margen__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.progreso-margen__barra {
  position: relative;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  overflow: hidden;
}

.progreso-margen__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rosa);
  border-radius: inherit;
  transition: width 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .progreso-margen__barra span {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   16. Animación de entrada
   -------------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   17. Utilidades finales
   -------------------------------------------------------------------------- */
.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar-al-contenido {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--rosa-boton);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 0.8rem;
  font-weight: 700;
  transition: transform var(--transicion);
}

.saltar-al-contenido:focus {
  transform: translate(-50%, 0);
}

.volver-arriba {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: 5.5rem;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-md);
  cursor: pointer;
  transition: transform var(--transicion), border-color var(--transicion);
}

.volver-arriba:hover {
  transform: translateY(-3px);
  border-color: var(--rosa);
  color: var(--rosa);
}

.volver-arriba[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   18. Utilidades de espaciado
   Sustituyen a los estilos en línea para poder mantener una CSP estricta
   (sin 'unsafe-inline'). Escala: 1=.5rem 2=1rem 3=1.5rem 4=2rem
   5=2.5rem 6=3rem 7=3.5rem 8=4rem
   -------------------------------------------------------------------------- */
.u-mt-1 { margin-top: 0.5rem; }
.u-mt-2 { margin-top: 1rem; }
.u-mt-4 { margin-top: 2rem; }
.u-mt-5 { margin-top: 2.5rem; }
.u-mb-1 { margin-bottom: 0.5rem; }
.u-mb-2 { margin-bottom: 1rem; }
.u-mb-3 { margin-bottom: 1.5rem; }
.u-mb-5 { margin-bottom: 2.5rem; }
.u-mb-6 { margin-bottom: 3rem; }
.u-flex-1 { flex: 1; }
.u-pt-1 { padding-top: 0.5rem; }
.u-pt-5 { padding-top: 3rem; }
.u-pb-0 { padding-bottom: 0; }
.u-pb-4 { padding-bottom: 2rem; }
.u-p-3 { padding: 1.5rem; }
.u-p-6 { padding: 2.5rem; }
.u-py-5 { padding-block: 2.5rem; }
.u-py-6 { padding-block: 3rem; }
.u-py-7 { padding-block: 3.5rem; }
.u-py-8 { padding-block: 4rem; }
.u-gap-1 { gap: 0.5rem; }
.u-gap-2 { gap: 1rem; }
.u-gap-3 { gap: 1.5rem; }
.u-gap-6 { gap: 3rem; }

.u-centrar { justify-content: center; }
.u-centrar-y { align-items: center; }
.u-centrado { text-align: center; }
.u-auto { margin-inline: auto; }
.u-ancho-total { width: 100%; }
.u-max-32 { max-width: 32rem; }
.u-max-34 { max-width: 34rem; }
.u-max-44 { max-width: 44rem; }
.u-max-48 { max-width: 48rem; }
.u-max-64 { max-width: 64rem; }
.u-min-50 { min-height: 50dvh; }
.u-scroll-margin { scroll-margin-top: 5rem; }
.u-izq { text-align: left; }

.u-rosa { color: var(--rosa); }
.u-italica { font-style: italic; }
.u-mayus { text-transform: uppercase; }
.u-emoji { font-size: 1.6rem; line-height: 1; }
.u-separador { margin: 1.75rem 0; border: 0; border-top: 1px solid var(--borde); }
.u-tracking { letter-spacing: 0.08em; }

/* Titulares */
.titulo-hero--md { font-size: clamp(2rem, 5vw, 3.25rem); }
.u-num-grande { font-size: clamp(3rem, 8vw, 4.5rem); }
.u-num-medio { font-size: clamp(2.5rem, 6vw, 3.5rem); }

/* Emojis decorativos */
.u-emoji-lg { font-size: 2.5rem; }
.u-emoji-xl { font-size: 3rem; }

/* Botones compactos */
.boton--sm { padding: 0.5rem 1rem; font-size: 0.7rem; }
.boton--xs { padding: 0.4rem 0.9rem; font-size: 0.68rem; }
.boton--filtro { padding: 0.45rem 1rem; font-size: 0.72rem; }
.boton--mini { padding: 0.4rem 1rem; font-size: 0.72rem; }

/* Cifras destacadas del panel */
.u-cifra-md { font-size: 1.25rem; }
.u-cifra-lg { font-size: 1.75rem; }
.u-titulo-md { font-size: 1rem; }
.nota { background: var(--fondo-alt); }
.texto-fuera { max-width: 30rem; }

/* Cabecera del chat */
.u-chat-nombre { font-weight: 700; font-size: 0.9rem; }

/* Páginas de error */
.error-pagina {
  min-height: 70dvh;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 1rem;
}

.error-pagina__codigo {
  font-size: clamp(4rem, 16vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--rosa);
  opacity: 0.25;
}

.error-pagina a:not(.boton) {
  color: var(--rosa);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Fundadora (inicio): retrato 4:5 que se adapta sin deformarse.
   -------------------------------------------------------------------------- */
.fundadora {
  align-items: center;
}

.fundadora__foto {
  margin: 0;
  justify-self: center;
  width: min(100%, 24rem);
}

.fundadora__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--fondo-alt);
}

/* Presentación en diagonal (zigzag): el primer texto va a la izquierda
   con su foto a la derecha; debajo, la segunda foto queda a la izquierda
   y el segundo texto a la derecha. En pantallas angostas todo se apila
   y cada fila lee texto → foto. */
.fundadora--diagonal {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-block: clamp(1.5rem, 4vw, 3.5rem);
}

.fundadora__fila {
  margin: 0;
}

/* Línea divisoria entre los dos bloques de la fundadora. */
.fundadora__fila--inversa {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 3px solid var(--borde);
}

@media (max-width: 47.99rem) {
  .fundadora__fila--inversa .fundadora__foto {
    order: 2;
  }
}

/* --------------------------------------------------------------------------
   Clientes: mosaico de logos y carrusel con desplazamiento automático.
   Las "chips" siempre van sobre fondo blanco para que los logos oficiales
   (algunos con fondo blanco propio) se lean igual en tema claro y oscuro.
   -------------------------------------------------------------------------- */
.chip-logo {
  display: grid;
  place-items: center;
  min-width: 8.5rem;
  height: 4.25rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-sm);
}

.chip-logo img {
  max-width: 7rem;
  max-height: 2.75rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter var(--transicion), opacity var(--transicion),
    transform var(--transicion);
}

.chip-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

/* Logos tipográficos (empresas sin imagen pública) */
.chip-logo__txt {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.3;
  color: #1f2937;
}

/* Carrusel: cinta infinita con dos grupos idénticos; -50% hace el bucle
   perfecto sin saltos. Se pausa al pasar el cursor o enfocar. */
.clientes-carrusel__visor {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.clientes-carrusel__pista {
  display: flex;
  width: max-content;
  animation: clientes-deslizar 60s linear infinite;
}

.clientes-carrusel__grupo {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clientes-carrusel__item {
  display: grid;
  place-items: center;
  padding-inline: 0.5rem;
}

.clientes-carrusel:hover .clientes-carrusel__pista,
.clientes-carrusel:focus-within .clientes-carrusel__pista {
  animation-play-state: paused;
}

@keyframes clientes-deslizar {
  to {
    transform: translateX(-50%);
  }
}

/* Con "reducir movimiento", la cinta queda estática y desplazable */
@media (prefers-reduced-motion: reduce) {
  .clientes-carrusel__visor {
    overflow-x: auto;
  }
  .clientes-carrusel__pista {
    animation: none;
  }
}

/* Tarjetas de detalle de cada cliente */
.cliente-tarjeta {
  display: flex;
  flex-direction: column;
}

.chip-logo--tarjeta {
  margin-inline: auto;
  margin-bottom: 1.25rem;
  min-width: 7rem;
  height: 5rem;
}

/* --------------------------------------------------------------------------
   Armador de PC: selectores por categoría, resumen fijo y estimación de
   rendimiento (FPS en juegos y tareas). Todo usa las variables de tema.
   -------------------------------------------------------------------------- */
.aviso-inline {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
  font-size: 0.875rem;
  text-align: left;
}

.aviso-inline svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--rosa);
}

.u-max-42 { max-width: 42rem; margin-inline: auto; }

/* Rejilla: columnas de componentes + panel fijo */
.armado__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.armado__columnas {
  display: grid;
  gap: 1.75rem;
}

/* Grupo por categoría */
.armado__grupo {
  margin: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  scroll-margin-top: 1.5rem;
}

.armado__grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.armado__grupo-icono {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-md);
  background: var(--rosa-tenue);
  color: var(--rosa);
}

.pill {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
}

.pill--necesario {
  background: var(--rosa-tenue);
  color: var(--rosa-fuerte);
}

.pill--opcional {
  background: var(--fondo-alt);
  color: var(--texto-suave);
}

.pill--exito {
  background: var(--exito-fondo);
  color: var(--exito);
}

.pill--aviso {
  background: var(--aviso-fondo);
  color: var(--aviso);
}

.pill--quieto {
  background: var(--fondo-alt);
  color: var(--texto-suave);
}

.armado__ayuda {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
  max-width: 46rem;
}

/* Opciones de componente */
.armado__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.armado__opcion {
  position: relative;
  cursor: pointer;
}

.armado__opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.armado__tarjeta {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  height: 100%;
  padding: 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--fondo);
  transition: border-color var(--transicion), box-shadow var(--transicion),
    transform var(--transicion);
}

.armado__opcion:hover .armado__tarjeta {
  border-color: var(--borde-fuerte);
  transform: translateY(-1px);
}

.armado__opcion:has(input:checked) .armado__tarjeta {
  border-color: var(--rosa);
  box-shadow: var(--sombra-rosa);
  background: color-mix(in srgb, var(--rosa) 5%, var(--superficie));
}

.armado__opcion input:focus-visible + .armado__tarjeta {
  outline: 2px solid var(--rosa);
  outline-offset: 2px;
}

.armado__imagen {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-sm);
  background: var(--fondo-alt);
  color: var(--texto-suave);
  overflow: hidden;
}

.armado__imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.armado__detalle {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.armado__nombre {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.armado__precio {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--rosa-fuerte);
}

.armado__nota {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--aviso);
}

/* Panel fijo: resumen + total + rendimiento */
.armado__panel {
  position: sticky;
  top: 1.25rem;
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-md);
}

.armado__resumen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.armado__resumen li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.armado__elegido strong {
  flex-shrink: 0;
  font-size: 0.75rem;
}

.armado__pendiente {
  /* Es un <button> dentro del <li>: ancho completo y fondo transparente
     (el <button> nativo trae su gris). El resto lo hereda del reset. */
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  text-align: left;
}

.armado__pendiente:hover {
  border-color: var(--rosa);
  color: var(--rosa-fuerte);
}

/* Seleccion incompatible: se marca en rojo en el resumen del panel.
   Cuando lleva problema es un <button> dentro del <li>, así que reparte
   su contenido él mismo (el flex del <li> ya no lo alcanza). */
.armado__elegido--problema {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  flex-wrap: wrap;
  padding: 0.45rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--error) 55%, transparent);
  border-radius: var(--r-sm);
  background: var(--error-fondo);
  cursor: pointer;
  text-align: left;
}

.armado__elegido--problema .armado__problema {
  flex-basis: 100%;
  color: var(--error);
}

.armado__problema {
  font-size: 0.68rem;
  line-height: 1.35;
}

/* Aviso bajo el boton: destaca cuando hay algo que revisar */
.armado__aviso--problema {
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--error) 55%, transparent);
  border-radius: var(--r-sm);
  background: var(--error-fondo);
  color: var(--error);
  font-weight: 700;
}

.armado__totales {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
}

.armado__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.85rem;
}

.armado__fila strong { font-size: 0.85rem; }

.armado__fila--total strong {
  font-size: 1.25rem;
  color: var(--rosa-fuerte);
}

/* Selector "¿cómo lo recibes?" */
.armado__servicio {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--fondo-alt);
}

.armado__servicio-titulo {
  font-size: 0.75rem;
  font-weight: 700;
}

.armado__servicio-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.armado__servicio-opcion input {
  accent-color: var(--rosa);
}

/* Estimación de rendimiento */
.armado__rendimiento {
  display: grid;
  gap: 0.75rem;
}

.armado__rendimiento .titulo-bloque {
  margin-bottom: 0;
}

.armado__pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.armado__pestanas button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--fondo);
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transicion);
}

.armado__pestanas button[aria-selected="true"] {
  background: var(--rosa-boton);
  border-color: var(--rosa-boton);
  color: #fff;
}

.armado__fps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.armado__fila-fps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.armado__fila-nombre {
  font-size: 0.75rem;
  font-weight: 700;
}

.armado__fila-fps strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.78rem;
  color: var(--rosa-fuerte);
  justify-self: end;
  white-space: nowrap;
}

.armado__calidad {
  justify-self: end;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--texto-suave);
  background: var(--fondo-alt);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
}

.armado__barra {
  grid-column: 1 / -1;
  height: 0.4rem;
  border-radius: var(--r-full);
  background: var(--fondo-alt);
  overflow: hidden;
}

.armado__barra-relleno {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--rosa), var(--morado));
  transition: width var(--transicion);
}

.armado__sin-datos {
  font-size: 0.75rem;
  color: var(--texto-suave);
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--borde);
}

/* Móvil: el panel deja de ser fijo y se apila después de las columnas */
@media (max-width: 62rem) {
  .armado__rejilla {
    grid-template-columns: 1fr;
  }

  .armado__panel {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   18. Cuenta de usuario
   -------------------------------------------------------------------------- */

/* Enlace tipo píldora para "Ingresar" y "Mi cuenta" en la cabecera */
.boton-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  background: var(--superficie);
  color: var(--texto);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transicion), color var(--transicion),
    transform 150ms ease;
}

.boton-cuenta:hover {
  border-color: var(--rosa);
  color: var(--rosa);
  transform: translateY(-1px);
}

.boton-cuenta:active {
  transform: scale(0.95);
}

.boton-cuenta svg {
  flex-shrink: 0;
}

/* "Salir" como texto, junto al enlace de cuenta */
.form-salir {
  display: inline-flex;
}

.enlace-salir {
  background: none;
  border: 0;
  padding: 0.35rem 0.4rem;
  color: var(--texto-suave);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transicion), transform 150ms ease;
}

.enlace-salir:hover {
  color: var(--rosa);
  text-decoration: underline;
}

.enlace-salir:active {
  transform: scale(0.94);
}

/* Consenso explícito de privacidad en el registro */
.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--texto-suave);
  cursor: pointer;
}

.consentimiento input {
  margin-top: 0.15rem;
  accent-color: var(--rosa);
  flex-shrink: 0;
}

/* Historial de conversaciones: misma maquetación que el chat (las burbujas
   usan justify-self, así que el contenedor debe ser grid). */
.historico {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.historico .burbuja {
  justify-self: start;
}

.historico .burbuja--yo {
  justify-self: end;
}

.historico .burbuja--aviso {
  justify-self: stretch;
}

/* Conversación en las listas */
.conversacion {
  display: block;
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.conversacion:hover {
  border-color: var(--rosa);
  box-shadow: var(--sombra-sm);
}

.conversacion + .conversacion {
  margin-top: 0.75rem;
}

.conversacion__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

/* Zona peligrosa (borrar cuenta): borde rojo para que no pase inadvertida */
.zona-peligro {
  border: 1px solid color-mix(in srgb, var(--error) 55%, transparent);
  background: var(--error-fondo);
}

.zona-peligro h2 {
  color: var(--error);
}

/* Estado de la cuenta (confirmada / sin confirmar) en la ficha y el listado */
.estado-cuenta {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.estado-cuenta--ok {
  background: var(--exito-fondo);
  color: var(--exito);
}

.estado-cuenta--alerta {
  background: var(--error-fondo);
  color: var(--error);
}

/* Nota informativa bajo la cabecera del chat (solo con sesión iniciada) */
.chat__nota {
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--borde);
  font-size: 0.72rem;
  color: var(--texto-suave);
}

/* En pantallas chicas la cabecera se aprieta: la píldora de cuenta queda
   solo con el icono y "Crear cuenta" se oculta (sigue en el menú móvil) */
@media (max-width: 52rem) {
  .boton-cuenta__texto {
    display: none;
  }

  .boton-cuenta {
    padding: 0.5rem 0.68rem;
  }

  .solo-escritorio {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Ficha de producto (/producto/<handle>)
   -------------------------------------------------------------------------- */
.ficha {
  padding: 2.5rem 0 3rem;
}

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  color: var(--texto-tenue);
}

.migas a {
  color: var(--texto-suave);
  text-decoration: none;
}

.migas a:hover {
  color: var(--rosa);
}

.ficha__cuerpo {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .ficha__cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

/* ---- Galería ---- */
.ficha__galeria {
  display: grid;
  gap: 0.75rem;
}

.ficha__principal {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--borde);
  background: var(--fondo-alt);
  overflow: hidden;
}

.ficha__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha__sin-foto {
  color: var(--texto-tenue);
}

.ficha__miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ficha__miniatura {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--fondo-alt);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transicion);
}

.ficha__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ficha__miniatura:hover {
  border-color: var(--borde-fuerte);
}

.ficha__miniatura[aria-current="true"] {
  border-color: var(--rosa);
  box-shadow: var(--sombra-rosa);
}

.ficha__miniatura:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 2px;
}

/* ---- Datos ---- */
.ficha__datos {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.ficha__precio-caja {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
}

.ficha__precio {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800;
  color: var(--rosa);
  line-height: 1.1;
}

.ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.boton--lg {
  padding: 0.85rem 1.4rem;
  font-size: 0.95rem;
  gap: 0.5rem;
}

.ficha__tecnica {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  border-top: 1px solid var(--borde);
}

.ficha__tecnica > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borde);
  font-size: 0.85rem;
}

.ficha__tecnica dt {
  color: var(--texto-tenue);
}

.ficha__tecnica dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* ---- Descripción ---- */
.ficha__descripcion,
.ficha__relacionados {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.prosa {
  max-width: 68ch;
  line-height: 1.7;
  color: var(--texto-suave);
}

.prosa h3 {
  margin: 1.25rem 0 0.4rem;
  font-size: 1rem;
  color: var(--texto);
}

.prosa ul,
.prosa ol {
  margin: 0.4rem 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.25rem;
}

.prosa p + p {
  margin-top: 0.75rem;
}

.prosa a {
  color: var(--rosa);
}

/* Tarjetas de relacionados: la zona de foto + nombre es un enlace. */
.producto__enlace {
  display: grid;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.producto__enlace:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
  border-radius: var(--r-md);
}

@media (prefers-reduced-motion: reduce) {
  .ficha__miniatura,
  .boton--lg {
    transition: none;
  }
}