/* Nilsucom · estilos de la web pública */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --tinta: #0b1220;
  --tinta-2: #131c33;
  --marca: #2b50ec;
  --marca-oscura: #1e3bd1;
  --marca-clara: #e9eeff;
  --menta: #14e0a8;
  --menta-oscura: #0a8f6a;
  --wa: #128c4b;
  --fondo: #f5f7fb;
  --superficie: #ffffff;
  --linea: #e1e6f0;
  --texto: #18202f;
  --suave: #566173;
  --radio: 16px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgb(11 18 32 / 6%), 0 8px 24px rgb(11 18 32 / 6%);
  --sombra-alta: 0 2px 6px rgb(11 18 32 / 8%), 0 18px 40px rgb(11 18 32 / 12%);
  --titulos: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --alto-encabezado: 68px;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-encabezado) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  overflow-x: hidden;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--titulos);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
}

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

:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

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

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--tinta);
  color: #fff;
  border-radius: var(--radio-chico);
  text-decoration: none;
}
.saltar:focus {
  top: 12px;
}

.contenedor {
  width: min(1180px, 100% - 32px);
  margin-inline: auto;
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6em 1.15em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.boton:hover {
  transform: translateY(-1px);
}
.boton--grande {
  min-height: 52px;
  padding: 0.75em 1.5em;
  font-size: 1rem;
}
.boton--primario {
  background: var(--marca);
  color: #fff;
  box-shadow: 0 8px 20px rgb(43 80 236 / 35%);
}
.boton--primario:hover {
  background: var(--marca-oscura);
}
.boton--claro {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 28%);
  color: #fff;
}
.boton--claro:hover {
  background: rgb(255 255 255 / 16%);
}
.boton--wa {
  background: var(--wa);
  color: #fff;
}
.boton--wa:hover {
  background: #0d7a40;
}
.boton--menta {
  background: var(--menta);
  color: var(--tinta);
}
.boton--menta:hover {
  background: #3deab9;
}
.boton--borde {
  background: var(--superficie);
  border-color: var(--linea);
  color: var(--texto);
}
.boton--borde:hover {
  border-color: var(--marca);
  color: var(--marca);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--menta);
}
.etiqueta::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.etiqueta--oscura {
  color: var(--marca);
}

/* Encabezado */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--alto-encabezado);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo__marca {
  width: 38px;
  height: 38px;
}
.logo__texto {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  color: var(--tinta);
}
.logo__texto span {
  color: var(--marca);
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.menu a:not(.boton) {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--suave);
}
.menu a:not(.boton):hover {
  color: var(--tinta);
  background: var(--fondo);
}
.menu__wa {
  margin-left: 8px;
}

.hamburguesa {
  display: none;
}

@media (max-width: 860px) {
  .hamburguesa {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--superficie);
    cursor: pointer;
  }
  .hamburguesa span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--tinta);
    transition: transform 0.25s;
  }
  .hamburguesa[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .hamburguesa[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 20px;
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra-alta);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .menu.abierto {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .menu a:not(.boton) {
    padding: 12px;
    font-size: 1.05rem;
  }
  .menu__wa {
    margin: 8px 0 0;
  }
}

/* Portada: a pantalla completa, con la N del logo que se dibuja detrás del título */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--alto-encabezado));
  min-height: calc(100svh - var(--alto-encabezado));
  padding: clamp(40px, 6vh, 88px) 0 clamp(150px, 20vh, 196px);
  background:
    radial-gradient(640px 440px at 88% 12%, rgb(43 80 236 / 50%), transparent 70%),
    radial-gradient(560px 400px at 6% 100%, rgb(20 224 168 / 20%), transparent 70%),
    var(--tinta);
  color: #fff;
  text-align: center;
  overflow: hidden;
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

.hero__marca {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(1320px, 190vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__trazos {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trazo--n {
  stroke: #7f9bff;
  stroke-width: 0.34;
  opacity: 0.2;
}
.trazo--pista {
  stroke: var(--menta);
  stroke-width: 0.2;
  opacity: 0.22;
}
.flujo {
  stroke: var(--menta);
  stroke-width: 0.32;
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 0.07;
  opacity: 0;
}
.nodo {
  fill: var(--menta);
  opacity: 0.32;
  transform-box: fill-box;
  transform-origin: center;
}
.nodo--chico {
  opacity: 0.3;
}
.motion .trazo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dibujar 2.2s 0.2s var(--curva) forwards;
}
.motion .trazo--pista {
  animation-delay: 1.15s;
  animation-duration: 1.4s;
}
.motion .trazo--tarde {
  animation-delay: 1.45s;
}
.motion .nodo {
  transform: scale(0);
  animation: brotar 0.8s 1.8s var(--curva) forwards, latir 4s 2.8s ease-in-out infinite;
}
.motion .flujo {
  animation: recorrer-flujo 3.4s 2.6s linear infinite;
}
.motion .flujo--2 {
  animation-delay: 4.3s;
}

.hero__escenario {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__pastilla {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgb(255 255 255 / 85%);
}
.punto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--menta);
}
.motion .punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--menta);
  animation: onda 2s ease-out infinite;
}

.hero h1 {
  max-width: 13ch;
  margin-top: 26px;
  font-size: clamp(2.45rem, 7vw + 0.4rem, 5.8rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero .acento {
  color: var(--menta);
}

/* Palabras del título: suben desde una máscara al cargar */
.hw {
  display: inline-block;
  padding: 0.04em 0.02em 0.14em;
  margin: -0.04em -0.02em -0.14em;
  vertical-align: top;
  overflow: hidden;
  overflow: clip;
}
.hw > span {
  display: inline-block;
}
.motion .hw > span {
  transform: translateY(108%);
  animation: emerger 1s var(--curva) forwards;
}
.motion .hw--2 > span { animation-delay: 0.08s; }
.motion .hw--3 > span { animation-delay: 0.16s; }
.motion .hw--4 > span { animation-delay: 0.24s; }
.motion .hw--5 > span { animation-delay: 0.32s; }

/* Subrayado en forma de pista de circuito, con su nodo al final */
.subrayado {
  position: relative;
  display: inline-block;
}
.subrayado::before,
.subrayado::after {
  content: "";
  position: absolute;
  background: var(--menta);
}
.subrayado::before {
  left: 0.04em;
  right: -0.04em;
  bottom: -0.02em;
  height: max(3px, 0.06em);
  border-radius: 99px;
  transform-origin: 0 50%;
}
.subrayado::after {
  right: -0.16em;
  bottom: calc(-0.02em - 0.05em);
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  box-shadow: 0 0 0 0.05em rgb(20 224 168 / 25%);
}
.motion .subrayado::before {
  transform: scaleX(0);
  animation: estirar 0.8s 1.05s var(--curva) forwards;
}
.motion .subrayado::after {
  transform: scale(0);
  animation: brotar 0.5s 1.7s var(--curva) forwards;
}

.hero__bajada {
  max-width: 44em;
  margin-top: 30px;
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.18rem);
  color: rgb(255 255 255 / 76%);
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.hero__checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: rgb(255 255 255 / 72%);
}
.hero__checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__checks .icono {
  width: 18px;
  height: 18px;
  color: var(--menta);
}
.motion .hero-in {
  opacity: 0;
  animation: subir 0.9s var(--curva) forwards;
}
.motion .hero-in--1 { animation-delay: 0.05s; }
.motion .hero-in--2 { animation-delay: 0.6s; }
.motion .hero-in--3 { animation-delay: 0.75s; }
.motion .hero-in--4 { animation-delay: 0.9s; }
@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Indicador para bajar */
.hero__bajar {
  position: absolute;
  bottom: clamp(58px, 8vh, 80px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgb(255 255 255 / 60%);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.hero__bajar i {
  position: relative;
  display: block;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: rgb(255 255 255 / 20%);
}
.hero__bajar i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--menta);
  transform: translateY(-100%);
}
.motion .hero__bajar i::after {
  animation: caer 2.2s 2s var(--curva) infinite;
}

.boton--iman {
  transition: transform 0.35s var(--curva), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

@media (max-width: 640px) {
  /* En el celular el texto ocupa casi toda la pantalla: la N va más tenue y sin indicador para bajar. */
  .hero {
    padding-bottom: 88px;
  }
  .hero__marca {
    top: 40%;
  }
  .trazo--n {
    opacity: 0.13;
  }
  .nodo {
    opacity: 0.22;
  }
  .hero__bajar {
    display: none;
  }
  .hero__acciones {
    align-self: stretch;
  }
  .hero__acciones .boton {
    flex: 1 1 100%;
  }
  .hero__checks {
    flex-direction: column;
    align-items: center;
  }
}

/* Cinta inclinada con las categorías */
.cinta {
  position: relative;
  z-index: 2;
  margin-top: -40px;
  padding-block: 22px 10px;
  background: linear-gradient(transparent 52%, var(--superficie) 52%);
  overflow: hidden;
  overflow: clip;
}
.cinta__banda {
  margin-inline: -5%;
  padding-block: 14px;
  background: var(--menta);
  color: var(--tinta);
  box-shadow: 0 14px 40px rgb(20 224 168 / 28%);
  transform: rotate(-2deg);
}
.cinta__pista {
  display: flex;
  width: max-content;
}
.cinta ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cinta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titulos);
  font-size: clamp(1.05rem, 1.2vw + 0.75rem, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.cinta li::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline: 28px;
  background: var(--tinta);
  transform: rotate(45deg);
}
.cinta .icono {
  width: 1.15em;
  height: 1.15em;
}
.motion .cinta__pista {
  animation: deslizar 42s linear infinite;
}
@media (max-width: 640px) {
  .cinta {
    margin-top: -32px;
  }
  .cinta__banda {
    padding-block: 11px;
    transform: rotate(-3deg);
  }
}

/* Ventajas */
.ventajas {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.ventajas__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-block: 0;
  padding: 28px 0;
  list-style: none;
}
.ventajas__lista li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ventajas__lista .icono {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  background: var(--marca-clara);
  color: var(--marca);
}
.ventajas__lista strong {
  display: block;
  font-size: 0.98rem;
}
.ventajas__lista span {
  display: block;
  font-size: 0.9rem;
  color: var(--suave);
}
@media (max-width: 960px) {
  .ventajas__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .ventajas__lista {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Secciones */
.seccion__cabeza {
  max-width: 640px;
  margin-bottom: 32px;
}
.seccion__cabeza h2 {
  margin-top: 10px;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}
.seccion__cabeza p:not(.etiqueta) {
  margin-top: 10px;
  color: var(--suave);
}

/* Catálogo */
.catalogo {
  padding-block: 80px;
}
.herramientas {
  display: flex;
  gap: 12px;
}
.buscador {
  position: relative;
  flex: 1;
}
.buscador .icono {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--suave);
  pointer-events: none;
}
.buscador input,
.orden select {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--superficie);
  font-size: 1rem;
}
.buscador input {
  padding: 0 16px 0 48px;
}
.orden select {
  padding: 0 14px;
  cursor: pointer;
}
.buscador input:focus,
.orden select:focus {
  border-color: var(--marca);
  outline: 3px solid rgb(43 80 236 / 20%);
  outline-offset: 0;
}

.categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.chip .icono {
  width: 18px;
  height: 18px;
  color: var(--marca);
}
.chip small {
  font-size: 0.78rem;
  color: var(--suave);
}
.chip:hover {
  border-color: var(--marca);
}
.chip[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}
.chip[aria-pressed="true"] .icono {
  color: var(--menta);
}
.chip[aria-pressed="true"] small {
  color: rgb(255 255 255 / 70%);
}

@media (max-width: 640px) {
  .herramientas {
    flex-direction: column;
  }
  /* En el celular las categorías se deslizan de costado en una sola fila. */
  .categorias {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -16px;
    padding: 2px 16px 6px;
    scrollbar-width: none;
  }
  .categorias::-webkit-scrollbar {
    display: none;
  }
  .chip {
    flex: none;
  }
}

.catalogo__estado {
  margin-top: 20px;
  font-size: 0.92rem;
  color: var(--suave);
}
.catalogo__estado:empty {
  display: none;
}

.productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
@media (max-width: 560px) {
  .productos {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.producto {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
  animation: aparecer 0.5s both;
  animation-delay: calc(min(var(--i, 0), 11) * 45ms);
}
.producto:hover {
  border-color: transparent;
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.producto__foto {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 0;
  background: #f1f4fa;
  cursor: zoom-in;
}
.producto__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  background: #fff;
}
.producto__icono {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--marca-clara), #f6f8fd 70%);
  color: var(--marca);
}
.producto__icono .icono {
  width: 38%;
  height: 38%;
  opacity: 0.85;
}

.producto__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
.producto__meta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marca);
}
.producto__nombre {
  font-size: 1.05rem;
  line-height: 1.3;
}
.producto__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
  color: var(--suave);
}
.producto__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}
.producto__precio {
  font-family: var(--titulos);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.producto__precio--consultar {
  font-family: var(--cuerpo);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--suave);
}
.producto__consultar {
  min-height: 40px;
  padding: 0.45em 0.95em;
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .producto__info {
    padding: 12px;
    gap: 4px;
  }
  .producto__meta {
    font-size: 0.7rem;
  }
  .producto__nombre {
    font-size: 0.95rem;
  }
  .producto__desc {
    display: none;
  }
  .producto__precio {
    font-size: 1.1rem;
  }
  .producto__precio.producto__precio--consultar {
    font-size: 0.85rem;
  }
  .producto__pie {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* Mientras cargan los productos */
.producto--esqueleto {
  pointer-events: none;
}
.producto--esqueleto .producto__foto,
.esqueleto {
  background: linear-gradient(90deg, #eef1f7 25%, #f7f9fc 50%, #eef1f7 75%) 0 0 / 200% 100%;
  animation: brillo 1.4s infinite linear;
}
.esqueleto {
  height: 14px;
  border-radius: 6px;
}
.esqueleto--corto {
  width: 45%;
}
.esqueleto--alto {
  height: 22px;
  width: 60%;
  margin-top: 14px;
}
@keyframes brillo {
  to {
    background-position: -200% 0;
  }
}

.catalogo__vacio {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 48px 20px;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  text-align: center;
  color: var(--suave);
}
.catalogo__vacio > .icono {
  width: 44px;
  height: 44px;
  color: var(--marca);
}
.catalogo__vacio strong {
  font-family: var(--titulos);
  font-size: 1.2rem;
  color: var(--tinta);
}

.catalogo__mas {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Empresas */
.empresas {
  padding-bottom: 80px;
}
.empresas__caja {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 40px;
  border-radius: 24px;
  background:
    radial-gradient(420px 240px at 100% 0%, rgb(20 224 168 / 22%), transparent 70%),
    linear-gradient(135deg, var(--tinta), var(--tinta-2));
  color: #fff;
}
.empresas__icono {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgb(255 255 255 / 8%);
  color: var(--menta);
}
.empresas__icono .icono {
  width: 36px;
  height: 36px;
}
.empresas h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.empresas p {
  margin-top: 8px;
  color: rgb(255 255 255 / 75%);
}
@media (max-width: 860px) {
  .empresas__caja {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 18px;
  }
  .empresas .boton {
    width: 100%;
  }
}

/* Cómo comprar */
.pasos {
  padding-block: 80px;
  background: var(--superficie);
  border-block: 1px solid var(--linea);
}
.pasos__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.pasos__lista li {
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
}
.pasos__numero {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--marca);
  color: #fff;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.2rem;
}
.pasos__lista h3 {
  margin-top: 18px;
  font-size: 1.2rem;
}
.pasos__lista p {
  margin-top: 6px;
  color: var(--suave);
}
@media (max-width: 760px) {
  .pasos__lista {
    grid-template-columns: 1fr;
  }
}

/* Contacto */
.contacto {
  padding-block: 80px;
}
.contacto__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contacto__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  text-decoration: none;
}
a.contacto__tarjeta:hover {
  border-color: var(--marca);
  box-shadow: var(--sombra);
}
.contacto__tarjeta .icono {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--marca);
}
.contacto__tarjeta span {
  font-size: 0.85rem;
  color: var(--suave);
}
.contacto__tarjeta strong {
  overflow-wrap: anywhere;
}
.contacto__tarjeta--wa .icono {
  color: var(--wa);
}
@media (max-width: 960px) {
  .contacto__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .contacto__lista {
    grid-template-columns: 1fr;
  }
}

/* Pie */
.pie {
  padding-block: 36px 96px;
  background: var(--tinta);
  color: rgb(255 255 255 / 70%);
  font-size: 0.92rem;
}
.pie__fila {
  display: grid;
  gap: 6px;
}
.pie__marca {
  font-family: var(--titulos);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.pie__marca span {
  color: var(--menta);
}
.pie__legal {
  margin-top: 12px;
  font-size: 0.82rem;
  color: rgb(255 255 255 / 55%);
}
@media (min-width: 861px) {
  .pie {
    padding-bottom: 36px;
  }
}

/* WhatsApp flotante (solo celular) */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: none;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 28px rgb(18 140 75 / 45%);
}
.wa-flotante .icono {
  width: 30px;
  height: 30px;
}
@media (max-width: 860px) {
  .wa-flotante {
    display: grid;
  }
}

/* Detalle del producto */
.detalle {
  width: min(880px, 100% - 32px);
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-alta);
}
.detalle::backdrop {
  background: rgb(11 18 32 / 60%);
}
.detalle[open] {
  animation: subir 0.3s both;
}
.detalle__caja {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.detalle__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--sombra);
  cursor: pointer;
}
.detalle__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #fff;
  border-right: 1px solid var(--linea);
}
.detalle__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}
.detalle__foto .producto__icono {
  aspect-ratio: 1;
}
.detalle__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 28px 28px;
}
.detalle__info h2 {
  font-size: 1.6rem;
  padding-right: 32px;
}
.detalle__precio {
  font-family: var(--titulos);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--tinta);
}
.detalle__precio.producto__precio--consultar {
  font-size: 1rem;
}
.detalle__descripcion {
  white-space: pre-line;
  color: var(--suave);
}
.detalle__info .boton {
  margin-top: auto;
}
@media (max-width: 700px) {
  .detalle {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
  .detalle__caja {
    grid-template-columns: 1fr;
  }
  .detalle__foto {
    aspect-ratio: 4 / 3;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
  }
  .detalle__info {
    padding: 20px 20px 24px;
  }
  .detalle__info h2 {
    font-size: 1.3rem;
    padding-right: 0;
  }
}

/* =====================================================================
   Animaciones (mismo estilo que Core Vibe). Todo lo que se mueve depende
   de la clase .motion, que temprano.js pone solo si el visitante no pidió
   reducir el movimiento. Sin .motion, cada parte se ve en su estado final.
   ===================================================================== */

/* Barra de progreso de lectura */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.progreso span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--marca), var(--menta));
  transform: scaleX(var(--pagina, 0));
  transform-origin: 0 50%;
}
html:not(.motion) .progreso {
  display: none;
}

/* Aparición suave al bajar, escalonada entre hermanos (--r) */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
  transition-delay: calc(var(--r, 0) * 80ms);
}
.motion [data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* Títulos de sección: las palabras suben al aparecer */
.motion .seccion__cabeza h2 .w {
  display: inline-block;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  vertical-align: top;
  overflow: hidden;
  overflow: clip;
}
.motion .seccion__cabeza h2 .w > span {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 0.9s var(--curva) calc(var(--i, 0) * 45ms + 150ms);
}
.motion .seccion__cabeza.visible h2 .w > span {
  transform: none;
}

/* Escenas: una idea por pantalla. Reciben --p (0 → 1) cuando aparecen. */
.escena {
  position: relative;
  background:
    radial-gradient(720px 420px at 50% 0%, rgb(43 80 236 / 30%), transparent 70%),
    radial-gradient(520px 360px at 100% 100%, rgb(20 224 168 / 10%), transparent 70%),
    var(--tinta);
  color: #fff;
  overflow: hidden;
  overflow: clip;
}
.escena__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 30px);
  padding-block: clamp(80px, 12vh, 136px);
  text-align: center;
}
.escena__viz {
  width: min(600px, 100%);
}
.escena__texto {
  max-width: 20ch;
  font-family: var(--titulos);
  font-size: clamp(1.9rem, 3.6vw + 0.7rem, 3.9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.escena__texto em {
  font-style: normal;
  color: var(--menta);
}
.escena__bajada {
  max-width: 46ch;
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.18rem);
  color: rgb(255 255 255 / 70%);
}
/* --q: avance del dibujo (termina en el 80 % de la escena) */
.motion .escena {
  --q: min(1, calc(var(--p, 1) * 1.25));
}
/* Las palabras se encienden una tras otra */
.motion .escena__texto .w {
  opacity: clamp(0.14, calc(var(--p, 1) * 1.9 * var(--n, 1) - var(--i, 0) + 0.2), 1);
  transition: opacity 0.15s linear;
}
.motion .escena__bajada,
.motion .escena__boton {
  opacity: clamp(0, calc((var(--p, 1) - 0.5) * 5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p, 1) - 0.5) * 5), 1)) * 16px));
}

/* 1 · Circuito: el chip reparte la señal a cada categoría */
.circuito {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pistas path,
.pistas-luz path,
.pistas-flujo path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pistas path {
  stroke: rgb(255 255 255 / 12%);
}
.pistas-luz path {
  stroke: var(--menta);
}
.pistas-flujo {
  opacity: 0;
}
.pistas-flujo path {
  stroke: #fff;
  stroke-width: 4;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 0.05;
}
.k1 { --k: 1; }
.k2 { --k: 2; }
.k3 { --k: 3; }
.k4 { --k: 4; }
.k5 { --k: 5; }
.motion .pistas-luz path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc(var(--q, 1) * 1.7 - var(--k, 0) * 0.12), 1));
}
/* Los pulsos de datos aparecen recién cuando todas las pistas están encendidas */
.motion .pistas-flujo {
  opacity: clamp(0, calc((var(--q, 1) - 0.95) * 20), 1);
}
.motion .pistas-flujo path {
  animation: recorrer-flujo 2.4s linear infinite paused;
  animation-delay: calc(var(--k, 0) * -0.4s);
}
.motion .escena.activa .pistas-flujo path {
  animation-play-state: running;
}

.chip rect {
  filter: drop-shadow(0 10px 24px rgb(43 80 236 / 55%));
}
.chip__patas {
  fill: none;
  stroke: rgb(255 255 255 / 35%);
  stroke-width: 3;
  stroke-linecap: round;
}
.chip__anillo {
  fill: none;
  stroke: var(--menta);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.motion .chip__anillo {
  animation: anillo 2.6s ease-out infinite paused;
}
.motion .escena.activa .chip__anillo {
  animation-play-state: running;
}

.nodo-cat {
  --on: 1;
  transform-box: fill-box;
  transform-origin: center;
}
.motion .nodo-cat {
  --on: clamp(0, calc((var(--q, 1) * 1.7 - var(--k, 0) * 0.12 - 0.98) * 10), 1);
  transform: scale(calc(0.86 + var(--on) * 0.14));
}
.nodo-cat circle {
  fill: var(--tinta-2);
  stroke: color-mix(in srgb, var(--menta) calc(var(--on) * 100%), rgb(255 255 255 / 16%));
  stroke-width: 2;
}
.nodo-cat use {
  color: color-mix(in srgb, var(--menta) calc(var(--on) * 100%), rgb(255 255 255 / 35%));
}
.nodo-cat text {
  fill: rgb(255 255 255 / calc(45% + var(--on) * 40%));
  font: 500 14px var(--cuerpo);
  text-anchor: middle;
}

/* 2 · Chat de WhatsApp: los mensajes llegan uno por uno */
.escena__contenido--doble {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  text-align: left;
}
.escena__copia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.6vh, 26px);
}
.escena__copia .escena__texto {
  max-width: 14ch;
}
.chat {
  width: min(380px, 100%);
  margin-inline: auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 28px;
  background: #0f1830;
  box-shadow: 0 30px 80px rgb(0 0 0 / 45%), 0 0 0 8px rgb(255 255 255 / 3%);
  overflow: hidden;
  text-align: left;
}
.chat__cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 5%);
}
.chat__avatar {
  width: 40px;
  height: 40px;
  flex: none;
}
.chat__cabeza strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.2;
}
.chat__cabeza small {
  font-size: 0.8rem;
  color: var(--menta);
}
.chat__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 14px 22px;
  background-image: radial-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 18px 18px;
}
.chat__lugar {
  display: grid;
}
.chat__lugar > * {
  grid-area: 1 / 1;
}
.burbuja {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.burbuja--cliente {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--marca);
}
.burbuja--nilsu {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: rgb(255 255 255 / 10%);
}
.burbuja--escribiendo {
  display: inline-flex;
  gap: 5px;
  justify-self: start;
  align-self: start;
  padding: 14px 16px;
  border-bottom-left-radius: 4px;
  background: rgb(255 255 255 / 10%);
  opacity: 0;
}
.burbuja--escribiendo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / 70%);
}
.burbuja--1 { --t: 0.06; }
.burbuja--2 { --t: 0.52; }
.burbuja--3 { --t: 0.82; }
.motion .burbuja {
  --on: clamp(0, calc((var(--p, 1) - var(--t, 0)) * 9), 1);
  opacity: var(--on);
  transform: translateY(calc((1 - var(--on)) * 14px)) scale(calc(0.96 + var(--on) * 0.04));
}
.motion .burbuja--escribiendo {
  opacity: min(clamp(0, calc((var(--p, 1) - 0.26) * 10), 1), clamp(0, calc((0.5 - var(--p, 1)) * 10), 1));
  transform: none;
}
.motion .escena.activa .burbuja--escribiendo i {
  animation: rebotar 1s ease-in-out infinite;
}
.burbuja--escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.burbuja--escribiendo i:nth-child(3) { animation-delay: 0.3s; }

@media (max-width: 860px) {
  .escena__contenido--doble {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .escena__copia {
    align-items: center;
    order: -1;
  }
  .escena__copia .escena__texto {
    max-width: 16ch;
  }
}
@media (max-width: 560px) {
  .nodo-cat text {
    font-size: 17px;
  }
}

@keyframes emerger {
  to {
    transform: none;
  }
}
@keyframes dibujar {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes estirar {
  to {
    transform: scaleX(1);
  }
}
@keyframes brotar {
  to {
    transform: scale(1);
  }
}
@keyframes latir {
  50% {
    transform: scale(1.25);
  }
}
@keyframes recorrer-flujo {
  10%,
  80% {
    opacity: 0.9;
  }
  to {
    stroke-dashoffset: -0.95;
    opacity: 0;
  }
}
@keyframes onda {
  to {
    transform: scale(3);
    opacity: 0;
  }
}
@keyframes caer {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}
@keyframes deslizar {
  to {
    transform: translateX(-50%);
  }
}
@keyframes anillo {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
@keyframes rebotar {
  0%,
  60%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(-5px);
  }
}

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