/* ================================================
   estilos del frontend publico - brandster cms
   generado automaticamente - no editar a mano
   ================================================ */

/* tokens de diseno (modo claro) */
:root {
  --fp-primary:          #7c3aed;
  --fp-primary-h:        #6d28d9;
  --fp-secondary:        #db2777;
  --fp-body-bg:          #ffffff;
  --fp-body-text:        #000000;
  --fp-link:             #7c3aed;
  --fp-link-h:           #db2777;
  --fp-heading:          #000000;
  --fp-muted:            #78716c;
  --fp-header-bg:        #1c1917;
  --fp-header-text:      #fafaf9;
  --fp-header-border:    #292524;
  --fp-header-shadow:    0 1px 6px rgba(0,0,0,0.20);
  --fp-menu-color:       #d6d3d1;
  --fp-menu-h:           #60a5fa;
  --fp-footer-bg:        #0c0a09;
  --fp-footer-text:      #d6d3d1;
  --fp-footer-link:      #a8a29e;
  --fp-card-bg:          rgba(255, 255, 255, 0.7);
  --fp-card-border:      rgba(255, 255, 255, 0.4);
  --fp-card-radius:      16px;
  --fp-card-shadow:      0 10px 25px -5px rgba(124, 58, 237, 0.1), 0 8px 10px -6px rgba(124, 58, 237, 0.1);
  --fp-card-shadow-h:    0 20px 30px -5px rgba(124, 58, 237, 0.25), 0 10px 15px -10px rgba(124, 58, 237, 0.25);
  --fp-card-img-h:       192px;
  --fp-card-p:           20px;
  --fp-card-title:       #1c1917;
  --fp-card-text:        #78716c;
  --fp-card-meta:        #a8a29e;
  --fp-card-cat:         #3b82f6;
  --fp-hero-bg:          #1c1917;
  --fp-hero-h:           400px;
  --fp-hero-overlay:     0.5;
  --fp-hero-title:       #fafaf9;
  --fp-btn-bg:           #7c3aed;
  --fp-btn-text:         #ffffff;
  --fp-btn-h:            #6d28d9;
  --fp-btn-radius:       9999px;
  --fp-btn-px:           24px;
  --fp-btn-py:           10px;
  --fp-page-active-bg:   #3b82f6;
  --fp-page-active-text: #ffffff;
  --fp-page-border:      #e7e5e4;
  --fp-page-text:        #78716c;
  --fp-page-h:           #f5f3ef;
  --fp-page-radius:      9999px;
  --fp-tag-active-bg:    #3b82f6;
  --fp-tag-active-text:  #ffffff;
  --fp-tag-bg:           #f5f3ef;
  --fp-tag-text:         #57534e;
  --fp-tag-border:       #d6d3d1;
  --fp-tag-radius:       9999px;
  --fp-content-mw:       1200px;
  --fp-content-px:       24px;
  --fp-font-family:      'Outfit', sans-serif;
  --fp-font-size:        16px;

  /* === componentes globales === */
  --bc-comp-heading-align:   left;
  --bc-comp-heading-color:   #1c1917;
  --bc-comp-heading-h1-size: 36px;
  --bc-comp-heading-h2-size: 30px;
  --bc-comp-heading-h3-size: 24px;
  --bc-comp-heading-h4-size: 20px;
  --bc-comp-heading-h5-size: 18px;
  --bc-comp-heading-h6-size: 16px;
  
  --bc-comp-spacer-height:   40px;
  
  --bc-comp-divider-style:   solid;
  --bc-comp-divider-color:   #e7e5e4;
  --bc-comp-divider-width:   100%;
  --bc-comp-divider-margin:  20px;
  
  --bc-comp-cta-bg:          #4f46e5;
  --bc-comp-cta-text:        #ffffff;
  
  --bc-comp-hero-height:     400px;
  --bc-comp-hero-align:      center;
  --bc-comp-hero-overlay:    0.5;

  --bc-comp-image-mw:        100%;
  --bc-comp-image-align:     center;

  --bc-comp-text-padding:    20px;

  --bc-comp-igl-bg:          #ffffff;
  --bc-comp-igl-border:      #e5e7eb;
  --bc-comp-igl-icon:        #4f46e5;
  --bc-comp-igl-text:        #1f2937;

  /* === componentes de header y footer === */
  --header-logo-h:        40px;
  --header-logo-radius:   0px;
  --header-logo-border-w: 0px;
  --header-logo-border-c: #e5e7eb;
  --header-logo-p:        0px;
  --header-logo-bg:       #ffffff;
  --header-logo-text-s:   14px;
  --header-logo-text-c:   #64748b;
  --header-logo-text-w:   400;
  --header-logo-gap:      8px;
  --header-logo-align:    flex-start;

  --header-menu-align:    flex-end;
  --header-menu-text:     #ffffff;
  --header-menu-hover:    #5b53ff;
  --header-menu-hover-bg: #f3f4f6;
  --header-menu-item-bg:  transparent;
  --header-menu-border-w: 0px;
  --header-menu-border-c: #1f2937;
  --header-menu-radius:   0px;
  --header-menu-px:       0px;
  --header-menu-py:       0px;
  --header-menu-transform: none;

  --footer-logo-align:    center;

  --footer-menu-align:    flex-start;
  --footer-menu-text:     #1f2937;
  --footer-menu-hover:    #5b53ff;
  --footer-menu-transform: none;

  --footer-text-align:    center;
  --footer-text-color:    #64748b;
}

/* tokens de diseno (modo oscuro) */
html.fend-dark {
  --fp-primary:          #a78bfa;
  --fp-primary-h:        #8b5cf6;
  --fp-secondary:        #ec4899;
  --fp-body-bg:          #0c0a09;
  --fp-body-text:        #ffffff;
  --fp-link:             #a78bfa;
  --fp-link-h:           #ec4899;
  --fp-heading:          #ffffff;
  --fp-muted:            #78716c;
  --fp-header-bg:        #1c1917;
  --fp-header-text:      #fafaf9;
  --fp-header-border:    #292524;
  --fp-header-shadow:    0 1px 6px rgba(0,0,0,0.40);
  --fp-menu-color:       #a8a29e;
  --fp-menu-h:           #60a5fa;
  --fp-footer-bg:        #0c0a09;
  --fp-footer-text:      #a8a29e;
  --fp-footer-link:      #78716c;
  --fp-card-bg:          rgba(28, 32, 48, 0.7);
  --fp-card-border:      rgba(255, 255, 255, 0.1);
  --fp-card-radius:      16px;
  --fp-card-shadow:      0 10px 25px -5px rgba(0, 0, 0, 0.3);
  --fp-card-shadow-h:    0 20px 30px -5px rgba(0, 0, 0, 0.5);
  --fp-card-img-h:       192px;
  --fp-card-p:           20px;
  --fp-card-title:       #fafaf9;
  --fp-card-text:        #a8a29e;
  --fp-card-meta:        #78716c;
  --fp-card-cat:         #60a5fa;
  --fp-hero-bg:          #1c1917;
  --fp-hero-h:           400px;
  --fp-hero-overlay:     0.5;
  --fp-hero-title:       #fafaf9;
  --fp-btn-bg:           #7c3aed;
  --fp-btn-text:         #0c0a09;
  --fp-btn-h:            #6d28d9;
  --fp-btn-radius:       9999px;
  --fp-btn-px:           24px;
  --fp-btn-py:           10px;
  --fp-page-active-bg:   #60a5fa;
  --fp-page-active-text: #0f0e0d;
  --fp-page-border:      #292524;
  --fp-page-text:        #a8a29e;
  --fp-page-h:           #1c1917;
  --fp-page-radius:      9999px;
  --fp-tag-active-bg:    #60a5fa;
  --fp-tag-active-text:  #0f0e0d;
  --fp-tag-bg:           #1c1917;
  --fp-tag-text:         #a8a29e;
  --fp-tag-border:       #292524;
  --fp-tag-radius:       9999px;
  --fp-content-mw:       1200px;
  --fp-content-px:       24px;
  --fp-font-family:      'Outfit', sans-serif;
  --fp-font-size:        16px;

  /* === componentes globales === */
  --bc-comp-heading-align:   left;
  --bc-comp-heading-color:   #fafaf9;
  --bc-comp-heading-h1-size: 36px;
  --bc-comp-heading-h2-size: 30px;
  --bc-comp-heading-h3-size: 24px;
  --bc-comp-heading-h4-size: 20px;
  --bc-comp-heading-h5-size: 18px;
  --bc-comp-heading-h6-size: 16px;
  
  --bc-comp-spacer-height:   40px;
  
  --bc-comp-divider-style:   solid;
  --bc-comp-divider-color:   #292524;
  --bc-comp-divider-width:   100%;
  --bc-comp-divider-margin:  20px;
  
  --bc-comp-cta-bg:          #4f46e5;
  --bc-comp-cta-text:        #ffffff;
  
  --bc-comp-hero-height:     400px;
  --bc-comp-hero-align:      center;
  --bc-comp-hero-overlay:    0.5;

  --bc-comp-image-mw:        100%;
  --bc-comp-image-align:     center;

  --bc-comp-text-padding:    20px;

  --bc-comp-igl-bg:          #1e293b;
  --bc-comp-igl-border:      #334155;
  --bc-comp-igl-icon:        #818cf8;
  --bc-comp-igl-text:        #f8fafc;

  /* === componentes de header y footer === */
  --header-logo-h:        40px;
  --header-logo-radius:   0px;
  --header-logo-border-w: 0px;
  --header-logo-border-c: #292524;
  --header-logo-p:        0px;
  --header-logo-bg:       transparent;
  --header-logo-text-s:   14px;
  --header-logo-text-c:   #a8a29e;
  --header-logo-text-w:   400;
  --header-logo-gap:      8px;
  --header-logo-align:    flex-start;

  --header-menu-align:    flex-end;
  --header-menu-text:     #ffffff;
  --header-menu-hover:    #60a5fa;
  --header-menu-hover-bg: #1c1917;
  --header-menu-item-bg:  transparent;
  --header-menu-border-w: 0px;
  --header-menu-border-c: #292524;
  --header-menu-radius:   0px;
  --header-menu-px:       0px;
  --header-menu-py:       0px;
  --header-menu-transform: none;

  --footer-logo-align:    flex-start;

  --footer-menu-align:    flex-start;
  --footer-menu-text:     #a8a29e;
  --footer-menu-hover:    #60a5fa;
  --footer-menu-transform: none;

  --footer-text-align:    center;
  --footer-text-color:    #78716c;
}

/* === clases de estilos para componentes === */
.bc-heading { text-align: var(--bc-comp-heading-align) !important; color: var(--bc-comp-heading-color) !important; }
.bc-heading h1 { font-size: var(--bc-comp-heading-h1-size) !important; }
.bc-heading h2 { font-size: var(--bc-comp-heading-h2-size) !important; }
.bc-heading h3 { font-size: var(--bc-comp-heading-h3-size) !important; }
.bc-heading h4 { font-size: var(--bc-comp-heading-h4-size) !important; }
.bc-heading h5 { font-size: var(--bc-comp-heading-h5-size) !important; }
.bc-heading h6 { font-size: var(--bc-comp-heading-h6-size) !important; }

.bc-spacer { height: var(--bc-comp-spacer-height) !important; }

.bc-divider { 
  border-style: var(--bc-comp-divider-style) !important; 
  border-color: var(--bc-comp-divider-color) !important; 
  border-top-width: 1px !important;
  border-bottom-width: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  width: var(--bc-comp-divider-width) !important;
  margin-top: var(--bc-comp-divider-margin) !important;
  margin-bottom: var(--bc-comp-divider-margin) !important;
}

.bc-cta { background-color: var(--bc-comp-cta-bg) !important; color: var(--bc-comp-cta-text) !important; }

.bc-hero { min-height: var(--bc-comp-hero-height) !important; }
.bc-hero-content { text-align: var(--bc-comp-hero-align) !important; width: 100%; }
.bc-hero-overlay { background-color: rgba(0, 0, 0, var(--bc-comp-hero-overlay)) !important; }

.bc-image-container { text-align: var(--bc-comp-image-align) !important; }
.bc-image-container img { max-width: var(--bc-comp-image-mw) !important; }

.bc-text-block { padding: var(--bc-comp-text-padding) !important; }

/* === estilos para componentes de header y footer === */
.bh-logo {
  gap: var(--header-logo-gap) !important;
  justify-content: var(--header-logo-align) !important;
}
.bh-logo__img {
  height: var(--header-logo-h) !important;
  border-radius: var(--header-logo-radius) !important;
  border-width: var(--header-logo-border-w) !important;
  border-color: var(--header-logo-border-c) !important;
  padding: var(--header-logo-p) !important;
  background-color: var(--header-logo-bg) !important;
}
.bh-logo__secondary {
  font-size: var(--header-logo-text-s) !important;
  color: var(--header-logo-text-c) !important;
  font-weight: var(--header-logo-text-w) !important;
}

.bh-row, .bf-row {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.bh-menu {
  display: flex !important;
  justify-content: var(--header-menu-align) !important;
  align-items: center !important;
  width: 100% !important;
  --bh-text: var(--header-menu-text) !important;
  --bh-hover: var(--header-menu-hover) !important;
  --bh-hover-bg: var(--header-menu-hover-bg) !important;
  --bh-item-bg: var(--header-menu-item-bg) !important;
  --bh-border-width: var(--header-menu-border-w) !important;
  --bh-border-color: var(--header-menu-border-c) !important;
  --bh-radius: var(--header-menu-radius) !important;
  --bh-px: var(--header-menu-px) !important;
  --bh-py: var(--header-menu-py) !important;
}
@media (min-width: 769px) {
  .bh-menu__drawer {
    display: flex !important;
    flex: none !important;
    width: auto !important;
    justify-content: var(--header-menu-align) !important;
  }
  .bh-menu__list {
    display: flex !important;
    flex: none !important;
    width: auto !important;
    justify-content: var(--header-menu-align) !important;
  }
}
.bh-menu__link {
  text-transform: var(--header-menu-transform) !important;
}

.bf-logo {
  justify-content: var(--footer-logo-align) !important;
}

.bf-menu {
  display: flex !important;
  justify-content: var(--footer-menu-align) !important;
  align-items: center !important;
  width: 100% !important;
}
@media (min-width: 769px) {
  .bf-menu__list {
    display: flex !important;
    flex: none !important;
    width: auto !important;
    justify-content: var(--footer-menu-align) !important;
  }
}
.bf-menu__link {
  color: var(--footer-menu-text) !important;
  text-transform: var(--footer-menu-transform) !important;
}
.bf-menu__link:hover {
  color: var(--footer-menu-hover) !important;
}

.bf-text {
  text-align: var(--footer-text-align) !important;
  color: var(--footer-text-color) !important;
}


/* === body / tipografia === */
body {
  font-family: var(--fp-font-family) !important;
  font-size: var(--fp-font-size) !important;
  background-color: var(--fp-body-bg) !important;
  color: var(--fp-body-text) !important;
}
h1, h2, h3, h4, h5, h6 { 
  font-family: var(--fp-font-headings, var(--fp-font-family)) !important;
  color: var(--fp-heading) !important; 
}
a { color: var(--fp-link) !important; }
a:hover { color: var(--fp-link-h) !important; }

/* === header === */
.bh-shell {
  background-color: var(--fp-header-bg) !important;
  color: var(--fp-header-text) !important;
  border-bottom: 1px solid var(--fp-header-border) !important;
  box-shadow: var(--fp-header-shadow) !important;
}
.bh-logo, .bh-logo__secondary { color: var(--fp-header-text) !important; }
.bh-menu__link {
  color: var(--bh-text, var(--fp-menu-color)) !important;
  text-decoration: none !important;
}
.bh-menu__link:hover { color: var(--bh-hover, var(--fp-menu-h)) !important; }

/* === footer === */
.bf-shell {
  background-color: var(--fp-footer-bg) !important;
  color: var(--fp-footer-text) !important;
}
.bf-shell a {
  color: var(--fp-footer-link) !important;
  text-decoration: none !important;
}
.bf-shell a:hover { opacity: 0.8 !important; }
.bf-menu__link {
  color: var(--footer-menu-text, var(--fp-footer-link)) !important;
  text-decoration: none !important;
}
.bf-menu__link:hover { color: var(--footer-menu-hover, inherit) !important; opacity: 0.92 !important; }

/* === tarjetas (article, blog, galeria) === */
.fend-card {
  background-color: var(--fp-card-bg) !important;
  border-radius: var(--fp-card-radius) !important;
  border-color: var(--fp-card-border) !important;
  box-shadow: var(--fp-card-shadow) !important;
  overflow: hidden;
}
.fend-card:hover {
  box-shadow: var(--fp-card-shadow-h) !important;
}
.fend-card .fend-card-img {
  height: var(--fp-card-img-h) !important;
}
.fend-card .fend-card-body {
  padding: var(--fp-card-p) !important;
}
.fend-card .fend-card-title {
  color: var(--fp-card-title) !important;
}
.fend-card .fend-card-title a {
  color: var(--fp-card-title) !important;
  text-decoration: none;
}
.fend-card .fend-card-title a:hover {
  color: var(--fp-primary) !important;
}
.fend-card .fend-card-text {
  color: var(--fp-card-text) !important;
}
.fend-card .fend-card-meta {
  color: var(--fp-card-meta) !important;
  border-color: var(--fp-card-border) !important;
}
.fend-card .fend-card-cat {
  color: var(--fp-card-cat) !important;
}

/* === hero === */
.bc-hero {
  background-color: var(--fp-hero-bg) !important;
  min-height: var(--fp-hero-h) !important;
}
.bc-hero-overlay {
  background-color: rgba(0, 0, 0, var(--fp-hero-overlay)) !important;
}
.bc-hero h1 { color: var(--fp-hero-title) !important; }

/* === botones === */
.fend-btn {
  background: var(--fp-btn-bg) !important;
  color: var(--fp-btn-text) !important;
  border-radius: var(--fp-btn-radius) !important;
  padding: var(--fp-btn-py) var(--fp-btn-px) !important;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  transition: background 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
  border: none;
  cursor: pointer;
}
.fend-btn:hover {
  background: var(--fp-btn-h) !important;
  color: var(--fp-btn-text) !important;
}

/* === paginacion === */
.fend-pagination .fend-page-item {
  border-radius: var(--fp-page-radius) !important;
  border-color: var(--fp-page-border) !important;
  color: var(--fp-page-text) !important;
}
.fend-pagination .fend-page-item:hover {
  background-color: var(--fp-page-h) !important;
  color: var(--fp-page-text) !important;
}
.fend-pagination .fend-page-active {
  background-color: var(--fp-page-active-bg) !important;
  color: var(--fp-page-active-text) !important;
  border-color: var(--fp-page-active-bg) !important;
}

/* === tags / categorias === */
.fend-taglist .fend-tag {
  background-color: var(--fp-tag-bg) !important;
  color: var(--fp-tag-text) !important;
  border-color: var(--fp-tag-border) !important;
  border-radius: var(--fp-tag-radius) !important;
}
.fend-taglist .fend-tag:hover {
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
}
.fend-taglist .fend-tag-active {
  background-color: var(--fp-tag-active-bg) !important;
  color: var(--fp-tag-active-text) !important;
  border-color: var(--fp-tag-active-bg) !important;
}

/* === botones de compartir === */
.fend-share a {
  border-radius: var(--fp-btn-radius) !important;
}

/* === contenedor de contenido === */
.fend-content {
  max-width: var(--fp-content-mw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--fp-content-px) !important;
  padding-right: var(--fp-content-px) !important;
}

/* ================================================
   modo oscuro  —  html.fend-dark
   activado / desactivado por el usuario via toggle
   ================================================ */
html.fend-dark body {
  background-color: var(--fp-body-bg) !important;
  color: var(--fp-body-text) !important;
}
html.fend-dark h1,
html.fend-dark h2,
html.fend-dark h3,
html.fend-dark h4,
html.fend-dark h5,
html.fend-dark h6 { color: var(--fp-heading) !important; }
html.fend-dark a { color: var(--fp-link) !important; }
html.fend-dark a:hover { color: var(--fp-link-h) !important; }

/* tarjetas en oscuro */
html.fend-dark .fend-card {
  background-color: var(--fp-card-bg) !important;
  border-color: var(--fp-card-border) !important;
  box-shadow: var(--fp-card-shadow) !important;
}
html.fend-dark .fend-card:hover {
  box-shadow: var(--fp-card-shadow-h) !important;
}
html.fend-dark .fend-card .fend-card-title,
html.fend-dark .fend-card .fend-card-title a { color: var(--fp-card-title) !important; }
html.fend-dark .fend-card .fend-card-text  { color: var(--fp-card-text) !important; }
html.fend-dark .fend-card .fend-card-meta  { color: var(--fp-card-meta) !important; border-color: var(--fp-card-border) !important; }
html.fend-dark .fend-card .fend-card-cat   { color: var(--fp-card-cat) !important; }

/* paginacion en oscuro */
html.fend-dark .fend-pagination .fend-page-item {
  border-color: var(--fp-page-border) !important;
  color: var(--fp-page-text) !important;
  background-color: transparent !important;
}
html.fend-dark .fend-pagination .fend-page-item:hover {
  background-color: var(--fp-page-h) !important;
  color: var(--fp-page-text) !important;
}

/* tags en oscuro */
html.fend-dark .fend-taglist .fend-tag {
  background-color: var(--fp-tag-bg) !important;
  border-color: var(--fp-tag-border) !important;
  color: var(--fp-tag-text) !important;
}
html.fend-dark .fend-taglist .fend-tag:hover {
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
}

/* boton toggle modo oscuro — pegado al extremo derecho del header */
#fend-dark-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 1rem !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid currentColor !important;
  background: transparent !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity .2s, background .2s !important;
  color: inherit !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}
#fend-dark-toggle:hover {
  opacity: 1 !important;
  background: rgba(128,128,128,0.15) !important;
}

/* ================================================
   plantillas visuales dinámicas (cargadas de archivo)
   ================================================ */
/* ============================================================
   TEMA: MODERN (DISEÑO GLASSMORPHIC / VIBRANTE)
   ============================================================ */

.fend-theme-modern {
  --fp-btn-bg:           linear-gradient(135deg, var(--fp-primary), var(--fp-secondary));
  --fp-btn-h:            linear-gradient(135deg, var(--fp-primary-h), var(--fp-secondary));
  --fp-font-family:      'Outfit', sans-serif;
  --fp-font-headings:    'Outfit', sans-serif;
}

/* Tarjetas con efecto Glassmorphism */
.fend-theme-modern .fend-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
}

.fend-theme-modern .fend-card:hover {
  transform: translateY(-6px) !important;
}

.fend-theme-modern .fend-btn {
  background: var(--fp-btn-bg) !important;
  border: none !important;
}

/* ============================================================
   SOPORTE MODO OSCURO
   ============================================================ */

html.fend-dark.fend-theme-modern body {
  background-color: #09090b !important;
  color: #fafafa !important;
}

html.fend-dark.fend-theme-modern .fend-card {
  background: rgba(24, 24, 27, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}