/* =============================================================================
   NexKey365 — Home (reconstrucción con carácter)
   Mismo ADN claro + verde, pero roto a mano: hero asimétrico con ilustración de
   activación propia, bento de piezas variadas (incluye tiles oscuro y verde),
   pasos en línea de tiempo, soporte con mini-chat. Sin rótulos en mayúsculas,
   sin banda de "números gigantes", sin iconos flotando.
   ============================================================================= */

/* ============================================================ HERO (foto) === */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 78vh, 700px);
  overflow: hidden;
  isolation: isolate;
  /* Hero oscuro fijo (no depende de foto ni del tema): el texto blanco y el panel de
     marca se leen siempre igual, en claro y en oscuro. */
  background: radial-gradient(120% 105% at 8% 0%, oklch(0.155 0.034 250) 0%, oklch(0.082 0.015 250) 46%, oklch(0.05 0.008 250) 100%);
}

.hero>.container,
.hero .hero__sticky>.container {
  width: 100%;
}

/* Capa de brillo esmeralda detrás del panel (da profundidad, reemplaza la foto). */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: radial-gradient(72% 68% at 82% 24%, oklch(0.34 0.062 178 / 0.42), transparent 60%);
}

/* Video de fondo: invisible hasta que carga un fotograma (entonces hace fundido).
   Si el archivo no existe, nunca aparece y queda la foto .hero__bg de respaldo. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
  pointer-events: none;
}

.hero__video.is-ready {
  opacity: 1;
}

/* Con el video activo, la composición flotante cede el protagonismo (se evita
   que dos "dashboards" compitan). Si el video falla, la composición sigue ahí. */
@media (min-width: 641px) {

  /* !important + animation:none para ganarle a la animación "reveal" que fija
     opacity:1 (las animaciones CSS tienen prioridad sobre las reglas normales). */
  .hero--video .hero__visual {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s var(--ease-out);
  }
}

@media (max-width: 640px) {
  .hero__video {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, oklch(0.045 0.006 250 / 0.93) 0%, oklch(0.05 0.006 250 / 0.8) 30%, oklch(0.05 0.006 250 / 0.42) 56%, oklch(0.05 0.006 250 / 0.12) 82%, oklch(0.05 0.006 250 / 0.02) 100%),
    radial-gradient(95% 85% at 6% 100%, oklch(0.5 0.092 178 / 0.24), transparent 55%),
    linear-gradient(0deg, oklch(0.045 0.006 250 / 0.55), transparent 30%);
}

/* En móvil/tablet el texto ocupa todo el ancho sobre la foto: oscurecido uniforme */
@media (max-width: 860px) {
  .hero::after {
    background:
      linear-gradient(180deg, oklch(0.05 0.006 250 / 0.74) 0%, oklch(0.05 0.006 250 / 0.82) 55%, oklch(0.045 0.006 250 / 0.95) 100%),
      radial-gradient(110% 60% at 50% 110%, oklch(0.5 0.092 178 / 0.22), transparent 60%);
  }
}

.hero__watermark {
  position: absolute;
  z-index: 0;
  right: clamp(1.2rem, 5vw, 4rem);
  bottom: clamp(1.2rem, 5vw, 3rem);
  width: clamp(96px, 14vw, 168px);
  opacity: 0.22;
  filter: drop-shadow(0 6px 16px oklch(0 0 0 / 0.45));
  pointer-events: none;
}

@media (min-width: 961px) {
  .hero__watermark {
    display: none;
  }
}

.hero__content {
  position: relative;
  max-width: 640px;
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

/* --- Composición 3D del hero (panel de activación + cajas flotando) --- */
@media (min-width: 961px) {

  .hero>.container,
  .hero .hero__sticky>.container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
  }
}

/* Composición 3D de marca: oculta en móvil (el texto ocupa todo el ancho), y visible
   en escritorio como segunda columna del hero (panel de activación + cajas flotando). */
.hero__visual {
  display: none;
}

@media (min-width: 961px) {
  .hero__visual {
    display: block;
  }
}

.hero__beam {
  position: absolute;
  width: 130%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(40% 36% at 58% 44%, oklch(0.72 0.132 178 / 0.5), transparent 70%);
  filter: blur(8px);
}

.hero__stage {
  position: relative;
  transform-style: preserve-3d;
  z-index: 1;
  width: min(410px, 100%);
}

.hero__panel {
  position: relative;
  z-index: 2;
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem;
  transform: rotateY(-15deg) rotateX(6deg);
  background: linear-gradient(160deg, oklch(0.21 0.02 250 / 0.92), oklch(0.115 0.014 250 / 0.96));
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: 0 34px 74px oklch(0 0 0 / 0.62), 0 0 0 1px oklch(0.7 0.128 178 / 0.12), inset 0 1px 0 oklch(1 0 0 / 0.1);
  animation: heroFloat 7s var(--ease-out-soft) infinite alternate;
  will-change: transform;
}

@keyframes heroFloat {
  from {
    transform: rotateY(-15deg) rotateX(6deg) translateY(6px);
  }

  to {
    transform: rotateY(-11deg) rotateX(4deg) translateY(-10px);
  }
}

.hp__top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.hp__app {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 13px;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}

.hp__app .brand-glyph {
  width: 2.7rem !important;
  height: 2.7rem !important;
  border-radius: 13px;
}

.hp__id {
  flex: 1;
  min-width: 0;
}

.hp__id b {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.hp__id span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
}

.hp__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  color: oklch(0.88 0.16 178);
  background: oklch(0.7 0.128 178 / 0.16);
  border: 1px solid oklch(0.7 0.128 178 / 0.3);
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-pill);
}

.hp__status svg {
  width: 0.85rem;
  height: 0.85rem;
}

.hp__bar {
  margin: 1.05rem 0 0.95rem;
  height: 7px;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.1);
  overflow: hidden;
}

.hp__bar>span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left;
  background: linear-gradient(90deg, oklch(0.6 0.11 178), oklch(0.82 0.15 178));
  box-shadow: 0 0 14px oklch(0.72 0.132 178 / 0.6);
  animation: hp-fill 1.6s var(--ease-out) 0.4s both;
}

@keyframes hp-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.hp__steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.hp__steps li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.82);
}

.hp__steps svg {
  width: 1rem;
  height: 1rem;
  color: oklch(0.82 0.15 178);
  flex: none;
}

.hp__key {
  margin-top: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  background: oklch(0 0 0 / 0.35);
  border: 1px solid oklch(1 0 0 / 0.08);
}

.hp__key span {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}

.hp__key code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hp__key svg {
  width: 1rem;
  height: 1rem;
  color: oklch(0.82 0.15 178);
  flex: none;
}

.hero__float {
  position: absolute;
  z-index: 1;
  width: 4.7rem;
  height: 4.7rem;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, oklch(0.22 0.02 250 / 0.9), oklch(0.12 0.015 250 / 0.94));
  border: 1px solid oklch(1 0 0 / 0.1);
  box-shadow: 0 18px 42px oklch(0 0 0 / 0.5);
}

.hero__float .brand-glyph {
  width: 2.6rem !important;
  height: 2.6rem !important;
  border-radius: 12px;
}

.hero__float--a {
  top: -2.3rem;
  right: -1.3rem;
  transform: rotateY(-15deg) translateZ(40px);
  animation: heroFloat2 6s var(--ease-out-soft) infinite alternate;
}

.hero__float--b {
  bottom: -2.1rem;
  left: -1.7rem;
  transform: rotateY(-15deg) translateZ(22px);
  animation: heroFloat2 6.6s var(--ease-out-soft) -2s infinite alternate;
}

@keyframes heroFloat2 {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -14px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero__panel,
  .hero__float {
    animation: none;
  }

  .hp__bar>span {
    animation: none;
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.4rem;
}

.hero__eyebrow .tp-stars {
  display: inline-flex;
  gap: 2px;
}

.hero__eyebrow .tp-stars i {
  width: 0.95rem;
  height: 0.95rem;
  color: #ffc24b;
}

.hero__eyebrow .tp-stars svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.hero__eyebrow b {
  color: #fff;
}

.hero h1 {
  font-size: clamp(1.72rem, 0.45rem + 4.7vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px oklch(0.1 0 0 / 0.35);
}

.hero h1 em {
  font-style: normal;
  position: relative;
  color: oklch(0.85 0.15 178);
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 0.085em;
  border-radius: 99px;
  background: linear-gradient(90deg, oklch(0.78 0.143 178), oklch(0.86 0.13 178));
  transform: scaleX(0);
  transform-origin: left;
  animation: hl-draw 0.85s var(--ease-out) 0.55s forwards;
}

@keyframes hl-draw {
  to {
    transform: scaleX(1);
  }
}

.hero__lede {
  margin-top: 1.3rem;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 50ch;
  line-height: 1.55;
}

.hero__cta {
  margin-top: 2.1rem;
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn--onphoto {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.btn--onphoto:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
}

.hero__trust {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.86);
}

.hero__trust svg {
  width: 1.05rem;
  height: 1.05rem;
  color: oklch(0.83 0.152 178);
}

@media (max-width: 640px) {
  .hero {
    min-height: clamp(420px, 82vh, 560px);
  }

  .hero__content {
    max-width: none;
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===================================================== MARCAS (strip) ======= */
.brandstrip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.brandstrip__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: 1.4rem;
  flex-wrap: wrap;
}

.brandstrip__label {
  font-size: 0.82rem;
  color: var(--ink-faint);
  max-width: 14ch;
  line-height: 1.35;
  font-weight: 500;
}

.brandstrip__logos {
  position: relative;
  flex: 1;
  min-width: 0;
  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);
}

.brandstrip__track {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  width: max-content;
  animation: bs-marquee 30s linear infinite;
}

.brandstrip__logos:hover .brandstrip__track {
  animation-play-state: paused;
}

@keyframes bs-marquee {
  to {
    transform: translateX(-50%);
  }
}

.brandstrip__logos .bl {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  filter: saturate(0.85);
  transition: filter var(--t), color var(--t);
}

.brandstrip__logos .bl:hover {
  filter: none;
  color: var(--ink);
}

.brandstrip__logos .bl .brand-glyph {
  box-shadow: inset 0 0 0 1px oklch(0.24 0.05 255 / 0.06);
}

/* Móvil: la leyenda encima del carrusel (compartir fila los estrujaba a ambos) */
@media (max-width: 640px) {
  .brandstrip__inner {
    padding-block: 1.1rem;
    gap: 0.7rem;
  }

  .brandstrip__label {
    flex-basis: 100%;
    max-width: none;
    text-align: center;
  }
}

/* =========================================================== BENTO ========== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: clamp(0.8rem, 1.4vw, 1.15rem);
}

.bento__tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t);
}

.bento__tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.bento__tile h3 {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.bento__tile p {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-top: 0.4rem;
}

.bento__tile .spacer {
  flex: 1;
}

/* Tile destacado: oferta/producto (ancho) */
.bento__tile--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.bt-offer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bt-offer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.bt-offer__top .badge {
  background: var(--brand-50);
  color: var(--brand-ink);
  border: none;
}

.bt-offer h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  margin-top: 1rem;
  line-height: 1.1;
}

.bt-offer__glyphwrap {
  margin: 1.25rem 0;
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
}

.bt-offer__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.bt-offer__price .now {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bt-offer__price .old {
  font-size: 1rem;
  color: var(--ink-faint);
  text-decoration: line-through;
}

.bt-offer__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
}

/* Tile de proceso (antes oscuro; ahora claro, coherente con la página blanca) */
.bento__tile--dark {
  background: linear-gradient(170deg, #fff, oklch(0.966 0.004 240));
  border-color: var(--border);
  color: var(--ink-body);
  grid-column: span 2;
  grid-row: span 2;
}

.bento__tile--dark h3 {
  color: var(--ink);
}

.bento__tile--dark p {
  color: var(--ink-muted);
}

.bt-mini {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.bt-mini .row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.bt-mini .row .d {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #1ed47e;
  box-shadow: 0 0 0 0 #1ed47e;
  animation: pulseDot 2.2s var(--ease-out) infinite;
}

.bt-mini .row.q .d {
  background: oklch(0.55 0.02 230);
  animation: none;
}

@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 oklch(0.78 0.143 178 / 0.5);
  }

  70% {
    box-shadow: 0 0 0 7px oklch(0.78 0.143 178 / 0);
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Tile verde (CTA WhatsApp) */
.bento__tile--green {
  background: var(--brand-strong);
  border-color: transparent;
  color: #fff;
}

.bento__tile--green h3 {
  color: #fff;
}

.bento__tile--green p {
  color: rgba(255, 255, 255, 0.9);
}

.bento__tile--green .wa-ic {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  margin-bottom: auto;
}

.bento__tile--green .wa-ic svg {
  width: 1.4rem;
  height: 1.4rem;
}

.bento__tile--green .go {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
}

.bento__tile--green .go svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--t);
}

.bento__tile--green:hover .go svg {
  transform: translateX(3px);
}

/* Tile proof (ancho, prueba integrada — NO números gigantes sueltos) */
.bento__tile--proof {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.bt-proof__fig {
  flex: none;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  position: relative;
}

.bt-proof__num {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bt-proof__txt b {
  color: var(--ink);
}

.bt-proof__flags {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

.bt-proof__flags span {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-muted);
}

/* Tile simple con micro-ilustración */
.bt-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-ink);
  margin-bottom: auto;
}

.bt-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

@media (max-width: 860px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__tile--feature,
  .bento__tile--proof {
    grid-column: span 2;
  }

  .bento__tile--feature {
    grid-row: auto;
  }

  .bento__tile--dark {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento__tile--feature,
  .bento__tile--proof,
  .bento__tile--dark {
    grid-column: auto;
    grid-row: auto;
  }

  .bento__tile--proof {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ====================================================== CATEGORÍAS =========== */
.cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1rem);
}

.cat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t), transform var(--t) var(--ease-out), box-shadow var(--t);
}

.cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.cat-tile .glyphrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-tile h4 {
  font-size: 1rem;
}

.cat-tile .cnt {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.cat-tile .arrow {
  color: var(--ink-faint);
  display: inline-flex;
  transition: color var(--t), transform var(--t);
}

.cat-tile:hover .arrow {
  color: var(--brand-ink);
  transform: translateX(2px);
}

.cat-tile .arrow svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* primera categoría destacada (rompe la uniformidad) */
.cat-tile--lead {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  background: var(--bg-subtle);
}

.cat-tile--lead .glyphrow {
  flex-direction: column;
  align-items: flex-start;
}

.cat-tile--lead .body {
  flex: 1;
}

.cat-tile--lead p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}

@media (max-width: 820px) {
  .cats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cat-tile--lead {
    grid-column: span 2;
  }
}

@media (max-width: 460px) {
  .cats {
    grid-template-columns: 1fr;
  }

  .cat-tile--lead {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ====================================================== PRODUCTOS ============ */
/* auto-fit (no auto-fill) colapsa las pistas vacías y, con un máximo fijo (no 1fr), las
   tarjetas no se estiran; justify-content:center centra la fila. Así 1-3 productos se ven
   intencionales (centrados) y muchos llenan y hacen wrap sin dejar huecos rotos. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 256px), 340px));
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Titular editorial (referencia Ari): grande, ligero y apretado */
.sec-head__t h2 {
  font-size: clamp(1.9rem, 1rem + 3.1vw, 3.9rem);
  font-weight: 360;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

/* :not(.sec-eyebrow): la ceja "— CATÁLOGO" es <p> pero va en verde (styles.css) */
.sec-head__t p:not(.sec-eyebrow) {
  color: var(--ink-muted);
  margin-top: 0.5rem;
  max-width: 48ch;
}

/* Variante centrada del encabezado de sección (usada en "Cómo funciona tu
   compra en vivo": título, ceja y bajada alineados al centro). */
.sec-head--center { justify-content: center; text-align: center; }
/* Columna centrada: así la ceja, el título y la bajada quedan al medio en el
   celular sin importar su display propio (la ceja "Proceso" es flex y no
   obedecía a text-align, por eso se veía pegada a la izquierda). En desktop con
   el tour 3D manda la rejilla editorial de hero3d.css (más específica); esto
   solo endereza el móvil. */
.sec-head--center .sec-head__t {
  width: 100%; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
}
.sec-head--center .sec-head__t p:not(.sec-eyebrow) { margin-inline: auto; }
.sec-head--center .sec-eyebrow { justify-content: center; }

/* ==================================================== CÓMO FUNCIONA ========== */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

.flow::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 7%;
  right: 7%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
  z-index: 0;
}

.flow__step {
  position: relative;
  z-index: 1;
}

.flow__num {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.flow__step:hover .flow__num {
  border-color: var(--brand);
  color: var(--brand-ink);
  background: var(--brand-50);
}

.flow__step h4 {
  font-size: 1.05rem;
}

.flow__step p {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 0.4rem;
  line-height: 1.5;
}

.flow__step .ic {
  color: var(--brand);
  margin-bottom: 0.6rem;
  display: inline-flex;
}

.flow__step .ic svg {
  width: 1.3rem;
  height: 1.3rem;
}

@media (max-width: 1080px) {
  .flow {
    grid-template-columns: repeat(3, 1fr);
  }

  .flow::before {
    display: none;
  }
}

@media (max-width: 820px) {
  .flow {
    grid-template-columns: 1fr 1fr;
  }
}

/* Móvil: cada paso en FILA (número a la izquierda, texto a la derecha).
   Los 5 pasos pasan de ~5 pantallas apiladas a una lista corta y escaneable. */
@media (max-width: 640px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .flow__step {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: start;
  }

  .flow__num {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.95rem;
    margin-bottom: 0;
    grid-row: 1 / span 2;
  }

  .flow__step .ic {
    display: none;
  }

  .flow__step h4 {
    grid-column: 2;
    align-self: center;
    font-size: 1rem;
  }

  .flow__step p {
    grid-column: 2;
    margin-top: 0.2rem;
  }
}

/* ====================================================== SOPORTE + CHAT ======= */
/* Centrado en una sola columna al medio (pedido del dueño), en móvil y web,
   igual que el apartado de Proceso: encabezado arriba y el chat debajo. */
.support2 {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 60rem;
  margin-inline: auto;
}

.support2__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* La ceja "SOPORTE REAL" en verde de marca: la regla genérica .support2__copy p
   (más específica que .sec-eyebrow) la teñía de gris. */
.support2__copy .sec-eyebrow { color: oklch(0.55 0.101 178); justify-content: center; }

.support2__copy h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  letter-spacing: -0.025em;
}

.support2__copy p {
  color: var(--ink-muted);
  margin-top: 1rem;
  font-size: 1.05rem;
  max-width: 46ch;
  margin-inline: auto;
}

/* La lista de garantías se centra como bloque, pero cada ítem mantiene su
   texto alineado a la izquierda para que se lea cómodo. */
.support2__list { text-align: left; }
.support2__cta { display: flex; justify-content: center; }
.chat { width: 100%; max-width: 34rem; margin-inline: auto; }

.support2__list {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.support2__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  color: var(--ink-body);
}

.support2__list li svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand);
  flex: none;
  margin-top: 0.1rem;
}

.support2__cta {
  margin-top: 1.9rem;
}

.chat {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.85rem);
  box-shadow: var(--shadow-sm);
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}

.chat__head .av {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  object-fit: cover;
}

.chat__head .av svg {
  width: 1.25rem;
  height: 1.25rem;
}

.chat__head b {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
}

.chat__head span {
  font-size: 0.8rem;
  color: var(--brand-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chat__head span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand);
}

.chat__thread {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.chat__b {
  max-width: 82%;
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.45;
  border-radius: 1.1rem;
}

.chat__b--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-body);
  border-bottom-left-radius: 0.3rem;
}

.chat__b--out {
  align-self: flex-end;
  background: var(--brand-strong);
  color: #fff;
  border-bottom-right-radius: 0.3rem;
}

.chat__b--ok {
  align-self: flex-end;
  background: var(--brand-50);
  color: var(--brand-ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid color-mix(in oklch, var(--brand) 25%, transparent);
}

.chat__b--ok svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Honestidad: la conversación es una ilustración y se declara como tal */
.chat__example {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
}

/* (En móvil ya no se invierte el orden: el encabezado va arriba y el chat
   debajo, coherente con el centrado en una sola columna.) */

/* ---- Chat en vivo: la conversación se reproduce sola, como asistencia real --- */
.chat__thread {
  min-height: clamp(12.5rem, 30vh, 16rem);
  justify-content: flex-end;
}

.chat__b {
  opacity: 0;
  transform: translateY(9px) scale(0.985);
  transform-origin: bottom left;
  animation: chatIn 0.34s var(--ease-out) forwards;
}

.chat__b--out,
.chat__b--ok {
  transform-origin: bottom right;
}

@keyframes chatIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.chat__typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  border-bottom-left-radius: 0.3rem;
  opacity: 0;
  animation: chatIn 0.22s var(--ease-out) forwards;
}

.chat__typing--out {
  align-self: flex-end;
  background: var(--brand-strong);
  border-color: transparent;
  border-bottom-left-radius: 1.1rem;
  border-bottom-right-radius: 0.3rem;
}

.chat__typing i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: chatDot 1.1s infinite ease-in-out;
}

.chat__typing--out i {
  background: rgba(255, 255, 255, 0.9);
}

.chat__typing i:nth-child(2) {
  animation-delay: 0.16s;
}

.chat__typing i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes chatDot {

  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  35% {
    transform: translateY(-0.3rem);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat__b {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .chat__typing i {
    animation: none;
  }
}

/* ============================================ DEMO: compra en vivo (web) === */
.demo {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Demo protagonista: una sola columna con la tarjeta centrada y un ancho
   contenido. Los 5 pasos van ARRIBA en fila (clicables para volver o saltar
   a cualquier paso, pedido del dueño 23-jul-2026). */
.demo--center { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; }
.demo--center .demo__steps {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem clamp(0.9rem, 2.5vw, 1.6rem);
  position: static;
  margin-bottom: 0.35rem;
}
/* En fila no aplica la línea vertical que conecta los pasos de la barra lateral */
.demo--center .demo-step:not(:last-child)::after { display: none; }

.demo__steps {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 6rem;
}

.demo-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0;
}

.demo-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.4rem;
  bottom: -0.25rem;
  width: 2px;
  background: var(--border-strong);
  transition: background-color 0.5s var(--ease-out) 0.15s;
}

.demo-step__n {
  z-index: 1;
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.92rem;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  color: var(--ink-muted);
  transition: border-color var(--t), background-color var(--t), color var(--t), box-shadow var(--t);
}

.demo-step__n svg {
  width: 1.05rem;
  height: 1.05rem;
}

.demo-step__k {
  font-weight: 600;
  color: var(--ink-muted);
  transition: color var(--t);
}

.demo-step.is-active .demo-step__n {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand-ink);
  box-shadow: 0 0 0 4px var(--brand-50);
  animation: stepPopA 0.5s var(--ease-out), stepPulse 2.2s var(--ease-out) 0.7s infinite;
}

.demo-step.is-active .demo-step__k {
  color: var(--ink);
}

.demo-step.is-done .demo-step__n {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  animation: stepPopB 0.45s var(--ease-out);
}

@keyframes stepPopA {
  0% {
    transform: scale(0.72);
  }

  55% {
    transform: scale(1.14);
  }

  100% {
    transform: none;
  }
}

@keyframes stepPopB {
  0% {
    transform: scale(0.72);
  }

  55% {
    transform: scale(1.14);
  }

  100% {
    transform: none;
  }
}

@keyframes stepPulse {
  0% {
    box-shadow: 0 0 0 4px var(--brand-50), 0 0 0 4px color-mix(in oklch, var(--brand) 35%, transparent);
  }

  60% {
    box-shadow: 0 0 0 4px var(--brand-50), 0 0 0 11px transparent;
  }

  100% {
    box-shadow: 0 0 0 4px var(--brand-50), 0 0 0 0 transparent;
  }
}

.demo-step.is-done .demo-step__k {
  color: var(--ink-body);
}

.demo-step.is-done:not(:last-child)::after {
  background: var(--brand);
}

.demo__stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.demo__app {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.demo__chrome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.65rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.demo__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-strong);
}

.demo__logo {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
}

/* Barra de tiempo de la pantalla en curso (avanza mientras dura el paso) */
.demo__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1;
  pointer-events: none;
}

.demo__safe {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.demo__safe svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
}

.demo__screen {
  position: relative;
  min-height: 360px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  align-content: center;
}

.dsc {
  animation: scIn 0.4s var(--ease-out) both;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.dsc--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.9rem;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

/* Entrada en cascada: cada elemento de la pantalla aparece uno tras otro */
.dsc>* {
  animation: scIn 0.5s var(--ease-out) both;
}

.dsc> :nth-child(2) {
  animation-delay: 90ms;
}

.dsc> :nth-child(3) {
  animation-delay: 180ms;
}

.dsc> :nth-child(4) {
  animation-delay: 270ms;
}

.dsc> :nth-child(5) {
  animation-delay: 360ms;
}

.dsc> :nth-child(6) {
  animation-delay: 450ms;
}

.dsc> :nth-child(7) {
  animation-delay: 540ms;
}

.dsc>.dsc-spin {
  animation: spin 0.8s linear infinite;
}

/* "Clic" simulado sobre el botón justo antes de pasar de pantalla */
.dsc .dsc-press.is-tapped {
  animation: tapPress 0.42s var(--ease-out) both;
}

@keyframes tapPress {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(0.94);
  }

  100% {
    transform: scale(1);
  }
}

.dsc h4 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.dsc-mut {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 40ch;
}

.dsc--center .dsc-mut {
  margin-inline: auto;
}

.dsc--prod {
  align-items: center;
  text-align: center;
}

.dsc-prod__media {
  display: grid;
  place-items: center;
}

.dsc-prod__img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--r);
}

.dsc-tag {
  align-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand-strong);
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
}

.dsc-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  justify-content: center;
}

.dsc-price b {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
}

.dsc-price s {
  color: var(--ink-faint);
}

.dsc-press {
  margin-top: 0.4rem;
  max-width: 320px;
  align-self: center;
  animation: scIn 0.5s var(--ease-out) both, press 1.5s var(--ease-out) 0.8s infinite;
}

@keyframes press {

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand) 45%, transparent);
  }

  55% {
    box-shadow: 0 0 0 9px transparent;
  }
}

.dsc-h {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--ink);
}

.dsc-h svg {
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}

.dsc-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.dsc-sum b {
  font-size: 1.1rem;
}

.dsc-pm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--brand);
  border-radius: var(--r);
  font-weight: 600;
  background: var(--brand-50);
  color: var(--ink);
}

.dsc-pm svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--brand-ink);
}

.dsc-pm-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dsc-pm-row span {
  font-size: 0.78rem;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
}

.dsc-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.dsc-secure svg {
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}

.dsc-spin {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}

/* Puntos suspensivos animados de "Procesando tu pago..." */
.dsc-ell i {
  font-style: normal;
  animation: ellBlink 1.2s infinite;
}

.dsc-ell i:nth-child(2) {
  animation-delay: 0.2s;
}

.dsc-ell i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ellBlink {

  0%,
  100% {
    opacity: 0.15;
  }

  40% {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.dsc-prog {
  width: min(260px, 80%);
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.dsc-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  border-radius: inherit;
  animation: prog 1.6s var(--ease-out) forwards;
}

@keyframes prog {
  to {
    width: 100%;
  }
}

.dsc-check {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.dsc-check svg {
  width: 2.3rem;
  height: 2.3rem;
}

.dsc-check.ok {
  background: var(--brand-50);
  color: var(--brand);
  animation: pop 0.4s var(--ease-out) both, ringOut 0.9s var(--ease-out) 0.35s;
}

@keyframes ringOut {
  from {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand) 40%, transparent);
  }

  to {
    box-shadow: 0 0 0 20px transparent;
  }
}

.dsc-check.soft {
  background: var(--surface-2);
  color: var(--brand-ink);
}

.dsc-check.big {
  width: 4.8rem;
  height: 4.8rem;
}

.dsc-check.big svg {
  width: 2.8rem;
  height: 2.8rem;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.dsc-deliver {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Check minimalista junto a "Tu licencia está disponible" (reemplaza al chip
   "🎉 Listo", pedido del dueño 23-jul-2026: coherente con el resto, sin pill). */
.dsc-deliver__ok { display: inline-grid; place-items: center; color: var(--brand-ink); }
.dsc-deliver__ok svg { width: 1.35rem; height: 1.35rem; }

.dsc-lic {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border: 1px dashed color-mix(in oklch, var(--brand) 35%, var(--border));
  border-radius: var(--r);
}

.dsc-lic span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.dsc-lic code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsc-lic svg {
  width: 1rem;
  height: 1rem;
  color: var(--ink-faint);
}

.dsc-steps__t {
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.dsc-steps {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--ink-body);
}

.dsc-help {
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.dsc--win .dsc-win__tags {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.3rem;
}

.dsc-win__tags span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-50);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.8rem;
}

.dsc-win__tags svg {
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}

/* Pasos clicables: cada paso es un botón para volver/saltar en la demo */
.demo-step {
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.demo-step:hover .demo-step__n {
  border-color: var(--brand);
  color: var(--brand-ink);
}

.demo-step:hover .demo-step__k {
  color: var(--ink);
}

.demo-step:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: var(--ring);
}

/* Botonera fiel de la ficha (Comprar por WhatsApp / Pagar ahora / Agregar) */
.dsc-wbtn {
  max-width: 340px;
  width: 100%;
  align-self: center;
}

.dsc-btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  max-width: 340px;
  align-self: center;
}

.dsc-btnrow .dsc-press {
  margin-top: 0;
  max-width: none;
}

/* Réplica del modal "¿Cómo quieres completar tu compra?" (cuenta o invitado) */
.dsc--co {
  gap: 0.6rem;
  text-align: left;
}

.dsc--co h4 {
  text-align: center;
  font-size: 1.08rem;
}

.dsc-co {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.45rem;
}

.dsc-co--rec {
  border-color: color-mix(in oklch, var(--brand) 45%, var(--border));
  box-shadow: 0 0 0 3px var(--brand-50);
}

.dsc-co__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
}

.dsc-co__head svg {
  width: 1rem;
  height: 1rem;
  color: var(--brand-ink);
  flex: none;
}

.dsc-co__badge {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-ink);
  background: var(--brand-50);
  border-radius: var(--r-pill);
  padding: 0.16rem 0.5rem;
  margin-left: auto;
}

.dsc-co p {
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 0;
}

.dsc-co .btn {
  padding-block: 0.55rem;
  font-size: 0.86rem;
}

.dsc-co__input {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 0.5rem 0.7rem;
  font-size: 0.86rem;
  color: var(--ink);
  min-height: 2.35rem;
}

/* El correo del invitado se escribe solo, con cursor (como la tarjeta) */
.co-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 16ch;
  border-right: 2px solid var(--brand);
  padding-right: 2px;
  animation: coType 1.2s steps(16) 0.6s both, iziCaret 0.8s step-end infinite;
}

@keyframes coType {
  from {
    max-width: 0;
  }

  to {
    max-width: 16ch;
  }
}

/* Réplica del modal "Completa tu pago" (resumen + total + botón Pagar) */
.dsc-paysum {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 0.75rem 0.9rem;
  display: grid;
  gap: 0.55rem;
}

.dsc-paysum__line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.dsc-paysum__line>span:not(.dsc-paysum__thumb) {
  flex: 1;
}

.dsc-paysum__thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}

.dsc-paysum__thumb--glyph {
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
}

.dsc-paysum__total {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed var(--border);
  padding-top: 0.55rem;
  font-weight: 700;
}

.dsc-gwmeta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
}

.dsc-gwmeta svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
  flex: none;
}

/* Réplica de la pantalla real de éxito (comprobante + qué sigue) */
.dsc--ok .dsc-check {
  align-self: center;
  width: 3.2rem;
  height: 3.2rem;
}

.dsc--ok .dsc-check svg {
  width: 1.9rem;
  height: 1.9rem;
}

.dsc-paysum__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.2rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.55rem;
}

.dsc-paysum__meta>div {
  display: grid;
  gap: 0.06rem;
}

.dsc-paysum__meta i {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dsc-paysum__meta b {
  font-size: 0.82rem;
  color: var(--ink);
}

.dsc-next {
  display: grid;
  gap: 0.42rem;
  padding-inline: 0.15rem;
}

.dsc-next>span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.dsc-next svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}

.dsc-next .is-done {
  color: var(--ink-body);
}

.dsc-next .is-done svg {
  color: var(--brand);
}

.dsc-next .is-now {
  color: var(--ink);
  font-weight: 600;
}

.dsc-next u {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  margin-inline: 0.2rem;
  animation: payDotDemo 1.4s var(--ease-out) infinite;
}

@keyframes payDotDemo {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Réplica visual del formulario de pago de Izipay (paso "Pagas") */
.dsc--izi {
  gap: 0.55rem;
}

.izi-brands {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.izi-brands>span {
  margin-right: 0.2rem;
}

.izb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  font-style: normal;
}

.izb--visa {
  color: #1a1f71;
  font-style: italic;
}

.izb--mc u {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: #eb001b;
}

.izb--mc u+u {
  background: #f79e1b;
  margin-left: -0.32rem;
  opacity: 0.9;
}

.izb--amex {
  background: #1f72cd;
  border-color: #1f72cd;
  color: #fff;
}

.izb--dc {
  color: #0079be;
}

.izi-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.88rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.izi-field .ph {
  color: var(--ink-faint);
}

.izi-field svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ink-faint);
  flex: none;
}

/* El número de tarjeta se "escribe" solo, con cursor parpadeando */
.izi-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 19ch;
  font-family: var(--font-mono);
  font-size: 0.92em;
  border-right: 2px solid var(--brand);
  padding-right: 2px;
  animation: iziType 1.15s steps(19) 0.45s both, iziCaret 0.8s step-end infinite;
}

@keyframes iziType {
  from {
    max-width: 0;
  }

  to {
    max-width: 19ch;
  }
}

@keyframes iziCaret {
  50% {
    border-right-color: transparent;
  }
}

.izi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.izi-pay {
  margin-top: 0.2rem;
  padding: 0.78rem 1rem;
  border: 0;
  border-radius: 8px;
  background: #2bd3c6;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter var(--t);
}

.izi-pay:hover {
  filter: brightness(0.96);
}

.demo__controls {
  display: flex;
  gap: 0.7rem;
}

.demo__controls button[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .demo {
    grid-template-columns: 1fr;
  }

  .demo__steps {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    position: static;
  }

  .demo-step {
    padding: 0.25rem 0;
  }

  .demo-step:not(:last-child)::after {
    display: none;
  }

  .demo__screen {
    min-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dsc,
  .dsc>*,
  .dsc-check.ok,
  .dsc-press,
  .dsc .dsc-press.is-tapped,
  .dsc-ell i,
  .demo-step.is-active .demo-step__n,
  .demo-step.is-done .demo-step__n {
    animation: none;
  }

  .dsc-prog i {
    width: 100%;
    animation: none;
  }

  .izi-type {
    animation: none;
    border-right: 0;
  }

  .co-type {
    animation: none;
    border-right: 0;
  }

  .dsc-next u {
    animation: none;
  }

  .demo__timer {
    display: none;
  }

  .demo-step:not(:last-child)::after,
  .demo-step__n {
    transition: none;
  }
}

/* ==================================== FAQ home (centrada, 1 columna) === */
/* Centrada al medio (pedido del dueño), en móvil y web, como el apartado de
   Proceso: encabezado + tarjeta de ayuda arriba, y las preguntas debajo. */
.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 52rem;
  margin-inline: auto;
}

.faq-aside {
  position: static;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* La ceja "DUDAS" en verde de marca: la regla genérica .faq-aside>p (más
   específica que .sec-eyebrow) la teñía de gris. */
.faq-aside .sec-eyebrow { color: oklch(0.55 0.101 178); justify-content: center; }

.faq-aside h2 {
  text-wrap: balance;
  margin-bottom: 0.65rem;
}

.faq-aside>p {
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto 1.6rem;
}

/* La tarjeta "¿Te queda otra duda?" mantiene su interior alineado a la izq. */
.faq-help { text-align: center; width: 100%; max-width: 32rem; }
.faq { width: 100%; }

.faq-help {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
}

.faq-help__av {
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
}

.faq-help__av svg {
  width: 1.35rem;
  height: 1.35rem;
}

.faq-help__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.faq-help__body b {
  color: var(--ink);
  font-size: 1.02rem;
}

.faq-help__body>span {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.faq-help .btn {
  margin-top: 0.45rem;
}

.faq-help__note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand-ink);
}

.faq-help__note svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand);
  flex: none;
}

.faq-layout .faq {
  max-width: none;
  gap: 0.65rem;
}

.faq-layout .faq summary {
  transition: color var(--t);
}

.faq-layout .faq summary:hover {
  color: var(--brand-ink);
}

.faq-layout .faq summary:hover .chev {
  background: var(--brand-50);
  color: var(--brand-ink);
}

.faq-layout .faq details[open] {
  background: var(--surface-2);
}

@media (max-width: 860px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .faq-aside {
    position: static;
  }

  .faq-aside>p {
    max-width: none;
  }
}

/* ========================================================== CTA ============== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--brand-strong);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  color: #fff;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  align-items: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 100% at 100% 50%, #000, transparent 70%);
  mask-image: radial-gradient(80% 100% at 100% 50%, #000, transparent 70%);
}

.cta-band>* {
  position: relative;
}

.cta-band h2 {
  color: #fff;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
  letter-spacing: -0.025em;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.9rem;
  max-width: 44ch;
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: stretch;
}

.cta-band .btn--secondary {
  --btn-bg: #fff;
  --btn-bd: #fff;
  --btn-fg: var(--brand-strong);
}

.cta-band .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {
  .cta-band {
    grid-template-columns: 1fr;
  }
}

/* ===================================================== entrada sutil ========= */
.reveal {
  opacity: 0;
  animation: reveal-up 0.7s var(--ease-out) forwards;
}

.reveal.d1 {
  animation-delay: 0.04s;
}

.reveal.d2 {
  animation-delay: 0.1s;
}

.reveal.d3 {
  animation-delay: 0.16s;
}

.reveal.d4 {
  animation-delay: 0.22s;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    animation: none;
  }

  .hero h1 .mark .underline path {
    stroke-dashoffset: 0;
    animation: none;
  }

  .actpanel__status .bar>span {
    width: 100%;
    animation: none;
  }

  .actpanel__status .st {
    opacity: 1;
    animation: none;
  }

  .bt-mini .row .d {
    animation: none;
  }
}

/* ============================================ PREMIUM: refinamiento + scroll === */

/* Aparición al hacer scroll (la activa motion() añadiendo .has-reveal al <html>).
   Sin JS o con movimiento reducido, el contenido se ve por defecto. */
.has-reveal .r-up {
  transform: translateY(22px);
}

.has-reveal .r-up.is-in {
  transform: none;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

/* Cifra grande con conteo ascendente (comparte la tipografía display) */
.bt-proof__big {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Tile destacado (oferta): tinte de marca plano y sutil, sin resplandores */
.bento__tile--feature {
  background: color-mix(in oklch, var(--brand) 4%, var(--surface));
}

.bt-offer__top .badge {
  box-shadow: var(--shadow-xs);
}

/* El icono de categoría reacciona al hover de su tarjeta */
.cat-tile:hover .icon-tile {
  transform: translateY(-2px) scale(1.04);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.25), var(--shadow-sm);
}

/* CTA final con un poco más de profundidad */
.cta-band {
  box-shadow: var(--shadow-lg), inset 0 1px 0 oklch(1 0 0 / 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    animation: none;
    transform: scale(1.04);
  }

  .hero h1 em::after {
    animation: none;
    transform: scaleX(1);
  }

  .brandstrip__track {
    animation: none;
    flex-wrap: wrap;
  }

  .has-reveal .r-up {
    transform: none;
  }
}
/* ============================================ VITRINA PROTAGONISTA ========== */
/* La sección "Nuestros productos" a lo grande (pedido del dueño, 20-jul-2026):
   título centrado, estuches más grandes tipo hero, aire generoso y el enlace
   al catálogo centrado al final, debajo del "Comprar ahora" de la vitrina. */
.deck-hero {
  /* Padding superior CORTO: esta sección llega solapándose sobre el hero en
     relevo (hero3d.css) y un padding alto dejaba un tramo blanco feo entre
     ambos, en escritorio y en celular (20-jul-2026). El de abajo sigue amplio. */
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(3.5rem, 8vw, 6.5rem);
}

.deck-hero__head {
  justify-content: center;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.deck-hero__head .sec-head__t {
  display: grid;
  justify-items: center;
}

/* La ceja "— Catálogo" centra su rayita junto al texto */
.deck-hero__head .sec-eyebrow {
  justify-content: center;
}

.deck-hero__head .sec-head__t p:not(.sec-eyebrow) {
  margin-inline: auto;
  max-width: 52ch;
}

/* Estuches a escala protagonista (el carrusel general vive en commerce.css) */
.deck-hero .deck__stage {
  --deck-box: clamp(150px, 21vw, 250px);
  height: calc(var(--deck-box) + 4rem);
}

.deck-hero .deck__info {
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.deck-hero__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* =============================================================================
   RESEÑAS / TESTIMONIOS (portada) — reseñas REALES editables desde el panel.
   La sección nace con [hidden]; home.js la muestra solo si hay reseñas.
   ============================================================================= */
/* Seguro anti-sección-vacía: mientras no haya reseñas, la sección no se pinta. */
#sec-testimonials[hidden] {
  display: none;
}
/* Las estrellas (.rstars) y la insignia (.trustbadge) viven en chrome.css:
   la insignia va en el pie, que es compartido por todas las páginas. */

/* ---- Resumen: nota media calculada de las reseñas publicadas ------------- */
.revsum {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  margin-top: clamp(1.2rem, 3vw, 1.9rem);
}
.revsum__word {
  margin: 0;
  font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.revsum__base {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.revsum__base b {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.revsum__by {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.revsum__seal {
  display: inline-flex;
  color: var(--brand);
}
.revsum__seal svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---- Carrusel de reseñas (se arrastra con el dedo y con las flechas) ----- */
.revcar {
  position: relative;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.revcar__track {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.35rem 0.25rem 0.9rem;
  scrollbar-width: none;
}
.revcar__track::-webkit-scrollbar {
  display: none;
}
.revcar__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: background-color var(--t), color var(--t), border-color var(--t), opacity var(--t);
}
.revcar__nav:hover {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.revcar__nav[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
.revcar__nav svg {
  width: 1.25rem;
  height: 1.25rem;
}
/* Escritorio: las flechas tienen carril propio a los lados, así nunca tapan el
   texto de la primera ni de la última tarjeta. */
.revcar__nav--prev { left: 0; }
.revcar__nav--next { right: 0; }
@media (min-width: 641px) {
  .revcar { padding-inline: 3rem; }
}
/* Móvil: manda el dedo (las tarjetas cortadas ya avisan que hay más). */
@media (max-width: 640px) {
  .revcar__nav { display: none; }
}

/* ---- Tarjeta de reseña --------------------------------------------------- */
.rcard {
  flex: 0 0 min(82vw, 17.5rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: clamp(1.05rem, 2vw, 1.35rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.rcard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--brand) 35%, var(--border));
  box-shadow: 0 14px 34px -18px color-mix(in oklch, var(--brand) 45%, transparent);
}
.rcard__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.rcard__avatar {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(140deg, var(--brand), color-mix(in oklch, var(--brand) 55%, #1f7a52));
}
.rcard__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.rcard__id b {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcard__date {
  font-size: 0.8rem;
  color: color-mix(in oklch, var(--ink) 55%, transparent);
}
.rcard__check {
  margin-left: auto;
  display: inline-flex;
  color: var(--brand);
}
.rcard__check svg {
  width: 1.2rem;
  height: 1.2rem;
}
.rcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}
.rcard__title {
  font-weight: 700;
  color: var(--ink-strong);
}
/* Recorte a 2 líneas hasta que el visitante pulse "Leer más" */
.rcard__body.is-clamped .rcard__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard__more {
  align-self: flex-start;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand-ink);
}
.rcard__more:hover {
  text-decoration: underline;
}
.rcard__sub {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: color-mix(in oklch, var(--ink) 55%, transparent);
}

/* =============================================================================
   MARCAS — tira del software cuyas licencias se venden
   Uso NOMINATIVO de marca: mostrar el logo de un producto para identificar lo
   que vendes es legítimo. Lo que NO lo es (y por eso no está aquí) es cualquier
   sello de "partner", "distribuidor autorizado" o certificación que no se
   tenga firmada. Ese tipo de sello es motivo habitual de cierre de cuenta en
   las pasarelas de pago, además de uso indebido de marca.
   ============================================================================= */
.brands {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.brands__eyebrow {
  justify-content: center;
}

.brands__title {
  text-align: center;
  margin: 0.6rem auto 2rem;
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  letter-spacing: -0.02em;
}

.brands__title em {
  font-style: normal;
  color: var(--brand-ink);
}

.brands__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1.1rem);
}

.brands__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.brands__item:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.brands__item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.brands__item span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
}

.brands__legal {
  margin: 1.6rem auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .brands__item:hover {
    transform: none;
  }
}