/*
============================
  wintax.css — capa de marca de Wintax sobre la plantilla "Consultia".
============================

  Por qué existe este archivo en vez de editar master.css:
  master.css son 20.000 líneas de una plantilla comprada. Tocarlo por dentro
  hace imposible saber después qué es nuestro y qué venía de fábrica, y
  cualquier actualización de la plantilla se lleva por delante los cambios.
  Aquí sólo hay lo que es de Wintax, se carga el último y gana por orden.

  El objetivo es que wintax.do, el portal de clientes y el CRM se vean como
  una misma casa. Los valores no son inventados: salen del CRM
  (tailwind.config.ts y las pantallas de acceso), que es la referencia.

  Índice
    1. Fichas de color y tipografía
    2. Tipografía general
    3. Botones
    4. Cabecera y navegación
    5. Antetítulos y títulos de sección
    6. Tarjetas de servicio
    7. Contadores
    8. Pie de página
    9. Detalles: contacto rápido, franja de aviso, foco visible
*/

/* ── 1. Fichas de color y tipografía ──────────────────────────────────────
   Verde y lima muestreados del propio logotipo; son los mismos que usa el CRM
   como brand-600 y lima-500. Los grises son la escala "slate" con la que están
   escritas todas las pantallas del CRM y del portal. */
:root {
  --wx-verde: #326342;        /* verde del logotipo — color de acción */
  --wx-verde-osc: #275035;    /* su hover */
  --wx-verde-prof: #1f402b;
  --wx-lima: #a6d165;         /* lima del trazo del logo — acento */
  --wx-verde-tenue: #eff6f1;  /* fondo de las píldoras y los iconos */
  --wx-verde-borde: #d8ebde;

  --wx-tinta: #0f172a;        /* títulos */
  --wx-texto: #475569;        /* párrafos */
  --wx-suave: #64748b;        /* texto secundario */
  --wx-borde: #e2e8f0;
  --wx-lienzo: #f6f7fb;       /* el gris de fondo del CRM y del portal */

  /* Radios y sombras del CRM: esquinas amables y sombras muy difusas, nunca
     el borde duro ni la sombra corta que traía la plantilla. */
  --wx-radio: 12px;
  --wx-radio-g: 16px;
  --wx-sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -18px rgba(15, 23, 42, .25);
  --wx-sombra-alta: 0 24px 48px -28px rgba(15, 23, 42, .35);
  --wx-sombra-verde: 0 8px 20px -8px rgba(50, 99, 66, .45);
}

/* ── 2. Tipografía ────────────────────────────────────────────────────────
   La plantilla mezclaba cuatro familias (DM Serif, Domine, PT Serif, Urbanist,
   Outfit). El CRM usa Inter y nada más. Unificar es el cambio que más hace por
   la sensación de "esto es profesional y es la misma empresa". */
body,
h1, h2, h3, h4, h5, h6,
.title h1, .title h2,
.heading2 h2, .heading4 h4,
.single-business h3,
.single-footer h3,
.font-f-3 {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

body {
  color: var(--wx-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--wx-tinta);
  font-weight: 600;
  /* Inter a tamaño grande necesita el tracking cerrado; es lo que hace que un
     titular se lea "de producto" y no "de plantilla". */
  letter-spacing: -0.022em;
  line-height: 1.15;
}

h1 { letter-spacing: -0.03em; }

p {
  color: var(--wx-texto);
  line-height: 1.7;
}

/* En las secciones oscuras la plantilla marca .white-heading; se respeta. */
.white-heading h1, .white-heading h2, .white-heading h3,
.white-heading p, .white-heading small {
  color: #ffffff;
}

/* ── 3. Botones ───────────────────────────────────────────────────────────
   Mismo gesto que el botón "Iniciar sesión" del CRM: verde de marca, esquina
   de 12px, sombra verde difusa y un levantamiento mínimo al pasar por encima
   (la plantilla subía 3px, que a este tamaño se nota como un salto). */
.theme-btn-2,
.theme-btn-3 {
  border-radius: var(--wx-radio);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 14px 26px;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}

.theme-btn-2 {
  background: var(--wx-verde);
  color: #ffffff;
  box-shadow: var(--wx-sombra-verde);
}

.theme-btn-2:hover,
.theme-btn-2:focus-visible {
  background: var(--wx-verde-osc);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(50, 99, 66, .55);
}

/* El lima es el botón secundario: llama sin competir con el verde. */
.theme-btn-3 {
  background: var(--wx-lima);
  color: #1b2e12;
  box-shadow: 0 8px 20px -10px rgba(166, 209, 101, .8);
}

.theme-btn-3:hover,
.theme-btn-3:focus-visible {
  background: #8ab84a;
  color: #14230d;
  transform: translateY(-1px);
}

/* La flecha del botón venía girada -45º, un tic de la plantilla. Recta se lee
   como "sigue" y no como "descarga". */
.theme-btn-2 span,
.theme-btn-3 span {
  transform: none;
  height: auto;
  align-items: center;
}

/* ── 4. Cabecera y navegación ─────────────────────────────────────────────
   Barra blanca translúcida con desenfoque, igual que la cabecera del portal
   (bg-white/80 backdrop-blur). */
.header.header-2 .header-elements {
  padding-top: 10px;
  padding-bottom: 10px;
}

.header .menu_list > li > a {
  color: var(--wx-tinta);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color .18s ease;
}

.header .menu_list > li > a:hover,
.mobile-nav-list > li > a:hover {
  color: var(--wx-verde);
}

/* El acceso de clientes es la acción principal de toda la web: deja de ser un
   enlace más de la lista y pasa a ser un botón. Antes era un desplegable con
   tres entradas que iban las tres al mismo sitio. */
.wx-nav-portal,
.wx-nav-portal:hover,
.wx-nav-portal:focus-visible {
  background: var(--wx-verde);
  color: #ffffff !important;
  border-radius: var(--wx-radio);
  padding: 10px 18px;
  box-shadow: var(--wx-sombra-verde);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wx-nav-portal strong {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Candado dibujado con CSS: el mismo icono que acompaña al acceso en el CRM y
   en el portal. Va en ::before para no tener que tocar el HTML de cada página.
   `inline-block` y margen —y no flex con gap— porque en el menú móvil la
   plantilla fuerza `display: block` en los enlaces: allí un contenedor flex no
   existe, el gap no se aplica y un ::before `inline` ignora el ancho y el alto,
   así que el candado desaparecía. Con inline-block funciona en ambos sitios. */
.wx-nav-portal::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--wx-candado) center / contain no-repeat;
  mask: var(--wx-candado) center / contain no-repeat;
}

:root {
  --wx-candado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

.wx-nav-portal:hover,
.wx-nav-portal:focus-visible {
  background: var(--wx-verde-osc);
  transform: translateY(-1px);
}

/* En el menú móvil ocupa el ancho: allí es un bloque, no una píldora suelta. */
.mobile-nav-list .wx-nav-portal {
  text-align: center;
  width: 100%;
  margin-top: 12px;
}

/* ── 4-bis. Portada ───────────────────────────────────────────────────────
   La plantilla escribe estos colores con `.title h1` y `.title p`, así que hay
   que igualar esa especificidad o no se aplican. El titular venía en un azul
   morado (#161540) y el párrafo en gris lila (#5C5B79): dos colores que no
   están en ninguna otra pantalla de Wintax. */
.title h1,
.title.title2 h1 {
  color: var(--wx-tinta);
  /* 75px empujaba el titular a cinco líneas y se comía la portada entera. 48px
     es el mismo tamaño que usa el CRM en su título grande, y aquí cabe en
     cuatro líneas sin perder presencia. */
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

@media (max-width: 991px) {
  .title h1,
  .title.title2 h1 { font-size: 36px; }
}

.title p {
  color: var(--wx-texto);
  font-size: 18px;
  line-height: 1.65;
}

.title small.heading-top2 {
  padding: 6px 14px;
}

/* La cabecera flota sobre la portada (header-absolute); con los 83px de fábrica
   la píldora del antetítulo quedaba pegada al logotipo.
   La portada tiene `height: 950px` clavados. Con una altura fija, todo lo que
   se añada dentro (el aire de arriba, la línea del portal) desborda por abajo y
   la sección siguiente lo tapa: así se perdía la fila de logos de clientes.
   `min-height` conserva la misma presencia y deja crecer la caja si hace
   falta. */
.welcome-area {
  height: auto;
  min-height: 950px;
}

.welcome-2 {
  padding-top: 125px;
  padding-bottom: 60px;
}

@media (max-width: 991px) {
  .welcome-area { min-height: 0; }

  .welcome-2 {
    padding-top: 40px;
    padding-bottom: 30px;
  }
}

/* Línea discreta bajo los botones de portada: el cliente que ya tiene cuenta
   no necesita que le vendan nada, sólo la puerta. */
.wx-hero-portal {
  margin-top: 20px;
  font-size: 14.5px;
  color: var(--wx-suave);
}

.wx-hero-portal a {
  color: var(--wx-verde);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(50, 99, 66, .3);
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease;
}

.wx-hero-portal a:hover {
  text-decoration-color: var(--wx-verde);
}

/* ── 5. Antetítulos y títulos de sección ──────────────────────────────────
   El "⭐ Un socio estratégico…" y el "¡Descubre cómo podemos ayudarte!" pasan a
   ser la píldora del CRM: fondo verde muy claro, texto verde y un aro fino. */
/* `.heading2 small.heading-top` en la plantilla pesa más que un `.heading-top`
   suelto, así que hay que nombrarlo igual de largo para poder cambiarlo. */
.heading-top,
.heading-top2,
.heading2 small.heading-top,
.title small.heading-top2 {
  /* inline-block y NO inline-flex, que es lo que traía la plantilla: dentro de
     estas píldoras hay negritas ("…en tu <b>éxito</b> contable"), y un
     contenedor flex descarta los espacios entre sus items, así que la frase
     salía pegada ("en tuéxitocontable"). En inline-block los espacios se
     comportan como en cualquier texto. */
  display: inline-block;
  background: var(--wx-verde-tenue);
  color: var(--wx-verde) !important;
  border: 1px solid var(--wx-verde-borde);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 18px;
}

.heading-top img,
.heading2 small.heading-top img,
.title small.heading-top2 img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
}

/* Sobre fondo oscuro la píldora se invierte: translúcida con borde de luz. */
.heading2.white-heading small.heading-top,
.white-heading .heading-top,
.white-heading .heading-top2 {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #ffffff !important;
}

/* Y el título de la sección oscura, en blanco: `.heading2 h2` lo deja casi
   negro y sobre el verde profundo no se lee. */
.heading2.white-heading h2,
.heading2.white-heading h2 span {
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

/* El subrayado lima funciona igual sobre oscuro, sólo hace falta más opacidad. */
.white-heading .heilight-left {
  background: linear-gradient(180deg, transparent 72%, rgba(166, 209, 101, .5) 72%);
}

/* La plantilla subrayaba la palabra destacada con una imagen de trazo. Un
   fondo lima bajo el texto es más limpio y no depende de un PNG. */
.heilight-left {
  background: linear-gradient(180deg, transparent 72%, rgba(166, 209, 101, .55) 72%);
  padding: 0 2px;
}

/* ── 6. Tarjetas de servicio ──────────────────────────────────────────────
   Eran cajas translúcidas con el icono absoluto a la izquierda y 130px de
   relleno para dejarle sitio. Ahora son la tarjeta del CRM: fondo sólido,
   icono en un cuadrado redondeado arriba y contenido centrado de verdad. */
.single-business {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--wx-radio-g);
  padding: 30px 28px;
  padding-left: 28px;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.single-business:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(166, 209, 101, .45);
  box-shadow: var(--wx-sombra-alta);
}

/* El recuadro del icono va en claro y no en verde translúcido: los iconos de
   los servicios son dibujos de trazo oscuro, y sobre un fondo oscuro
   desaparecen. Es el mismo motivo por el que la plantilla los ponía en un
   círculo blanco. */
.single-business .business-icon {
  position: static;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6);
}

.single-business .business-icon img {
  width: 30px;
  height: 30px;
}

.single-business h3 {
  color: #ffffff;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
}

.single-business p {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0;
}

/* La sección de servicios llevaba una foto de fondo que competía con las
   tarjetas. El degradado verde del panel de acceso del CRM la deja legible. */
.tax-business.bg6 {
  background: linear-gradient(140deg, #173d29 0%, #0f2a1c 55%, #081812 100%) !important;
  position: relative;
  overflow: hidden;
}

/* El mismo halo lima difuminado que tienen las pantallas de acceso. */
.tax-business.bg6::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 209, 101, .22), transparent 70%);
  pointer-events: none;
}

.tax-business .container {
  position: relative;
  z-index: 2;
}

/* ── 7. Contadores ────────────────────────────────────────────────────────
   Cifras en verde de marca y con dígitos de ancho fijo: así no bailan mientras
   la animación cuenta hacia arriba. */
.single-counter h2 {
  color: var(--wx-verde);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.single-counter p {
  color: var(--wx-suave);
  font-size: 14px;
}

/* ── 8. Pie de página ─────────────────────────────────────────────────────
   El gris verdoso de fábrica (#e7edeb) no era de la marca. Verde profundo, que
   cierra la página igual que el panel lateral del acceso. */
.footer-area.bg9 {
  background: linear-gradient(160deg, #1f402b 0%, #14301f 100%) !important;
  color: rgba(255, 255, 255, .72);
}

/* Los selectores llevan .footer-2 porque así los escribe la plantilla
   (".footer-2 .single-footer p { color: #09120E }") y sin esa clase nuestro
   color pierde por especificidad: el texto se quedaría negro sobre verde. */
.footer-area.footer-2 .single-footer p,
.footer-area.footer-2 .footer-menu ul li a,
.footer-area.footer-2 .footer-contact a,
.footer-area.footer-2 .single-contact a {
  color: rgba(255, 255, 255, .72);
  opacity: 1;
  transition: color .18s ease;
}

.footer-area.footer-2 .single-footer h3 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-area.footer-2 .footer-menu ul li a:hover,
.footer-area.footer-2 .footer-contact a:hover,
.footer-area.footer-2 .single-contact a:hover {
  color: var(--wx-lima);
}

/* El logotipo del pie es la versión de color sobre fondo claro; en verde
   profundo se pasa a blanco con el mismo truco que usa el CRM. */
.footer-area .footer-logo img {
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* Franja de cierre: separador de luz y los iconos sociales en claro (venían en
   verde oscuro, invisibles ahora que el fondo también es verde oscuro). */
.footer-area .copyright2 {
  border-top-color: rgba(255, 255, 255, .12);
}

.footer-area .copyright2 p,
.footer-area .copyright p {
  color: rgba(255, 255, 255, .55);
  opacity: 1;
  font-size: 13.5px;
}

.footer-area .social.social2 ul li a {
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .18s ease, color .18s ease;
}

.footer-area .social.social2 ul li a:hover {
  background: var(--wx-lima);
  color: #14230d;
  border-color: var(--wx-lima);
}

.footer-area.footer-2 .contact-icon {
  background: rgba(255, 255, 255, .1);
}

/* ── 9. Detalles ──────────────────────────────────────────────────────────*/

/* Bloque de "¡Estamos aquí para asesorarte!" de la cabecera. */
.quick_contact_icon.bg-27 {
  background: var(--wx-verde-tenue) !important;
  color: var(--wx-verde);
  border: 1px solid var(--wx-verde-borde);
  border-radius: var(--wx-radio);
}

.quick_contact_icon.bg-27 i {
  color: var(--wx-verde);
}

.quick_contact_content a {
  color: var(--wx-tinta);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.quick_contact_content a:hover {
  color: var(--wx-verde);
}

/* Franja de "¡Contáctanos para asesorarte!": tarjeta blanca sobre el lienzo
   gris, que es exactamente el patrón .card del CRM. */
.price-notice {
  background: #ffffff;
  border: 1px solid var(--wx-borde);
  border-radius: 20px;
  box-shadow: var(--wx-sombra);
  padding: 34px 30px;
}

/* Formulario de contacto. Los campos venían en lavanda (#E7E8F4) y el botón de
   enviar en morado (#7977C6): son los colores de la plantilla de fábrica, sin
   relación con Wintax. Se pasan al campo del CRM — fondo blanco, aro fino y aro
   verde de dos píxeles al enfocar. */
.main-form input,
.main-form textarea,
.subscribe-from-wrap input {
  background: #ffffff;
  border: 1px solid var(--wx-borde);
  border-radius: var(--wx-radio);
  color: var(--wx-tinta);
  padding: 15px 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.main-form input::placeholder,
.main-form textarea::placeholder,
.subscribe-from-wrap input::placeholder {
  color: #94a3b8;
}

.main-form input:focus,
.main-form textarea:focus,
.subscribe-from-wrap input:focus {
  outline: none;
  border-color: var(--wx-verde);
  box-shadow: 0 0 0 3px rgba(50, 99, 66, .14);
}

.theme-btn-11 {
  background: var(--wx-verde);
  border-radius: var(--wx-radio);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: var(--wx-sombra-verde);
  transition: background .18s ease;
}

.theme-btn-11:hover,
.theme-btn-11:focus-visible {
  background: var(--wx-verde-osc);
}

/* Foco visible en todo lo que se puede tabular. La plantilla lo quitaba, y sin
   él la web no se puede recorrer con el teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--wx-verde);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Respeta a quien ha pedido menos movimiento en su sistema: la plantilla anima
   casi todo al hacer scroll (AOS) y para algunas personas eso marea. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}