/* Atril, el sitio: neo-retro. Grotesca enorme, cielo con grano, cajas blancas, ventanas de Mac clásico
   con letra pixelada, fondos de puntos. Casi sin JS: todo esto es CSS. */

:root {
  --ink: #161616;
  --paper: #ffffff;
  --fluor: #3dff6e;      /* fósforo verde, el de los monitores de COBOL */
  --phos: #4dff7c;
  --crt: #03100a;
  --gray: #c9c9c9;
  --grot: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --pix: "VT323", "Courier New", monospace;
  --mono: "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--grot); }
a { color: inherit; }

/* ---- la pantalla: un monitor apagado con fósforo verde que brilla, grano y líneas de barrido */
.sky {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 0 48px 36px;
  background:
    radial-gradient(34% 30% at 12% 24%, rgba(61,255,110,.38) 0%, rgba(61,255,110,.12) 40%, transparent 72%),
    radial-gradient(28% 28% at 90% 18%, rgba(61,255,110,.32) 0%, rgba(61,255,110,.1) 40%, transparent 72%),
    radial-gradient(40% 22% at 72% 56%, rgba(120,255,160,.18) 0%, transparent 72%),
    radial-gradient(36% 22% at 24% 62%, rgba(120,255,160,.14) 0%, transparent 72%),
    radial-gradient(60% 50% at 50% 50%, #0a2416 0%, var(--crt) 75%);
  overflow: hidden;
}
.sky::before, .sky::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sky::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 1 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen; opacity: .5;
}
/* líneas de barrido y el borde oscuro del vidrio */
.sky::after {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0,0,0,.55) 100%);
}
.sky > * { position: relative; z-index: 1; }

/* ---- navegación: cajas blancas sueltas */
/* tres columnas: el centro queda centrado de verdad, sea cual sea el ancho de los costados */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; }
.nav .brand { justify-self: start; }
.nav .mid, .nav .end { display: flex; gap: 6px; flex-wrap: wrap; }
.nav .end { justify-self: end; }
.chip {
  display: inline-block; background: var(--paper); color: var(--ink); text-decoration: none;
  font: 500 22px/1 var(--grot); letter-spacing: -.02em; padding: 10px 7px 9px;
}
.chip:hover { background: var(--ink); color: var(--paper); }
.chip.dark { background: var(--ink); color: var(--paper); }
.chip.dark:hover { background: #444; }
.chip.brand { font-weight: 600; }
.chip.big { font-size: 26px; padding: 14px 16px; border: 2px solid var(--ink); }
.chip.off { color: #888; border-color: #bbb; cursor: default; }
.chip.off:hover { background: var(--paper); color: #888; }

/* ---- ventanas de Mac clásico */
.win { background: #e9e9e9; border: 2px solid var(--ink); box-shadow: 0 0 0 1px #e9e9e9, 0 0 0 2px var(--ink); }
.win .wt { background: var(--ink); color: var(--paper); font: 24px/1.1 var(--pix); padding: 2px 6px; }
.win .wb { font: 24px/1.15 var(--pix); padding: 12px 14px; }
.news .wt { text-align: left; }


/* la misma altura: terminales a la izquierda, titular a la derecha, centrados en lo que queda de pantalla */
.stage {
  flex: 1; display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 5vw; padding: 4vh 0;
}
.huge {
  margin: 0; justify-self: end; text-align: right; font: 700 min(7.4vw, 16vh)/.9 var(--grot);
  letter-spacing: -.05em; color: var(--phos);
  text-shadow: 0 0 18px rgba(61,255,110,.55), 0 0 2px rgba(200,255,215,.9);
}

/* arriba, al centro: cuatro ventanas apiladas en un lugar de tamaño fijo, una visible a la vez */
.rotor { position: relative; width: 470px; max-width: 100%; height: 196px; }
/* la primera arranca ya visible (adelantada lo que dura su fundido), las otras esperan su turno */
.slide { position: absolute; inset: 0; opacity: 0; animation: turn 20s -0.6s infinite; }
.slide:nth-child(2) { animation-delay: 4.4s; }
.slide:nth-child(3) { animation-delay: 9.4s; }
.slide:nth-child(4) { animation-delay: 14.4s; }
@keyframes turn { 0% { opacity: 0; } 3%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
.slide.news .wb { display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.35; }
.slide.news a { display: inline-block; margin-top: 8px; }
.slide .wb { margin: 0; height: calc(100% - 28px); overflow: hidden; white-space: pre; font-size: 22px; line-height: 1.15; }
.slide b { font-weight: normal; text-decoration: underline; }
.slide i { font-style: normal; color: #555; }
@media (prefers-reduced-motion: reduce) {
  .slide { animation: none; }
  .slide:first-child { opacity: 1; }
}

/* ---- bajo el titular */
.lede { position: relative; padding: 30px 48px 90px; text-align: center; }
.vert {
  position: absolute; left: 22px; top: 40px; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 12px var(--mono); letter-spacing: .25em; color: #555;
}
.sub { max-width: 720px; margin: 10px auto 34px; font: 500 26px/1.3 var(--grot); letter-spacing: -.02em; }
.cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.count { font: 22px var(--pix); margin-top: 18px; }
.shot { max-width: 1240px; margin: 70px auto 0; text-align: left; }
.shot img { display: block; width: 100%; height: auto; border-top: 2px solid var(--ink); }

/* ---- la comparación */
.fluor { background: var(--fluor); padding: 70px 48px 30px; }
.dotted {
  position: relative; padding: 60px 40px 70px;
  background: radial-gradient(rgba(0,40,10,.45) 1px, transparent 1.2px) 0 0 / 6px 6px;
}
.tag { position: absolute; top: 0; left: 0; background: var(--ink); color: var(--paper); font: 26px var(--pix); padding: 0 6px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1240px; margin: 0 auto; }
/* el cuerpo de una terminal: una columna de casillas a la izquierda, como en la referencia */
.rows {
  white-space: pre; overflow: hidden; min-height: 400px;
  font: 15px/24px var(--mono) !important;
  padding: 8px 12px 8px 34px !important;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, var(--ink) 4px 18px, transparent 18px 24px) 6px 8px / 14px 100% no-repeat,
    linear-gradient(90deg, transparent 24px, var(--ink) 24px 26px, transparent 26px) 0 0 / 100% 100% no-repeat,
    var(--paper);
}
.term.gray .rows {
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, #555 4px 5px, transparent 5px 17px, #555 17px 18px, transparent 18px 24px) 6px 8px / 14px 100% no-repeat,
    linear-gradient(90deg, transparent 24px, var(--ink) 24px 26px, transparent 26px) 0 0 / 100% 100% no-repeat,
    var(--gray);
}
.rows b { font-weight: 700; }
.rows i { font-style: normal; color: #0b7a2e; }
.legend { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-top: 30px; font: 500 22px var(--grot); letter-spacing: -.02em; }
.legend span:nth-child(odd) { font-weight: 600; }

/* ---- lo que trae */
.feats { padding: 90px 48px; background: radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.2px) 0 0 / 6px 6px; }
.mid-h { margin: 0 0 40px; font: 700 clamp(44px, 7vw, 110px)/.9 var(--grot); letter-spacing: -.06em; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1240px; }
.grid .wb { background: var(--paper); min-height: 130px; font-size: 23px; }
tt { font: 20px var(--mono); }
mark { padding: 0 4px; color: var(--ink); }
mark.y { background: #ffe066; } mark.c { background: #a6e3f0; } mark.g { background: #a8ecbf; }

.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 26px 48px; background: var(--crt); color: var(--phos); font: 22px var(--pix); text-shadow: 0 0 6px rgba(61,255,110,.5);
}

/* ---- teléfono */
@media (max-width: 760px) {
  .sky, .lede, .fluor, .feats, .foot { padding-left: 16px; padding-right: 16px; }
  .nav { grid-template-columns: auto 1fr; }
  .nav .mid { display: none; }
  .chip { font-size: 18px; }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 32px; align-content: center; }
  .huge { order: -1; justify-self: center; text-align: center; }
  .rotor { width: 100%; height: 170px; }
  .slide .wb { font-size: 18px; }
  .huge { font-size: 11.5vw; }
  .vert { display: none; }
  .sub { font-size: 20px; }
  /* minmax(0, …): una columna no se ensancha por el texto que no se corta (las terminales) */
  .pair, .grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dotted { padding: 44px 10px 30px; }
  .rows { min-height: 0; font-size: 11px !important; }
  .legend { grid-template-columns: 1fr 1fr; font-size: 17px; }
}

/* ---- definitivo: instrucciones, captura, preguntas, accesibilidad */
.how { max-width: 620px; margin: 10px auto 0; font: 500 17px/1.4 var(--grot); color: #444; }
figure.shot { margin-left: auto; margin-right: auto; }
figcaption.wt { display: block; }
h3.wt { margin: 0; font-weight: normal; }
.faq { padding: 90px 48px; max-width: 1336px; }
.faq details { border: 2px solid var(--ink); background: var(--paper); margin-bottom: 14px; max-width: 900px; }
.faq summary { cursor: pointer; background: var(--ink); color: var(--paper); font: 24px/1.2 var(--pix); padding: 6px 10px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "▸ "; }
.faq details[open] summary::before { content: "▾ "; }
.faq p { margin: 0; padding: 14px 16px; font: 500 19px/1.45 var(--grot); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--fluor); outline-offset: 2px; }
@media (max-width: 760px) {
  .faq { padding: 60px 16px; }
  .faq p { font-size: 17px; }
}

/* el comando de instalación, con su botón de copiar */
.cmd { max-width: 720px; margin: 34px auto 0; text-align: left; }
.cmd + .cmd { margin-top: 18px; }
.cmd .wb { display: flex; align-items: center; gap: 12px; background: #020a05; padding: 12px 14px; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--phos); font: 16px var(--mono); }
.copy { flex: none; background: var(--paper); color: var(--ink); border: 0; font: 20px var(--pix); padding: 2px 10px; cursor: pointer; }
.copy:hover { background: var(--fluor); }
@media (max-width: 760px) { .cmd code { font-size: 12px; } }

/* pestañas de sistema: la elegida en negro */
.tab { cursor: pointer; background: var(--paper); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.os-panel .cmd { margin-top: 26px; }
.os-panel .how { margin-top: 12px; }
.cmd.soon .wb { color: var(--phos); font: 26px var(--pix); background: #020a05; }
@media (max-width: 760px) { .tab.big { font-size: 19px; padding: 10px 12px; } }