/* ═══════════════════════════════════════════════════════════════
 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: #E6007E; /* 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: 18px;
            color: #fff;
            font-weight: normal;
            font-family: "D-DIN PRO", sans-serif;
            text-align: center;
        }
        .textotit {
            margin-top: 20px; /* Separación entre la imagen y el texto */
            font-size: 36px;
            color: #000000a9;
            font-weight: 700;
            font-family: "D-DIN PRO", sans-serif;
            text-align: center;
        }


/* ═══════════════════════════════════════════════════════════════
   NEÓN — encendido de los tubos, uno a uno
   ---------------------------------------------------------------
   Cada shape rosa fuerte del SVG lleva su turno en `--orden`, del 0
   al 23, y arranca ese tanto más tarde. Empieza apagada (deja ver el
   blob rosa claro de debajo), pega el fogonazo por encima del color
   final, y se asienta en el rosa de la marca con un halo suave.
   Todo lo que se toca para ajustarlo está en este bloque.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --neon-color:     #e6007e;   /* color del tubo ya encendido */
  --neon-fogonazo:  #ffffff;   /* punto más alto del destello */
  --neon-medio:     #ff5bb5;   /* color al que baja tras el fogonazo */
  --neon-halo:      #ff2fa0;   /* color del resplandor */

  --neon-espera:    .45s;      /* pausa antes de encender el primero */
  --neon-duracion:  .9s;       /* lo que tarda un tubo en encenderse */
}

/* ── Orden de encendido ──────────────────────────────────────────
   Hay tres secuencias montadas. Está activa la primera; para cambiar,
   comenta ésa y descomenta la que quieras. Cada una trae el paso que
   le sienta bien, porque no es lo mismo repartir 3 turnos que 24.
   ──────────────────────────────────────────────────────────────── */

/* A · POR ANILLOS — las ocho letras a la vez, de dentro afuera.
      Tres pulsos: primero los tubos internos de todas las letras,
      luego los medios, luego los externos.*/
.neon { --secuencia: var(--anillo);       --neon-paso: .7s; }

/* B · LETRA A LETRA, concéntrico — los 24 tubos uno detrás de otro,
      primero todos los internos, luego los medios, luego los externos.
.neon { --secuencia: var(--orden);        --neon-paso: .16s; }*/


/* C · RADIAL — del centro de la composición hacia los extremos.
.neon { --secuencia: var(--orden-radial); --neon-paso: .16s; }*/


.neon {
  fill: var(--neon-color);
  fill-opacity: 0;
  animation: neon-encender var(--neon-duracion) ease-out both;
  animation-delay: calc(var(--neon-espera) + var(--secuencia) * var(--neon-paso));
}

@keyframes neon-encender {
  0% {
    fill: var(--neon-fogonazo);
    fill-opacity: 0;
    filter: none;
  }
  22% {                                   /* fogonazo */
    fill: var(--neon-fogonazo);
    fill-opacity: 1;
    filter: drop-shadow(0 0 4px #fff)
            drop-shadow(0 0 18px var(--neon-halo))
            drop-shadow(0 0 34px var(--neon-halo));
  }
  45% {                                   /* baja de golpe */
    fill: var(--neon-medio);
    fill-opacity: 1;
    filter: drop-shadow(0 0 3px var(--neon-medio))
            drop-shadow(0 0 14px var(--neon-halo));
  }
  100% {                                  /* se queda montado */
    fill: var(--neon-color);
    fill-opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .35));
  }
}

/* Con «reducir movimiento» activado, el rótulo aparece ya encendido. */
@media (prefers-reduced-motion: reduce) {
  .neon {
    animation: none;
    fill: var(--neon-color);
    fill-opacity: 1;
  }
}

/* El SVG incrustado ocupa el sitio que tenía la imagen. */
svg.imagen { height: auto; display: block; overflow: visible; }