/* Igualar posición y alto de videos — Slide 09 */
.slide[data-page='09'] .series-video {
    height: 32vh;
}

@media (min-width: 768px) {
    .slide[data-page='09'] .series-video {
        height: 36vh;
    }
}

.slide[data-page='09'] .series-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    text-align: justify;
}

#presentation-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    padding: max(env(safe-area-inset-top), 0px) max(env(safe-area-inset-right), 0px)
        max(env(safe-area-inset-bottom), 0px) max(env(safe-area-inset-left), 0px);
    overflow: hidden auto;
}

#presentation-container {
    flex-grow: 1;
    position: relative;
    width: 100%;
    background-color: #000;
}

.slide-no-transition {
    transition: none !important;
    transform: translate3d(0, 0, 0) !important;
}

.slide--acoustics {
    position: relative;
    overflow: hidden auto;
}

.slide--acoustics .acoustic-glass {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    background: linear-gradient(
        135deg,
        rgb(30 64 175 / 0.78) 0%,
        rgb(37 99 235 / 0.68) 26%,
        rgb(59 130 246 / 0.5) 58%,
        rgb(147 197 253 / 0.34) 100%
    );
    backdrop-filter: blur(22px) saturate(165%) brightness(1.08);
    border-right: 1px solid rgb(191 219 254 / 0.52);
    box-shadow: 18px 0 52px rgb(30 64 175 / 0.5);
    pointer-events: none;
    z-index: 0;
}

.slide--acoustics .acoustic-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgb(255 255 255 / 0.42) 0%,
        rgb(191 219 254 / 0.22) 45%,
        rgb(30 64 175 / 0.36) 78%,
        transparent 100%
    );
    mix-blend-mode: screen;
    opacity: 0.92;
}

.slide--acoustics .acoustic-content {
    position: relative;
    z-index: 1;
}

@supports not ((backdrop-filter: blur(1px))) {
    .slide--acoustics .acoustic-glass {
        background: linear-gradient(
            135deg,
            rgb(30 64 175 / 0.68) 0%,
            rgb(37 99 235 / 0.58) 35%,
            rgb(59 130 246 / 0.42) 100%
        );
    }
}

@media (min-width: 768px) {
    .slide--acoustics .acoustic-glass {
        width: min(100%, clamp(32rem, 52vw, 46rem));
    }
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1s ease,
        transform 1s ease;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background-color: white;
    color: black;
    box-sizing: border-box;
    padding-inline: clamp(2.5rem, 6vw, 5rem);
    transform: translate3d(5%, 0, 0);
}

.slide.bg-black {
    background-color: black;
    color: white;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

#thumbnail-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(12%);
    pointer-events: none;
    z-index: 50;
    background: rgb(0 0 0 / 0.9);
    backdrop-filter: blur(6px);
    transition:
        height 0.3s ease,
        padding 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

.thumbnail {
    display: block;
    width: clamp(5.5rem, 10vw, 7rem);
    aspect-ratio: 16 / 9;
    min-width: clamp(5.5rem, 10vw, 7rem);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background-color: #1f2937;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.thumbnail:hover {
    transform: scale(1.05);
    border-color: rgb(59 130 246 / 0.6);
}

.thumbnail.active {
    transform: scale(1.1);
    border-color: #3b82f6;
    box-shadow: 0 6px 18px rgb(59 130 246 / 0.45);
}

.thumbnail--placeholder {
    background-image: linear-gradient(135deg, #1f2937, #111827);
    color: #f3f4f6;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

video,
img.asset {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(0 0 0 / 0.3);
    color: white;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color 0.3s,
        opacity 0.3s;
    opacity: 0.6;
    z-index: 20;
}

.nav-arrow:hover {
    background-color: #1d4ed8;
    opacity: 1;
}

.nav-arrow:disabled {
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.font-slogan {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    padding-left: 50%;
    padding-top: 20%;
}

.text-shadow-sm {
    text-shadow: 1px 1px 3px rgb(0 0 0 / 0.5);
}

@keyframes scroll-words {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-50%);
    }
}

.scrolling-words-container {
    position: absolute;
    top: 0;
    right: 2%;
    bottom: 0;
    width: 10%;
    overflow: hidden;
}

.scrolling-words {
    position: absolute;
    width: 100%;
    animation: scroll-words 80s linear infinite;
}

.scrolling-words span {
    display: block;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: rgb(0 0 0);
    text-shadow: 1px 1px 5px rgb(0 0 0 / 0.8);
    margin: 0 auto 6rem;
    font-size: clamp(2rem, 6vw, 8rem);
}

@keyframes multicolor-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.multicolor-text {
    background: linear-gradient(90deg, #3498db, #e74c3c, #f1c40f, #2ecc71, #9b59b6, #3498db);
    background-size: 600% 100%;
    background-clip: text;
    color: transparent;
    animation: multicolor-animation 10s linear infinite;
}

.index-list li a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.1rem 0;
    transition:
        color 0.3s,
        transform 0.3s;
    transform-origin: left center;
}

.index-list li a:hover {
    color: #2dd4bf;
}

.index-list li .page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 0.5em;
    margin-left: 0.5em;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.85);
    color: #ffffff;
    text-align: right;
}

.title-color {
    color: #002060;
}

/* === INICIO: ESTILOS HERO SLIDE === */

/* CTA Button styles */
.cta-btn {
    display: block;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #002bff, #0099ff);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgb(0 43 255 / 0.2);
}

.cta-btn:hover {
    background: linear-gradient(135deg, #0099ff, #002bff);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(0 43 255 / 0.3);
    color: white;
}

#thumbnail-nav {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

#presentation-wrapper.show-thumbnails #thumbnail-nav {
    height: clamp(5rem, 16vh, 8rem);
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow: visible;
}

/* Altura del contenedor de miniaturas para que los .thumb ocupen el 100% */

#thumbnail-nav #thumbnail-container {
    height: 100%;
}

/* Miniaturas generadas por JS (.thumb) para ajustarse a la cinta inferior */
#thumbnail-container .thumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 16 / 9;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    flex: 0 0 auto;
    background-color: #1f2937;

    /* gris oscuro */
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#thumbnail-container .thumb img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}

#thumbnail-container .thumb:hover {
    transform: scale(1.03);
    border-color: rgb(59 130 246 / 0.6);
}

#thumbnail-container .thumb.active {
    transform: scale(1.05);
    border-color: #3b82f6;
    box-shadow: 0 6px 18px rgb(59 130 246 / 0.45);
}

#thumbnail-container .thumb .label {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.625rem;

    /* 10px */
    line-height: 1;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    padding: 2px 6px;
    border-radius: 0.25rem;
}

#presentation-wrapper,
#presentation-container,
.slide {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.slide video.asset {
    width: 100%;
    max-height: 100vh;
    object-fit: cover;
}

/* Uniformar altura de videos en diapositivas 8 y 9 */
.slide[data-page='08'] .series-video,
.slide[data-page='09'] .series-video,
.slide[data-page='10'] .series-video {
    /* ocupa el alto restante de la tarjeta */
    min-height: 0;
    height: 100%;
}

.slide[data-page='08'] .series-video video,
.slide[data-page='09'] .series-video video,
.slide[data-page='10'] .series-video video {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Igualar posición/alto de videos en Slide 08 */
.slide[data-page='08'] .series-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.slide[data-page='08'] .series-card .series-text {
    flex: 0 0 auto;

    max-height: 40vh;
    overflow: auto;
}

.slide[data-page='08'] .series-card .series-video {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-square {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 0.5;
    width: clamp(8rem, 40vw, 14rem);
    text-align: center;
    white-space: nowrap;
    margin-bottom: clamp(0rem, 0vh, 0rem);
}

.subtitle-stylemove {
    margin-top: -0.85rem;
    letter-spacing: normal;
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(0rem, 1vw, 0.6rem);
}

/* Reducir altura de imágenes en diapositivas 15 y 16 en 5% */
.slide[data-page='15'] img,
.slide[data-page='16'] img {
    height: 95% !important;
}

/* Recortar extra: slide 14 -10% y slide 15 -10% adicional */
.slide[data-page='14'] img {
    height: 90% !important;
}

.slide[data-page='15'] img {
    height: 85% !important;
}

/* Reducir 10% más en slide 16 (de 95% a 85%) */
.slide[data-page='16'] img {
    height: 85% !important;
}

/* Reducir a la mitad el espacio entre imagen y texto en slides 15 y 16 */
.slide[data-page='15'] .text-center p,
.slide[data-page='16'] .text-center p {
    margin-top: 0.25rem;
}

/* Compactar padding vertical del contenedor principal en slides 15 y 16 (mitad) */
.slide[data-page='15'] > div.p-4,
.slide[data-page='16'] > div.p-4 {
    padding-top: 0.5rem !important;

    padding-bottom: 0.5rem !important;
}

@media (min-width: 640px) {
    .slide[data-page='15'] > div.p-4,
    .slide[data-page='16'] > div.p-4 {
        padding-top: 0.75rem !important;

        padding-bottom: 0.75rem !important;
    }
}

@media (min-width: 1024px) {
    .slide[data-page='15'] > div.p-4,
    .slide[data-page='16'] > div.p-4 {
        padding-top: 1rem !important;

        padding-bottom: 1rem !important;
    }
}

.slide[data-page='15'] .text-center p.mt-0\.5,
.slide[data-page='16'] .text-center p.mt-0\.5 {
    margin-top: 0.125rem;
}

/* Slide 16: reducir espaciado vertical entre las 3 imágenes apiladas (columna de personalización) */
.slide[data-page='16'] .text-center .flex.flex-col.space-y-2 > * + * {
    margin-top: 0.125rem !important;
}

/* Ajustar altura máxima de las 3 imágenes apiladas (slide 16) */
.slide[data-page='16'] .text-center .flex.flex-col.space-y-2 > div {
    max-height: 178px !important;
}

.slide[data-page='16'] .text-center .flex.flex-col.space-y-2 img {
    height: 100% !important;
    max-height: 178px !important;
}

/* Reducir distancia vertical entre el bloque superior (grid) y el bloque de texto inferior en slides 15 y 16 */
.slide[data-page='15'] .flex-grow > .mt-2.flex-shrink-0,
.slide[data-page='16'] .flex-grow > .mt-2.flex-shrink-0 {
    margin-top: 0.125rem !important;
}

/* Slide 16: alinear contenido al inicio y evitar espacio inferior extra */

.slide[data-page='16'] > div.p-4 > div.flex-grow.flex.flex-col.justify-center {
    justify-content: flex-start !important;
}

/* Evitar que la columna con 3 imágenes apiladas crezca y deje espacio por debajo */
.slide[data-page='16'] .grid .text-center .flex.flex-col.justify-center {
    flex-grow: 0 !important;
}

/* Asegurar que no quede margen inferior residual dentro del stack */
.slide[data-page='16'] .text-center .flex.flex-col.space-y-2 > :last-child {
    margin-bottom: 0 !important;
}

/* Aún más compacto: reducir ligeramente el margen entre grid y bloque de texto inferior en la 16 */
.slide[data-page='16'] .flex-grow > .mt-2.flex-shrink-0 {
    margin-top: 0.0625rem !important;
}

/* Slide 16: compactar gap del grid de tarjetas */
.slide[data-page='16'] .grid {
    gap: 0.375rem !important;
}

/* Slide 15: compactar gap del grid de tarjetas */
.slide[data-page='15'] .grid {
    gap: 0.375rem !important;
}

/* Reducir a la mitad el espacio entre título (h2) e imágenes en slides 15 y 16 */
.slide[data-page='15'] h2,
.slide[data-page='16'] h2 {
    margin-bottom: 0.25rem !important;
}

.slogan-stretch {
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: bottom left;
}

.brand-stylemove {
    font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'Libre Franklin', Arial, sans-serif;
    color: white;
    display: inline-block;
    padding: clamp(0.4rem, 1.2vw, 0.65rem) clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1;
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.3s ease;
}

.hero-caption {
    max-width: 800px;
    width: 100%;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.hero-logo {
    display: block;
    margin: 0 auto;
    width: clamp(8rem, 25vw, 14rem);
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
    filter: drop-shadow(0 3px 10px rgb(0 0 0 / 0.4));
    transition: transform 0.3s ease;
}

.hero-title {
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    color: white;
    margin: 0;
    text-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
    letter-spacing: -0.01em;
}

.hero-subtitle {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
    white-space: nowrap;
}

.hero-tagline {
    font-size: clamp(1rem, 2.5vw, 1.75rem);
    font-weight: 300;
    color: rgb(255 255 255 / 0.95);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    text-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
    margin: 0;
}

/* Efecto electricidad para la marca en el hero */

/* Responsive adjustments */
@media (min-width: 768px) {
    .hero-subtitle {
        gap: clamp(1rem, 2.5vw, 1.5rem);
    }
}

@media (max-width: 767px) {
    .hero-caption {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .hero-subtitle {
        gap: clamp(0.5rem, 1.5vw, 0.75rem);
    }

    .hero-title {
        font-size: clamp(1.25rem, 4.5vw, 2.5rem);
    }

    .brand-stylemove {
        font-size: clamp(1.5rem, 5vw, 2.75rem);
    }
}

.slide::before {
    content: attr(data-page);
    position: absolute;
    bottom: clamp(1rem, 4vh, 2rem);
    left: clamp(1rem, 4vw, 2rem);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: rgb(255 255 255 / 0.8);
    background: rgb(0 0 0 / 0.35);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 30;
}

.slide.slide-hero {
    padding-inline: 0;
}

.slide.slide-hero::before {
    content: none;
}

.slide.slide-hero .asset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Overlay de contraste en la portada - ELIMINADO */
.slide-hero {
    position: relative;
}

.slide[data-page='02']::before {
    background: none;
    backdrop-filter: none;
    padding: 0;
}

.slide[data-page='22'] .acoustic-glass {
    display: none;
}

.full-bleed {
    margin-inline: calc(-1 * clamp(2.5rem, 6vw, 5rem));
    width: calc(100% + clamp(2.5rem, 6vw, 5rem) * 2);
}

.logo-white {
    filter: brightness(0) invert(1);
}

.stylewall-highlight {
    color: #002bff;
    font-size: 1.2em;
    font-weight: inherit;
}

/* Resalta styleMOVE en el carrusel de palabras */
.scrolling-words .stylemove-highlight {
    color: #002bff;
}

.slide-3-gradient {
    padding: 0;
}

.slide-3-pane {
    padding-block: clamp(1rem, 4vw, 3rem);
    padding-inline: 0;
}

.slide-3-text {
    padding-inline: clamp(1rem, 8vw, 10rem);
}

.slide[data-page='03'] {
    padding-inline: 0;
}

.slide[data-page='03'] > .bg-white {
    padding-inline: 0;
}

.slide[data-page='04'] {
    padding-inline: 0;
    /* Eliminar padding para que la imagen ocupe todo el ancho */
    align-items: stretch;
    /* Estirar el contenido */
}

.slide[data-page='04'] .asset {
    position: absolute;
    /* Posicionar la imagen para que cubra todo */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Asegurar que la imagen cubra sin deformarse */
}

/* Slide 05: limitar tamaño del video en alto y ancho dentro de la pantalla */
.slide[data-page='05'] .media-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    max-height: 42vh;
}

@media (min-width: 768px) {
    .slide[data-page='05'] .media-col {
        max-height: 80vh;
    }
}

.slide[data-page='05'] .media-col video {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

.slide[data-page='07'] {
    padding-inline: 0;
}

.slide-6-layout {
    gap: clamp(1rem, 4vh, 2.5rem);
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Utilidad genérica para contenedores con scroll interno cuando hay contenido extenso */
.slide .scroll-inner,
.scroll-inner {
    min-height: 0;
    overflow: auto;
}

.slide-6-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .slide-6-top {
        flex-direction: row;
        justify-content: center;
        text-align: left;
    }
}

.slide-6-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* Reducido de 2rem */
    flex-wrap: wrap;
}

.slide-6-icon {
    width: clamp(10.4rem, 28.6vw, 14.3rem);
    height: clamp(10.4rem, 28.6vw, 14.3rem);
    object-fit: contain;
}

.slide-6-text {
    max-width: min(60ch, 90%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vh, 1.25rem);
    text-align: justify;
}

.slide-6-video {
    width: min(95%, 1200px);
    flex: 0 0 auto;

    max-height: 32vh;
}

@media (min-width: 768px) {
    .slide-6-video {
        max-height: 36vh;
    }
}

.slide-6-video .asset {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slide[data-page='11'] {
    justify-content: center;
    align-items: center;
}

.slide[data-page='11'] p {
    text-align: justify;
}

.slide[data-page='12'] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1rem, 4vh, 2rem) clamp(2.5rem, 6vw, 5rem);
}

.slide[data-page='12'] > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slide[data-page='13'],
.slide[data-page='18'],
.slide[data-page='20'],
.slide[data-page='24'] {
    padding: 0;
    flex-direction: row;
    gap: 0;
}

.slide[data-page='13'] > *,
.slide[data-page='18'] > *,
.slide[data-page='20'] > *,
.slide[data-page='24'] > * {
    flex: 1 1 0;
    min-width: 0;
}

.slide[data-page='13'] img.asset,
.slide[data-page='18'] img,
.slide[data-page='20'] img,
.slide[data-page='24'] img.asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 640px) {
    .slide[data-page='18'],
    .slide[data-page='20'] {
        flex-direction: column;
    }

    .slide[data-page='18'] > .relative,
    .slide[data-page='20'] > .relative {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .slide[data-page='18'] img,
    .slide[data-page='20'] img {
        height: auto;
        max-height: none;
    }
}

/* Ajustes responsivos adicionales para la diapositiva 19 */
@media (max-width: 640px) {
    .slide[data-page='19'] .grid {
        grid-template-columns: 1fr !important;
    }

    .slide[data-page='19'] .text-xs {
        font-size: 0.875rem !important;
    }

    .slide[data-page='19'] img {
        max-width: 100% !important;
        height: auto !important;
    }
}

.detail-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    background-color: black;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 0.5em;
    float: left;
}

/* Alinear verticalmente los números (.detail-number) respecto al texto en la slide 14 */
.slide[data-page='14'] p {
    display: flex;
    align-items: center;
}

.slide[data-page='14'] .detail-number {
    float: none;
}

.slide[data-page='06'] .slide-6-layout {
    padding-top: clamp(0.5rem, 2vh, 1.25rem) !important;
}

.slide-hero .subtitle-stylemove {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.8rem, 3vh, 2.25rem);

    margin-top: clamp(0.25rem, 1vh, 0.75rem);
}

.slide-hero .title-square {
    /* asegurar línea propia y separación del subtítulo */
    display: block;
    margin-bottom: clamp(0.5rem, 2vh, 1.25rem);
}

/* Tipografía base para encabezados dentro de slides */
.slide h1,
.slide h2,
.slide h3 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

/* Tallas fluidas para subtítulos/títulos secundarios */
.slide h2 {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
}

.slide h3 {
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
}

/* Ritmo vertical de párrafos en slides */
.slide p {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
}

/* Efecto de difuminado para el video del mapa en la página 3 */
.map-video-blur {
    position: relative;
}

.map-video-blur::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    /* Degradado radial que difumina los bordes */
    background: radial-gradient(
        ellipse 70% 60% at center,
        transparent 0%,
        transparent 40%,
        rgb(30 58 138 / 0.3) 70%,
        rgb(30 58 138 / 0.8) 90%,
        rgb(30 58 138) 100%
    );
}

/* --- INICIO: EFECTO ELÉCTRICO UNIFICADO --- */

/* Anula estilos de .brand-stylemove que causan problemas fuera de la portada */
[data-page='02'] .brand-stylemove.texto-electricidad-stylemove {
    display: inline-block;
    aspect-ratio: auto;
    block-size: auto;
    padding: 0 0.2rem;
    line-height: 1;
    vertical-align: baseline;
    /* Alinea con el texto circundante */
    font-size: inherit;
    /* Hereda el tamaño del h2 */
}

/* Clase principal para el efecto eléctrico */
.texto-electricidad-stylemove,
.scrolling-words .stylemove-highlight {
    animation: electricidad-stylemove 1.6s ease-in-out infinite alternate;
    will-change: filter;
    display: inline-block;
    color: #ffffff !important;
    text-shadow:
        0 0 8px rgb(0 68 255 / 0.75),
        0 0 18px rgb(255 255 255 / 0.45);
    filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 16px #002bff) brightness(1.55);
    /* Asegura que el brillo sea visible sobre fondos oscuros */
    mix-blend-mode: screen;
}

/* Animación del efecto eléctrico */
@keyframes electricidad-stylemove {
    40% {
        filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px #002bff) brightness(1.5);
    }

    50% {
        filter: drop-shadow(0 0 2px #002bff) drop-shadow(0 0 6px #b9b2f2) brightness(1.2);
    }

    60% {
        filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px #002bff) brightness(1.7);
    }

    70% {
        filter: drop-shadow(0 0 4px #0f2bb4) drop-shadow(0 0 8px #dcd4ec) brightness(1.3);
    }

    80% {
        filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px #002bff) brightness(1.5);
    }

    90% {
        filter: drop-shadow(0 0 2px #002bff) drop-shadow(0 0 6px #c4c2e5) brightness(1.2);
    }

    100% {
        filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #002bff) brightness(1.2);
    }
}

/* --- FIN: EFECTO ELÉCTRICO UNIFICADO --- */

/* --- INICIO: ANIMACIÓN DE LOGOS (SLIDE DE MARCAS) --- */

/* 1. Definición del movimiento de la animación */
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
        /* Comienza a la derecha (fuera de la pantalla) */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* Termina alineado al centro */
    }
}

.sliding-logo {
    opacity: 0;
    transform: translateX(100%);
    will-change: transform, opacity;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.sliding-logo img {
    width: clamp(160px, 32vw, 280px);
    height: auto;
    object-fit: contain;
    max-width: 100%;
    filter: none;
}

/* 3. Definición de los retrasos (Delay de 0.5s entre cada uno) */
.sliding-logo.delay-1 {
    animation-delay: 0s !important;
}

.sliding-logo.delay-2 {
    animation-delay: 1s !important;
}

.sliding-logo.delay-3 {
    animation-delay: 2s !important;
}

.sliding-logo.delay-4 {
    animation-delay: 3s !important;
}

.sliding-logo.delay-5 {
    animation-delay: 4s !important;
}

.sliding-logo.delay-6 {
    animation-delay: 5s !important;
}

.sliding-logo.delay-7 {
    animation-delay: 6s !important;
}

.slide--brand-range.active .sliding-logo {
    animation-name: slide-in-right;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* Alinear logos al margen izquierdo (retenidos al finalizar la animación) */
.logo-animation-container {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Retardos de 1s entre logos (0s, 1s, 2s, …) — reafirmamos por claridad */
.sliding-logo.delay-1 {
    animation-delay: 0s !important;
}

.sliding-logo.delay-2 {
    animation-delay: 1s !important;
}

.sliding-logo.delay-3 {
    animation-delay: 2s !important;
}

.sliding-logo.delay-4 {
    animation-delay: 3s !important;
}

.sliding-logo.delay-5 {
    animation-delay: 4s !important;
}

.sliding-logo.delay-6 {
    animation-delay: 5s !important;
}

.sliding-logo.delay-7 {
    animation-delay: 6s !important;
}

/* Overlay inferior (logo + texto): entra al final, tras el último logo */
.slide--brand-range.active .brand-contact-overlay {
    animation-name: slide-in-right !important;
    animation-duration: 2s !important;
    animation-timing-function: ease-out !important;
    animation-fill-mode: forwards !important;
    animation-delay: 8s !important;
    /* último logo termina a los 8s (delay 6s + 2s) */
}

/* --- FIN: ANIMACIÓN DE LOGOS (SLIDE DE MARCAS) --- */

/* --- Slide 28: Fotocomposición de acabados --- */
.slide--other-finishes {
    color: #0f172a;
    background: radial-gradient(
        circle at 12% 20%,
        rgb(226 232 240 / 0.35) 0%,
        rgb(241 245 249 / 0.9) 55%,
        #ffffff 100%
    );
    padding-inline: clamp(2rem, 5vw, 5rem);
}

.other-finishes__inner {
    display: flex;
    flex: 1 1 auto;
    gap: clamp(1.5rem, 3.5vw, 4rem);
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    padding-block: clamp(1.5rem, 3vh, 2.75rem);
}

.other-finishes__left {
    flex: 0 1 80%;
    display: grid;
    place-items: center;
    position: relative;
}

.other-finishes__collage {
    position: relative;
    width: min(100%, 72rem);
    aspect-ratio: 16 / 9;
}

.collage__item {
    position: absolute;
    inset: auto;
    border-radius: clamp(1rem, 2vw, 1.75rem);
    overflow: hidden;
    box-shadow: 0 28px 60px rgb(15 23 42 / 0.25);
    transform-origin: center;
    isolation: isolate;
}

.collage__item--primary {
    top: 4%;
    left: 4%;
    width: 66%;
    height: 64%;
    transform: rotate(-3deg);
}

.collage__item--secondary {
    bottom: 2%;
    right: 2%;
    width: 58%;
    height: 64%;
    transform: rotate(4deg);
}

.collage__item:nth-child(3) {
    top: 3%;
    right: 18%;
    width: 30%;
    height: 34%;
    transform: translateY(-50%) rotate(9deg);
    z-index: 3;
}

.collage__item:nth-child(4) {
    bottom: 10%;
    left: 12%;
    width: 28%;
    height: 36%;
    transform: rotate(-11deg);
    z-index: 3;
}

.collage__item:nth-child(5) {
    top: 35%;
    left: 44%;
    width: 24%;
    height: 34%;
    transform: translateX(100%) rotate(6deg);
    z-index: 4;
}

.collage__item:nth-child(6) {
    bottom: 4%;
    right: 28%;
    width: 24%;
    height: 30%;
    transform: translateY(50%) rotate(-7deg);
    z-index: 2;
}

.collage__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.other-finishes__right {
    flex: 0 1 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1rem, 2.5vh, 2.5rem);
}

.other-finishes__title {
    font-size: clamp(2rem, 2.5vw + 1.5rem, 3rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.other-finishes__body {
    font-size: clamp(0.95rem, 0.7vw + 0.85rem, 1.2rem);
    line-height: 1.55;
    color: rgb(15 23 42 / 0.75);
    text-align: justify;
}

.other-finishes__logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.other-finishes__logo-card {
    background: transparent;
    border-radius: clamp(0.75rem, 2vw, 1.2rem);
    padding: clamp(0.6rem, 1.2vw, 1.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: 1px solid rgb(15 23 42 / 0.12);
}

.other-finishes__logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: none;
}

@media (max-width: 1024px) {
    .other-finishes__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .other-finishes__left,
    .other-finishes__right {
        flex: 1 1 auto;
        width: 100%;
    }

    .other-finishes__collage {
        aspect-ratio: 4 / 3;
    }

    .collage__item--primary,
    .collage__item--secondary {
        width: 70%;
        height: 62%;
    }

    .collage__item:nth-child(3) {
        width: 28%;
        height: 28%;
        right: 14%;
    }

    .collage__item:nth-child(4) {
        left: 10%;
    }

    .other-finishes__logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .other-finishes__collage {
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    .collage__item--primary,
    .collage__item--secondary {
        width: 75%;
        height: 55%;
        left: 12% !important;
        right: 12% !important;
    }

    .collage__item:nth-child(3),
    .collage__item:nth-child(4),
    .collage__item:nth-child(5),
    .collage__item:nth-child(6) {
        width: 40%;
        height: 28%;
    }

    .other-finishes__logos {
        grid-template-columns: 1fr;
    }
}

.slide[data-page='23'] {
    font-size: clamp(0.85rem, 1vw, 1rem);
    line-height: 1.2;
    padding-block: clamp(1.25rem, 1.25vh, 1rem);
}

.slide[data-page='23'] .text-\[0\.65rem\],
.slide[data-page='23'] .text-\[0\.6rem\],
.slide[data-page='23'] .text-\[0\.55rem\],
.slide[data-page='23'] .text-\[0\.5rem\],
.slide[data-page='23'] .lg\:text-xs {
    font-size: inherit !important;
    line-height: inherit;
}

.slide[data-page='23'] ul {
    margin-top: clamp(0.5rem, 1vh, 1rem);
    gap: clamp(0.4rem, 1vh, 0.8rem);
}

.slide[data-page='23'] li {
    line-height: inherit;
}

.slide[data-page='23'] .md\:pr-6 {
    padding-right: clamp(0.5rem, 1.5vw, 1.25rem);
}

.slide[data-page='23'] .md\:mt-0 {
    margin-top: clamp(0.25rem, 1.2vh, 0.75rem);
}

.slide[data-page='23'] .md\:w-1\/2:first-of-type {
    flex: 1 1 clamp(44%, 48vw, 52%);
}

.slide[data-page='23'] .md\:w-1\/2:last-of-type {
    flex: 1 1 clamp(48%, 52vw, 56%);
}

.slide[data-page='17'] .md\:w-1\/2:first-of-type .flex-1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide[data-page='17'] .md\:w-1\/2:first-of-type .flex-1 img {
    transform: scale(0.75);
    transform-origin: center;
}

.slide[data-page='23'] img.rounded.max-h-96 {
    max-height: clamp(26rem, 70vh, 40rem);
    width: min(100%, clamp(20rem, 50vw, 36rem));
    object-fit: cover;
}

/* --- Slide 24: Proyectos Destacados --- */

.slide--projects .projects-slide__inner {
    height: 100%;
    padding: clamp(1.25rem, 2vh + 1.1rem, 2.5rem) clamp(1.75rem, 5vw, 5.5rem);
    gap: clamp(0.75rem, 2vh, 1.5rem);
}

.slide--projects h2 {
    margin-bottom: clamp(0.5rem, 1.2vh, 1rem) !important;
}

.slide--projects .flex-grow {
    padding-bottom: clamp(0.5rem, 1.5vh, 1.25rem);
}

.slide--projects .projects-grid {
    width: 100%;
    max-width: min(58rem, 120vw);
    gap: clamp(0.75rem, 2.2vw, 1.75rem);
}

.aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
}

.slide--projects .project-card {
    min-height: 0;
    border-radius: clamp(1rem, 2.5vw, 1.75rem);
    padding-bottom: clamp(0.25rem, 0.4vh, 0.5rem);
}

.slide--projects .project-card img {
    aspect-ratio: 16 / 9;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgb(12 12 12 / 0.78);
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.18);
    backdrop-filter: blur(14px);
    box-shadow: 0 28px 60px rgb(0 0 0 / 0.55);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
    isolation: isolate;
    min-height: 100%;
}

/* Slide 24: forzar altura de card y evitar rebase del contenido */
.slide[data-page='24'] .project-card {
    height: clamp(18rem, 44vh, 22rem);
}

.slide[data-page='24'] .project-card__body {
    overflow: hidden;

    /* eliminar scroll vertical del texto */
}

/* Tipografía ajustada para que no rebase la altura en slide 24 */
.slide[data-page='24'] .project-card__title {
    font-size: clamp(0.9rem, 0.55vw + 0.8rem, 1.05rem);
}

.slide[data-page='24'] .project-card__meta {
    font-size: clamp(0.68rem, 0.3vw + 0.64rem, 0.85rem);
}

.slide[data-page='24'] .project-card__description {
    font-size: clamp(0.66rem, 0.3vw + 0.6rem, 0.84rem);
    line-height: 1.25;
}

.slide[data-page='24'] .project-card__body {
    gap: 0.08rem !important;

    /* antes: clamp(0.1rem, 0.18vw, 0.25rem) */
}

/* Quitar márgenes verticales propios de hijos (h3, p) para evitar acumulación con gap */
.slide[data-page='24'] .project-card__body > * {
    margin-top: 0.05rem !important;
    margin-bottom: 0.05rem !important;
}

/* Títulos y textos con line-height más ceñido */
.slide[data-page='24'] .project-card__title {
    line-height: 1.1 !important;
}

.slide[data-page='24'] .project-card__meta {
    line-height: 1.1 !important;
}

.slide[data-page='24'] .project-card__description {
    line-height: 1.18 !important;

    /* antes: 1.25 */
}

.project-card img,
.project-card__body {
    position: relative;
    z-index: 2;
}

.project-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.project-card__body {
    padding: clamp(0.6rem, 0.8vw, 1rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.18rem, 0.35vw, 0.45rem);
}

.slide--projects .project-card__body {
    padding: clamp(0.4rem, 0.6vw, 0.85rem);
    gap: clamp(0.15rem, 0.25vw, 0.35rem);
}

.project-card__title {
    font-size: clamp(1.15rem, 1vw + 1rem, 1.55rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f9fafb;
}

.slide--projects .project-card__title {
    font-size: clamp(1.05rem, 0.8vw + 0.95rem, 1.35rem);
}

.project-card__meta {
    font-size: clamp(0.9rem, 0.5vw + 0.85rem, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgb(226 232 240 / 0.75);
}

.slide--projects .project-card__meta {
    font-size: clamp(0.78rem, 0.35vw + 0.72rem, 0.95rem);
}

.project-card__description {
    font-size: clamp(0.82rem, 0.45vw + 0.75rem, 1rem);
    line-height: 1.45;
    color: rgb(226 232 240 / 0.88);
}

.slide--projects .project-card__description {
    font-size: clamp(0.75rem, 0.35vw + 0.7rem, 0.92rem);
    line-height: 1.35;
}

.project-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 34px 80px rgb(0 0 0 / 0.6);
}

.glow-card::before,
.glow-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.glow-card::before {
    inset: -8px;
    background:
        radial-gradient(
            120% 120% at 15% 15%,
            rgb(59 130 246 / 0.6) 0%,
            rgb(59 130 246 / 0.08) 45%,
            rgb(59 130 246 / 0) 70%
        ),
        radial-gradient(
            110% 110% at 85% 25%,
            rgb(59 130 246 / 0.45) 0%,
            rgb(59 130 246 / 0.07) 50%,
            rgb(59 130 246 / 0) 80%
        );
    filter: blur(22px);
    opacity: 0.7;
    animation: glowPulse 4.5s ease-in-out infinite;
}

.glow-card::after {
    border: 1px solid rgb(255 255 255 / 0.28);
    box-shadow:
        0 0 22px rgb(59 130 246 / 0.6),
        0 0 45px rgb(59 130 246 / 0.35);
    background: conic-gradient(
        from 0deg,
        rgb(59 130 246 / 0) 0deg,
        rgb(59 130 246 / 0.55) 95deg,
        rgb(59 130 246 / 0.08) 160deg,
        rgb(59 130 246 / 0.5) 230deg,
        rgb(59 130 246 / 0) 360deg
    );
    mix-blend-mode: screen;
    animation:
        sparkleSweep 7s linear infinite,
        glowFlicker 3.4s ease-in-out infinite;
}

.slide[data-page='24'] .glow-card:hover::after {
    box-shadow:
        0 0 28px rgb(59 130 246 / 0.7),
        0 0 70px rgb(59 130 246 / 0.45);
}

@keyframes glowPulse {
    0% {
        opacity: 0.55;
        transform: scale(0.98);
    }

    45% {
        opacity: 0.95;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.6;
        transform: scale(0.99);
    }
}

@keyframes sparkleSweep {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes glowFlicker {
    0%,
    100% {
        opacity: 0.55;
    }

    40% {
        opacity: 0.85;
    }

    55% {
        opacity: 0.35;
    }

    72% {
        opacity: 0.9;
    }
}

/* --- Slide 25: Galería de mantenimiento --- */

.maintenance-gallery {
    height: 100%;
    min-height: 100%;
    grid-auto-rows: 1fr;
    align-content: stretch;
    overflow: hidden;
}

.maintenance-gallery img {
    width: 100%;
    height: 100%;
    border-radius: 1.1rem;
}

@media (max-width: 1023px) {
    .maintenance-gallery {
        height: auto;
        min-height: 0;
        grid-template-rows: repeat(4, minmax(0, auto));
        grid-auto-rows: initial;
    }

    .maintenance-gallery img {
        height: auto;
        border-radius: 1rem;
    }
}

/* Animación del overlay 1s después del último logo */
.slide--brand-range.active .brand-contact-overlay {
    opacity: 0;
    transform: translateX(100%);
    animation-name: slide-in-right;
    animation-duration: 0.95s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 7s;
    /* último logo entra a 6s, overlay entra a 7s */
}

/* Slide 25: reducir ancho del bloque de fotos y ampliar texto proporcionalmente */
@media (min-width: 1024px) {
    .slide[data-page='25'] .maintenance-right {
        width: 0% !important;

        flex: 0 0 20% !important;
    }

    .slide[data-page='25'] .maintenance-left {
        width: 80% !important;
        flex: 0 0 80% !important;
    }
}

@media (min-width: 1280px) {
    .slide[data-page='25'] .maintenance-right {
        width: 20% !important;
        flex: 0 0 20% !important;
    }
}

/* Controles de idioma e índice: por defecto fondo negro, texto blanco */
#go-index,
#lang-toggle,
#lang-toggle-fr {
    background-color: rgb(0 0 0 / 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgb(255 255 255 / 0.15);
}

/* Hover consistente en negro */
#go-index:hover,
#lang-toggle:hover,
#lang-toggle-fr:hover {
    background-color: rgb(0 0 0) !important;
}

/* Estado activo de traducción: invertir colores (fondo blanco, texto negro) */
body.show-en #lang-toggle,
body.show-fr #lang-toggle-fr {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: rgb(0 0 0 / 0.2);
}

/* Ordenar los botones EN/FR en columna (FR debajo de EN) */
.lang-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Numeración de página en burbuja negra con texto blanco en todas las slides */
.slide::before {
    color: #ffffff !important;
    background: rgb(0 0 0 / 0.85) !important;
    border: 1px solid rgb(255 255 255 / 0.12);
}

/* Slide 29: chip de numeración sin fondo/borde (solo texto) */
.slide[data-page='29']::before {
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    /* color se mantiene según regla existente */
}

/* Slide 29: logo Stylewall blanco 1.3x en overlay de contacto */
.slide[data-page='29'] .brand-contact__logo {
    width: clamp(83px, 10.4vw, 125px) !important;
    /* 64→83, 8vw→10.4vw, 96→125 */
}

@media (max-width: 640px) {
    .slide[data-page='29'] .brand-contact__logo {
        width: 78px !important;
        /* 60→78 en móviles */
    }
}

/* Mensaje de advertencia para idiomas simultáneos */
#lang-warning {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #111827;
    background: #fde68a;
    /* amarillo suave */
    border: 1px solid #f59e0b;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    max-width: 18rem;
}

#lang-warning.hidden {
    display: none;
}

/* ================= Idiomas EN / FR (global) ================= */
/* Ocultar por defecto todas las variantes inglesas y francesas */
/* EN inline (dentro de títulos y textos en línea) */
.en-inline {
    display: none !important;
}

/* EN block (párrafos o bloques completos en inglés) */
.en-block {
    display: none !important;
}

/* EN bloques típicos en este proyecto: p/ul/li con clases italic text-gray-300/400/600 */
.slide p.italic.text-gray-300,
.slide p.italic.text-gray-400,
.slide p.italic.text-gray-600,
.slide ul.italic.text-gray-300,
.slide ul.italic.text-gray-400,
.slide ul.italic.text-gray-600,
.slide li.italic.text-gray-300,
.slide li.italic.text-gray-400,
.slide li.italic.text-gray-600 {
    display: none !important;
}

/* FR inline y bloques */
.fr-inline {
    display: none !important;
}

.fr-block {
    display: none !important;
}

/* Mostrar al activar los toggles (señalado en <body>) */
body.show-en .en-inline {
    display: inline !important;
}

/* Mostrar bloques completos EN al activar EN */
body.show-en .en-block {
    display: block !important;
}

body.show-en .slide p.italic.text-gray-300,
body.show-en .slide p.italic.text-gray-400,
body.show-en .slide p.italic.text-gray-600 {
    display: block !important;
}

body.show-en .slide ul.italic.text-gray-300,
body.show-en .slide ul.italic.text-gray-400,
body.show-en .slide ul.italic.text-gray-600 {
    display: block !important;
}

body.show-en .slide li.italic.text-gray-300,
body.show-en .slide li.italic.text-gray-400,
body.show-en .slide li.italic.text-gray-600 {
    display: list-item !important;
}

body.show-fr .fr-inline {
    display: inline !important;
}

/* revert respeta el display por defecto (p, li, ul, div...) */
body.show-fr .fr-block {
    display: revert !important;
}

/* Estilos consistentes para traducciones en todas las diapositivas */
/* Los spans dentro de títulos deben heredar el estilo del heading */
.slide h1 .en-inline,
.slide h1 .fr-inline,
.slide h2 .en-inline,
.slide h2 .fr-inline,
.slide h3 .en-inline,
.slide h3 .fr-inline,
.slide h4 .en-inline,
.slide h4 .fr-inline,
.slide h5 .en-inline,
.slide h5 .fr-inline,
.slide h6 .en-inline,
.slide h6 .fr-inline {
    font: inherit;
    color: inherit;
}

/* Unificar color/estilo para bloques EN/FR mostrados */
body.show-en .slide p.italic.text-gray-300,
body.show-en .slide p.italic.text-gray-400,
body.show-en .slide p.italic.text-gray-600,
body.show-en .slide ul.italic.text-gray-300,
body.show-en .slide ul.italic.text-gray-400,
body.show-en .slide ul.italic.text-gray-600,
body.show-en .slide li.italic.text-gray-300,
body.show-en .slide li.italic.text-gray-400,
body.show-en .slide li.italic.text-gray-600 {
    color: #9ca3af !important;
    /* gris consistente */
}

.slide .fr-block {
    font-style: italic;
    /* asegurar itálica */
    color: #9ca3af;
    /* gris consistente */
}

/* Utilidad de accesibilidad (centralizada) */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(50%);
    overflow: hidden;
}

/* --- Slide 25: centrar imágenes y evitar espacio sobrante a la derecha --- */
.slide[data-page='25'] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slide[data-page='25'] .flex-1 img,
.slide[data-page='25'] .flex-1 .w-full.h-full.object-contain {
    object-position: center center !important;
}

.slide[data-page='25'] .flex-1 > img,
.slide[data-page='25'] .flex-1 > div > img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.slide[data-page='25'] .flex.flex-col.md\:flex-row.gap-4.mt-4.min-h-0.justify-start > div,
.slide[data-page='25'] .flex.flex-col.lg\:flex-row.gap-6.lg\:gap-10.h-full > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overrides de scroll vertical seguro (no intrusivos) */

/* 1) Wrapper y contenedor: permitir scroll vertical global si algo se desborda */
#presentation-wrapper,
#presentation-container {
    overflow: hidden auto;
}

/* 2) Slides: scroll vertical interno cuando el contenido sea más alto que el viewport */
.slide {
    min-height: 100vh;
    /* ocupa al menos la pantalla */
    height: auto;
    /* permite crecer más allá del viewport */
    overflow: hidden auto;
    /* sin scroll horizontal, habilita scroll vertical cuando haga falta */
}

/* 3) Secciones especiales que bloqueaban el scroll */
.slide--acoustics {
    overflow: hidden auto;
}

.slide--brand-range {
    overflow: hidden auto;
}

/* 4) Página 29: permitir scroll si el contenido crece; quitar límite de altura */
.slide[data-page='29'] {
    max-height: none;
    /* quita el tope que impedía el scroll */
    overflow: hidden auto;
}

/* Nota: mantenemos overflow-x: hidden para evitar desbordes laterales. */

/* Altura de viewport consistente (fallback --vh y soporte 100dvh) */
:root {
    --vh: 1vh;
}

/* Wrapper y contenedor ocupan la altura visible del dispositivo */
#presentation-wrapper,
#presentation-container {
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Cada slide ajustada a pantalla, con scroll sólo si lo necesita */
.slide {
    min-height: calc(var(--vh, 1vh) * 100);
    height: auto;
    /* crecer si el contenido lo requiere */
    overflow: hidden auto;
    /* scroll interno cuando excede, sin scroll horizontal */
}

/* Mejora para hijos flex: evita desbordes y habilita contracción en ejes */
.slide > * {
    min-height: 0;
}

/* Usa 100dvh donde esté soportado (toma precedencia) */
@supports (height: 100dvh) {
    #presentation-wrapper,
    #presentation-container {
        height: 100dvh;
        min-height: 100dvh;
    }

    .slide {
        min-height: 100dvh;
    }
}

/* FIX layout: forzar contenedores a ocupar viewport y slides a llenar el contenedor */
@supports (height: 100dvh) {
    #presentation-wrapper,
    #presentation-container {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow-y: hidden !important;
        /* el scroll ocurre dentro de .slide */
    }
}

@supports not (height: 100dvh) {
    #presentation-wrapper,
    #presentation-container {
        height: calc(var(--vh, 1vh) * 100) !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
        overflow-y: hidden !important;
    }
}

/* Cada slide ocupa el alto del contenedor y scrollea internamente si lo requiere */
.slide {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden auto !important;
}

/* El contenedor no genera scroll adicional ni recorta contenido activo */
#presentation-container {
    overflow: hidden !important;
}

/* Asegurar flechas por encima de overlays/placas y burbujas ::before */
.nav-arrow {
    z-index: 60 !important;
}

/* Slide 12: eliminar sombreado y línea (borde) del contenedor superior y su imagen */
.slide[data-page='12'] .w-full.my-4,
.slide[data-page='12'] .w-full.my-4 img {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Slides 13/18/20: apilar en móvil y ocupar 100% de alto por bloque */
@media (max-width: 768px) {
    .slide[data-page='13'],
    .slide[data-page='18'],
    .slide[data-page='20'] {
        flex-direction: column !important;
    }

    .slide[data-page='13'] > .relative,
    .slide[data-page='18'] > .relative,
    .slide[data-page='20'] > .relative {
        width: 100%;
        height: calc(var(--vh, 1vh) * 100) !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
    }

    @supports (height: 100dvh) {
        .slide[data-page='13'] > .relative,
        .slide[data-page='18'] > .relative,
        .slide[data-page='20'] > .relative {
            height: 100dvh !important;
            min-height: 100dvh !important;
        }
    }

    /* Imágenes llenan el alto completo del bloque */
    .slide[data-page='13'] img,
    .slide[data-page='18'] img,
    .slide[data-page='20'] img {
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }
}

/* Slide 29: fondo degradado izq→der blanco→negro y texto en blanco */
.slide[data-page='29'] {
    background: linear-gradient(90deg, #ffffff 0%, #000000 100%) !important;
    color: #ffffff !important;
}

/* Slide 29: overlay inferior (logo + textos) a la derecha, sin fondo y en blanco */
.slide[data-page='29'] .brand-contact-overlay {
    right: clamp(0.5rem, 1.5vw, 1rem) !important;

    /* antes: clamp(1rem, 3vw, 2rem) o anclado por left */
    left: auto !important;

    /* fuerza anclaje derecho */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    align-items: flex-end !important;

    /* alinear contenido al borde derecho */
    text-align: right !important;

    /* texto alineado a la derecha */
    color: #ffffff !important;
}

.slide[data-page='29'] .brand-contact__info {
    color: #ffffff !important;
    text-align: right !important;
}

.slide[data-page='29'] .brand-contact__logo {
    display: block;
    margin-left: auto !important;

    /* empuja el logo al borde derecho */
    /* opcional: si el asset no es blanco, descomenta la siguiente línea */
    /* filter: brightness(0) invert(1); */
}

/* Slide 29: reducir 5% el tamaño de los logos animados */
.slide[data-page='29'] .sliding-logo img {
    width: clamp(190px, 34.2vw, 342px) !important;

    /* antes: clamp(200px, 36vw, 360px) */
}

/* Slide 28: reducir 5% la altura máxima de logos de terceros */
.slide[data-page='28'] .other-finishes__logo {
    max-height: clamp(96px, 14vh, 162px) !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Dar altura mínima suficiente a la tarjeta del logo */
.slide[data-page='28'] .other-finishes__logo-card {
    min-height: clamp(120px, 16vh, 200px) !important;
    padding: clamp(0.6rem, 1.2vw, 1.2rem) !important;
}

/* Slide 28: fotocomposición – volver al alto reducido (estado anterior) */
.slide[data-page='28'] .other-finishes__collage {
    aspect-ratio: 20 / 9 !important;
}

@media (max-width: 1024px) {
    .slide[data-page='28'] .other-finishes__collage {
        aspect-ratio: 5 / 3 !important;
    }
}

@media (max-width: 640px) {
    .slide[data-page='28'] .other-finishes__collage {
        aspect-ratio: 15 / 16 !important;
    }
}

/* Slide 29: texto bajo el título en negro */
.slide[data-page='29'] .brand-range__heading p {
    color: #000000 !important;
}

/* Slide 29: layout en 2 columnas (título+texto+logos izq, overlay Stylewall der) */
.slide[data-page='29'] .brand-range__inner {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    min-height: 100%;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
}

@media (min-width: 768px) {
    .slide[data-page='29'] .brand-range__inner {
        grid-template-columns: 2fr 1fr;
    }
}

.slide[data-page='29'] .brand-range__left,
.slide[data-page='29'] .brand-range__right {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Slide 29: overlay (logo Stylewall + textos) abajo y hacia el lado derecho con separación a la mitad */
.slide[data-page='29'] .brand-contact-overlay {
    position: absolute !important;
    left: auto !important;
    right: clamp(0.5rem, 1.5vw, 1rem) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
    align-items: flex-end !important;
    text-align: right !important;
}

/* Slide 26: +1 columna en las grillas de muestras (7/9/13) */
.slide[data-page='26'] .samples-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

@media (min-width: 640px) {
    .slide[data-page='26'] .samples-grid {
        grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .slide[data-page='26'] .samples-grid {
        grid-template-columns: repeat(13, minmax(0, 1fr)) !important;
    }
}

/* En pantallas pequeñas (apiladas): 100% del ancho y altura automática */
@media (max-width: 1023px) {
    .slide[data-page='25'] .maintenance-gallery img {
        width: 100% !important;
        height: auto !important;
    }
}

/* === ESTILOS ELIMINADOS PARA IGUALAR POSICIÓN CON ARCHIVO DE MUESTRA === */

/* Eliminar fondo y sombreado del slide hero para mostrar el video sin obstáculos */
.slide-hero {
    background-color: transparent !important;
    background-image: none !important;
}

.slide-hero::before,
.slide-hero::after {
    display: none !important;
}