/* todoloquepagas — el bloque de la agencia: «Quién lo ha construido» (components/institucional/BloqueAgencia.astro).

   ES LA EXCEPCIÓN de la web, y está señalada: aquí habla SANTACONCHA con su marca, no con la de todoloquepagas.
   Por eso esta hoja es la única que escribe colores literales y que trae otras tipografías: son los de la agencia
   (naranja #F8931F, rojo #DC2626, oscuros #0F0E10 y #0B0B0D; Instrument Sans, JetBrains Mono y Newsreader cursiva).
   Nada de aquí se usa fuera de `.agencia`, y nada de `.agencia` sale de los tokens de la web salvo el espaciado.

   Solo la cargan las páginas que llevan el bloque (<Base estilos={[…, 'agencia']}>): «Sobre nosotros» y «Prensa».
   Las tipografías se sirven desde la propia web (la política de contenido no deja pedir nada fuera) y el navegador
   solo las descarga donde hay texto que las usa. Son cuatro ficheros estáticos, uno por peso (80 KB en total): con
   una tipografía variable, el PDF de Firefox saldría con trazos en vez de letras (docs/CONSTRUCCION.md). De dónde
   salen y su licencia (SIL OFL 1.1): packages/ui/fuentes/agencia/LICENCIA.txt. En la copia de doble clic, la
   construcción las mete dentro de esta hoja como data:, igual que hace con las de tokens.css.

   El bloque es siempre oscuro: no sigue el tema del sitio. En el papel se imprime en claro, con su marco. */

@font-face { font-family: "Instrument Sans"; src: url("/fuentes/agencia/InstrumentSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fuentes/agencia/InstrumentSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fuentes/agencia/JetBrainsMono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fuentes/agencia/Newsreader-400-cursiva.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

.agencia {
  /* La marca de la agencia. */
  --sc-naranja: #F8931F;
  --sc-naranja-oscuro: #C9740F;
  --sc-rojo: #DC2626;
  --sc-fondo: #0B0B0D;
  --sc-fondo-claro: #0F0E10;
  --sc-blanco: #FFFFFF;
  --sc-texto: #D8D5DD;
  --sc-texto-suave: #B9B6C0;
  --sc-filete: rgba(255, 255, 255, 0.11);
  --sc-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sc-serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* El relleno de la tarjeta y lo que se mete hacia dentro su borde interior. */
  --sc-relleno: clamp(20px, 6.4vw, 72px);
  --sc-marco: clamp(8px, 1.4vw, 16px);
  --sc-radio: clamp(24px, 3.6vw, 40px);
  display: grid;
  gap: var(--espacio-6);
  /* Arriba no lleva aire propio: lo trae lo que va delante (la portadilla o el bloque anterior). */
  padding-block: 0 var(--espacio-8);
}
.agencia > * { min-width: 0; }
@media (min-width: 50em) { .agencia { padding-block: 0 var(--espacio-12); } }

/* ---- La tarjeta --------------------------------------------------------------- */
.agencia__tarjeta {
  position: relative;
  display: grid;
  gap: var(--espacio-10);
  padding: var(--sc-relleno);
  border-radius: var(--sc-radio);
  color-scheme: dark;
  color: var(--sc-texto);
  font: 400 17px/1.65 var(--sc-sans);
  /* Dos resplandores muy suaves, naranja arriba a la derecha y rojo abajo a la izquierda, sobre el oscuro de la marca.
     El filete de fuera separa la tarjeta de la página cuando el sitio está en su tema oscuro. */
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(248, 147, 31, 0.17), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(220, 38, 38, 0.17), transparent 62%),
    linear-gradient(135deg, var(--sc-fondo-claro) 0%, #15121D 48%, var(--sc-fondo) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* El borde interior fino. */
.agencia__tarjeta::before { content: ""; position: absolute; inset: var(--sc-marco); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: calc(var(--sc-radio) - var(--sc-marco)); pointer-events: none; }
.agencia__tarjeta > * { position: relative; min-width: 0; }

.agencia__texto { display: grid; justify-items: start; align-content: start; }
.agencia__texto > * { min-width: 0; max-width: 100%; }

/* ---- Antetítulo, logotipo y titular ------------------------------------------- */
.agencia__antetitulo { display: flex; align-items: center; gap: 0.9em; color: var(--sc-naranja); font: 700 12px/1.4 var(--sc-mono); letter-spacing: 0.18em; text-transform: uppercase; }
/* El rombo y el punto se dibujan con su borde, no con su fondo: así salen también en el papel, aunque no se impriman los fondos. */
.agencia__rombo { flex: none; width: 0; height: 0; margin-left: 0.16em; border: 0.36em solid currentColor; transform: rotate(45deg); }

/* El logotipo, compuesto: versales anchas y el punto naranja de la marca, dibujado sobre la línea de base. */
.agencia__logo { margin-top: var(--espacio-3); color: var(--sc-blanco); font: 700 clamp(22px, 6.6vw, 38px)/1.1 var(--sc-sans); letter-spacing: 0.115em; overflow-wrap: anywhere; }
.agencia__punto { display: inline-block; width: 0; height: 0; margin: 0 0.115em 0 0; border: 0.095em solid var(--sc-naranja); border-radius: 50%; }

.agencia__titular { margin-top: var(--espacio-6); color: var(--sc-blanco); font: 700 clamp(27px, 7.6vw, 48px)/1.07 var(--sc-sans); letter-spacing: -0.035em; text-wrap: balance; }
/* El único golpe de serif cursiva del titular. (sitio.css quita la cursiva a todo <em>: aquí vuelve.) */
.agencia__remate { display: block; margin-top: 0.06em; color: var(--sc-naranja); font: italic 400 1.08em/1.12 var(--sc-serif); letter-spacing: -0.012em; }

/* ---- Párrafos, frase firma y botón --------------------------------------------- */
.agencia__parrafo { max-width: 34em; margin-top: var(--espacio-5); }
.agencia__titular + .agencia__parrafo { margin-top: var(--espacio-6); }
.tlqp .agencia__parrafo a { color: var(--sc-blanco); font-weight: 700; text-decoration: underline; text-decoration-color: var(--sc-naranja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tlqp .agencia__parrafo a:hover { background: transparent; color: var(--sc-naranja); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.agencia__firma { max-width: 30em; margin-top: var(--espacio-6); color: var(--sc-blanco); font: italic 400 clamp(19px, 2.3vw, 22px)/1.5 var(--sc-serif); }

.agencia__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3) var(--espacio-6); margin-top: var(--espacio-8); }
.agencia__acciones > * { min-width: 0; max-width: 100%; }
.tlqp a.agencia__boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; min-height: 52px; padding: 14px clamp(18px, 5.6vw, 26px); border-radius: 12px; background: var(--sc-naranja); color: var(--sc-fondo-claro); font: 700 clamp(15px, 4.7vw, 17px)/1.2 var(--sc-sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.tlqp a.agencia__boton:hover { background: var(--sc-blanco); color: var(--sc-fondo-claro); text-decoration: none; }
.agencia__flecha { flex: none; width: 0.82em; height: 0.82em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tlqp a.agencia__enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-texto); font-weight: 400; text-decoration: underline; text-decoration-color: var(--sc-naranja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tlqp a.agencia__enlace:hover { background: transparent; color: var(--sc-naranja); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
/* El foco de la web es del color de la tinta: sobre esta tarjeta no se vería. */
.agencia__tarjeta :focus-visible { outline: 3px solid var(--sc-blanco); outline-offset: 3px; border-radius: 4px; }
.agencia__tarjeta .agencia__boton:focus-visible { border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .agencia__boton, .agencia__parrafo a, .agencia__enlace { transition: background-color 120ms ease-out, color 120ms ease-out; }
}

/* ---- Los cuatro frentes: numeración editorial, con su filete -------------------- */
.agencia__frentes { display: grid; margin: 0; padding: 0; list-style: none; }
.agencia__frente { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: var(--espacio-4); align-items: start; padding-block: var(--espacio-6); border-top: 1px solid var(--sc-filete); }
.agencia__frente:last-child { border-bottom: 1px solid var(--sc-filete); }
.agencia__numero { justify-self: start; margin-top: 0.45em; padding-bottom: 6px; border-bottom: 2px solid var(--sc-naranja); color: var(--sc-naranja); font: 700 13px/1 var(--sc-mono); letter-spacing: 0.06em; }
.agencia__frente-titulo { color: var(--sc-blanco); font: 700 20px/1.25 var(--sc-sans); letter-spacing: -0.02em; }
.agencia__frente-texto { margin-top: var(--espacio-2); color: var(--sc-texto-suave); font-size: 16px; line-height: 1.6; }

/* En una tableta, los frentes van de dos en dos debajo del texto. */
@media (min-width: 40em) and (max-width: 61.99em) {
  .agencia__frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espacio-8); }
  .agencia__frente:nth-last-child(2) { border-bottom: 1px solid var(--sc-filete); }
}
/* Con sitio, dos columnas: el texto a la izquierda y los frentes a la derecha, centrados con él. */
@media (min-width: 62em) {
  .agencia__tarjeta { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); column-gap: clamp(40px, 5.4vw, 80px); align-items: center; }
  .agencia--compacta .agencia__tarjeta { grid-template-columns: minmax(0, 1fr); }
  .agencia__frente { padding-block: 26px; }
}

/* ---- La versión compacta (al final de «Prensa») --------------------------------- */
/* Detrás va el pie: abajo, el mismo aire que trae arriba el bloque anterior (el de .agencia). */
.agencia.agencia--compacta { --sc-relleno: clamp(20px, 5vw, 56px); }
.agencia--compacta .agencia__titular { max-width: 21em; font-size: clamp(25px, 5.4vw, 36px); }
.agencia--compacta .agencia__acciones { margin-top: var(--espacio-6); }

/* Lo que la página dice debajo de la tarjeta va con la prosa de la web. */
.agencia__pie { max-width: var(--ancho-lectura); }

/* ---- Contraste forzado: sin degradados, la tarjeta se queda con su marco -------- */
@media (forced-colors: active) {
  .agencia__tarjeta { border: 2px solid CanvasText; background: Canvas; box-shadow: none; forced-color-adjust: auto; }
  .agencia__rombo, .agencia__punto { border-color: CanvasText; forced-color-adjust: none; }
  .agencia__tarjeta :focus-visible { outline-color: Highlight; }
}

/* ---- En el papel: en claro, con su marco, sin fondos que dependan de la impresora ---- */
@media print {
  .agencia, .agencia.agencia--compacta { padding-block: var(--espacio-4) var(--espacio-6); break-inside: avoid; }
  .agencia__tarjeta { --sc-blanco: #111315; --sc-texto: #111315; --sc-texto-suave: #3A3D42; --sc-naranja: #A85F08; --sc-filete: #B4B7BB; padding: 24px 28px; border: 1.5px solid #111315; border-radius: 16px; background: none; box-shadow: none; color-scheme: light; font-size: 12.5px; gap: 20px; }
  .agencia__tarjeta::before { display: none; }
  .agencia__logo { font-size: 24px; }
  .agencia__titular { font-size: 26px; }
  .agencia__firma { font-size: 15px; }
  .agencia__frente { padding-block: 12px; break-inside: avoid; }
  .agencia__frente-titulo { font-size: 15px; }
  .agencia__frente-texto { font-size: 12px; }
  .tlqp a.agencia__boton { display: inline; min-height: 0; padding: 0; background: none; color: #111315; font-size: 13px; }
  .agencia__flecha { display: none; }
  .agencia__boton::after { content: " (" attr(href) ")"; font-weight: 400; }
  .agencia__tarjeta { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .agencia--compacta .agencia__tarjeta { grid-template-columns: minmax(0, 1fr); }
  .agencia__frentes { grid-template-columns: minmax(0, 1fr); }
}