/* Tridimage · casos — base
   Tokens y tipografía tomados de docs/ds-tridimage/colors_and_type.css, reescritos
   sin build. Rational en woff2 (convertida de las OTF del DS). */

@font-face { font-family: "Rational"; src: url("../fuentes/rational-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Rational"; src: url("../fuentes/rational-book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rational"; src: url("../fuentes/rational-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rational"; src: url("../fuentes/rational-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rational"; src: url("../fuentes/rational-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #28282E;
  --ink-90: #3A3A40;
  --ink-70: #5A5A60;
  --ink-50: #8A8A90;
  --ink-30: #C2C2C6;
  --ink-10: #ECECEE;
  --paper: #FFFFFF;
  --orange: #E8671F;
  --orange-hover: #D55510;
  --mist: #E5EEEE;

  --fg-1: var(--ink);
  --fg-2: var(--ink-70);
  --fg-3: var(--ink-50);

  --font: "Rational", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-h1: clamp(40px, 5.5vw, 88px);
  --fs-h2: clamp(28px, 3.2vw, 44px);
  --fs-h3: clamp(22px, 2.2vw, 30px);
  --fs-lead: clamp(20px, 2vw, 28px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --ls-display: -0.02em;
  --ls-caps: 0.14em;

  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --max: 1280px;
  --margen: 48px;
  --nav-alto: 72px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
  --dur-lenta: 360ms;
}
@media (max-width: 720px) {
  :root { --margen: 24px; --nav-alto: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--paper);
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--orange); color: var(--paper); }

a { color: inherit; text-decoration: none; }
/* Enlace en texto: ink con subrayado naranja (contraste 14:1; el naranja sobre blanco no llega a 4,5:1). */
.enlace {
  color: var(--ink);
  text-decoration: underline 1px var(--orange);
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
.enlace:hover { color: var(--orange-hover); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.contenedor { max-width: var(--max); margin: 0 auto; padding: 0 var(--margen); }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--margen); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 4px;
}
.saltar:focus { top: 12px; }

/* ---------- Navegación (DS: fija, 72 px, blanca con filete) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-10);
}
.nav__interior {
  height: var(--nav-alto);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.nav__marca { display: flex; align-items: center; min-height: 44px; border: 0; }
.nav__marca img { height: 26px; width: auto; }
.nav__enlaces { display: flex; gap: var(--s-4); }
.nav__enlace {
  position: relative; display: inline-block; font-size: var(--fs-small); font-weight: 500;
  padding: 13px 0;
  transition: opacity var(--dur) var(--ease);
}
.nav__enlaces:hover .nav__enlace { opacity: 0.45; }
.nav__enlaces .nav__enlace:hover, .nav__enlace[aria-current="page"] { opacity: 1; }
.nav__enlace[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange);
}
@media (max-width: 720px) {
  .nav__marca img { height: 22px; }
  .nav__enlaces { gap: var(--s-3); }
}

/* ---------- Miga de pan ---------- */
.miga { padding-top: var(--s-3); font-size: var(--fs-small); color: var(--fg-2); }
.miga ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.miga li + li::before { content: "/"; margin-right: 6px; color: var(--ink-30); }
.miga a {
  display: inline-block; padding: 12px 0; /* 44 px de toque */
  text-decoration: underline 1px var(--ink-30); text-underline-offset: 4px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.miga a:hover { text-decoration-color: var(--orange); }
.miga [aria-current] { color: var(--fg-1); }

/* Área de toque más alta sin mover el texto (relleno compensado con margen negativo). */
.contacto .enlace { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- Contacto (texto de la lámina de contacto de los PDFs) ---------- */
.contacto { background: var(--ink); color: var(--paper); padding: var(--s-7) 0; }
.contacto__grilla { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6); align-items: end; }
.contacto h2 {
  font-weight: 700; font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance;
}
.contacto p { font-weight: 300; font-size: 20px; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.contacto p + p { margin-top: var(--s-2); }
.contacto .enlace { color: var(--paper); text-decoration-color: var(--orange); }
.contacto .enlace:hover { color: var(--orange); }
@media (max-width: 900px) { .contacto__grilla { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---------- Pie ---------- */
.pie { background: var(--ink); color: rgba(255, 255, 255, 0.6); padding: 0 0 var(--s-4); font-size: var(--fs-micro); }
.pie__interior {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: var(--s-3);
}
.pie img { height: 20px; width: auto; }
.pie a { display: inline-block; padding: 13px 0; }
.pie a:hover { color: var(--orange); }

/* Entre páginas, un fundido corto (View Transitions entre documentos, donde el navegador lo soporte). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}