/* ===========================================================================
   PAGINAS PUBLICAS DE APOLLO CON LA MARCA RHODIUM
   Se sirve en https://apollo.rhodium.ooo/public/custom.css y lo cargan la
   pagina de baja, la de preferencias y las de archivo de campanas.
   Lo aplica marca_apollo.py. Editar aqui, no en la consola de Apollo.

   Sin esto, el suscriptor que se da de baja aterriza en una pagina con el
   logo de Listmonk, en ingles y en azul: la ultima cosa que ve de nosotros
   seria la marca de un tercero.

   Paleta del brief RHO-INT-BRF-2026-0002: tinta #00073C, violeta #2D008A,
   menta #9BFF8A.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --rho-tinta: #00073C;
  --rho-violeta: #2D008A;
  --rho-menta: #9BFF8A;
  --rho-texto: #1B2136;
  --rho-tenue: #5A6285;
  --rho-fondo: #EDEFF6;
  --rho-linea: #DDE1EE;
}

body {
  background: var(--rho-fondo) !important;
  color: var(--rho-texto) !important;
  font-family: 'Space Grotesk', Arial, Helvetica, sans-serif !important;
}

.container.wrap {
  background: #FFFFFF;
  border: 0;
  border-top: 4px solid var(--rho-menta);
  box-shadow: 0 2px 18px rgba(0, 7, 60, .10);
  padding: 0 34px 34px;
  max-width: 620px;
}

/* --- Cabecera: fuera el logo de Listmonk, entra el de Rhodium sobre tinta --- */
header.header {
  background: var(--rho-tinta);
  margin: 0 -34px 26px;
  padding: 26px 34px 22px;
  border-bottom: 0;
}
header.header .logo img,
header.header img {
  display: none !important;
}
header.header .logo {
  display: block;
  width: 210px;
  height: 38px;
  background-image: url('/uploads/logo_rhodium_blanco.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
}
header.header .logo a { display: block; height: 38px; }
/* El descriptor de la casa, debajo del logo */
header.header::after {
  content: 'AI · AUTOMATION · BUSINESS INTELLIGENCE';
  display: block;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--rho-menta);
}

h1, h2, h3 {
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif !important;
  color: var(--rho-tinta) !important;
  letter-spacing: -.2px;
}
h2 { font-size: 21px; line-height: 28px; }
h3 { font-size: 16px; }

a { color: var(--rho-violeta); }
a:hover { color: var(--rho-tinta); }

/* --- Botones: cuadrados y con la paleta, igual que el correo --- */
.button,
button.button,
input[type='submit'].button {
  background: var(--rho-violeta) !important;
  border: 2px solid var(--rho-violeta) !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  text-transform: none;
  padding: 13px 26px !important;
  height: auto !important;
  transition: background .15s ease;
}
.button:hover,
button.button:hover {
  background: var(--rho-tinta) !important;
  border-color: var(--rho-tinta) !important;
}
.button.button-outline,
input.button.button-outline {
  background: transparent !important;
  color: var(--rho-violeta) !important;
  border: 2px solid var(--rho-violeta) !important;
}
.button.button-outline:hover,
input.button.button-outline:hover {
  background: var(--rho-violeta) !important;
  color: #FFFFFF !important;
}

input[type='checkbox'], input[type='radio'] { accent-color: var(--rho-violeta); }
input[type='text'], input[type='email'], select, textarea {
  border-radius: 0 !important;
  border: 1px solid var(--rho-linea) !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
}
input[type='text']:focus, input[type='email']:focus, select:focus, textarea:focus {
  border-color: var(--rho-violeta) !important;
  outline: 0;
}

hr { border: 0; border-top: 1px solid var(--rho-linea); }

/* Bloque de privacidad y datos: se separa con una linea de marca */
.data-form { border-top: 1px solid var(--rho-linea); padding-top: 6px; }

footer.container {
  max-width: 620px;
  color: var(--rho-tenue);
  font-size: 12.5px;
  border-top: 0;
}
footer.container a { color: var(--rho-tenue); text-decoration: underline; }
/* El pie de Listmonk trae solo "Propulsado por listmonk". Se oculta su texto y en su
   lugar queda la firma de la casa: el suscriptor esta viendo una pagina de Rhodium, no
   la de la herramienta que hay debajo. El motor sigue siendo Listmonk y su codigo sigue
   siendo suyo; esto es presentacion, no atribucion de autoria. */
footer.container {
  font-size: 0;                 /* borra el texto suelto del pie */
}
footer.container a { display: none; }
footer.container::before {
  content: 'Grupo Rhodium · Empower. Create. Transform.';
  display: block;
  font-size: 12.5px;            /* se restituye el tamaño solo para nuestra linea */
  color: var(--rho-tinta);
  font-weight: 700;
}

.spinner > div { background: var(--rho-violeta); }

@media (max-width: 640px) {
  .container.wrap { padding: 0 20px 26px; }
  header.header { margin: 0 -20px 22px; padding: 22px 20px 18px; }
  header.header .logo { width: 178px; height: 32px; }
  header.header .logo a { height: 32px; }
}