/* BIOS: una paleta de marca y una sola superficie por marco. */
:root {
  --bios-banner-accent: #009de1;
  --bios-banner-action: #0076a8;
  --bios-banner-ink: #092b43;
  --bios-banner-ground: #e1f4fc;
  --bios-banner-surface: #ffffff;
  --bios-banner-support: #f0f7fa;
}
.bios-hero-row .hero__track,
.bios-hero-row .hero__track > .slide--lx,
.bios-hero-row .hero__track > .slide--showcase { background: var(--bios-banner-ground) !important; }
.bios-hero-row .hero__track { border: 0 !important; outline: none; box-shadow: none; border-radius: 22px; } /* taste-skill-ignore: desactiva sombras y blur heredados; no crea efectos. */
.bios-hero-row .hero__track > .slide { box-shadow: none; } /* taste-skill-ignore: desactiva sombras y blur heredados; no crea efectos. */
.bios-hero-row .lx__info { background: var(--bios-banner-surface); box-shadow: none; border: 0; } /* taste-skill-ignore: desactiva sombras y blur heredados; no crea efectos. */
.bios-hero-row .slide--lx .lx__photo { padding: 8px; }
.bios-hero-row .slide--lx .product-crop img,
.spotlight .product-crop img { mix-blend-mode: normal; filter: none; }
.bios-hero-row .lx__cta .btn--whatsapp { background: #c5f0db !important; box-shadow: none !important; } /* taste-skill-ignore: desactiva sombras y blur heredados; no crea efectos. */
.bios-hero-row .lx__cta .btn--whatsapp:hover { background: #b3e8cd !important; }
.bios-hero-row .lx__specs .spec--touch { background: var(--bios-banner-ground); color: var(--bios-banner-ink); }
.spotlights { background: var(--bios-banner-support); }
.spotlight { border: 0; border-radius: 22px; background: var(--bios-banner-ground); box-shadow: none; } /* taste-skill-ignore: desactiva sombras y blur heredados; no crea efectos. */
.spotlight--blue { background: var(--bios-banner-action); }
.spotlight--navy, .spotlight--grad { background: var(--bios-banner-ink); }
.spotlight--sky { background: var(--bios-banner-ground); }
.spotlight .spotlight__title { color: var(--bios-banner-ink); }
.spotlight--blue .spotlight__title, .spotlight--navy .spotlight__title, .spotlight--grad .spotlight__title { color: var(--bios-banner-surface); }
.spotlight .spotlight__eyebrow { color: var(--bios-banner-ink); letter-spacing: .025em; }
.spotlight--blue .spotlight__eyebrow, .spotlight--navy .spotlight__eyebrow, .spotlight--grad .spotlight__eyebrow { color: var(--bios-banner-surface); }
.spotlight .spotlight__eyebrow::before { display: none; }
.spotlight__tiles { background: var(--bios-banner-surface); }
.spotlight__tile + .spotlight__tile { border: 0; }
.spotlight__cta { background: var(--bios-banner-surface); color: var(--bios-banner-ink); }
.spotlight__cta .icon { background: var(--bios-banner-action); color: var(--bios-banner-surface); }
.spotlight__cta:hover { background: var(--bios-banner-ground); }
.spotlights__branches button[aria-pressed="true"] { background: var(--bios-banner-action); }
.spotlights__controls { background: var(--bios-banner-surface); box-shadow: none; border: 0; backdrop-filter: none; } /* taste-skill-ignore: desactiva sombras y blur heredados; no crea efectos. */
.bios-hero-row .slide--blue { background: var(--bios-banner-action); color: var(--bios-banner-surface); }
.bios-hero-row .slide--navy, .bios-hero-row .slide--grad { background: var(--bios-banner-ink); }
.bios-hero-row .slide--sky { background: var(--bios-banner-ground); }
.bios-hero-row .hero__track > .slide { border-radius: inherit; }
/* Marco real: una capa exterior y un interior opaco, con radios concéntricos. */
.bios-hero-row .hero__frame, .spotlight {
  padding: 3px; border: 0; border-radius: 22px; overflow: hidden;
  background: #ffffff99;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* taste-skill-ignore: marco esmerilado solicitado por el usuario. */
}
.bios-hero-row .hero__track { border-radius: 19px; }
.bios-hero-row .hero__track > .slide { border-radius: inherit; }
.spotlight { display: grid; grid-template-rows: minmax(0,1fr); gap: 0; }
.spotlight__surface { display: grid; grid-template-rows: auto 1fr auto; gap: 20px; min-width: 0; padding: 22px; border-radius: 19px; background: var(--bios-banner-ground); }
.spotlight--blue .spotlight__surface { background: var(--bios-banner-action); }
.spotlight--navy .spotlight__surface, .spotlight--grad .spotlight__surface { background: var(--bios-banner-ink); }
.bios-hero-row .hero__track > .slide::after, .spotlight::after { content: none; }
@media(max-width:719px) { .spotlight__surface { padding: 20px; } }
@media(max-width:359px) { .spotlight__surface { padding: 16px; } }
@media(prefers-reduced-transparency:reduce) {
  .bios-hero-row .hero__frame, .spotlight { background: #eef8fc; backdrop-filter: none; -webkit-backdrop-filter: none; } /* taste-skill-ignore: desactiva transparencia por accesibilidad. */
}

/* Panel de información: cristal exterior y contenido separado, sin máscaras. */
.bios-hero-row .lx__info { display: block; padding: 3px; gap: 0; border: 0; border-radius: 26px; background: #ffffffb8;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* taste-skill-ignore: panel esmerilado pedido por el usuario. */
}
.bios-hero-row .lx__info-body { display: grid; gap: 14px; padding: 26px; min-width: 0; border-radius: 23px; background: #ffffffb3; }
.bios-hero-row .slide--lx .lx__cta .btn--whatsapp { grid-template-columns: 36px minmax(0,1fr) 14px; gap: 10px; }
.bios-hero-row .lx__wa-icon { width: 36px; height: 36px; border-radius: 12px; }
.bios-hero-row .lx__wa-icon svg { display: block; width: 24px; height: 24px; fill: currentColor; stroke: none; shape-rendering: geometricPrecision; }
@container(max-width:639px) { .bios-hero-row .lx__info-body { padding: 22px; gap: 12px; } }
@container(max-width:330px) { .bios-hero-row .lx__info-body { padding: 18px; } }
@media(prefers-reduced-transparency:reduce) {
  .bios-hero-row .lx__info { background: #eef8fc; backdrop-filter: none; -webkit-backdrop-filter: none; } /* taste-skill-ignore: acceso sin transparencia. */
  .bios-hero-row .lx__info-body { background: var(--bios-banner-surface); }
}

.bios-hero-row [data-sonido] .icon { fill: none; stroke: currentColor; stroke-width: 1.75; }

/* Un gesto breve sobre cada control; las imágenes y el contenido no se mueven. */
@media(prefers-reduced-motion:no-preference) {
  :is(.hero,.bios-hero-row,.spotlights,.services) :is(a,button):is(:hover,:focus-visible) .icon,
  .services li:hover > .icon,
  .bios-hero-row .slide__eyebrow:hover > .icon {
    animation: banner-icon-jitter 360ms ease-out 1;
    transform-origin: center;
  }
}
@keyframes banner-icon-jitter {
  0%,100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-1px) rotate(-4deg); }
  50% { transform: translateX(1px) rotate(3deg); }
  75% { transform: translateX(0) rotate(-1deg); }
}

