/* =============================================================================
   Vault Solutions — 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 91) 0%, oklch(0.082 0.015 91) 46%, oklch(0.05 0.008 91) 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.10 91 / 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 91 / 0.93) 0%, oklch(0.05 0.006 91 / 0.8) 30%, oklch(0.05 0.006 91 / 0.42) 56%, oklch(0.05 0.006 91 / 0.12) 82%, oklch(0.05 0.006 91 / 0.02) 100%),
    radial-gradient(95% 85% at 6% 100%, oklch(0.5 0.15 91 / 0.24), transparent 55%),
    linear-gradient(0deg, oklch(0.045 0.006 91 / 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 91 / 0.74) 0%, oklch(0.05 0.006 91 / 0.82) 55%, oklch(0.045 0.006 91 / 0.95) 100%),
      radial-gradient(110% 60% at 50% 110%, oklch(0.5 0.15 91 / 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.18 91 / 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 91 / 0.92), oklch(0.115 0.014 91 / 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.16 91 / 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 91);
  background: oklch(0.7 0.16 91 / 0.16);
  border: 1px solid oklch(0.7 0.16 91 / 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.16 91), oklch(0.82 0.17 91));
  box-shadow: 0 0 14px oklch(0.72 0.16 91 / 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.16 91);
  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);
}

/* min-width:0 + recorte con puntos suspensivos, igual que sus dos gemelas
   (.lic-card__key code y .pd-lic__key code en liccard.css). Sin esto, un
   elemento flexible no se encoge por debajo de su contenido: con la letra del
   sistema en grande la clave empujaba el escudo fuera del panel del hero.
   (29-jul-2026) */
.hp__key code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp__key svg {
  width: 1rem;
  height: 1rem;
  color: oklch(0.82 0.16 91);
  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 91 / 0.9), oklch(0.12 0.015 91 / 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 94);
}

.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.17 91), oklch(0.86 0.13 97));
  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.16 91);
}

@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 0 / 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 0 ));
  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: #e0ab00;
  box-shadow: 0 0 0 0 #e0ab00;
  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.18 91 / 0.5);
  }

  70% {
    box-shadow: 0 0 0 7px oklch(0.78 0.18 91 / 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;
  }
}

/* ========================================================== CÓMO PAGAR ======= */
/* Dos columnas: el panel de la pasarela con las tarjetas aceptadas y, al lado,
   por qué el pago es seguro + la salida por WhatsApp. Las marcas (.paymark) las
   dibuja icons.js y su tarjetita blanca vive en commerce.css. */
/* minmax(0, …): las columnas se reparten el ancho disponible y NO se estiran
   hasta el elemento más ancho de dentro (los logos de tarjetas, el sello de la
   pasarela). Con `1.15fr 0.85fr` a secas, el apartado entero se salía. */
.paysec {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: start;
  max-width: 78rem;
  margin-inline: auto;
}

.paysec > * {
  min-width: 0;
}

/* ---- Panel de la pasarela ---- */
.paypanel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.paypanel__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border);
}

/* Tarjetita dibujada del encabezado: se inclina y levanta al pasar el cursor */
.paycard3d {
  display: block;
  width: 3.3rem;
  flex: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 5px 10px oklch(0.45 0.13 91 / 0.32));
  transition: transform var(--t-slow) var(--ease-out);
}

.paycard3d svg {
  display: block;
  width: 100%;
  height: auto;
}

.paypanel:hover .paycard3d {
  transform: rotate(-2deg) translateY(-3px) scale(1.04);
}

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

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

.paypanel__id span {
  font-size: 0.86rem;
  color: var(--ink-muted);
}

/* ---- Sello animado de la pasarela -----------------------------------------
   Bucle de 6 s: pasa un destello (la tarjeta leyéndose) y el sello cambia de
   "Procesado por izipay" a un "Pago realizado" en verde, y vuelve. Las dos
   caras se apilan en la MISMA celda de la rejilla, así el sello no cambia de
   tamaño ni empuja nada al alternar. */
.paygw {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  flex: none;
  animation: gwPiel 6s var(--ease-out) infinite;
}

.paygw__face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.paygw__face--gw {
  animation: gwCaraSello 6s var(--ease-out) infinite;
}

.paygw__face--ok {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-ink);
  opacity: 0;
  animation: gwCaraOk 6s var(--ease-out) infinite;
}

.paygw__face--ok svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.paygw .paymark {
  width: 3.5rem;
  height: 2.1rem;
}

.paygw small {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  /* --ink-muted y NO --ink-faint (13-ago-2026). Este sello lleva encima la
     animación `gwPiel`, que le enciende el fondo con un dorado cada 6 s. Contra
     ese fondo encendido el gris tenue caía a 4.15:1 —por debajo del mínimo de
     4.5— justo en el momento en que más se mira. El contraste hay que medirlo
     en el peor fotograma de la animación, no en el estado de reposo. */
  color: var(--ink-muted);
}

/* La tarjeta que cruza el sello, como al pasarla por el datáfono.
   Se anima `left` (y no transform) a propósito: el porcentaje es del ancho del
   sello, así cruza igual de bien el sello angosto del escritorio que el de
   ancho completo del celular, sin recalcular distancias. */
.paygw__swipe {
  position: absolute;
  top: 50%;
  left: -2.2rem;
  width: 1.7rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  border-radius: 3px;
  pointer-events: none;
  transform: rotate(-7deg);
  background: linear-gradient(150deg, #bfa205, #5d4c00);
  box-shadow: 0 2px 6px oklch(0.45 0.13 91 / 0.45);
  animation: gwPasada 6s var(--ease-out-soft) infinite;
}

/* Chip dorado y banda: a este tamaño es lo que la vuelve "una tarjeta" */
.paygw__swipe::before {
  content: "";
  position: absolute;
  left: 0.24rem;
  top: 0.38rem;
  width: 0.36rem;
  height: 0.28rem;
  border-radius: 1px;
  background: linear-gradient(180deg, #ffdd85, #dda037);
}

.paygw__swipe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.14rem;
  height: 0.2rem;
  background: #302701;
  opacity: 0.5;
}

/* Guion del bucle (6 s), pensado para que la tarjeta nunca pise el texto:
   0–10%  el sello dice "Procesado por izipay"
   10–16% ese texto se retira
   14–34% la tarjeta cruza el sello vacío
   36–42% el sello se pone verde y confirma "Pago realizado"
   42–84% se queda ahí (lo que el visitante alcanza a leer)
   84–100% vuelve al principio */
@keyframes gwPasada {
  0%, 12% {
    left: -2.2rem;
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  32% {
    left: 100%;
    opacity: 1;
  }

  36%, 100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes gwCaraSello {
  0%, 10% {
    opacity: 1;
    transform: translateY(0);
  }

  16%, 84% {
    opacity: 0;
    transform: translateY(-0.45rem);
  }

  92%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gwCaraOk {
  0%, 36% {
    opacity: 0;
    transform: translateY(0.45rem);
  }

  43%, 84% {
    opacity: 1;
    transform: translateY(0);
  }

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

@keyframes gwPiel {
  0%, 36% {
    background: var(--surface-2);
    border-color: var(--border);
  }

  43%, 84% {
    background: var(--brand-50);
    border-color: color-mix(in oklch, var(--brand) 45%, transparent);
  }

  92%, 100% {
    background: var(--surface-2);
    border-color: var(--border);
  }
}

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

.paypanel__label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Las tarjetas se muestran más grandes aquí que en el pie o el modal: es el
   apartado donde el visitante viene justamente a mirarlas. */
.paypanel__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.paypanel__marks .paymark {
  width: 4.4rem;
  height: 2.75rem;
  padding: 0.3rem 0.42rem;
  border-radius: 8px;
}

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

.paypanel__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: var(--ink-body);
  line-height: 1.5;
}

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

.paypanel__facts svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--brand);
  flex: none;
  margin-top: 0.15rem;
}

.paypanel__cta {
  align-self: flex-start;
}

/* ---- Columna derecha: confianza + WhatsApp ---- */
.paysec__side {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.5rem);
}

.paytrust {
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
}

.paytrust h3 {
  font-size: 1.08rem;
  margin-bottom: 1.1rem;
}

.paytrust__list {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.paytrust__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Pastilla con relieve (no el cuadrado plano de antes): degradado, filo de luz
   arriba, aro dorado tenue y sombra propia. Se levanta al pasar por la fila. */
.paytrust__ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in oklch, var(--brand) 26%, var(--border));
  background: linear-gradient(155deg, var(--surface) 8%, var(--brand-50) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px oklch(0.45 0.13 91 / 0.10),
    0 5px 12px oklch(0.45 0.13 91 / 0.14);
  color: var(--brand-ink);
  flex: none;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}

/* Aro interior: le da el borde "de vidrio" sin sumar otro elemento */
.paytrust__ic::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in oklch, #fff 70%, transparent);
  pointer-events: none;
}

.paytrust__list li:hover .paytrust__ic {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px oklch(0.45 0.13 91 / 0.12),
    0 9px 18px oklch(0.45 0.13 91 / 0.20);
}

.paytrust__ic svg {
  width: 1.1rem;
  height: 1.1rem;
}

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

.paytrust__list div span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .paysec {
    grid-template-columns: minmax(0, 1fr);
    max-width: 44rem;
  }
}

/* Celular: el apartado entra en una pantalla y media, sin aire de más */
@media (max-width: 560px) {
  .paysec {
    gap: 0.9rem;
  }

  .paypanel {
    gap: 1rem;
    padding: 1.15rem 1rem;
  }

  .paypanel__head {
    gap: 0.7rem;
    padding-bottom: 0.95rem;
  }

  .paycard3d {
    width: 2.8rem;
  }

  .paypanel__id b {
    font-size: 0.97rem;
  }

  .paygw {
    order: 3;
    width: 100%;
    padding: 0.4rem 0.6rem;
  }

  .paypanel__marks .paymark {
    width: 3.7rem;
    height: 2.3rem;
  }

  .paypanel__facts {
    gap: 0.6rem;
  }

  .paypanel__facts li {
    font-size: 0.9rem;
  }

  .paypanel__cta {
    align-self: stretch;
    justify-content: center;
  }

  .paytrust {
    padding: 1.15rem 1rem;
  }

  .paytrust h3 {
    margin-bottom: 0.9rem;
  }

  .paytrust__list {
    gap: 0.85rem;
  }

  .paytrust__ic {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
  }

  .paytrust__list div span {
    font-size: 0.86rem;
  }
}

/* Con movimiento reducido el sello se queda quieto en "Procesado por izipay":
   nada parpadea ni se desliza, pero la información sigue completa. */
@media (prefers-reduced-motion: reduce) {

  .paygw,
  .paygw__face--gw {
    animation: none;
  }

  .paygw__swipe,
  .paygw__face--ok {
    display: none;
  }

  .paycard3d,
  .paytrust__ic {
    transition: none;
  }
}

/* ====================================================== 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;
  /* minmax(0,1fr): con `1fr` la columna nunca baja del contenido más ancho
     (un botón con rótulo largo) y el bloque se salía por la derecha en celular */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 60rem;
  margin-inline: auto;
}

.support2__copy,
.support2__copy h2,
.support2__copy p {
  min-width: 0;
  overflow-wrap: break-word;
}

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

/* La ceja "SOPORTE REAL" en oro 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.16 87); 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);
}

/* El bloque de texto de la cabecera del chat tiene que poder encogerse: "así se
   ve una conversación típica" es largo y empujaba la fila fuera de la tarjeta. */
.chat__head > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.chat__head span {
  flex-wrap: wrap;
}

.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);
  /* 13-ago-2026: era #fff sobre el oro y daba 2.10:1, muy por debajo del 4.5
     que hace falta para leer un texto corrido. Salió al medir TODAS las páginas
     al pasar la web a negro. --on-brand es el token hecho para esto: dice de
     qué color va la letra cuando el fondo es el oro de la marca, y vale
     #0B0B0D en los DOS temas, porque el oro es claro en ambos. */
  color: var(--on-brand);
  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.5rem 0.8rem;
  flex-wrap: wrap;              /* "vaultsolutions.store" y "Pago seguro" se apilan si no caben */
  padding: 0.65rem clamp(0.7rem, 3vw, 1rem);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.demo__brand,
.demo__safe {
  min-width: 0;
}

.demo__brand {
  overflow-wrap: anywhere;
}

.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(0.9rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-width: 0;
}

.dsc {
  animation: scIn 0.4s var(--ease-out) both;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* La ficha de la simulación jamás debe ser más ancha que la pantalla */
  min-width: 0;
  max-width: 100%;
}

.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;
  /* Mismo caso que .chat__b--out: blanco sobre oro daba 2.10:1, y encima aquí
     el texto es de 0.72rem, el tamaño en que peor se perdona. */
  color: var(--on-brand);
  background: var(--brand-strong);
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
}

.dsc-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;          /* el precio tachado baja de línea si no cabe */
  gap: 0.15rem 0.6rem;
  justify-content: center;
  min-width: 0;
}

.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;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  min-width: 0;
  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;
}

/* minmax(0,1fr) y no 1fr: con `1fr` cada columna nunca baja del ancho natural
   de su botón ("Comprar por WhatsApp" no parte línea), así que la pantalla de la
   simulación se quedaba clavada en 340 px y en un celular de 320 px —o con la
   letra del sistema en grande— empujaba la página entera hacia la derecha. */
.dsc-btnrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 340px;
  align-self: center;
}

/* Los dos botones de la fila reparten el ancho y parten línea si hace falta:
   recortarlos (overflow) dejaba "Comprar por WhatsApp" cortado a la mitad. */
.dsc-btnrow > .btn {
  min-width: 0;
  padding-inline: 0.5rem;
  white-space: normal;
  line-height: 1.2;
}

/* Pantalla muy angosta: los dos botones se apilan. "WhatsApp" es una palabra
   larga y sin cortarla no cabe en media columna de 120 px. */
@media (max-width: 430px) {
  .dsc-btnrow {
    grid-template-columns: minmax(0, 1fr);
  }
}

.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;
  min-width: 0;
  overflow-wrap: anywhere;
}

.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;
  /* minmax(0,1fr) y no 1fr: con `1fr` la columna se estira hasta el elemento
     más ancho que haya dentro (el botón "Hablar con una persona" no parte
     línea) y con la letra del sistema en grande el bloque de preguntas se
     salía de la pantalla por la derecha. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 52rem;
  margin-inline: auto;
}

.faq-layout > *,
.faq-aside h2,
.faq-aside p {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

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

/* La ceja "DUDAS" en oro 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.16 87); 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 del hero (apertura) ===
   El hero no pasa por el observador (se ve desde el primer instante), así que
   entra con animación pura de CSS. Mismos tiempos, curva y distancia que el
   resto de la página — ver el bloque APERTURA de cinematic.css. */
.reveal {
  opacity: 0;
  animation: reveal-up var(--in-move) var(--in-ease) forwards;
}

.reveal.d1 {
  animation-delay: calc(var(--in-step) * 1);
}

.reveal.d2 {
  animation-delay: calc(var(--in-step) * 2);
}

.reveal.d3 {
  animation-delay: calc(var(--in-step) * 3);
}

.reveal.d4 {
  animation-delay: calc(var(--in-step) * 4);
}

/* Las cifras del hero son lo primero que se ve al abrir: en vez de entrar el
   bloque entero de una, cada fila entra un paso después de la anterior. */
.hero__stats>.reveal:nth-child(1) {
  animation-delay: calc(var(--in-step) * 2);
}

.hero__stats>.reveal:nth-child(2) {
  animation-delay: calc(var(--in-step) * 3);
}

.hero__stats>.reveal:nth-child(3) {
  animation-delay: calc(var(--in-step) * 4);
}

.hero__stats>.reveal:nth-child(4) {
  animation-delay: calc(var(--in-step) * 5);
}

.hero__stats>.reveal:nth-child(5) {
  animation-delay: calc(var(--in-step) * 6);
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(var(--in-shift));
  }

  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 === */

/* La aparición del contenido (.r-up / .is-in) vive ahora solo en cinematic.css
   — bloque APERTURA. Aquí había una copia con otros tiempos que, al cargarse
   antes, solo servía para confundir. Retirada el 27-jul-2026. */

/* 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) {

  /* Sin movimiento: el hero se ve puesto, sin recorrido ni espera. */
  .reveal {
    opacity: 1;
    animation: none;
  }

  .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;
}

/* En el celular los dos accesos van UNO DEBAJO DEL OTRO (como siempre): en
   fila quedarían dos botones estrechos y apretados. Al lado solo en escritorio,
   donde sí hay ancho de sobra. */
.deck-hero__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}

@media (min-width: 700px) {
  /* Hueco generoso entre los dos: son botones sólidos del MISMO verde y del
     mismo tamaño, así que con 1rem se leían como una sola barra verde partida
     por la mitad (aviso del dueño, 28-jul-2026). Crece con la pantalla. */
  .deck-hero__more {
    flex-direction: row;
    justify-content: center;
    gap: clamp(1.75rem, 4vw, 3rem);
  }
}

/* =============================================================================
   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%, #7b6602));
}
.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);
}

/* ---- La captura de la conversación (12-ago-2026) --------------------------
   El pantallazo de WhatsApp que el dueño ya publica en sus historias. Tres
   decisiones que hacen que no rompa el carrusel:

   · ALTO MÁXIMO, no alto fijo. Una captura de móvil es muy vertical (llega a
     1:2,5). A ancho completo de la tarjeta ocuparía tres pantallas ella sola y
     el carrusel dejaría de leerse como una fila de reseñas. Se limita el ALTO y
     se deja que el ancho caiga solo, para no deformar nada.
   · object-fit: cover + object-position: top. Al recortar, lo que se conserva
     es la PARTE DE ARRIBA: en una conversación, el mensaje importante está
     arriba y lo de abajo es el teclado y la barra de escritura.
   · El canto y el fondo gris: sin ellos, una captura de fondo claro se funde
     con la tarjeta y no se lee como una imagen aparte, sino como un fallo de
     maquetación.

   La tarjeta entera se ensancha un poco cuando lleva captura: en 17,5rem —el
   ancho pensado para dos líneas de texto— un pantallazo se ve como un sello.
   --------------------------------------------------------------------------- */
.rcard--shot {
  flex-basis: min(86vw, 21rem);
}

.rcard__shot {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  line-height: 0;
  transition: border-color 0.25s ease;
}

.rcard__shot:hover {
  border-color: color-mix(in oklch, var(--brand) 45%, var(--border));
}

.rcard__shot img {
  display: block;
  width: 100%;
  max-height: 20rem;
  object-fit: cover;
  object-position: top center;
}