/* === FONTS === */
@font-face {
  font-family: 'EuropeanTeletext';
  src: url('Fonts/european_teletext/EuropeanTeletext.ttf') format('truetype');
}
@font-face {
  font-family: 'CeefaxTeletext';
  src: url('Fonts/ceefax-teletext-1.otf/ceefax-teletext-1.otf') format('opentype');
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* === BASE === */
body {
  background: #0F0F0F;
  color: #CDCDCD;
  font-family: 'EuropeanTeletext', monospace;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-size: 22px;
  line-height: 1;
}

/* === SCREEN === */
.screen {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px;
  overflow-x: clip;
}

/* === SPA === */
.page { display: none; }
.page.active { display: block; }
/* Home needs min-height for fixed footer */
#home.active {
  min-height: calc(100vh - 16px);
}

/* === ROW LAYOUTS === */
.row {
  display: flex;
  align-items: center;
  min-height: calc(1em + 2px);
}
.row-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(1em + 2px);
}
.row-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(1em + 2px);
}
.row-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1em + 2px);
}

/* === COLORED BOX (inline label, fit-to-content) === */
.bx {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
  white-space: nowrap;
  line-height: 1;
}

/* === FULL-WIDTH LABEL (spans entire row) === */
.label {
  display: flex;
  align-items: center;
  padding: 1px 4px;
  width: 100%;
  line-height: 1;
  min-height: calc(1em + 2px);
}

/* === COLORS: Text === */
.azul     { color: #0200D2; }
.amarillo { color: #F1EA00; }
.rojo     { color: #C9000A; }
.gris     { color: #CDCDCD; }
.verde    { color: #23D947; }
.turquesa { color: #10E7EC; }
.negro    { color: #0F0F0F; }
.fucsia   { color: #F717B3; }

/* === COLORS: Background === */
.bg-azul     { background: #0200D2; }
.bg-amarillo { background: #F1EA00; }
.bg-rojo     { background: #C9000A; }
.bg-gris     { background: #CDCDCD; }
.bg-verde    { background: #23D947; }
.bg-turquesa { background: #10E7EC; }
.bg-fucsia   { background: #F717B3; }

/* === LOGO — now FUCSIA === */
.logo {
  background: #F717B3;
  width: 100%;
  position: relative;
  height: calc((1em + 2px) * 4);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.logo-text {
  font-family: 'CeefaxTeletext', monospace;
  color: #0F0F0F;
  font-size: 2.5em;
  line-height: 1.05;
  padding: 0 4px;
  transform: scaleX(1.35);
  transform-origin: left center;
}

.logo-overlay {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
}

/* === Todo junto — zero spacing === */
.page.active > *:not(.footer):not(.footer-back) { margin: 0; padding-top: 0; padding-bottom: 0; }
.page.active > a.link { margin: 0; }

/* === TEXT INDENT (not flush left) === */
.txt { padding-left: 6px; white-space: nowrap; }

/* === DOTS (fill space between text and page number) === */
.dots {
  flex: 1 1 0px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* === LINKS === */
a { text-decoration: none; color: inherit; }
.link { display: block; cursor: pointer; }
.link:hover { opacity: 0.85; }

/* === HOME FOOTER — always anchored to viewport bottom === */
.footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: #0F0F0F;
  text-align: center;
  padding: 10px 8px;
  z-index: 10;
}

/* === BACK — always in flow, 2 lines after content === */
.footer-back {
  padding: calc((1em + 2px) * 2) 0 12px;
  flex-shrink: 0;
}

/* === BANNER (L20): two blocks fill exact line 1 width === */
.banner {
  display: flex;
  max-width: 100%;
  overflow: hidden;
}
.banner-left {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  white-space: nowrap;
  line-height: 1;
}
.banner-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  white-space: nowrap;
  line-height: 1;
}

/* === TICKER / CINTILLO (L21) === */
.ticker-wrap {
  overflow: hidden;
  width: 100%;
  min-height: calc(1em + 2px);
}

.ticker {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker-scroll 15s steps(30) infinite;
}

.ticker .bx {
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === TELETEXT FORM === */
.tt-form {
  width: 100%;
}

/* Bordered input container */
.tt-box {
  border: 2px solid #CDCDCD;
  padding: 4px 6px;
  width: 100%;
  min-height: calc(1em + 12px);
}

.tt-box.b-verde    { border-color: #23D947; }
.tt-box.b-amarillo { border-color: #F1EA00; }
.tt-box.b-turquesa { border-color: #10E7EC; }

/* Filled input container (colored bg) */
.tt-box-fill {
  padding: 4px 6px;
  width: 100%;
}

/* Text input inside box */
.tt-input {
  background: none;
  border: none;
  font-family: 'EuropeanTeletext', monospace;
  font-size: 1em;
  line-height: 1.3;
  padding: 0;
  width: 100%;
  outline: none;
  -webkit-font-smoothing: none;
}

/* Textarea inside box */
.tt-textarea {
  background: none;
  border: none;
  font-family: 'EuropeanTeletext', monospace;
  font-size: 1em;
  line-height: 1.3;
  padding: 0;
  width: 100%;
  outline: none;
  resize: none;
  -webkit-font-smoothing: none;
}

.tt-input::placeholder,
.tt-textarea::placeholder {
  opacity: 0.5;
}

/* Radio option as text line */
.tt-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 6px;
  min-height: calc(1em + 2px);
}

.tt-option input[type="radio"] {
  display: none;
}

.tt-option input[type="radio"]:checked + span {
  color: #F1EA00;
}

/* Submit button */
.tt-btn {
  background: none;
  font-family: 'EuropeanTeletext', monospace;
  font-size: 1em;
  border: none;
  cursor: pointer;
  line-height: 1;
  -webkit-font-smoothing: none;
}

.tt-btn:hover {
  opacity: 0.85;
}

/* === CRT SCANLINES — covers entire site === */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 999999;
}

/* === CRT VIGNETTE === */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
  z-index: 999998;
}


/* === CRT TURN ON EFFECT === */
.screen {
  animation: crtOn 0.8s ease-out;
}

@keyframes crtOn {
  0% {
    opacity: 0;
    clip-path: inset(49.5% 25% 49.5% 25%);
    filter: brightness(10);
  }
  30% {
    opacity: 1;
    clip-path: inset(49.5% 0 49.5% 0);
    filter: brightness(10);
  }
  50% {
    clip-path: inset(0 0 0 0);
    filter: brightness(2);
  }
  100% {
    clip-path: inset(0 0 0 0);
    filter: brightness(1);
  }
}

/* === BLINK — teletext style === */
.blink {
  animation: teletextBlink 1s steps(1) infinite;
}

@keyframes teletextBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* === RESPONSIVE === */
@media (max-width: 380px) {
  body { font-size: 20px; }
}
@media (max-width: 340px) {
  body { font-size: 18px; }
}