.single-service .icon-wrapper img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}
.single-offer-product.verticle .promo-img {
  width: 100%;
  height: 680px !important;
  object-fit: cover !important;
}
.single-offer-product .promo-img {
  width: 100%;
  height: 328px !important;
  object-fit: cover !important;
}

.gs-footer-section .footer-row .left-info .social-links a i {
  color: black;
  transition: all 0.3s;
}
.gs-footer-section .footer-row .left-info .social-links a:hover i {
  color: white;
}

#cardNumber,
#securityCode,
#expirationDate {
  height: 60px;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fff;
  color: #505050;
  font-size: 14px;
  padding: 0px 18px;
}

#cardNumber,
#securityCode,
#expirationDate {
  margin-bottom: 18px;
}

@media screen and (max-width: 767px) {
  .single-offer-product .promo-img {
    height: 200px !important;
  }
  .single-offer-product.verticle .promo-img {
    height: 400px !important;
  }
}


.sidebar-active-color {
  color: #B39F86!important;
}

/* ======= PALETA ÚNICA ======= */
:root{
  --surface: #B39F86;   /* Fondos de cabecera/botón primario */
  --text:    #222222;   /* Texto e íconos */
  --border:  #CFC7B8;   /* Bordes suaves */
  --icon-stroke: #B39F86; /* Trazos de SVG */
  /* Compat. Bootstrap (opcional si lo usas) */
  --bs-primary: var(--surface);
}

/* ======= CABECERA / NAVBAR ======= */
header, .header, .site-header, .topbar, .navbar, .header-area, .main-header{
  background-color: var(--surface) !important;
  color: var(--text) !important;
  background-image: none !important;
}
header a, .header a, .navbar a, .header-area a, .main-header a{
  color: var(--text) !important;
}

/* ======= TEXTO GLOBAL ======= */
body, main, .content, .ck-content, .article, .page, p, li, h1, h2, h3, h4, h5, h6{
  color: var(--text) !important;
}

/* ======= BOTONES (base) ======= */
.template-btn,
.btn-primary, .button, .primary-btn{
  background: var(--surface) !important;   /* #B39F86 */
  color: var(--text) !important;           /* #222222 */
  border: 1px solid var(--border) !important;
  background-image: none !important;       /* evita gradientes del tema */
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ======= HOVER (nuevo) ======= */
.template-btn:hover,
.btn-primary:hover, .button:hover, .primary-btn:hover{
  background-color: #222222 !important;    /* café oscuro */
  border-color: #222222 !important;
  color: #F1EDE4 !important;               /* texto claro para contraste */
  box-shadow: none !important;
  filter: none !important;                 /* no uses brightness aquí */
}

/* Por si hay variantes que forzan estilos (opcionales) */
.template-btn.dark-btn,
.template-btn.black-btn{ background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.template-btn.dark-btn:hover,
.template-btn.black-btn:hover{ background-color:#222222 !important; border-color:#222222 !important; color:#F1EDE4 !important; }


/* ======= ÍCONOS (font + SVG inline) ======= */
header i, .header i, .navbar i, .topbar i,
header .fa, .navbar .fa, header .material-icons{
  color: var(--text) !important;
}
header svg, .header svg, .navbar svg, .topbar svg{
  color: var(--icon-stroke) !important;
  stroke: var(--icon-stroke) !important;
}
header svg [stroke="black"], header svg [stroke="#000"], header svg [stroke="#000000"],
header svg [fill="black"],   header svg [fill="#000"],   header svg [fill="#000000"]{
  stroke: var(--icon-stroke) !important;
  fill: var(--icon-stroke) !important;
}

/* ======= BORDES Y CONTROLES ======= */
.gs-pagination li a,
.single-blog-widget .widget-title,
.single-product-widget .widget-title,
.single-product .add-cart,
.single-product .compare,
.single-product .details,
.single-product-list-view .add-cart,
.single-product-list-view .compare,
.single-product-list-view .details{
  border-color: var(--border) !important;
}
.gs-pagination li.active a,
.gs-pagination li a:hover{
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

:root{
  --icon-stroke: #222222; /* gris oscuro */
}

/* Aplica en header/nav/topbar. Duplica para otras zonas (footer, cards, etc.) */
header svg, .header svg, .navbar svg, .topbar svg {
  stroke: var(--icon-stroke) !important; /* fuerza el trazo */
  color: var(--icon-stroke) !important;  /* por si el SVG usa currentColor */
}

/* Si el archivo trae atributos fijos, los pisamos */
header svg [stroke="black"],
header svg [stroke="#000"],
header svg [stroke="#000000"],
header svg [stroke="white"],
header svg [stroke="#fff"],
header svg [stroke="#FFF"] {
  stroke: var(--icon-stroke) !important;
}

/* (Opcional) si también quieres el relleno en café oscuro */
header svg [fill="black"],
header svg [fill="#000"],
header svg [fill="white"],
header svg [fill="#fff"],
header svg [fill="#FFF"] {
  fill: var(--icon-stroke) !important;
}

/* === Color de íconos en footer (social-links) === */
.gs-footer-section .footer-row .left-info .social-links a i {
  color: #222222 !important;
}

/* Hover del mismo color (sin cambio a blanco) */
.gs-footer-section .footer-row .left-info .social-links a:hover i {
  color: #222222 !important;
}

/* Si tus íconos son SVG en vez de <i> */
.gs-footer-section .footer-row .left-info .social-links a svg,
.gs-footer-section .footer-row .left-info .social-links a svg path {
  fill: #222222 !important;
  stroke: #222222 !important;
}

/* --- Info bar button: normal delineado + hover café oscuro --- */
.info-bar .info-right .wows .info-bar-btn,
.info-bar-btn {
  color: #222222 !important;                 /* texto normal */
  -webkit-text-fill-color: #222222 !important;
  border: 1px solid #222222 !important;      /* borde normal */
  background: transparent !important;        /* fondo normal */
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover / focus / active: fondo sólido café oscuro */
.info-bar .info-right .wows .info-bar-btn:hover,
.info-bar .info-right .wows .info-bar-btn:focus,
.info-bar .info-right .wows .info-bar-btn:active,
.info-bar-btn:hover,
.info-bar-btn:focus,
.info-bar-btn:active {
  background-color: #222222 !important;      /* ← café oscuro */
  border-color: #222222 !important;
  color: #F1EDE4 !important;                  /* texto claro para contraste */
  -webkit-text-fill-color: #F1EDE4 !important;
}

/* Por si el tema usaba pseudo-elementos para el hover */
.info-bar .info-right .wows .info-bar-btn::before,
.info-bar .info-right .wows .info-bar-btn::after,
.info-bar-btn::before,
.info-bar-btn::after {
  background: none !important;
}

/* === Color del texto en dropdown === */
.dropdown__item {
  color: #222222 !important;
}

/* Hover: opcional, si quieres conservar contraste con tu paleta */
.dropdown__item:hover {
  color: #F1EDE4 !important;          /* texto claro */
  background-color: #222222 !important; /* fondo café oscuro */
}

/* h6 dentro de la tarjeta de servicio (forzar #F1EDE4) */
body .gs-service-section .services-area .single-service .service-content h6{
  color: #F1EDE4 !important;
}

/* por si el título es un enlace o lleva icono */
body .gs-service-section .services-area .single-service .service-content h6 a{
  color: #F1EDE4 !important;
}
body .gs-service-section .services-area .single-service .service-content h6 svg,
body .gs-service-section .services-area .single-service .service-content h6 svg *{
  fill: #F1EDE4 !important;
  stroke: #F1EDE4 !important;
}

/* === GS Service: títulos y párrafos en #F1EDE4 === */
body .gs-service-section .services-area .single-service .service-content h6,
body .gs-service-section .services-area .single-service .service-content p{
  color: #F1EDE4 !important;
}

/* Enlaces e íconos dentro de esos elementos */
body .gs-service-section .services-area .single-service .service-content h6 a,
body .gs-service-section .services-area .single-service .service-content p a{
  color: #F1EDE4 !important;
}

body .gs-service-section .services-area .single-service .service-content h6 svg,
body .gs-service-section .services-area .single-service .service-content h6 svg *,
body .gs-service-section .services-area .single-service .service-content p svg,
body .gs-service-section .services-area .single-service .service-content p svg *{
  fill: #F1EDE4 !important;
  stroke: #F1EDE4 !important;
}

/* === Breadcrumb title en #F1EDE4 === */
body .gs-breadcrumb-section .breadcrumb-title {
  color: #F1EDE4 !important;
}

/* === Sección de Registro: enlaces con color más legible === */
.gs-reg-section .reg-area .form-group .login-redirect a,
.gs-reg-section .reg-area .form-group .login-forgot a {
  color: #B39F86 !important;   /* tono más visible */
  font-weight: 500;            /* mantiene el peso de redirect, ligeramente más firme que forgot */
  text-decoration: none;       /* sin subrayado por defecto */
  transition: color 0.2s ease-in;
}

/* Hover: refuerzo visual */
.gs-reg-section .reg-area .form-group .login-redirect a:hover,
.gs-reg-section .reg-area .form-group .login-forgot a:hover {
  color: #B39F86 !important;   /* mismo tono */
  text-decoration: underline;  /* feedback sutil al pasar el cursor */
}

/* Registro: botón outline (que no aclare el texto en hover) */
.gs-reg-section .reg-area .form-group .login-outline,
.gs-reg-section .reg-area .form-group .login-outline:link,
.gs-reg-section .reg-area .form-group .login-outline:visited {
  color: #222222 !important;              /* texto oscuro */
  border-color: #222222 !important;       /* si tiene borde */
  background: transparent !important;     /* outline real */
  -webkit-text-fill-color: #222222 !important; /* Safari */
  box-shadow: none !important;
  background-image: none !important;
}

.gs-reg-section .reg-area .form-group .login-outline:hover,
.gs-reg-section .reg-area .form-group .login-outline:focus,
.gs-reg-section .reg-area .form-group .login-outline:active {
  color: #222222 !important;              /* NO se aclara */
  -webkit-text-fill-color: #222222 !important;
  border-color: #222222 !important;
  background: transparent !important;     /* evita fondo que lave el texto */
  box-shadow: none !important;
  filter: none !important;
}

/* Si el botón es un <a> con un <span> dentro, cubrimos el hijo */
.gs-reg-section .reg-area .form-group .login-outline *,
.gs-reg-section .reg-area .form-group .login-outline:hover * {
  color: #222222 !important;
  -webkit-text-fill-color: #222222 !important;
}

/* Por si usan pseudo-elementos para hover */
.gs-reg-section .reg-area .form-group .login-outline::before,
.gs-reg-section .reg-area .form-group .login-outline::after {
  content: none !important;
  background: none !important;
}

/* === Footer Bottom: fondo claro actualizado === */
.gs-footer-section .gs-footer-bottom {
  background-color: #e9e6e6 !important;
}

/* === Footer: forzar tamaño del logo === */
footer .footer-logo img,
.gs-footer-section .footer-logo img,
footer .brand img,
footer .logo img,
footer img.site-logo-footer {
  width: 348px !important;     /* tu asset grande */
  height: 84px !important;     /* relación 348x84 */
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  flex-shrink: 0 !important;
}

/* Si el contenedor tenía altura fija/sube y lo recorta, dale aire: */
.gs-footer-section .footer-row,
.gs-footer-section .footer-top,
footer .footer-top,
footer .footer-row {
  min-height: 100px;           /* ajusta si hace falta */
  align-items: center;
}

/* Responsive: un poco más pequeño en móviles */
@media (max-width: 576px) {
  footer .footer-logo img,
  .gs-footer-section .footer-logo img,
  footer .brand img,
  footer .logo img,
  footer img.site-logo-footer {
    width: 232px !important;
    height: auto !important;   /* mantiene proporción */
    max-height: 64px !important;
  }
}