/* Próximamente: logo al centro y un cartel que se enciende y se apaga como un tubo de luz. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/archivo.woff2) format("woff2");
}

:root {
  --fondo: #f4f7f8;
  --marino: #06273f;
  --petroleo: #014f5a;
  --agua: #28baa4;
  --apagado: #c9d6d9;
}

* { box-sizing: border-box; }

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

body {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(60rem 30rem at 50% 58%, rgb(40 186 164 / 0.07), transparent 70%),
    var(--fondo);
  color: var(--marino);
  font-family: "Archivo", system-ui, sans-serif;
}

::selection { background: var(--agua); color: var(--marino); }

main {
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 5vw, 3.25rem);
  width: min(100%, 40rem);
}

h1 { margin: 0; width: 100%; }

h1 img {
  display: block;
  width: 100%;
  height: auto;
}

.cartel {
  margin: 0;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 500;
  font-stretch: 125%;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  /* El tracking agrega aire a la derecha de la última letra: se compensa para centrar. */
  margin-right: -0.42em;
  color: var(--apagado);
}

.cartel > span > span {
  display: inline-block;
  animation: tubo 7s linear infinite;
}

/* Cada letra prende con su propio tartamudeo; algunas fallan de vez en cuando. */
.cartel > span > span:nth-child(3n + 1) { animation-delay: -0.4s; }
.cartel > span > span:nth-child(3n + 2) { animation-delay: -1.1s; }
.cartel > span > span:nth-child(4) { animation-name: tubo-falla; animation-duration: 5.3s; }
.cartel > span > span:nth-child(9) { animation-name: tubo-falla; animation-duration: 8.9s; animation-delay: -2s; }

.cartel .punto { animation-name: punto !important; animation-duration: 2.4s !important; }
.cartel .punto:nth-last-child(2) { animation-delay: 0.3s !important; }
.cartel .punto:last-child { animation-delay: 0.6s !important; }

@keyframes tubo {
  0%, 3%    { color: var(--apagado); text-shadow: none; }
  4%        { color: var(--petroleo); text-shadow: 0 0 0.5em rgb(40 186 164 / 0.55); }
  5%        { color: var(--apagado); text-shadow: none; }
  7%, 62%   { color: var(--petroleo); text-shadow: 0 0 0.35em rgb(40 186 164 / 0.6), 0 0 1.2em rgb(40 186 164 / 0.35); }
  63%       { color: var(--apagado); text-shadow: none; }
  64%, 90%  { color: var(--petroleo); text-shadow: 0 0 0.35em rgb(40 186 164 / 0.6), 0 0 1.2em rgb(40 186 164 / 0.35); }
  93%, 100% { color: var(--apagado); text-shadow: none; }
}

@keyframes tubo-falla {
  0%, 10%   { color: var(--apagado); text-shadow: none; }
  11%       { color: var(--petroleo); text-shadow: 0 0 0.5em rgb(40 186 164 / 0.55); }
  13%       { color: var(--apagado); text-shadow: none; }
  15%       { color: var(--petroleo); text-shadow: 0 0 0.35em rgb(40 186 164 / 0.6); }
  16%       { color: var(--apagado); text-shadow: none; }
  20%, 70%  { color: var(--petroleo); text-shadow: 0 0 0.35em rgb(40 186 164 / 0.6), 0 0 1.2em rgb(40 186 164 / 0.35); }
  71%, 72%  { color: var(--apagado); text-shadow: none; }
  73%, 88%  { color: var(--petroleo); text-shadow: 0 0 0.35em rgb(40 186 164 / 0.6), 0 0 1.2em rgb(40 186 164 / 0.35); }
  92%, 100% { color: var(--apagado); text-shadow: none; }
}

@keyframes punto {
  0%, 20%   { color: var(--apagado); text-shadow: none; }
  30%, 70%  { color: var(--agua); text-shadow: 0 0 0.5em rgb(40 186 164 / 0.7); }
  80%, 100% { color: var(--apagado); text-shadow: none; }
}

/* Sin movimiento: el cartel queda encendido, quieto. */
@media (prefers-reduced-motion: reduce) {
  .cartel > span > span { animation: none !important; color: var(--petroleo); }
}