/*
Theme Name:   Accounting Child Theme
Theme URI:    https://themeforest.net/user/Anps/portfolio
Description:  Accounting Child Theme
Author:       AnpsThemes
Author URI:   https://themeforest.net/user/Anps/portfolio
Template:     accounting
Version:      1.4.4
Text Domain:  accounting-child
*/

/* ============================================================
   #personalized -- features row
   ------------------------------------------------------------
   * Reglas de LAYOUT (flex, padding, divider, ancho, etc.):
     siguen scopeadas a #personalized con !important para
     blindar la estructura.
   * Reglas VISUALES (font-size, color, peso del titulo y la
     descripcion, tamano y color del icono): usan :where() para
     contribuir 0 de especificidad. Asi, cualquier ajuste hecho
     desde Elementor (que tiene specificity > 0) las sobrescribe.
   ============================================================ */

/* ---------- LAYOUT (estructura, no tocar desde Elementor) ---------- */

#personalized {
  --container-width: 1400px;
}

#personalized>.e-child.e-con-boxed {
  max-width: 1400px !important;
  width: calc(100% - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#personalized .e-con-inner {
  gap: 0 !important;
  flex-wrap: nowrap !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  max-width: 100%;
}

#personalized .e-con-inner>.e-child.e-con {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 18px 12px !important;
  position: relative;
  align-items: center !important;
  flex-direction: row !important;
  gap: 16px !important;
}

#personalized .e-con-inner>.e-child+.e-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: rgba(20, 40, 90, 0.08);
}

#personalized .e-con-inner>.e-child>.elementor-widget-icon {
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: center;
}

#personalized .e-con-inner>.e-child>.e-child.e-con {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
  align-self: center;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Layout estructural del icono (forma circular, sin border) */
#personalized .elementor-widget-icon.elementor-widget-icon .elementor-icon {
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

/* ---------- DEFAULTS VISUALES (zero specificity via :where) ---------- */
/* Editables desde Elementor: cualquier seteo del editor gana */

:where(#personalized) .elementor-widget-icon .elementor-icon {
  font-size: 28px;
  /* <-- tamano del icono editable */
  padding: 20px;
  /* <-- grosor del circulo editable */
  background-color: #eef1f6;
  color: #d61f2a;
}

:where(#personalized) .elementor-widget-icon .elementor-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

:where(#personalized) .elementor-heading-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1px;
}

/* Default a nivel del widget: asi el typography que setea Elementor
   (tambien sobre el widget container) sobrescribe por specificity */
:where(#personalized) .elementor-widget-text-editor {
  font-size: 13px;
  line-height: 1.55;
}

/* Solo el margen del <p> queda blindado (es estructural) */
#personalized .elementor-widget-text-editor p {
  margin: 0;
}

#personalized .elementor-widget-heading,
#personalized .elementor-widget-text-editor {
  width: 100%;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1280px) {
  :where(#personalized) .elementor-heading-title {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  #personalized .e-con-inner {
    flex-wrap: wrap !important;
  }

  #personalized .e-con-inner>.e-child.e-con {
    flex: 1 1 100% !important;
    padding: 14px 8px !important;
  }

  #personalized .e-con-inner>.e-child+.e-child::before {
    display: none;
  }
}

/* ============================================================
   Services Grid widget (anps-services-grid)
   ------------------------------------------------------------
   - Fuerza 4 columnas en una sola linea
   - Iconos custom (webp) por nth-child
   - Tipografia Montserrat / color #002E64
   - Separador rojo entre icono y titulo
   - Responsive: 4 -> 2 -> 1
   ============================================================ */

.anps-services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  align-items: stretch;
}

.anps-services-grid__card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 32px 28px !important;
  box-shadow: 0 2px 18px rgba(0, 46, 100, 0.07) !important;
  border-left: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.anps-services-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 46, 100, 0.12) !important;
}

/* Ocultar el contenedor de icono nativo (icon FA o SVG de Elementor).
   Pintamos el icono via ::before en la card asi siempre aparece, incluso
   si en Elementor el campo "icon" esta vacio. */
.anps-services-grid .anps-services-grid__icon {
  display: none !important;
}

/* Icon container generado con ::before */
.anps-services-grid__card::before {
  content: "";
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin: 0 0 6px;
  flex: 0 0 auto;
}

/* Per-card icons (orden izquierda -> derecha) */
.anps-services-grid__card:nth-child(1)::before {
  background-image: url('https://accountingmattsol.com/wp-content/uploads/2026/05/s1.webp');
}

.anps-services-grid__card:nth-child(2)::before {
  background-image: url('https://accountingmattsol.com/wp-content/uploads/2026/05/s2.webp');
}

.anps-services-grid__card:nth-child(3)::before {
  background-image: url('https://accountingmattsol.com/wp-content/uploads/2026/05/s3.webp');
}

.anps-services-grid__card:nth-child(4)::before {
  background-image: url('https://accountingmattsol.com/wp-content/uploads/2026/05/s4.webp');
}

/* Title: Montserrat + #002E64 + red separator line above */
.anps-services-grid__title {
  position: relative;
  font-family: 'Montserrat', sans-serif !important;
  color: #002E64 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 10px 0 14px !important;
  padding-top: 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.anps-services-grid__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: #C5021D;
  border-radius: 2px;
}

/* Description: Montserrat + #002E64 - forza 3 lineas para alinear cards */
.anps-services-grid__description {
  font-family: 'Montserrat', sans-serif !important;
  color: #002E64 !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  opacity: .88;
  max-width: 22ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.6em * 3) !important;
}

/* Hide footer variants (highlight values, bars, dots, etc.) */
.anps-services-grid__footer {
  display: none !important;
}

/* Neutralizar borde lateral / accent del variant */
.anps-services-grid__card--bordered {
  border-left: 0 !important;
}

/* Override del cols-2 / cols-3 nativos del widget */
.anps-services-grid.anps-services-grid--cols-2,
.anps-services-grid.anps-services-grid--cols-3,
.anps-services-grid.anps-services-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {

  .anps-services-grid,
  .anps-services-grid.anps-services-grid--cols-2,
  .anps-services-grid.anps-services-grid--cols-3,
  .anps-services-grid.anps-services-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {

  .anps-services-grid,
  .anps-services-grid.anps-services-grid--cols-2,
  .anps-services-grid.anps-services-grid--cols-3,
  .anps-services-grid.anps-services-grid--cols-4 {
    grid-template-columns: 1fr !important;
  }

  .anps-services-grid__card {
    padding: 26px 22px !important;
  }

  .anps-services-grid__title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .anps-services-grid__description {
    min-height: 0 !important;
    max-width: none !important;
  }
}

/* ============================================================
   #simple -- Simple Process section
   ------------------------------------------------------------
   * Titulo principal: palabra resaltada en rojo (#C5021D).
     En Elementor: envolvé "Process" en <span>...</span>:
       Simple <span>Process</span>
   * Cada step lleva una linea roja pequena debajo del titulo.
   ============================================================ */

/* Palabra resaltada del titulo en rojo (compartido con #clients) */
#simple .elementor-heading-title span,
#clients .elementor-heading-title span {
  color: #C5021D !important;
}

/* Tipografia base compartida entre #simple y #clients.
   IMPORTANTE: usamos :where() (especificidad 0) y sin !important para
   que cualquier color/peso/tamano que setees a nivel widget en Elementor
   gane sobre estos defaults. Asi los numeros 01/02/03 (que tienen color
   blanco seteado en Elementor) NO se ven afectados. */
:where(#simple, #clients) .elementor-heading-title,
:where(#simple, #clients) .elementor-widget-text-editor,
:where(#simple, #clients) .elementor-widget-text-editor p {
  font-family: 'Montserrat', sans-serif;
}

/* Titulo principal: defaults visuales (override-ables desde Elementor) */
:where(#simple, #clients) .elementor-heading-title {
  color: #002E64;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* Parrafo: defaults visuales (override-ables desde Elementor) */
:where(#simple, #clients) .elementor-widget-text-editor,
:where(#simple, #clients) .elementor-widget-text-editor p {
  color: #002E64;
  font-weight: 400;
  line-height: 1.7;
  font-size: 15px;
}

/* Linea roja pequena debajo del titulo de cada step.
   IMPORTANTE: en Elementor, agregá la CSS Class "step-title" a los
   headings de "Schedule a Consultation", "Provide Your Documents" y
   "We Handle the Rest" (Advanced > CSS Classes).
   Asi la linea NO aparece en los numeros 01/02/03.
   Si el titulo trae underline o border-bottom desde Elementor, lo
   anulamos aca para que solo se vea la linea corta de 40px. */
#simple .step-title .elementor-heading-title,
#simple .elementor-heading-title.step-title {
  position: relative !important;
  padding-bottom: 16px !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

#simple .step-title .elementor-heading-title::after,
#simple .elementor-heading-title.step-title::after {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 2px !important;
  background: #C5021D !important;
  border-radius: 2px !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

/* ============================================================
   #frequently -- FAQ section with Accordion
   ------------------------------------------------------------
   * Tipografia Montserrat en toda la seccion.
   * Titulo: palabra "Asked" en rojo (#C5021D) -- en Elementor
     poné el texto como: Frequently <span>Asked</span> Questions
   * Etiqueta "FAQ" (heading chico arriba del titulo): agregá
     la CSS Class "faq-label" a ese heading (Advanced > CSS Classes).
   * Accordion: cada item se renderiza como card blanca redondeada
     con sombra, circulo gris con "?" antes de la pregunta, e
     icono +/- a la derecha (los nativos de Elementor).
   ============================================================ */

#frequently,
#frequently .elementor-heading-title,
#frequently .elementor-widget-text-editor,
#frequently .elementor-accordion,
#frequently .elementor-tab-title,
#frequently .elementor-tab-content,
#frequently .elementor-button {
  font-family: 'Montserrat', sans-serif !important;
}

/* Etiqueta "FAQ" (label rojo arriba del titulo principal) */
#frequently .faq-label .elementor-heading-title,
#frequently .elementor-heading-title.faq-label {
  color: #C5021D !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
}

/* Palabra resaltada en rojo dentro del titulo principal */
#frequently .elementor-heading-title span {
  color: #C5021D !important;
}

/* Descripcion del FAQ: ancho fijo para mantener el wrap en 4 lineas
   sin importar la resolucion del desktop. En mobile/tablet se libera. */
#frequently .elementor-widget-text-editor {
  max-width: 360px !important;
}

@media (max-width: 1024px) {
  #frequently .elementor-widget-text-editor {
    max-width: none !important;
  }
}

/* ---------- ACCORDION ---------- */

#frequently .elementor-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cada item = card blanca con shadow y borde redondeado */
#frequently .elementor-accordion .elementor-accordion-item {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 14px rgba(0, 46, 100, 0.06) !important;
  overflow: hidden;
  margin: 0 !important;
}

/* Header (la pregunta) - flex con 3 items reordenados via 'order':
   [1] circulo "?"  [2] texto pregunta (flex:1)  [3] icono +/- */
#frequently .elementor-accordion .elementor-tab-title {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 22px !important;
  background: #ffffff !important;
  border: 0 !important;
  font-weight: 600 !important;
  color: #002E64 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* [1] Circulo gris claro con "?" antes de la pregunta */
#frequently .elementor-accordion .elementor-tab-title::before {
  content: "?";
  order: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef1f6;
  color: #002E64;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* [2] Texto de la pregunta - ocupa todo el espacio restante */
#frequently .elementor-accordion .elementor-tab-title a,
#frequently .elementor-accordion .elementor-tab-title .elementor-accordion-title {
  order: 2 !important;
  color: #002E64 !important;
  text-decoration: none !important;
  flex: 1 1 auto !important;
}

/* [3] Icono +/- forzado a la derecha mediante order */
#frequently .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  order: 3 !important;
  margin: 0 !important;
  margin-left: auto !important;
  color: #002E64 !important;
  flex: 0 0 auto !important;
  font-size: 16px !important;
}

#frequently .elementor-accordion .elementor-tab-title .elementor-accordion-icon i,
#frequently .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg {
  color: #002E64 !important;
  fill: #002E64 !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
}

/* Contenido (respuesta) */
#frequently .elementor-accordion .elementor-tab-content {
  padding: 0 22px 20px 76px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #002E64 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  opacity: .88;
}

/* Cuando el item esta activo, el header NO cambia de fondo */
#frequently .elementor-accordion .elementor-tab-title.elementor-active {
  background: #ffffff !important;
  color: #002E64 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  #frequently .elementor-accordion .elementor-tab-title {
    padding: 14px 16px !important;
    font-size: 14px !important;
    gap: 12px !important;
  }

  #frequently .elementor-accordion .elementor-tab-title::before {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  #frequently .elementor-accordion .elementor-tab-content {
    padding: 0 16px 16px 60px !important;
  }
}

/* ============================================================
   #contact -- Contact Us section (info + form + map)
   ------------------------------------------------------------
   * 3 cards en desktop, apiladas en mobile.
   * Tipografia Montserrat, color base #002E64, acentos #C5021D.
   * El formulario usa Contact Form 7 -- estilamos los inputs aca
     para que matcheen el diseno (rounded, border light, focus azul).
   ============================================================ */

#contact,
#contact .elementor-heading-title,
#contact .elementor-widget-text-editor,
#contact .elementor-button,
#contact label,
#contact input,
#contact select,
#contact textarea,
#contact .wpcf7 {
  font-family: 'Montserrat', sans-serif;
}

/* Cards blancas: SOLO la del form y la del mapa.
   La columna izquierda (info de contacto) NO lleva fondo blanco
   -- se ve directamente sobre el fondo gris de la seccion. */
#contact .contact-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 46, 100, 0.06) !important;
  padding: 36px 32px !important;
}

/* Fallback robusto: si el container del FORMULARIO (CF7 widget)
   no tiene la clase .contact-card, igual lo pintamos como card */
#contact .elementor-widget-shortcode:has(.wpcf7),
#contact .e-con:has(> .elementor-widget-shortcode .wpcf7) {
  /* solo si el padre directo del form no es ya una card */
}

/* Asegurar que cualquier container hijo directo de #contact que
   tenga la clase contact-card mantenga su estilo de card */
#contact>.e-con-inner>.contact-card,
#contact>.contact-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 46, 100, 0.06) !important;
}

/* Etiqueta "CONTACT US" roja */
#contact .contact-label .elementor-heading-title,
#contact .elementor-heading-title.contact-label {
  color: #C5021D !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
}

/* Palabra resaltada del titulo en rojo (envolvé "Here" en <span>) */
#contact .elementor-heading-title span {
  color: #C5021D !important;
}

/* Titulo principal */
:where(#contact) .elementor-heading-title {
  color: #002E64;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Parrafos */
:where(#contact) .elementor-widget-text-editor,
:where(#contact) .elementor-widget-text-editor p {
  color: #002E64;
  font-weight: 400;
  line-height: 1.7;
  font-size: 15px;
}

/* ---------- Items de contacto (icono + label + valor) ---------- */
#contact .contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

#contact .contact-item .elementor-icon-box-icon {
  flex: 0 0 auto;
  margin: 0 !important;
}

#contact .contact-item .elementor-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 46, 100, 0.07) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #C5021D !important;
  font-size: 18px !important;
}

#contact .contact-item .elementor-icon i,
#contact .contact-item .elementor-icon svg {
  color: #C5021D !important;
  fill: #C5021D !important;
}

#contact .contact-item .elementor-icon-box-content {
  text-align: left !important;
}

#contact .contact-item .elementor-icon-box-title {
  font-size: 13px !important;
  color: #002E64 !important;
  opacity: .7;
  font-weight: 500 !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}

#contact .contact-item .elementor-icon-box-description {
  font-size: 15px !important;
  color: #002E64 !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* ---------- Boton "Schedule a Consultation" rojo full-width ---------- */
#contact .schedule-btn .elementor-button {
  background-color: #C5021D !important;
  color: #ffffff !important;
  width: 100% !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 16px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
  transition: background-color .2s ease;
}

#contact .schedule-btn .elementor-button:hover {
  background-color: #a40217 !important;
}

/* ---------- FORMULARIO (Contact Form 7) ---------- */

/* CF7 envuelve automaticamente cada linea en <p>. Reseteamos sus margenes
   y eliminamos los <br> que tambien inserta CF7 para evitar gaps grandes. */
#contact .wpcf7 p {
  margin: 0 0 14px !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

#contact .wpcf7 p:last-child {
  margin-bottom: 0 !important;
}

#contact .wpcf7 br {
  display: none !important;
}

#contact .wpcf7 form,
#contact .wpcf7-form {
  margin: 0 !important;
}

#contact .wpcf7 form .form-row {
  margin-bottom: 14px;
}

#contact .wpcf7 form .form-row:last-of-type {
  margin-bottom: 0;
}

/* Cada <span class="wpcf7-form-control-wrap"> que rodea inputs */
#contact .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin: 0;
}

#contact .wpcf7 label,
#contact .form-label {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #002E64 !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

#contact .wpcf7 input[type="text"],
#contact .wpcf7 input[type="email"],
#contact .wpcf7 input[type="tel"],
#contact .wpcf7 select,
#contact .wpcf7 textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  /* height:auto anula la altura fija (40px) que impone el tema padre:
     con esa altura + el padding, el texto del <select> quedaba cortado. */
  height: auto !important;
  padding: 12px 14px !important;
  border: 1px solid #E5E9F2 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: #002E64 !important;
  line-height: 1.5 !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#contact .wpcf7 input::placeholder,
#contact .wpcf7 select::placeholder,
#contact .wpcf7 textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 1;
}

#contact .wpcf7 input:focus,
#contact .wpcf7 select:focus,
#contact .wpcf7 textarea:focus {
  outline: none !important;
  border-color: #002E64 !important;
  box-shadow: 0 0 0 3px rgba(0, 46, 100, 0.08) !important;
}

#contact .wpcf7 textarea {
  min-height: 100px;
  resize: vertical;
}

/* IMPORTANTE: appearance:none necesita los prefijos -webkit-/-moz- para
   ocultar la flecha NATIVA del select. Sin ellos, Chrome/Edge muestran
   la flecha del navegador + la flecha SVG de abajo = doble flecha. */
#contact .wpcf7 select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='9'%20viewBox='0%200%2014%209'%20fill='none'%3E%3Cpath%20d='M1.6%201.8L7%207.2L12.4%201.8'%20stroke='%23002E64'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 9px !important;
  padding-right: 40px !important;
}

/* IE / Edge legacy: ocultar la flecha nativa del select */
#contact .wpcf7 select::-ms-expand {
  display: none !important;
}

/* El tema padre inyecta OTRA flecha via .wpcf7-form-control-wrap::after
   sobre el campo Subject => doble flecha. La anulamos para dejar solo
   la flecha SVG de fondo del propio <select>. */
#contact .wpcf7 .wpcf7-form-control-wrap::before,
#contact .wpcf7 .wpcf7-form-control-wrap::after {
  content: none !important;
  display: none !important;
}

/* Boton Send Message - azul oscuro.
   El icono de avion va como background-image (no como ::after): CF7
   renderiza el submit como <input>, y los <input> NO admiten pseudo-
   elementos ::before/::after, por eso el icono nunca aparecia. */
#contact .wpcf7 .wpcf7-submit,
#contact .wpcf7 input[type="submit"] {
  background-color: #002E64 !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 48px 14px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background-color .2s ease;
}

#contact .wpcf7 .wpcf7-submit:hover,
#contact .wpcf7 input[type="submit"]:hover {
  background-color: #001a3d !important;
}

/* Fila de submit + nota de privacidad.
   CF7 envuelve el [submit] y el <span class="form-privacy-note"> dentro
   de un mismo <p>; por eso el layout flex va sobre ESE <p> y el orden se
   fuerza con 'order' para que el boton quede SIEMPRE a la izquierda y la
   nota a la derecha, sin importar el orden del DOM. */
#contact .wpcf7 .form-submit-row {
  display: flex;
  margin-top: 10px;
}

/* nowrap => el boton y la nota quedan SIEMPRE en la misma fila (boton a
   la izquierda, nota a la derecha, como el diseno original). La nota
   ajusta su texto en 2-3 lineas dentro del espacio que le queda. */
#contact .wpcf7 .form-submit-row>p {
  display: flex !important;
  flex: 1 1 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin: 0 !important;
}

#contact .wpcf7 .form-submit-row .wpcf7-submit,
#contact .wpcf7 .form-submit-row input[type="submit"] {
  order: 0;
  flex: 0 0 auto;
}

/* CF7 inserta un <span.wpcf7-spinner> (indicador de carga) entre el
   boton y la nota: con visibility:hidden seguia reservando ~44px y
   descuadraba la fila empujando la nota. Lo sacamos del layout. */
#contact .wpcf7 .form-submit-row .wpcf7-spinner {
  display: none !important;
}

#contact .form-privacy-note {
  order: 1;
  flex: 1 1 120px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #002E64;
  opacity: .65;
  line-height: 1.4;
}

/* Icono de candado antes de la nota de privacidad */
#contact .form-privacy-note::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Mensajes de validacion CF7 */
#contact .wpcf7-not-valid-tip {
  color: #C5021D !important;
  font-size: 12px !important;
  margin-top: 4px;
}

#contact .wpcf7-response-output {
  border-radius: 8px !important;
  font-size: 13px !important;
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
}

/* ---------- Tarjeta del mapa: Google Maps widget llena toda la card ---------- */
#contact .map-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
}

/* El widget de Google Maps debe llenar 100% de la altura de la card */
#contact .map-card .elementor-widget-google_maps,
#contact .map-card .elementor-widget-google_maps>.elementor-widget-container,
#contact .map-card .elementor-widget-google_maps .elementor-custom-embed {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
}

#contact .map-card .elementor-widget-google_maps iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 460px !important;
  display: block !important;
  border: 0 !important;
  flex: 1 1 auto !important;
}

/* ---------- Layout de las 3 columnas: mismo alto + anchos balanceados ----------
   El problema: las columnas se redimensionaron a mano en Elementor y
   quedaron con anchos dispares (23.9% / 31.6% / 33.4%, sin sumar 100%).
   Solucion: forzar el ancho aca para que sea estable e independiente
   del arrastre en el editor. */

/* La fila estira las 3 columnas al mismo alto (bordes inferiores alineados) */
#contact>.e-con-inner {
  align-items: stretch !important;
}

#contact>.e-con-inner>.e-con {
  align-self: stretch !important;
}

/* Desktop: info mas angosta (28%); formulario y mapa identicos (36% c/u).
   Ancho EXPLICITO por flex-basis + max-width (tope rigido): asi el
   formulario y el mapa miden exactamente lo mismo, sin que el contenido
   del form lo ensanche. El 48px = los 2 gaps de 24px de la fila. */
@media (min-width: 1025px) {
  #contact>.e-con-inner>.e-con {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 calc((100% - 48px) * 0.28) !important;
    max-width: calc((100% - 48px) * 0.28) !important;
  }

  #contact>.e-con-inner>.e-con:nth-child(2),
  #contact>.e-con-inner>.e-con:nth-child(3) {
    flex: 0 1 calc((100% - 48px) * 0.36) !important;
    max-width: calc((100% - 48px) * 0.36) !important;
  }
}

/* ---------- RESPONSIVE ---------- */
/* Tablet */
@media (max-width: 1024px) {
  #contact .contact-card {
    padding: 28px 22px !important;
  }

  #contact .map-card .elementor-widget-google_maps iframe,
  #contact .map-card iframe {
    min-height: 340px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #contact .contact-card {
    padding: 24px 20px !important;
  }

  #contact .map-card .elementor-widget-google_maps iframe,
  #contact .map-card iframe {
    min-height: 260px !important;
  }

  #contact .contact-item .elementor-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  /* Mobile: boton arriba (full-width) y nota debajo. El flex real esta
     sobre el <p> que CF7 genera, asi que el stack se aplica ahi. */
  #contact .wpcf7 .form-submit-row>p {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #contact .wpcf7 .form-submit-row .wpcf7-submit,
  #contact .wpcf7 .form-submit-row input[type="submit"] {
    width: 100% !important;
    background-position: right 24px center !important;
  }

  #contact .form-privacy-note {
    justify-content: center;
    text-align: left;
  }

  #contact .schedule-btn .elementor-button {
    padding: 14px 20px !important;
    font-size: 14px !important;
  }
}

/* /Mobile (#contact) */

/* ============================================================
   #ams-footer -- Footer custom Accounting Matters Solutions
   ------------------------------------------------------------
   Reemplaza el footer del theme padre (sidebar-footer.php).
   Layout: logo centrado + tagline + redes sociales + copyright,
   con un watermark del logo sobre el lado derecho.
   ============================================================ */

.ams-footer {
  position: relative;
  background: #002E64;
  color: #ffffff;
  padding: 70px 20px 40px;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}

/* Línea roja superior */
.ams-footer__top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: #C8102E;
  z-index: 2;
}

/* Watermark del escudo sobre el lado derecho.
   Anclado con top/bottom para que su borde inferior quede a la
   altura del copyright y no pegue al borde del footer. La imagen
   se escala con object-fit:contain dentro de ese marco. */
.ams-footer__watermark {
  position: absolute;
  top: 24px;
  /* aire bajo la línea roja superior */
  bottom: 50px;
  /* alinea el bottom del escudo con el copyright */
  right: -280px;
  /* más negativo = más oculto a la derecha */
  width: 520px;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

.ams-footer__watermark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  /* Asegura blanco puro aunque el original tenga matices */
  filter: brightness(0) invert(1);
}

/* Contenido principal centrado */
.ams-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.ams-footer__logo {
  margin-bottom: 18px;
}

.ams-footer__logo img {
  max-width: 230px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* Divisor rojo bajo el logo */
.ams-footer__divider {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: #C8102E;
  margin: 0 auto 22px;
}

.ams-footer__tagline {
  font-size: 15px;
  line-height: 1.75;
  color: #cfd6e2;
  margin: 0 0 28px;
  font-weight: 400;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Redes sociales */
.ams-footer__social {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.ams-footer__social li {
  margin: 0;
}

.ams-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ams-footer__social-link:hover,
.ams-footer__social-link:focus {
  background: #C8102E;
  border-color: #C8102E;
  color: #ffffff;
  transform: translateY(-2px);
  text-decoration: none;
}

.ams-footer__social-link i {
  line-height: 1;
}

.ams-footer__social-link svg {
  width: 14px;
  height: 14px;
  display: block;
}

@media (max-width: 768px) {
  .ams-footer__social-link svg {
    width: 13px;
    height: 13px;
  }
}

.ams-footer__copyright {
  font-size: 13px;
  color: #b8c1d1;
  margin: 0;
  letter-spacing: 0.2px;
}

/* Responsive ----------------------------------------------- */
@media (max-width: 768px) {
  .ams-footer {
    padding: 55px 18px 32px;
  }

  .ams-footer__watermark {
    width: 360px;
    right: -250px;
    opacity: 0.09;
  }

  .ams-footer__logo img {
    max-width: 190px;
  }

  .ams-footer__tagline {
    font-size: 14px;
    line-height: 1.7;
  }

  .ams-footer__social {
    gap: 12px;
  }

  .ams-footer__social-link {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .ams-footer__watermark {
    display: none;
  }

  .ams-footer__copyright {
    font-size: 12px;
  }
}

/* ============================================================
   .ams-header -- Header custom Accounting Matters Solutions
   ------------------------------------------------------------
   El header lo arma Elementor (vía HFE plugin) — la sección
   tiene la clase css `ams-header` para refinar layout y mantener
   sticky/sombras consistentes con el resto del sitio.
   ============================================================ */

/* El header ya no usa la barra del theme padre — eliminamos cualquier
   margen heredado que empuje el contenido principal. */
#masthead {
  position: relative;
  z-index: 99;
  font-family: 'Montserrat', sans-serif;
}

/* Layout del header — alineado visualmente al ancho del #banner (1280px de
   contenido + 20px de padding horizontal en la sección). Antes la sección
   tenía max-width 1240px + padding 40px, lo que dejaba el logo y el pill
   desfasados respecto al contenido del hero. */
.elementor-section.ams-header,
.ams-header>.elementor-container {
  min-height: 78px;
}

.ams-header.elementor-section {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.ams-header.elementor-section>.elementor-container {
  max-width: 1280px !important;
}

/* Logo: alto mínimo 60px. Elementor inyecta width:180px en .elementor-element-wlg0001a
   con specificity (0,3,1) — pisa nuestro selector. Forzamos con !important y
   ponemos height fija (60px) + width:auto para preservar aspect ratio. */
.ams-header .elementor-widget-image img,
.ams-header .ams-header__logo img {
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
}

/* Navegación: ítems alineados a la derecha de la columna, próximos
   al botón del teléfono — el diseño manda los menús "hacia la derecha".
   HFE le pega al widget `hfe-nav-menu__align-left` (heredado del setting
   de Elementor) y eso aplica `margin-right: auto` al <ul>, empujándolo
   a la izquierda. Neutralizamos margin + forzamos justify-content. */
.ams-header .ams-header__menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
.ams-header .ams-header__menu.hfe-nav-menu__align-left .hfe-nav-menu {
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.ams-header .hfe-nav-menu li>a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #002E64;
  letter-spacing: 0.2px;
  padding: 0 12px;
  transition: color 0.2s ease;
}

.ams-header .hfe-nav-menu li>a:hover,
.ams-header .hfe-nav-menu li.current-menu-item>a {
  color: #C8102E;
}

/* Teléfono como "pill" — botón con borde GRIS conteniendo
   icono rojo + número azul. El widget es un Elementor button.
   Override del estilo de Elementor para imponer borde gris suave. */
.ams-header .ams-header__phone .elementor-button {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background-color: #FFFFFF !important;
  border: 2px solid #D9D9D9 !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Icono dentro del botón: siempre rojo */
.ams-header .ams-header__phone .elementor-button-icon i,
.ams-header .ams-header__phone .elementor-button-icon svg {
  color: #C8102E;
  fill: #C8102E;
  font-size: 14px;
}

/* Texto del botón: azul oscuro */
.ams-header .ams-header__phone .elementor-button-text {
  color: #002E64;
}

/* Hover: borde un tono más oscuro + sombra suave.
   IMPORTANTE: no cambiamos color de texto/icono — antes el hover los volvía
   blancos y el número quedaba invisible sobre el fondo claro. */
.ams-header .ams-header__phone .elementor-button:hover,
.ams-header .ams-header__phone .elementor-button:focus {
  background-color: #FFFFFF !important;
  border-color: #B5B5B5 !important;
  box-shadow: 0 2px 8px rgba(0, 46, 100, 0.08);
}

.ams-header .ams-header__phone .elementor-button:hover .elementor-button-icon i,
.ams-header .ams-header__phone .elementor-button:hover .elementor-button-icon svg {
  color: #C8102E;
  fill: #C8102E;
}

.ams-header .ams-header__phone .elementor-button:hover .elementor-button-text {
  color: #002E64;
}

/* Ocultamos la "main-title" oculta de HFE (solo SR-only) */
#masthead .main-title.bhf-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ------------------------------------------------------------
   Mobile (≤ 767px): Logo (izquierda) + Hamburger (derecha) en
   una sola fila. El pill del teléfono se oculta (el número se
   accede desde el dropdown del menú).
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* Forzar layout horizontal — sin que las columnas se apilen */
  .ams-header>.elementor-container {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Col 1 (logo): ancho mayor */
  .ams-header>.elementor-container>.elementor-column:nth-child(1) {
    width: 65% !important;
  }

  /* Col 2 (menú/hamburger): el resto, alineado a la derecha */
  .ams-header>.elementor-container>.elementor-column:nth-child(2) {
    width: 35% !important;
  }

  /* Col 3 (teléfono pill): oculto en mobile */
  .ams-header>.elementor-container>.elementor-column:nth-child(3) {
    display: none !important;
  }

  /* Hamburger pegado al borde derecho. HFE pone hfe-nav-menu__align-left
       en el widget (heredado del setting desktop), por eso forzamos
       text-align/flex aquí en mobile. */
  .ams-header .ams-header__menu.hfe-nav-menu__align-left,
  .ams-header .ams-header__menu {
    text-align: right !important;
  }

  .ams-header .ams-header__menu>.elementor-widget-container {
    display: flex;
    justify-content: flex-end;
  }

  .ams-header .ams-header__menu .hfe-nav-menu__toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
  }

  .ams-header .ams-header__menu nav.hfe-dropdown {
    text-align: left;
  }

  /* Color del hamburger en línea con la marca */
  .ams-header .ams-header__menu .hfe-nav-menu__toggle .hfe-nav-menu-icon,
  .ams-header .ams-header__menu .hfe-nav-menu__toggle .hfe-nav-menu-icon svg {
    color: #002E64;
    fill: #002E64;
  }

  /* Logo más chico en mobile */
  .ams-header .ams-header__logo,
  .ams-header .ams-header__logo .elementor-image {
    max-width: 120px;
  }

  /* En mobile el logo baja a 42px (gana al height:60px del desktop por orden y !important) */
  .ams-header .elementor-widget-image img,
  .ams-header .ams-header__logo img {
    height: 42px !important;
    width: auto !important;
    max-width: 120px !important;
    max-height: none !important;
  }

  /* Section padding más compacto */
  .ams-header.elementor-section {
    padding: 8px 16px !important;
  }
}

/* ============================================================
   #years — fila de cards "Years of Experience / IRS / QuickBooks /
   Personalized Service / Se Habla Español"
   ------------------------------------------------------------
   Vive dentro de #banner (orden 99999 lo empuja al final del flex).
   Elementor ya le pone background blanco y border-radius 12px; le
   sumamos una sombra suave para despegarlo del fondo del hero.
   ============================================================ */
/* El padre de #years (ca26b37) es un anps-stretch-container que el theme
   padre estira a full-bleed por JS. Como ca26b37 NO tiene un wrapper
   `.e-con-inner` (es e-con-full sin inner), constrainmos el propio #years
   al ancho del banner (1280px) y lo centramos para que sus bordes coincidan
   exactamente con los del contenido del hero. */
#years {
  box-shadow: 0 6px 24px rgba(0, 46, 100, 0.08) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* En viewports < 1320px (1280 + 40px de padding lateral), bajamos el ancho
   máximo para que el card no toque los bordes del viewport. */
@media (max-width: 1320px) {
  #years {
    max-width: calc(100% - 40px) !important;
  }
}

/* ============================================================
   #simple — sección "Simple Process"
   ------------------------------------------------------------
   Línea inferior centrada (no abarca todo el ancho), como en
   el diseño original. Se pinta con ::after para no depender de
   un widget separator de Elementor.
   ============================================================ */
#simple {
  position: relative;
}

#simple::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1100px, 90%);
  height: 1px;
  background-color: rgba(0, 46, 100, 0.15);
}

/* ============================================================
   #contact — sección "We're Here to Help" en mobile
   ------------------------------------------------------------
   En desktop los icon-box usan elementor-position-inline-start
   (icono a la izquierda). En mobile Elementor le agrega la clase
   elementor-mobile-position-block-start que apila icono encima
   del texto y centra todo — resulta en mucho espacio vertical
   y un layout pobre. Forzamos mobile = icon-left, alineación
   vertical, espacio compacto.
   ============================================================ */
@media (max-width: 767px) {
  /* Icon-box: ICON izquierda + texto derecha (horizontal) */
  #contact .elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 16px;
  }

  #contact .elementor-widget-icon-box .elementor-icon-box-icon {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  #contact .elementor-widget-icon-box .elementor-icon-box-content {
    flex: 1 1 auto;
    text-align: left !important;
  }

  #contact .elementor-widget-icon-box .elementor-icon-box-title {
    margin-bottom: 2px !important;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
  }

  #contact .elementor-widget-icon-box .elementor-icon-box-description {
    margin: 0 !important;
    font-size: 15px;
    font-weight: 600;
    color: #002E64;
    line-height: 1.35;
  }

  /* Espaciado entre cards compacto */
  #contact .elementor-widget-icon-box {
    margin-bottom: 14px !important;
  }

  /* Heading + intro text más ajustados */
  #contact .elementor-widget-heading h6 {
    margin-bottom: 6px;
    letter-spacing: 1.5px;
  }

  #contact .elementor-widget-heading + .elementor-widget-heading {
    margin-top: 0;
  }

  #contact .elementor-widget-text-editor {
    margin-bottom: 22px;
  }

  /* Botón Schedule full-width */
  #contact .elementor-widget-button .elementor-button {
    width: 100%;
    justify-content: center;
  }

  /* Antes del primer icon-box: separar del párrafo */
  #contact .elementor-widget-text-editor + .elementor-widget-icon-box {
    margin-top: 4px !important;
  }
}