/*
 * Base: colores de la plantilla CNP 2026 y el escenario de 1920 x 1080 px.
 * El escenario siempre mide lo mismo y js/presentacion.js lo escala para llenar la pantalla, así
 * cada diapositiva se ve idéntica en el portátil, el proyector o un televisor.
 * Medidas: la plantilla mide 720 x 405 pt, así que 1 pt de PowerPoint = 2,667 px aquí.
 */

:root {
    /* Colores tomados de la plantilla. */
    --lima: #aff949;          /* Títulos sobre fondo oscuro. */
    --verde: #74b634;         /* Títulos sobre fondo claro. */
    --azul: #00517e;          /* Texto sobre fondo claro. */
    --azul-noche: #00305c;    /* Frases destacadas. */
    --panel-claro: #f3f3f3;   /* Panel claro de las diapositivas divididas. */
    --cian: #2ec4c9;
    --morado: #7b2fd1;
    --naranja: #ff9a1f;
    --blanco: #ffffff;
    --texto-oscuro: rgba(255, 255, 255, .92);
    --texto-oscuro-suave: rgba(255, 255, 255, .7);
    --linea-oscuro: rgba(255, 255, 255, .16);
    --linea-claro: rgba(0, 81, 126, .16);

    /* Tamaños de la plantilla (pt x 2,667). */
    --t-titulo: 88px;         /* 33 pt */
    --t-destacado: 64px;      /* 24 pt */
    --t-texto: 40px;          /* 15 pt */
    --t-pequeno: 30px;
    --t-mini: 24px;

    --fuente-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
    --fuente-texto: "Montserrat", "Open Sans", "Segoe UI", Arial, sans-serif;
    --fuente-codigo: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", monospace;

    --curva: cubic-bezier(.22, .61, .36, 1);
    --resorte: cubic-bezier(.34, 1.56, .64, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    background: #04162b;
    color: var(--blanco);
    font-family: var(--fuente-texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

/* Escenario fijo de 1920 x 1080 que se escala para llenar la ventana. */
.escenario {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--escala, 1));
    transition: left .35s var(--curva), transform .35s var(--curva);
}

.icono {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.14em;
}

/* Lo que aún hay que completar se ve a simple vista, para no olvidarlo antes de la final. */
.pendiente {
    padding: 0 .25em;
    border-radius: 6px;
    outline: 3px dashed var(--naranja);
    outline-offset: 2px;
}

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
    }
}