/* Roles de texto de Branding; los respaldos preservan los colores de Nexin. */

/* Se ve en: botones. Nexin los pinta con fondo primario (--nexin-base): el texto usa
   el color calculado para el primario (claro u oscuro según su luminosidad) y, al pasar
   el cursor, Nexin revela un fondo claro. */
.thm-btn,
.thm-btn:focus-visible {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

.thm-btn:hover {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Botones de fondo oscuro que revelan el primario al pasar el cursor (error, comentarios,
   contacto y detalle de equipo). */
.error-page__btn-box .thm-btn,
.comment-form__btn-box .thm-btn,
.contact-page__btn-box .thm-btn,
.team-details__btn-box .thm-btn {
  color: var(--marca-texto-claro, var(--nexin-white));
}

.error-page__btn-box .thm-btn:hover,
.comment-form__btn-box .thm-btn:hover,
.contact-page__btn-box .thm-btn:hover,
.team-details__btn-box .thm-btn:hover {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

/* Botones sin relleno que revelan el primario al pasar el cursor. */
.blog-list__btn-box .thm-btn {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

.blog-list__btn-box .thm-btn:hover {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

/* Botón de la cabecera alternativa: relleno primario, hover oscuro. */
.main-menu-two__btn-box .thm-btn {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

.main-menu-two__btn-box .thm-btn:hover {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Botón del hero: hover con fondo blanco. */
.main-slider__btn .thm-btn:hover {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Barra lateral: botón con hover blanco. */
.xs-sidebar-group .content-inner .form-inner .form-group button.thm-btn:hover {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Se ve en: hero del inicio. */
.banner-one__content-two-single h3,
.main-slider__solution-count :is(h3, span),
.main-slider__solution-content p,
.main-slider__title {
  color: var(--marca-texto-claro, var(--nexin-white));
}

.banner-one__content-two-single h3 {
  color: var(--marca-texto-sobre-primario, var(--nexin-black)) !important;
}

/* Se ve en: banda contact-one y secciones de fondo oscuro. */
.contact-one__right .section-title__title,
.contact-one__input-title,
.contact-one__text,
.contact-one__email a,
.section-title-three__title,
.services-three__read-more a,
.why-choose-three__progress-content p {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: pie de página. */
.footer-widget__title,
.footer-widget__text,
.footer-widget-two__place-title,
.site-footer-two__social a,
.footer-widget-two__title,
.site-footer-three__bottom-text {
  color: var(--marca-texto-claro, var(--nexin-white));
}

.footer-widget-two__link-list li a,
.thm-breadcrumb li a,
.thm-breadcrumb li:hover a,
.scroll-to-top,
.scroll-to-top:hover {
  color: var(--marca-texto-claro, var(--nexin-white));
  text-decoration: underline;
}

.footer-widget-two__newsletter-text,
.footer-widget-two__place-text,
.footer-widget-two__newsletter-form-input-box input[type="email"],
.footer-widget-two__newsletter-form-input-box input[type="email"]::placeholder,
.footer-widget-two__newsletter-icon > span,
.contact-one .contact-page__privacidad {
  color: rgba(var(--marca-texto-secundario-rgb, var(--nexin-white-rgb)), var(--marca-alfa-secundario, .75));
}

.site-footer-two__bottom-text a,
.site-footer-two__bottom-text a:hover,
.site-footer-two__bottom-menu li a,
.site-footer-two__bottom-menu li a:hover {
  color: var(--marca-texto-claro, var(--nexin-white));
  text-decoration: underline;
}

.contact-one .contact-page__privacidad a,
.contact-one .contact-page__privacidad a:hover {
  color: var(--marca-texto-claro, var(--nexin-white)) !important;
  text-decoration: underline !important;
}

.footer-widget__btn a {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

/* Se ve en: palabras resaltadas de títulos. */
.section-title__title span,
.section-title-two__title span,
.section-title-three__title span,
.main-slider__title span {
  color: var(--marca-texto-enfasis, var(--nexin-base));
}

/* Se ve en: enlaces dentro de párrafos. */
.blog-details p a,
.blog-list p a,
.service-details p a,
.legal-body p a,
.about-four p a {
  color: var(--marca-texto-enfasis, var(--nexin-base));
}

/* Se ve en: etiquetas de sección sobre fondos claros. */
.section-title__tagline,
.section-title-two__tagline,
.section-title-three__tagline {
  color: var(--marca-acento-texto, var(--marca-texto-enfasis, var(--nexin-base))) !important;
}

/* Se ve en: etiqueta y campos obligatorios de la banda contact-one. */
.contact-one__right .section-title__tagline,
.contact-one__input-title span {
  color: var(--marca-enfasis-sobre-oscuro, var(--marca-texto-claro, var(--nexin-white))) !important;
}

/* Se ve en: cifras y contadores sobre fondo claro. */
.counter-one__count :is(h3, span),
.counter-one__count-text {
  color: var(--marca-texto-enfasis, var(--nexin-base)) !important;
}

.why-choose-one__mission-content h4 {
  color: var(--marca-texto-sobre-primario, var(--nexin-black)) !important;
}

/* Se ve en: botón de planes; ::before revela el primario. */
.pricing-two__btn-box .thm-btn {
  color: var(--marca-texto-enfasis, var(--nexin-black)) !important;
}

.pricing-two__btn-box .thm-btn:hover {
  color: var(--marca-texto-sobre-primario, var(--nexin-black)) !important;
}

/* Estados de Nexin. Esta hoja carga después de style.css y conserva contraste
   cuando Branding sustituye --nexin-black por el fondo oscuro de la marca. */
.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a,
.stricky-header .main-menu__list > li.current > a,
.stricky-header .main-menu__list > li:hover > a,
.main-menu .main-menu__list > li.current > a::after,
.main-menu .main-menu__list > li:hover > a::after,
.stricky-header .main-menu__list > li.current > a::after,
.stricky-header .main-menu__list > li:hover > a::after,
.main-menu .main-menu__list > li > ul > li:hover > a,
.main-menu .main-menu__list > li > ul > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li > ul > li:hover > a {
  color: var(--marca-texto-enfasis, var(--nexin-black));
  text-shadow: none;
}

.main-menu-four .main-menu__list > li.current > a,
.main-menu-four .main-menu__list > li:hover > a,
.stricky-header.main-menu-four .main-menu__list > li.current > a,
.stricky-header.main-menu-four .main-menu__list > li:hover > a,
.main-menu-four .main-menu__list > li.current > a::after,
.main-menu-four .main-menu__list > li:hover > a::after,
.stricky-header.main-menu-four .main-menu__list > li.current > a::after,
.stricky-header.main-menu-four .main-menu__list > li:hover > a::after,
.main-menu-four .main-menu__list > li > a.active,
.stricky-header.main-menu-four .main-menu__list > li > a.active {
  color: var(--marca-enfasis-sobre-oscuro, var(--marca-texto-claro, var(--nexin-white)));
  text-shadow: none;
}

/* Se ve en: botones de cabecera; ::before revela el oscuro. */
.main-menu__btn-box .thm-btn:hover,
.main-menu-two__btn-box .thm-btn:hover,
.main-menu-four__btn-box .thm-btn:hover {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: formularios de chat y barra lateral; ::before revela blanco. */
.chat-popup .chat-form .form-group .thm-btn:hover,
.xs-sidebar-group .content-inner .form-inner .form-group button.thm-btn:hover {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Se ve en: búsqueda de la cabecera; el hover pinta fondo oscuro. */
.main-menu__search:hover,
.main-menu-two__search:hover,
.mobile-nav__contact li a:hover,
.mobile-nav__buttons a:hover {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Redes del menú móvil: el hover rellena un círculo con el primario. */
.mobile-nav__social a:hover {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

.scroll-to-top:hover,
.scroll-to-top:hover .scroll-to-top__text,
.banner-one .icon-arrow-down {
  color: var(--marca-texto-enfasis, var(--nexin-black));
  text-decoration-color: currentColor;
}

/* La banda de contacto conserva el botón cubierto por el pseudo-elemento claro. */
.contact-one__btn-box .thm-btn:hover {
  color: var(--marca-texto-enfasis, var(--nexin-black)) !important;
}

/* Se ve en: paginación de servicios y blog; el estado activo pinta fondo oscuro. */
.services-page__pagination .pg-pagination li:hover a,
.services-page__pagination .pg-pagination li.active a {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: cabecera de /about, /services, /portfolio, /blog y /contact. */
.main-menu-four__search:hover {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: botón hamburguesa de cabeceras normal y pegajosa. */
.main-menu__toggler:hover,
.main-menu .mobile-nav__toggler:hover,
.stricky-header .mobile-nav__toggler:hover,
.main-menu__toggler:hover i,
.main-menu .mobile-nav__toggler:hover i,
.stricky-header .mobile-nav__toggler:hover i {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Cabecera de las páginas interiores: la barra es oscura y el botón no cambia de fondo al pasar el cursor. */
.main-menu-four .mobile-nav__toggler:hover,
.main-menu-four .mobile-nav__toggler:hover i,
.stricky-header.main-menu-four .mobile-nav__toggler:hover,
.stricky-header.main-menu-four .mobile-nav__toggler:hover i {
  color: var(--marca-base-sobre-oscuro, var(--marca-texto-claro, var(--nexin-white)));
}

/* Se ve en: flechas circulares de tarjetas de servicio y proyectos en / y /portfolio. */
.service-one__single:hover .service-one__arrow a span,
.portfolio-three__arrow a:hover span {
  color: var(--marca-texto-sobre-primario, var(--nexin-white));
}

/* Se ve en: botones «Sobre nosotros» y «Hablemos» del banner de /. */
.banner-one .thm-btn:hover,
.banner-one .thm-btn:hover .icon-arrow-up-right {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: enlaces y redes del pie de /. */
.site-footer__bottom-menu li a:hover,
.site-footer__social-box a:hover,
.site-footer__copyright-text a:hover,
.footer-widget-three__link li a:hover,
.footer-widget-three__contact-list li p a:hover {
  color: var(--marca-texto-enfasis, var(--nexin-black));
  text-decoration-color: currentColor;
}

/* Se ve en: «Ver nuestro proceso» de /. */
.video-one__video-text:hover,
.video-one__video-text:hover .ripple {
  color: var(--marca-texto-sobre-primario, var(--nexin-white));
}

/* Se ve en: botón de búsqueda emergente de todas las páginas. */
.search-popup .form-group button:hover {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Se ve en: botón del boletín de /about, /services, /portfolio, /blog y /contact. */
.footer-widget-two__newsletter-btn > span:hover {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: iconos de las tarjetas de contacto de /contact. */
.contact-page__contact-single:hover .contact-page__icon,
.contact-page__contact-single:hover .contact-page__icon span {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: botón «Enviar Mensaje» de /contact. */
.contact-page__btn-box button.footer-widget__newsletter-btn.thm-btn:hover {
  color: var(--marca-texto-sobre-primario, var(--nexin-white));
}

/* Se ve en: botones del bloque about de /; revelan fondo oscuro. */
.about-one__single > .about-one__btn > a:hover,
.about-one__single > .about-one__btn > a:hover span.icon-arrow-up-right {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: «Ver todos» de proyectos y «Contáctanos» de ventajas en /; su fondo de hover es claro. */
.portfolio-one__view > a:hover span.icon-arrow-up-right,
.why-choose-one__contact-us > a:hover span.icon-arrow-up-right {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Se ve en: flechas sobre el primario de / y /portfolio. */
.portfolio-one__arrow > a:hover span.icon-arrow-up-right,
.portfolio-page__arrow > a:hover span.icon-arrow-up-right,
a.explore-one__curved-circle-box:hover span.icon-arrow-up-right {
  color: var(--marca-texto-sobre-primario, var(--nexin-white));
}

/* Se ve en: «Conoce nuestro trabajo» de /; revela fondo blanco. */
.banner-one__text-box-one > a:hover,
.banner-one__text-box-one > a:hover span.icon-arrow-up-right {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Se ve en: enlaces y redes del pie oscuro de páginas interiores. */
footer.site-footer-two .footer-widget-two__link-list li a:hover,
footer.site-footer-two .site-footer-two__social a:hover i {
  color: var(--marca-enfasis-sobre-oscuro, var(--marca-texto-claro, var(--nexin-white)));
}

/* Se ve en: títulos de tarjetas de /services; al pasar el cursor la tarjeta se cubre con un velo oscuro. */
.services-page .services-three__single > h3.services-three__title > a:hover {
  color: var(--marca-base-sobre-oscuro, var(--marca-texto-claro, var(--nexin-white)));
}

/* Se ve en: texto, cifra, icono y enlace de tarjetas de /services con velo oscuro. */
.services-three__single:hover .services-three__text,
.services-three__single:hover .services-three__count {
  color: var(--marca-texto-claro, var(--nexin-white));
}

.services-three__single:hover .services-three__icon span,
.services-three__single:hover .services-three__read-more a {
  color: var(--marca-enfasis-sobre-oscuro, var(--marca-texto-claro, var(--nexin-white)));
}

/* Se ve en: fecha de tarjetas de /blog sobre fondo oscuro. */
.blog-two__single:hover .blog-two__date,
.blog-two__single:hover .blog-two__date > p,
.blog-two__single:hover .blog-two__date > p span {
  color: var(--marca-texto-claro, var(--nexin-white));
}

/* Se ve en: comentario de tarjetas de /blog sobre el fondo claro. */
.blog-two__single:hover .blog-two__comment,
.blog-two__single:hover .blog-two__comment > p,
.blog-two__single:hover .blog-two__comment > p span {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}

/* Se ve en: botón del pie de / sobre fondo claro. */
footer.site-footer .footer-widget__btn > a:hover,
footer.site-footer .footer-widget__btn > a:hover span.icon-arrow-up-right {
  color: var(--marca-texto-enfasis, var(--nexin-black));
}


/* ========================================================================
   Contraste garantizado
   Cada regla elige la variable según el fondo que la plantilla pinta debajo:
   - sobre el primario (--nexin-base): --marca-texto-sobre-primario
   - sobre oscuro (--nexin-black): --marca-texto-claro / --marca-enfasis-sobre-oscuro
   - sobre claro (--nexin-white y tintes): --marca-texto-enfasis / --nexin-gray
   branding.js las calcula con contraste mínimo 4.5:1 (3:1 en iconos y bordes).
   ======================================================================== */

/* Respaldos para cuando Branding no emite estas variables (sin colores, o sin primario ni acento).
   El primario de la plantilla (amarillo #F9FF04 o lima #BFF747) es claro: sobre él y como texto
   sobre fondo claro va el negro de la plantilla. El gris del cuerpo de la plantilla (#797E88) daba
   4.1:1 sobre blanco; el respaldo llega a 5:1. Si Branding emite una variable, la suya manda. */
:root {
  --nexin-gray: #636872;
  --nexin-gray-rgb: 99, 104, 114;
  --marca-texto-sobre-primario: #121212;
  --marca-texto-enfasis: #121212;
  --marca-acento-texto: #121212;
  --marca-base-sobre-claro: #121212;
  --marca-base-sobre-oscuro: #FFFFFF;
  --marca-borde-control: #868B90;
}

/* Iconos sobre un círculo o botón primario. */
.explore-one__icon span,
.chat-icon button,
.chat-popup .close-chat,
.mobile-nav__contact li > i {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

/* Estrellas de valoración sobre fondo claro. */
.testimonial-one__ratting span,
.testimonial-two__ratting span,
.testimonial-four__ratting span {
  color: var(--marca-icono-acento, #D4491B);
}

/* Campos de la banda de contacto (fondo oscuro). */
.contact-one__input-box input[type="text"],
.contact-one__input-box input[type="email"],
.contact-one__input-box input[type="tel"],
.contact-one__input-box input[type="url"],
.contact-one__input-box textarea {
  color: var(--marca-texto-claro, var(--nexin-white));
  border-bottom-color: var(--marca-borde-sobre-oscuro, #8A8A8A);
}

.contact-one__input-box input::placeholder,
.contact-one__input-box textarea::placeholder {
  color: rgba(var(--marca-texto-secundario-rgb, var(--nexin-white-rgb)), var(--marca-alfa-secundario, .75));
  opacity: 1;
}

/* Enlaces con hover en primario sobre fondos oscuros. */
.contact-one__email a:hover {
  color: var(--marca-base-sobre-oscuro, var(--marca-texto-claro, var(--nexin-white)));
}

/* Botón de la búsqueda lateral: el hover pinta el primario. */
.sidebar__search-form button[type="submit"]:hover,
.sidebar__search-form button[type="submit"]:hover i {
  color: var(--marca-texto-sobre-primario, var(--nexin-black));
}

/* Color del primario cuando se usa como TEXTO o ICONO (enlaces, hover, etiquetas). Las hojas de
   la plantilla usan `color: var(--marca-texto-base, ...)`: sobre fondo claro es --marca-base-sobre-claro
   y, dentro de las zonas oscuras de abajo, --marca-base-sobre-oscuro. Ambos garantizan 4.5:1. */
:root {
  --marca-texto-base: var(--marca-base-sobre-claro, var(--nexin-base));
}

.chat-popup,
.xs-sidebar-group,
.search-popup,
.mobile-nav__wrapper,
.page-header,
.main-menu-four,
.main-slider,
.contact-one,
.site-footer-two,
.site-footer-three,
.services-three__single:hover,
.about-one,
.team-one__social-box,
.portfolio-three {
  --marca-texto-base: var(--marca-base-sobre-oscuro, var(--nexin-base));
}

/* Borde de los campos de formulario sobre fondo claro: mínimo 3:1 (el gris de la plantilla llegaba a 1.4:1). */
.contact-page__input-box input[type="text"],
.contact-page__input-box input[type="email"],
.contact-page__input-box input[type="number"],
.contact-page__input-box input[type="tel"],
.contact-page__input-box input[type="url"],
.contact-page__input-box textarea,
.contact-page__input-box select,
.comment-form__input-box input[type="text"],
.comment-form__input-box input[type="email"],
.comment-form__input-box textarea {
  border-color: var(--marca-borde-control, var(--nexin-bdr-color));
}

/* Texto de la sección «Sobre nosotros» (fondo oscuro): la plantilla lo pintaba con un gris casi blanco fijo. */
.about-one__text,
.about-one__btn a {
  color: var(--marca-texto-claro, #F5F5F4);
}

/* Buscador lateral del blog: borde del campo sobre la página clara. */
.sidebar__search-form input[type="search"] {
  border-color: var(--marca-borde-control, var(--nexin-bdr-color));
}

/* Autollenado del navegador (:-webkit-autofill). Los campos son transparentes; sin estas reglas Chrome/Safari
   los pintan como cajas blancas (texto claro sobre blanco en la banda oscura). El fondo se fija con una sombra
   interior y la transición larga evita el parpadeo del color nativo. */
.contact-one__input-box input:-webkit-autofill,
.contact-one__input-box input:-webkit-autofill:hover,
.contact-one__input-box input:-webkit-autofill:focus,
.contact-one__input-box textarea:-webkit-autofill,
.contact-one__input-box textarea:-webkit-autofill:hover,
.contact-one__input-box textarea:-webkit-autofill:focus,
.contact-one__input-box select:-webkit-autofill,
.contact-one__input-box select:-webkit-autofill:hover,
.contact-one__input-box select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--marca-texto-claro, var(--nexin-white, #fff));
  caret-color: var(--marca-texto-claro, var(--nexin-white, #fff));
  box-shadow: 0 0 0 1000px var(--nexin-black, #121212) inset;
  transition: background-color 9999s ease-out 0s;
}

.contact-page__input-box input:-webkit-autofill,
.contact-page__input-box input:-webkit-autofill:hover,
.contact-page__input-box input:-webkit-autofill:focus,
.contact-page__input-box textarea:-webkit-autofill,
.contact-page__input-box textarea:-webkit-autofill:hover,
.contact-page__input-box textarea:-webkit-autofill:focus,
.contact-page__input-box select:-webkit-autofill,
.contact-page__input-box select:-webkit-autofill:hover,
.contact-page__input-box select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nexin-gray, #4a4a4a);
  caret-color: var(--nexin-gray, #4a4a4a);
  box-shadow: 0 0 0 1000px var(--nexin-white, #fff) inset;
  transition: background-color 9999s ease-out 0s;
}