/* Avanti Lending — estilos base. Tokens y estructura de header/footer
   extraidos directamente del sitio en vivo (avantilending.com,
   WordPress/Elementor) inspeccionando estilos computados en el navegador.
   Ver CLAUDE.md, seccion "Brand". */

:root {
  --green-dark: #0D5134;   /* bg del header y de la franja de disclaimer del footer */
  --green: #24A637;        /* acento: botones, item activo, links legales, telefono */
  --ink: #222222;          /* texto del menu movil / dropdown de "Loan options" */
  --ink-2: #333333;        /* headings y links de las columnas del footer */
  --white: #FFFFFF;
  --gray-bg: #ECECEC;      /* fondo de la franja superior del footer (columnas) */
  --muted: #4A4A4A;        /* texto base del body */
  --muted-2: #555555;      /* parrafos largos de contenido (welcome, why-choose) */
  --hero-title-2: #0F3D2E; /* segunda linea del H1 del hero ("the Right Financing") */
  --font: "Open Sans", Arial, sans-serif;   /* body */
  --font-head: "Roboto", Arial, sans-serif; /* nav, headings, botones */
  --font-alt: "Montserrat", Arial, sans-serif; /* botones del hero */
  --font-display: "GALANO GROTESQUE", "Montserrat", Arial, sans-serif; /* primera linea del H1 del hero, titulos de loan-types */
  --font-slab: "Roboto Slab", serif; /* breadcrumb y fecha de tarjeta del blog (tema real, OceanWP) */
  --wrap: 1300px;
  --content-wrap: 1140px; /* ancho de los bloques de contenido del home (header/footer usan --wrap) */
  --nav-breakpoint: 1300px; /* por debajo de esto el nav horizontal colapsa a hamburguesa */
}

@font-face {
  font-family: "GALANO GROTESQUE";
  font-style: normal; font-weight: 400;
  src: url("/assets/fonts/GalanoGrotesqueAltBlack.woff2") format("woff2");
}
@font-face {
  font-family: "GALANO GROTESQUE";
  font-style: normal; font-weight: 700;
  src: url("/assets/fonts/GalanoGrotesqueAltBold.woff2") format("woff2");
}
@font-face {
  font-family: "GALANO GROTESQUE";
  font-style: italic; font-weight: 700;
  src: url("/assets/fonts/GalanoGrotesqueAltBlackItalic.woff2") format("woff2");
}
@font-face {
  font-family: "GALANO GROTESQUE";
  font-style: normal; font-weight: 600;
  src: url("/assets/fonts/GalanoGrotesqueAltExtraBold.woff2") format("woff2");
}

/* Iconos de "We Offer These Types of Loans in Florida": el sitio real usa
   el plugin "icon-element", que empaqueta 4 icon-fonts de terceros distintas
   (una por icono, sin ningun criterio consistente) mas Material Icons de
   Google. Se bajaron los .woff/.woff2 reales de
   avantilending.com/wp-content/plugins/icon-element/assets/... a
   assets/fonts/icon-element/ y se usan los mismos codepoints que el sitio
   real (ver CLAUDE.md, seccion "Iconos de loan-types"). */
@font-face {
  font-family: "WPPageBuilder";
  src: url("/assets/fonts/icon-element/WPPageBuilder.woff") format("woff");
}
@font-face {
  font-family: "FabricMDL2Icons";
  src: url("/assets/fonts/icon-element/fabric-icons.woff") format("woff");
}
@font-face {
  font-family: "eicons";
  src: url("/assets/fonts/icon-element/eicons.woff2") format("woff2");
}
@font-face {
  font-family: "tutor";
  src: url("/assets/fonts/icon-element/tutor.woff2") format("woff2");
}
@font-face {
  font-family: "Material Icons";
  src: url("/assets/fonts/icon-element/MaterialIcons-Regular.woff2") format("woff2");
}

/* overflow-x:hidden en html/body rompia `position:sticky` en cualquier
   parte del sitio (loan-options, blog): un eje en "hidden" y el otro en
   "visible" hace que el navegador convierta el otro eje a "auto" (regla
   del spec de CSS overflow), creando 2 contenedores de scroll anidados
   (html Y body) en vez de uno solo — el sidebar sticky quedaba "sticky"
   dentro de ese contenedor interno pero el scroll real de la pagina
   pasaba por el de afuera, asi que visualmente nunca lo seguia. "clip"
   evita el scroll horizontal sin disparar esa conversion. */
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--muted);
  background: var(--white);
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ============ HEADER ============ */
.site-header {
  background: var(--green-dark);
  position: relative;
  z-index: 100;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* padding vertical ~35px verificado contra el sitio real (header total
     ~165px de alto) — con esto el bloque de la derecha (lang + telefono,
     apilados en 2 filas) entra sin que el header quede mas chico que
     ese contenido. */
  padding: 35px 20px;
}
.brand { display: block; flex: 0 0 auto; }
.brand img { width: 158px; height: auto; display: block; }

.site-nav { flex: 1 1 auto; }
.site-nav > ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.site-nav > ul > li { position: relative; }
.site-nav > ul > li > a {
  display: inline-block;
  padding: 10px 14px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  transition: color .2s ease;
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a:focus-visible { color: var(--green); }
.site-nav > ul > li.is-active > a { color: var(--green); }
.site-nav .has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 7px;
  vertical-align: middle;
  position: relative; top: -2px;
}

/* dropdown de "Loan options" (desktop) — verificado leyendo el DOM/CSS real
   de avantilending.com (widget "Nav Menu" de Elementor + SmartMenus): NO es
   un mega-menu de 2 columnas con los 12 items sueltos. Es una columna
   angosta (~12em) con 2 items — "Foreign National" y "Local Customers" — y
   "Local Customers" a su vez abre OTRO submenu angosto con los otros 11,
   anidado EN EL MISMO EJE (aparece debajo de "Local Customers", no a un
   costado tipo flyout) con mas indentacion. Ver submenuHtml() en
   _generator-lib.js, que arma esto de forma recursiva. */
.submenu {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: var(--white);
  min-width: 12em;
  z-index: 50;
}
/* selector de hijo directo (>), no descendiente: si fuera descendiente,
   pasar el mouse por "Loan options" mostraria de una todo el submenu
   anidado de "Local Customers" sin necesidad de pasar el mouse por ahi. */
.site-nav li.has-submenu:hover > .submenu,
.site-nav li.has-submenu:focus-within > .submenu,
.submenu li.has-submenu:hover > .submenu,
.submenu li.has-submenu:focus-within > .submenu { display: block; }
.submenu li { position: relative; }
.submenu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 20px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
/* el hover real rellena toda la fila de verde con texto blanco (no solo
   cambia el color del texto, a diferencia del nav horizontal de arriba) —
   verificado leyendo la regla real
   ".elementor-nav-menu--dropdown ... :hover { background-color; color }". */
.submenu li a:hover,
.submenu li a:focus-visible { background: var(--green); color: var(--white); }
.submenu li.has-submenu > a::after {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
/* cada nivel de anidamiento indenta un poco mas — el sitio real usa
   border-left creciente (8px, 16px, 24px...) por nivel; acá alcanza con 1
   nivel extra ya que "Local Customers" es la unica rama anidada. */
.submenu .submenu li a { padding-left: 32px; }

/* En el sitio real "English" y el telefono NO estan en la misma fila —
   van apilados en 2 filas a la derecha (verificado: fila del idioma
   y:35-81, fila del telefono y:101-130, con ~20px de separacion entre
   ambas). Antes los teniamos lado a lado en una sola fila. */
.site-header__actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 14px; flex: 0 0 auto; }
/* Selector de idioma funcional: dropdown al hover, mismo patron que el
   ".submenu" de "Loan options" — antes era un <span> decorativo fijo en
   "English" sin link a ningun lado (no habia contenido en espanol para
   enlazar). Ahora enlaza la pagina actual con su equivalente real en
   /es/... */
.lang-switcher { position: relative; }
.lang-switcher__trigger {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: none; border: none; padding: 0;
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--white);
}
.lang-switcher__trigger::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); display: inline-block;
}
.lang-switcher__menu {
  display: none;
  position: absolute; top: 100%; right: 0; margin-top: 10px;
  background: var(--white);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  border-radius: 4px;
  padding: 6px 0;
  min-width: 130px;
  z-index: 50;
}
.lang-switcher:hover .lang-switcher__menu,
.lang-switcher:focus-within .lang-switcher__menu,
.lang-switcher.is-open .lang-switcher__menu { display: block; }
.lang-switcher__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.lang-switcher__menu img { flex-shrink: 0; }
.lang-switcher__menu a:hover { color: var(--green); }
.lang-switcher__menu a.is-current { color: var(--green); font-weight: 700; }
.phone {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--white);
  white-space: nowrap;
}
.phone svg { width: 16px; height: 16px; fill: var(--green); flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--white);
}
.nav-toggle svg { width: 26px; height: 26px; fill: currentColor; }

/* menu movil (panel completo bajo el header, igual al sitio real) */
.mobile-menu { display: none; background: var(--white); }
.mobile-menu ul { display: flex; flex-direction: column; }
.mobile-menu li { border-bottom: 1px solid rgba(0,0,0,.06); }
.mobile-menu li > a,
.mobile-menu li .menu-row > a {
  display: block;
  padding: 14px 20px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.mobile-menu li.is-active > a,
.mobile-menu li.is-active .menu-row > a {
  background: var(--green);
  color: var(--white);
}
.mobile-menu .menu-row {
  display: flex; align-items: stretch; justify-content: space-between;
}
.mobile-menu .menu-row > a { flex: 1 1 auto; padding-right: 0; }
.mobile-menu .submenu-toggle {
  background: none; border: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: inherit; cursor: pointer; flex-shrink: 0;
}
.mobile-menu .submenu-toggle svg { width: 12px; height: 12px; fill: currentColor; transition: transform .2s ease; }
/* hijo directo (>), no descendiente: "Local Customers" (anidado dentro del
   submenu de "Loan options") necesita su PROPIO estado is-open — con un
   selector descendiente, abrir "Loan options" rotaria tambien la flecha de
   "Local Customers" y mostraria sus 11 items sin haber sido tocado. */
.mobile-menu li.is-open > .menu-row .submenu-toggle svg { transform: rotate(180deg); }
.mobile-menu .submenu {
  display: none;
  position: static; transform: none; box-shadow: none; border-radius: 0;
  background: var(--gray-bg); padding: 0; columns: 1; min-width: 0;
}
.mobile-menu li.is-open > .submenu { display: block; }
.mobile-menu .submenu li { border-bottom: 1px solid rgba(0,0,0,.06); }
.mobile-menu .submenu li a { padding: 12px 32px; font-size: 15px; font-weight: 500; }
/* segundo nivel de anidamiento (los 11 items dentro de "Local Customers")
   un poco mas indentado, mismo criterio que el dropdown de escritorio. */
.mobile-menu .submenu .submenu li a { padding-left: 48px; }
.mobile-menu .submenu .menu-row > a { padding: 12px 32px; font-size: 15px; font-weight: 500; }

@media (max-width: 1300px) {
  .site-nav, .site-header__actions .phone-label { display: none; }
  .nav-toggle { display: inline-flex; }
  /* en mobil/tablet la columna derecha pasa a ser una sola fila:
     selector de idioma (solo la bandera, sin texto ni flecha), telefono
     (icono) y boton hamburguesa, en ese orden — a pedido del usuario.
     En desktop la columna existe para separar el idioma (con texto) del
     telefono en 2 filas; aca ya no hace falta esa separacion. */
  .site-header__actions { flex-direction: row; align-items: center; gap: 14px; }
  .lang-switcher__label, .lang-switcher__trigger::after { display: none; }
  .phone span { display: none; }
  .phone svg { width: 22px; height: 22px; }
  .mobile-menu.is-open { display: block; }
}

@media (min-width: 1301px) {
  .mobile-menu { display: none !important; }
}

/* ============ FOOTER ============ */
.site-footer a:hover { color: var(--green); }

.site-footer__links {
  background: var(--gray-bg);
  padding: 56px 0 40px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr 1.2fr;
  gap: 32px;
}
/* footer en espanol: 3 columnas (sin la de detalle de "Loan Options",
   que el sitio real no traduce — ver footerHtml en _generator-lib.js) */
.site-footer__grid--3col { grid-template-columns: 1.3fr 1fr 1.2fr; }
.footer-col h2 {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 20px; }
.footer-links a {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-2);
}
.footer-contact p { margin: 0 0 20px; font-family: var(--font-head); font-size: 19px; font-weight: 400; color: var(--ink-2); }
/* telefono en verde, mismo peso que el resto — no es mas bold, solo
   cambia el color. NMLS NO es mas chico ni gris: mismo tamano/color que
   el resto del bloque de contacto. */
.footer-contact .footer-phone { color: var(--green); font-weight: 400; }

.site-footer__copy {
  background: var(--white);
  padding: 36px 0;
  text-align: center;
}
/* El logo de Avanti solo existe en blanco (LOGO-AVANTI-LENDING-BLANCO) —
   en el sitio real esta mismo blanco se pone en esta franja BLANCA y
   queda invisible (bug real del sitio en vivo). Aca se hace visible con
   un filtro en vez de replicar el bug: brightness(0) vuelve negro
   cualquier pixel opaco del PNG (que es blanco solido, sin detalle de
   color que perder), asi se ve el logo real sobre el fondo blanco. */
.site-footer__copy .footer-logo {
  display: block; margin: 0 auto 24px; width: 160px; height: auto;
  filter: brightness(0); opacity: .85;
}
.site-footer__copy p {
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
}
.site-footer__copy .legal-link {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  color: var(--green);
}
/* #69727D verificado con getComputedStyle contra el sitio real — NO es
   negro/var(--ink), es un gris azulado. El gap entre iconos tambien sale
   de medir el centro de cada uno (55px entre centros, svg de 25px sin
   padding propio en nuestro markup → gap:30px da la misma separacion). */
/* iconos negros solidos (no el gris azulado #69727D que tenia esta
   regla antes) — verificado con getComputedStyle contra el sitio real:
   el SVG no tiene fill:currentColor, usa el negro por defecto del SVG. */
.site-footer__social { display: flex; justify-content: center; gap: 30px; }
.site-footer__social a { color: #000000; display: flex; }
.site-footer__social svg { width: 25px; height: 25px; fill: currentColor; }

.site-footer__disclaimer {
  background: var(--green-dark);
  color: var(--white);
  padding: 40px 0;
}
.site-footer__disclaimer .wrap {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.site-footer__disclaimer img { width: 64px; height: auto; flex-shrink: 0; }
.site-footer__disclaimer p {
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 27px;
  margin: 0;
  color: var(--white);
}

@media (max-width: 980px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer-links { align-items: center; }
  .site-footer__disclaimer .wrap { flex-direction: column; align-items: center; text-align: center; }
}

/* Ancho de contenido dentro de <main> en TODAS las paginas (home, buy-a-home,
   refinance, ...) — 1140px, mas angosto que el --wrap de 1300px que usan
   header/footer (que viven fuera de <main>). Sin este scope a `main`, un
   `.wrap` dentro de cualquier seccion nueva cae al 1300 del header por
   accidente — ver CLAUDE.md, seccion "Ancho de contenido". */
main .wrap { max-width: var(--content-wrap); }

/* ============ HOME ============ */

.page-home main h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 45px);
  line-height: 1.15;
  color: var(--green-dark);
  margin: 0 0 16px;
}

/* botones compartidos — padding uniforme 12px 24px + line-height:1
   verificado contra el sitio real (getBoundingClientRect + getComputedStyle
   sobre los 4 botones del hero a 1400px de viewport: h=44/47px). Sin
   line-height:1 el navegador usa el line-height "normal" (~1.2 del font),
   lo que agrega ~4-5px de alto de mas y hacia que los botones se vieran
   mas altos de lo que son en el sitio real. El sitio real tampoco pone
   border en los botones solidos (border:0) — lo sacamos de .btn base y lo
   dejamos solo en .btn--outline, que si lo necesita para no perderse
   contra un fondo blanco. El hover de los botones solidos en el sitio real
   no cambia de color (mismo bg/texto en :hover que en reposo, verificado
   leyendo las reglas :hover del kit de Elementor) — no inventamos una
   inversion de colores que el sitio real no tiene. */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 23px;
  line-height: 1;
  padding: 12px 24px;
  border-radius: 30px;
  text-align: center;
  border: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn--solid { background: var(--green); color: var(--white); }
.btn--outline { background: var(--white); color: var(--green); border: 2px solid var(--green); }
.btn--outline:hover { background: var(--green); color: var(--white); }

/* hero — en el sitio real esta fila (foto + texto) NO usa el --content-wrap
   de 1140px del resto de las secciones: tiene su propio ancho maximo de
   1600px y sin padding lateral en desktop, asi que en la mayoria de las
   pantallas queda practicamente a todo el ancho del viewport. Por eso
   pisamos `.wrap` con mas especificidad aca en vez de reusarlo tal cual. */
.hero { padding: 0 0 70px; overflow: hidden; }
.hero .wrap { max-width: 1600px; padding: 0; }
.hero__grid {
  display: grid;
  grid-template-columns: 738fr 627fr; /* misma proporcion que las 2 columnas reales (738px:627px) */
  align-items: center;
  gap: 20px;
}
.hero__media { position: relative; align-self: stretch; overflow: hidden; }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* el sitio real desvanece el borde derecho de la foto a blanco con un
   ::before en degradado (linear-gradient(268deg, #fff 43%, transparent 58%))
   para que se funda con el fondo blanco de la columna de texto en vez de
   cortar en seco. Lo replicamos con un div propio en vez de ::before para
   no pelear con box-shadow/otros pseudo-elementos futuros. */
.hero__fade {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 55%, var(--white) 94%);
}
.hero__content {
  align-self: center;
  padding: 27px 20px;
}
/* El heading del hero esta alineado a la DERECHA en el sitio real en
   desktop (text-align:end declarado explicitamente en el widget, no una
   lectura de posicion) — solo pasa a center por debajo de 767px. Nunca
   esta a la izquierda en ningun ancho. Verificado leyendo la regla CSS
   del widget, no solo la posicion del texto en pantalla. */
.hero__content h1 {
  margin: 0 0 20px;
  line-height: 1.05;
  text-align: right;
}
/* Tamanos fijos (no clamp/vw) verificados con getComputedStyle contra el
   sitio real a 1400px: 63px / 56px, con line-height:1 (igual al
   font-size, mismo patron que los botones). El sitio real los mantiene
   fijos en todo el rango desktop (no hay breakpoint widescreen que los
   agrande) y solo los achica a 38px/31px por debajo de 1024px. */
.hero__content .hero__line-1 {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 63px;
  line-height: 1;
  color: #504B4B;
}
.hero__content .hero__line-2 {
  display: block;
  font-family: var(--font-alt);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--hero-title-2);
  margin-top: 6px;
}
@media (max-width: 1024px) {
  .hero__content .hero__line-1 { font-size: 38px; }
  .hero__content .hero__line-2 { font-size: 31px; }
}
/* 50px entre la fila "Apply now/Request an appointment" y la fila
   "Foreign investors/Local clients" — verificado contra el sitio real
   (antes teniamos 20px, se veian pegadas). */
.hero__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 50px; }
/* "Apply now"/"Request an appointment" son la EXCEPCION (20px Montserrat
   600) — el tamano base de .btn (23px, Roboto 800) es el que usan
   "Foreign investors"/"Local clients" de esta misma fila Y el resto de
   los botones del sitio (ej. "Buy a home"/"Refinance" del CTA final),
   verificado con getComputedStyle en ambos. */
.hero__buttons .btn { font-family: var(--font-alt); font-weight: 600; font-size: 20px; }
.hero__audience { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media (max-width: 900px) {
  .hero .wrap { padding: 0 20px; }
  .hero__grid { grid-template-columns: 1fr; }
  /* el sitio real pasa el heading de right a center solo al apilar a
     una columna (≤767px) — igual aca, al mismo breakpoint donde el hero
     ya colapsa a 1 columna. */
  .hero__content h1 { text-align: center; }
}

/* welcome — una sola columna centrada (foto arriba, texto abajo), NO una
   grilla de 2 columnas: asi esta en el sitio real (verificado con
   getBoundingClientRect, la foto y el texto comparten el mismo eje
   vertical, no estan lado a lado). */
.welcome { padding: 60px 0; text-align: center; }
.welcome__media { margin: 0 auto 36px; max-width: 768px; }
.welcome__media img { width: 100%; height: auto; }
/* titulo y subtitulo son UN SOLO heading corrido (mismo tamano/peso/
   color grande, heredado de .page-home main h2), sin salto de linea
   forzado entre ambos — a pedido del usuario, el texto envuelve
   naturalmente segun el ancho disponible (2 lineas en desktop, mas en
   mobile), no una linea fija por campo. */
.welcome h2 { margin: 0 0 20px; }
.welcome p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 18px;
}

/* loan types — 2 columnas de icon-list (circulo verde + icono blanco +
   titulo, conectados por una linea vertical) a la izquierda, foto a la
   derecha. Cada icono viene de una icon-font distinta del plugin
   "icon-element" (o un SVG inline para los 2 items que no tienen icon-font
   en el sitio real) — ver loanTypeIcon() en _generator-lib.js. */
.loan-types { padding: 60px 0; background: var(--gray-bg); }
.loan-types__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}
.loan-types__col-wrap .section-title { text-align: left; margin: 0 0 32px; }
.loan-types__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.loan-types__col { display: flex; flex-direction: column; }
.loan-types__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}
/* 17px de padding-bottom entre filas, verificado contra el sitio real
   (cada <li> mide 81px con padding:0 0 17px — sin esto los circulos
   quedaban pegados uno debajo del otro). Va como padding y no como
   margin para que la linea conectora (::before, height:100%) seudo
   la incluya y no se corte antes de llegar al siguiente icono. */
.loan-types__item:not(:last-child) { padding-bottom: 17px; }
.loan-types__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 25px; top: 50px;
  width: 1px; height: calc(100% - 2px);
  background: var(--green);
}
.loan-types__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--green); color: var(--white);
  font-size: 24px; line-height: 1;
}
/* el navegador le pone font-style:italic a <i> por defecto en su hoja de
   estilos — eso le gana a un font-style:normal puesto en el contenedor
   (heredado pierde contra "especificado", asi sea el mismo elemento <i>),
   asi que hay que pisarlo directo sobre el <i>. */
.loan-types__icon i { font-style: normal; }
.loan-types__icon svg { width: 24px; height: 24px; fill: currentColor; }
.loan-types__label {
  font-family: var(--font);
  font-weight: 700;
  font-size: 20px;
  color: var(--muted);
}
/* la foto NO lleva esquinas redondeadas en el sitio real (border-radius:0
   verificado) — ni esta ni la de "welcome" mas abajo. */
.loan-types__media img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .loan-types__grid { grid-template-columns: 1fr; }
  .loan-types__media { order: -1; }
}
@media (max-width: 560px) {
  .loan-types__cols { grid-template-columns: 1fr; }
}

/* process — circulos verdes con icono blanco, sin tarjeta de fondo */
.process { padding: 60px 0; text-align: center; }
.process h2 { margin: 0 auto 8px; }
.process__subtitle {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  max-width: 620px;
  margin: 0 auto 40px;
}
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.process-step__icon {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--green);
}
.process-step__icon svg { width: 60px; height: 60px; fill: var(--white); }
.process-step__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 25px;
  color: var(--green);
  margin-bottom: 10px;
}
.process-step p {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 760px) {
  .process__grid { grid-template-columns: 1fr; }
}

/* current financing opportunities — el sitio real usa un carousel
   (Elementor n-carousel/swiper) con loop infinito, no una grilla estatica,
   y cada tarjeta es una FOTO del proyecto arriba + el logo de la
   constructora abajo (no solo el logo). _generator-lib.js duplica la
   lista de tarjetas una vez; esta animacion desliza el track -50% de su
   propio ancho (= el ancho de UN set) para que el loop no se note. */
.opportunities { padding: 60px 0; text-align: center; }
.opportunities h2 { margin: 0 auto 36px; }
.opportunities__viewport { overflow: hidden; width: 100%; }
.opportunities__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 32px;
  animation: opportunities-scroll 35s linear infinite;
}
.opportunities__viewport:hover .opportunities__track { animation-play-state: paused; }
.opportunities__card { flex: 0 0 auto; width: 195px; text-align: center; }
.opportunities__photo {
  width: 195px; height: 390px; border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.opportunities__photo img { width: 100%; height: 100%; object-fit: cover; }
.opportunities__logo { max-height: 40px; max-width: 140px; width: auto; margin: 0 auto; }

@keyframes opportunities-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .opportunities__track { animation: none; }
}

/* why choose — iconos verdes sin fondo circular, mas grandes */
.why-choose { padding: 60px 0; background: var(--gray-bg); text-align: center; }
.why-choose h2 { margin: 0 auto 8px; }
.why-choose__subtitle {
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--muted-2);
  margin: 0 auto 28px;
}
.why-choose__intro { margin: 0 auto 40px; text-align: center; }
.why-choose__intro p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 16px;
}
.why-choose__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
}
/* sin box-shadow y border-radius:10 (no 12) — verificado contra el sitio
   real, ahi no tiene sombra ninguna. */
.feature-card {
  background: var(--white);
  border-radius: 10px;
  padding: 20px;
  transition: box-shadow .3s;
}
/* sombra al hover (NO inset, a diferencia de .loan-card) y el titulo
   pasa a verde — verificado leyendo la regla :hover real del icon-box
   de Elementor (misma tarjeta reutilizada en "Why choose" del home y
   "Benefits of Refinancing" en refinance). */
.feature-card:hover { box-shadow: 0 0 10px rgba(0,0,0,.5); }
.feature-card:hover h3 { color: var(--green); }
.feature-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; margin-bottom: 14px;
}
.feature-card__icon svg { width: 60px; height: 60px; fill: var(--green); }
.feature-card h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 25px;
  color: var(--ink);
  margin: 0 0 10px;
}
.feature-card p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0;
}

@media (max-width: 980px) {
  .why-choose__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .why-choose__grid { grid-template-columns: 1fr; }
}

/* reviews — replica simplificada del widget de Trustindex/Google reviews
   real (ver CLAUDE.md): panel de perfil a la izquierda (25% del ancho,
   igual que `.ti-col-4 .ti-footer`) + slider de tarjetas a la derecha
   (75%). No integramos la libreria de Trustindex (requiere cuenta/API
   key de Avanti) — esto es HTML/CSS/JS propio con los mismos 10 reviews
   reales que trae el widget en vivo. */
.reviews { padding: 60px 0; text-align: center; }
/* titulo del widget de reviews ("See What Our Clients Are Saying About
   Us!" / "Financing Dreams, Building Futures." en home) — verificado
   con getComputedStyle a 1400px de ancho en 5 paginas reales: 45px/600
   en TODAS, pero color y alineacion varian por pagina:
   - Default (about, buy-a-home, refinance, loan-options): --green-dark, centrado.
   - /contact/: --green (brillante), no --green-dark — la unica excepcion de color.
   - /home (page-home): alineado a la IZQUIERDA (text-align:start), no centrado.
   Antes esta seccion no tenia NINGUNA regla de tamano/color para el
   h2 (heredaba el h2 por defecto del navegador). */
.reviews h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 45px;
  color: var(--green-dark);
  text-align: center;
  margin: 0 auto 40px;
}
.page-contact .reviews h2 { color: var(--green); }
.page-home .reviews h2 { text-align: left; margin: 0 0 40px; }
.reviews__intro {
  max-width: var(--content-wrap);
  margin: 0 auto 40px;
  color: var(--muted-2);
  line-height: 1.7;
}
.reviews__intro p { margin: 0 0 14px; }
.reviews__intro p:last-child { margin-bottom: 0; }

.reviews__widget {
  display: grid;
  /* minmax(0, 1fr), NO 1fr a secas: un track `1fr` tiene un minimo
     implicito de `auto`, que para un hijo flex con 10 tarjetas de ancho
     fijo es tan ancho como la suma de todas — el grid crecia para
     "no recortar" el contenido en vez de dejar que .reviews__viewport
     hiciera scroll, y el track se desbordaba fuera del .wrap (y de la
     pagina). minmax(0, 1fr) le permite al track encogerse al ancho
     disponible real. */
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  text-align: left;
  align-items: start;
}
.reviews__profile { text-align: center; padding-top: 8px; }
.reviews__avatar { width: 64px; height: 64px; border-radius: 50%; display: block; margin: 0 auto 10px; }
.reviews__profile-name { font-family: var(--font-head); font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.reviews__count { font-family: var(--font); font-size: 14px; color: var(--muted-2); margin: 6px 0 16px; }
.reviews__write-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  border: 1px solid #767676;
  border-radius: 5px;
  padding: 9px 16px;
}
.reviews__write-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.stars { display: inline-flex; gap: 2px; justify-content: center; }
.stars svg { width: 17px; height: 17px; fill: #F6BB06; }

.reviews__slider { position: relative; }
.reviews__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reviews__viewport::-webkit-scrollbar { display: none; }
.reviews__track { display: flex; gap: 16px; }
.review-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 260px;
  background: var(--gray-bg);
  border-radius: 12px;
  padding: 20px;
  margin: 0;
}
.review-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; position: relative; }
.review-card__avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
/* flex:1 1 auto + min-width:0 para que el nombre pueda encogerse dentro
   de la fila (el default es no encoger contenido de texto) y
   padding-right para reservarle espacio al icono de Google, que esta
   posicionado absolute — sin esas dos cosas el nombre largo crece hasta
   meterse debajo del icono en vez de truncar antes de llegar ahi. */
.review-card__meta { flex: 1 1 auto; min-width: 0; padding-right: 24px; }
.review-card__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-card__date { display: block; font-size: 12px; color: #6b6b6b; }
.review-card__google { position: absolute; top: 2px; right: 0; width: 20px; height: 20px; flex: 0 0 auto; }
.review-card__header .stars { margin-bottom: 5px; }
.review-card .stars { justify-content: flex-start; margin-bottom: 11px; }
.review-card__text {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card.is-expanded .review-card__text { -webkit-line-clamp: unset; overflow: visible; }
.review-card__more {
  display: block;
  margin-top: 8px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--ink);
  opacity: .5;
  background: none; border: none; padding: 0; cursor: pointer;
}
.review-card__more:hover { opacity: 1; text-decoration: underline; }

.reviews__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.reviews__nav svg { width: 11px; height: 11px; fill: #575757; }
.reviews__nav--prev { left: -17px; }
.reviews__nav--prev svg { transform: rotate(90deg); }
.reviews__nav--next { right: -17px; }
.reviews__nav--next svg { transform: rotate(-90deg); }

@media (max-width: 700px) {
  .reviews__widget { grid-template-columns: 1fr; }
  .review-card { width: 240px; }
}

/* cta final */
.cta-final { padding: 70px 0; }
.cta-final__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 40px;
}
.cta-final__content p {
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted-2);
  margin: 0 0 28px;
}
.cta-final__buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.cta-final__media img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .cta-final__grid { grid-template-columns: 1fr; }
}

/* ============ paginas internas (buy-a-home, refinance, ...) ============ */

/* heading verde reutilizable, mismo estilo que los <h2> del home pero sin
   quedar atado a `.page-home` — lo usan estas paginas via class="section-title" */
.section-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 45px);
  line-height: 1.15;
  color: var(--green-dark);
  margin: 0 0 16px;
}

.btn--sm { font-size: 15px; padding: 10px 22px; }

/* hero de pagina interna: FULL-BLEED — la seccion ocupa 100% del viewport
   (incluida la foto de fondo), y solo el contenido de adentro (.wrap) se
   limita a --content-wrap. No poner --content-wrap en la seccion misma. */
.page-hero {
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: var(--green-dark);
  text-align: center;
  padding: 70px 20px;
}
.page-hero__inner { max-width: var(--content-wrap); }
.page-hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(32px, 4.5vw, 50px);
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 20px;
}
.page-hero p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.6;
  color: var(--white);
  max-width: 760px;
  margin: 0 auto 28px;
}
.page-hero__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* el 2do boton del hero del hub de Loan Options ("Refinance") es blanco
   sin borde (no el .btn--outline con borde de 2px que ya existia) —
   verificado con getComputedStyle contra avantilending.com/loan-options/. */
.btn--white { background: var(--white); color: var(--green); }

/* intro corta debajo del hero (solo heading + un parrafo) */
.page-intro { padding: 50px 0 0; text-align: center; }
.page-intro .wrap { max-width: var(--content-wrap); }
.page-intro .section-title { margin: 0 auto 12px; }
.page-intro p {
  font-family: var(--font-head);
  font-size: 23px;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 760px;
  margin: 0 auto;
}

/* fila alternada imagen + texto (reutilizada por buy-a-home y refinance) */
.content-row { padding: 50px 0; }
.content-row__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  gap: 48px;
}
.content-row--reverse .content-row__grid { grid-template-columns: 1.1fr 1fr; }
.content-row--reverse .content-row__media { order: 2; }
.content-row__media img { width: 100%; height: auto; }
.row-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 45px);
  color: var(--ink-2);
  margin: 0 0 16px;
}
.content-row__content p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.content-row__content .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .content-row__grid, .content-row--reverse .content-row__grid { grid-template-columns: 1fr; }
  .content-row--reverse .content-row__media { order: -1; }
}

/* grid de tarjetas de opciones de prestamo (buy-a-home) — la seccion
   tiene fondo gris con tarjetas BLANCAS encima (al reves de como estaba
   antes: fondo blanco con tarjetas grises). Todo verificado contra
   avantilending.com/buy-a-home/ con getComputedStyle. */
.loan-options { padding: 50px 0; background: var(--gray-bg); text-align: center; }
.loan-options .section-title { margin: 0 auto 16px; }
.loan-options__intro {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  max-width: 820px;
  margin: 0 auto 36px;
}
.loan-options__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  text-align: left;
  margin-bottom: 36px;
}
.loan-card {
  flex: 1 1 540px;
  max-width: 560px;
  background: var(--white);
  border-radius: 20px;
  padding: 30px;
  /* contenido centrado (no a la izquierda) y sombra interna al hover —
     verificado con getComputedStyle/:hover en el sitio real, no era ni
     centrado ni tenia hover antes. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: box-shadow .3s;
}
.loan-card:hover { box-shadow: inset 0 0 10px rgba(0,0,0,.5); }
.loan-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 27px;
  color: var(--ink);
  margin: 0 0 10px;
}
.loan-card p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 18px;
}
/* el boton real de cada tarjeta es solido verde + mayusculas (no
   outline con texto normal) — reusa .btn pero con weight 500 (no 800)
   como en el sitio real. */
.loan-card .btn { font-weight: 500; text-transform: uppercase; }
.loan-options__outro {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  max-width: 820px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .loan-options__grid { grid-template-columns: 1fr; }
}

/* grid de beneficios (refinance) — reutiliza .feature-card del home */
.benefits { padding: 50px 0; background: var(--gray-bg); text-align: center; }
.benefits .section-title { margin: 0 auto 12px; }
.benefits__intro {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 auto 32px;
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 980px) {
  .benefits__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .benefits__grid { grid-template-columns: 1fr; }
}

/* ============ loan options: hub (/loan-options/) ============ */

/* 2 parrafos centrados debajo del hero, sin heading — verificado con
   getComputedStyle (fontSize/lineHeight/color) contra
   avantilending.com/loan-options/. */
.hub-intro { padding: 60px 0 10px; text-align: center; }
.hub-intro p {
  font-family: var(--font-head);
  font-size: 25px;
  line-height: 45px;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.hub-intro p:last-child { margin-bottom: 0; }

/* "Our Loan Products" y el CTA final del hub son verde brillante
   (--green), no verde oscuro como el resto de los .section-title/
   .row-title del sitio — verificado con getComputedStyle, es la unica
   pagina donde aparece esta variante. */
.section-title--bright { color: var(--green); }
.row-title--bright { color: var(--green); }

/* ============ loan options: subpaginas (conventional, dscr, ...) ============ */

/* columna de contenido (~700px) + barra lateral sticky (~380px) — misma
   proporcion que el sitio real (702px:378px dentro de los 1140px de
   --content-wrap), verificado con getBoundingClientRect. La barra
   lateral esta oculta en tablet/mobile en el sitio real
   (elementor-hidden-tablet/mobile), no solo apilada debajo. */
.loan-page { padding: 50px 0; }
.loan-page__grid {
  display: grid;
  grid-template-columns: 700px 1fr;
  gap: 60px;
  align-items: start;
}
.loan-page__content { min-width: 0; }
.loan-page__image { margin: 0 0 30px; }
.loan-page__image img { width: 100%; height: auto; }

/* h2/h3/h4 dentro del cuerpo se ven todos igual en el sitio real (35px
   800 --ink) — no hay jerarquia visual entre ellos, solo semantica. */
.loan-page__rich h1,
.loan-page__rich h2,
.loan-page__rich h3,
.loan-page__rich h4 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 35px;
  line-height: 1.15;
  color: var(--ink);
  margin: 32px 0 16px;
}
.loan-page__rich > h1:first-child,
.loan-page__rich > h2:first-child,
.loan-page__rich > h3:first-child,
.loan-page__rich > h4:first-child { margin-top: 0; }
/* Mortgage Process: TODOS los headings de seccion son verdes salvo el
   ultimo ("Choose a Trusted Mortgage Partner") — verificado con
   getComputedStyle leyendo el color del <mark>/<span> interior de cada
   heading real, no del heading en si (que hereda --ink). Ninguna otra
   pagina de contenido de este repo usa esta variante (las 12 subpaginas
   de loan-options son siempre --ink). */
.loan-page__rich .is-accent { color: var(--green); }
.loan-page__rich p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 16px;
  /* el sitio real usa <br> sueltos dentro de un mismo parrafo (ej. el
     hero del sidebar, o una fila de "Property eligibility" con 2 puntos
     unidos por <br>) — se guardan como "\n" en el JSON en vez de
     convertirlos a <br> a mano. */
  white-space: pre-line;
}
/* mini-titulo en negrita VERDE (viene de <mark> en el sitio real, ej.
   "Conforming loan" antes de su parrafo de explicacion) vs mini-titulo
   en negrita GRIS lisa (viene de <strong> suelto, ej. "DSCR loan
   requirements:") — 2 patrones reales distintos, verificado con
   getComputedStyle, no es el mismo estilo repetido. */
.loan-page__rich .subhead { font-weight: 700; color: var(--green); }
.loan-page__rich .label { font-weight: 600; color: var(--muted-2); }
.loan-page__rich ul { margin: 0 0 16px; padding-left: 22px; }
.loan-page__rich li {
  list-style: disc;
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--muted-2);
  white-space: pre-line;
}
.loan-page__rich li:not(:last-child) { margin-bottom: 6px; }
.loan-page__rich a { color: inherit; text-decoration: underline; }

/* caja gris reutilizada como CTA inline en el cuerpo (centrada) y como
   panel sticky de la barra lateral (alineado a la izquierda) — mismo
   fondo/padding/radio en el sitio real, verificado con getComputedStyle. */
.quote-box {
  background: var(--gray-bg);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  margin: 30px 0;
}
.quote-box h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 14px;
  white-space: pre-line;
}
.quote-box p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 20px;
  white-space: pre-line;
}
/* boton mas chico que el .btn base (18px/500, no 23px/800) — verificado
   con getComputedStyle, es la unica variante de boton solido del sitio
   con este tamano/peso. */
.quote-box .btn--quote { font-size: 18px; font-weight: 500; }

/* el h2/p de la version sidebar SI van centrados, igual que la version
   inline de .quote-box — verificado con getComputedStyle contra el
   sitio real (una nota anterior decia "alineada a la izquierda", pero
   esa medicion se hizo con la ventana angosta y era incorrecta). */
.loan-sidebar__box { margin: 0; }
.loan-sidebar__box .btn--quote { width: 100%; text-align: center; }
/* sticky con el mismo offset (160px) que usa el sitio real
   (data-sticky_offset) — se oculta por completo en tablet/mobile, igual
   que en produccion (elementor-hidden-tablet/mobile), no se apila debajo
   del contenido. */
.loan-sidebar { position: sticky; top: 160px; align-self: start; }

@media (max-width: 900px) {
  .loan-page__grid { grid-template-columns: 1fr; }
  .loan-sidebar { display: none; }
}

/* ============ About (/about/) y Contact (/contact/) ============ */

/* el h1 de estas 2 paginas es 600 (no 800 como el resto de .page-hero) —
   verificado con getComputedStyle contra el sitio real. Selector con el
   elemento para ganarle en especificidad a ".page-hero h1". */
.page-hero h1.page-hero__title--regular { font-weight: 600; }

/* midCtaSection ahora pide columnas 1:1 (bug real ya corregido, ver
   _generator-lib.js → midCtaSection) en vez del 1:1.1 de content-row. */
.content-row--equal .content-row__grid,
.content-row--equal.content-row--reverse .content-row__grid { grid-template-columns: 1fr 1fr; }

/* Bug real (corregido): esta regla 1fr/1fr tiene mas especificidad
   (2 clases) que la del media query mobile de arriba (.content-row__grid,
   1 clase), asi que le ganaba a TODOS los anchos — imagen y texto
   quedaban apretados 1:1 incluso en mobile (texto envolviendo palabra
   por palabra). Afecta a cualquier fila con equalCols:true: midCtaSection
   (Buy A Home, Refinance, Loan Options hub, Local Customers, About) y
   las 7 filas de Living in Florida. Mismo breakpoint que el resto de
   .content-row, declarado despues para ganar por orden de aparicion
   ya que la especificidad es igual. */
@media (max-width: 900px) {
  .content-row--equal .content-row__grid,
  .content-row--equal.content-row--reverse .content-row__grid { grid-template-columns: 1fr; }
}

/* parrafo izquierda + heading centrado debajo — NO es el mismo patron
   centrado-todo de .welcome (home). Verificado con getComputedStyle. */
.about-intro { padding: 70px 0 0; }
.about-intro .wrap { max-width: var(--content-wrap); }
.about-intro p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 24px;
}
.about-intro h2 { text-align: center; white-space: pre-line; }

/* bio de cada loan officer: foto (radio 15px, excepcion real confirmada)
   izquierda + nombre/cargo/parrafos derecha, columnas 1:1. */
.about-bio { padding: 50px 0; }
.about-bio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 48px;
}
.about-bio__media img { width: 100%; height: auto; border-radius: 15px; }
.about-bio__content h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  color: var(--ink);
  margin: 0 0 8px;
}
.about-bio__content h3 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 25px;
  color: var(--ink-2);
  margin: 0 0 16px;
  white-space: pre-line;
}
.about-bio__content p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 16px;
}
@media (max-width: 900px) {
  .about-bio__grid { grid-template-columns: 1fr; }
}

/* "Our Mission" (centrado) + "Our Values" (grid de 4 feature-card,
   mismo componente visual que "Why choose Avanti Lending?" del home). */
.mission-values { padding: 60px 0; text-align: center; }
.mission-values .wrap { max-width: var(--content-wrap); }
.mission-values__mission {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  max-width: 900px;
  margin: 0 auto 40px;
}
.mission-values__values-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 35px;
  color: var(--ink-2);
  margin: 0 0 32px;
}
.mission-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mission-values__grid .feature-card { text-align: center; }
@media (max-width: 900px) {
  .mission-values__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mission-values__grid { grid-template-columns: 1fr; }
}

/* "Why Avanti Lending?": foto (radio 0, el default del sitio) izquierda +
   heading (.section-title alineado a la izquierda aca) + parrafo 19px +
   lista con labels en negrita — NO reutiliza .content-row__content p
   (20px/--ink-2), es un tamano/color propio verificado con getComputedStyle. */
.why-avanti { padding: 50px 0; }
.why-avanti__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.why-avanti__media img { width: 100%; height: auto; }
.why-avanti__content .section-title { text-align: left; }
.why-avanti__content p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 8px;
}
.why-avanti__content ul { margin: 15px 0; padding-left: 20px; }
.why-avanti__content li {
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.8;
  color: var(--muted-2);
}
.why-avanti__content li strong { font-weight: 600; }
@media (max-width: 900px) {
  .why-avanti__grid { grid-template-columns: 1fr; }
}

/* contadores animados: tarjeta gris (--gray-bg, radio 20px) con icono
   verde 60x60 arriba, numero grande y label verde abajo — verificado
   con getComputedStyle contra avantilending.com/about/ (antes esta
   tarjeta no tenia fondo ni icono). Los valores de data-to-value
   (352/630/12/22) son los reales del sitio, la animacion de conteo
   vive en script.js. */
.counters { padding: 60px 0; }
.counters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.counters__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--gray-bg);
  border-radius: 20px;
  padding: 30px;
}
.counters__item svg { width: 60px; height: 60px; fill: var(--green); margin-bottom: 12px; }
.counters__label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--green);
  margin-top: 8px;
}
.counters__value {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 70px;
  color: var(--ink);
}
@media (max-width: 900px) {
  .counters__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .counters__grid { grid-template-columns: 1fr; }
}

/* El iframe del formulario (services.bestmarketingtalent.com, el CRM de
   Avanti) se saco a pedido del usuario — solo queda el parrafo de
   intro. Nota real: en produccion ese mismo iframe (y un formulario
   nativo de respaldo) ya quedaban ocultos con display:none a TODO
   ancho por un bug de configuracion de Elementor (elementor-hidden-
   desktop/tablet/mobile las 3 a la vez), asi que sacarlo aca termina
   siendo MAS fiel al comportamiento real que tenerlo visible. */
.contact-intro { padding: 60px 0; text-align: center; }
.contact-intro__grid { max-width: var(--content-wrap); }
.contact-intro p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 32px;
}

/* franja verde brillante full-bleed (--green, NO --green-dark) con
   Direccion/Telefono en blanco — verificado con getComputedStyle. */
.contact-info { width: 100%; background: var(--green); padding: 64px 20px; }
.contact-info__grid {
  max-width: var(--content-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
/* linea divisoria blanca 1px entre "Address" y "Phone" — el sitio real
   no tiene gap entre columnas, las 2 mitades se tocan y la linea vive
   justo en ese borde compartido (verificado con getBoundingClientRect:
   right del item 1 == left del item 2, sin gap). */
.contact-info__item:first-child { border-right: 1px solid var(--white); }
.contact-info__icon { display: inline-flex; margin-bottom: 14px; }
.contact-info__icon svg { width: 50px; height: 50px; fill: var(--white); }
.contact-info__item h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 25px;
  color: var(--white);
  margin: 0 0 10px;
}
.contact-info__item p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--white);
  margin: 0;
}
.contact-info__item a { color: inherit; text-decoration: none; }
@media (max-width: 640px) {
  .contact-info__grid { grid-template-columns: 1fr; }
}

/* Google Maps embebido full-bleed, 500px de alto — mismo iframe que el
   sitio real (maps.google.com/maps?...&output=embed), no una imagen. */
.contact-map iframe { width: 100%; height: 500px; border: 0; display: block; }

/* ============ Blog (import de WordPress — ver CLAUDE.md) ============ */

/* hero de post: mismo componente .page-hero que Buy A Home/Refinance/
   Loan Options, con la imagen destacada real del post de fondo. A
   diferencia de esas paginas (fotos elegidas a mano, ya oscuras), las
   fotos del blog son fotos de stock variadas — se suma un velo oscuro
   semitransparente (--green-dark al 55%) para que el texto blanco siga
   siendo legible sin importar la foto. El h1 real es 55px/600 (no 800
   como el resto de .page-hero) — verificado con getComputedStyle. */
.blog-hero { position: relative; }
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 81, 52, .55);
}
.blog-hero .page-hero__inner { position: relative; z-index: 1; }
.blog-hero h1 { font-size: 55px; font-weight: 600; }
/* breadcrumb real: fuente Roboto Slab (tema OceanWP), ~12px — distinto
   del resto del sitio (Roboto). Verificado con getComputedStyle. */
.blog-hero p.blog-breadcrumb {
  font-family: var(--font-slab);
  font-size: 12px;
  color: var(--white);
  margin: 0;
  max-width: none;
}
.blog-breadcrumb a { color: inherit; text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb__sep { margin: 0 6px; opacity: .8; }

/* Layout real (verificado con getBoundingClientRect contra un post y
   contra /blog/ en vivo): columna de contenido ~700px + sidebar sticky
   ~360px dentro de los mismos 1140px de --content-wrap — EXACTAMENTE el
   mismo layout/CTA ("Fast and Easy Custom Rate Quotes" -> /contact/) que
   ya existe como `.loan-page__grid`/`.quote-box` para las 12 subpaginas
   de loan-options, por eso blogPostSection/blogIndexSection reusan esas
   clases en vez de duplicar CSS. Solo se pisa el padding (.loan-page
   trae 50px 0 que ya sirve tal cual).
   Tipografia del cuerpo (h2/h3/h4/p/li) es MAS CHICA que la de
   loan-page__rich (pensada para las subpaginas) — por eso se define acá
   scopeada a .blog-post/.blog-index, sin usar la clase .loan-page__rich. */
.blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-size: 14px;
  color: #54595f;
}
.blog-post__meta span { display: inline-flex; align-items: center; gap: 8px; }
.blog-post__meta svg { width: 14px; height: 14px; fill: #6ec1e4; }

/* acordeon de la tabla de contenidos — colapsada por defecto, fiel al
   plugin real (Easy Table of Contents): caja ANGOSTA (ancho segun su
   contenido, NO ancho completo), fondo casi blanco, borde gris claro y
   sombra sutil — verificado con getComputedStyle contra un post real
   (bg #f9f9f9, border 1px solid #aaa, radius 4px, shadow 0 1px 1px
   rgba(0,0,0,.05)). Antes esta caja era gris y ancho completo, mal. */
.blog-toc {
  display: table;
  background: #f9f9f9;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  padding: 10px 20px 10px 10px;
  margin: 0 0 20px;
}
.blog-toc__title-row { display: flex; align-items: center; gap: 16px; }
.blog-toc__title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 500;
  color: #555555;
  margin: 0;
  white-space: nowrap;
}
/* Bug real (corregido): ".blog-post .loan-page__content p" (mas abajo
   en el archivo, 3 selectores de especificidad 0-2-1) le pisaba el
   "margin:0" de arriba (0-1-0) — el titulo del acordeon (un <p> real)
   quedaba con margin-bottom:18px heredado de esa regla generica, lo que
   corria el texto hacia arriba ~9px respecto de los iconos dentro de la
   fila flex (el boton no tiene ese margen asimetrico, asi que
   align-items:center los centraba en cajas de alto distinto). Se
   resuelve con un selector mas especifico que el generico, no con
   !important. */
.blog-post .loan-page__content .blog-toc__title { margin: 0; }
.blog-toc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
}
.blog-toc__toggle svg:first-child { width: 20px; height: 20px; fill: #999; }
.blog-toc__toggle svg:last-child { width: 10px; height: 10px; fill: #999; }
.blog-toc__list { margin-top: 10px; }
.blog-toc__list ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.blog-toc__list > ul { padding-left: 0; }
.blog-toc__list li { margin: 0 0 6px; }
.blog-toc__list a {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  color: #444444;
  text-decoration: none;
}
.blog-toc__list a:hover { text-decoration: underline; }

/* cuerpo del post — tamaños reales verificados con getComputedStyle
   contra un post en vivo (bastante mas chicos que .loan-page__rich). */
.blog-post .loan-page__content h2,
.blog-post .loan-page__content h3,
.blog-post .loan-page__content h4 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.4;
  margin: 28px 0 14px;
}
.blog-post .loan-page__content h2:first-child,
.blog-post .loan-page__content h3:first-child,
.blog-post .loan-page__content h4:first-child { margin-top: 0; }
.blog-post .loan-page__content h2 { font-size: 20px; }
.blog-post .loan-page__content h3 { font-size: 18px; }
.blog-post .loan-page__content h4 { font-size: 17px; }
.blog-post .loan-page__content p {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  color: #555555;
  margin: 0 0 18px;
}
.blog-post .loan-page__content ul,
.blog-post .loan-page__content ol { margin: 0 0 18px; padding-left: 24px; }
.blog-post .loan-page__content li {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  color: #555555;
  margin-bottom: 8px;
}
.blog-post .loan-page__content a { color: var(--green-dark); text-decoration: underline; }
.blog-post .loan-page__content audio { width: 100%; margin: 0 0 24px; }
.blog-post__image { margin: 0 0 24px; }
.blog-post__image img { width: 100%; height: auto; border-radius: 8px; }
.blog-post__image figcaption {
  font-family: var(--font-head);
  font-size: 13px;
  color: #888;
  margin-top: 6px;
}

/* navegacion Prev/Next entre posts (cronologica, mismo idioma) — ocupa
   el ancho completo de 1140px (no solo la columna de contenido),
   verificado con getBoundingClientRect. */
.blog-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: var(--content-wrap);
  margin: 20px auto 0;
  padding: 24px 20px 0;
  border-top: 1px solid var(--gray-bg);
}
.blog-post-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #54595f;
}
.blog-post-nav__link--next { justify-content: flex-end; text-align: right; }
.blog-post-nav__link svg { width: 12px; height: 12px; fill: #54595f; flex-shrink: 0; }
.blog-post-nav__label {
  display: block;
  font-family: var(--font-head);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7a7a7a;
  margin-bottom: 4px;
}
.blog-post-nav__title {
  display: block;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .blog-post-nav { grid-template-columns: 1fr; }
  .blog-post-nav__link--next { justify-content: flex-start; text-align: left; }
}

/* ---- listado /blog/ y /es/blog-es/ ---- */

/* hero generico del archivo — foto full-bleed (misma que
   loan-options-hero.webp) + el texto del CTA en una sola linea,
   centrado, 50px/600 blanco. Altura real: `min-height:60vh` (60% del
   alto del VIEWPORT, no un px fijo) — verificado midiendo 3 anchos
   distintos contra el sitio real (1400x1000->600px, 1024x768->460.8px,
   767x900->540px: siempre exactamente 60% del alto de cada prueba). Un
   `height:600px` fijo se ve desproporcionado en ventanas mas bajas.
   Distinto del hero de un post individual (que usa la foto destacada
   de CADA post + el h1 real del titulo, ese si con min-height fijo). */
.blog-index-hero {
  width: 100%;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-size: cover;
  background-position: center;
  background-color: var(--green-dark);
  padding: 0 20px;
}
.blog-index-hero__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
  max-width: 900px;
  margin: 0;
}

/* H1 real es texto plano "Blog" (40px/700/--ink), sin foto de fondo —
   verificado con getComputedStyle contra el sitio real (fondo
   transparente). Comparte el mismo layout de 2 columnas + sidebar que
   el post individual (ver comentario arriba de .blog-post__meta). */
.blog-index__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  color: var(--ink);
  margin: 0 0 32px;
}
/* grid de 2 columnas DENTRO de la columna de contenido (~700px, no los
   1140px completos) — cada tarjeta mide ~326px con ~30px de gap,
   verificado con getBoundingClientRect contra /blog/ en vivo. */
.blog-index__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.blog-card { display: flex; flex-direction: column; }
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 16px 0 0; }
.blog-card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: #54595f;
  margin: 0 0 6px;
}
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { text-decoration: underline; }
.blog-card__date {
  font-family: var(--font-slab);
  font-size: 12px;
  color: #adadad;
  margin: 0 0 10px;
}
.blog-card__excerpt {
  font-family: var(--font-head);
  font-size: 14px;
  line-height: 1.5;
  color: #777777;
  margin: 0 0 10px;
}
.blog-card__more {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  color: #61ce70;
  text-decoration: none;
}
.blog-card__more:hover { text-decoration: underline; }

@media (max-width: 500px) {
  .blog-index__grid { grid-template-columns: 1fr; }
}

/* Pagination real (verificado con getComputedStyle): nada de botones ni
   fondo — solo numeros en texto plano (Roboto Slab, 14px, #333),
   separados por un margen chico, centrados. El numero actual no se
   distingue con otro color/bg, simplemente no es un link. */
.blog-pagination { margin-top: 40px; text-align: center; }
.blog-pagination ul { display: inline; list-style: none; margin: 0; padding: 0; }
.blog-pagination li { display: inline; }
.blog-pagination a, .blog-pagination span {
  font-family: var(--font-slab);
  font-size: 14px;
  color: #333333;
  text-decoration: none;
  margin-right: 5px;
}
.blog-pagination a:hover { text-decoration: underline; }

/* ============ paginas legales (/terms-of-use/, /privacy-policy/, /tcpa-consent-privacy/) ============ */

/* sin hero/foto, sin sidebar — una sola columna de --content-wrap
   (1140px), verificado con getBoundingClientRect contra /terms-of-use/
   en vivo. El sitio real no tiene un <h1> real en estas paginas (mismo
   issue de SEO que las 12 subpaginas de loan-options) — este repo si
   emite uno semantico, con un tamano propio (40px/700) ya que el resto
   del cuerpo (h2/h3/h4) usa un tamano chato de 35px/600 sin jerarquia
   visual entre niveles (verificado con getComputedStyle). */
.legal-page { padding: 50px 0 60px; }
.legal-page__wrap { max-width: var(--content-wrap); }
.legal-page__wrap h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  color: var(--ink);
  margin: 0 0 24px;
}
.legal-page__wrap h2,
.legal-page__wrap h3,
.legal-page__wrap h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 35px;
  line-height: 1.4;
  color: #222222;
  margin: 32px 0 16px;
}
.legal-page__wrap h2:first-child,
.legal-page__wrap h3:first-child,
.legal-page__wrap h4:first-child { margin-top: 0; }
.legal-page__wrap p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: #555555;
  margin: 0 0 18px;
}
.legal-page__wrap ul, .legal-page__wrap ol { margin: 0 0 18px; padding-left: 24px; }
.legal-page__wrap li {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: #555555;
  margin-bottom: 8px;
}
.legal-page__wrap a { color: var(--green-dark); text-decoration: underline; }

/* ============ Living in Florida: parrafo de intro sin heading ============ */

/* alineado a la izquierda, 19px/Roboto/--muted-2 — MISMA tipografia que
   .why-avanti__content p (home/about), NO el patron centrado de
   .page-intro (que trae heading). Verificado con getComputedStyle
   contra avantilending.com/living-in-florida/. */
.page-lead { padding: 50px 0 0; }
.page-lead .wrap { max-width: var(--content-wrap); }
.page-lead p {
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.8;
  color: var(--muted-2);
  margin: 0 0 20px;
}

/* ============ FAQs: acordeon nativo <details>/<summary> ============ */

/* cerrado: fondo --gray-bg, texto/icono --ink. Abierto (atributo [open],
   nativo de <details>): fondo --green, texto/icono blancos. Radio 10px
   en el <summary> (no en el <details> completo — el area de respuesta
   no lleva fondo ni radio propios). Verificado con getComputedStyle
   contra avantilending.com/faqs/. */
.faq { padding: 50px 0 60px; }
.faq .wrap { max-width: var(--content-wrap); }
.faq__item { margin-bottom: 25px; }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  background: var(--gray-bg);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__item[open] > .faq__question {
  background: var(--green);
  color: var(--white);
  border-radius: 10px 10px 0 0;
}
.faq__icon { width: 13px; height: 13px; flex-shrink: 0; fill: currentColor; }
.faq__icon--minus { display: none; }
.faq__item[open] .faq__icon--plus { display: none; }
.faq__item[open] .faq__icon--minus { display: block; }
.faq__answer { padding: 10px; }
.faq__answer p {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}
.faq__answer a { color: inherit; text-decoration: underline; }

/* ============ Mortgage Calculator: widget interactivo ============ */

/* Reimplementacion 100% client-side del widget real (embebido como
   iframe en avantilending.com desde pfsrealty.com/calculadora, un
   dominio hermano del mismo grupo) — HTML/CSS/logica calcados del
   original (ver comentario de mortgageCalculatorSection en
   _generator-lib.js). Paleta propia del widget (dorado/azul), a
   proposito distinta del verde de marca de Avanti: asi se ve tambien en
   la pagina real (el iframe no esta re-skineado), verificado con
   getComputedStyle contra pfsrealty.com/calculadora. */
.mortgage-calc-wrap { padding: 60px 0; }
.mortgage-calc-wrap .wrap { max-width: var(--content-wrap); }
.mortgage-calc {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(7, 32, 49, .08);
  border-top: 4px solid #AA9664;
}
.mortgage-calc h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 18.88px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #072031;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #D1D8E5;
  position: relative;
}
.mortgage-calc h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 44px; height: 3px;
  background: #AA9664;
}
.mortgage-calc__body {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 8px;
}
.mortgage-calc__viz { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mortgage-calc__donut {
  width: 200px; height: 200px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(#2A6FDB 0deg, #2A6FDB 360deg);
  position: relative;
  transition: background .3s;
}
.mortgage-calc__donut::after {
  content: "";
  position: absolute;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: #FFFFFF;
}
.mortgage-calc__donut span, .mortgage-calc__donut small { position: relative; z-index: 1; }
.mortgage-calc__donut span { font-family: "Montserrat", sans-serif; font-size: 1.4rem; font-weight: 800; color: #072031; }
.mortgage-calc__donut small { font-family: "Montserrat", sans-serif; font-size: .8rem; color: #5A7187; }
.mortgage-calc__legend { list-style: none; display: flex; flex-direction: column; gap: 11px; width: 100%; margin: 0; padding: 0; }
.mortgage-calc__legend li { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-size: .9rem; color: #3A566B; }
.mortgage-calc__legend i { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.mortgage-calc__legend span { flex: 1; }
.mortgage-calc__legend b { color: #072031; font-weight: 700; }
.mortgage-calc__form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mortgage-calc__grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; min-width: 0; }
.mortgage-calc__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mortgage-calc__field > span { font-family: "Montserrat", sans-serif; font-size: .82rem; font-weight: 700; color: #072031; }
.mortgage-calc__input {
  display: flex; align-items: center;
  border: 1px solid #D1D8E5;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  transition: border-color .2s;
}
.mortgage-calc__input:focus-within { border-color: #AA9664; }
.mortgage-calc__input input {
  flex: 1; min-width: 0;
  border: 0;
  padding: 12px 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: #072031;
  outline: none;
  background: none;
}
.mortgage-calc__input input::-webkit-outer-spin-button,
.mortgage-calc__input input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.mortgage-calc__input em { padding: 0 14px; color: #9AA8B6; font-style: normal; }
.mortgage-calc__duo { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; min-width: 0; }
.mortgage-calc__duo .mortgage-calc__input input { padding-left: 10px; padding-right: 4px; }
.mortgage-calc__duo .mortgage-calc__input em { padding: 0 10px 0 2px; }
.mortgage-calc__disc { margin-top: 18px; font-size: .74rem; color: #8A99A8; line-height: 1.5; }

@media (max-width: 768px) {
  .mortgage-calc__body { grid-template-columns: 1fr; gap: 30px; }
  .mortgage-calc__donut { width: 170px; height: 170px; }
  .mortgage-calc__donut::after { width: 110px; height: 110px; }
}
@media (max-width: 480px) {
  .mortgage-calc__grid2 { grid-template-columns: 1fr; }
  .mortgage-calc { padding: 16px; }
}

/* ============================================================
   SITEMAP — Pagina visual e interactiva premium
   ============================================================ */

.sitemap-hero {
  background: linear-gradient(135deg, #0D5134 0%, #062618 100%);
  color: var(--white);
  padding: 65px 0 55px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sitemap-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 180%;
  background: radial-gradient(circle at 50% 40%, rgba(36, 166, 55, 0.2) 0%, transparent 65%);
  pointer-events: none;
}
.sitemap-hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.sitemap-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px);
  color: #E2F5E7;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.sitemap-hero__badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.sitemap-hero h1 {
  font-family: var(--font-display);
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--white);
  letter-spacing: -0.02em;
}
.sitemap-hero p {
  font-family: var(--font);
  font-size: 1.12rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 auto 32px;
  max-width: 720px;
}

/* Buscador en vivo */
.sitemap-search-wrap {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}
.sitemap-search-input {
  width: 100%;
  padding: 17px 52px 17px 54px;
  border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.98);
  font-family: var(--font);
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
  transition: all 0.25s ease;
}
.sitemap-search-input:focus {
  background: var(--white);
  border-color: var(--green);
  box-shadow: 0 16px 40px rgba(36, 166, 55, 0.35);
}
.sitemap-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: #666666;
  pointer-events: none;
}
.sitemap-search-clear {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: #ECECEC;
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #444444;
  font-size: 15px;
  font-weight: bold;
  transition: all 0.2s;
}
.sitemap-search-clear:hover {
  background: #D5D5D5;
  color: #000000;
}

/* Featured / Fast-Track Hubs */
.sitemap-fast-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.sitemap-hub-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--white);
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}
.sitemap-hub-card:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.sitemap-hub-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(36, 166, 55, 0.4);
}
.sitemap-hub-card__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.sitemap-hub-card__info {
  text-align: left;
}
.sitemap-hub-card__title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 3px;
}
.sitemap-hub-card__sub {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.3;
}

/* Barra de controles / vistas */
.sitemap-meta-bar {
  background: var(--white);
  border-bottom: 1px solid #E2E8F0;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}
.sitemap-meta-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.sitemap-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sitemap-view-switch {
  display: inline-flex;
  background: #EDF2F7;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid #CBD5E0;
}
.sitemap-view-btn {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 700;
  color: #4A5568;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.sitemap-view-btn.active {
  background: var(--white);
  color: var(--green-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.sitemap-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sitemap-filter-btn {
  background: #F7FAFC;
  border: 1px solid #E2E8F0;
  color: #4A5568;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sitemap-filter-btn:hover {
  background: #E2E8F0;
  color: #1A202C;
}
.sitemap-filter-btn.active {
  background: var(--green-dark);
  color: var(--white);
  border-color: var(--green-dark);
}
.sitemap-counter {
  font-family: var(--font-head);
  font-size: 0.92rem;
  color: #64748B;
  font-weight: 500;
}
.sitemap-counter strong {
  color: var(--green-dark);
  font-weight: 800;
}

/* Contenedor principal de contenidos */
.sitemap-content {
  padding: 45px 0 80px;
  background: #F8FAF9;
  min-height: 520px;
}
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 28px;
  align-items: start;
}

/* Tarjetas por categoría */
.sitemap-card {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid #E2ECE5;
  box-shadow: 0 6px 20px rgba(13, 81, 52, 0.05);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}
.sitemap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(13, 81, 52, 0.1);
  border-color: #B5DCBD;
}
.sitemap-card.hidden {
  display: none !important;
}

.sitemap-card__header {
  background: linear-gradient(180deg, #FAFCFA 0%, #F1F6F2 100%);
  padding: 18px 22px;
  border-bottom: 1px solid #E2ECE5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sitemap-card__title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sitemap-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(36, 166, 55, 0.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sitemap-card__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.sitemap-card__title {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0;
}
.sitemap-card__count {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  background: #E4F4E7;
  color: #157A27;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid #C5E5CB;
}

/* Lista de enlaces enriquecida dentro de tarjeta */
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.sitemap-item {
  border-bottom: 1px solid #F1F5F2;
  transition: background 0.15s;
}
.sitemap-item:last-child {
  border-bottom: 0;
}
.sitemap-item.hidden {
  display: none !important;
}
.sitemap-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  color: #2D3748;
  text-decoration: none;
  font-family: var(--font);
  transition: all 0.2s ease;
  gap: 14px;
}
.sitemap-link:hover {
  background: #F3F9F4;
  color: var(--green-dark);
  padding-left: 26px;
}
.sitemap-link-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.sitemap-link-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sitemap-link-text {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
  color: #1A202C;
}
.sitemap-link:hover .sitemap-link-text {
  color: var(--green-dark);
}
.sitemap-badge {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
  background: #EBF4EE;
  color: #248A37;
  border: 1px solid #D2EBD7;
}
.sitemap-badge--blog {
  background: #EDF2F7;
  color: #4A5568;
  border-color: #E2E8F0;
}
.sitemap-badge--legal {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FDE68A;
}
.sitemap-link-desc {
  font-size: 0.83rem;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}
.sitemap-link-arrow {
  width: 14px;
  height: 14px;
  fill: #A0AEC0;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.2s, fill 0.2s, opacity 0.2s;
}
.sitemap-link:hover .sitemap-link-arrow {
  transform: translateX(4px);
  fill: var(--green);
  opacity: 1;
}

/* ============================================================
   VISTA ÁRBOL JERÁRQUICO / ORGANIGRAMA VISUAL (.sitemap-tree)
   ============================================================ */

.sitemap-tree-view {
  display: none;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid #E2ECE5;
  box-shadow: 0 8px 30px rgba(13, 81, 52, 0.06);
  padding: 40px 30px;
}
.sitemap-tree-view.active {
  display: block;
}
.sitemap-tree-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 35px;
}
.sitemap-tree-header h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--green-dark);
  margin: 0 0 8px;
}
.sitemap-tree-header p {
  color: #64748B;
  font-size: 0.95rem;
  margin: 0;
}

/* Nodo Raíz */
.sitemap-tree-root {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.sitemap-tree-node-root {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0D5134 0%, #157A27 100%);
  color: var(--white);
  padding: 12px 26px;
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(13, 81, 52, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.sitemap-tree-node-root:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 25px rgba(13, 81, 52, 0.35);
}

/* Ramas del árbol */
.sitemap-tree-branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.sitemap-tree-branch {
  background: #FAFCFA;
  border: 1px solid #E2EAE4;
  border-radius: 14px;
  padding: 20px;
  position: relative;
  transition: all 0.2s;
}
.sitemap-tree-branch:hover {
  border-color: #B5DCBD;
  box-shadow: 0 6px 18px rgba(13, 81, 52, 0.05);
}
.sitemap-tree-branch__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #E8F2EA;
}
.sitemap-tree-branch__title svg {
  width: 18px;
  height: 18px;
  fill: var(--green);
}

/* Nodos hijos */
.sitemap-tree-node-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 2px solid #D5E7DA;
}
.sitemap-tree-node-item {
  position: relative;
  margin-bottom: 12px;
  padding-left: 14px;
}
.sitemap-tree-node-item:last-child {
  margin-bottom: 0;
}
.sitemap-tree-node-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 12px;
  width: 14px;
  height: 2px;
  background: #D5E7DA;
}
.sitemap-tree-node-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid #E2E8F0;
  padding: 6px 12px;
  border-radius: 8px;
  color: #2D3748;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.sitemap-tree-node-link:hover {
  background: #EAF5ED;
  border-color: var(--green);
  color: var(--green-dark);
  transform: translateX(3px);
}

/* Estado sin resultados */
.sitemap-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border-radius: 14px;
  border: 1px dashed #CBD5E1;
  margin-top: 20px;
}
.sitemap-empty svg {
  width: 48px;
  height: 48px;
  fill: #94A3B8;
  margin-bottom: 16px;
}
.sitemap-empty h3 {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: #334155;
  margin: 0 0 8px;
}
.sitemap-empty p {
  color: #64748B;
  font-size: 0.95rem;
  margin: 0;
}

/* XML Direct Link Callout */
.sitemap-xml-box {
  margin-top: 45px;
  background: #FFFFFF;
  border: 1px solid #D8E6DC;
  border-left: 5px solid var(--green);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(13, 81, 52, 0.04);
}
.sitemap-xml-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sitemap-xml-icon {
  width: 36px;
  height: 36px;
  color: var(--green);
  flex-shrink: 0;
}
.sitemap-xml-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.sitemap-xml-text h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 4px;
}
.sitemap-xml-text p {
  font-size: 0.9rem;
  color: #64748B;
  margin: 0;
}
.sitemap-xml-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #EBF6EE;
  color: var(--green-dark);
  border: 1px solid #B4DDBB;
  padding: 11px 20px;
  border-radius: 10px;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.sitemap-xml-btn:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  box-shadow: 0 4px 12px rgba(36, 166, 55, 0.3);
}
.sitemap-xml-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 900px) {
  .sitemap-fast-track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sitemap-hero { padding: 45px 0 35px; }
  .sitemap-hero h1 { font-size: 2.1rem; }
  .sitemap-fast-track { grid-template-columns: 1fr; }
  .sitemap-grid { grid-template-columns: 1fr; }
  .sitemap-meta-bar .wrap { flex-direction: column; align-items: stretch; }
  .sitemap-controls-left { flex-direction: column; align-items: stretch; }
  .sitemap-filters { overflow-x: auto; padding-bottom: 4px; }
  .sitemap-tree-view { padding: 25px 15px; }
  .sitemap-tree-branches { grid-template-columns: 1fr; }
}