/* Apolo Social Pro · blog y páginas de texto. El marco es el cuarto oscuro de la portada;
   el artículo se lee sobre papel crema, como una copia ya revelada encima de la mesa de luz. */

@font-face { font-family: "League Spartan"; src: url(../assets/fuentes/league-spartan.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --fondo: #120202;
  --fondo-2: #1c0404;
  --granate: #4d0000;
  --rojo: #c4221c;
  --rojo-vivo: #e5352b;
  --crema: #fefcef;
  --crema-2: rgb(254 252 239 / .68);
  --crema-3: rgb(254 252 239 / .16);
  --tinta: #2a1010;
  --tinta-2: #6b4d47;
  --fuente: "League Spartan", "Arial Narrow", Arial, sans-serif;
  --lectura: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --salida: cubic-bezier(.16, 1, .3, 1);
  --margen: clamp(20px, 5vw, 72px);
  --radio: 7px;
  --radio-foto: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fondo); color-scheme: dark; accent-color: var(--rojo); scrollbar-color: var(--granate) var(--fondo); scrollbar-width: thin; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--crema); font: 500 1.125rem/1.42 var(--fuente); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ul, ol, figure, address, blockquote { margin: 0; font-style: normal; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--rojo); color: var(--crema); }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 4px; border-radius: 2px; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.salto { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: var(--radio); background: var(--crema); color: var(--tinta); font-weight: 700; }
.salto:focus { top: 12px; }
.logo { display: block; aspect-ratio: 900 / 229; width: 112px; background: var(--crema); -webkit-mask: url(../assets/brand/apolo-lockup-cream.png) center / contain no-repeat; mask: url(../assets/brand/apolo-lockup-cream.png) center / contain no-repeat; }

.boton { display: inline-flex; align-items: center; gap: .55em; min-height: 56px; padding: 4px 26px 0; border-radius: var(--radio); background: var(--rojo); color: var(--crema); font: 700 1.1875rem/1 var(--fuente); box-shadow: 0 14px 40px -12px rgb(229 53 43 / .65); transition: transform .14s var(--salida), background-color .2s ease; }
.boton svg { margin-top: -4px; }
.boton:active { transform: scale(.97); }
.enlace { display: inline-flex; align-items: center; min-height: 48px; padding-top: 4px; font-weight: 600; color: var(--crema-2); text-decoration: underline; text-decoration-color: var(--crema-3); text-underline-offset: .28em; transition: color .2s ease, text-decoration-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .boton:hover { background: #cf2a22; } .enlace:hover { color: var(--crema); text-decoration-color: var(--crema); } }

/* ---------------------------------------------------------------- Barra */
.barra { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 34px; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--margen) 12px; background: rgb(18 2 2 / .92); border-bottom: 1px solid var(--crema-3); }
.barra-marca { display: flex; align-items: center; min-height: 48px; margin-right: auto; }
.barra-nav { display: flex; gap: 30px; font-size: 1rem; font-weight: 600; }
.barra-nav a { display: inline-flex; align-items: center; min-height: 48px; padding-top: 3px; color: var(--crema-2); transition: color .2s ease; }
.barra-nav a:hover, .barra-nav a[aria-current] { color: var(--crema); }
.barra-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--rojo-vivo); text-decoration-thickness: 2px; text-underline-offset: .4em; }
.barra-tel { display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: 3px 16px 0; border-radius: var(--radio); box-shadow: inset 0 0 0 1.5px rgb(254 252 239 / .5); font: 700 1.0625rem/1 var(--fuente); font-variant-numeric: tabular-nums; transition: box-shadow .2s ease; }
.barra-tel svg { margin-top: -3px; }
.barra-tel:hover { box-shadow: inset 0 0 0 1.5px var(--crema); }
@media (max-width: 860px) { .barra-nav a:not([href$="blog/"]) { display: none; } .barra { gap: 18px; } }

/* ---------------------------------------------------------------- Lista del blog */
.blog-cabeza { padding: clamp(64px, 12vh, 130px) var(--margen) clamp(36px, 6vh, 64px); }
.blog-cabeza h1 { font: 900 clamp(3.4rem, 11vw, 6rem)/.86 var(--fuente); letter-spacing: -.035em; text-transform: uppercase; padding-top: .1em; text-wrap: balance; }
.blog-cabeza p { margin-top: 18px; max-width: 34ch; font-size: clamp(1.125rem, 2vw, 1.4375rem); line-height: 1.28; color: var(--crema-2); }
.blog-volver { margin-top: 28px !important; }
.blog-vacio { padding: 0 var(--margen) clamp(70px, 12vh, 130px); display: grid; gap: 10px; justify-items: start; font-size: clamp(1.125rem, 2vw, 1.4375rem); }
.entradas { border-top: 1px solid var(--crema-3); }
.entradas li { border-bottom: 1px solid var(--crema-3); }
.entrada { display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 24vw, 340px); align-items: center; gap: 24px clamp(24px, 5vw, 72px); padding: clamp(26px, 5vh, 48px) var(--margen); transition: background-color .25s ease; }
.entrada time { font-size: 1rem; color: var(--crema-2); }
.entrada h2 { margin-top: 8px; max-width: 22ch; font: 800 clamp(1.75rem, 4.2vw, 3.25rem)/.96 var(--fuente); letter-spacing: -.025em; text-wrap: balance; padding-top: .08em; }
.entrada p { margin-top: 12px; max-width: 56ch; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.35; color: var(--crema-2); }
.entrada img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-foto); background: var(--fondo-2); }
@media (hover: hover) and (pointer: fine) { .entrada:hover { background: rgb(254 252 239 / .04); } .entrada:hover h2 { text-decoration: underline; text-decoration-color: var(--rojo-vivo); text-decoration-thickness: 3px; text-underline-offset: .12em; } }
@media (max-width: 640px) { .entrada { grid-template-columns: 1fr; } .entrada img { order: -1; } }

/* ---------------------------------------------------------------- Artículo */
.articulo-cabeza { padding: clamp(44px, 9vh, 96px) var(--margen) clamp(30px, 5vh, 52px); max-width: calc(980px + var(--margen) * 2); margin-inline: auto; }
.articulo-cabeza nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 600; color: var(--crema-2); text-decoration: underline; text-decoration-color: var(--rojo-vivo); text-underline-offset: .3em; }
.articulo-cabeza nav a:hover { color: var(--crema); }
.articulo-cabeza h1 { margin-top: 10px; font: 800 clamp(2.25rem, 6.4vw, 4.5rem)/.96 var(--fuente); letter-spacing: -.03em; text-wrap: balance; padding-top: .08em; overflow-wrap: anywhere; }
.articulo-datos { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 1rem; color: var(--crema-2); }
.articulo-portada { max-width: calc(1180px + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }
.articulo-portada img { width: 100%; max-height: 72vh; object-fit: cover; border-radius: var(--radio-foto) var(--radio-foto) 0 0; background: var(--fondo-2); }
.hoja { max-width: 1180px; margin-inline: auto; padding: clamp(36px, 7vw, 84px) clamp(22px, 6vw, 96px) clamp(44px, 8vw, 96px); background: var(--crema); color: var(--tinta); border-radius: var(--radio-foto); }
.articulo-portada + .hoja { border-radius: 0 0 var(--radio-foto) var(--radio-foto); }
@media (max-width: 1260px) { .hoja { margin-inline: var(--margen); } }
@media (max-width: 560px) { .hoja, .articulo-portada { margin-inline: 0; padding-inline: 22px; border-radius: 0; } .articulo-portada { padding-inline: 0; } .articulo-portada img { border-radius: 0; } }

.prosa { max-width: 66ch; margin-inline: auto; font: 400 1.1875rem/1.68 var(--lectura); color: var(--tinta); }
.prosa > * + * { margin-top: 1.15em; }
.prosa > :first-child { margin-top: 0; }
.prosa h2 { margin-top: 2em; font: 800 clamp(1.625rem, 3.4vw, 2.125rem)/1.05 var(--fuente); letter-spacing: -.02em; color: var(--granate); text-wrap: balance; padding-top: .1em; }
.prosa h3 { margin-top: 1.7em; font: 700 1.375rem/1.15 var(--fuente); letter-spacing: -.01em; padding-top: .1em; }
.prosa h2 + *, .prosa h3 + * { margin-top: .6em; }
.prosa a { color: #8f1712; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prosa a:hover { color: var(--rojo); }
.prosa a:focus-visible { outline-color: var(--granate); }
.prosa ::selection { background: var(--granate); color: var(--crema); }
.prosa strong { font-weight: 700; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa ul { list-style: disc; } .prosa ol { list-style: decimal; }
.prosa li + li { margin-top: .4em; }
.prosa li::marker { color: #8f1712; }
.prosa blockquote { margin-block: 1.6em; font: 600 clamp(1.375rem, 2.6vw, 1.75rem)/1.2 var(--fuente); letter-spacing: -.015em; color: var(--granate); text-wrap: balance; }
.prosa figure { margin-block: 1.8em; }
.prosa img { width: 100%; border-radius: var(--radio-foto); }
.prosa hr { margin-block: 2.4em; border: 0; border-top: 1px solid rgb(42 16 16 / .22); }

/* ---------------------------------------------------------------- Llamada, más artículos y pie */
.llamada { padding: clamp(70px, 13vh, 150px) var(--margen); background: radial-gradient(70% 90% at 50% 120%, rgb(196 34 28 / .5), rgb(77 0 0 / .3) 45%, transparent 75%); }
.llamada h2 { max-width: 12ch; font: 800 clamp(2.4rem, 7vw, 5.2rem)/.92 var(--fuente); letter-spacing: -.03em; padding-top: .1em; }
.llamada p { margin-top: 16px; max-width: 30ch; font-size: clamp(1.125rem, 2vw, 1.4375rem); line-height: 1.28; color: var(--crema-2); }
.llamada-vias { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.mas { padding: clamp(40px, 8vh, 90px) var(--margen); border-top: 1px solid var(--crema-3); }
.mas h2 { font: 600 clamp(1rem, 1.5vw, 1.25rem)/1.2 var(--fuente); letter-spacing: .02em; color: var(--crema-2); }
.mas ul { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.mas a { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--crema-3); }
.mas time { font-size: .9375rem; color: var(--crema-2); }
.mas b { font: 700 clamp(1.25rem, 2.2vw, 1.625rem)/1.08 var(--fuente); letter-spacing: -.015em; text-wrap: balance; }
.mas a:hover b { text-decoration: underline; text-decoration-color: var(--rojo-vivo); text-underline-offset: .16em; }
.pie { padding: clamp(50px, 9vh, 100px) var(--margen) calc(50px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 40px; font-size: .9375rem; color: var(--crema-2); border-top: 1px solid var(--crema-3); }
.pie .logo { width: 120px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; transition: color .2s ease; }
.pie nav a:hover { color: var(--crema); }
.pie p { grid-column: 1 / -1; font-size: .875rem; }
@media (max-width: 820px) { .pie { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Página de texto (privacidad) */
.texto-legal { padding-bottom: clamp(60px, 10vh, 120px); }
.texto-legal .prosa { font-size: 1.0625rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .barra, .llamada, .mas, .pie nav { display: none; } body, html { background: #fff; color: #000; } .hoja { padding: 0; } }