/* Círculo Vicioso: la estetica de siempre (crema sobre negro, bordes finos, Redaction + Space Mono,
   el degrade y el rosa), ordenada y comoda en el celular y en la compu. */
@font-face { font-family: "Redaction 50"; src: url("/fonts/Redaction50-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Redaction 35"; src: url("/fonts/Redaction35-Regular.otf") format("opentype"); font-display: swap; }

:root {
  --bg: #211c1f;
  --bg-2: #2a2427;
  --bg-3: #332c30;
  --fg: #f3f7e2;
  --fg-2: rgba(243, 247, 226, .72);
  --fg-3: rgba(243, 247, 226, .5);
  --line: rgba(243, 247, 226, .9);
  --line-soft: rgba(243, 247, 226, .18);
  --accent: #ee2d6f;
  --ok: #8fd6a0;
  --mono: "Space Mono", ui-monospace, monospace;
  --display: "Redaction 50", Georgia, serif;
  --display-2: "Redaction 35", Georgia, serif;
  --gutter: 32px;
  --max: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.6 var(--mono); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--fg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--fg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.envoltura { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Cabecera: el logo, el degrade y el menu ── */
.cab { margin: 20px auto 0; }
.cab__marca { display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--line); }
.cab__logo { display: block; padding: 18px 22px; }
.cab__logo img { width: clamp(180px, 34vw, 528px); height: auto; }
.cab__degrade { background: url("/images/svg-gradient_cv.svg") center / cover no-repeat; margin: 6px 6px 6px 0; }
.nav { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-top: 0; }
.nav a { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-right: 1px solid var(--line);
  font: italic 400 13px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--fg); color: var(--bg); }
.nav a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.nav a .ext { font-style: normal; opacity: .6; }
.nav__fin { margin-left: auto; border-right: 0 !important; border-left: 1px solid var(--line); }

/* ── Piezas ── */
.caja { border: 1px solid var(--line); background: var(--bg); }
.caja__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.caja__cuerpo { padding: 18px; }
.rotulo { font: 400 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); margin: 0; }
.titulo { font: 400 clamp(26px, 4vw, 40px)/1.08 var(--display); text-transform: uppercase; margin: 0; letter-spacing: .005em; }
.titulo-2 { font: 400 clamp(20px, 2.6vw, 26px)/1.15 var(--display); text-transform: uppercase; margin: 0; }
.chico { font-size: 12px; color: var(--fg-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--line);
  background: transparent; color: var(--fg); font: 400 13px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.btn:hover { background: var(--fg); color: var(--bg); }
.btn--degrade { background: url("/images/svg-gradient_cv.svg") left center / cover no-repeat; color: var(--bg); }
.btn--degrade:hover { background: var(--fg); color: var(--bg); }
.btn--rosa { background: var(--accent); border-color: var(--accent); color: var(--fg); }
.btn--rosa:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn--chico { padding: 7px 12px; font-size: 12px; }
.btn--peligro { border-color: var(--accent); color: var(--accent); }
.btn--peligro:hover { background: var(--accent); color: var(--fg); }
.btn:disabled { opacity: .5; cursor: wait; }
.flecha::after { content: " →"; }
.campo { display: block; margin: 0 0 16px; }
.campo > span { display: block; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.input, .textarea, select.input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  font: 400 15px/1.5 var(--mono); border-radius: 0; }
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.textarea { min-height: 320px; resize: vertical; }
.aviso { padding: 12px 14px; border: 1px solid var(--line); margin: 0 0 16px; }
.aviso--mal { border-color: var(--accent); color: var(--accent); }
.aviso--bien { border-color: var(--ok); color: var(--ok); }
.lista-limpia { list-style: none; margin: 0; padding: 0; }

/* ── Pie ── */
.pie { margin: 48px auto 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 16px;
  border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--fg-3); }
.pie a { color: var(--fg-2); }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ── Celular ── */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 14px; }
  .cab { margin-top: 12px; }
  .cab__logo { padding: 12px 14px; }
  .cab__marca { grid-template-columns: 1fr; }
  .cab__degrade { height: 18px; margin: 0 6px 6px; }
  /* El menu en dos renglones, todo a la vista */
  .nav a { flex: 1 1 auto; justify-content: center; padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: -1px; }
  .caja__cuerpo { padding: 14px; }
}
.saltar { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 8px 12px; background: var(--fg); color: var(--bg); }
.saltar:focus { left: 8px; top: 8px; }