/* ═══════════════════════════════════════════════════════════════
 nikitadekota.com
   Mobile first. Escalones: base (móvil) · 768 · 1024 · 1280
   ═══════════════════════════════════════════════════════════════ */

/* ── Tipografías ──────────────────────────────────────────────────
   D-DIN PRO © 2017 Datto Inc. — https://www.datto.com/fonts/d-din
   JetBrains Mono © 2020 The JetBrains Mono Project Authors
   Ambas bajo SIL Open Font License 1.1. Copia de las licencias en
   assets/fonts/OFL-D-DIN-PRO.txt y assets/fonts/OFL-JetBrainsMono.txt
   ──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "D-DIN PRO";
  src: url("../fonts/D-DIN-PRO-400-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "D-DIN PRO";
  src: url("../fonts/D-DIN-PRO-700-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Sin esto queda un marco blanco alrededor del fondo y aparece una
   barra de scroll: los 8 px de margen que trae el body de fábrica se
   suman a los 100vh del contenedor. */
body { margin: 0; }

/* El contenedor ocupa toda la pantalla y centra el contenido */
        .contenedor {
            display: flex;
            flex-direction: column; /* Apila los elementos verticalmente */
            justify-content: center; /* Centra verticalmente */
            align-items: center;    /* Centra horizontalmente */
            min-height: 100vh;      /* Altura completa del viewport */
            min-height: 100dvh;     /* en móvil, descontando la barra del navegador */
            margin: 0;
            background-color: #f5f5f5; /* Color de fondo opcional */
            font-family: sans-serif;
        }

        @media (max-width: 567px) {
          .imagen {
              width: 320px;  /* Cambia por tu ancho */
              height: auto;
          }
        }
        @media (min-width: 568px) and (max-width: 1023px) {
          .imagen {
              width: 450px;  /* Cambia por tu ancho */
              height: auto;
          }
        }
        @media (min-width: 1024px) and (max-width: 1279px) {
          .imagen {
              width: 500px;  /* Cambia por tu ancho */
              height: auto;
          }
        }
        @media (min-width: 1280px) {
          .imagen {
              width: 640px;  /* Cambia por tu ancho */
              height: auto;
          }
        }
        /* Estilos para el texto de abajo */
        .texto {
            margin-top: 20px; /* Separación entre la imagen y el texto */
            font-size: 24px;
            color: #00000099;
            font-weight: normal;
            font-family: "D-DIN PRO", sans-serif;
            text-align: center;
        }