/* Base: reset, tipografía, utilidades, marco «a medida», cotas, corchetes y botones. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body) / 1.6 var(--f-text);
  font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
main { display: block; }
main:focus { outline: none; }
::selection { background: var(--blue); color: var(--on-blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 16px; background: var(--blue);
  color: var(--on-blue); transform: translateY(-160%); transition: transform 0.2s;
}
.skip:focus { transform: none; }

.mono, .label {
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 450; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.5;
}
.label { color: var(--blue); display: inline-flex; gap: 0.6em; align-items: center; }
.label::before { content: ""; width: 1.6em; height: 1px; background: currentColor; }

.sec-title {
  font: 500 var(--t-h2) / 1.04 var(--f-display); letter-spacing: -0.03em; text-wrap: balance;
}
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-more { margin-top: clamp(28px, 4vw, 48px); }

.pending {
  display: inline-block; vertical-align: middle; margin-left: 0.3em; padding: 0.15em 0.55em;
  font: 500 0.68rem / 1.3 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: #6a4a00; background: #ffe9a8; border-radius: 2px; white-space: nowrap;
}
.sec-title .pending, .phero__title .pending { font-size: 0.66rem; transform: translateY(-0.8em); }

/* Enlace con flecha y subrayado que se «mide» */
.link {
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  padding-bottom: 3px; transition: background-size 0.5s var(--ease-snap), color 0.3s;
}
.link:hover { color: var(--blue); background-size: 0% 1px; background-position: right bottom; }
.arrow { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.45s var(--ease-snap); }
.link:hover .arrow, .btn:hover .arrow { transform: translateX(4px); }

.btn {
  display: inline-flex; align-items: center; gap: 0.7em; padding: 1em 1.5em; border: 0; cursor: pointer;
  background: var(--blue); color: var(--on-blue); text-decoration: none; font-weight: 600;
  font-size: 0.98rem; transition: background 0.3s;
}
.btn:hover { background: var(--ink); }

/* Corchetes del logo como botón: se abren al pasar el ratón */
.btn-brk {
  display: inline-flex; align-items: center; gap: 0.15em; text-decoration: none; font-weight: 600;
  font-size: 0.95rem; padding: 0.4em 0.2em;
}
.btn-brk i {
  font: 700 1.25em / 1 var(--f-display); font-style: normal; color: var(--blue);
  transition: transform 0.45s var(--ease-snap);
}
.btn-brk:hover i:first-child, .btn-brk[aria-current] i:first-child { transform: translateX(-5px); }
.btn-brk:hover i:last-child, .btn-brk[aria-current] i:last-child { transform: translateX(5px); }

/* Marco «a medida»: cuatro esquinas de corchete azules alrededor de la foto */
.frame { position: relative; }
.frame picture, .frame img { width: 100%; }
.frame img { height: 100%; object-fit: cover; }
.frame__c {
  position: absolute; width: var(--corner); height: var(--corner); pointer-events: none; z-index: 2;
  border: 0 solid var(--blue); --off: calc(var(--corner-w) * -1 - 5px);
  transition: transform 0.9s var(--ease-snap), opacity 0.4s;
}
.frame__c--tl { top: var(--off); left: var(--off); border-top-width: var(--corner-w); border-left-width: var(--corner-w); }
.frame__c--tr { top: var(--off); right: var(--off); border-top-width: var(--corner-w); border-right-width: var(--corner-w); }
.frame__c--bl { bottom: var(--off); left: var(--off); border-bottom-width: var(--corner-w); border-left-width: var(--corner-w); }
.frame__c--br { bottom: var(--off); right: var(--off); border-bottom-width: var(--corner-w); border-right-width: var(--corner-w); }
.frame__label {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 0.35em 0.6em; max-width: calc(100% - 20px);
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font: 500 0.66rem / 1.35 var(--f-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Cota de plano: línea con topes y la medida en el centro */
.cota { display: flex; align-items: center; gap: 0.7em; color: var(--blue); font: 500 var(--t-mono) / 1 var(--f-mono); letter-spacing: 0.06em; }
.cota__line { position: relative; flex: 1; height: 1px; background: currentColor; transform-origin: center; }
.cota__line::before {
  content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: currentColor;
}
.cota__line:first-child::before { left: 0; }
.cota__line:last-child::before { right: 0; }
.cota__text { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cota--v { flex-direction: column; }
.cota--v .cota__line { width: 1px; height: auto; flex: 1; }
.cota--v .cota__line::before { top: auto; left: -5px; width: 11px; height: 1px; }
.cota--v .cota__line:first-child::before { top: 0; }
.cota--v .cota__line:last-child::before { bottom: 0; }
.cota--v .cota__text { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Palabras entre corchetes */
.bw { white-space: nowrap; }
.bw__l, .bw__r {
  display: inline-block; font-style: normal; color: var(--blue); font-family: var(--f-display); font-weight: 400;
}
.bw__l { margin-right: 0.08em; }
.bw__r { margin-left: 0.08em; }

/* Líneas con máscara (titulares) */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line__in { display: inline-block; }

/* Cinta en movimiento */
.ticker { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: 0.9em 0; }
.ticker__track { display: inline-flex; animation: ticker 60s linear infinite; }
.ticker__track span { padding-right: 0.5em; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }