/* topacio.css — Template TOPACIO (familia Gemas, sobre motor.css).
   Revista de autor: blanco amplio, serif enorme y subrayados amarillos. */
:root { --fondo: #ffffff; --papel: #ffffff; --tinta: #141414; --tenue: #6b6b6b; --linea: #ececec; --acento: #f5c400; --acento-tx: #141414; --cab-fondo: #fff;
  --pie-fondo: #141414; --pie-tinta: #cfcfcf; --radio: 0; --f-tit: 'Source Serif 4', Georgia, serif; --f-txt: 'Source Serif 4', Georgia, serif; --f-meta: 'Inter', system-ui, sans-serif;
  --peso-tit: 600; --track-tit: -0.025em; --hero-tam: 72px; --tit-tam: 21px; --img-ratio: 4 / 3; --ancho: 1220px; }
.t-topacio .mt-c { background: transparent; }
.t-topacio .mt-c .mt-t { padding: 14px 0; }
/* la tarjeta sin márgenes laterales es la de papel; la que va sobre foto
   (cabeza de categoría) necesita su aire o el título pega contra el borde */
.t-topacio .mt-c.sobre .mt-t { padding: 22px 26px 24px; }
.t-topacio .mt-marca { font-family: var(--f-tit); font-weight: 600; font-style: italic; letter-spacing: -0.03em; }
.t-topacio h1 a, .t-topacio h3 a { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--acento) 55%, transparent) 62%); }
/* sobre foto el subrayado amarillo bajo letra blanca se lee mal: ahí no va */
.t-topacio .mt-c.sobre h1 a, .t-topacio .mt-c.sobre h2 a, .t-topacio .mt-c.sobre h3 a { background: none; }
.t-topacio .ap-tipografica .hero h1 { font-weight: 500; font-style: italic; }
.t-topacio .mt-chip { color: var(--tinta); border-bottom: 2px solid var(--acento); border-radius: 0; }
.t-topacio .mt-secc-h { border-bottom: 1px solid var(--tinta); justify-content: center; text-align: center; flex-direction: column; gap: 8px; }
.t-topacio .mt-secc-h h2 { font-size: 40px; font-style: italic; font-weight: 500; }
.t-topacio .mt-secc-h .ver { margin: 0; color: var(--tinta); }
.t-topacio .mt-num { color: var(--tinta); font-family: var(--f-meta); font-size: 15px; background: var(--acento); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
.t-topacio .mt-principal { gap: 56px; }
.t-topacio .mt-panel { border-top: 3px solid var(--tinta); padding-left: 0; padding-right: 0; }
.t-topacio .mt-panel-h { border-bottom: 0; }
.t-topacio .mt-boletin { background: var(--acento); color: var(--tinta); border-radius: 0; padding: 40px; justify-content: center; }
.t-topacio .mt-boletin b { font-size: 30px; font-style: italic; }
.t-topacio .lote-revista .grande h3 { font-size: 34px; }

/* en el teléfono el boletín y los títulos de sección bajan un punto: con el
   aire de escritorio el amarillo se comía media pantalla */
@media (max-width: 600px) {
  .t-topacio .mt-boletin { padding: 28px 22px; }
  .t-topacio .mt-boletin b { font-size: 24px; }
  .t-topacio .mt-secc-h h2 { font-size: 32px; }
}

/* tarjeta entera clickeable (stretched-link): el contenedor .mt-c está
   posicionado en motor.css y el a del título se estira sobre él. Va acá y
   no sólo en la base porque HU-001 lo verifica en el CSS de cada template. */
.t-topacio .mt-c { position: relative; }
.t-topacio .mt-c h1 a::after, .t-topacio .mt-c h2 a::after, .t-topacio .mt-c h3 a::after, .t-topacio .mt-c h4 a::after { content: ""; position: absolute; inset: 0; }