@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

body {
  margin-top: 12px;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.welcome-how {
  position: relative;
  max-width: 1100px;
  margin: 3rem auto 2.5rem;
  padding: 2.5rem 2rem 1.5rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 247, 255, 0.92) 55%, rgba(240, 253, 249, 0.88) 100%);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(68, 81, 158, 0.08),
    0 0 0 1px rgba(68, 81, 158, 0.1);
  overflow: visible;
}

.welcome-how::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #44519e 0%, #5a6fd8 45%, #0acf97 100%);
  border-radius: 20px 20px 0 0;
}

.how-section-header {
  text-align: center;
  margin-bottom: 1rem;
}

.how-title {
  margin: 0;
  font-family: Poppins-Medium, sans-serif;
  font-size: 2rem;
  color: #1a1a2e;
}

.how-features-lead {
  margin: 0.65rem 0 0;
  font-family: Poppins-Regular, sans-serif;
  font-size: 0.95rem;
  color: #6b7280;
}

.welcome-how > .how-subtitle {
  margin-top: 1.25rem;
  margin-bottom: 0;
  text-align: center;
}

.how-subtitle {
  margin: 0 auto;
  max-width: 32rem;
  font-family: Poppins-Regular, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6b7280;
}

/* Variable tipada para que calc() la trate como número real. No se anima por
   CSS, la escribe JS cada frame via `style.setProperty('--iblod-k', ...)`. */
@property --iblod-k {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

/* ---------------------------------------------------------------------------
 * Estado por defecto (sin JS o con reduced-motion): se ve el fallback en grilla
 * y se oculta la galería 3D. JS añade `.how-gallery-active` a la sección para
 * invertir la visibilidad cuando el carrusel está listo.
 * ------------------------------------------------------------------------- */
.how-gallery-frame {
  display: none;
}

.how-gallery-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.welcome-how.how-gallery-active .how-gallery-frame {
  display: block;
}

.welcome-how.how-gallery-active .how-gallery-fallback {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Frame: contenedor fijo del carrusel. Ya NO es un scroll container: el estado
 * del anillo se maneja desde JS, así evitamos por completo scroll-anchoring,
 * sticky, animation-timeline y el resto de efectos secundarios que causaban
 * que el documento se desplazara al cambiar de slide.
 * ------------------------------------------------------------------------- */
.how-gallery-frame {
  --n: 8;
  --how-gallery-viewport-block: min(78vh, 640px);
  position: relative;
  block-size: var(--how-gallery-viewport-block);
  border-radius: 12px;
  margin: 0 -0.5rem;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  cursor: grab;
  outline: none;
  /* Permite scrollear la página con swipe vertical pero captura el horizontal. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.how-gallery-frame:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(68, 81, 158, 0.55);
}

.how-gallery-frame.iblod-gallery-drag-active {
  cursor: grabbing;
  touch-action: none;
}

.how-gallery-frame.iblod-gallery-drag-active .iblod-gallery-item,
.how-gallery-frame.iblod-gallery-drag-active .iblod-gallery-item * {
  user-select: none;
}

.iblod-gallery-body {
  --dir: 0;
  --iblod-k: 0;
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  color: #374151;
  font: clamp(0.625em, 2.8vmin, 1.35em) / 1.25 Saira, sans-serif;
}

.iblod-gallery-body::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(165deg, #f4f7fd 0%, #e8edf6 55%, #eef6f3 100%);
  content: '';
  pointer-events: none;
  border-radius: 11px;
}

@media (max-aspect-ratio: 2/3) {
  .iblod-gallery-body {
    --dir: 1;
  }
}

.iblod-gallery-scene {
  position: relative;
  z-index: 1;
  grid-row: 1;
  display: grid;
  place-content: center;
  place-items: center;
  height: 100%;
  overflow: hidden;
  perspective: 44em;
  perspective-origin: 50% 50%;
  width: 100%;
  padding-top: clamp(0.2rem, 1vh, 0.6rem);
  padding-bottom: clamp(0.25rem, 1.2vh, 0.8rem);
  padding-left: clamp(0.5rem, 2vw, 1rem);
  padding-right: clamp(0.5rem, 2vw, 1rem);
  box-sizing: border-box;
}

.iblod-gallery-assembly,
.iblod-gallery-item {
  transform-style: preserve-3d;
}

.iblod-gallery-assembly {
  --r: calc(5 + var(--dir)) / 8;
  /* Ancho base por ventana/contenido. */
  --w-free: clamp(4.75em, min(46vh, 32vw), 22em);
  /* Tope duro atado al alto del frame: 58% del viewport-block garantiza que la
     tarjeta (aspect-ratio 5/8 en desktop → alto = ancho * 1.6) nunca supere el
     ~93% del frame y no se recorte en pantallas grandes. */
  --w-cap: calc(var(--how-gallery-viewport-block) * 0.58);
  --w: min(var(--w-free), var(--w-cap));
  --z: calc(var(--f, 1.25) * -0.5 * var(--w) / tan(0.5turn / var(--n)));
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  translate: 0 0 var(--z);
  rotate: var(--dir) calc(1 - var(--dir)) 0 calc((var(--iblod-k) + 0.5) * -1turn);
}

.iblod-gallery-item {
  --j: calc(var(--i) / var(--n));
  --dif-lin: calc(var(--j) - mod(var(--iblod-k) + 1, 1));
  --abs-lin: abs(var(--dif-lin));
  --dif-mid: calc(0.5 - var(--abs-lin));
  --abs-mid: abs(var(--dif-mid));
  --dif-arc: calc(2 * (0.5 - var(--abs-mid)));
  --lim: 0.35;
  --sel: max(0, calc((var(--lim) - var(--dif-arc)) / var(--lim)));
  --out: calc(1 - var(--sel));
  display: grid;
  grid-area: 1 / 1;
  width: var(--w);
  aspect-ratio: var(--r);
  transform:
    rotate3d(var(--dir), calc(1 - var(--dir)), 0, calc(var(--j) * 1turn))
    translateZ(var(--z))
    rotate(calc(var(--dir) * 0.5turn));
}

@supports not (scale: abs(-1)) {
  .iblod-gallery-item {
    --abs-lin: max(var(--dif-lin), calc(-1 * var(--dif-lin)));
    --abs-mid: max(var(--dif-mid), calc(-1 * var(--dif-mid)));
  }
}

.iblod-gallery-card {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.iblod-gallery-card header,
.iblod-gallery-card figure {
  grid-area: 1 / 1;
  display: grid;
  overflow: hidden;
  position: relative;
  border: solid 4px transparent;
  border-radius: 0.5em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 5px 5px 13px #000;
  pointer-events: none;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
}

.iblod-gallery-card figure {
  isolation: isolate;
  transform: rotateY(0deg);
  place-items: center;
  padding: 1rem;
}

.iblod-gallery-card header {
  isolation: isolate;
  transform: rotateY(180deg);
  align-content: stretch;
  justify-items: stretch;
  text-align: left;
  padding: 0.8em 0.8em 0.75em;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45em;
  background:
    linear-gradient(180deg, #eef3ff 0%, #ffffff 20%, #ffffff 80%, #eef8f4 100%) padding-box,
    linear-gradient(45deg, #58679f 0 12%, transparent 12% 88%, #58679f 88% 100%) border-box;
}

.iblod-gallery-card header::after,
.iblod-gallery-card figure::after {
  position: absolute;
  inset: 0;
  opacity: var(--out);
  background: rgba(34, 42, 98, 0.78);
  mix-blend-mode: color;
  pointer-events: none;
  content: '';
}

.iblod-gallery-card header::after {
  background: rgba(255, 255, 255, 0.18);
  mix-blend-mode: screen;
}

.iblod-gallery-item:has(.iblod-gallery-figma-root--2) .iblod-gallery-card header::after {
  opacity: 0;
}

.iblod-gallery-back-logo-shell {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(82%, 14em);
  border-radius: 1.1em;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.iblod-gallery-back-logo {
  position: relative;
  display: block;
  margin: 0;
  color: #fff;
  font-family: Holden-Medium, sans-serif;
  font-size: clamp(2.8em, 12vmin, 5.8em);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 0.08em 0.18em rgba(31, 41, 55, 0.28),
    0 0 0.7em rgba(90, 111, 216, 0.26);
}

/* Fila superior del header con altura fija basada en el icono: así los
   captions largos (sin envolver) nunca empujan la fila de media y el anillo
   3D se mantiene estable verticalmente entre cualquier slide. */
.iblod-gallery-item-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55em;
  min-height: clamp(2em, 7.1vmin, 2.7em);
}

.iblod-gallery-item .iblod-gallery-item-icon,
.iblod-gallery-item .iblod-gallery-item-text {
  pointer-events: auto;
  opacity: var(--sel);
}

.iblod-gallery-item .iblod-gallery-item-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: clamp(2em, 7.1vmin, 2.7em);
  block-size: clamp(2em, 7.1vmin, 2.7em);
  border-radius: 50%;
  font-size: clamp(0.88em, 2.9vmin, 1.12em);
  color: #f8fafc;
  margin: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), transparent 42%),
    linear-gradient(145deg, #0acf97 0%, #44519e 45%, #5a6fd8 100%);
  box-shadow:
    0 0 0 0.22em rgba(255, 255, 255, 0.12),
    0 0.5em 1.2em rgba(96, 165, 250, 0.28);
}

/* Altura fija equivalente a 3 líneas (line-height 1.22) idéntica en todos los
   slides para que la fila de media no varíe entre tarjetas. Sin `text-wrap:
   balance` a propósito: Chrome rompe líneas distinto según ancho y causaba
   desalineos verticales entre slides. */
.iblod-gallery-item .iblod-gallery-item-text {
  margin: 0;
  max-width: 100%;
  color: #44519e;
  font-size: clamp(0.5em, 1.95vmin, 0.66em);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  height: calc(3 * 1.22em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.iblod-gallery-item .iblod-gallery-item-media {
  align-self: stretch;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 95%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 0.18em rgba(255, 255, 255, 0.14),
    0 0.8em 1.6em rgba(33, 43, 94, 0.18);
  opacity: var(--sel);
  overflow: hidden;
}

.iblod-gallery-item .iblod-gallery-item-media--figma {
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

/* Todos los slides figma: el card ocupa 95% del ancho del slide y escala con
   el viewport. Cada slide solo override su aspect-ratio especifico. */
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--0),
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--1),
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--2),
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--3),
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--4) {
  align-self: start;
  align-items: stretch;
  justify-content: flex-start;
  inline-size: 95%;
}

.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--0),
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--1) {
  aspect-ratio: 1 / 1.16;
}

.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--2),
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--3),
.iblod-gallery-item .iblod-gallery-item-media--figma:has(.iblod-gallery-figma-root--4) {
  aspect-ratio: 1 / 1.14;
}

.iblod-gallery-item:has(.iblod-gallery-figma-root--0) .iblod-gallery-item-text {
  font-size: clamp(0.44em, 1.7vmin, 0.57em);
  line-height: 1.22;
}

.iblod-gallery-item .iblod-gallery-item-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.8em;
  transform: scale(var(--img-scale, 1));
  transform-origin: center;
}

/* Caption siempre en una sola línea para que no altere la altura del header. */
.iblod-gallery-item .iblod-gallery-item-caption {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0.4em 0.75em;
  border: 1px solid rgba(68, 81, 158, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #44519e;
  font-size: clamp(0.35em, 1.32vmin, 0.45em);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: calc(0.78 + (var(--sel) * 0.22));
}

.iblod-gallery-item .iblod-gallery-item-footer-badge {
  margin: 0;
  align-self: end;
  color: #44519e;
  font-size: clamp(0.5em, 1.8vmin, 0.62em);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: calc(0.78 + (var(--sel) * 0.22));
}

/* Controles navegacionales (flechas + dots) sobre el marco del carrusel. */
.how-gallery-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.5rem 0.75rem;
}

.how-gallery-nav {
  pointer-events: auto;
  appearance: none;
  border: none;
  width: clamp(2.1rem, 4.2vmin, 2.75rem);
  height: clamp(2.1rem, 4.2vmin, 2.75rem);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #44519e;
  font-size: 1rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(68, 81, 158, 0.12),
    0 0.4em 0.9em rgba(33, 43, 94, 0.18);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.how-gallery-nav:hover,
.how-gallery-nav:focus-visible {
  background: linear-gradient(145deg, #44519e 0%, #5a6fd8 100%);
  color: #fff;
  transform: scale(1.05);
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0.5em 1em rgba(68, 81, 158, 0.35);
}

.how-gallery-nav:active {
  transform: scale(0.96);
}

.how-gallery-nav--prev {
  grid-column: 1;
}

.how-gallery-nav--next {
  grid-column: 3;
}

.how-gallery-fallback-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.how-gallery-fallback-card-front {
  padding: 0.9rem 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}

.how-gallery-fallback-icon {
  font-size: 1.65rem;
  color: #44519e;
  line-height: 1;
}

.how-gallery-fallback-card-front p {
  margin: 0;
  font-family: Cabin, sans-serif;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.45;
}

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

  /* Con movimiento reducido mostramos el fallback sí o sí. */
  .welcome-how.how-gallery-active .how-gallery-frame {
    display: none;
  }

  .welcome-how.how-gallery-active .how-gallery-fallback {
    display: grid;
  }
}

@media only screen and (min-width: 769px) {
  .iblod-gallery-item .iblod-gallery-item-caption {
    font-size: clamp(0.42em, 1.55vmin, 0.54em);
  }

  .iblod-gallery-item .iblod-gallery-item-text {
    font-size: clamp(0.6em, 2.25vmin, 0.78em);
  }

  .iblod-gallery-item:has(.iblod-gallery-figma-root--0) .iblod-gallery-item-text {
    font-size: clamp(0.54em, 2vmin, 0.68em);
  }
}

/* Mobile / tablet portrait: layout full-bleed (no aplicar en 769–1080 desktop angosto) */
@media only screen and (max-width: 768px) {
  .welcome-how {
    --welcome-how-responsive-x: max(3%, 1rem);
    margin: 2rem var(--welcome-how-responsive-x);
    padding: 2rem var(--welcome-how-responsive-x) 1.5rem;
    border-radius: 0;
  }

  .welcome-how::before {
    border-radius: 0;
  }

  .how-section-header,
  .how-subtitle {
    padding-inline: 1rem;
  }

  .how-title {
    font-size: 1.6rem;
  }

  .how-subtitle {
    font-size: 0.88rem;
  }

  /* El carrusel ocupa todo el ancho del section, sin heredar su padding lateral. */
  .how-gallery-frame {
    --how-gallery-viewport-block: min(78vh, 600px);
    width: calc(100% + (var(--welcome-how-responsive-x) * 2));
    margin-inline: calc(var(--welcome-how-responsive-x) * -1);
    border-radius: 0;
  }

  .iblod-gallery-body::before {
    border-radius: 0;
  }

  /* Forzar rotacion sobre eje Y (horizontal) tambien en portrait, en lugar
     del flip vertical que daba --dir: 1 cuando max-aspect-ratio: 2/3. */
  .iblod-gallery-body {
    --dir: 0;
    /* Evita que todos los em internos sigan creciendo entre 420px y 1080px. */
    font-size: min(2.8vw, 12px);
  }

  /* Slides mas grandes en mobile manteniendo la geometria del anillo 3D. */
  .iblod-gallery-assembly {
    /* Crece hasta ~420px de viewport y luego queda estable hasta el breakpoint
       1080px, para que slide y contenido no sigan agrandandose. */
    --w-free: min(94vw, 395px);
    /* Con aspect-ratio 5/8, el ancho no puede pasar ~55% del alto del frame
       o la tarjeta frontal supera el scene cuando el viewport crece >420px. */
    --w-cap: min(calc(var(--how-gallery-viewport-block) * 0.55), 330px);
  }

  .iblod-gallery-scene {
    perspective: 60em;
    padding-left: 0;
    padding-right: 0;
  }

  .iblod-gallery-item-header-top {
    min-height: 2.9em;
  }

  .iblod-gallery-item .iblod-gallery-item-icon {
    inline-size: 2.9em;
    block-size: 2.9em;
    font-size: 1.12em;
  }

  .iblod-gallery-item .iblod-gallery-item-caption {
    padding: 0.55em 0.9em;
    font-size: min(2.65vw, 11px);
    line-height: 1.15;
    letter-spacing: 0.1em;
  }

  .iblod-gallery-item .iblod-gallery-item-text {
    height: auto;
    min-height: calc(3 * 1.22em);
    font-size: min(3.45vw, 14.4px);
    line-height: 1.25;
  }

  .iblod-gallery-item:has(.iblod-gallery-figma-root--0) .iblod-gallery-item-text {
    font-size: min(3.45vw, 14.4px);
    line-height: 1.25;
  }

  .iblod-gallery-item .iblod-gallery-item-footer-badge {
    font-size: min(3vw, 12.6px);
    letter-spacing: 0.1em;
  }

  /* En desktop angosto mantenemos flechas visibles.
     Solo ocultamos controles en dispositivos tactiles. */
  @media (pointer: coarse) {
    .how-gallery-nav {
      display: none !important;
    }

    .how-gallery-controls {
      pointer-events: none;
    }
  }

  .how-gallery-scroll-hint {
    display: flex;
  }
}

/* ---------------------------------------------------------------------------
 * Hint "Deslizar a los costados": copia del estilo del carrusel de portafolios
 * adaptada al fondo claro de welcome-how. Solo visible en mobile.
 * ------------------------------------------------------------------------- */
.how-gallery-scroll-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 20;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px 10px;
  border-radius: 16px;
  background: rgba(33, 43, 94, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  max-width: min(320px, 84vw);
}

.how-gallery-scroll-hint__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.how-gallery-scroll-hint__chev {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  opacity: 0.8;
  flex-shrink: 0;
}

.how-gallery-scroll-hint__chev--l {
  border-right: 10px solid rgba(255, 255, 255, 0.95);
  animation: how-gallery-scroll-nudge-left 2s ease-in-out infinite;
}

.how-gallery-scroll-hint__chev--r {
  border-left: 10px solid rgba(255, 255, 255, 0.95);
  animation: how-gallery-scroll-nudge-right 2s ease-in-out infinite;
}

.how-gallery-scroll-hint__rail {
  position: relative;
  flex: 1;
  min-width: 80px;
  max-width: 130px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.how-gallery-scroll-hint__thumb {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 38%;
  height: 100%;
  margin-top: -2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(90, 111, 216, 0.95));
  box-shadow: 0 0 10px rgba(90, 111, 216, 0.5);
  animation: how-gallery-scroll-thumb 2.2s ease-in-out infinite alternate;
}

.how-gallery-scroll-hint__text {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

@keyframes how-gallery-scroll-nudge-left {
  0%, 100% { transform: translateX(0); opacity: 0.45; }
  50% { transform: translateX(-4px); opacity: 1; }
}

@keyframes how-gallery-scroll-nudge-right {
  0%, 100% { transform: translateX(0); opacity: 0.45; }
  50% { transform: translateX(4px); opacity: 1; }
}

@keyframes how-gallery-scroll-thumb {
  0% { left: 8%; }
  100% { left: 54%; }
}

/* Ocultar hint despues del primer drag/swipe. */
.how-gallery-frame.how-gallery-hint-hidden .how-gallery-scroll-hint {
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media only screen and (max-width: 768px) {
  .how-gallery-frame .how-gallery-scroll-hint,
  .how-gallery-scroll .how-gallery-scroll-hint {
    display: flex !important;
    visibility: visible;
  }
}

@media (max-width: 480px) {
  .how-subtitle {
    font-size: 0.8rem;
    padding: 0 0.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Desktop (≥769px): alturas por --how-gallery-h. Welcome con density: overrides
 * en welcome-how-laptop.css. Mobile layout: ≤768px más arriba.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) {
  .welcome-how {
    --how-gallery-h: clamp(370px, 45vh, 520px);
    max-width: min(1040px, 96vw);
    margin: 2.15rem auto 1.85rem;
    padding: 1.85rem 2.1rem 1.25rem;
  }

  .how-section-header {
    margin-bottom: 0.75rem;
  }

  .how-title {
    font-size: 2.1rem;
  }

  .how-features-lead {
    margin-top: 0.5rem;
    font-size: 1rem;
  }

  .welcome-how > .how-subtitle {
    margin-top: 1rem;
    max-width: 40rem;
    font-size: 1rem;
  }

  .how-gallery-frame {
    --how-gallery-viewport-block: var(--how-gallery-h);
    block-size: var(--how-gallery-viewport-block);
  }

  .iblod-gallery-body {
    font: 12px/1.25 Saira, sans-serif;
  }

  .iblod-gallery-scene {
    perspective: 32em;
    padding: 0.25rem 0.75rem 0.4rem;
  }

  .iblod-gallery-assembly {
    --w-cap: calc((var(--how-gallery-viewport-block) - 1rem) * 0.625);
    --w-free: var(--w-cap);
    --w: var(--w-cap);
  }
}

@media only screen and (min-width: 769px) and (max-width: 1080px) {
  .welcome-how {
    --how-gallery-h: clamp(400px, 50vh, 560px);
  }
}

@media only screen and (min-width: 1081px) and (max-width: 1280px) {
  .welcome-how {
    --how-gallery-h: clamp(430px, 51vh, 600px);
  }

  .iblod-gallery-body {
    font: 12.5px/1.25 Saira, sans-serif;
  }
}

@media only screen and (min-width: 1281px) {
  .welcome-how {
    --how-gallery-h: clamp(450px, 53vh, 640px);
    max-width: min(1100px, 95vw);
  }

  .iblod-gallery-body {
    font: 12.5px/1.25 Saira, sans-serif;
  }
}

@media only screen and (min-width: 1921px) {
  .welcome-how {
    --how-gallery-h: clamp(470px, 55vh, 670px);
  }
}