/* ============================================================================
   MEREBA — Tema "Wimbledon"
   Paleta señorial: verde profundo + morado + crema.
   Se carga DESPUÉS de css/bulma/micss.css y sobreescribe las clases de Bulma
   realmente usadas en las plantillas (navbar, botones, enlaces, footer, iconos).

   Mantenimiento: las variables de marca también están en css/bulma/micss.scss.
   Si algún día se recompila Bulma (`npm run build`), este archivo sigue siendo
   la fuente de verdad del color en producción (el sitio no usa build-tooling).
   ========================================================================== */

:root {
  --mereba-green: #00703C;        /* verde Wimbledon — primario */
  --mereba-green-dark: #0B3D2E;   /* verde botella — footer / navbar */
  --mereba-green-hover: #00582F;
  --mereba-purple: #52297B;       /* morado — acento / enlaces / CTA secundario */
  --mereba-purple-dark: #3C1E5C;
  --mereba-cream: #F5F3EC;        /* crema — fondo */
  --mereba-cream-soft: #FBFAF6;   /* crema clara — tarjetas */
  --mereba-ink: #2B2B2B;          /* casi negro — texto */
  --mereba-line: #E3DFD3;         /* línea sutil sobre crema */

  /* Tipografía de cuerpo: legible y sin dependencias externas.
     Alternativas: cambiar este stack por "'Inter', ..." o "'Source Sans 3', ..."
     (requeriría cargar la fuente). Los titulares y la marca conservan merebaFont. */
  --mereba-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Tipografía: cuerpo legible / titulares y marca con fuente propia ---------- */
body,
p, li, label, .subtitle,
.input, .textarea, .select select,
.navbar, .button, .tag, .mereba-eyebrow, .footer, .notification {
  font-family: var(--mereba-font-body);
}

/* Titulares y wordmark conservan la tipografía de marca (merebaFont) */
h1, h2, h3, h4, h5, h6,
.title, .fontmereba, .fontmerebatit {
  font-family: "merebaFont", var(--mereba-font-body);
}

/* ---------- Base ---------- */
html,
body {
  background-color: var(--mereba-cream) !important;
  color: var(--mereba-ink);
}

.container.is-fluid > hr {
  background-color: var(--mereba-line);
}

/* Marca / wordmark con la tipografía propia */
.fontmerebatit,
.fontmereba {
  color: var(--mereba-green) !important;
}

/* Títulos en tinta para máximo contraste sobre crema */
.title,
h1.fontmerebatit,
.has-text-weight-bold {
  color: var(--mereba-ink);
}

/* Subtítulos: gris algo más oscuro para legibilidad sobre crema */
.subtitle.has-text-grey {
  color: #5b5b55 !important;
}

/* ---------- Enlaces (acento morado) ---------- */
a {
  color: var(--mereba-purple);
}

a:hover {
  color: var(--mereba-purple-dark);
}

/* ---------- Navbar (verde profundo) ---------- */
.navbar.is-dark {
  background-color: var(--mereba-green-dark);
}

.navbar.is-dark .navbar-item,
.navbar.is-dark .navbar-link {
  color: #F2EFE6;
}

.navbar.is-dark .navbar-item:hover,
.navbar.is-dark .navbar-link:hover,
.navbar.is-dark .navbar-item.is-active {
  background-color: var(--mereba-green) !important;
  color: #ffffff;
}

.navbar.is-dark .navbar-brand .navbar-item:hover {
  background-color: transparent !important;
}

.navbar.is-dark .navbar-brand .fontmereba {
  color: #ffffff !important;
}

/* Dropdown de gestión */
.navbar.is-dark .navbar-dropdown {
  background-color: var(--mereba-cream-soft);
  border-top-color: var(--mereba-green);
}

.navbar.is-dark .navbar-dropdown .navbar-item {
  color: var(--mereba-ink);
}

.navbar.is-dark .navbar-dropdown .navbar-item:hover {
  background-color: var(--mereba-green);
  color: #ffffff;
}

.navbar-burger {
  color: #F2EFE6;
}

/* ---------- Botones ---------- */
.button.is-primary {
  background-color: var(--mereba-green);
  border-color: transparent;
  color: #ffffff;
}

.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary.is-hovered {
  background-color: var(--mereba-green-hover);
  color: #ffffff;
}

.button.is-primary:active,
.button.is-primary.is-active {
  background-color: var(--mereba-green-dark);
  color: #ffffff;
}

.button.is-primary.is-light {
  background-color: #E2EFE7;
  color: var(--mereba-green-dark);
}

.button.is-primary[disabled] {
  background-color: var(--mereba-green);
}

/* CTA secundario en morado: usar class="button is-accent" */
.button.is-accent {
  background-color: var(--mereba-purple);
  border-color: transparent;
  color: #ffffff;
}

.button.is-accent:hover,
.button.is-accent:focus {
  background-color: var(--mereba-purple-dark);
  color: #ffffff;
}

/* Botón fantasma sobre crema (CTA secundario alternativo) */
.button.is-outlined.is-primary {
  border-color: var(--mereba-green);
  color: var(--mereba-green);
}

.button.is-outlined.is-primary:hover {
  background-color: var(--mereba-green);
  color: #ffffff;
}

/* ---------- Texto/iconos primarios (los check SVG de los servicios) ---------- */
.has-text-primary {
  color: var(--mereba-green) !important;
}

.has-background-primary {
  background-color: var(--mereba-green) !important;
}

/* ---------- Tarjetas de servicio (mejora visual de las secciones) ---------- */
.mereba-card {
  background-color: var(--mereba-cream-soft);
  border: 1px solid var(--mereba-line);
  border-radius: 10px;
  padding: 1.75rem;
  height: 100%;
  box-shadow: 0 1px 2px rgba(11, 61, 46, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mereba-card:hover {
  box-shadow: 0 8px 24px rgba(11, 61, 46, 0.12);
  transform: translateY(-2px);
}

/* Cinta superior de acento en bloques destacados */
.mereba-accent-top {
  border-top: 4px solid var(--mereba-green);
}

.mereba-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mereba-purple);
  margin-bottom: 0.5rem;
}

/* Bloque de credibilidad (ENS / ISO 27001) en verde profundo */
.mereba-credibility {
  background-color: var(--mereba-green-dark);
  color: #F2EFE6;
  border-radius: 12px;
  padding: 2.5rem;
}

.mereba-credibility h2,
.mereba-credibility h3,
.mereba-credibility .title {
  color: #ffffff;
}

.mereba-credibility p {
  color: #EDEAE0;
}

/* Bulma fija strong en color oscuro (#363636): sobre el verde se vuelve ilegible */
.mereba-credibility strong {
  color: #ffffff;
}

.mereba-credibility .tag {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 600;
}

/* ---------- Notificaciones / cookies en tono de marca ---------- */
.notification.is-primary.is-light {
  background-color: #E2EFE7;
  color: var(--mereba-green-dark);
}

/* ---------- Footer (verde botella) ---------- */
.footer.nota,
.footer {
  background-color: var(--mereba-green-dark) !important;
}

.footer .has-text-white,
.footer a.has-text-white {
  color: #F2EFE6 !important;
}

.footer a.has-text-white:hover {
  color: #ffffff !important;
  text-decoration: underline;
}