/* Informe:Chile · sitio · marca v1.4. Primero celular. */
:root {
  --rojo: #ac0e24; --rojo-profundo: #7a0a19; --tinta: #0e0e0e; --grafito: #1f1f1f; --marfil: #fff3ea;
  --gris: #5c5550; --linea: #e6d9cf;
  --sans: "Work Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --ancho: 680px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marfil); color: var(--tinta); font: 500 17px/1.55 var(--sans); }
a { color: inherit; }
img, video { display: block; max-width: 100%; }

.barra { position: sticky; top: 0; z-index: 10; background: var(--tinta); padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top)); }
.logo { display: inline-block; }
.logo img { width: 190px; height: auto; }

main { max-width: var(--ancho); margin: 0 auto; padding: 0 0 24px; }

.portada-titulo { padding: 22px 18px 8px; }
.portada-titulo h1 { margin: 0; font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.portada-titulo p { margin: 4px 0 0; color: var(--gris); font-weight: 600; }

.seccion { font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 18px 18px 10px; }
.reels .riel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 6px; scrollbar-width: none; }
.reels .riel::-webkit-scrollbar { display: none; }
.reel { flex: 0 0 42%; max-width: 200px; scroll-snap-align: start; text-decoration: none; }
.reel video { width: 100%; aspect-ratio: 9/16; object-fit: cover; background: var(--tinta); }
.reel span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-weight: 600; font-size: 14px; line-height: 1.3; }

.feed { display: grid; gap: 0; }
.tarjeta { border-top: 1px solid var(--linea); padding: 18px 0 20px; }
.tarjeta .media { display: block; margin: 0 0 14px; background: var(--tinta); }
.tarjeta .media img, .tarjeta .media video { width: 100%; height: auto; max-height: 85vh; object-fit: contain; margin: 0 auto; }
.tarjeta .cuerpo { padding: 0 18px; }
.tarjeta h2 { margin: 8px 0 6px; font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.tarjeta h2 a { text-decoration: none; }
.tarjeta h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tarjeta .res { margin: 0; color: #2b2622; white-space: pre-line; }

.meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta time { font: 500 13px/1 var(--mono); color: var(--gris); }
.chip { display: inline-block; background: var(--c); color: var(--t); font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; }

.pieza { padding: 20px 18px 8px; }
.pieza h1 { margin: 12px 0 10px; font-weight: 800; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; }
.pieza .bajada { margin: 0 0 16px; font-weight: 600; font-size: 19px; line-height: 1.4; }
.pieza .media { margin: 16px -18px; background: var(--tinta); }
.pieza .media img, .pieza .media video { width: 100%; height: auto; }
.pieza .texto p { margin: 0 0 1em; }
.pieza .texto a { color: var(--rojo); word-break: break-word; }

.compartir { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; }
.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 2px solid var(--rojo); background: var(--rojo); color: var(--marfil); font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; }
.btn:active { background: var(--rojo-profundo); border-color: var(--rojo-profundo); }
.btn-claro { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-claro:active { background: var(--tinta); color: var(--marfil); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }

.mas { text-align: center; margin: 20px 18px; }
.mas a { display: inline-block; padding: 12px 20px; border: 2px solid var(--tinta); font-weight: 600; text-decoration: none; }
.cargando { text-align: center; font: 500 13px var(--mono); color: var(--gris); padding: 16px; }
.vacio { padding: 18px; color: var(--gris); }

.pie { border-top: 6px solid var(--rojo); padding: 28px 18px 40px; text-align: center; font-size: 15px; color: var(--gris); }
.pie img { margin: 0 auto 10px; width: 160px; height: auto; }
.pie p { margin: 4px 0; }
.pie .lema { color: var(--tinta); font-weight: 800; }
.pie .redes { font: 500 13px var(--mono); }

@media (min-width: 720px) {
  .barra { padding-left: calc((100% - var(--ancho)) / 2 + 18px); }
  .tarjeta .media, .pieza .media { margin-left: 0; margin-right: 0; }
  .pieza h1 { font-size: 40px; }
  .reel { flex-basis: 180px; }
}