/* =======================================================
   STYLE.CSS - Estilos generales Maíz Fundido (PALETA PASTEL)
   - Paleta inspirada en tu imagen (crema + rosa + azul + menta)
   - Cards + secciones sin grises
   - FAQ cute
======================================================= */

/* ======================================
   0. VARIABLES (PALETA)
====================================== */
:root{
  /* Marca */
  --accent-color: #C7D60A;        /* maíz suave (cute) */
  --accent-strong: #bad200;       /* tu maíz original */

  /* Pasteles estilo imagen */
  --bg: #FFF9F3;                  /* crema */
  --alt: #FFE8F1;                 /* rosa súper clarito */
  --alt-2: #E8F4FF;               /* azul cielo */
  --mint: #E9FAF2;                /* verde menta */

  /* Superficies */
  --card: #FFFFFF;
  --card-soft: rgba(255,255,255,.75);
  --border: rgba(26,28,32,.10);

  /* Texto */
  --text: #1A1C20;
  --muted: #6A6F7A;

  /* Dark (suave, no duro) */
  --dark-bg: #0F1216;
  --dark-card: #1B2027;
  --dark-border: rgba(255,255,255,.10);
  --dark-muted: rgba(231,233,238,.78);
}

/* ======================================
   1. CONFIGURACIÓN GENERAL Y LAYOUT
====================================== */
html, body{
  height: 100%;
}

body{
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg) !important;
  color: var(--text);
  line-height: 1.5;
}

/* El main se estira */
main{
  flex: 1 0 auto;
  margin-top: 80px; /* header fijo */
}

@media (max-width: 768px){
  main{ margin-top: 50px; }
}

/* Contenedores donde se inyectan header y footer HTML */
#site-header, #site-footer{ width: 100%; }

/* ======================================
   2. TIPOGRAFÍA / TEXTOS
====================================== */
.small, p, .text-muted{
  color: var(--muted) !important;
}

.section-title{
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .2px;
}

.text-accent{
  color: var(--accent-color) !important;
}

/* ======================================
   3. SECCIONES (adiós gris)
====================================== */
.hero-section{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-alt{
  background-color: var(--alt);
}

.section-alt-blue{
  background-color: var(--alt-2);
}

.section-alt-mint{
  background-color: var(--mint);
}

/* ======================================
   4. BOTONES / ICONOS SOCIALES
====================================== */
#theme-toggle{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Botón outline primary (pastel) */
.btn-outline-primary{
  border-color: rgba(199,214,10,.60) !important;
  color: var(--text) !important;
}

.btn-outline-primary:hover{
  background: rgba(199,214,10,.18) !important;
  border-color: rgba(199,214,10,.90) !important;
}

/* Social icons */
.social-link{
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(108,117,125,.35);
  text-decoration: none;
  color: inherit;
  transition: background-color .2s ease, transform .2s ease;
}

.social-link:hover{
  transform: translateY(-1px);
  background-color: rgba(26,28,32,.04);
}

/* ======================================
   5. HERO IMAGEN
====================================== */
.profile-wrapper{
  width: 240px;
  height: 240px;
  border-radius: 24px;
  border: 3px solid rgba(199,214,10,.85);
  padding: 6px;
  margin-bottom: 1rem;
  background: rgba(255,255,255,.55);
}

.profile-img{
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

/* ======================================
   6. CARDS (INFO / OFERTA / DESTACADOS / CONTACTO)
====================================== */
.info-card,
.skill-card,
.project-card,
.blog-card,
.cv-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.2rem;
}

.info-label{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(106,111,122,.95);
}

.skill-icon{
  font-size: 1.8rem;
  margin-bottom: .4rem;
  color: var(--accent-color);
}

.badge-skill{
  background-color: var(--accent-color) !important;
  color: #1A1C20 !important;
  font-size: .7rem !important;
  font-weight: 900;
}

.project-header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}

.blog-card{
  max-width: 800px;
  margin: 0 auto;
}

/* imágenes destacados */
.project-thumb{
  background-color: rgba(255,255,255,.75);
  padding: .75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.project-thumb img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ======================================
   7. CONTACTO – tamaños encabezados
====================================== */
#contacto h3,
#cv h3{
  font-size: 1.25rem;
  font-weight: 700;
}

#contacto h2.section-title,
#cv h2.section-title{
  font-size: 2rem;
}

/* =========================================================
   BOTONES REDES (IG / TT / FB) - FULL CONTROL (LIGHT + DARK)
   IMPORTANTE: en HTML usa SOLO: class="btn btn-ig|btn-tt|btn-fb"
========================================================= */

/* Base común (más específico para ganarle a Bootstrap) */
a.btn.btn-ig, a.btn.btn-tt, a.btn.btn-fb{
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;

  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease;
}

a.btn.btn-ig:hover, a.btn.btn-tt:hover, a.btn.btn-fb:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

a.btn.btn-ig i, a.btn.btn-tt i, a.btn.btn-fb i{
  color: inherit !important;
}

/* ---------------------------
   Instagram (rosa moradito)
--------------------------- */
a.btn.btn-ig{
  border-color: rgba(231, 95, 182, .85) !important;
  color: #C73C9A !important; /* rosa moradito */
  background: linear-gradient(90deg,
    rgba(255, 140, 207, .18),
    rgba(160, 120, 255, .14)
  ) !important;
}
a.btn.btn-ig:hover{
  border-color: rgba(231, 95, 182, 1) !important;
  filter: brightness(0.98);
}

/* ---------------------------
   Facebook (azul)
--------------------------- */
a.btn.btn-fb{
  border-color: rgba(88, 134, 255, .75) !important;
  color: #2F63E0 !important;
  background: rgba(88, 134, 255, .12) !important;
}
a.btn.btn-fb:hover{
  border-color: rgba(88, 134, 255, 1) !important;
  background: rgba(88, 134, 255, .18) !important;
}

/* ---------------------------
   TikTok (turquesa + azul + rojito)
   (degradado suave y acento rojo en hover)
--------------------------- */
a.btn.btn-tt{
  border-color: rgba(54, 215, 205, .75) !important;
  color: #0B7A86 !important;
  background: linear-gradient(90deg,
    rgba(54, 215, 205, .16),
    rgba(88, 134, 255, .12)
  ) !important;
}
a.btn.btn-tt:hover{
  border-color: rgba(240, 70, 90, .65) !important; /* rojito leve al hover */
  box-shadow: 0 10px 22px rgba(240, 70, 90, .12);
}

/* =========================
   DARK MODE: mantener identidad y subir contraste
========================= */
html[data-bs-theme="dark"] a.btn.btn-ig,
html[data-bs-theme="dark"] a.btn.btn-tt,
html[data-bs-theme="dark"] a.btn.btn-fb{
  box-shadow: none;
}

/* IG dark */
html[data-bs-theme="dark"] a.btn.btn-ig{
  color: #FF9AD6 !important;
  border-color: rgba(255, 154, 214, .90) !important;
  background: linear-gradient(90deg,
    rgba(255, 140, 207, .14),
    rgba(160, 120, 255, .12)
  ) !important;
}
html[data-bs-theme="dark"] a.btn.btn-ig:hover{
  border-color: rgba(255, 154, 214, 1) !important;
  background: linear-gradient(90deg,
    rgba(255, 140, 207, .20),
    rgba(160, 120, 255, .18)
  ) !important;
}

/* FB dark */
html[data-bs-theme="dark"] a.btn.btn-fb{
  color: #A9C2FF !important;
  border-color: rgba(169, 194, 255, .85) !important;
  background: rgba(88, 134, 255, .10) !important;
}
html[data-bs-theme="dark"] a.btn.btn-fb:hover{
  background: rgba(88, 134, 255, .16) !important;
  border-color: rgba(169, 194, 255, 1) !important;
}

/* TT dark */
html[data-bs-theme="dark"] a.btn.btn-tt{
  color: #A8F6F0 !important;
  border-color: rgba(168, 246, 240, .85) !important;
  background: linear-gradient(90deg,
    rgba(54, 215, 205, .12),
    rgba(88, 134, 255, .10)
  ) !important;
}
html[data-bs-theme="dark"] a.btn.btn-tt:hover{
  border-color: rgba(100, 215, 250, 0.85) !important; /* rojito visible */
  box-shadow: 0 10px 22px rgba(255, 120, 140, .14);
}

/* =========================================================
   BOTÓN PDF (catálogo) - MISMO FORMATO QUE IG
   IMPORTANTE: en HTML usa SOLO: class="btn btn-pdf-c"
========================================================= */

/* Base común (idéntica a IG) */
a.btn.btn-pdf-c{
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;

  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease,
              background-color .15s ease, border-color .15s ease;
}

a.btn.btn-pdf-c:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

a.btn.btn-pdf-c i,
a.btn.btn-pdf-c span{
  color: inherit !important; /* ✅ hereda el color del botón */
}

/* ---------------------------
   PDF Catálogo (Maíz #bad200)
--------------------------- */
/* PDF botón: texto verde (light + dark) */
a.btn.btn-pdf-c{
  border-color: rgba(186, 210, 0, .95) !important;
  color: #2E7D32 !important;                 /* ✅ verde */
  background: rgba(186, 210, 0, .12) !important;
}

/* por si trae <i> o <span> dentro */
a.btn.btn-pdf-c *{
  color: inherit !important;                 /* ✅ hereda verde */
}

a.btn.btn-pdf-c:hover{
  border-color: rgba(186, 210, 0, 1) !important;
  background: rgba(186, 210, 0, .18) !important;
  filter: brightness(0.99);
}

/* Dark mode: MISMO look, verde visible */
html[data-bs-theme="dark"] a.btn.btn-pdf-c{
  border-color: rgba(186, 210, 0, 1) !important;
  color: #7ED957 !important;                 /* ✅ verde más brillante para dark */
  background: rgba(186, 210, 0, .10) !important;
}

html[data-bs-theme="dark"] a.btn.btn-pdf-c:hover{
  background: rgba(186, 210, 0, .16) !important;
}

/* asegura iconos en dark también */
html[data-bs-theme="dark"] a.btn.btn-pdf-c *{
  color: inherit !important;
}

/* ======================================
   8. HERO LINKS GRANDES (cards)
====================================== */
.hero-links-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px){
  .hero-links-grid{ grid-template-columns: 1fr 1fr; }
}

.hero-link-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hero-link-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(26,28,32,.08);
  border-color: rgba(26,28,32,.16);
}

.hero-link-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(199,214,10,.16);
  color: #1A1C20;
  flex: 0 0 auto;
}

.hero-link-icon i{ font-size: 1.2rem; }

.hero-link-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hero-link-title{
  font-weight: 900;
  letter-spacing: .2px;
  color: #1A1C20;
}

.hero-link-sub{
  font-size: .92rem;
  color: rgba(26,28,32,.62);
}

.hero-link-arrow{
  margin-left: auto;
  opacity: .6;
}

/* ======================================
   9. FAQ – Maíz Fundido (cute)
====================================== */
.mf-accordion{ --mf-radius: 18px; }

.mf-acc-item{
  border: 1px solid rgba(26,28,32,.08);
  border-radius: var(--mf-radius);
  overflow: hidden;
  background: rgba(255,255,255,.88);
  margin-bottom: 12px;
}

.mf-acc-btn{
  gap: 10px;
  padding: 16px 16px;
  font-weight: 900;
  letter-spacing: .2px;
  background: transparent;
}

.mf-acc-btn:focus{
  box-shadow: 0 0 0 .2rem rgba(199,214,10,.22);
}

.accordion-button:not(.collapsed){
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.mf-q{ flex: 1 1 auto; min-width: 0; }

.mf-chip{
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(199,214,10,.45);
  background: rgba(199,214,10,.14);
  color: #1A1C20;
}

.mf-acc-body{
  padding: 14px 16px 18px;
  line-height: 1.65;
  color: rgba(26,28,32,.80);
}

/* Tarjetita lateral */
.mf-faq-card{
  border-radius: 20px;
  border: 1px solid rgba(26,28,32,.08);
  background: rgba(255,255,255,.88);
  padding: 18px;
  position: sticky;
  top: 92px;
}

.mf-faq-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(199,214,10,.14);
  border: 1px solid rgba(199,214,10,.45);
  font-weight: 900;
  margin-bottom: 12px;
}

.mf-btn-accent{
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #1A1C20 !important;
  font-weight: 900;
}

.mf-btn-accent:hover{ filter: brightness(.96); }

/* =========================
   FAQ - FIX DARK: texto preguntas visible
========================= */
html[data-bs-theme="dark"] .mf-acc-item{
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}

/* El botón/pregunta */
html[data-bs-theme="dark"] .accordion-button.mf-acc-btn{
  color: #E7E9EE !important;          /* texto */
  background: transparent !important; /* evita fondo raro */
}

/* El texto dentro (por si Bootstrap lo pisa) */
html[data-bs-theme="dark"] .accordion-button.mf-acc-btn .mf-q{
  color: #E7E9EE !important;
}

/* Flechita (icono del accordion) */
html[data-bs-theme="dark"] .accordion-button::after{
  filter: invert(1) brightness(1.2);  /* hace visible la flecha */
  opacity: .95;
}

/* Cuando está abierto (Bootstrap aplica estilos) */
html[data-bs-theme="dark"] .accordion-button:not(.collapsed){
  color: #E7E9EE !important;
  background: transparent !important;
  box-shadow: none !important;
}


@media (max-width: 991.98px){
  .mf-faq-card{
    position: static;
    top: auto;
  }
}

/* =====================================================
   FAQ – BOOTSTRAP FIX (vars) para dark
   (PÉGALO AL FINAL DEL CSS)
===================================================== */
html[data-bs-theme="dark"] .mf-accordion{
  /* Variables de Bootstrap Accordion */
  --bs-accordion-color: #E7E9EE;
  --bs-accordion-bg: transparent;

  --bs-accordion-btn-color: #E7E9EE;
  --bs-accordion-btn-bg: transparent;

  --bs-accordion-active-color: #E7E9EE;
  --bs-accordion-active-bg: transparent;

  --bs-accordion-border-color: rgba(255,255,255,.10);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(199,214,10,.22);
}

/* Pregunta: fuerza color sí o sí */
html[data-bs-theme="dark"] .mf-accordion .accordion-button,
html[data-bs-theme="dark"] .mf-accordion .accordion-button:not(.collapsed){
  color: #E7E9EE !important;
  background-color: transparent !important;
}

/* El span pregunta */
html[data-bs-theme="dark"] .mf-accordion .mf-q{
  color: #E7E9EE !important;
}

/* Flecha visible */
html[data-bs-theme="dark"] .mf-accordion .accordion-button::after{
  filter: invert(1) brightness(1.25);
  opacity: 1;
}

/* Respuesta */
html[data-bs-theme="dark"] .mf-accordion .accordion-body{
  color: rgba(231,233,238,.86) !important;
}

/* (Opcional) evita selección azul rara en la pregunta */
.mf-accordion .accordion-button{
  -webkit-tap-highlight-color: transparent;
}


/* ==========================
  imagen elotito impreso
============================ */
.mf-side-img{
  max-width: 420px;   /* límite bonito */
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  padding: 10px;
}

html[data-bs-theme="dark"] .mf-side-img{
  border-color: var(--dark-border);
  background: rgba(27,32,39,.55);
}


/* =========================
   BADGES DESTACADOS (por temática)
   Pastel + readable en light/dark
========================= */

.badge-mf{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 900;
  letter-spacing: .2px;
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

/* Nuevo (rosa/moradito) */
.badge-mf--new{
  color: #a10a61;
  background: rgba(255, 110, 170, .16);
  border-color: rgba(255, 110, 170, .42);
}

/* Indispensable (azul) */
.badge-mf--must{
  color: #1b4f9c;
  background: rgba(66, 103, 178, .14);
  border-color: rgba(66, 103, 178, .38);
}

/* Personalizados (turquesa + toque rojito sutil) */
.badge-mf--custom{
  color: #0a6a73;
  background: linear-gradient(
    90deg,
    rgba(32, 213, 236, .16),
    rgba(240, 50, 50, .08)
  );
  border-color: rgba(32, 213, 236, .40);
}

/* Coleccionable (menta) */
.badge-mf--collect{
  color: #146b3a;
  background: rgba(46, 204, 113, .14);
  border-color: rgba(46, 204, 113, .34);
}

/* Dark mode: sube contraste sin cambiar “la idea” del color */
html[data-bs-theme="dark"] .badge-mf{
  border-color: rgba(255,255,255,.12);
}

html[data-bs-theme="dark"] .badge-mf--new{
  color: #ffb1db;
  background: rgba(255, 110, 170, .14);
  border-color: rgba(255, 110, 170, .40);
}

html[data-bs-theme="dark"] .badge-mf--must{
  color: #b6d2ff;
  background: rgba(120, 160, 255, .14);
  border-color: rgba(120, 160, 255, .38);
}

html[data-bs-theme="dark"] .badge-mf--custom{
  color: #a7f0fb;
  background: linear-gradient(
    90deg,
    rgba(32, 213, 236, .14),
    rgba(240, 50, 50, .10)
  );
  border-color: rgba(32, 213, 236, .38);
}

html[data-bs-theme="dark"] .badge-mf--collect{
  color: #bdf5d1;
  background: rgba(46, 204, 113, .12);
  border-color: rgba(46, 204, 113, .30);
}


/* =========================
   Tienda en linea muy pronto
========================= */
/* Banner "Tienda muy pronto" */
#tienda .cv-card{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 18px;
}

/* Dark mode */
html[data-bs-theme="dark"] #tienda .cv-card{
  background: rgba(27,32,39,.92) !important;
  border-color: var(--dark-border) !important;
}

.mf-divider-wave{
  height: 34px;
  background: var(--bg);
  position: relative;
}

.mf-divider-wave::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 18px;
  background:
    radial-gradient(20px 12px at 20px 0, transparent 70%, rgba(26,28,32,.08) 71%) repeat-x;
  background-size: 40px 18px;
  opacity: .6;
}

.mf-kicker{
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  opacity: .9;
}

/* Dark */
html[data-bs-theme="dark"] .mf-divider-wave{
  background: var(--dark-bg);
}
html[data-bs-theme="dark"] .mf-divider-wave::after{
  background:
    radial-gradient(20px 12px at 20px 0, transparent 70%, rgba(255,255,255,.10) 71%) repeat-x;
}

/* ======================================
   10. TIMELINE (si no lo usas, bórralo)
====================================== */
.timeline{
  list-style: none;
  padding-left: 0;
  border-left: 2px solid rgba(26,28,32,.10);
  margin-left: .4rem;
}

.timeline li{
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.timeline li::before{
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.35rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--accent-color);
}

/* ======================================
   11. RESPONSIVE
====================================== */
@media (max-width: 767.98px){
  .hero-section{ text-align: center; }
  .profile-wrapper{ margin-left: auto; margin-right: auto; }
  .section-title{ font-size: 1.6rem; }
}

@media (min-width: 992px){
  .hero-section{ padding-top: 4rem; padding-bottom: 4rem; }
}

/* ======================================
   12. DARK MODE (suave)
====================================== */
html[data-bs-theme="dark"] body{
  background-color: var(--dark-bg) !important;
  color: #E7E9EE !important;
}

html[data-bs-theme="dark"] .small,
html[data-bs-theme="dark"] p,
html[data-bs-theme="dark"] .text-muted{
  color: var(--dark-muted) !important;
}

/* Secciones alternas en dark: pastel MUY leve */
html[data-bs-theme="dark"] .section-alt{
  background-color: rgba(255,232,241,.06) !important;
}

html[data-bs-theme="dark"] .section-alt-blue{
  background-color: rgba(232,244,255,.06) !important;
}

html[data-bs-theme="dark"] .section-alt-mint{
  background-color: rgba(233,250,242,.06) !important;
}

/* Cards dark */
html[data-bs-theme="dark"] .info-card,
html[data-bs-theme="dark"] .skill-card,
html[data-bs-theme="dark"] .project-card,
html[data-bs-theme="dark"] .blog-card,
html[data-bs-theme="dark"] .cv-card,
html[data-bs-theme="dark"] .mf-acc-item,
html[data-bs-theme="dark"] .mf-faq-card,
html[data-bs-theme="dark"] .project-thumb{
  background-color: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: #E7E9EE !important;
}

html[data-bs-theme="dark"] .hero-link-card{
  background-color: rgba(27,32,39,.88);
  border-color: var(--dark-border);
}

html[data-bs-theme="dark"] .hero-link-title{ color: #fff; }
html[data-bs-theme="dark"] .hero-link-sub{ color: rgba(231,233,238,.75); }

html[data-bs-theme="dark"] .hero-link-icon{
  background: rgba(199,214,10,.20);
  color: #E7E9EE;
}

html[data-bs-theme="dark"] .mf-chip{
  color: #E7E9EE;
  border-color: rgba(255,255,255,.14);
  background: rgba(199,214,10,.18);
}

html[data-bs-theme="dark"] .btn-outline-primary{
  color: #E7E9EE !important;
  border-color: rgba(199,214,10,.60) !important;
}

html[data-bs-theme="dark"] .btn-outline-primary:hover{
  background: rgba(199,214,10,.20) !important;
  border-color: rgba(199,214,10,.90) !important;
}