:root {
    --purple-1: #820099;
    /* oscuro */
    --purple-2: #820099;
    /* medio */
    --purple-3: #820099;
    /* claro */

    --fixedbar-h: 0px;
    --brand-bar-h: 0px;
    --top-strip-h: 0px;
    --nav-stack-h: 80px;

}

/* ===========================
     CHAT WIDGET
  ============================*/
.chat-widget {
    position: fixed;
    right: 1.5rem;
    bottom: 7.5rem;
    width: min(320px, calc(100% - 3rem));
    display: none;
    flex-direction: column;
    background: #ffffff;
    color: #111827;
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 95;
}

.chat-widget.is-open {
    display: flex;
    animation: chat-pop 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes chat-pop {
    from {
        transform: translateY(16px) scale(0.96);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--purple-1), #a855f7);
    color: #ffffff;
}

.chat-header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.chat-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    cursor: pointer;
    transition: background 150ms ease;
}

.chat-close-btn:hover,
.chat-close-btn:focus-visible {
    background: rgba(255, 255, 255, 0.25);
}

.chat-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    max-height: 320px;
    overflow-y: auto;
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}

.chat-message {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.chat-message.bot {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid rgba(130, 0, 153, 0.12);
}

.chat-message.user {
    align-self: flex-end;
    background: var(--purple-1);
    color: #ffffff;
}

.chat-input {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

.chat-input input[type="text"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f3f4f6;
    font-size: 0.9rem;
}

.chat-input input[type="text"]:focus {
    outline: 2px solid rgba(130, 0, 153, 0.35);
    background: #ffffff;
}

.chat-input button[type="submit"] {
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    border: none;
    background: var(--purple-1);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: filter 150ms ease;
}

.chat-input button[type="submit"]:hover,
.chat-input button[type="submit"]:focus-visible {
    filter: brightness(1.05);
}


/* ===========================
     TOP STRIP (iconos)
  ============================*/
.top-strip {
    background: #fafafa;
    position: sticky;
    top: var(--fixedbar-h, 0px);
    z-index: 90;
}

/* ===========================
     HEADER PURPLE RIBBON
  ============================*/
.ribbon {
    position: sticky;
    top: calc(var(--fixedbar-h, 0px) + var(--top-strip-h, 0px));
    left: 0;
    right: 0;
    z-index: 85;
    overflow: hidden;
    background: radial-gradient(180% 80% at 50% -20%,
            rgba(255, 255, 255, 0.08),
            transparent 60%),
        linear-gradient(180deg, var(--purple-1), var(--purple-1));
}

/* “curva” sutil arriba/abajo */
.ribbon::before,
.ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    background: radial-gradient(140% 120% at 50% -20%,
            rgba(255, 255, 255, 0.12),
            transparent 60%);
    opacity: 0.4;
    pointer-events: none;
}

.ribbon::before {
    top: -70px;
}

.ribbon::after {
    bottom: -70px;
    transform: scaleY(-1);
}

header.ribbon,
header.ribbon a,
header.ribbon .text-white {
    color: #fff !important;
}

/* Si usas opacidades en el header, dales su equivalente en blanco */
header.ribbon .text-white\/85 {
    color: rgba(255, 255, 255, 0.85) !important;
}

header.ribbon .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
}

header.ribbon .text-white\/60 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Navegación responsive */
.mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.mobile-nav-toggle svg {
    width: 22px;
    height: 22px;
}

.mobile-nav-toggle[aria-expanded="true"] .icon-open {
    display: none;
}

.mobile-nav-toggle[aria-expanded="false"] .icon-close {
    display: none;
}

.mobile-nav {
    transition: opacity 0.25s ease;
}

@media (max-width: 1023px) {
    body.mobile-menu-open {
        overflow: hidden;
    }

    header.ribbon {
        top: calc(var(--brand-bar-h, var(--fixedbar-h, 0px)) + var(--top-strip-h, 0px));
        position: relative;
        z-index: 50;
        position: sticky;
    }

    .mobile-nav {
        display: none;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem 1.75rem;
        margin-bottom: 1.5rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 18px 35px rgba(15, 23, 42, 0.25);
    }

    .mobile-nav.is-open {
        display: flex;
        opacity: 1;
    }

    .mobile-nav a {
        width: 100%;
        text-align: left;
        padding: 0.25rem 0;
        font-size: 0.875rem;
        letter-spacing: 0.08em;
    }

    .mobile-nav a::after {
        left: 0;
        transform: translateX(0);
    }
}

/* ===========================
     HERO STAGE
  ============================*/
.stage {
    position: relative;
    min-height: 620px;
    max-height: 820px;
    height: 72vh;
    background: radial-gradient(1200px 800px at 50% 20%,
            rgba(142, 109, 177, 0.15),
            transparent 60%),
        radial-gradient(1200px 800px at 50% 80%,
            rgba(142, 109, 177, 0.12),
            transparent 60%),
        linear-gradient(180deg, #0b0b0d 0%, #0b0b0d 35%, #070708 100%);
    overflow: hidden;
}

/* Grano/lluvia */
.rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px,
            transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 10px 10px;
    opacity: 0.7;
    mix-blend-mode: overlay;
}

/* “X” luminoso, fiel a proporciones del screenshot */
.x-wrap {
    position: absolute;
    inset: -12% -8%;
    z-index: 0;
}

.x-bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.06));
    -webkit-mask: linear-gradient(transparent 36%,
            black 36% 64%,
            transparent 64%);
    mask: linear-gradient(transparent 36%, black 36% 64%, transparent 64%);
    mix-blend-mode: screen;
    filter: drop-shadow(0 50px 120px rgba(0, 0, 0, 0.6));
}

.x-a {
    transform: rotate(45deg) scale(1.08);
}

.x-b {
    transform: rotate(-45deg) scale(1.08);
}

/* Carrusel 100% ancho por slide */
#track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* Sombra de “pop” a llantas */
.tire-shadow {
    filter: drop-shadow(0 35px 55px rgba(0, 0, 0, 0.8));
}

/* Etiquetas de llanta (condensado) */
.tag {
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Dots */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: 2px solid #fff;
    opacity: 0.6;
}

.dot.active {
    background: #fff;
    opacity: 1;
}

/* Flechas */
.navbtn {
    @apply grid place-items-center w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 transition;
    backdrop-filter: blur(2px);
}

/* Tipos (simular condensadas) */
.condensed {
    letter-spacing: 0.06em;
    font-stretch: condensed;
}

.ultra-wide {
    letter-spacing: 0.35em;
}

/* < !--=====THEME OVERRIDES · LIGHT MODE=====--> */
:root {
    --ink-1: #111827;
    /* texto principal (gris muy oscuro) */
    --ink-2: #4b5563;
    /* texto secundario */
    --ink-3: #6b7280;
    /* meta / captions */
    --bg-1: #ffffff;
    /* base */
    --bg-2: #f7f7f9;
    /* paneles / bloques */
    --bg-3: #ededf0;
    /* secciones alternas */
    --line: #e5e7eb;
    /* bordes claros */
}

/* ====== GENERAL ====== */
body.light,
body {
    background: var(--bg-1);
    color: var(--ink-1);
}

/* Borde global más claro */
.border-white\/10 {
    border-color: var(--line) !important;
}

.border-black\/10 {
    border-color: var(--line) !important;
}

/* Tipos claros (antes text-white…) */
.text-white {
    color: var(--ink-1) !important;
}

.text-white\/85 {
    color: color-mix(in srgb, var(--ink-1) 85%, transparent) !important;
}

.text-white\/80 {
    color: color-mix(in srgb, var(--ink-1) 80%, transparent) !important;
}

.text-white\/70 {
    color: var(--ink-2) !important;
}

.text-white\/60 {
    color: var(--ink-3) !important;
}

.text-white\/50 {
    color: #9ca3af !important;
}

/* Botones y chips sobre claro */
.bg-white\/10,
.bg-white\/5 {
    background: #ffffff !important;
}

.hover\:bg-white\/15:hover {
    background: #f3f4f6 !important;
}

.f-chip,
.chip,
.pill,
.spec,
.tl-chip {
    background: #fff !important;
    border-color: var(--line) !important;
    color: var(--ink-2) !important;
}

/* Icon buttons (flechas del carrusel) */
.navbtn {
    background: #e5e7eb !important;
    /* neutral-200 */
    border: 1px solid #d1d5db !important;
}

.navbtn:hover {
    background: #eaecef !important;
}

/* Dots del slider en claro */
.dot {
    border-color: var(--ink-1) !important;
    opacity: 0.5;
}

.dot.active {
    background: var(--ink-1) !important;
    opacity: 1;
}

/* ====== RIBBON (morado) se conserva; solo aclaramos brillos ====== */
.ribbon::before,
.ribbon::after {
    background: radial-gradient(140% 120% at 50% -20%,
            rgba(255, 255, 255, 0.22),
            transparent 60%);
    opacity: 0.6;
}

/* ====== HERO STAGE: pasar de negro a claros con overlay ====== */
.stage {
    background: radial-gradient(1200px 800px at 50% 20%,
            rgba(17, 24, 39, 0.06),
            transparent 60%),
        radial-gradient(1200px 800px at 50% 80%,
            rgba(17, 24, 39, 0.05),
            transparent 60%),
        linear-gradient(180deg,
            var(--bg-1) 0%,
            var(--bg-2) 60%,
            var(--bg-3) 100%) !important;
}

/* Si el slide es VIDEO/IMAGEN, ponemos velo blanco suave para que el texto oscuro se lea */
/* .stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(120% 80% at 50% 30%,
            rgba(255, 255, 255, 0.65),
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.2) 70%,
            rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
} */

/* “Lluvia” más sutil en claro */
.rain {
    background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px,
            transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
    mix-blend-mode: multiply !important;
    opacity: 0.6 !important;
    z-index: 0;
}

/* X luminosa: degradé gris */
.x-bar {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.04)) !important;
    filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.12)) !important;
}

/* Títulos encima del velo */
.stage .relative.z-10,
.stage .relative.z-\[10\] {
    position: relative;
    z-index: 2;
}

.stage .ultra-wide,
.stage .condensed {
    color: var(--ink-1) !important;
}

/* ====== SECCIONES OSCURAS -> CLARAS ====== */
/* Buscador de llantas */
#finderByVehicle,
#finderBySize,
#find-dealer .map-box,
#find-dealer .dealer-card,
#tire-lineup .tire-card,
#tire-lineup .compare-tray,
#corporate-news .news-card,
#why-landscape-strength .wl-card,
#recruitment .rec-card,
footer {
    background: var(--bg-2) !important;
    border-color: var(--line) !important;
}

/* Secciones con fondo degradado oscuro -> claro */
#find-dealer,
#tire-lineup,
#corporate-news,
#recruitment,
#why-landscape-strength,
footer {
    background: linear-gradient(180deg,
            var(--bg-2),
            var(--bg-1)) !important;
}

#recruitment {
    background: var(--bg-1) !important;
}

#recruitment .rec-card {
    background: var(--bg-1) !important;
}

/* Tarjetas de “tire-hero” (cabecera de cada card) */
.tire-hero {
    background: radial-gradient(100% 80% at 60% 20%,
            rgba(17, 24, 39, 0.06),
            transparent 60%),
        linear-gradient(180deg, #ffffff, #f7f7f9) !important;
}

.tire-img {
    filter: drop-shadow(0 18px 28px rgba(17, 24, 39, 0.2)) !important;
}

.badge {
    background: #ffffff !important;
    color: var(--ink-2) !important;
    border-color: var(--line) !important;
}

/* Map demo label */
#find-dealer .map-box .bg-black\/40 {
    background: #ffffffcc !important;
    color: var(--ink-1) !important;
    border-color: var(--line) !important;
}

/* Modal fondos */
#newsModal .bg-black\/70,
#applyModal .bg-black\/70 {
    background: rgba(0, 0, 0, 0.35) !important;
}

#newsModal .bg-neutral-900,
#applyModal .bg-neutral-900 {
    background: var(--bg-2) !important;
}

#newsModal .text-white,
#applyModal .text-white {
    color: var(--ink-1) !important;
}

/* Footer textos */
footer .text-white {
    color: var(--ink-1) !important;
}

footer .text-white\/80 {
    color: var(--ink-2) !important;
}

footer .text-white\/70 {
    color: var(--ink-2) !important;
}

footer .text-white\/60 {
    color: var(--ink-3) !important;
}

/* Flechitas, contadores, detalles */
.good {
    color: var(--ink-1) !important;
}

.bad {
    color: #b91c1c !important;
}

/* rojo sobrio sobre claro */


/* Asegura blanco aunque el sitio esté en modo claro */
.stage .slogan-lockup,
.stage .slogan-lockup * {
    color: #fff !important;
}

.slogan-lockup {
    transform: translateY(6px);
    opacity: 0;
    animation: sloganIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

@keyframes sloganIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Si un slide necesita el titular más compacto: */
@media (max-width: 380px) {
    .slogan-lockup .tracking-wide {
        letter-spacing: 0.02em;
    }
}


:root {
    --brand: #b424a7;
    --accent: #c344b8;
}

.tl-chip {
    @apply rounded-full px-3 py-1.5 text-xs font-semibold bg-white/10 text-white/80 border border-white/10 cursor-pointer;
}

.tl-chip[data-active="true"] {
    background: color-mix(in srgb, var(--brand) 25%, transparent);
    color: #fff;
    border-color: color-mix(in srgb, var(--brand) 55%, #fff);
}

.tire-card {
    @apply rounded-2xl bg-white/5 border border-white/10 overflow-hidden;
    transform-style: preserve-3d;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tire-card:hover {
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}

.tire-hero {
    position: relative;
    background: radial-gradient(100% 80% at 60% 20%,
            rgba(255, 255, 255, 0.06),
            transparent 60%),
        linear-gradient(180deg, #0b0b0d, #070708);
    min-height: 240px;
}

.tire-img {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 220px;
    height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.8));
    transform: translateZ(35px) rotate(-6deg);
}

.tire-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(45% 45% at 70% 60%,
            color-mix(in srgb, var(--brand) 50%, transparent),
            transparent 60%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.badge {
    @apply absolute left-4 top-4 text-[10px] font-bold tracking-wide uppercase bg-black/60 text-white rounded-full px-2 py-1 border border-white/10;
}

.spec {
    @apply text-[11px] px-2 py-1 rounded-full bg-white/10 text-white/80 border border-white/10;
}

.compare-tray {
    @apply mt-8 rounded-2xl bg-white/5 border border-white/10 p-4 overflow-x-auto;
}

.pill {
    @apply inline-flex items-center gap-2 text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/80;
}

.cta-gold {
    background: var(--accent);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}


:root {
    --brand: #b424a7;
    --accent: #c344b8;
}

.wl-card {
    /* @apply rounded-2xl bg-white/5 border border-white/10 p-5 h-full; */
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.5rem;
    height: 100%;
}

.wl-chip {
    @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold bg-white/10 text-white/80 border border-white/10;
}

.wl-icon {
    @apply w-12 h-12 grid place-items-center rounded-xl text-white;
    background: color-mix(in srgb, var(--brand) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 60%, #fff);
}

.good {
    color: var(--accent);
}

.bad {
    color: #ff6b6b;
}

:root {
    --brand: #b424a7;
    --accent: #c344b8;
}

.f-chip {
    @apply inline-flex items-center gap-2 text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/80;
}

.f-input {
    @apply w-full bg-white/95 text-neutral-800 rounded-md px-3 py-2 outline-none;
}

.f-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}

:root {
    --brand: #b424a7;
    --accent: #c344b8;
}

.rec-card {
    @apply rounded-2xl bg-white/5 border border-white/10 p-5 h-full;
}

.chip {
    @apply rounded-full px-3 py-1.5 text-xs font-semibold bg-white/10 text-white/80 border border-white/10 cursor-pointer;
}

.chip[data-active="true"] {
    background: color-mix(in srgb, var(--brand) 25%, transparent);
    color: #fff;
    border-color: color-mix(in srgb, var(--brand) 55%, #fff);
}

.step-dot {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
}

:root {
    --brand: #b424a7;
    --accent: #c344b8;
}

.news-card {
    @apply rounded-2xl bg-white/5 border border-white/10 overflow-hidden h-full;
}

.chip {
    @apply rounded-full px-3 py-1.5 text-xs font-semibold bg-white/10 text-white/80 border border-white/10 cursor-pointer;
}

.chip[data-active="true"] {
    background: color-mix(in srgb, var(--brand) 25%, transparent);
    color: #fff;
    border-color: color-mix(in srgb, var(--brand) 55%, #fff);
}

.meta {
    @apply text-[11px] tracking-wide uppercase text-white/60;
}


/* Fuerza texto blanco SOLO en la barra fija, por encima de cualquier override */
#brand-fixed,
#brand-fixed * {
    color: #fff !important;
}

/* Si usas variantes con opacidad */
#brand-fixed .text-white\/95 {
    color: rgba(255, 255, 255, .95) !important;
}

#brand-fixed .text-white\/90 {
    color: rgba(255, 255, 255, .90) !important;
}

#brand-fixed .text-white\/80 {
    color: rgba(255, 255, 255, .80) !important;
}

#brand-fixed .text-white\/70 {
    color: rgba(255, 255, 255, .70) !important;
}

#brand-fixed .text-white\/60 {
    color: rgba(255, 255, 255, .60) !important;
}

.btn-text {
    color: #fff !important;
}

.btn-flag {
    background-color: #820099;
    color: #fff;
}

.btn-flag:hover {
    background-color: black;
}



/* subrayado solo al pasar el mouse */
header nav a {
    position: relative;
}

header nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    height: 2px;
    width: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    transition: width 0.25s ease;
}

header nav a:hover::after {
    width: 24px;
}

@media (max-width: 1023px) {
    header nav a {
        text-align: left;
    }

    header nav a::after {
        left: 0;
        transform: translateX(0);
    }
}


html {
    scroll-behavior: smooth;
}

/* si ya expusiste la altura en --fixedbar-h, úsala; si no, pon 80px aprox */
[id] {
    scroll-margin-top: var(--nav-stack-h, 80px);
}


/* Mismo marco para TODAS las diapositivas */
#newsFeaturedCarousel {
    /* alto consistente; ajusta a lo que te funcione */
    aspect-ratio: 1 / 1;
}

@media (max-width: 768px) {
    #newsFeaturedCarousel {
        aspect-ratio: 4 / 3;
    }
}

/* El “visor” ocupa todo ese marco */
#newsFeaturedCarousel .overflow-hidden,
#newsFeaturedCarousel [data-track] {
    height: 100%;
}

/* Cada slide llena el visor y no deja “huecos” */
#newsFeaturedCarousel [data-track]>figure {
    min-width: 100%;
    height: 100%;
    margin: 0;
    line-height: 0;
    /* evita el gap por línea base */
    overflow: hidden;
    background: #0b0b0b;
    /* gris de fondo opcional */
}

/* La imagen se recorta suavemente para llenar */
#newsFeaturedCarousel img {
    width: 100%;
    height: 100%;
    display: block;
    /* quita el hueco inferior */
    object-fit: cover;
    /* adapta al área visible */
    object-position: center;
}

#about .abs-btn {
    @apply absolute top-1/2 -translate-y-1/2 z-10 grid place-items-center h-10 w-10 rounded-full bg-black/45 text-white border border-white/10 backdrop-blur;
}

#about .abs-btn:hover {
    @apply bg-black/60;
}

#about .dot {
    @apply h-2.5 w-2.5 rounded-full bg-white/35 hover:bg-white/60 transition;
}

#about .dot.is-active {
    background: color-mix(in srgb, var(--brand) 80%, #fff);
}