/* brand.css — identidad de Marco Petit sobre la base de Blogy.
   Se carga después de main.css (Blogy). No tocar los CSS originales de Blogy.
   Las fuentes (Playfair Display, Raleway) se cargan desde base.html. */

:root {
  --color-carbon: #2B2B2B;
  --color-hueso: #F0EBE1;
  --color-dorado: #C4A86B;
  /* Tono de "superficie": un poco más claro que el carbón, para que las
     tarjetas y los inputs se despeguen del fondo general (RNF visual, tema
     oscuro — ver brand.md §10, "carbón: fondo principal"). */
  --color-carbon-surface: color-mix(in srgb, var(--color-carbon), white 10%);
  --color-carbon-border: color-mix(in srgb, var(--color-carbon), white 22%);

  --font-display: 'Playfair Display', serif; /* 900 italic */
  --font-body: 'Raleway', sans-serif; /* 300 */

  --default-font: var(--font-body);
  --heading-font: var(--font-display);
  --nav-font: var(--font-body);

  --background-color: var(--color-carbon);
  --default-color: var(--color-hueso);
  --heading-color: var(--color-hueso);
  --accent-color: var(--color-dorado);
  --surface-color: var(--color-carbon-surface);
  --contrast-color: var(--color-carbon);

  --nav-color: var(--color-hueso);
  --nav-hover-color: var(--color-dorado);
  --nav-mobile-background-color: var(--color-carbon-surface);
  --nav-dropdown-background-color: var(--color-carbon-surface);
  --nav-dropdown-color: var(--color-hueso);
  --nav-dropdown-hover-color: var(--color-dorado);
}

/* Bootstrap 5.3 trae su propio modo oscuro (activado con
   data-bs-theme="dark" en <html>, solo en base.html/base_landing.html,
   nunca en el panel): remapeamos sus variables a la paleta de marca para
   que los componentes nativos de Bootstrap (alert, card, badge,
   text-muted, form-control) usen carbón/hueso/dorado en vez del gris
   genérico de Bootstrap. */

[data-bs-theme="dark"] {
  --bs-body-bg: var(--color-carbon);
  --bs-body-color: var(--color-hueso);
  --bs-emphasis-color: var(--color-hueso);
  --bs-secondary-color: color-mix(in srgb, var(--color-hueso), transparent 30%);
  --bs-secondary-bg: var(--color-carbon-surface);
  --bs-tertiary-bg: var(--color-carbon-surface);
  --bs-tertiary-color: color-mix(in srgb, var(--color-hueso), transparent 50%);
  --bs-border-color: var(--color-carbon-border);
  --bs-border-color-translucent: var(--color-carbon-border);
  --bs-link-color: var(--color-dorado);
  --bs-link-hover-color: color-mix(in srgb, var(--color-dorado), white 15%);
  --bs-link-color-rgb: 196, 168, 107;
  --bs-code-color: var(--color-dorado);
}

body {
  background-color: var(--background-color);
  color: var(--default-color);
}

.logo .sitename {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
}

.logo span {
  color: var(--color-dorado);
}

.header .top-row .logo img {
  max-height: 110px;
  width: auto;
  margin-right: 0;
}

.footer .footer-about .logo img {
  max-height: 44px;
  width: auto;
}

.btn-primary,
.btn-get-started {
  background-color: var(--color-dorado);
  border-color: var(--color-dorado);
  color: var(--color-carbon);
}

.btn-primary:hover,
.btn-get-started:hover {
  background-color: var(--color-hueso);
  border-color: var(--color-hueso);
  color: var(--color-carbon);
}

.btn-lee-gratis {
  background-color: var(--color-dorado) !important;
  color: var(--color-carbon) !important;
  border-radius: 50px;
  padding: 8px 20px !important;
  margin-left: 10px;
  transition: 0.3s;
}

.btn-lee-gratis:hover {
  background-color: var(--color-hueso) !important;
  color: var(--color-carbon) !important;
}

#hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.5rem;
}

/* Hueco visual para assets que todavía no existen (ver AGENTS.md "Decisiones pendientes"). */
.placeholder-asset {
  background: repeating-linear-gradient(
    45deg,
    var(--color-hueso),
    var(--color-hueso) 10px,
    #e4ddcf 10px,
    #e4ddcf 20px
  );
  border: 1px dashed var(--color-dorado);
  color: var(--color-carbon);
  text-align: center;
  font-size: 0.85rem;
  width: 100%;
}

blockquote {
  background-color: var(--surface-color);
  border-left: 4px solid var(--color-dorado);
}

#sigueme .social-links a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-carbon-surface);
  color: var(--color-hueso);
  font-size: 1.25rem;
}

#sigueme .social-links a:hover {
  background-color: var(--color-dorado);
  color: var(--color-carbon);
}

#cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background-color: var(--color-carbon-surface);
  border-top: 1px solid var(--color-carbon-border);
}