/* tdfsoft.com — «prensa austral»
   Paleta: tinta sobre papel frío; noche del canal con la luz ámbar del faro.
   Tipografía argentina: Piazzolla (display/prosa) + Archivo (utilitaria). */

:root {
  --tinta: #101418;
  --tinta-suave: #46525A;
  --papel: #F2F5F4;
  --papel-vivo: #FBFCFC;
  --noche: #0C1D2B;
  --noche-alta: #13293C;
  --hielo: #C7D6DC;
  --nieve: #F2F5F4;         /* titulares sobre la noche — no cambia con el tema */
  --ambar: #E9A23B;
  --ambar-tinta: #8F5C12;   /* el ámbar cuando escribe sobre papel */
  --sobre-ambar: #101418;   /* texto sobre ámbar — no cambia con el tema */
  --regla: #D8E0DF;
  --regla-noche: #24445C;

  /* qué glifo muestra el botón de tema: la luna invita al oscuro, el sol al claro */
  --glifo-luna: block;
  --glifo-sol: none;

  --serif: 'Piazzolla', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

/* Tema oscuro. La paleta va DOS veces —acá y en el bloque [data-tema="oscuro"]—
   y es a propósito: `light-dark()` la escribiría una sola, pero un navegador
   sin soporte (Safari ≤17.4, y quedan) dejaría la página entera sin colores.
   Si se toca un valor acá, se toca el gemelo de abajo. Sin elección guardada
   manda el sistema; --papel-vivo no se redefine: la tapa en miniatura es un
   objeto de papel y no cambia de tema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #E4EAE8;
    --tinta-suave: #97A7AF;
    --papel: #0A1219;
    --noche: #0F2233;
    --noche-alta: #17334A;
    --ambar-tinta: #E2A64E;
    --regla: #1C2B36;
    --regla-noche: #2A4A63;
    --glifo-luna: none;
    --glifo-sol: block;
  }
}

:root[data-tema="oscuro"] {
  --tinta: #E4EAE8;
  --tinta-suave: #97A7AF;
  --papel: #0A1219;
  --noche: #0F2233;
  --noche-alta: #17334A;
  --ambar-tinta: #E2A64E;
  --regla: #1C2B36;
  --regla-noche: #2A4A63;
  --glifo-luna: none;
  --glifo-sol: block;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  font-optical-sizing: auto;
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ambar); color: var(--sobre-ambar); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.contenido {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- vernáculo editorial ---------- */

.volanta, .volanta-bloque {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ambar-tinta);
}

.noche .volanta { color: var(--ambar); }

/* ---------- cabezal ---------- */

.cabezal {
  background: var(--noche);
  border-bottom: 1px solid var(--regla-noche);
}

.cabezal-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.cabezal-marca {
  font-family: var(--sans);
  font-stretch: 125%;
  font-weight: 750;
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--nieve);
}

.cabezal-lugar {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hielo);
}

.cabezal-contacto {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ambar);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.cabezal-contacto:hover { border-bottom-color: var(--ambar); }

.cabezal-acciones {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.boton-tema {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: none;
  border: 1px solid var(--regla-noche);
  border-radius: 50%;
  color: var(--hielo);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.boton-tema:hover { border-color: var(--ambar); color: var(--ambar); }

.boton-tema .glifo-luna { display: var(--glifo-luna); }
.boton-tema .glifo-sol  { display: var(--glifo-sol); }

/* ---------- la tapa (hero) ---------- */

.noche {
  background: var(--noche);
  color: var(--hielo);
}

.tapa .contenido { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3rem, 7vw, 5rem); }

.tapa h1 {
  margin-top: 1.1rem;
  font-size: clamp(2.7rem, 8.5vw, 5rem);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--nieve);
  max-width: 14ch;
  text-wrap: balance;
}

.tapa h1 em {
  font-style: italic;
  font-weight: 560;
  color: var(--ambar);
}

.bajada {
  margin-top: 1.6rem;
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.55;
  max-width: 52ch;
  text-wrap: pretty;
}

.acciones {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.recuadros {
  list-style: none;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--regla-noche);
  display: grid;
  gap: 1.2rem 2.5rem;
  grid-template-columns: 1fr;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.45;
}

.recuadros li {
  padding-left: .9rem;
  border-left: 2px solid var(--ambar);
}

/* entrada de la tapa — una sola orquestación */
@media (prefers-reduced-motion: no-preference) {
  .tapa .contenido > * {
    animation: aparecer .7s cubic-bezier(.2, .7, .2, 1) both;
  }
  .tapa h1        { animation-delay: .08s; }
  .tapa .bajada   { animation-delay: .16s; }
  .tapa .acciones { animation-delay: .24s; }
  .tapa .recuadros{ animation-delay: .34s; }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- botones ---------- */

.boton, .boton-secundario {
  display: inline-block;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-decoration: none;
  padding: .85rem 1.5rem;
  border-radius: 2px;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.boton {
  background: var(--ambar);
  color: var(--sobre-ambar);
}

.boton:hover { background: #F2B355; transform: translateY(-1px); }

.boton-secundario {
  border: 1px solid var(--regla-noche);
  color: var(--hielo);
}

.noche .boton-secundario:hover { border-color: var(--ambar); color: var(--ambar); }

.caso .boton-secundario {
  border-color: var(--tinta);
  color: var(--tinta);
}

.caso .boton-secundario:hover { border-color: var(--ambar-tinta); color: var(--ambar-tinta); }

@media (prefers-reduced-motion: reduce) {
  .boton:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- secciones (papel) ---------- */

.secciones .contenido { padding-block: clamp(4rem, 9vw, 6.5rem); }

.secciones h2, .caso h2, .origen h2 {
  margin-top: .9rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.intro {
  margin-top: 1rem;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--tinta-suave);
}

.bloques {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem 3.5rem;
}

.bloque {
  border-top: 1px solid var(--regla);
  padding-top: 1.4rem;
}

.bloque h3 {
  margin-top: .55rem;
  font-size: 1.45rem;
  font-weight: 640;
  line-height: 1.2;
}

.bloque p:not(.volanta-bloque) {
  margin-top: .7rem;
  color: var(--tinta-suave);
  font-size: 1.02rem;
  text-wrap: pretty;
}

.bloque-ancho p:not(.volanta-bloque) { max-width: 68ch; }

/* ---------- la tesis ---------- */

.tesis .contenido {
  padding-block: clamp(4.5rem, 10vw, 7rem);
  text-align: center;
}

.tesis h2 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--nieve);
}

.tesis p {
  margin: 1.6rem auto 0;
  max-width: 58ch;
  font-size: 1.12rem;
  text-wrap: pretty;
}

/* ---------- el caso ---------- */

.caso .contenido { padding-block: clamp(4rem, 9vw, 6.5rem); }

.caso-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.caso-texto p:not(.volanta) {
  margin-top: 1.1rem;
  color: var(--tinta-suave);
  max-width: 52ch;
  text-wrap: pretty;
}

.caso-texto .boton-secundario { margin-top: 1.6rem; }

/* la tapa en miniatura — objeto, no captura */
.caso-tapa { display: flex; justify-content: center; }

.diario {
  /* Objeto de papel: el diario impreso no cambia con el tema del sitio,
     por eso sus tintas y reglas quedan fijadas acá, no en la paleta. */
  --tinta: #101418;
  --tinta-suave: #46525A;
  --regla: #D8E0DF;
  width: min(320px, 78vw);
  background: var(--papel-vivo);
  border: 1px solid var(--regla);
  box-shadow: 0 24px 48px -18px rgba(12, 29, 43, .35);
  padding: 1.3rem 1.2rem 1.6rem;
  transform: rotate(-1deg);
}

.diario-cabezal {
  text-align: center;
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  padding-block: .55rem .5rem;
}

.diario-nombre {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}

.diario-lugar {
  margin-top: .3rem;
  font-family: var(--sans);
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.diario-foto {
  margin-top: .9rem;
  height: 118px;
  background:
    radial-gradient(circle at 78% 30%, rgba(233, 162, 59, .55), transparent 26%),
    linear-gradient(165deg, #38566B 0%, #16303F 58%, #0C1D2B 100%);
}

.diario-titular {
  margin-top: .9rem;
  display: grid;
  gap: .42rem;
}

.diario-titular span {
  height: .58rem;
  background: var(--tinta);
}

.diario-titular span:nth-child(2) { width: 86%; }
.diario-titular span:nth-child(3) { width: 58%; }

.diario-cols {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.diario-col { display: grid; gap: .38rem; align-content: start; }

.diario-col span {
  height: .22rem;
  background: var(--regla);
}

.diario-col span:last-child { width: 62%; }

/* ---------- separador con coordenada ---------- */

.separador {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.separador::before, .separador::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--regla);
}

.separador span {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* ---------- breves ---------- */

.breves .contenido { padding-block: clamp(3.5rem, 8vw, 5.5rem); }

.breves-lista {
  list-style: none;
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 3.5rem;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.breves-lista li {
  border-top: 1px solid var(--regla);
  padding-block: .85rem;
}

.breves-lista strong { color: var(--tinta); font-weight: 650; }

/* ---------- origen ---------- */

.origen .contenido { padding-block: clamp(3.5rem, 8vw, 5.5rem); }

.origen p:not(.volanta) {
  margin-top: 1.2rem;
  max-width: 56ch;
  font-size: 1.12rem;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* ---------- pie ---------- */

.pie .contenido {
  padding-block: clamp(4.5rem, 10vw, 7rem) 3rem;
  text-align: center;
}

.pie h2 {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 620;
  line-height: 1.1;
  color: var(--nieve);
}

.pie p {
  margin: 1.2rem auto 0;
  max-width: 44ch;
}

.pie .boton { margin-top: 2rem; }

.pie-firma {
  margin-top: 4rem !important;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 2;
  color: var(--hielo);
  opacity: .75;
}

/* ---------- pantallas medianas y grandes ---------- */

@media (min-width: 720px) {
  .recuadros { grid-template-columns: repeat(3, 1fr); }
  .bloques { grid-template-columns: 1fr 1fr; }
  .bloque-ancho { grid-column: 1 / -1; }
  .breves-lista { grid-template-columns: 1fr 1fr; }
  .caso-fila { grid-template-columns: 1.15fr .85fr; }
}

@media (max-width: 719.98px) {
  .cabezal-lugar { display: none; }
}