/* footer.css
    Footer modularizado
    - Usa variables globales definidas en style.css
    - Diseño: fondo oscuro, 4 columnas centradas, títulos con línea fina, enlaces verticales y barra inferior centrada
*/

.footer{ background:var(--black); color:var(--white); padding:40px 0 0; font-size:16px }
.footer_inner{ padding:0 }

/* TOP area with columns */
.footer_top{ padding:36px 0 20px }
.container_inner .four_columns{ display:flex; gap:40px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap }
.four_columns .column_inner{ flex:1 1 200px; min-width:160px; padding:0 12px; text-align:center }

.four_columns h5{ color:var(--white); font-weight:600; margin:0 0 8px; position:relative; display:inline-block; font-size:18px }
.four_columns h5::after{ content:''; display:block; height:2px; width:48px; color:var(--dark-gray); margin:10px auto 0; border-radius:2px }

.four_columns .textwidget{ margin-top:8px }
.four_columns .textwidget a{ display:block; color:var(--white); opacity:0.9; text-decoration:none; padding:10px 0; transition: color .25s, transform .15s }
.four_columns .textwidget a:hover{ color:var(--accent-gold); transform:translateY(-2px) }

/* keep separators subtle in footer (some markup inserts separators) */
.separator--white-small{ display:none }

/* Bottom bar */
.footer_bottom_holder{ margin-top:18px }
.footer_bottom{ border-top:1px solid rgba(255,255,255,0.06); padding:12px 0; text-align:center; background:transparent }
.footer_bottom .textwidget{ color:var(--white); opacity:0.85; font-size:14px }

/* Scroll to top button (kept) */
.scroll-top{ position:fixed; bottom:30px; right:30px; background:var(--primary-red); color:var(--white); border:none; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .25s, transform .2s; z-index:999 }
.scroll-top.visible{ opacity:1 }
.scroll-top:hover{ transform:translateY(-4px) }

/* Responsive adjustments */
@media (max-width:900px){
   .container_inner .four_columns{ gap:28px }
}
@media (max-width:700px){
   .container_inner .four_columns{ flex-direction:column; align-items:center }
   .four_columns .column_inner{ text-align:center; padding:6px 0 }
   .four_columns h5::after{ width:36px }
}

/* End footer.css */