/*
 * Los seis diseños de la plantilla CNP 2026, con las mismas zonas que el PowerPoint (medidas en %
 * sacadas del archivo .pptx). Los bordes y triángulos los coloca js/plantilla.js.
 *
 *   portada   - fondo oscuro, logo grande al centro.
 *   oscuro    - fondo oscuro, título lima y texto blanco.
 *   claro     - fondo claro, título verde, texto azul y logo a color abajo a la derecha.
 *   dividido  - panel claro a la izquierda con frase destacada; lado oscuro con título y texto.
 *   columnas  - mitad clara y mitad oscura, una columna de texto en cada una.
 *   seccion   - fondo oscuro, logo arriba a la izquierda y título centrado.
 */

.diapositiva {
    position: absolute;
    inset: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateX(var(--entrada, 60px));
    transition: opacity .5s var(--curva), transform .6s var(--curva), visibility 0s linear .6s;
    font-family: var(--fuente-texto);
}

.diapositiva.es-activa {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--curva), transform .6s var(--curva), visibility 0s;
}

.diapositiva.es-anterior {
    --entrada: -60px;
}

/* ---------------------------------------------------------------- fondos */

.diapositiva--portada,
.diapositiva--oscuro,
.diapositiva--seccion,
.diapositiva--dividido {
    background: #0b2c57 url("../assets/plantilla/fondo-oscuro.png") center / cover no-repeat;
    color: var(--texto-oscuro);
}

.diapositiva--claro {
    background: #f6f7f9 url("../assets/plantilla/fondo-claro.png") center / cover no-repeat;
    color: var(--azul);
}

/* Mitad clara a la izquierda, mitad oscura a la derecha (diseño 5). */
.diapositiva--columnas {
    background:
        url("../assets/plantilla/fondo-oscuro.png") right center / 50.12% 100% no-repeat,
        #f6f7f9 url("../assets/plantilla/fondo-claro.png") left center / cover no-repeat;
    color: var(--azul);
}

/* Panel claro del diseño 4: ocupa el 45 % izquierdo. */
.diapositiva--dividido::before {
    content: "";
    position: absolute;
    inset: 0 55% 0 0;
    background: var(--panel-claro);
}

/* ---------------------------------------------------------------- capas */

.plantilla {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.plantilla img {
    position: absolute;
    max-width: none;
    object-fit: fill;
}

/* Los triángulos pequeños flotan despacio; el logo entra con un leve rebote. */
.diapositiva.es-activa .plantilla .flota {
    animation: flotar 7s ease-in-out var(--retraso, 0s) infinite;
}

.diapositiva.es-activa .plantilla .logo {
    animation: entrar-logo .9s var(--resorte) .1s both;
}

@keyframes flotar {
    0%, 100% { transform: var(--giro) translate(0, 0); }
    50% { transform: var(--giro) translate(6px, -14px); }
}

@keyframes entrar-logo {
    from { opacity: 0; transform: var(--giro) scale(.86); }
    to { opacity: 1; transform: var(--giro) scale(1); }
}

.contenido {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.numero {
    position: absolute;
    right: 3%;
    bottom: 4.2%;
    z-index: 2;
    font: 700 var(--t-mini) / 1 var(--fuente-titulo);
    letter-spacing: .04em;
    opacity: .75;
}

.diapositiva--claro .numero,
.diapositiva--columnas .numero {
    right: 3%;
    color: var(--azul);
}

.diapositiva--dividido .numero,
.diapositiva--columnas .numero {
    color: var(--texto-oscuro);
}

.diapositiva--portada .numero {
    display: none;
}

/* ---------------------------------------------------------------- tipografía */

.titulo {
    margin: 0 0 .45em;
    font: 900 var(--t-titulo) / 1.14 var(--fuente-titulo);
    /* Montserrat Black dibuja tildes y descendentes un poco fuera de la línea: margen para que no se corten. */
    padding-block: .04em;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--lima);
}

.diapositiva--claro .titulo,
.columna--clara .titulo {
    color: var(--verde);
}

.antetitulo {
    margin: 0 0 .6em;
    font: 700 var(--t-pequeno) / 1.2 var(--fuente-titulo);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-oscuro-suave);
}

.diapositiva--claro .antetitulo,
.columna--clara .antetitulo {
    color: var(--verde);
}

.texto {
    margin: 0 0 .7em;
    font: 500 var(--t-texto) / 1.38 var(--fuente-texto);
}

.texto--pequeno {
    font-size: var(--t-pequeno);
}

.destacado {
    margin: 0;
    font: 800 var(--t-destacado) / 1.16 var(--fuente-titulo);
    color: var(--azul);
}

.destacado em {
    font-style: normal;
    color: var(--verde);
}

/* ---------------------------------------------------------------- zonas por diseño */

/* Portada: el logo va centrado (lo pone plantilla.js); el texto queda debajo. */
.diapositiva--portada .contenido {
    left: 18%;
    right: 18%;
    bottom: 7%;
    align-items: center;
    text-align: center;
}

/* Diseño 2: título en 8,6 % / 12,8 %; texto desde el 22,9 %. */
.diapositiva--oscuro .contenido {
    top: 12.8%;
    left: 8.6%;
    right: 8%;
    bottom: 12%;
}

/* Diseño 3: título en 9,2 % / 22 %; el logo ocupa la esquina inferior derecha. */
.diapositiva--claro .contenido {
    top: 15%;
    left: 9.2%;
    right: 9%;
    bottom: 21%;
}

/* Diseño 4: frase en el panel claro (3,6 % / 37,4 %) y contenido a la derecha (47,7 %). */
.diapositiva--dividido .contenido--izquierda {
    top: 30%;
    left: 3.6%;
    width: 37%;
    bottom: 10%;
}

.diapositiva--dividido .contenido--derecha {
    top: 14%;
    left: 50%;
    right: 4%;
    bottom: 10%;
}

/* Diseño 5: dos columnas, cada una en su mitad. */
.diapositiva--columnas .contenido--izquierda {
    top: 27%;
    left: 3.6%;
    width: 42%;
    bottom: 9%;
}

.diapositiva--columnas .contenido--derecha {
    top: 14%;
    left: 53.5%;
    right: 4%;
    bottom: 9%;
    color: var(--texto-oscuro);
}

/* Diseño 6: título centrado (28,8 % / 48,5 %). */
.diapositiva--seccion .contenido {
    top: 36%;
    left: 12%;
    right: 12%;
    bottom: 8%;
    align-items: center;
    text-align: center;
}

/* El panel claro del diseño 4 usa los colores del fondo claro. */
.diapositiva--dividido .contenido--izquierda {
    color: var(--azul);
}