/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/
/* ===== Heartwood Global Colors (paleta de marca) ===== */
:root, .fusion-body {
  --awb-color1: #EFEAE4; /* Oyster (fondo claro) */
  --awb-color2: #BAC3CB; /* River Stone */
  --awb-color3: #CEC439; /* Saltmarsh Green */
  --awb-color4: #6D7EA0; /* Veranda Blue */
  --awb-color5: #424B0A; /* Boxwood Green */
  --awb-color6: #002942; /* Deepwater Blue */
  --awb-color7: #E54511; /* Town Square (CTA) */
  --awb-color8: #19180C; /* Off Black (texto) */
  --awb-color9: #38251C; /* Heart Pine */
}

/* Ocultar el footer nativo de Avada (el de widgets de Theme Options).
   OJO: el footer de Avada Layouts se pinta con las clases
   `fusion-tb-footer fusion-footer`, así que la regla de antes
   (`.fusion-footer{display:none}`) también se lo comía y el sitio quedaba
   SIN footer. El :not() es lo único que separa uno del otro. */
.fusion-footer:not(.fusion-tb-footer){display:none !important}
/* Dentro del footer de Layouts, el envoltorio de widgets hereda el fondo y
   los paddings de Theme Options; aquí manda la sección. */
.fusion-tb-footer .fusion-footer-widget-area{
  background:none !important;border:0 !important;padding:0 !important}
/* Contraste del menú del nav sobre Boxwood */
.fusion-menu-element .fusion-menu > li > a,
.fusion-menu-element .fusion-menu > li > a .menu-text { color: #EFEAE4 !important; }

/* Links de menú (nav + footer) en Oyster sobre Boxwood */
.fusion-menu-element a, .fusion-menu-element a .menu-text,
.fusion-menu-element .fusion-menu li a { color: #EFEAE4 !important; }
.fusion-menu-element a:hover, .fusion-menu-element .fusion-menu li a:hover { color: #CEC439 !important; }

/* Selector correcto del menú Avada nuevo (.awb-menu) */
.awb-menu__main-a, .awb-menu__main-a .menu-text, .awb-menu a { color: #EFEAE4 !important; }
.awb-menu__main-a:hover, .awb-menu__main-a:hover .menu-text, .awb-menu a:hover { color: #CEC439 !important; }

/* ===== Home HERO — Avada elements + CSS a medida (editable en builder) ===== */
.hw-hero{min-height:680px !important;}
/* El margen de 80px existía para librar la nav que vivía DENTRO del hero.
   Esa nav es ahora el header global en overlay, así que el bloque de marca
   vuelve a su sitio del Figma. */
.hw-hero .hw-script{margin-top:0 !important;}
.hw-hero .hw-sub{margin-top:22px !important;}
.hw-collagewrap{position:relative !important;}
.hw-collage{margin-top:-150px !important; position:relative; z-index:3;}
.hw-badge{position:absolute !important; left:4%; top:-36px; z-index:5; margin:0 !important;}
.hw-introwrap{position:relative !important;}
.hw-welcome{position:absolute !important; right:40px; top:55px; writing-mode:vertical-rl; margin:0 !important;}

/* ===== Home scattered section ===== */
/* FIX #6: antes height fija 1700px mientras las imágenes escalaban con el ancho (%),
   así en pantallas anchas (27") las fotos crecían pero el alto no → se solapaban.
   Con aspect-ratio TODO escala en proporción y el layout se mantiene fiel al Figma. */
.hw-scatter{position:relative !important;aspect-ratio:1440/1700;height:auto !important;overflow:visible}
.hw-scatter .fusion-row{max-width:100% !important;width:100% !important;margin:0 !important;padding:0 !important}
.hw-scatter .fusion-builder-row-1{height:100%}
.s-dining{position:absolute !important;left:29.51%;top:1.65%;width:18.4%;margin:0 !important}
.s-vibe{position:absolute !important;left:53.54%;top:4.76%;width:21.88%;margin:0 !important}
.s-mandrink{position:absolute !important;left:60.83%;top:16.59%;width:14.58%;margin:0 !important}
.s-trees{position:absolute !important;left:5.1%;top:18.76%;width:12.4%;margin:0 !important}
/* NOTE 2026-08-31: the old trees.png was a screenshot whose right half held a
   picture of the paragraph text, so its box could overlap .s-drive harmlessly.
   The real line art fills its box, so the width is trimmed to match Figma
   (art ends where the paragraph begins at 17%). */
.s-aerial{position:absolute !important;left:23.12%;top:34.35%;width:20.83%;margin:0 !important}
.s-photo3331{position:absolute !important;left:39.58%;top:39.59%;width:20.83%;margin:0 !important}
/* La foto del café iba suelta a media altura; en el Figma va centrada justo
   encima de "And a fresh mix of homes…". Medidas tomadas del frame: marco de
   240×318 px con su esquina en (600, 888) dentro del lienzo 1440×1700. */
.s-twowomen{position:absolute !important;left:41.67%;top:52.24%;width:16.67%;margin:0 !important}
.s-sprinkler{position:absolute !important;left:64.44%;top:45.53%;width:18.96%;margin:0 !important}
.s-magnolia{position:absolute !important;left:80.9%;top:35.24%;width:19.1%;margin:0 !important}
/* .s-flowers — retirada: `flowers.png` era un duplicado de la magnolia con un
   recuadro de captura pegado encima. Ver build-scripts/home-l3/remove-flowers-duplicate.php */
.s-photo2033{position:absolute !important;left:64.38%;top:68.88%;width:25.9%;margin:0 !important}
.s-hmark{position:absolute !important;left:49.03%;top:86.18%;width:1.88%;margin:0 !important}
/* FIX #3: la H en tomate (Town Square) vía máscara del PNG.
   La clase s-hmark va sobre el propio span.fusion-imageframe (no un hijo). */
.s-hmark{display:block !important;
  -webkit-mask:url('/wp-content/uploads/2026/07/H_mark_outline.png') center/contain no-repeat;
          mask:url('/wp-content/uploads/2026/07/H_mark_outline.png') center/contain no-repeat;
  background:var(--awb-color7,#E54511)}
.s-hmark img{opacity:0 !important}
/* ==== FOTO DEL CAFÉ CON MARCO FESTONEADO (2026-08-31, v2) ============
   Los dos intentos anteriores dibujaban el festón con un patrón de
   radial-gradient: el primero enmascaraba TODO el elemento y agujereaba la
   foto; el segundo lo pintaba detrás y salía un borde de puntas, no de "U".
   Ahora se usan los dos assets reales del diseño:
     · hw-scallop-mask.png  → silueta rellena: recorta la FOTO (los bombos
       del festón se llenan con la imagen, como en el Figma)
     · hw-scallop-frame-yellow.png → el aro #CEC439 encima, sobre el borde
   Ambos a 100% 100%, así que el marco escala con el collage.
   ==================================================================== */
.s-twowomen{position:absolute !important;padding:0;background:none;line-height:0;
  -webkit-mask:none;mask:none}
.s-twowomen img{
  position:relative;z-index:1;border-radius:0;
  /* La foto es apaisada y el marco vertical: en el recorte sólo cabe la mitad
     del ancho. Se encuadra a la izquierda, que es donde caen
     dos de las tres personas; centrado salía sólo una. */
  aspect-ratio:964/1276;object-fit:cover;object-position:8% center;height:auto !important;
  -webkit-mask:url('/wp-content/uploads/2026/09/hw-scallop-mask.png') center/100% 100% no-repeat;
          mask:url('/wp-content/uploads/2026/09/hw-scallop-mask.png') center/100% 100% no-repeat}
.s-twowomen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url('/wp-content/uploads/2026/09/hw-scallop-frame-yellow.png') center/100% 100% no-repeat}
/* FIX: los textos llevan la clase s-* sobre el propio .fusion-text, y Avada le
   aplica width:100% → sin !important se estiraban a todo el ancho. */
.s-drive{position:absolute !important;left:17.01%;top:19.88%;width:26.39% !important}
.s-trails{position:absolute !important;left:50.69%;top:36.82%;width:20.83% !important}
.s-fresh{position:absolute !important;left:38.06%;top:75.65%;width:23.82% !important}
/* FIX: el CTA estaba en 97% (borde inferior, debajo del H-mark y fuera de vista).
   En Figma va entre "And a fresh mix..." y el H-mark. */
.s-cta{position:absolute !important;left:50%;top:81.5%;transform:translateX(-50%);width:auto !important}
/* fix: el ancestro posicionado de los absolutos es la layout-column */
.hw-scatter .fusion-layout-column{height:100% !important;position:relative !important;width:100% !important;margin:0 !important;float:none !important}
.hw-scatter .fusion-column-wrapper{height:100% !important}
/* fix imágenes visibles + ancho de texto en scattered */
.hw-scatter .fusion-imageframe{line-height:0 !important;display:block !important}
.hw-scatter .fusion-imageframe img{width:100% !important;height:auto !important;display:block !important;max-width:100% !important}
/* FIX: antes esta regla también pegaba a .s-drive y le forzaba width:100%,
   anulando su 26.39% → el texto se desbordaba y se veía fuera de lugar. */
.hw-scatter .s-drive .fusion-text{width:100% !important}
/* CTA "Find Your Home": una línea, centrado y SUBRAYADO (es un botón) — #3 */
.s-cta{white-space:nowrap}
.s-cta .fusion-text{width:auto !important}
.s-cta p{display:inline-block;padding-bottom:8px;border-bottom:1.5px solid var(--awb-color7,#E54511)}
.hw-scatter .fusion-text p{margin:0}

/* ===== Scroll-spy: etiqueta vertical ANCLADA por sección (#2) =====
   Aparece al llegar a la sección (no todas a la vez, como en Figma). */
/* .hw-seclabel — sustituido por el carril fijo .hw-secrail (ver el bloque
   HOME · AJUSTES 2026-09-01 al final del fichero). */
/* ==================================================================
   HEADER L3 — nav única del sitio
   La nav vive en la sección "Global Header" de Avada Layouts
   (fusion_tb_section 9) y TODAS las layouts apuntan ya a esa sección,
   así que el header nativo de Avada nunca debe pintarse.
   El header se dibuja como overlay TRANSPARENTE sobre el primer bloque
   de la página (hero de vídeo/imagen o banda crema), como en el Figma L3.
   ================================================================== */
.fusion-header-wrapper{display:none !important}

#wrapper{position:relative}
/* Avada mete 60px de padding-top al #main (Theme Options → Site Content).
   Con el header en overlay el hero tiene que empezar pegado al borde. */
#main{padding-top:0 !important}
/* Las páginas que arrancan en banda clara ya traen 70px propios; se les suma
   un poco para despejar la nav, como en el Figma. */
body.hw-hdr-dark #main{padding-top:26px !important}
/* News / Event Detail: la barra de título arranca pegada al borde, así que
   necesita más aire bajo la nav para respetar el ritmo del Figma L3.
   En News Detail el título vive en la Page Title Bar, que Avada pinta FUERA
   de #main; hay que despejar la que exista en cada caso. */
body.single #main{padding-top:100px !important}
body.single .fusion-tb-page-title-bar{padding-top:100px}
body.single .fusion-tb-page-title-bar + #main,
body.single .fusion-tb-page-title-bar ~ #main{padding-top:0 !important}

.fusion-tb-header{
  position:absolute;top:0;left:0;width:100%;z-index:200;
  pointer-events:none}                    /* el overlay no debe tapar el hero */
.fusion-tb-header a,
.fusion-tb-header .hw-hdr__menu{pointer-events:auto}
.fusion-tb-header .hw-hdr{background:transparent !important}

/* Tinta: crema sobre héroes de imagen, oliva sobre páginas claras.
   La clase del body la pone hw-custom.js mirando la 1ª sección. */
.hw-hdr{--hw-hdr-ink:#424B0A}
body.hw-hdr-light .hw-hdr{--hw-hdr-ink:#EFEAE4}

.hw-hdr .fusion-text,
.hw-hdr .fusion-text a{color:var(--hw-hdr-ink);text-decoration:none}
.hw-hdr .fusion-text p{margin:0}

.hw-hdr__links p{display:flex;align-items:center;gap:38px}
.hw-hdr__links a{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;white-space:nowrap;transition:opacity .2s ease}
.hw-hdr__links a:hover{opacity:.6}

.hw-hdr__brand{text-align:center}
.hw-hdr__brand a{
  font-family:'Juana','Playfair Display',Georgia,serif;
  font-size:20px;letter-spacing:6px;text-transform:uppercase;white-space:nowrap}

.hw-hdr__menu{cursor:pointer;transition:opacity .2s ease}
.hw-hdr__menu:hover{opacity:.6}
.hw-hdr__menu p{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.hw-hdr__menu-label{font-family:'Gravitica','Poppins',sans-serif;font-weight:600}
.hw-hdr__bars{display:inline-block;width:44px;height:7px;
  border-top:1.5px solid var(--hw-hdr-ink);
  border-bottom:1.5px solid var(--hw-hdr-ink)}

@media(max-width:640px){
  .hw-hdr__links{display:none}
  .hw-hdr__brand a{font-size:17px;letter-spacing:4px}
  .hw-hdr__bars{width:32px}
}

/* ==================================================================
   OFF-CANVAS NAV (feature #2) — copiar TODO este bloque a Avada > Custom CSS
   ================================================================== */
html.hw-oc-lock{overflow:hidden !important}

.hw-oc{
  position:fixed;inset:0;z-index:99999;
  background:var(--awb-color5,#424B0A);
  color:var(--awb-color1,#EFEAE4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease, visibility 0s linear .45s;
  overflow-y:auto;
  -webkit-font-smoothing:antialiased;
}
/* Fondo animado: el roble en contrapicado con las hojas moviéndose, el mismo
   plano del hero de la home. Antes era ese fotograma quieto (`canopy_clean.jpg`)
   como textura; ahora es el vídeo, que es lo que pide el diseño.
   Va al 14% y en `overlay` sobre el verde Boxwood: no es una foto de fondo,
   es la textura del verde. El `<video>` lo monta hw-offcanvas.js y no carga
   hasta que se abre el menú.
   El ::before se queda como respaldo con el póster: cubre el rato entre abrir
   y el primer fotograma, y el caso de reduced-motion (ahí el vídeo no arranca). */
/* El respaldo quieto de la textura. La IMAGEN se declara sólo dentro del
   media query: una `background-image` con `opacity:0` se descarga igual, y
   eran 40 KB en todas las páginas para algo que casi nadie ve. */
.hw-oc::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;mix-blend-mode:soft-light;
}
.hw-oc__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;object-fit:cover;
  /* `soft-light` y no `overlay`: sobre un verde medio, overlay dispara el
     contraste y el roble pasaba de textura a foto de fondo. */
  opacity:.16;mix-blend-mode:soft-light;
}
@media(prefers-reduced-motion:reduce){
  .hw-oc__bg{display:none}
  .hw-oc::before{
    background:url('/wp-content/uploads/2026/09/hw-nav-canopy-poster.jpg') center/cover no-repeat;
    opacity:.16}
}
.hw-oc.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease;}
/* El :not() es imprescindible: esta regla va DESPUÉS de .hw-oc__bg y con la
   misma especificidad, así que sin él le devolvía `position:relative` al vídeo,
   lo metía en el flujo y empujaba todo el panel 256 px hacia abajo. */
.hw-oc > *:not(.hw-oc__bg){position:relative;z-index:1}

/* ---- barra superior ---- */
.hw-oc__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:34px 60px;gap:20px;
}
.hw-oc__toplinks{display:flex;gap:34px;flex:1}
.hw-oc__toplinks a,.hw-oc__close span{
  font-family:'Gravitica','Poppins',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
}
.hw-oc__toplinks a{color:var(--awb-color1,#EFEAE4);text-decoration:none;opacity:.9}
.hw-oc__toplinks a:hover{opacity:1;color:var(--awb-color3,#CEC439)}
.hw-oc__brand{
  flex:1;text-align:center;text-decoration:none;
  font-family:'Juana','Playfair Display',Georgia,serif;font-size:24px;letter-spacing:8px;
  text-transform:uppercase;color:var(--awb-color1,#EFEAE4);white-space:nowrap;
}
.hw-oc__close{
  flex:1;display:flex;align-items:center;justify-content:flex-end;gap:16px;
  background:none;border:0;cursor:pointer;color:var(--awb-color1,#EFEAE4);padding:0;
}
.hw-oc__close svg{stroke:currentColor;stroke-width:1.5}
.hw-oc__close:hover{color:var(--awb-color3,#CEC439)}

/* ---- cuerpo: imagen + columnas ---- */
.hw-oc__body{
  display:flex;align-items:flex-start;gap:70px;
  padding:44px 60px 40px 75px;max-width:1440px;margin:0 auto;
}
.hw-oc__media{
  position:relative;flex:0 0 auto;width:min(40vw,570px);aspect-ratio:1/1;
  overflow:hidden;background:rgba(0,0,0,.15);
}
.hw-oc__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;
}
/* las fotos ya vienen recortadas a 1:1, así que `cover` no recorta nada más:
   sólo cubre el redondeo de píxeles */
.hw-oc__img.is-active{opacity:1}

.hw-oc__cols{display:flex;gap:64px;flex:1;padding-top:6px}

/* nav principal (serif) */
.hw-oc__primary{display:flex;flex-direction:column}
.hw-oc__primary a{
  font-family:'Juana','Playfair Display',Georgia,serif;
  font-size:34px;line-height:1.42;font-weight:400;letter-spacing:.2px;
  color:var(--awb-color1,#EFEAE4);text-decoration:none;
  transition:color .25s ease, opacity .25s ease;
  /* 340px, no 12ch: con 12ch (~204px con Cormorant a 34) se partían "Explore
     Heartwood" y "What's happening", que en el Figma van en UNA línea.
     Medido en pantalla: "Explore Heartwood" 299 px y "What's happening" 274,
     contra "Commercial opportunities" 409, que sí baja a dos líneas en el
     diseño. El corte tiene que caer entre 300 y 408. */
  max-width:340px;
}
.hw-oc__primary a:hover,.hw-oc__primary a:focus{color:var(--awb-color3,#CEC439);outline:none}

/* nav secundaria (uppercase) */
.hw-oc__secondary{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.hw-oc__secondary a{
  font-family:'Gravitica','Poppins',sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
  color:var(--awb-color1,#EFEAE4);text-decoration:none;line-height:1.35;max-width:16ch;
}
.hw-oc__secondary a:hover{color:var(--awb-color3,#CEC439)}
.hw-oc__social{display:flex;gap:18px;margin-top:16px}
.hw-oc__social a{color:var(--awb-color1,#EFEAE4);display:inline-flex}
.hw-oc__social a:hover{color:var(--awb-color3,#CEC439)}

/* badge STAY IN THE KNOW */
.hw-oc__badge{
  position:absolute;left:40px;bottom:44px;z-index:2;
  width:70px;height:70px;border:1.5px solid var(--awb-color1,#EFEAE4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  color:var(--awb-color1,#EFEAE4);transform:rotate(-8deg);
  font-family:'Gravitica','Poppins',sans-serif;font-size:9px;letter-spacing:1px;text-transform:uppercase;line-height:1.35;
}
.hw-oc__badge:hover{color:var(--awb-color3,#CEC439);border-color:var(--awb-color3,#CEC439)}

/* ---- responsive ---- */
@media(max-width:900px){
  .hw-oc__top{padding:22px 22px}
  .hw-oc__toplinks{display:none}
  .hw-oc__brand{flex:1;text-align:left;font-size:19px;letter-spacing:5px}
  .hw-oc__close{flex:0}
  .hw-oc__body{flex-direction:column;gap:24px;padding:8px 22px 40px}
  .hw-oc__media{display:none}
  .hw-oc__cols{flex-direction:column;gap:30px}
  .hw-oc__primary a{font-size:28px;line-height:1.5;max-width:none}
  .hw-oc__mobtop{display:flex;gap:0;border:1px solid rgba(239,234,228,.4)}
  .hw-oc__secondary{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
  /* en mobile el badge fluye al final (no absolute) para no solaparse con la nav */
  .hw-oc__badge{position:static;margin:34px 0 40px 22px}
}
/* mostrar los toplinks como cajas en mobile (Find a Home / Community Map) */
@media(max-width:900px){
  .hw-oc__toplinks{display:flex;order:5;width:100%;gap:0;margin:6px 22px 0}
  .hw-oc__toplinks a{flex:1;text-align:center;padding:18px 8px;border:1px solid rgba(239,234,228,.4)}
  .hw-oc__toplinks a+a{border-left:0}
  .hw-oc__top{flex-wrap:wrap}
}

/* ==================================================================
   SECCIONES LOCATION / SCHOOLS / LIVE HERE
   Coords del devcode Figma (diseño 1440) convertidas a % / px.
   OJO: las clases van sobre el propio .fusion-text → width necesita !important.
   ================================================================== */
/* base común: contenedor posicionado + la layout-column también (si no, los
   absolutos se anclan mal — mismo fix que en .hw-scatter) */
.hw-location, .hw-schools, .hw-livehere{position:relative !important;overflow:visible}
.hw-location .fusion-row, .hw-schools .fusion-row, .hw-livehere .fusion-row{
  max-width:100% !important;width:100% !important;margin:0 !important;padding:0 !important}
.hw-location .fusion-layout-column,
.hw-schools .fusion-layout-column,
.hw-livehere .fusion-layout-column{
  position:relative !important;width:100% !important;margin:0 !important;float:none !important}
.hw-location .fusion-imageframe,
.hw-schools .fusion-imageframe,
.hw-livehere .fusion-imageframe{line-height:0 !important;display:block !important}
.hw-location .fusion-imageframe img,
.hw-schools .fusion-imageframe img,
.hw-livehere .fusion-imageframe img{width:100% !important;height:auto !important;display:block !important}
/* recortes exactos del Figma (si no, la imagen conserva su ratio nativo) */
.l-map .fusion-imageframe, .s2-girl .fusion-imageframe,
.lh-photo .fusion-imageframe, .s2-checks .fusion-imageframe{overflow:hidden}
.l-map img   {aspect-ratio:570/598 !important;height:100% !important;object-fit:cover !important}
.s2-girl img {aspect-ratio:1/1     !important;height:100% !important;object-fit:cover !important}
.lh-photo img{aspect-ratio:964/569 !important;height:100% !important;object-fit:cover !important}
.s2-checks img{aspect-ratio:570/598 !important;height:100% !important;object-fit:cover !important}
.hw-location .fusion-text p, .hw-schools .fusion-text p, .hw-livehere .fusion-text p{margin:0}

/* tipografías de sección */
.l-title, .s2-title{
  font-family:'Gravitica','Oswald','Gravitica','Poppins',sans-serif !important;
  font-size:44px !important;line-height:1.06 !important;letter-spacing:1px !important;
  text-transform:uppercase !important;color:#19180c !important;font-weight:600 !important}
/* El cuerpo escala con el ancho de ventana a propósito: estas secciones usan
   aspect-ratio, así que su ALTO encoge con la pantalla. Con un tamaño fijo el
   párrafo ganaba líneas mientras la caja se encogía y acababa metiéndose
   debajo del CTA (el caso de "Let's talk business"). Con vw la proporción
   texto/sección se mantiene. 1.18vw = 17px a 1440. */
.l-body, .s2-body, .lh-body{
  font-family:calluna,'Lora',Georgia,serif !important;
  font-size:clamp(14px,1.18vw,17px) !important;line-height:1.72 !important;color:#19180c !important}
/* fusion_title mete un h2 interno: que herede del wrapper con la clase */
.l-title h1,.l-title h2,.l-title h3,.l-title .fusion-title-heading,
.s2-title h1,.s2-title h2,.s2-title h3,.s2-title .fusion-title-heading,
.lh-title h1,.lh-title h2,.lh-title h3,.lh-title .fusion-title-heading{
  font:inherit !important;color:inherit !important;margin:0 !important;padding:0 !important;
  letter-spacing:inherit !important;text-transform:inherit !important;line-height:inherit !important}
.l-title .fusion-title, .s2-title .fusion-title, .lh-title .fusion-title{margin:0 !important}
.l-cta, .s2-cta, .lh-cta{
  font-family:'Gravitica','Poppins',sans-serif !important;font-size:12px !important;letter-spacing:2px !important;
  text-transform:uppercase !important;color:#e54511 !important;font-weight:600 !important;white-space:nowrap;
  text-decoration:none !important}
.l-cta p, .s2-cta p, .lh-cta p{display:inline-flex;align-items:center;text-decoration:none !important;border-bottom:0 !important}
/* FIX #4/#7: flecha naranja con punta (→) que sale del texto hacia la derecha */
.l-cta p::after, .s2-cta p::after, .lh-cta p::after{
  content:"";display:inline-block;margin-left:16px;width:52px;height:12px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='12' viewBox='0 0 52 12'%3E%3Cg fill='none' stroke='%23E54511' stroke-width='1.4'%3E%3Cline x1='0' y1='6' x2='49' y2='6'/%3E%3Cpath d='M44 1.5 50 6 44 10.5'/%3E%3C/g%3E%3C/svg%3E")}

/* FIX #5: secciones con aspect-ratio (escalan con el ancho) y posiciones en %
   → en pantallas anchas (27") ya no se aprietan ni se desbordan a la sección siguiente.
   Alto fijo del diseño reemplazado por proporción; tops en % del diseño. */

/* ---------- LOCATION (frame 12010:334 · h 702) ---------- */
.hw-location{aspect-ratio:1440/702;height:auto !important}
.hw-location .fusion-layout-column{height:100% !important}
.l-title{position:absolute !important;left:9.72%;top:29.2%;width:26% !important}
.l-body {position:absolute !important;left:9.72%;top:45.4%;width:32.78% !important}
.l-cta  {position:absolute !important;left:9.58%;top:81.2%;width:auto !important}
/* FIX #4: mapa ligeramente más chico (39.58%→34%) */
.l-map  {position:absolute !important;left:54%;top:17.1%;width:34% !important;margin:0 !important}

/* ---------- SCHOOLS (frame 12008:310 · h 693) ---------- */
.hw-schools{aspect-ratio:1440/693;height:auto !important;margin-top:min(4vw,60px)}
.hw-schools .fusion-layout-column{height:100% !important}
.s2-checks{position:absolute !important;left:9.72%;top:13.7%;width:39.58% !important;margin:0 !important}
.s2-girl  {position:absolute !important;left:15.83%;top:28.4%;width:27.36% !important;margin:0 !important;z-index:2}
.s2-title {position:absolute !important;left:57.5%;top:37.8%;width:26% !important}
.s2-body  {position:absolute !important;left:57.5%;top:54.1%;width:32.78% !important}
.s2-cta   {position:absolute !important;left:57.5%;top:71.7%;width:auto !important}

/* ---------- LIVE HERE (frame 12010:345 · h 1245) ---------- */
.hw-livehere{aspect-ratio:1440/1245;height:auto !important;margin-top:min(4vw,60px)}
.hw-livehere .fusion-layout-column{height:100% !important}
/* bloque Oyster de fondo (Rectangle 32: 1160x978 desde x140,y+95) */
.hw-livehere::before{
  content:"";position:absolute;left:9.72%;top:7.63%;width:80.56%;height:78.55%;
  background:var(--awb-color1,#EFEAE4);z-index:0}
.hw-livehere > *{position:relative;z-index:1}
/* "It's a big, wide welcome mat": en el Figma cae en CUATRO líneas y con un
   trazo más fino. La caja era demasiado ancha (30.35% → 2 líneas) y el peso
   400 de la sustituta (Cormorant Garamond) pesa más que Juana. Se estrecha la
   caja para forzar el corte de línea del diseño y se baja a 300 —Cormorant es
   variable, así que 300 es un peso real, no una síntesis. */
/* 2026-09-01: sube de 70 a 78. La caja pasa de 22,5% a 25% para que el
   titular siga cayendo en las CUATRO líneas del Figma; con 22,5% a 78px
   "welcome" se partía y salían cinco. */
.lh-title{position:absolute !important;left:17.71%;top:16.95%;width:25% !important;
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-size:78px !important;
  line-height:1.26 !important;color:#424b0a !important;font-weight:300 !important;
  letter-spacing:.5px !important}
.lh-body {position:absolute !important;left:48.06%;top:23.3%;width:31.32% !important}
.lh-cta  {position:absolute !important;left:72.01%;top:42.5%;width:auto !important}
.lh-photo{position:absolute !important;left:16.53%;top:54.3%;width:66.94% !important;margin:0 !important;z-index:2}

/* Responsive: estas secciones son un lienzo fijo (aspect-ratio + posiciones en
   %), así que su ALTO encoge con la pantalla mientras el texto no. Por debajo
   de ~1150px el párrafo ya no cabe en su hueco y se mete debajo del CTA — que
   es lo que pasaba en "Let's talk business". Ahí pasan a flujo normal.
   (Antes el corte estaba en 900px: entre 900 y 1150 quedaban apretadas y el CTA
   se solapaba. Medido: hueco de -8px a 1100 y +2px a 1150.) */
@media(max-width:1150px){
  .hw-location, .hw-schools, .hw-livehere{height:auto !important;aspect-ratio:auto !important;padding:60px 22px !important}
  .hw-location .fusion-layout-column,
  .hw-schools .fusion-layout-column,
  .hw-livehere .fusion-layout-column{height:auto !important}
  .hw-livehere::before{display:none}
  .l-title,.l-body,.l-cta,.l-map,
  .s2-checks,.s2-girl,.s2-title,.s2-body,.s2-cta,
  .lh-title,.lh-body,.lh-cta,.lh-photo{
    position:relative !important;left:auto !important;top:auto !important;
    width:100% !important;margin:0 0 22px !important}
  .s2-checks{display:none !important}
  .l-title,.s2-title{font-size:32px !important}
  .lh-title{font-size:38px !important}
}

/* ==================================================================
   SECCIONES: SLOW AND FAST · BREAKER · COMMERCIAL · EXPLORE THE LIFE · READ ALL ABOUT IT
   (#8, #9, #10, #11, #12)  — mismo método de coords % del Figma
   ================================================================== */
.hw-whatshere, .hw-commercial{position:relative !important;overflow:visible}
.hw-whatshere .fusion-row, .hw-commercial .fusion-row{max-width:100% !important;width:100% !important;margin:0 !important;padding:0 !important}
.hw-whatshere .fusion-layout-column, .hw-commercial .fusion-layout-column{position:relative !important;width:100% !important;margin:0 !important;float:none !important;height:100% !important}
.hw-whatshere .fusion-imageframe, .hw-commercial .fusion-imageframe{line-height:0 !important;display:block !important}
.hw-whatshere .fusion-text p, .hw-commercial .fusion-text p{margin:0}

/* ---- #8 SLOW AND FAST (foto izq + mat + texto der) ---- */
.hw-whatshere{aspect-ratio:1440/693;height:auto !important;margin-top:min(4vw,60px)}
.hw-whatshere .wh-mat, .hw-whatshere .fusion-sep-clear{display:none !important}
/* El fondo de la foto no es un rectángulo plano de color: es una acuarela
   amarilla pintada (Rectangle 32 del Figma). */
.hw-whatshere::before{content:"";position:absolute;left:9.72%;top:13.6%;width:39.58%;height:86.3%;
  background:url('/wp-content/uploads/2026/09/hw-watercolor-frame-yellow.jpg') center/cover no-repeat;
  z-index:0}
.wh-photo{position:absolute !important;left:15.83%;top:28.4%;width:27.36% !important;margin:0 !important;z-index:2}
.wh-photo img{aspect-ratio:1/1 !important;height:100% !important;width:100% !important;object-fit:cover !important;display:block}
.wh-title{position:absolute !important;left:57.5%;top:27.1%;width:30% !important;z-index:1}
.wh-body {position:absolute !important;left:57.5%;top:52.4%;width:31.9% !important;z-index:1}
.wh-cta  {position:absolute !important;left:57.5%;top:84%;width:auto !important;z-index:1}

/* ---- #9 BREAKER SLIDER (collage sobre "TOWN & LOWCOUNTRY") ---- */
/* padding propio para que el collage tenga aire arriba/abajo y no se monte
   sobre la sección anterior; min-height contiene el collage (640px). */
.hw-breaker{position:relative !important;overflow:hidden;padding:70px 0 !important}
.hw-breaker .fusion-row{max-width:100% !important;width:100% !important;margin:0 !important;padding:0 !important}
.hw-breaker .fusion-layout-column,.hw-breaker .fusion-column-wrapper,.hw-breaker .fusion-text{
  min-height:830px !important;margin:0 !important}
/* el flex de Avada centraba el collage → forzar alineación arriba para que no se monte */
.hw-breaker.fusion-flex-container,.hw-breaker .fusion-builder-row,.hw-breaker .fusion-flex-align-items-center{
  align-items:flex-start !important;justify-content:flex-start !important}
.hw-breaker .fusion-column-wrapper{justify-content:flex-start !important}
/* Fondo "TOWN & LOWCOUNTRY": era texto compuesto con la fuente sustituta, que
   no es la del diseño. Ahora se usa la lámina real del Figma
   (type repeat bg.png) — así el trazo es el correcto aunque las webfonts
   licenciadas aún no estén. */
.hw-breaker__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:url('/wp-content/uploads/2026/09/hw-type-repeat-lowcountry.png') center/cover no-repeat}
.hw-breaker__bg span{display:none}
/* el collage ya no va pegado a todo: le damos su espacio dentro del breaker */
.hw-breaker .hw-collage-auto{position:relative;z-index:1}

/* ---- #10 COMMERCIAL (texto izq + foto der) ---- */
.hw-commercial{aspect-ratio:1440/708;height:auto !important;margin-top:min(4vw,60px)}
.cm-title{position:absolute !important;left:9.72%;top:25%;width:29% !important}
.cm-body {position:absolute !important;left:9.72%;top:49.9%;width:32.8% !important}
/* 85.2% dejaba sólo 16px bajo el párrafo a 1440 y cero (o negativo) en cuanto
   la ventana se estrechaba. Con el cuerpo ya escalando por vw, este margen
   extra deja el CTA claramente debajo en todo el rango. */
.cm-cta  {position:absolute !important;left:9.72%;top:88.5%;width:auto !important}
.cm-photo{position:absolute !important;left:50.69%;top:15.5%;width:39.58% !important;margin:0 !important}
.cm-photo img{aspect-ratio:570/598 !important;height:100% !important;width:100% !important;object-fit:cover !important;display:block}

/* ---- #11 EXPLORE THE LIFE (banner bokeh) ---- */
/* La foto del café de la sección anterior termina justo en el borde inferior
   de su lienzo (.cm-photo cae en 708 de 708), así que sin este margen tocaba
   la banda de color de esta sección. En el Figma hay 229 px de blanco entre
   una y otra; el clamp los da a 1440 y los encoge en pantallas menores. */
.hw-explorelife{margin-top:clamp(60px, 16vw, 230px) !important}
.hw-explorelife .fusion-row{max-width:1160px !important}
.hw-el-banner{position:relative;width:100%;aspect-ratio:1160/560;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center}
.hw-el-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hw-el-banner::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(25,24,12,.42)}
.hw-el-inner{position:relative;z-index:2;color:#EFEAE4;max-width:620px;padding:20px}
.hw-el-kicker{display:block;font-family:'Gravitica','Oswald','Gravitica','Poppins',sans-serif;font-size:34px;line-height:1.1;
  letter-spacing:2px;text-transform:uppercase;font-weight:600}
.hw-el-sub{font-family:calluna,'Lora',Georgia,serif;font-size:17px;line-height:1.6;margin:18px 0 26px;color:#EFEAE4}
.hw-el-cta{display:inline-block;font-family:'Gravitica','Poppins',sans-serif;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;font-weight:600;color:#EFEAE4;text-decoration:none;
  padding-bottom:7px;border-bottom:1.5px solid #EFEAE4}
.hw-el-cta:hover{color:var(--awb-color3,#CEC439);border-color:var(--awb-color3,#CEC439)}

/* ---- #12 READ ALL ABOUT IT (blog) ---- */
/* El título y el CTA de esta columna comparten las clases s2-title / s2-cta con
   la sección Schools, que las posiciona en ABSOLUTO sobre su lienzo. Esas
   coordenadas se colaban aquí y dejaban el título encima del párrafo y el CTA
   encima del título. Aquí la columna es flujo normal, así que se anulan. */
.hw-happening .hp-title,
.hw-happening .hp-intro,
.hw-happening .hp-cta{
  position:static !important;left:auto !important;top:auto !important;
  width:100% !important;transform:none !important}
.hw-happening .hp-left{padding-right:40px}
.hw-happening .hp-title{margin:0 0 20px !important}
.hw-happening .hp-intro{font-family:calluna,'Lora',Georgia,serif !important;font-size:16px !important;line-height:1.7 !important;color:#19180c !important;margin:0 !important}
.hw-happening .hp-cta{margin:34px 0 0 !important;width:auto !important}

/* Tarjetas: fondo transparente, foto apaisada y el texto a ras de la foto.
   Orden del Figma: foto → TÍTULO → fecha → extracto → Read More. */
.hw-happening .fusion-post-cards{margin:0 !important}
.hw-happening .fusion-post-card,
.hw-happening .hw-card{border:0 !important;background:transparent !important;box-shadow:none !important}
.hw-happening .fusion-post-card .fusion-image-wrapper img,
.hw-happening .fusion-post-card img{width:100% !important;aspect-ratio:3/2 !important;object-fit:cover !important;display:block}
.hw-card-title, .hw-card-title a, .hw-card-title .fusion-title-heading{
  font-family:calluna,'Lora',Georgia,serif !important;font-size:20px !important;line-height:1.3 !important;
  color:var(--awb-color8,#19180c) !important;font-weight:500 !important}
/* La fecha va en Veranda Blue y en la sans de marca, como en el Figma. */
.hw-card-date, .hw-card-date p{
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  color:var(--awb-color4,#6D7EA0) !important;margin:0 0 10px !important}
.hw-card-excerpt, .hw-card-excerpt p{
  font-family:calluna,'Lora',Georgia,serif !important;margin:0 0 10px !important}
/* "Read More": no es un botón en caja sino un enlace subrayado en el mismo
   serif del cuerpo, en caja baja. */
.hw-card-more .fusion-button{
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;height:auto !important;line-height:1.5 !important}
.hw-card-more .fusion-button-text{
  font-family:calluna,'Lora',Georgia,serif !important;font-size:15px !important;font-weight:400 !important;
  letter-spacing:0 !important;text-transform:none !important;
  text-decoration:underline !important;text-underline-offset:3px !important}
@media(max-width:1150px){
  .hw-whatshere, .hw-commercial{height:auto !important;aspect-ratio:auto !important;padding:60px 22px !important}
  .hw-whatshere::before{display:none}
  .wh-photo,.wh-title,.wh-body,.wh-cta,.cm-title,.cm-body,.cm-cta,.cm-photo{
    position:relative !important;left:auto !important;top:auto !important;width:100% !important;margin:0 0 22px !important}
  .hw-el-kicker{font-size:26px}
  .hw-happening{padding:60px 22px !important}
  .hw-happening .fusion-builder-column{width:100% !important}
}

/* ==================================================================
   STICKY NAV transparente→sólido (feature #1)
   copiar TODO este bloque a Avada > Custom CSS
   ================================================================== */
.hw-nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  background:var(--awb-color1,#EFEAE4);
  border-bottom:1px solid rgba(25,24,12,.08);
  box-shadow:0 4px 20px rgba(25,24,12,.06);
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  will-change:transform}
.hw-nav.is-visible{transform:translateY(0)}
.hw-nav__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:1440px;margin:0 auto;padding:16px 60px;min-height:64px;box-sizing:border-box}
.hw-nav__left{display:flex;gap:34px;flex:1}
.hw-nav__left a{
  font-family:'Gravitica','Poppins',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  color:#19180c;text-decoration:none;opacity:.85}
.hw-nav__left a:hover{opacity:1;color:var(--awb-color7,#E54511)}
.hw-nav__brand{
  flex:1;text-align:center;text-decoration:none;
  font-family:'Juana','Playfair Display',Georgia,serif;font-size:22px;letter-spacing:7px;
  text-transform:uppercase;color:#19180c;white-space:nowrap}
.hw-nav__menu{
  flex:1;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  background:none;border:0;cursor:pointer;color:#19180c;padding:0}
.hw-nav__menu span{font-family:'Gravitica','Poppins',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.hw-nav__menu svg{stroke:currentColor;stroke-width:1.5}
.hw-nav__menu:hover{color:var(--awb-color7,#E54511)}

@media(max-width:900px){
  .hw-nav__in{padding:12px 22px;min-height:56px}
  .hw-nav__left{display:none}
  .hw-nav__brand{flex:1;text-align:left;font-size:18px;letter-spacing:4px}
  .hw-nav__menu{flex:0}
}
@media(prefers-reduced-motion:reduce){.hw-nav{transition:none}}

/* ==================================================================
   STAY IN THE KNOW · widget de contacto persistente (feature #6)
   copiar TODO este bloque a Avada > Custom CSS
   ================================================================== */
.hw-sitk{position:fixed;left:26px;bottom:30px;z-index:9500;display:flex;align-items:flex-end;gap:14px}

/* Sello circular. Va TRANSPARENTE: el aro y las letras son el dibujo, no hay
   fondo ni sombra ni la inclinación de -8° que tenía antes. El aro y el texto
   se pintan con currentColor, así que basta con cambiar `color` en hover. */
.hw-sitk__badge{
  position:relative;flex:0 0 auto;width:78px;height:78px;border-radius:50%;
  background:transparent;border:0;box-shadow:none;
  /* !important: el reset de <button> del tema ganaba y lo dejaba en Off Black */
  color:var(--awb-color5,#424B0A) !important;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:color .25s, background .25s}
.hw-sitk__badge:hover{background:var(--awb-color5,#424B0A);color:var(--awb-color1,#EFEAE4) !important}
.hw-sitk__label{transition:opacity .2s;display:block;width:100%;height:100%}
.hw-sitk__mark{display:block;width:100%;height:100%;overflow:visible}
.hw-sitk__ring{fill:none;stroke:currentColor;stroke-width:1.6}
.hw-sitk__mark text{
  fill:currentColor;
  /* TAY Flapjack es la única del pedido con licencia web (el resto son sólo
     desktop), y es justo la del sello. */
  font-family:'TAY Flapjack','Gravitica','Poppins',sans-serif;
  font-size:12.5px;letter-spacing:1px}
.hw-sitk__close{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.hw-sitk.is-open .hw-sitk__badge{background:var(--awb-color7,#E54511);border-color:var(--awb-color7,#E54511);color:#fff;transform:rotate(0deg)}
.hw-sitk.is-open .hw-sitk__label{opacity:0}
.hw-sitk.is-open .hw-sitk__close{opacity:1}

/* panel de acciones */
.hw-sitk__panel{
  order:-1;display:flex;flex-direction:column;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  position:absolute;left:0;bottom:88px;min-width:238px}
.hw-sitk.is-open .hw-sitk__panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .28s ease, transform .28s ease}

.hw-sitk__item{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  background:var(--awb-color1,#EFEAE4);border:1px solid rgba(66,75,10,.18);
  border-radius:44px;padding:11px 20px 11px 14px;
  color:var(--awb-color5,#424B0A);
  box-shadow:0 6px 18px rgba(25,24,12,.14);
  transition:background .2s, color .2s, transform .2s}
.hw-sitk__item:hover{background:var(--awb-color5,#424B0A);color:var(--awb-color1,#EFEAE4);transform:translateX(3px)}
.hw-sitk__ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:rgba(66,75,10,.10);color:inherit}
.hw-sitk__item:hover .hw-sitk__ico{background:rgba(239,234,228,.18)}
.hw-sitk__txt{display:flex;flex-direction:column;line-height:1.25}
.hw-sitk__txt b{font-family:'Gravitica','Poppins',sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600}
.hw-sitk__txt i{font-family:calluna,'Lora',Georgia,serif;font-style:normal;font-size:12px;opacity:.72;margin-top:2px}

/* aparición escalonada de los items */
.hw-sitk__panel .hw-sitk__item{transition-delay:0s}
.hw-sitk.is-open .hw-sitk__item:nth-child(1){transition-delay:.02s}
.hw-sitk.is-open .hw-sitk__item:nth-child(2){transition-delay:.06s}
.hw-sitk.is-open .hw-sitk__item:nth-child(3){transition-delay:.10s}
.hw-sitk.is-open .hw-sitk__item:nth-child(4){transition-delay:.14s}

/* el badge estático del hero lo reemplaza el widget persistente */
.hw-hero .hw-badge, .hw-collagewrap .hw-badge{display:none !important}

@media(max-width:900px){
  .hw-sitk{left:16px;bottom:18px}
  .hw-sitk__badge{width:66px;height:66px}
  .hw-sitk__panel{bottom:76px;min-width:210px}
}
@media(prefers-reduced-motion:reduce){
  .hw-sitk__panel,.hw-sitk__item,.hw-sitk__badge{transition:none !important}
}

/* ==================================================================
   SECCIÓN FORMULARIO "PLEASED TO MEET YOU" (destino de #form)
   ================================================================== */
.hw-form{position:relative;background:var(--awb-color2,#BAC3CB) !important;padding-top:150px !important}
.hw-form .fusion-row{max-width:1100px !important}
/* La marca de los árboles monta sobre el borde superior de la banda, mitad
   dentro y mitad fuera, como en el Figma. Antes se fabricaba un círculo naranja
   por CSS y se invertía el logo viejo a blanco: salía un semicírculo roto.
   El asset real ya trae el círculo, así que sólo hay que colocarlo. */
/* La columna de Avada es position:relative, así que el absoluto se anclaba a
   ella (justo encima del título) en vez de al borde de la banda. En esta
   sección no hay nada más posicionado, así que se neutraliza. */
.hw-form .fusion-builder-row,
.hw-form .fusion-layout-column,
.hw-form .fusion-column-wrapper{position:static !important}
.hw-form-icon{position:absolute !important;top:0;left:50%;transform:translate(-50%,-50%);
  width:62px;height:auto;margin:0 !important;z-index:2;
  background:none;border-radius:0;display:block;overflow:visible}
.hw-form-icon img{width:100% !important;height:auto !important;display:block;filter:none !important}
.f-title{font-family:'Gravitica','Oswald','Gravitica','Poppins',sans-serif !important;font-size:42px !important;
  line-height:1.12 !important;letter-spacing:1px !important;text-transform:uppercase !important;
  color:#19180c !important;font-weight:600 !important;text-align:center !important;
  /* caja estrecha para que caiga en dos líneas como el diseño */
  max-width:330px !important;margin-left:auto !important;margin-right:auto !important}
.f-title h1,.f-title h2,.f-title h3{font:inherit !important;color:inherit !important;margin:0 !important;
  letter-spacing:inherit !important;text-transform:inherit !important;line-height:inherit !important}
.f-intro{font-family:calluna,'Lora',Georgia,serif !important;font-size:17px !important;line-height:1.7 !important;
  color:#19180c !important;text-align:center !important;margin-top:16px !important}
/* placeholder del embed de HubSpot */
.hw-form-embed{margin-top:46px;min-height:220px;border:1px dashed rgba(25,24,12,.35);
  border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:36px 20px;font-family:'Gravitica','Poppins',sans-serif;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(25,24,12,.6);line-height:1.9}

/* ==================================================================
   COLLAGE AUTOPLAY (feature #4) — copiar TODO a Avada > Custom CSS
   ================================================================== */
/* sección contenedora: ventana con overflow oculto sobre el texto estático */
.hw-collage-auto{
  position:relative;overflow:hidden;
  /* 2026-08-31: 640 → 830, las fotos del slide crecieron ~1.5× para acercarse
     al Figma y las de la fila de abajo ya no cabían. */
  height:830px;width:100%;
  /* deja ver el texto estático detrás: fondo transparente */
  z-index:1;
  /* Antes era pointer-events:none. Ahora el contenedor recibe el ratón para
     poder regular la velocidad del slide con la posición del cursor; detrás
     sólo hay una lámina decorativa, así que no tapa nada interactivo.
     El cursor de redimensionado horizontal anuncia que se puede "empujar". */
  pointer-events:auto;cursor:ew-resize;
}
/* loop HORIZONTAL: dos sets idénticos lado a lado, se desplaza a la izquierda */
.hw-collage__track{
  position:absolute;left:0;top:0;height:100%;
  width:calc(var(--setW,1700px) * 2);
  animation:hw-collage-scroll var(--dur,40s) linear infinite;
  will-change:transform;
}
.hw-collage__track.is-paused{animation-play-state:paused}
@keyframes hw-collage-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(var(--setW,1700px) * -1))}
}
.hw-collage__set{position:absolute;top:0;left:0;height:100%}
.hw-collage__set + .hw-collage__set{left:var(--setW,1700px)}

.hw-collage__item{
  position:absolute;margin:0;line-height:0;
  aspect-ratio:var(--ar,1.3);
  transform:rotate(var(--rot,0deg));
  box-shadow:0 14px 34px rgba(25,24,12,.16);
  pointer-events:auto;
}
.hw-collage__item img{
  width:100%;height:100%;display:block;object-fit:cover;
}
/* marcos */
.hw-collage__item--shadow{box-shadow:0 22px 48px rgba(25,24,12,.26)}
.hw-collage__item--green{padding:14px;background:var(--awb-color5,#424B0A);box-shadow:0 16px 38px rgba(25,24,12,.20)}
/* Marco festoneado azul/plomo (la garza). El patrón de radial-gradient que
   había antes enmascaraba TODO el elemento y agujereaba la foto, así que
   apenas se veía la imagen. Mismo método que la foto del café: silueta rellena
   para recortar la foto + aro encima. */
.hw-collage__item--stamp{
  padding:0;background:none;box-shadow:none;
  -webkit-mask:none;mask:none;
}
.hw-collage__item--stamp img{
  -webkit-mask:url('/wp-content/uploads/2026/09/hw-scallop-mask.png') center/100% 100% no-repeat;
          mask:url('/wp-content/uploads/2026/09/hw-scallop-mask.png') center/100% 100% no-repeat;
}
.hw-collage__item--stamp::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/wp-content/uploads/2026/09/hw-scallop-frame-bluegrey.png') center/100% 100% no-repeat;
}

/* Carril propio del medallón (ver el porqué en hw-collage.js): dos discos
   separados --gap = ancho del contenedor + diámetro, desplazándose --gap px
   por ciclo a la misma velocidad que las fotos. Con esa separación siempre hay
   uno en pantalla y nunca dos. */
.hw-collage__badgelane{
  position:absolute;left:0;top:0;height:100%;
  width:calc(var(--gap,1600px) * 2);
  animation:hw-badge-scroll var(--badgeDur,40s) linear infinite;
  will-change:transform;pointer-events:none;z-index:2}
.hw-collage__badgelane.is-paused{animation-play-state:paused}
@keyframes hw-badge-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(var(--gap,1600px) * -1))}
}

/* Medallón "Heartwood · Town in the Trees": la H tomate quieta en el centro y
   el texto girando sobre una circunferencia (SVG textPath, no líneas rectas). */
.hw-collage__badge{
  position:absolute;border-radius:50%;
  background:var(--awb-color9,#38251C);color:var(--awb-color1,#EFEAE4);
  display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(25,24,12,.28);pointer-events:auto;
}
.hw-collage__badge > *{grid-area:1/1}
/* Gira en bucle y se PARA mientras el cursor está encima, para poder leer las
   dos líneas. Con el puntero sobre el círculo queda cubierto tanto pasar el
   ratón por encima como hacer scroll con la rueda ahí. */
.hw-collage__badge-ring{
  width:100%;height:100%;display:block;
  animation:hw-badge-spin 35s linear infinite;
}
.hw-collage__badge:hover .hw-collage__badge-ring{animation-play-state:paused}
/* El texto y la marca van en unidades del viewBox (200), así que al encoger el
   disco un 20% encogerían con él. Se suben ×1,25 (190/152) para que en pantalla
   se sigan viendo del mismo tamaño que antes: el círculo es lo que mengua. */
.hw-collage__badge-ring text{
  fill:var(--awb-color1,#EFEAE4);
  font-family:'Gravitica','Poppins',sans-serif;font-size:16.25px;font-weight:600;letter-spacing:3.75px;
}
.hw-collage__badge-mark{
  width:25%;height:25%;display:block;
  background:var(--awb-color7,#E54511);
  -webkit-mask:url('/wp-content/themes/Avada-Child-Theme/img/hw-h-mark.svg') center/contain no-repeat;
          mask:url('/wp-content/themes/Avada-Child-Theme/img/hw-h-mark.svg') center/contain no-repeat;
}
@keyframes hw-badge-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hw-collage__badge-ring{animation:none}}

/* capa de texto estático detrás del collage (opcional, si se usa .hw-explore) */
.hw-explore{position:relative}
.hw-explore .hw-collage-auto{position:absolute;inset:0}

@media(max-width:900px){
  .hw-collage-auto{height:560px}
  /* el min-height del contenedor tiene que seguir al del collage o queda un
     hueco vacío enorme debajo del slide en móvil */
  .hw-breaker .fusion-layout-column,
  .hw-breaker .fusion-column-wrapper,
  .hw-breaker .fusion-text{min-height:560px !important}
}
@media(prefers-reduced-motion:reduce){
  .hw-collage__track,
  .hw-collage__badgelane{animation:none}
}


/* ==== HERO VIDEO SCRIM (2026-08-31) ==================================
   The hero moved from a dark still to live oak canopy footage, which is
   brighter and moves — the white wordmark and headline lost contrast.
   This lays a soft gradient between the video and the content only.
   ==================================================================== */
.hw-hero{position:relative;}
.hw-hero > .fullwidth-video,
.hw-hero > .fullwidth-video-image{z-index:0;}
.hw-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,26,14,.52) 0%,rgba(18,26,14,.30) 45%,rgba(18,26,14,.58) 100%);
}
.hw-hero > .fusion-builder-row{position:relative;z-index:2;}

/* ==== s-vibe: text un-baked from an image (2026-08-31) ================
   vibe.png was a screenshot of the sentence "Where the vibe is small
   town, but the ideas are big." — unreadable to search engines and to
   screen readers, and it did not scale. Now real text; this recreates
   the marker highlight from the Figma design.
   ==================================================================== */
.hw-scatter .s-vibe p{margin:0}
/* El subrayador NO es un rectángulo: en el Figma es una franja pintada, con
   el borde irregular y una curva que sube hacia la derecha. Con un gradiente
   lineal no sale, así que se usa la franja real del diseño
   ("franja azul highlight.svg", que por dentro era un PNG) estirada al ancho
   del texto — al ser una mancha de pincel el estiramiento no se nota y
   funciona a cualquier tamaño de pantalla. */
.hw-highlight{
  background:url('/wp-content/uploads/2026/09/hw-highlight-band.png') no-repeat center/100% 100%;
  padding:.30em .34em .36em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ==== BRAND VIDEO BLOCK (2026-08-31) =================================
   Was a flat screenshot (collage_video.png). Now three layers, per Figma:
   a watercolour stripe backdrop, the video on top, and a play button.
   The video does NOT autoplay and does NOT loop — it holds the poster
   frame until the visitor presses play.
   ==================================================================== */
.hw-vidblock{
  /* En el Figma el bloque monta sobre el hero: ~30% de su alto queda por
     encima del borde inferior del vídeo. 0.202 ≈ 0.30 × (alto/ancho) del
     bloque; al ir en calc() sobre min(880px,100%) el solape se mantiene
     proporcional en cualquier ancho de pantalla.
     Si se cambia el vídeo por otro de proporción distinta, recalcular. */
  margin-top:calc(min(880px, 100%) * -0.202);
  z-index:3;
  position:relative; max-width:880px; margin-left:auto; margin-right:auto; padding:3.2% 4.4%;
  background-image:url('/wp-content/uploads/2026/08/hw-video-backdrop-stripes.png');
  background-size:100% 100%; background-repeat:no-repeat; background-position:center;
}
.hw-vidblock__stage{position:relative; line-height:0;}
.hw-vidblock__video{width:100%; height:auto; display:block; border-radius:2px; background:#000;}
.hw-vidblock__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; padding:0; border:0; background:none; cursor:pointer;
  transition:transform .18s ease, opacity .18s ease; z-index:2;
}
.hw-vidblock__play svg{width:100%; height:100%; display:block;}
.hw-vidblock__play:hover{transform:translate(-50%,-50%) scale(1.07);}
.hw-vidblock__play:focus-visible{outline:3px solid var(--awb-color7,#E54511); outline-offset:4px; border-radius:50%;}
.hw-vidblock.is-playing .hw-vidblock__play{opacity:0; pointer-events:none;}
@media (max-width:640px){ .hw-vidblock__play{width:52px;height:52px;} }

/* H mark: use the real SVG outline instead of the PNG (crisper at any size) */
.s-hmark{
  -webkit-mask:url('/wp-content/themes/Avada-Child-Theme/img/hw-h-mark.svg') center/contain no-repeat;
          mask:url('/wp-content/themes/Avada-Child-Theme/img/hw-h-mark.svg') center/contain no-repeat;
}

/* ==================================================================
   VÍDEO DECORATIVO EN BUCLE  [hw_loop_video]
   Sustituye una foto dentro del collage (p. ej. el riego de la Home).
   Sin sonido, sin controles y en bucle; el poster va de fondo del
   contenedor para que con prefers-reduced-motion baste con ocultar el
   <video> y quede el fotograma fijo.
   ================================================================== */
.hw-loopvid{
  position:relative;line-height:0;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hw-loopvid__video{
  display:block;width:100%;height:100%;
  aspect-ratio:var(--hw-loopvid-ratio,3/2);object-fit:cover}
@media (prefers-reduced-motion:reduce){
  .hw-loopvid{aspect-ratio:var(--hw-loopvid-ratio,3/2)}
  .hw-loopvid__video{display:none}
}

/* ==================================================================
   BOTONES: la línea / la flecha crecen de izquierda a derecha al pasar
   el cursor (y con foco de teclado, que si no el efecto no existe para
   quien navega con tabulador).
   ================================================================== */

/* a) CTA subrayado — "Find Your Home". La línea fina de reposo se queda;
      encima entra una segunda, más gruesa, barriendo de izquierda a derecha. */
.s-cta p{position:relative}
.s-cta p::after{
  content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:3px;
  background:var(--awb-color7,#E54511);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.s-cta:hover p::after,
.s-cta:focus-within p::after{transform:scaleX(1)}

/* b) CTA con flecha — la línea del asta crece y la punta viaja con ella.
      Se dibuja en dos capas del mismo ::after (punta a la derecha, asta al
      ancho de la caja) para poder animar sólo el ancho.

      La geometría es la del Figma (`CTA_primary` 12076:589, cuyo vector
      `Line 2` es una línea de 46 px con arrowhead): trazo de 1 px, punta a
      45° con brazos de 4,5 px, y remates REDONDOS. Lo importante es dónde
      acaba cada capa — BugHerd #23: el asta iba al 100 % de la caja y la
      punta, de 8 px de ancho, tenía el vértice 1,5 px antes del borde, así
      que asomaba un muñón de línea por delante de la flecha. Ahora el
      sprite mide 4,18 px (vértice + el radio del remate) y el asta se queda
      en `calc(100% - .5px)`, es decir muere en el CENTRO del vértice, justo
      como en el Figma, y el redondeo la tapa. Al cambiar el ancho del
      sprite hay que mover ese descuento. */
.l-cta p::after, .s2-cta p::after, .lh-cta p::after{
  width:34px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat left center/calc(100% - .5px) 1px;
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
/* El crecimiento en hover se quitó el 22-09 (noche): ahora el gesto es único
   para todo el sitio y vive en el bloque CTA · ROLLOVER DEL FIGMA — el asta se
   recorta por la cola con clip-path y no cambia ninguna caja. */

@media (prefers-reduced-motion:reduce){
  .s-cta p::after{transform:scaleX(1);transition:none}
  .l-cta p::after,.s2-cta p::after,.lh-cta p::after{transition:none}
}

/* ==================================================================
   MAPA REGIONAL (Location) — el asset del cliente es apaisado 1.86:1 y el
   hueco del Figma es casi cuadrado, así que se encuadra a la izquierda
   para no perder Heartwood ni Savannah en el recorte.
   ================================================================== */
.l-map img{object-position:8% center !important}

/* ==================================================================
   BOTONES: "estirar" la tipografía sustituta
   La fuente del diseño (Gravitica) es más alta y estrecha que Jost, que es la
   que estamos usando de sustituta. Hasta que llegue la woff2 real, un
   scaleY de +12% acerca bastante la proporción de las mayúsculas sin tocar el
   ancho ni el grosor aparente del trazo.
   La flecha se contra-escala para que no salga ovalada.
   PARA QUITARLO cuando lleguen las fuentes: --hw-btn-stretch:1
   ================================================================== */
:root{--hw-btn-stretch:1.12}
.s-cta p, .l-cta p, .s2-cta p, .lh-cta p, .hw-el-cta{
  transform:scaleY(var(--hw-btn-stretch));
  transform-origin:center center}
.l-cta p::after, .s2-cta p::after, .lh-cta p::after{
  transform:scaleY(calc(1 / var(--hw-btn-stretch)))}

/* ==================================================================
   MAPA REGIONAL (Location)
   El asset nuevo del cliente ya viene casi cuadrado (2054×2154 ≈ el
   570/598 del hueco), así que se ve entero: no hace falta reencuadrar.
   ================================================================== */
.l-map img{object-position:center center !important}

/* El fondo del banner "Explore the life" pasó de <img> a [hw_loop_video]:
   .hw-loopvid trae position:relative, que pisaba el absolute que tenía el
   <img>. El wrapper vuelve a ser la capa de fondo y el vídeo llena la caja
   (sin aspect-ratio, que aquí manda el banner). */
.hw-el-banner .hw-el-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hw-el-banner .hw-el-bg .hw-loopvid__video{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}

/* ==================================================================
   FORMULARIO "PLEASED TO MEET YOU" — rejilla del Figma
   Los campos de Avada Forms no tienen atributo de ancho: salen todos
   apilados a ancho completo. La retícula se monta aquí, con el <form>
   como grid de 12 columnas y cada campo ocupando su tramo.
   Se usa :has() para engancharse al id del input y no al orden, así
   reordenar campos en Avada no desmonta el layout; donde :has() no
   exista, cada campo cae a fila completa (degradación aceptable).
   ================================================================== */
.hw-form .fusion-form-form-wrapper{max-width:764px;margin:46px auto 0}
.hw-form form.fusion-form{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:34px;row-gap:24px;align-items:end}
.hw-form .fusion-form-field{margin:0 !important;grid-column:1 / -1}
.hw-form .fusion-form-field:has(#firstname),
.hw-form .fusion-form-field:has(#lastname),
.hw-form .fusion-form-field:has(#email_address){grid-column:span 6}
.hw-form .fusion-form-field:has(#phone),
.hw-form .fusion-form-field:has(#zip){grid-column:span 3}

/* Campos de texto: sólo una línea inferior, y la etiqueta pasa a ser el
   placeholder. El <label> NO se borra, se recorta visualmente, para que los
   lectores de pantalla lo sigan anunciando (un placeholder solo no basta). */
.hw-form .fusion-form-field > div.fusion-form-label-wrapper{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hw-form input[type="text"],
.hw-form input[type="email"],
.hw-form input[type="tel"]{
  background:transparent !important;border:0 !important;
  border-bottom:1px solid rgba(25,24,12,.4) !important;border-radius:0 !important;
  padding:8px 0 !important;height:auto !important;box-shadow:none !important;
  font-family:calluna,'Lora',Georgia,serif !important;font-size:16px !important;
  color:var(--awb-color8,#19180c) !important}
.hw-form input[type="text"]:focus,
.hw-form input[type="email"]:focus,
.hw-form input[type="tel"]:focus{
  border-bottom-color:var(--awb-color8,#19180c) !important;outline:none !important}
.hw-form input::placeholder{color:rgba(25,24,12,.72);opacity:1}

/* Radios y checkboxes en línea con su etiqueta, no apilados debajo.
   El <legend> no se lleva bien con flex, así que va flotado y las opciones
   fluyen a su lado. */
.hw-form .fusion-form-radio-field fieldset,
.hw-form .fusion-form-checkbox-field fieldset{border:0;margin:0;padding:0;display:block}
.hw-form .fusion-form-radio-field fieldset::after,
.hw-form .fusion-form-checkbox-field fieldset::after{content:"";display:table;clear:both}
/* La etiqueta flota y las opciones fluyen a su lado; al pasar de línea vuelven
   al margen izquierdo, como en el Figma. Para que ese salto sea limpio, el alto
   del flotado tiene que ser EXACTAMENTE el de una fila de opciones: si no,
   alguna opción se queda sola en una línea intermedia (era el caso de
   "Commute to nearby Savannah"). De ahí el height fijo en ambos. */
.hw-form .fusion-form-radio-field legend,
.hw-form .fusion-form-checkbox-field legend{
  float:left;width:auto;padding:0;margin:0 24px 0 0;
  height:34px;line-height:34px;
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;color:var(--awb-color6,#002942)}
.hw-form .fusion-form-radio,
.hw-form .fusion-form-checkbox{
  display:inline-flex !important;align-items:center;white-space:nowrap;
  margin:0 26px 0 0 !important;height:34px;line-height:34px;width:auto !important}
.hw-form .fusion-form-radio label,
.hw-form .fusion-form-checkbox label{
  margin:0 !important;font-family:calluna,'Lora',Georgia,serif;font-size:15px;
  padding-left:1.7em !important;color:var(--awb-color4,#6D7EA0) !important;cursor:pointer}
/* al marcar, la etiqueta se oscurece a Deepwater, como el recuadro */
.hw-form .fusion-form-radio:has(input:checked) label,
.hw-form .fusion-form-checkbox:has(input:checked) label{color:var(--awb-color6,#002942) !important}

/* Casillas a medida. OJO: Avada esconde el <input> (opacity:0, absolute) y
   dibuja la casilla con los pseudo-elementos de la ETIQUETA:
     label::before → el recuadro
     input:checked + label::after → un cuadrito relleno (el turquesa que se veía)
   Así que hay que pintar ahí, no sobre el input. En el diseño la casilla
   marcada es un cuadro Deepwater relleno con el tick en crema. */
.hw-form .fusion-form-checkbox label:before,
.hw-form .fusion-form-radio label:before{
  width:16px !important;min-width:16px !important;height:16px !important;
  border:1px solid var(--awb-color4,#6D7EA0) !important;border-radius:0 !important;
  background:transparent !important}
.hw-form .fusion-form-radio label:before{border-radius:50% !important}
.hw-form .fusion-form-checkbox input:checked+label:before,
.hw-form .fusion-form-radio input:checked+label:before{
  background:var(--awb-color6,#002942) !important;
  border-color:var(--awb-color6,#002942) !important}
/* el cuadrito relleno se convierte en un tick */
.hw-form .fusion-form-checkbox input:checked+label:after{
  content:"" !important;width:4px !important;height:8px !important;
  left:6px !important;top:calc(50% - 1px) !important;
  background:none !important;border-radius:0 !important;
  border:solid var(--awb-color1,#EFEAE4) !important;border-width:0 1.7px 1.7px 0 !important;
  transform:translateY(-50%) rotate(45deg) !important}
.hw-form .fusion-form-radio input:checked+label:after{
  width:6px !important;height:6px !important;left:5px !important;
  background:var(--awb-color1,#EFEAE4) !important}
.hw-form .fusion-form-checkbox input:focus-visible+label:before,
.hw-form .fusion-form-radio input:focus-visible+label:before{
  outline:2px solid var(--awb-color6,#002942);outline-offset:2px}

/* Última fila: filete a todo el ancho, y debajo el texto legal a la izquierda
   con el botón a la derecha. El filete es el ::before del <form>: en un grid,
   el pseudo-elemento del contenedor ES un ítem más, y con order se le manda al
   final en vez de al principio. */
.hw-form form.fusion-form::before{
  content:"";grid-column:1 / -1;order:1;height:0;margin-top:16px;
  border-top:1px solid rgba(25,24,12,.35)}
.hw-form .hw-form-consent{order:2;grid-column:span 7;align-self:start}
.hw-form .hw-form-consent p.label{
  margin:0;font-family:calluna,'Lora',Georgia,serif;font-size:12px;line-height:1.7;
  color:rgba(25,24,12,.72);max-width:430px}
.hw-form .hw-form-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hw-form .form-submission-notices{order:4;grid-column:1 / -1}
.hw-form .fusion-form-submit-field{
  order:3;grid-column:span 5;align-self:start;display:flex;justify-content:flex-end}
.hw-form .form-form-submit{
  background:var(--awb-color7,#E54511) !important;border:0 !important;border-radius:0 !important;
  padding:15px 34px !important;height:auto !important;box-shadow:none !important;
  display:inline-flex !important;align-items:center;gap:16px}
.hw-form .form-form-submit .fusion-button-text{
  font-family:'Gravitica','Poppins',sans-serif !important;font-size:13px !important;font-weight:600 !important;
  letter-spacing:2px !important;text-transform:uppercase !important;color:#EFEAE4 !important}
/* Flecha en dos capas (punta anclada a la derecha + asta como gradiente) para
   poder animar sólo el ancho, igual que los CTA del resto de la página. */
.hw-form .form-form-submit::after{
  content:"";width:46px;height:11px;flex:0 0 auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23EFEAE4' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color1,#EFEAE4),var(--awb-color1,#EFEAE4)) no-repeat left center/calc(100% - .5px) 1px;
  transition:width .38s cubic-bezier(.22,.61,.36,1)}
/* El hover lo pintaba de negro (Avada calcula un color oscuro por variables).
   Se queda en tomate: lo que se mueve es la palabra y lo que crece es la flecha. */
.hw-form .form-form-submit:hover,
.hw-form .form-form-submit:focus-visible{background:var(--awb-color7,#E54511) !important}
.hw-form .form-form-submit .fusion-button-text{
  transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.hw-form .form-form-submit:hover .fusion-button-text,
.hw-form .form-form-submit:focus-visible .fusion-button-text{transform:translateX(-3px)}
.hw-form .form-form-submit:hover::after,
.hw-form .form-form-submit:focus-visible::after{width:66px}
@media(prefers-reduced-motion:reduce){
  .hw-form .form-form-submit::after,
  .hw-form .form-form-submit .fusion-button-text{transition:none}
}

/* Campos de "Commercial Opportunities" (BugHerd #24/#96). Salen sólo al marcar
   esa casilla: lo hace la lógica condicional de Avada (atributo logics del
   campo), no este CSS. La pregunta ocupa dos líneas, así que aquí la etiqueta
   NO flota: va encima y las opciones debajo, como en el Figma 15109:10473.
   El textarea sí enseña su etiqueta (la regla general la recorta). */
.hw-form .fusion-form-checkbox-field.hw-form-commercial legend{
  float:none;display:block;height:auto;line-height:1.35;margin:0 0 6px;max-width:none}
.hw-form .fusion-form-field.hw-form-commercial-text > div.fusion-form-label-wrapper{
  position:static;width:auto;height:auto;margin:0 0 6px;overflow:visible;
  clip:auto;clip-path:none;white-space:normal}
/* Avada le pone a la etiqueta Lora 500 en tinta: sin !important no se ve Calluna */
.hw-form .hw-form-commercial-text label{
  font-family:calluna,'Lora',Georgia,serif !important;font-weight:400 !important;
  font-size:16px !important;line-height:1.35 !important;
  color:var(--awb-color6,#002942) !important;margin:0 !important}
.hw-form .hw-form-commercial-text textarea{
  display:block;width:100%;height:119px;min-height:119px;resize:vertical;
  background:transparent !important;border:1px solid var(--awb-color4,#6D7EA0) !important;
  border-radius:0 !important;box-shadow:none !important;padding:10px 12px !important;
  font-family:calluna,'Lora',Georgia,serif !important;font-size:16px !important;
  color:var(--awb-color8,#19180c) !important}
.hw-form .hw-form-commercial-text textarea:focus{
  border-color:var(--awb-color6,#002942) !important;outline:none !important}

@media(max-width:760px){
  .hw-form{padding-top:120px !important}
  .hw-form form.fusion-form{column-gap:20px;row-gap:20px}
  .hw-form .fusion-form-field:has(#firstname),
  .hw-form .fusion-form-field:has(#lastname),
  .hw-form .fusion-form-field:has(#email_address),
  .hw-form .fusion-form-field:has(#phone),
  .hw-form .fusion-form-field:has(#zip){grid-column:1 / -1}
  .hw-form .fusion-form-radio-field legend,
  .hw-form .fusion-form-checkbox-field legend{float:none;display:block;margin:0 0 6px}
  .hw-form .hw-form-consent,
  .hw-form .fusion-form-submit-field{grid-column:1 / -1}
  .hw-form .fusion-form-submit-field{justify-content:flex-start;margin-top:8px}
}

/* reCAPTCHA v3 con el sello oculto (el aviso va en el texto de consentimiento):
   su contenedor sale de la rejilla para no dejar un hueco sobre la raya. */
.hw-form .fusion-form-recaptcha-field{position:absolute !important;width:1px;height:1px;margin:0 !important;padding:0 !important;overflow:hidden;clip-path:inset(50%)}

/* ==================================================================
   FOOTER L3 — el único footer del sitio
   La sección "Global Footer" de Avada Layouts (fusion_tb_section 344)
   trae DOS contenedores: `.hw-ftr` (marca + 3 columnas de enlaces) y
   `.hw-ftr-bar` (redes, copyright, legal y sello EHO). Todas las layouts
   apuntan ya a esa sección — incluido el Global Layout por defecto, que
   es lo que evita que una página nueva se quede sin footer.

   Las medidas salen del frame del Figma (lienzo 1440, contenido de
   x=140 a x=1302 → 1162 px):
     marca 591 · col1 200 · col2 192 · col3 179
   Los tamaños de letra están calibrados contra ese frame midiendo el
   ancho de tinta, no copiados del inspector: las tres fuentes son
   sustitutas (Cormorant por Juana, Source Serif por Calluna, Jost por
   Gravitica) y con el mismo cuerpo no ocupan lo mismo.
   ================================================================== */
.hw-ftr,
.hw-ftr-bar{
  background:var(--awb-color5,#424B0A) !important;
  color:var(--awb-color1,#EFEAE4);
  position:relative}

/* El ancho de contenido NO se puede fijar con max-width en `.fusion-row`:
   Avada le escribe `max-width:calc(100% + 0px) !important` en el atributo
   style y un inline !important gana siempre. Se hace con el padding del
   contenedor, que Avada sí deja en una variable CSS. */
.hw-ftr,
.hw-ftr-bar{
  padding-left:max(40px, calc((100% - 1162px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1162px) / 2)) !important}

/* La pincelada rasgada del borde superior.
   Va FUERA del footer (bottom:100%) para que las motas del pincel seco
   dejen ver la sección de arriba, que es lo que hace el Figma. El PNG es
   de 1600×269 y se comprime en vertical al 58% —igual que en el diseño—
   para que la franja pintada mida los ~93 px del frame y no 242. */
.hw-ftr::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;
  aspect-ratio:1440/155;
  background:url('/wp-content/uploads/2026/09/hw-footer-brush.png') center bottom/100% 100% no-repeat;
  pointer-events:none}

.hw-ftr{padding-top:33px !important}
.hw-ftr-bar{padding-top:53px !important;padding-bottom:57px !important}

.hw-ftr .fusion-text p,
.hw-ftr-bar .fusion-text p{margin:0}
.hw-ftr .fusion-text,
.hw-ftr-bar .fusion-text{color:var(--awb-color1,#EFEAE4)}

/* --- retícula: marca + 3 columnas de enlaces ---------------------- */
.hw-ftr .fusion-builder-row,
.hw-ftr-bar .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;align-items:flex-start}
.hw-ftr-bar .fusion-builder-row{align-items:center}
.hw-ftr .fusion-layout-column,
.hw-ftr-bar .fusion-layout-column{margin:0 !important;float:none !important}
.hw-ftr .hw-ftr__brand{width:50.86% !important}
.hw-ftr .hw-ftr__nav--1{width:17.21% !important}
.hw-ftr .hw-ftr__nav--2{width:16.52% !important}
.hw-ftr .hw-ftr__nav--3{width:15.41% !important}

/* --- bloque de marca --------------------------------------------- */
/* El reset y las márgenes por bloque van al MISMO nivel de especificidad
   (.hw-ftr__brand .x); si el reset se deja como `.hw-ftr__brand
   .fusion-text` gana a `.hw-ftr__wordmark` aunque los dos lleven
   !important, y el bloque entero se apelmaza. */
.hw-ftr__brand .fusion-text{margin:0 !important}
.hw-ftr__wordmark a{
  font-family:'Juana','Playfair Display',Georgia,serif;
  font-size:27px;letter-spacing:7.5px;text-transform:uppercase;
  color:var(--awb-color1,#EFEAE4);text-decoration:none;white-space:nowrap;
  transition:opacity .2s ease}
/* Mismo fallo que el email (#101): sin color propio en hover mandaba el
   `a:hover` global de Avada (#424B0A = el fondo del pie) y el logo se fundía.
   Se queda en crema y baja la opacidad, como el logo de la cabecera. */
.hw-ftr__wordmark a:hover,
.hw-ftr__wordmark a:focus-visible{color:var(--awb-color1,#EFEAE4) !important;opacity:.75}
.hw-ftr__brand .hw-ftr__wordmark{margin-bottom:38px !important}

/* "COME SEE US" y "MARKETING INQUIRIES" */
.hw-ftr__label p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:1.4px;text-transform:uppercase;line-height:1.2}
/* Negativo a propósito: el interlineado de Jost deja más aire bajo la
   etiqueta que el de Gravitica en el frame. */
.hw-ftr__brand .hw-ftr__label{margin-bottom:-3px !important}

.hw-ftr__addr p{font-family:calluna,'Lora',Georgia,serif;font-size:15px;line-height:1.45}
.hw-ftr__brand .hw-ftr__addr{margin-bottom:27px !important}

.hw-ftr__mail p{font-family:calluna,'Lora',Georgia,serif;font-size:15px;line-height:1.45}
.hw-ftr__mail a{
  color:var(--awb-color1,#EFEAE4);text-decoration:underline;
  text-underline-offset:2px;transition:color .2s ease,opacity .2s ease}
/* BugHerd #101 (2026-09-23): el email «desaparecía» en hover. Sólo llevaba
   opacity:.7 sin color propio, así que mandaba el `a:hover` global de Avada
   (--link_hover_color = #424B0A), que es el mismo Boxwood del fondo del pie.
   Ahora va al verde brillante de los demás enlaces del pie. */
.hw-ftr__mail a:hover,
.hw-ftr__mail a:focus-visible{color:var(--awb-color3,#CEC439) !important;opacity:1}

/* --- columnas de enlaces ------------------------------------------ */
.hw-ftr__nav .fusion-text{margin:0 !important;padding-top:2px}
.hw-ftr__nav a{
  display:block;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.55;
  /* BugHerd #99 (2026-09-24): tracking = el de los enlaces pequeños del panel
     de menú (1,5 px); iba a .6 */
  color:var(--awb-color1,#EFEAE4);text-decoration:none;
  margin-bottom:10px;padding-right:14px;
  transition:color .2s ease}
.hw-ftr__nav a:last-child{margin-bottom:0}
.hw-ftr__nav a:hover{color:var(--awb-color3,#CEC439)}

/* --- barra inferior ----------------------------------------------- */
.hw-ftr-bar .hw-ftr__social{width:50.86% !important}
.hw-ftr-bar .hw-ftr__meta{width:49.14% !important}

/* Avada compensa el relleno de sus iconos con una margen negativa en el
   envoltorio; sin !important la fila arrancaba 7 px a la izquierda del
   borde de contenido y no cuadraba con la vertical del logotipo. */
.hw-ftr__social .fusion-social-networks{margin:0 !important}
/* BugHerd #102 (25-09, Alex): «some space got added between the icons, can you
   just nudge them closer?» 12 → 8 px (la «f» es estrecha y a 12 se veían sueltos). */
.hw-ftr__social .fusion-social-networks-wrapper{display:flex;align-items:center;gap:8px;margin:0 !important}
.hw-ftr__social .fusion-social-network-icon{
  margin:0 !important;color:var(--awb-color1,#EFEAE4) !important;
  transition:color .2s ease}
/* BugHerd #102 (2026-09-23): en hover salían en azul grisáceo (#6D7EA0). La
   regla de Avada
     .fusion-social-links .fusion-social-networks.color-type-custom
       .fusion-social-network-icon:hover{color:var(--awb-icon-colors-hover) !important}
   pesa 0,5,0 con !important y su hoja va DESPUÉS: gana cualquier empate. En
   vez de pelear la especificidad se le da el verde a su propia variable,
   definida en el icono (el ancestro más cercano manda). */
.hw-ftr__social .fusion-social-network-icon{--awb-icon-colors-hover:var(--awb-color3,#CEC439)}
.hw-ftr__social .fusion-social-network-icon:hover,
.hw-ftr__social .fusion-social-network-icon:focus-visible{color:var(--awb-color3,#CEC439) !important}

.hw-ftr__meta .fusion-text{margin:0 !important}
.hw-ftr__meta .fusion-text p{display:flex;align-items:center}
/* 11px, no 13: Source Serif es más ancha que la Calluna del diseño y a
   13px la línea legal se comía el sello EHO. Calibrado por ancho de
   tinta contra el frame (Sitemap…Accessibility Policy = 323 px). */
.hw-ftr__copy,
.hw-ftr__legal,
.hw-ftr__legal a{font-family:calluna,'Lora',Georgia,serif;font-size:11px;line-height:1.4;
  color:var(--awb-color1,#EFEAE4)}
/* 205 de los 571 px del bloque: deja los enlaces legales arrancando en la
   misma vertical que la 2ª columna de enlaces, como en el Figma. */
.hw-ftr__copy{flex:0 0 35.9%}
/* Sin flex: en flex cada enlace era un ítem y la fila se partía dejando
   una barra "|" suelta al principio de la línea siguiente. */
.hw-ftr__legal{flex:1 1 auto;white-space:nowrap}
.hw-ftr__legal a{text-decoration:none;transition:color .2s ease}
.hw-ftr__legal a:hover{color:var(--awb-color3,#CEC439)}
/* El separador "|" del diseño; no se escribe en el contenido para que
   añadir o quitar un enlace no deje una barra suelta. */
.hw-ftr__legal a + a::before{content:"|";margin:0 4px;opacity:.75}
/* BugHerd #100 (2026-09-24): el sello es el del Figma de Strada
   (`web-assets/figma-2026-09-16/EHO.png`, 75×53 → 1,415:1), redibujado nítido
   a 4× en `hw-eho-mark-v3.png` (80×57) y pintado a 20×14. Una primera versión
   (v2, casi cuadrada, 20×19) quedaba demasiado cuadrada — Santiago, 24-09. */
.hw-ftr__eho{
  flex:0 0 auto;margin-left:auto;padding-left:14px;
  width:20px;height:14px;box-sizing:content-box;display:block}

/* --- Ē -------------------------------------------------------------
   Ya NO hace falta ningún truco: las cinco webfonts sustitutas llevan
   añadidos los glifos `Ē`/`ē` (U+0112/U+0113), que venían sin ellos y hacían
   que "Bē Health" saliera como "BE¯HEALTH" en todo el sitio.
   Ver `build-scripts/fonts/add-emacron.py`.
   ------------------------------------------------------------------- */

/* --- tablet -------------------------------------------------------- */
@media(max-width:1100px){
  .hw-ftr .fusion-builder-row{flex-wrap:wrap !important}
  .hw-ftr .hw-ftr__brand{width:100% !important;margin-bottom:56px !important}
  .hw-ftr .hw-ftr__nav--1,
  .hw-ftr .hw-ftr__nav--2,
  .hw-ftr .hw-ftr__nav--3{width:33.33% !important}
  .hw-ftr-bar .hw-ftr__social{width:auto !important;flex:0 0 auto;margin-right:40px !important}
  .hw-ftr-bar .hw-ftr__meta{width:auto !important;flex:1 1 auto}
  .hw-ftr__copy{flex:0 0 auto;margin-right:26px}
}

/* --- móvil --------------------------------------------------------- */
@media(max-width:760px){
  .hw-ftr__wordmark a{font-size:22px;letter-spacing:6px}
  .hw-ftr .hw-ftr__brand{margin-bottom:44px !important}
  .hw-ftr .hw-ftr__nav--1,
  .hw-ftr .hw-ftr__nav--2,
  .hw-ftr .hw-ftr__nav--3{width:50% !important;margin-bottom:26px !important}
  .hw-ftr-bar .fusion-builder-row{flex-wrap:wrap !important}
  .hw-ftr-bar .hw-ftr__social{width:100% !important;margin:0 0 28px !important}
  .hw-ftr-bar .hw-ftr__meta{width:100% !important}
  /* En una sola columna el copyright, los legales y el sello se apilan;
     en fila se quedarían en 9 px y sin aire. */
  .hw-ftr__meta .fusion-text p{flex-wrap:wrap;row-gap:12px}
  .hw-ftr__copy{flex:0 0 100%;margin-right:0}
  .hw-ftr__legal{flex:0 0 100%;white-space:normal}
  /* flex-basis:100% ganaba al width:19px y estiraba el PNG a todo el ancho
     con 14 px de alto: el sello salía como una raya. */
  .hw-ftr__eho{margin:4px auto 0 0;padding-left:0;flex:0 0 auto;width:20px}
}

/* --- móvil: los enlaces en DOS columnas, como el Figma (Home - Mobile) ----
   2026-09-24 (Santiago: «the footer menu nav on mobile looks all out of
   alignment»). Las tres columnas de Avada guardaban sus anchos de escritorio
   (17/16/15 % con !important) y a 375 px se pisaban unas a otras. Ahora la
   fila es una rejilla: la marca ocupa todo el ancho y las columnas se
   disuelven (`display:contents`), así los 16 enlaces llenan dos columnas de 8
   de arriba abajo en su orden. */
@media(max-width:760px){
  .hw-ftr .fusion-builder-row{
    display:grid !important;grid-template-columns:1fr 1fr;
    grid-template-rows:auto repeat(8, auto);grid-auto-flow:column;
    column-gap:20px;row-gap:0}
  .hw-ftr .hw-ftr__brand{grid-column:1 / -1;grid-row:1;width:100% !important;margin-bottom:34px !important}
  /* Avada fuerza `display:flex` en sus columnas con más peso: se sube la
     especificidad con la fila y el body delante. */
  body .hw-ftr .fusion-builder-row > .hw-ftr__nav.fusion-layout-column,
  body .hw-ftr .hw-ftr__nav > .fusion-column-wrapper,
  body .hw-ftr .hw-ftr__nav .fusion-column-wrapper > .fusion-text,
  body .hw-ftr .hw-ftr__nav .fusion-text > p{display:contents !important}
  .hw-ftr__nav a,.hw-ftr__nav a:last-child{margin-bottom:10px;padding-right:0}
}

/* --- BugHerd #184 (25-09) · el pie móvil del comp de Strada ---------------
   («slightly different than what is in the module library but it is what we
   had on the design page»): marca · 16 enlaces en dos columnas (Visit Us
   arriba a la izquierda, Commercial Opportunities arriba a la derecha) ·
   filete · «Come see us» con los iconos sociales a la derecha de la
   dirección · Marketing inquiries · filete · copyright, legales y sello.
   La marca también se disuelve (`display:contents`) y la rejilla pasa a
   rellenar por FILAS; el orden lo da `order`. Los iconos de la barra no
   pueden subir a la fila de la dirección (son otro contenedor), así que la
   sección lleva una segunda copia sólo para móvil (`.hw-ftr__social--m`). */
.hw-ftr__social--m{display:none !important}
@media(max-width:760px){
  .hw-ftr .fusion-builder-row{
    grid-template-columns:minmax(0,142px) minmax(0,1fr) !important;column-gap:18px !important;
    grid-template-rows:none !important;grid-auto-flow:row !important}
  body .hw-ftr .fusion-builder-row > .hw-ftr__brand.fusion-layout-column,
  body .hw-ftr .hw-ftr__brand > .fusion-column-wrapper{display:contents !important}
  .hw-ftr .hw-ftr__wordmark{order:0;grid-row:1;grid-column:1 / -1;margin:0 0 34px !important}
  /* «Commercial Opportunities» mide ~171 px: a partir de 385 de pantalla cabe
     en una línea y así no abre un hueco bajo «Visit Us» (las dos columnas
     comparten filas). Más estrecho se parte en dos, como en el comp. */
  .hw-ftr .hw-ftr__nav a{white-space:normal}
  .hw-ftr__nav--2 a:nth-of-type(3){order:1}   /* Visit Us */
  .hw-ftr__nav--2 a:nth-of-type(2){order:2}   /* Commercial Opportunities */
  .hw-ftr__nav--1 a:nth-of-type(1){order:3}   /* Our Story */
  .hw-ftr__nav--2 a:nth-of-type(4){order:4}   /* Homebuilders */
  .hw-ftr__nav--1 a:nth-of-type(2){order:5}   /* Location */
  .hw-ftr__nav--2 a:nth-of-type(5){order:6}   /* Bē Health */
  .hw-ftr__nav--1 a:nth-of-type(3){order:7}   /* Explore Heartwood */
  .hw-ftr__nav--2 a:nth-of-type(6){order:8}   /* FAQ */
  .hw-ftr__nav--1 a:nth-of-type(4){order:9}   /* Live Here */
  .hw-ftr__nav--3 a:nth-of-type(1){order:10}  /* Agents & Brokers */
  .hw-ftr__nav--1 a:nth-of-type(5){order:11}  /* Schools */
  .hw-ftr__nav--3 a:nth-of-type(2){order:12}  /* Gallery */
  .hw-ftr__nav--1 a:nth-of-type(6){order:13}  /* Wellness */
  .hw-ftr__nav--3 a:nth-of-type(3){order:14}  /* Residents */
  .hw-ftr__nav--2 a:nth-of-type(1){order:15}  /* What's Happening */
  .hw-ftr__nav--3 a:nth-of-type(4){order:16}  /* Raydient Places & Properties */
  .hw-ftr .hw-ftr__nav a{align-self:start}
  /* «Come see us»: filete a todo el ancho encima */
  .hw-ftr .hw-ftr__brand .hw-ftr__label:nth-of-type(2){
    order:20;grid-row:10;grid-column:1 / -1;margin:18px 0 0 !important;padding-top:28px;
    border-top:1px solid rgba(239,234,228,.3)}
  /* dirección a todo el ancho y los iconos en la MISMA fila, a la derecha y
     a la altura de la segunda línea (filas explícitas para poder solaparlos) */
  .hw-ftr .hw-ftr__brand .hw-ftr__addr{order:21;grid-row:11;grid-column:1 / -1;margin:0 0 24px !important}
  .hw-ftr .hw-ftr__brand .hw-ftr__social--m{order:22;grid-row:11;grid-column:2;display:flex !important;
    justify-content:flex-end;align-self:end;margin:0 0 28px !important}
  .hw-ftr__social--m .fusion-social-networks{margin:0 !important}
  .hw-ftr__social--m .fusion-social-networks-wrapper{display:flex;gap:8px;margin:0 !important}
  .hw-ftr .hw-ftr__brand .hw-ftr__label:nth-of-type(4){order:23;grid-row:12;grid-column:1 / -1}
  .hw-ftr .hw-ftr__brand .hw-ftr__mail{order:24;grid-row:13;grid-column:1 / -1;margin:0 !important}
  /* la barra: sin sus iconos (ya van arriba) y con el segundo filete */
  .hw-ftr-bar .hw-ftr__social{display:none !important}
  .hw-ftr-bar{padding-top:28px !important}
  .hw-ftr-bar .hw-ftr__meta{border-top:1px solid rgba(239,234,228,.3);padding-top:24px !important}
}
@media(min-width:385px) and (max-width:760px){
  .hw-ftr .hw-ftr__nav--2 a:nth-of-type(2){white-space:nowrap}
}

/* ==================================================================
   HOME · AJUSTES 2026-09-01
   ================================================================== */

/* --- 1) El logotipo de la nav pegajosa se ponía AZUL al pasar el ratón ------
   Ni `.hw-nav__brand` ni `.hw-hdr__brand a` declaraban :hover, así que ganaba
   el `link_hover_color` global de Avada (River Stone). La palabra HEARTWOOD
   va en verde Boxwood; en el header en overlay se queda en su propia tinta,
   que ya cambia según la sección. */
.hw-nav__brand{transition:color .2s ease}
.hw-nav__brand:hover,
.hw-nav__brand:focus-visible{color:var(--awb-color5,#424B0A)}
.hw-hdr__brand a:hover,
.hw-hdr__brand a:focus-visible{color:var(--hw-hdr-ink) !important;opacity:.75}

/* --- 8) CTA de texto: naranja también en hover y en click -------------------
   El color naranja estaba puesto en el CONTENEDOR (.s2-cta) y el <a> lo
   heredaba; en cuanto Avada pinta `a:hover{color:…}` sobre el propio enlace,
   la herencia pierde y "This just in" se iba a azul. Se fija en el enlace. */
.s-cta a, .l-cta a, .s2-cta a, .lh-cta a, .cm-cta a, .wh-cta a{
  color:var(--awb-color7,#E54511) !important;text-decoration:none !important;
  border-bottom:0 !important}
.s-cta a:hover, .l-cta a:hover, .s2-cta a:hover, .lh-cta a:hover, .cm-cta a:hover, .wh-cta a:hover,
.s-cta a:focus, .l-cta a:focus, .s2-cta a:focus, .lh-cta a:focus, .cm-cta a:focus, .wh-cta a:focus,
.s-cta a:active, .l-cta a:active, .s2-cta a:active, .lh-cta a:active, .cm-cta a:active, .wh-cta a:active,
.s-cta a:visited, .l-cta a:visited, .s2-cta a:visited, .lh-cta a:visited, .cm-cta a:visited, .wh-cta a:visited{
  color:var(--awb-color7,#E54511) !important}
/* El CTA del banner Explore va en crema sobre foto: ahí el hover es Saltmarsh
   (ya estaba), pero el :visited de Avada lo devolvía a azul. */
.hw-el-cta:visited{color:#EFEAE4}
.hw-el-cta:hover:visited{color:var(--awb-color3,#CEC439)}

/* --- 4) Zoom muy suave al pasar el ratón por las imágenes estáticas ---------
   Sólo las imágenes quietas: el collage del slide ya reacciona al ratón con la
   velocidad, y la H enmascarada no tiene foto que ampliar. */
/* Avada ya pone `overflow:hidden` en `.fusion-imageframe`, así que el zoom se
   recorta solo dentro del marco: aquí sólo hace falta el movimiento. */
.fusion-imageframe:not(.hw-form-icon) img,
.fusion-post-card .fusion-image-wrapper img{
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.fusion-imageframe:not(.hw-form-icon):hover img,
.fusion-post-card:hover .fusion-image-wrapper img{transform:scale(1.045)}
.fusion-post-card .fusion-image-wrapper{overflow:hidden}
/* el slide en movimiento y la H de máscara quedan fuera */
.hw-collage__item img,
.s-hmark img{transition:none !important;transform:none !important}

/* --- 9) La marca de los árboles sobre "Pleased to meet you" -----------------
   Mismo gesto que las fotos, un pelo más marcado por ser un sello pequeño.
   Va excluida del bloque de arriba porque necesita overflow visible: monta
   media fuera de la banda. */
/* `.hw-form-icon{overflow:visible}` estaba puesto más arriba pero perdía:
   Avada declara `.fusion-imageframe{overflow:hidden}` con la misma
   especificidad y su hoja se imprime después. Sin esto el sello se recortaba
   al ampliarse. */
.hw-form-icon{overflow:visible !important}
.hw-form-icon img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hw-form-icon:hover img{transform:scale(1.07)}

@media(prefers-reduced-motion:reduce){
  .fusion-imageframe img,
  .fusion-post-card .fusion-image-wrapper img,
  .hw-form-icon img{transition:none !important;transform:none !important}
}

/* --- 2) MARCADORES DE SECCIÓN ----------------------------------------------
   Antes cada `.hw-spy-section` llevaba su etiqueta pegada dentro, así que
   subía y bajaba con la sección y desaparecía de la vista enseguida.
   Ahora hay UN carril fijo en el borde derecho (como saddlebackarizona.com):
   se queda quieto en pantalla, la etiqueta cambia al entrar cada sección y
   bajo ella una guía de 1 px se va rellenando con el avance dentro de esa
   sección (como el scrollbar de springs.estate).
   Tinta Veranda Blue y tipografía vertical, como en el frame del Figma.
   ------------------------------------------------------------------------- */
.hw-secrail{
  position:fixed;right:34px;top:50%;transform:translateY(-50%);
  z-index:60;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;transition:opacity .45s ease}
.hw-secrail.is-on{opacity:1}
.hw-secrail__label{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:3px;text-transform:uppercase;line-height:1;white-space:nowrap;
  color:var(--awb-color4,#6D7EA0);
  transition:opacity .22s ease, transform .22s ease}
.hw-secrail.is-swapping .hw-secrail__label{opacity:0;transform:translateY(-7px)}
/* La guía: 120 px, el mismo alto que la del sitio de referencia. El fondo va
   en rgba y no con opacity para que el relleno no herede la transparencia. */
.hw-secrail__track{position:relative;width:1px;height:120px;
  background:rgba(109,126,160,.3)}
.hw-secrail__fill{position:absolute;left:0;top:0;width:1px;height:0;
  background:var(--awb-color4,#6D7EA0);
  transition:height .1s linear}
@media(max-width:900px){.hw-secrail{display:none}}
@media(prefers-reduced-motion:reduce){
  .hw-secrail,.hw-secrail__label,.hw-secrail__fill{transition:none}
}


/* ==================================================================
   OUR STORY (/about, página 51)
   Medidas del frame del Figma `01_screenshots/02_Our-story-Desktop.jpg`
   (lienzo 1440, contenido de x=140 a x=1300 → 1160 px).
   Bandas: héroe 0-680 · Oyster 680-1526 · blanco 1526-3909 · formulario.
   ================================================================== */
body.page-id-51 #main{padding-top:0 !important}

/* Ancho de contenido: 1160 px centrados, como el resto del sitio.
   Dos trampas encadenadas:
   1. NO se puede con `max-width` en `.fusion-row`: Avada le escribe
      `max-width:calc(100% + 0px) !important` en el atributo style y un inline
      !important gana siempre.
   2. Tampoco vale poner el padding en el CONTENEDOR: estos contenedores son a
      sangre (1440) pero su bloque contenedor es `.post-content`, que mide
      1380, y los porcentajes de padding se resuelven contra el CONTENEDOR, no
      contra uno mismo → salían 110 px en vez de 140 y todo quedaba corrido a
      la izquierda.
   El padding va en la FILA, cuyo bloque contenedor sí es el contenedor a
   sangre: ahí el 100% son los 1440 buenos. */
.hw-os-intro,.hw-os-vision,.hw-os-split{
  padding-left:0 !important;padding-right:0 !important}
.hw-os-intro .fusion-builder-row,
.hw-os-vision .fusion-builder-row,
.hw-os-split .fusion-builder-row{
  box-sizing:border-box !important;
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}

/* ---------- 1 · HÉROE ---------- */
/* !important en el fondo y el alto: Avada declara
   `.fusion-fullwidth{background-image:var(--awb-background-image);min-height:…}`
   con la misma especificidad y su hoja va después, así que sin esto el héroe
   se quedaba sin foto y con 0 de alto. */
.hw-os-hero{
  position:relative;
  min-height:680px !important;
  /* El nombre lleva el motivo a propósito: al cambiar una foto por otra hay
     que cambiar también el NOMBRE del fichero. Reusando el mismo, el
     navegador de quien ya había visto la página sigue sirviendo la vieja de
     su caché y parece que el cambio no se ha aplicado. */
  background:#19180C url('/wp-content/uploads/2026/09/hw-os-hero-dinner.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  /* Anclado ARRIBA, no centrado: en el Figma el rótulo arranca en y=242 de los
     680 del héroe y la guía vertical cae pegada al borde inferior. Centrando
     el bloque no se puede tener las dos cosas. */
  padding-top:238px !important;padding-bottom:0 !important}
.hw-os-hero .fusion-builder-row{align-items:flex-start !important}
/* Velo: el rótulo cae sobre la mesa iluminada y sin esto no se lee. En el
   Figma el oscurecido es mayor en el centro que en los bordes. */
.hw-os-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, rgba(25,24,12,.46) 0%, rgba(25,24,12,.26) 58%, rgba(25,24,12,.40) 100%)}
.hw-os-hero > *{position:relative;z-index:1}
.hw-os-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-os-hero .fusion-text p{margin:0}
.hw-os-hero__eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-os-hero__eyebrow{margin-bottom:18px !important}
.hw-os-hero__title p,.hw-os-hero__title.hw-os-hero__title h1{
  font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  /* 90px y un interlineado corto: medido por ancho de tinta contra el frame
     ("Welcome to our" ocupa 565 px y el salto entre líneas es de 86). */
  font-size:90px;line-height:.96;letter-spacing:.5px}
.hw-os-hero__title{margin-bottom:0 !important}
/* la guía vertical bajo el titular */
.hw-os-hero__rule span{display:block;width:1px;height:104px;margin:148px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO (banda Oyster) ---------- */
.hw-os-intro{background:var(--awb-color1,#EFEAE4) !important}
.hw-os-intro .fusion-text p{margin:0}
.hw-os-intro__body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:762px;margin:0 auto !important}
.hw-os-intro__body{margin-bottom:52px !important}
.hw-os-intro__lead p{
  font-family:calluna,'Lora',Georgia,serif;font-size:26px;line-height:1.42;
  color:var(--awb-color8,#19180C);max-width:740px;margin:0 auto !important}
.hw-os-intro__lead{margin-bottom:0 !important}

/* La foto del rótulo monta el borde inferior de la banda, mitad dentro y
   mitad fuera.
   El rótulo HEARTWOOD va sobre el mismo lienzo de mármol que el otro bloque
   enmarcado. Panel 469×364 con la foto de 320×241 centrada — las mismas
   proporciones que el bloque del perro (15,44% / 17,59% / 68,25% / 66,16%),
   así que reusa `__win` y `__front` y con ellos el zoom del hover.
   (Aquí hubo un festón; el diseño no lo lleva.) */
.hw-os-intro__scallop{margin:81px 0 -58px !important}
/* Dos clases: `.hw-os-frame` genérica (que llena su columna) va DESPUÉS en la
   hoja y con la misma especificidad, así que con una sola clase le ganaba y el
   mármol salía a todo el ancho de la banda. */
.hw-os-intro .hw-os-frame--sign{
  position:relative;display:block;width:469px;max-width:100%;
  aspect-ratio:469/364;margin:0 auto}


/* ---------- 3 · LA VISIÓN ---------- */
.hw-os-vision{background:#FFFFFF !important}
.hw-os-vision .fusion-builder-row{display:flex !important;flex-wrap:wrap !important;
  margin:0 auto !important}
.hw-os-vision .fusion-layout-column{margin:0 !important;float:none !important}
.hw-os-vision__head{width:100% !important;margin-bottom:150px !important}
.hw-os-vision__title p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:42px;
  letter-spacing:1.5px;text-transform:uppercase;line-height:1.1;
  color:var(--awb-color8,#19180C);margin:0}
.hw-os-vc{width:20% !important}
.hw-os-vc__in{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 14px}
/* Los iconos vienen del pedido a tamaño natural (~100-140 px) y así los usa el
   Figma: se dejan en su caja real y sólo se centra la fila por la línea base. */
.hw-os-vc__icon{display:flex;align-items:flex-end;justify-content:center;
  height:126px;margin-bottom:22px}
.hw-os-vc__icon img{display:block;max-width:100%;height:auto}
.hw-os-vc__title{
  font-family:calluna,'Lora',Georgia,serif;font-size:22px;line-height:1.32;
  color:var(--awb-color8,#19180C);margin-bottom:14px;max-width:210px}
.hw-os-vc__body{
  font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:1.55;
  color:var(--awb-color8,#19180C);max-width:190px}

/* ---------- 4 y 5 · BLOQUES CON MARCO ---------- */
.hw-os-split{background:#FFFFFF !important}
.hw-os-split .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-os-split .fusion-layout-column{margin:0 !important;float:none !important}
.hw-os-split__text{width:39.5% !important}
.hw-os-split__media{width:49.1% !important}
/* el hueco entre columna y marco va como margen, no como gap: las dos
   secciones lo tienen en un lado distinto */
.hw-os-split--kayak .hw-os-split__media{margin-left:11.4% !important}
.hw-os-split--dog   .hw-os-split__text {margin-left:11.4% !important}

.hw-os-split .fusion-text p{margin:0}
.hw-os-eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0)}
.hw-os-eyebrow{margin-bottom:20px !important}
.hw-os-h2 p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  /* 44px, no 34: medido por ancho de tinta contra el frame — "RICHMOND
     HILL'S" ocupa 396 px en el Figma y a 34 entraba entera con "SPECIAL"
     detrás, así que el titular caía en dos líneas en vez de tres. */
  font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.22;
  color:var(--awb-color8,#19180C)}
.hw-os-h2{margin-bottom:26px !important}
.hw-os-body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C)}
.hw-os-body p + p{margin-top:18px !important}
.hw-os-body a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hw-os-body a:hover{color:var(--awb-color7,#E54511)}
/* El CTA reusa el gesto del resto del sitio: naranja, versalitas y la flecha
   que crece al pasar el ratón (ver el bloque de botones). */
.hw-os-cta{margin-top:34px !important}
.hw-os-cta p{display:inline-flex;align-items:center;margin:0}
.hw-os-cta a{
  display:inline-flex;align-items:center;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color7,#E54511) !important;text-decoration:none !important}
.hw-os-cta a::after{
  content:"";display:inline-block;margin-left:16px;width:34px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat left center/calc(100% - .5px) 1px;
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.hw-os-cta a::after{transition:none}}

/* Foto sin marco (el bloque del kayak): llena su columna. Apaisada, no
   570×597 — la toma es horizontal y en vertical se quedaba fuera media
   remera. */
.hw-os-plain{position:relative;display:block;width:100%;aspect-ratio:570/430;overflow:hidden}
.hw-os-plain__img{display:block;width:100%;height:100%;object-fit:cover}

/* El marco: la foto montada sobre otra imagen que hace de lienzo.
   Proporciones del Figma: panel 570×597 con la foto de 389×395 metida 88 px
   por la izquierda y 105 por arriba. El bloque del rótulo usa las mismas
   proporciones en un panel de 469×364. */
.hw-os-frame{position:relative;display:block;width:100%;aspect-ratio:570/597}
.hw-os-frame__back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* La ventana recorta; la foto de dentro es la que se mueve en el hover. */
.hw-os-frame__win{
  position:absolute;left:15.44%;top:17.59%;width:68.25%;height:66.16%;
  display:block;overflow:hidden}
.hw-os-frame__front{display:block;width:100%;height:100%;object-fit:cover}

/* Zoom suave al pasar el ratón. Sólo la FOTO: el lienzo de detrás
   (`__back`) se queda quieto, que es lo que hace que se lea como un marco.
   El recorte lo pone `__win` (y `.hw-os-plain` en la foto suelta), no el
   marco: así el lienzo nunca queda dentro de la caja que escala. */
.hw-os-plain__img,
.hw-os-frame__front{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-os-plain:hover .hw-os-plain__img,
.hw-os-frame:hover .hw-os-frame__front{transform:scale(1.045)}

@media(prefers-reduced-motion:reduce){
  .hw-os-plain__img,.hw-os-frame__front{transition:none}
  .hw-os-plain:hover .hw-os-plain__img,
  .hw-os-frame:hover .hw-os-frame__front{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-os-hero__title p,.hw-os-hero__title.hw-os-hero__title h1{font-size:48px}
  .hw-os-vision__title p{font-size:34px}
  .hw-os-h2 p{font-size:28px}
  .hw-os-vc{width:33.33% !important;margin-bottom:48px !important}
  .hw-os-split .fusion-builder-row{flex-wrap:wrap !important}
  .hw-os-split__text,.hw-os-split__media{width:100% !important;margin-left:0 !important}
  /* los desplazamientos de escritorio van con selector de dos clases, así que
     hace falta la misma especificidad para anularlos aquí */
  .hw-os-split--kayak .hw-os-split__media,
  .hw-os-split--dog .hw-os-split__text{margin-left:0 !important}
  .hw-os-split__media{margin-top:54px !important;max-width:570px}
  .hw-os-split--dog .fusion-builder-row{flex-direction:column-reverse}
  .hw-os-split--dog .hw-os-split__media{margin-top:0 !important;margin-bottom:54px !important}
}
@media(max-width:760px){
  .hw-os-hero{min-height:520px}
  .hw-os-hero__title p,.hw-os-hero__title.hw-os-hero__title h1{font-size:36px}
  .hw-os-hero__rule span{height:64px;margin-top:48px}
  .hw-os-intro{padding-top:80px !important}
  .hw-os-intro__body p{font-size:17px;line-height:1.8}
  .hw-os-intro__lead p{font-size:21px}
  .hw-os-vision{padding-top:110px !important;padding-bottom:90px !important}
  .hw-os-vision__title p{font-size:26px;letter-spacing:1px}
  .hw-os-vc{width:100% !important}
  .hw-os-h2 p{font-size:24px}
  .hw-os-split{padding-bottom:90px !important}
}

/* ==================================================================
   LOCATION (/location, página 7491)
   Medidas del frame `figma-export-2026-09-02/03_Location-Desktop.png`
   (lienzo 1440, contenido de x=140 a x=1300 → 1160 px).

   ⚠️ REVISADO CONTRA EL FIGMA EL 2026-09-02 (nodo 14122:2796). El frame de
   julio se quedó viejo: el mapa de acuarela rotulado FPO está OCULTO en el
   archivo y en su lugar hay un `map inset` (15138:16463) con el mapa regional
   de líneas, ya dentro de la rejilla de 1160 y no a sangre; la cita pasó de
   foto a VÍDEO y su caja de 1160×530 a 1160×559; y cambió el texto del intro,
   el del bloque de Savannah y el del mapa. La página bajó de 5848 a 5525.

   Bandas: héroe 0-680 · crema 680-1308 · blanco 1308-4041 (Savannah 1420-2164,
   mapa 2343-3090, cita 3265-3824, franjas 3724-4041) · formulario 4041.
   ================================================================== */
body.page-id-7491 #main{padding-top:0 !important}

/* Rejilla de 1160. El padding va en la FILA, nunca en el contenedor ni en
   `max-width` de `.fusion-row` (Avada le escribe un inline con !important y
   los porcentajes del contenedor se resuelven contra `.post-content`, que
   mide 1380 y no 1440). Las franjas quedan FUERA a propósito: son a sangre.

   Y ANTES de poner el padding hay que deshacer la compensación de canaletas
   de Avada: la fila viene con `max-width:104%` y `margin:0 -2%`, o sea 1498 px
   arrancando en x=-29. Sobre eso, 140 de padding dejaban el contenido en
   x=111 y 1218 de ancho en vez de 140/1160. (La sección de Savannah se
   libraba de rebote, porque su regla propia le pone `margin:0 auto`.) */
.hw-loc-intro,.hw-loc-savannah,.hw-loc-map,.hw-loc-banner,.hw-loc-stripes{
  padding-left:0 !important;padding-right:0 !important}
.hw-loc-hero .fusion-builder-row,
.hw-loc-intro .fusion-builder-row,
.hw-loc-savannah .fusion-builder-row,
.hw-loc-map .fusion-builder-row,
.hw-loc-banner .fusion-builder-row,
.hw-loc-stripes .fusion-builder-row{
  box-sizing:border-box !important;
  max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-loc-intro .fusion-builder-row,
.hw-loc-savannah .fusion-builder-row,
.hw-loc-map .fusion-builder-row,
.hw-loc-banner .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}

/* ---------- 1 · HÉROE ---------- */
/* !important en fondo y alto: Avada declara `.fusion-fullwidth{background-image:…;
   min-height:…}` con la misma especificidad y su hoja va después. */
.hw-loc-hero{
  position:relative;
  min-height:680px !important;
  background:#19180C url('/wp-content/uploads/2026/09/hw-loc-hero-marsh.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  /* anclado arriba: en el frame el rótulo arranca en y=240 de los 680 y la
     guía vertical baja pegada al borde inferior */
  padding-top:236px !important;padding-bottom:0 !important}
.hw-loc-hero .fusion-builder-row{align-items:flex-start !important}
/* Avada le da 20 px de margen inferior a CADA columna. Con ellos el héroe
   medía 700 en vez de 680 y el banner 678 en vez de 658, y esos 20 px se iban
   arrastrando hasta dejar el formulario 40 px por debajo de su sitio. */
.hw-loc-hero .fusion-layout-column,
.hw-loc-intro .fusion-layout-column,
.hw-loc-map .fusion-layout-column,
.hw-loc-banner .fusion-layout-column,
.hw-loc-stripes .fusion-layout-column{margin-bottom:0 !important}
/* velo: el titular cae sobre cielo claro y sin esto no se lee */
.hw-loc-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 44%, rgba(25,24,12,.34) 0%, rgba(25,24,12,.16) 60%, rgba(25,24,12,.30) 100%)}
.hw-loc-hero > *{position:relative;z-index:1}
.hw-loc-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-loc-hero .fusion-text p{margin:0}
.hw-loc-hero__eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-loc-hero__eyebrow{margin-bottom:18px !important}
/* 90 px como en Our Story: en el frame "The Lowcountry" ocupa 574 px de tinta
   y el salto entre líneas es de 86 — las mismas cifras que allí. */
.hw-loc-hero__title p,.hw-os-hero__title.hw-os-hero__title h1{margin:0;color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-loc-hero__title.hw-loc-hero__title h1{
  font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:90px;line-height:.96;letter-spacing:.5px}
.hw-loc-hero__title{margin-bottom:0 !important}
/* la guía vertical: del y=556 al borde inferior del héroe */
.hw-loc-hero__rule{margin-bottom:0 !important}
.hw-loc-hero__rule span{display:block;width:1px;height:121px;margin:123px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO (banda crema) ---------- */
.hw-loc-intro{background:var(--awb-color1,#EFEAE4) !important}
.hw-loc-intro .fusion-text p{margin:0}
/* 20/1.9 = 38 px de salto, exactamente el del frame; el bloque de tinta mide
   731 px de ancho máximo */
.hw-loc-intro__body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:740px;margin:0 auto !important}

/* ---------- 3 · SAVANNAH (texto + collage) ---------- */
.hw-loc-savannah{background:#FFFFFF !important}
.hw-loc-savannah .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:center;margin:0 auto !important}
/* Avada le pone al `.fusion-column-wrapper` los ~22 px del espaciado entre
   columnas: sin anularlos el collage salía de 526 px y no de los 570 que pide
   la rejilla (y con él, la sección 57 px más baja de la cuenta). */
.hw-loc-savannah .fusion-column-wrapper,
.hw-loc-map .fusion-column-wrapper,
.hw-loc-banner .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-loc-savannah .fusion-layout-column{margin:0 !important;float:none !important}
/* 472 + 118 de hueco + 570 = 1160 (medido en el nodo 14122:2807 del Figma;
   antes se dedujo 450 midiendo la tinta, que se queda corta) */
.hw-loc-sav__text {width:40.690% !important}
.hw-loc-sav__media{width:49.138% !important}
/* El hueco va con selector de DOS clases. Con una sola perdía contra la regla
   genérica de arriba (`.hw-loc-savannah .fusion-layout-column{margin:0}`, que
   tiene más especificidad), la fila centraba las dos columnas y todo salía
   70 px corrido: el texto empezaba en x=210 en vez de en 140. */
.hw-loc-savannah .hw-loc-sav__media{margin-left:10.172% !important}

.hw-loc-savannah .fusion-text p{margin:0}
.hw-loc-eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0)}
.hw-loc-eyebrow{margin-bottom:22px !important}
/* 44 px como en Our Story (allí calibrado por ancho de tinta; en este frame
   la altura de mayúscula es la misma, 33 px). El interlineado sí es más
   corto aquí: el frame salta 48 px, no 54. */
.hw-loc-h2 p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C)}
.hw-loc-h2{margin-bottom:26px !important}
.hw-loc-body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C)}
.hw-loc-body p + p{margin-top:18px !important}

/* El collage: caja de 570×745 y las seis piezas colocadas en % dentro.
   OJO con los porcentajes de PADDING de los paspartús: se resuelven contra el
   ancho del BLOQUE CONTENEDOR (los 570 del collage), no contra el ancho de
   cada pieza. Los tres marcos del frame miden 11 px por los cuatro lados, o
   sea 11/570 = 1.9298 % — y el mismo valor vale también arriba y abajo,
   porque el porcentaje vertical se resuelve igualmente contra el ANCHO. */
.hw-loc-collage{position:relative;width:100%;aspect-ratio:570/745}
.hw-loc-c{position:absolute;display:flex;box-sizing:border-box}
.hw-loc-c__win{position:relative;flex:1 1 auto;align-self:stretch;
  width:100%;overflow:hidden}
.hw-loc-c__win img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-loc-c:hover .hw-loc-c__win img{transform:scale(1.045)}

.hw-loc-c--carriage {left:0;        top:5.369%; width:38.421%;height:34.497%}
.hw-loc-c--cathedral{left:50.351%;  top:0;      width:27.895%;height:32.081%;
  background:#BAC3CB;padding:1.9298%}
.hw-loc-c--scad     {left:62.456%;  top:36.376%;width:37.544%;height:27.383%}
.hw-loc-c--shops    {left:5.263%;   top:75.034%;width:27.544%;height:24.966%;
  background:#38261C;padding:1.9298%}
.hw-loc-c--oaks     {left:43.158%;  top:67.919%;width:47.193%;height:27.383%;
  background:var(--awb-color4,#6D7EA0);padding:1.9298%}
/* El marco amarillo va DIBUJADO A MANO y encima, no es el festón geométrico
   de la home: dentro lleva una foto rectangular suelta, sin recortar por la
   silueta. Se pinta por delante del paspartú azul de los robles, que le pasa
   por debajo. */
.hw-loc-c--river    {left:8.947%;   top:44.027%;width:38.421%;height:26.040%;
  z-index:2;display:block}
.hw-loc-c--river .hw-loc-c__win{
  position:absolute;left:16.438%;top:19.072%;width:66.667%;height:61.856%}
.hw-loc-c__ring{position:absolute;inset:0;display:block;
  width:100%;height:100%;pointer-events:none}

/* ---------- 4 · EL MAPA REGIONAL ---------- */
/* Ya NO va a sangre: es un bloque de 1160×747 dentro de la rejilla.
   El dibujo base va como imagen; los rótulos (escudos, poblaciones, el
   aeropuerto, la marca H) son TEXTO Y SVG DE VERDAD colocados encima, no
   están horneados — en el Figma también son nodos vivos. Así salen nítidos
   en retina, se pueden leer y buscar, y escalan con el mapa porque todo va
   en % de la caja.
   Las posiciones las genera `build-scripts/location/gen-map-labels.py` a
   partir de las coordenadas del nodo; no editarlas a mano. */
.hw-loc-map{background:#FFFFFF !important}
/* Dos cajas y no una: `__fig` es la del DIBUJO (proporción fija, y es contra
   ella contra la que se colocan los rótulos), y `__wrap` sólo envuelve. Con
   una sola, al pasar el texto a flujo en móvil la caja crecía y el mapa se
   estiraba con ella (295×630 recortado a lo bestia en vez de 295×190). */
.hw-loc-map__wrap{position:relative;width:100%}
.hw-loc-map__fig{
  position:relative;width:100%;aspect-ratio:1160/747;
  container-type:inline-size}
/* Los dos `margin:0` de aquí abajo no son cosméticos. La caja del mapa medía
   767 en vez de los 747 del `aspect-ratio`, y como los rótulos van en % de esa
   caja, los 20 px de más los descolocaban a todos (y arrastraban la cita, las
   franjas y el formulario otros 20). Eran dos cosas a la vez: el margen que
   Avada le pone a las imágenes de `.fusion-text`, y un `<p>` VACÍO que mete
   `wpautop` al final del bloque, con sus 20 px de margen inferior. */
.hw-loc-map__fig > p:empty,
.hw-loc-map__wrap > p:empty,
.hw-loc-quote > p:empty,
.hw-loc-band > p:empty{display:none !important;margin:0 !important}
.hw-loc-map__art{display:block;width:100%;height:100%;object-fit:cover;
  margin:0 !important}

/* Tipografía de los rótulos. En el diseño es Gravitica DemiBold; aquí Poppins,
   la sustituta que ya usa todo el sitio. El cuerpo va en `cqw` para que
   encoja con el mapa en vez de amontonarse: 12/1160 = 1.0345cqw. */
.hw-lm{
  position:absolute;transform:translateX(-50%);
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  text-transform:uppercase;text-align:center;
  margin:0;pointer-events:none;white-space:normal}
.hw-lm--t{font-size:1.0345cqw;letter-spacing:.1345cqw;line-height:1}
.hw-lm--big{font-size:1.2931cqw;letter-spacing:.1681cqw;line-height:1.2;
  white-space:nowrap;color:#424B0A}
.hw-lm--sec  {color:#BAC3CB}
.hw-lm--air  {color:#6D7EA0}
.hw-lm--olive{color:#424B0A}
/* escudos y chapa: el número va centrado sobre el SVG */
.hw-lm--sh,.hw-lm--pill{
  display:flex;align-items:center;justify-content:center;
  color:#FFFFFF;font-size:1.0345cqw;letter-spacing:.1345cqw;line-height:1;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%}
.hw-lm--pill{background:#6D7EA0;border-radius:30px}
.hw-lm--ico{background-repeat:no-repeat;background-position:center;
  background-size:100% 100%}

/* el bloque de texto va DENTRO del mapa, apoyado en la parte pálida
   de la derecha (x=780 del lienzo → 640 de la caja) */
.hw-loc-map__txt{position:absolute;left:55.172%;top:56.091%;width:40.690%}
.hw-loc-map__txt p{margin:0}
.hw-loc-map__h2{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C);margin-bottom:18px !important}
.hw-loc-map__body{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C)}

/* --- rótulos del mapa (generado por gen-map-labels.py) --- */
.hw-lm--sh95a,.hw-lm--sh95b,.hw-lm--sh16{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2227%22%20viewBox%3D%220%200%2030%2027%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.9704%2027C14.8541%2027%2014.7545%2026.9835%2014.6381%2026.9342C7.17818%2023.7751%202.50947%2019.4479%200.764937%2014.0676C-1.56111%206.94333%202.14395%200.658135%202.3101%200.394881C2.44301%200.180987%202.64239%200.0493601%202.89161%200C2.94145%200%202.97468%200%203.02453%200C3.2239%200%203.42328%200.0658135%203.57281%200.197441C3.58942%200.213894%206.03177%202.25411%209.40454%202.25411C11.1657%202.25411%2012.8936%201.71115%2014.5385%200.625229C14.6714%200.526508%2014.8375%200.493601%2015.0037%200.493601C15.1698%200.493601%2015.3193%200.542962%2015.4689%200.625229C17.1137%201.6947%2018.8416%202.25411%2020.6028%202.25411C23.9756%202.25411%2026.4013%200.230347%2026.4345%200.197441C26.5841%200.0658135%2026.7834%200%2026.9828%200C27.0327%200%2027.0659%200%2027.1157%200C27.365%200.0329068%2027.5643%200.180987%2027.6972%200.394881C27.8634%200.658135%2031.5685%206.92687%2029.2258%2014.0676C27.4646%2019.4314%2022.7959%2023.7587%2015.336%2026.9342C15.2363%2026.9835%2015.12%2027%2015.0037%2027H14.9704Z%22%20fill%3D%22%236D7EA0%22%2F%3E%3C%2Fsvg%3E")}
.hw-lm--sh17a,.hw-lm--sh17b{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2225%22%20viewBox%3D%220%200%2028%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.9928%2025C13.8481%2025%2013.7178%2024.9528%2013.5876%2024.8741L12.2419%2023.8987C11.9669%2023.7099%2011.663%2023.5997%2011.3592%2023.5997C9.56486%2023.5997%207.81395%2023.2222%206.16434%2022.4827C4.5292%2021.759%203.03876%2020.6734%201.76537%2019.2889C0.622222%2018.0302%200%2016.3782%200%2014.6161C0%2012.854%200.622222%2011.1863%201.76537%209.94336C2.34419%209.31403%202.66253%208.48018%202.66253%207.59912C2.66253%206.71806%202.34419%205.86847%201.76537%205.25488C1.63514%205.11328%201.54832%204.90875%201.54832%204.70422C1.54832%204.49969%201.62067%204.29515%201.76537%204.15356L5.36848%200.251731C5.51318%200.0943989%205.70129%200.0157332%205.87494%200.0157332C6.04858%200.0157332%206.20775%200.0786658%206.35246%200.204531C7.56796%201.35305%208.8124%201.93518%2010.0424%201.93518C11.6775%201.93518%2012.9364%200.912524%2013.385%200.487728L13.4863%200.377596C13.631%200.220264%2013.8191%200.141598%2013.9928%200.141598C14.1664%200.141598%2014.3545%200.220264%2014.4992%200.361863L14.6439%200.519194C15.0636%200.912524%2016.308%201.91945%2017.9576%201.91945C19.2021%201.91945%2020.4465%201.33732%2021.662%200.188798C21.7922%200.0629327%2021.9659%200%2022.1395%200C22.3276%200%2022.5158%200.0786658%2022.646%200.235997L26.2202%204.12209C26.3504%204.26369%2026.4372%204.46822%2026.4372%204.67275C26.4372%204.87728%2026.3649%205.08181%2026.2202%205.22341C25.6413%205.85274%2025.323%206.6866%2025.323%207.56765C25.323%208.44871%2025.6413%209.28257%2026.2202%209.91189C27.3633%2011.1391%2028%2012.8068%2028%2014.5846C28%2016.3625%2027.3633%2018.0145%2026.2202%2019.2574C24.9468%2020.6419%2023.4708%2021.7118%2021.8212%2022.4512C20.2005%2023.1907%2018.4496%2023.5683%2016.6408%2023.5683C16.337%2023.5683%2016.0186%2023.6784%2015.7437%2023.8672L14.4124%2024.8427C14.2966%2024.9371%2014.1519%2024.9685%2014.0072%2024.9685L13.9928%2025Z%22%20fill%3D%22%236D7EA0%22%2F%3E%3C%2Fsvg%3E")}
.hw-lm--savdot,.hw-lm--rhdot{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227.5%22%20fill%3D%22white%22%20stroke%3D%22%23424B0A%22%20stroke-width%3D%229%22%2F%3E%3C%2Fsvg%3E")}
.hw-lm--plane{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2220.4%22%20height%3D%2220.4023%22%20viewBox%3D%220%200%2020.4%2020.4023%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.3277%2017.2223L15.1877%208.53233L16.2977%207.57233C17.4277%206.60233%2018.1077%205.24233%2018.2277%203.76233L18.3377%202.43233C18.3377%202.32233%2018.3077%202.21233%2018.2277%202.13233C18.1477%202.05233%2018.0377%202.01233%2017.9277%202.02233L16.5977%202.13233C15.1177%202.25233%2013.7677%202.94233%2012.7977%204.06233L11.8277%205.18233L3.16766%200.05233C3.01766%20-0.03767%202.83766%20-0.00767%202.70766%200.11233L1.52766%201.29233C1.45766%201.36233%201.41766%201.46233%201.41766%201.56233C1.41766%201.66233%201.45766%201.76233%201.52766%201.83233L8.62766%208.93233L5.88766%2012.1123C5.47766%2012.5823%205.10766%2013.0823%204.76766%2013.6023L4.71766%2013.6823L0.427656%2013.0623C0.267656%2013.0323%200.107656%2013.1223%200.037656%2013.2623C-0.032344%2013.4023%20-0.00234405%2013.5823%200.107656%2013.6923L2.88766%2016.4723L1.93766%2017.9323C1.93766%2017.9323%201.91766%2018.0223%201.90766%2018.0723C1.90766%2018.1023%201.88766%2018.1223%201.88766%2018.1523C1.88766%2018.2423%201.91766%2018.3323%201.98766%2018.4023C2.05766%2018.4723%202.15766%2018.5123%202.25766%2018.5123C2.32766%2018.5123%202.39766%2018.4923%202.46766%2018.4523L3.92766%2017.5023L6.71766%2020.2923C6.78766%2020.3623%206.88766%2020.4023%206.97766%2020.4023C7.03766%2020.4023%207.09766%2020.3923%207.14766%2020.3623C7.28766%2020.2923%207.37766%2020.1323%207.34766%2019.9723L6.72766%2015.6823L6.75766%2015.6623C7.30766%2015.3023%207.84766%2014.9023%208.33766%2014.4723L11.4677%2011.7623L18.5677%2018.8623C18.6377%2018.9323%2018.7377%2018.9723%2018.8377%2018.9723C18.9377%2018.9723%2019.0277%2018.9323%2019.1077%2018.8623L20.2877%2017.6823C20.4077%2017.5623%2020.4377%2017.3723%2020.3477%2017.2223H20.3277Z%22%20fill%3D%22%236D7EA0%22%2F%3E%3C%2Fsvg%3E")}
.hw-lm--hmark{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2227.0386%22%20height%3D%2227.8464%22%20viewBox%3D%220%200%2027.0386%2027.8464%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20d%3D%22M27.0386%2027.8464H1.42455e-05V0.00222479H22.3339C22.8047%200.00222479%2024.3637%20-0.0954241%2025.6226%201.00314C26.5433%201.80875%2027.0211%203.00496%2027.0386%204.56387V27.8464Z%22%20fill%3D%22%23E54511%22%2F%3E%3Cpath%20d%3D%22M19.3556%2019.3264C19.2335%2019.3264%2018.9092%2019.2985%2018.6895%2019.2671C18.3965%2019.2288%2018.2989%2019.0753%2018.2466%2018.5801C18.1698%2017.9454%2018.1698%2016.7038%2018.1698%2015.267V12.5642C18.1698%2010.1752%2018.1698%209.74279%2018.2012%209.25454C18.2326%208.71049%2018.3547%208.5954%2018.6162%208.55007C18.8011%208.51868%2018.8813%208.50822%2018.972%208.50822C19.1463%208.50822%2019.2789%208.38964%2019.2789%208.2327C19.2789%208.0932%2019.2056%207.9258%2018.8499%207.9258C18.5221%207.9258%2017.9327%207.95022%2017.5944%207.96417C17.4619%207.97114%2017.3677%207.97463%2017.3433%207.97463C17.3259%207.97463%2017.2526%207.97463%2017.1445%207.96766C16.8062%207.95371%2016.1297%207.92929%2015.6065%207.92929C15.2508%207.92929%2015.1776%208.09669%2015.1776%208.23619C15.1776%208.39313%2015.3101%208.5117%2015.4845%208.5117C15.6344%208.5117%2015.8681%208.52914%2015.9692%208.55355C16.3563%208.63376%2016.4575%208.77326%2016.4854%209.26151C16.5168%209.74627%2016.5168%2010.1787%2016.5168%2012.5677V12.7978H10.1835V12.5677C10.1835%2010.1787%2010.1835%209.74628%2010.2149%209.25803C10.2462%208.71398%2010.3683%208.59889%2010.6299%208.55355C10.8147%208.52216%2010.8949%208.5117%2010.9856%208.5117C11.16%208.5117%2011.2925%208.39313%2011.2925%208.23619C11.2925%208.09669%2011.2193%207.92929%2010.8635%207.92929C10.5357%207.92929%209.94632%207.95371%209.60804%207.96766C9.47551%207.97463%209.38135%207.97812%209.35694%207.97812C9.3395%207.97812%209.26626%207.97812%209.15815%207.97114C8.81986%207.95719%208.14329%207.93278%207.62017%207.93278C7.26444%207.93278%207.1912%208.10018%207.1912%208.23968C7.1912%208.39662%207.32373%208.51519%207.4981%208.51519C7.64807%208.51519%207.88173%208.53263%207.98286%208.55704C8.36998%208.63725%208.47111%208.77675%208.49901%209.265C8.5304%209.74977%208.5304%2010.1822%208.5304%2012.5711V15.274C8.5304%2016.7108%208.5304%2017.9524%208.45368%2018.5836C8.38741%2019.0684%208.31069%2019.2427%208.15026%2019.2741C7.98286%2019.309%207.82941%2019.3299%207.72828%2019.3299C7.51903%2019.3299%207.42138%2019.4729%207.42138%2019.6054C7.42138%2019.7449%207.49462%2019.9123%207.85034%2019.9123C8.17816%2019.9123%208.76406%2019.8879%209.10584%2019.8774C9.23836%2019.8705%209.33252%2019.867%209.35694%2019.867C9.37437%2019.867%209.43715%2019.867%209.5348%2019.874C9.88006%2019.8879%2010.595%2019.9123%2011.2472%2019.9123C11.6447%2019.9123%2011.6761%2019.6787%2011.6761%2019.6054C11.6761%2019.4729%2011.582%2019.3299%2011.3692%2019.3299C11.2472%2019.3299%2010.9228%2019.302%2010.7031%2019.2706C10.4102%2019.2323%2010.3125%2019.0788%2010.2602%2018.5836C10.1835%2017.9489%2010.1835%2016.7073%2010.1835%2015.2705V13.7464H16.5168V15.2705C16.5168%2016.7073%2016.5168%2017.9489%2016.44%2018.5801C16.3738%2019.0649%2016.2971%2019.2392%2016.1366%2019.2706C15.9692%2019.3055%2015.8158%2019.3264%2015.7146%2019.3264C15.5054%2019.3264%2015.4077%2019.4694%2015.4077%2019.6019C15.4077%2019.7414%2015.481%2019.9088%2015.8367%2019.9088C16.1645%2019.9088%2016.7504%2019.8844%2017.0922%2019.874C17.2247%2019.867%2017.3189%2019.8635%2017.3433%2019.8635C17.3607%2019.8635%2017.4235%2019.8635%2017.5212%2019.8705C17.8664%2019.8844%2018.5814%2019.9088%2019.2335%2019.9088C19.6311%2019.9088%2019.6625%2019.6752%2019.6625%2019.6019C19.6625%2019.4694%2019.5683%2019.3264%2019.3556%2019.3264Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}

.hw-lm--sh95a{left:11.5517%;top:86.7470%;width:2.5862%;height:3.6145%;}
.hw-lm--sh95b{left:37.7586%;top:3.6145%;width:2.5862%;height:3.6145%;}
.hw-lm--sh16{left:20.1724%;top:34.9398%;width:2.5862%;height:3.6145%;}
.hw-lm--sh17a{left:6.5517%;top:80.8568%;width:2.4138%;height:3.3467%;}
.hw-lm--sh17b{left:42.5862%;top:27.0415%;width:2.4138%;height:3.3467%;}
.hw-lm--pill240{left:31.4655%;top:53.8153%;width:3.4483%;height:2.5435%;}
.hw-lm--tybee{left:60.5172%;top:50.8701%;width:5.8621%;}
.hw-lm--hilton{left:74.8276%;top:16.8675%;width:6.3793%;}
.hw-lm--bluff{left:53.3190%;top:27.4431%;width:5.4310%;}
.hw-lm--wassaw{left:44.3966%;top:68.0054%;width:5.8621%;}
.hw-lm--airport{left:28.5345%;top:30.3882%;width:9.3103%;}
.hw-lm--sav{left:39.8276%;top:41.7671%;width:6.7241%;}
.hw-lm--savdot{left:39.8276%;top:38.2865%;width:2.0690%;height:3.2129%;}
.hw-lm--ossabaw{left:37.5000%;top:86.3454%;width:5.8621%;}
.hw-lm--future{left:26.3793%;top:80.1874%;width:8.2759%;}
.hw-lm--stewart{left:4.2241%;top:74.1633%;width:5.8621%;}
.hw-lm--plane{left:28.5517%;top:26.7738%;width:1.7586%;height:2.7312%;}
.hw-lm--rh{left:25.3879%;top:66.2651%;width:10.4310%;}
.hw-lm--rhdot{left:18.6207%;top:65.8635%;width:2.0690%;height:3.2129%;}
.hw-lm--hmark{left:15.3034%;top:73.4940%;width:2.3309%;height:3.7278%;}

/* ---------- 5 · LA CITA SOBRE EL ATARDECER ---------- */
/* Sin relleno arriba: en el diseño nuevo la cita arranca justo donde acaba el
   relleno inferior de la sección del mapa. */
.hw-loc-banner{background:#FFFFFF !important;padding-top:0 !important}
.hw-loc-quote{position:relative;width:100%;aspect-ratio:1160/559;overflow:hidden}
/* El fondo es un VÍDEO en bucle, no una foto: va por `[hw_loop_video]` y no
   por marcado suelto, porque Avada pasa el HTML por `wp_kses_post` al
   renderizar y se come `<video>` y `<source>`. El shortcode ya trae el póster
   como fondo del envoltorio, así que con `prefers-reduced-motion` queda el
   fotograma fijo (el mismo que usa el Figma). */
.hw-loc-quote__bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hw-loc-quote__bg .hw-loopvid{position:absolute;inset:0;width:100%;height:100%}
.hw-loc-quote__bg .hw-loopvid__video{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
/* el rótulo va donde lo pone el nodo 14122:3766: y=3449 sobre un vídeo que
   arranca en 3265, o sea al 32,9 % del alto de la caja */
.hw-loc-quote__t{
  position:absolute;left:0;right:0;top:32.916%;margin:0;z-index:1;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;text-align:center;
  color:var(--awb-color1,#EFEAE4);
  /* BugHerd #104 (2026-09-24): Strada pide quitar la sombra. Iba más marcada
     que en el diseño para aguantar el bucle de vídeo; si a mitad del bucle el
     rótulo pierde contraste, el arreglo es un velo en la foto, no la sombra. */
  text-shadow:none}

/* ---------- 6 · LAS FRANJAS PINTADAS ---------- */
/* Transición al formulario. Van a sangre, así que este contenedor NO lleva la
   rejilla de 1160. Suben 78 px para que la primera monte el pie de la foto,
   como en el frame (la foto acaba en y=4118 y la franja arranca en 4048).
   Alto fijo en px y ancho al 100 %: son trazos pintados y estirarlos a lo
   ancho no se nota, mientras que dejarlos escalar descuadraría el ritmo. */
.hw-loc-stripes{
  background:#FFFFFF !important;position:relative;z-index:2;
  margin-top:-108px !important}
.hw-loc-band{position:relative;width:100%;padding-bottom:38px}
.hw-loc-stripe{display:block;width:100%;object-fit:fill;margin-bottom:0 !important}
/* Los trazos del frame miden 41 · 39 · 39 · 34 px. En los recortes, el trazo
   ocupa ~el 70 % del alto y arranca 8 px por debajo del borde, así que el alto
   en CSS es el del trazo dividido por 0,7 y los márgenes se calculan para que
   cada trazo caiga en 3724 · 3795 · 3882 · 3961. La cuarta es la delgada. */
.hw-loc-stripe--1{height:59px;margin-top:0}
.hw-loc-stripe--2{height:56px;margin-top:11px;transform:scaleX(-1)}
.hw-loc-stripe--3{height:56px;margin-top:31px}
.hw-loc-stripe--4{height:50px;margin-top:23px}

@media(prefers-reduced-motion:reduce){
  .hw-loc-c__win img{transition:none}
  .hw-loc-c:hover .hw-loc-c__win img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-loc-hero__title p,.hw-loc-hero__title.hw-loc-hero__title h1{font-size:48px}
  .hw-loc-h2 p,.hw-loc-map__h2,.hw-loc-quote__t{font-size:30px}
  .hw-loc-intro{padding-top:90px !important;padding-bottom:110px !important}
  .hw-loc-savannah .fusion-builder-row{flex-wrap:wrap !important}
  .hw-loc-sav__text,.hw-loc-sav__media{width:100% !important;margin-left:0 !important}
  .hw-loc-savannah .hw-loc-sav__media{margin-left:0 !important}
  .hw-loc-sav__media{margin-top:56px !important;max-width:570px;align-self:center}
  .hw-loc-savannah{padding-bottom:96px !important}
  /* El texto del mapa se sale del dibujo: ahí dentro ya no le queda hueco
     legible. Pasa a ir debajo, sobre crema, y el mapa se queda entero. */
  .hw-loc-map{padding-bottom:96px !important}
  .hw-loc-map__txt{position:static;left:auto;top:auto;width:100%;
    background:var(--awb-color1,#EFEAE4);padding:44px 32px;box-sizing:border-box}
  .hw-loc-quote__t{top:34%}
}
@media(max-width:760px){
  .hw-loc-hero{min-height:520px !important;padding-top:170px !important}
  .hw-loc-hero__title p,.hw-loc-hero__title.hw-loc-hero__title h1{font-size:36px}
  .hw-loc-hero__rule span{height:64px;margin-top:56px}
  .hw-loc-intro__body p{font-size:17px;line-height:1.8}
  .hw-loc-savannah{padding-top:80px !important;padding-bottom:70px !important}
  .hw-loc-h2 p,.hw-loc-map__h2{font-size:24px}
  /* Los rótulos escalan con el mapa (van en cqw), así que a 375 px caerían a
     3-4 px. Se dejan los que llevan el mensaje —Savannah, Richmond Hill, la
     marca H, los escudos— y se retiran los secundarios, que a ese tamaño sólo
     ensucian. Debajo va el mapa completo con sus rótulos en el `alt`. */
  .hw-lm--sec,.hw-lm--air,.hw-lm--olive,.hw-lm--plane{display:none}
  .hw-lm--t.hw-lm--big{font-size:max(9px,1.6cqw);letter-spacing:.12em}
  .hw-lm--sh,.hw-lm--pill{font-size:max(7px,1.4cqw);letter-spacing:.06em}
  .hw-loc-map{padding-bottom:70px !important}
  .hw-loc-map__txt{padding:36px 24px}
  .hw-loc-quote{aspect-ratio:3/4}
  /* En vertical el rótulo cae sobre las nubes claras y no sobre el cielo
     oscuro del diseño, así que necesita más sombra para leerse. */
  .hw-loc-quote__t{font-size:22px;top:34%;
    text-shadow:0 1px 3px rgba(25,24,12,.55), 0 2px 22px rgba(25,24,12,.5)}
  .hw-loc-banner{padding-top:0 !important}
  .hw-loc-stripe--1{height:30px}.hw-loc-stripe--2{height:34px;margin-top:14px}
  .hw-loc-stripe--3{height:34px;margin-top:20px}.hw-loc-stripe--4{height:30px;margin-top:16px}
  .hw-loc-stripes{margin-top:-64px !important}
}

/* BugHerd #103 (2026-09-24): el velo del Figma sobre el mapa (nodo 15138:16416:
   relleno #BAC3CB al 10 % encima de la imagen). Sin él el dibujo se funde con el
   fondo blanco. Va en ::before —pintado ANTES que los rótulos, que también son
   absolutos, así que les queda debajo— y no captura clics. */
.hw-loc-map__fig::before{content:"";position:absolute;inset:0;z-index:0;
  background:rgba(186,195,203,.1);pointer-events:none}

/* BugHerd #105 (2026-09-24): las franjas, del Figma y no del pantallazo.
   Eran cuatro recortes a 1× del frame con el alfa deducido del blanco, así que
   salían borrosas, algo translúcidas y a 31 px del borde. Ahora es el relleno
   del nodo `pattern` (14136:3970) —PNG de 4096 con alfa real—, recortado igual
   que en el Figma (top -73,6 %, alto 219,83 %) y servido a 2880×656. Va a
   sangre (100vw) y con la proporción del nodo, 1440×328. El trazo es opaco y
   entre trazo y trazo se ve lo de debajo, como en el diseño. Las <img> viejas
   se quedan en el contenido pero no se pintan. */
.hw-loc-band{
  width:100vw;margin-left:calc(50% - 50vw);padding-bottom:0;
  aspect-ratio:1440/328;
  background:url('/wp-content/uploads/2026/09/hw-loc-stripes-2026.webp') center/100% 100% no-repeat}
.hw-loc-band .hw-loc-stripe{display:none !important}
/* En el Figma el patrón arranca 136 px por encima del pie del vídeo. */
@media(min-width:761px){.hw-loc-stripes{margin-top:-136px !important}}

/* ==================================================================
   EXPLORE HEARTWOOD (/lifestyle, página 54)
   Medidas del nodo `14138:3979` del Figma, revisado el 2026-09-02
   (`figma-export-2026-09-02/04_Explore-Heartwood-Desktop.png`, 1440×8249).
   ⚠️ El respaldo de julio se había quedado viejo: el frame medía 6087.

   Bandas: héroe 0-680 · crema 680-1584 · blanco 1584-6189 ·
           "coming soon" 6190-6757 · formulario 6758.
   Secciones: intro+distritos 680-2657 · outfitters 2657-3407 ·
              what's here 3407-5429 · spotlight 5429-6190 · next 6190-6758.
   ================================================================== */
body.page-id-54 #main{padding-top:0 !important}

/* Rejilla de 1160 y la compensación de canaletas de Avada deshecha antes
   (fila con `max-width:104%` y `margin:0 -2%`; columnas con 20 px abajo y
   ~22 laterales). Ver el bloque LOCATION para el detalle de la trampa. */
.hw-ex-hero,.hw-ex-grow,.hw-ex-split,.hw-ex-here,.hw-ex-next{
  padding-left:0 !important;padding-right:0 !important}
.hw-ex-hero .fusion-builder-row,
.hw-ex-grow .fusion-builder-row,
.hw-ex-split .fusion-builder-row,
.hw-ex-here .fusion-builder-row,
.hw-ex-next .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-ex-grow .fusion-builder-row,
.hw-ex-split .fusion-builder-row,
.hw-ex-here .fusion-builder-row,
.hw-ex-next .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-ex-hero .fusion-column-wrapper,
.hw-ex-grow .fusion-column-wrapper,
.hw-ex-split .fusion-column-wrapper,
.hw-ex-here .fusion-column-wrapper,
.hw-ex-next .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-ex-hero .fusion-layout-column,
.hw-ex-grow .fusion-layout-column,
.hw-ex-split .fusion-layout-column,
.hw-ex-here .fusion-layout-column,
.hw-ex-next .fusion-layout-column{margin-bottom:0 !important}
/* `wpautop` deja un <p> vacío con 20 px de margen al final de cada bloque de
   marcado; en cajas con `aspect-ratio` eso descuadra todo lo que va en %. */
.hw-ex-map__fig > p:empty,.hw-ex-map > p:empty,
.hw-ex-districts > p:empty,.hw-ex-shot > p:empty{display:none !important;margin:0 !important}
.hw-ex-hero .fusion-text p,.hw-ex-grow .fusion-text p,
.hw-ex-split .fusion-text p,.hw-ex-here .fusion-text p,
.hw-ex-next .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
/* El velo NO es un degradado como en Our Story/Location: aquí el diseño pone
   un plano de oliva al 40 % (`rgba(66,75,10,.4)`). */
.hw-ex-hero{
  position:relative;min-height:680px !important;
  background:#19180C url('/wp-content/uploads/2026/09/hw-ex-hero-garden.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:234px !important;padding-bottom:0 !important}
.hw-ex-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-ex-hero > *{position:relative;z-index:1}
.hw-ex-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-ex-hero__eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-ex-hero__eyebrow{margin-bottom:18px !important}
/* 86 y no los 90 de Our Story y Location: aquí el titular es más largo
   ("Crafted for this time," ocupa 718 px de los 806 de la columna en el
   frame, o sea el 89 %) y a 90 se comía el 94 % y quedaba más apretado que en
   el diseño. El de "coming soon" sí se queda en 90: ahí medido contra el
   frame da 554 px de los 570 de columna, clavado. */
.hw-ex-hero__title p,.hw-ex-hero__title.hw-ex-hero__title h1{
  font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:86px;line-height:1.0;letter-spacing:.5px;
  max-width:806px;margin:0 auto !important}
.hw-ex-hero__title{margin-bottom:0 !important}
.hw-ex-hero__rule{margin-bottom:0 !important}
.hw-ex-hero__rule span{display:block;width:1px;height:121px;margin:125px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO + "HERE WE GROW" ---------- */
/* El mapa monta el borde entre la banda crema y la blanca. En vez de dos
   contenedores y márgenes negativos, la sección es UNA sola y el corte va en
   un degradado a 904 px: así todo fluye normal y no hay nada que descuadrar. */
.hw-ex-grow{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 904px, #FFFFFF 904px 100%) !important}
.hw-ex-intro p{
  font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:734px;margin:0 auto !important}
.hw-ex-intro{margin-bottom:119px !important}
.hw-ex-grow__h2 p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C)}
.hw-ex-grow__h2{margin-bottom:13px !important}
.hw-ex-grow__intro p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C);max-width:741px;margin:0 auto !important}
.hw-ex-grow__intro{margin-bottom:50px !important}

/* el mapa de distritos: dibujo + rótulos vivos, como el de Location */
.hw-ex-map{width:100%}
.hw-ex-map__fig{position:relative;width:100%;aspect-ratio:1160/856;
  container-type:inline-size}
.hw-ex-map__art{display:block;width:100%;height:100%;object-fit:cover;
  margin:0 !important}
.hw-exlm{
  position:absolute;transform:translateX(-50%);
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  text-transform:uppercase;text-align:center;margin:0;pointer-events:none}
.hw-exlm--road,.hw-exlm--fut{
  font-size:1.0345cqw;letter-spacing:.1345cqw;line-height:1;color:#BAC3CB;
  white-space:nowrap}
.hw-exlm--fut{white-space:normal;line-height:1.15}
.hw-exlm--sh,.hw-exlm--pill{
  display:flex;align-items:center;justify-content:center;color:#FFFFFF;
  font-size:1.0345cqw;letter-spacing:.1345cqw;line-height:1;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%}
.hw-exlm--pill{background:#6D7EA0;border-radius:30px}
/* las chapas de distrito: fondo de color, filete blanco y sólo la esquina
   superior derecha redondeada, como en el diseño */
.hw-exlm--tag{
  display:flex;align-items:center;justify-content:center;
  color:#FFFFFF;font-size:1.2931cqw;letter-spacing:.1681cqw;line-height:1.2;
  white-space:nowrap;border:1px solid #FFFFFF;border-radius:0 10px 0 0}
.hw-exlm--dtown{background:#424B0A}
.hw-exlm--dway {background:#DCA233}
.hw-exlm--dpark{background:#CEC439}

/* --- rótulos del mapa de distritos (generado por gen-map-labels.py) --- */
.hw-exlm--sh95{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2236.6672%22%20height%3D%2233.0005%22%20viewBox%3D%220%200%2036.6672%2033.0005%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.2975%2033.0005C18.1553%2033.0005%2018.0335%2032.9804%2017.8913%2032.92C8.77347%2029.0589%203.06718%2023.77%200.934937%2017.194C-1.90805%208.48641%202.62042%200.804399%202.82349%200.48264C2.98595%200.22121%203.22964%200.06033%203.53424%200C3.59516%200%203.63578%200%203.6967%200C3.94038%200%204.18407%200.08044%204.36683%200.24132C4.38714%200.26143%207.37228%202.75507%2011.4946%202.75507C13.6472%202.75507%2015.7591%202.09144%2017.7695%200.764179C17.932%200.64352%2018.135%200.6033%2018.3381%200.6033C18.5412%200.6033%2018.7239%200.66363%2018.9067%200.764179C20.9171%202.07133%2023.029%202.75507%2025.1816%202.75507C29.3039%202.75507%2032.2687%200.28154%2032.3094%200.24132C32.4921%200.08044%2032.7358%200%2032.9795%200C33.0404%200%2033.081%200%2033.1419%200C33.4465%200.04022%2033.6902%200.22121%2033.8527%200.48264C34.0558%200.804399%2038.5842%208.4663%2035.7209%2017.194C33.5684%2023.7499%2027.8621%2029.0388%2018.7442%2032.92C18.6224%2032.9804%2018.4802%2033.0005%2018.3381%2033.0005H18.2975Z%22%20fill%3D%22%236D7EA0%22%2F%3E%3C%2Fsvg%3E")}
.hw-exlm--sh17{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2225%22%20viewBox%3D%220%200%2028%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.9928%2025C13.8481%2025%2013.7178%2024.9528%2013.5876%2024.8741L12.2419%2023.8987C11.9669%2023.7099%2011.663%2023.5997%2011.3592%2023.5997C9.56486%2023.5997%207.81395%2023.2222%206.16434%2022.4827C4.5292%2021.759%203.03876%2020.6734%201.76537%2019.2889C0.622222%2018.0302%200%2016.3782%200%2014.6161C0%2012.854%200.622222%2011.1863%201.76537%209.94336C2.34419%209.31403%202.66253%208.48018%202.66253%207.59912C2.66253%206.71806%202.34419%205.86847%201.76537%205.25488C1.63514%205.11328%201.54832%204.90875%201.54832%204.70422C1.54832%204.49969%201.62067%204.29515%201.76537%204.15356L5.36848%200.251731C5.51318%200.0943989%205.70129%200.0157332%205.87494%200.0157332C6.04858%200.0157332%206.20775%200.0786658%206.35246%200.204531C7.56796%201.35305%208.8124%201.93518%2010.0424%201.93518C11.6775%201.93518%2012.9364%200.912524%2013.385%200.487728L13.4863%200.377596C13.631%200.220264%2013.8191%200.141598%2013.9928%200.141598C14.1664%200.141598%2014.3545%200.220264%2014.4992%200.361863L14.6439%200.519194C15.0636%200.912524%2016.308%201.91945%2017.9576%201.91945C19.2021%201.91945%2020.4465%201.33732%2021.662%200.188798C21.7922%200.0629327%2021.9659%200%2022.1395%200C22.3276%200%2022.5158%200.0786658%2022.646%200.235997L26.2202%204.12209C26.3504%204.26369%2026.4372%204.46822%2026.4372%204.67275C26.4372%204.87728%2026.3649%205.08181%2026.2202%205.22341C25.6413%205.85274%2025.323%206.6866%2025.323%207.56765C25.323%208.44871%2025.6413%209.28257%2026.2202%209.91189C27.3633%2011.1391%2028%2012.8068%2028%2014.5846C28%2016.3625%2027.3633%2018.0145%2026.2202%2019.2574C24.9468%2020.6419%2023.4708%2021.7118%2021.8212%2022.4512C20.2005%2023.1907%2018.4496%2023.5683%2016.6408%2023.5683C16.337%2023.5683%2016.0186%2023.6784%2015.7437%2023.8672L14.4124%2024.8427C14.2966%2024.9371%2014.1519%2024.9685%2014.0072%2024.9685L13.9928%2025Z%22%20fill%3D%22%236D7EA0%22%2F%3E%3C%2Fsvg%3E")}

.hw-exlm--sh95{left:37.9310%;top:84.8131%;width:3.1609%;height:3.8551%;}
.hw-exlm--sh17{left:14.4828%;top:38.0841%;width:2.4138%;height:2.9206%;}
.hw-exlm--pill144{left:92.8448%;top:36.2150%;width:3.4483%;height:2.2196%;}
.hw-exlm--harris{left:69.5201%;top:15.7863%;transform:translate(-50%,-50%) rotate(52.14deg)}
.hw-exlm--belfast{left:82.6532%;top:63.8808%;transform:translate(-50%,-50%) rotate(-38.01deg)}
.hw-exlm--bryan{left:94.7768%;top:62.4529%;transform:translate(-50%,-50%) rotate(79.3deg)}
.hw-exlm--dtown{left:55.7328%;top:60.3972%;width:14.0517%;height:4.2056%;}
.hw-exlm--dway{left:47.8879%;top:27.1028%;width:22.5000%;height:4.2056%;}
.hw-exlm--dpark{left:24.9569%;top:47.8972%;width:23.3621%;height:4.2056%;}
.hw-exlm--fut1{left:57.4138%;top:41.7054%;width:9.8276%;}
.hw-exlm--fut2{left:67.8448%;top:89.9533%;width:9.8276%;}

/* las tres columnas de distrito */
.hw-ex-districts{display:flex;gap:62px;margin-top:51px}
.hw-ex-d{flex:1 1 0;text-align:center}
.hw-ex-d__t{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  margin:0 0 14px !important}
.hw-ex-d__t--town{color:#424B0A}
.hw-ex-d__t--park{color:#CEC439}
.hw-ex-d__t--way {color:#DCA233}
.hw-ex-d__b{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C);margin:0 !important}

/* ---------- 3 y 5 · LOS DOS BLOQUES PARTIDOS ---------- */
.hw-ex-split{background:#FFFFFF !important}
.hw-ex-split .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-ex-split .fusion-layout-column{margin:0 !important;float:none !important}
/* 472 de texto + 118 de hueco + 570 de foto = 1160 */
.hw-ex-split__text {width:40.690% !important}
.hw-ex-split__media{width:49.138% !important}
.hw-ex-split--outfitters .hw-ex-split__media{margin-left:10.172% !important}
.hw-ex-split--spotlight  .hw-ex-split__text {margin-left:10.172% !important}
/* el texto arranca más abajo que la foto (91 px en Outfitters, 75 en el
   spotlight); la foto va pegada al borde superior de la sección */
.hw-ex-split--outfitters .hw-ex-split__text{padding-top:91px}
.hw-ex-split--spotlight  .hw-ex-split__text{padding-top:75px}

.hw-ex-shot{position:relative;width:100%;aspect-ratio:570/598;overflow:hidden}
.hw-ex-shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-ex-shot:hover img{transform:scale(1.045)}

.hw-ex-eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0)}
.hw-ex-eyebrow{margin-bottom:18px !important}
.hw-ex-h2 p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C)}
.hw-ex-h2{margin-bottom:25px !important}
.hw-ex-body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C);max-width:472px}
.hw-ex-body{margin-bottom:29px !important}
/* El CTA naranja con la flecha que crece es el del sitio; vive en el bloque
   OUR STORY (`.hw-os-cta`) y se reusa tal cual. Pendiente: renombrarlo a algo
   sin página en el nombre, que ya lo usan tres. */
.hw-ex-cta{margin-top:0 !important}

/* ---------- 4 · WHAT'S HERE ---------- */
.hw-ex-here{background:#FFFFFF !important}
.hw-ex-eyebrow--c p{text-align:center}
.hw-ex-eyebrow--c{margin-bottom:24px !important}
.hw-ex-h2--c p{text-align:center;max-width:726px;margin:0 auto !important}
.hw-ex-h2--c{margin-bottom:24px !important}
.hw-ex-here__intro p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C);max-width:762px;margin:0 auto !important;
  text-align:center}
/* Hueco reservado para el directorio filtrable. El código es del cliente
   ("Map Heartwood") y entra como embed más adelante; hasta entonces no ocupa
   alto, para no dejar un agujero en la página. */
.hw-ex-directory{width:100%}

/* ---------- 6 · COMING SOON ---------- */
.hw-ex-next{
  position:relative;min-height:568px !important;
  background:#2B2E1F url('/wp-content/uploads/2026/09/hw-ex-next-bokeh.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4)}
.hw-ex-next .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-end;margin:0 auto !important}
.hw-ex-next .fusion-layout-column{margin:0 !important;float:none !important}
.hw-ex-next__l{width:49.138% !important}
.hw-ex-next__r{width:40.690% !important;margin-left:10.172% !important}

/* #20 · «There should be spacing between these two modules… also be centered
   vertically with each other.»

   a) El hueco YA estaba en el diseño: ese `margin-left:10.172%` de aquí
      arriba. Lo que pasaba es que perdía el empate contra
      `.hw-ex-next .fusion-layout-column{margin:0 !important}` — los dos con
      `!important`, y ése pesa (0,2,0) contra (0,1,0). Medido: las dos
      columnas se tocaban en x=769, hueco CERO. Repitiendo la clase sube a
      (0,3,0) y entra: 118 px a 1440.
      De regalo, el módulo vuelve a la rejilla: arrancaba en x=199 y el resto
      de secciones de Explore (`here`, `grow`, `split`) arrancan en 140.

   b) El centrado NO se arregla en la fila: las columnas traen `align_self`
      del shortcode y `align-self` del hijo gana a `align-items` del padre.
      Medido: centros en 6573 y 6646.

   Sólo por encima de 1150, que es donde se apilan (ver el bloque responsive:
   ahí `margin-left` vuelve a 0 y no queremos que esto lo pise). */
@media(min-width:1151px){
  .hw-ex-next .fusion-layout-column.hw-ex-next__l,
  .hw-ex-next .fusion-layout-column.hw-ex-next__r{align-self:center}
  .hw-ex-next .fusion-layout-column.hw-ex-next__r{margin-left:10.172% !important}
}
.hw-ex-next .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-ex-next__eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1.7}
.hw-ex-next__eyebrow{margin-bottom:33px !important}
.hw-ex-next__title p{
  font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:90px;line-height:.96;letter-spacing:.5px;white-space:nowrap}
.hw-ex-next__body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8}

@media(prefers-reduced-motion:reduce){
  .hw-ex-shot img{transition:none}
  .hw-ex-shot:hover img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-ex-hero__title p,.hw-ex-hero__title.hw-ex-hero__title h1{font-size:48px}
  .hw-ex-h2 p,.hw-ex-grow__h2 p{font-size:30px}
  .hw-ex-next__title p{font-size:40px;white-space:normal}
  .hw-ex-grow{padding-top:90px !important;padding-bottom:110px !important;
    background:var(--awb-color1,#EFEAE4) !important}
  .hw-ex-intro{margin-bottom:80px !important}
  .hw-ex-districts{flex-wrap:wrap;gap:40px}
  .hw-ex-d{flex:1 1 45%}
  .hw-ex-split .fusion-builder-row,
  .hw-ex-next .fusion-builder-row{flex-wrap:wrap !important}
  .hw-ex-split__text,.hw-ex-split__media,
  .hw-ex-next__l,.hw-ex-next__r{width:100% !important;margin-left:0 !important}
  .hw-ex-split--outfitters .hw-ex-split__media,
  .hw-ex-split--spotlight .hw-ex-split__text,
  .hw-ex-next__r{margin-left:0 !important}
  .hw-ex-split--outfitters .hw-ex-split__text,
  .hw-ex-split--spotlight .hw-ex-split__text{padding-top:0}
  .hw-ex-split__media{margin-top:48px !important;max-width:570px}
  .hw-ex-split--spotlight .fusion-builder-row{flex-direction:column-reverse}
  .hw-ex-split--spotlight .hw-ex-split__media{margin-top:0 !important;margin-bottom:48px !important}
  .hw-ex-next__r{margin-top:32px !important}
  .hw-ex-here{padding-bottom:110px !important}
}
@media(max-width:760px){
  .hw-ex-hero{min-height:520px !important;padding-top:170px !important}
  .hw-ex-hero__title p,.hw-ex-hero__title.hw-ex-hero__title h1{font-size:36px}
  .hw-ex-hero__rule span{height:64px;margin-top:56px}
  .hw-ex-intro p{font-size:17px;line-height:1.8}
  .hw-ex-h2 p,.hw-ex-grow__h2 p{font-size:24px}
  .hw-ex-next__title p{font-size:30px}
  .hw-ex-d{flex:1 1 100%}
  /* Los rótulos del mapa escalan con el dibujo (van en cqw): a 375 px caerían
     a 3-4 px. Se dejan las tres chapas de distrito, que son el mensaje, y se
     retiran los secundarios. El mapa entero va descrito en el `alt`. */
  .hw-exlm--road,.hw-exlm--fut,.hw-exlm--sh,.hw-exlm--pill{display:none}
  .hw-exlm--tag{font-size:max(8px,2.4cqw);letter-spacing:.08em;
    border-radius:0 6px 0 0}
  .hw-ex-here{padding-bottom:80px !important}
}

/* BugHerd #106 (2026-09-24): el velo del Figma sobre el mapa (nodo 15138:16416:
   relleno #BAC3CB al 10 % encima de la imagen). Sin él el dibujo se funde con el
   fondo blanco. Va en ::before —pintado ANTES que los rótulos, que también son
   absolutos, así que les queda debajo— y no captura clics. */
.hw-ex-map__fig::before{content:"";position:absolute;inset:0;z-index:0;
  background:rgba(186,195,203,.1);pointer-events:none}

/* ==================================================================
   LIVE HERE (/real-estate, página 2175)
   Medidas del nodo `14620:6415` del Figma, revisado el 2026-09-03
   (`figma-export-2026-09-02/09_Live-Here-Desktop.png`, 1440×6567).

   Bandas: héroe 0-680 · crema 680-1255 · blanco 1255-5075 · formulario 5076.
   Secciones: intro 680-1788 · barrios 1788-2517 · constructores 2517-3173 ·
              alquileres 3173-4109 · futuros barrios 4109-5076.
   ================================================================== */
body.page-id-2175 #main{padding-top:0 !important}

/* Rejilla de 1160 y la compensación de canaletas de Avada deshecha antes
   (ver el bloque LOCATION para el detalle de la trampa). */
.hw-lh-hero,.hw-lh-intro,.hw-lh-hoods,.hw-lh-split,.hw-lh-future{
  padding-left:0 !important;padding-right:0 !important}
.hw-lh-hero .fusion-builder-row,
.hw-lh-intro .fusion-builder-row,
.hw-lh-hoods .fusion-builder-row,
.hw-lh-split .fusion-builder-row,
.hw-lh-future .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-lh-intro .fusion-builder-row,
.hw-lh-hoods .fusion-builder-row,
.hw-lh-split .fusion-builder-row,
.hw-lh-future .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-lh-hero .fusion-column-wrapper,.hw-lh-intro .fusion-column-wrapper,
.hw-lh-hoods .fusion-column-wrapper,.hw-lh-split .fusion-column-wrapper,
.hw-lh-future .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-lh-hero .fusion-layout-column,.hw-lh-intro .fusion-layout-column,
.hw-lh-hoods .fusion-layout-column,.hw-lh-split .fusion-layout-column,
.hw-lh-future .fusion-layout-column{margin-bottom:0 !important}
/* el <p> vacío que deja `wpautop` al final de cada bloque de marcado */
.hw-lh-intro__shot > p:empty,.hw-lh-hoods__row > p:empty,
.hw-lh-shot > p:empty,.hw-lh-panel > p:empty,.hw-lh-collage > p:empty{
  display:none !important;margin:0 !important}
.hw-lh-hero .fusion-text p,.hw-lh-intro .fusion-text p,
.hw-lh-hoods .fusion-text p,.hw-lh-split .fusion-text p,
.hw-lh-future .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
.hw-lh-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-lh-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:234px !important;padding-bottom:0 !important}
/* velo de oliva, como en Explore */
.hw-lh-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-lh-hero > *{position:relative;z-index:1}
.hw-lh-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-lh-hero__eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-lh-hero__eyebrow{margin-bottom:18px !important}
.hw-lh-hero__title p,.hw-lh-hero__title.hw-lh-hero__title h1{
  font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:86px;line-height:1.0;letter-spacing:.5px;
  max-width:806px;margin:0 auto !important}
.hw-lh-hero__title{margin-bottom:0 !important}
.hw-lh-hero__rule{margin-bottom:0 !important}
.hw-lh-hero__rule span{display:block;width:1px;height:121px;margin:125px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO (la foto monta el borde de la banda) ---------- */
/* Mismo truco que en Explore: una sola sección y el corte crema→blanco en un
   degradado, en vez de dos contenedores con márgenes negativos. */
.hw-lh-intro{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 575px, #FFFFFF 575px 100%) !important}
.hw-lh-intro__body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:768px;margin:0 auto !important}
.hw-lh-intro__body{margin-bottom:117px !important}
.hw-lh-intro__shot{position:relative;width:100%;aspect-ratio:1160/525;overflow:hidden}
.hw-lh-intro__shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}

/* ---------- 3 · LOS CINCO BARRIOS ---------- */
.hw-lh-hoods{background:#FFFFFF !important}
.hw-lh-eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0)}
.hw-lh-eyebrow{margin-bottom:18px !important}
.hw-lh-eyebrow--c p{text-align:center}
.hw-lh-h2 p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C)}
.hw-lh-h2{margin-bottom:25px !important}
.hw-lh-h2--c p{text-align:center;max-width:848px;margin:0 auto !important}
.hw-lh-h2--c{margin-bottom:22px !important}
.hw-lh-hoods__intro p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);max-width:670px;margin:0 auto !important;text-align:center}
.hw-lh-hoods__intro{margin-bottom:59px !important}

/* Cinco columnas de 207 repartidas en los 1160. Los iconos tienen alturas
   distintas y en el diseño se alinean por ABAJO, no por arriba. */
.hw-lh-hoods__row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.hw-lh-hood{width:207px;flex:0 0 207px;text-align:center}
.hw-lh-hood__ico{
  display:block;height:124px;margin:0 auto 12px;
  background-repeat:no-repeat;background-position:center bottom;background-size:contain}
.hw-lh-hood__ico--covey   {width:130px;background-image:url('/wp-content/uploads/2026/09/hw-lh-ico-covey.png')}
.hw-lh-hood__ico--delwebb {width:130px;background-image:url('/wp-content/uploads/2026/09/hw-lh-ico-delwebb.png')}
.hw-lh-hood__ico--loblolly{width:100px;background-image:url('/wp-content/uploads/2026/09/hw-lh-ico-loblolly.png')}
.hw-lh-hood__ico--tupelo  {width:146px;background-image:url('/wp-content/uploads/2026/09/hw-lh-ico-tupelo.png')}
.hw-lh-hood__ico--willis  {width:124px;background-image:url('/wp-content/uploads/2026/09/hw-lh-ico-willis.png')}
/* el nombre va en la serif de titulares, no en la del cuerpo */
.hw-lh-hood__n{
  font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;font-size:22px;
  line-height:1.4;letter-spacing:.4px;color:var(--awb-color8,#19180C);
  margin:0 0 10px !important}
.hw-lh-hood__b{
  font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:1.4;
  color:var(--awb-color8,#19180C);margin:0 0 14px !important}
.hw-lh-hood__t{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1.6;
  color:var(--awb-color7,#E54511);margin:0 !important}

/* ---------- 4 y 5 · LOS DOS BLOQUES PARTIDOS ---------- */
.hw-lh-split{background:#FFFFFF !important}
.hw-lh-split .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-lh-split .fusion-layout-column{margin:0 !important;float:none !important}
/* 472 de texto + 118 de hueco + 570 de media = 1160 */
.hw-lh-split__text {width:40.690% !important}
.hw-lh-split__media{width:49.138% !important}
.hw-lh-split--builders .hw-lh-split__media{margin-left:10.172% !important}
.hw-lh-split--rentals  .hw-lh-split__text {margin-left:10.172% !important}
/* el texto arranca más abajo que la media */
.hw-lh-split--builders .hw-lh-split__text{padding-top:37px}
.hw-lh-split--rentals  .hw-lh-split__text{padding-top:69px}

.hw-lh-shot{position:relative;width:100%;overflow:hidden}
.hw-lh-shot--builders{aspect-ratio:570/490}
.hw-lh-shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-lh-shot:hover img{transform:scale(1.045)}

/* El panel de alquileres: la foto va sobre un lienzo de lino, metida 88 px por
   la izquierda y 102 por arriba (570×790 con la foto de 394×596). */
.hw-lh-panel{position:relative;width:100%;aspect-ratio:570/790;
  background:#F5F3F0 url('/wp-content/uploads/2026/09/hw-lh-panel.webp') center/cover no-repeat}
.hw-lh-panel__win{position:absolute;left:15.439%;top:12.911%;
  width:69.123%;height:75.443%;overflow:hidden}
.hw-lh-panel__win img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-lh-panel:hover .hw-lh-panel__win img{transform:scale(1.045)}

.hw-lh-body p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);max-width:472px}
.hw-lh-body p + p{margin-top:18px !important}
.hw-lh-body a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hw-lh-body a:hover{color:var(--awb-color7,#E54511)}
.hw-lh-body{margin-bottom:26px !important}
.hw-lh-cta{margin-top:0 !important}
.hw-lh-cta--2{margin-top:12px !important}

/* ---------- 6 · FUTUROS BARRIOS ---------- */
.hw-lh-future{background:#FFFFFF !important}
.hw-lh-future .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-lh-future .fusion-layout-column{margin:0 !important;float:none !important}
.hw-lh-future__text {width:40.690% !important;padding-top:86px}
.hw-lh-future__media{width:49.138% !important;margin-left:10.172% !important}

/* el collage: caja de 570×766 con las cinco piezas en % */
.hw-lh-collage{position:relative;width:100%;aspect-ratio:570/766}
.hw-lh-cc{position:absolute;overflow:hidden;box-sizing:border-box}
.hw-lh-cc img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-lh-cc:hover img{transform:scale(1.045)}
.hw-lh-cc--dock    {left:0;        top:0;       width:48.772%;height:22.454%}
.hw-lh-cc--pool    {left:63.158%;  top:4.308%;  width:33.333%;height:13.838%}
/* dos llevan paspartú. OJO: los % de padding se resuelven contra el ANCHO del
   bloque contenedor (los 570 del collage), no contra el de cada pieza. */
.hw-lh-cc--interior{left:4.211%;   top:28.591%; width:35.965%;height:33.551%;
  background:#BAC3CB;padding:1.7544%}
.hw-lh-cc--pavilion{left:51.754%;  top:25.718%; width:48.246%;height:42.820%;
  background:var(--awb-color5,#424B0A);padding:3.5088%;z-index:2}
.hw-lh-cc--preserve{left:15.439%;  top:71.149%; width:66.667%;height:28.851%;z-index:3}

@media(prefers-reduced-motion:reduce){
  .hw-lh-shot img,.hw-lh-panel__win img,.hw-lh-cc img{transition:none}
  .hw-lh-shot:hover img,.hw-lh-panel:hover .hw-lh-panel__win img,
  .hw-lh-cc:hover img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-lh-hero__title p,.hw-lh-hero__title.hw-lh-hero__title h1{font-size:48px}
  .hw-lh-h2 p{font-size:30px}
  .hw-lh-intro{padding-top:90px !important;padding-bottom:90px !important;
    background:var(--awb-color1,#EFEAE4) !important}
  .hw-lh-intro__body{margin-bottom:70px !important}
  .hw-lh-hoods__row{flex-wrap:wrap;justify-content:center;gap:48px 32px}
  .hw-lh-hood{flex:0 0 207px}
  .hw-lh-hoods{padding-bottom:110px !important}
  .hw-lh-split .fusion-builder-row,
  .hw-lh-future .fusion-builder-row{flex-wrap:wrap !important}
  .hw-lh-split__text,.hw-lh-split__media,
  .hw-lh-future__text,.hw-lh-future__media{width:100% !important;margin-left:0 !important;padding-top:0}
  .hw-lh-split--builders .hw-lh-split__media,
  .hw-lh-split--rentals .hw-lh-split__text,
  .hw-lh-future__media{margin-left:0 !important}
  .hw-lh-split__media{margin-top:48px !important;max-width:570px}
  .hw-lh-split--rentals .fusion-builder-row{flex-direction:column-reverse}
  .hw-lh-split--rentals .hw-lh-split__media{margin-top:0 !important;margin-bottom:48px !important}
  .hw-lh-future__media{margin-top:48px !important;max-width:570px}
  .hw-lh-split,.hw-lh-future{padding-bottom:110px !important}
}
@media(max-width:760px){
  .hw-lh-hero{min-height:520px !important;padding-top:170px !important}
  .hw-lh-hero__title p,.hw-lh-hero__title.hw-lh-hero__title h1{font-size:36px}
  .hw-lh-hero__rule span{height:64px;margin-top:56px}
  .hw-lh-intro__body p{font-size:17px;line-height:1.8}
  .hw-lh-h2 p{font-size:24px}
  .hw-lh-hood{flex:0 0 100%;max-width:300px}
  .hw-lh-hoods{padding-bottom:80px !important}
  .hw-lh-split,.hw-lh-future{padding-bottom:80px !important}
}

/* ==================================================================
   WELLNESS (/wellness, página 7493)
   Nodo `14620:8016` del Figma, revisado el 2026-09-03 (frame 1440×5179).
   Bandas: héroe 0-680 · crema 680-1271 · blanco 1271-3687 · formulario 3688.
   ================================================================== */
body.page-id-7493 #main{padding-top:0 !important}

.hw-we-hero,.hw-we-top,.hw-we-split{padding-left:0 !important;padding-right:0 !important}
.hw-we-hero .fusion-builder-row,.hw-we-top .fusion-builder-row,.hw-we-split .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-we-top .fusion-builder-row,.hw-we-split .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-we-hero .fusion-column-wrapper,.hw-we-top .fusion-column-wrapper,
.hw-we-split .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-we-hero .fusion-layout-column,.hw-we-top .fusion-layout-column,
.hw-we-split .fusion-layout-column{margin-bottom:0 !important}
.hw-we-nature > p:empty,.hw-we-shot > p:empty,.hw-we-panel > p:empty{
  display:none !important;margin:0 !important}
.hw-we-hero .fusion-text p,.hw-we-top .fusion-text p,.hw-we-split .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
.hw-we-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-we-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:234px !important;padding-bottom:0 !important}
.hw-we-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-we-hero > *{position:relative;z-index:1}
.hw-we-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-we-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-we-hero__eyebrow{margin-bottom:18px !important}
.hw-we-hero__title p,.hw-we-hero__title.hw-we-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:86px;line-height:1.0;letter-spacing:.5px;max-width:806px;margin:0 auto !important}
.hw-we-hero__title{margin-bottom:0 !important}
.hw-we-hero__rule{margin-bottom:0 !important}
.hw-we-hero__rule span{display:block;width:1px;height:121px;margin:125px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO + "LIVING IN NATURE" ---------- */
/* La foto de la naturaleza monta el borde entre la banda crema y la blanca:
   una sola sección con el corte en un degradado (ver el bloque EXPLORE). */
.hw-we-top{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 591px, #FFFFFF 591px 100%) !important}
.hw-we-intro p{font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:728px;margin:0 auto !important}
.hw-we-intro{margin-bottom:126px !important}

/* dos columnas dentro de un mismo bloque: la foto (570) y el texto (472),
   con los 118 de hueco de siempre */
.hw-we-nature{display:flex;align-items:flex-start;gap:118px}
.hw-we-nature__media{flex:0 0 570px;position:relative;aspect-ratio:570/826;overflow:hidden}
.hw-we-nature__media img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-we-nature__media:hover img{transform:scale(1.045)}
.hw-we-nature__text{flex:1 1 auto;padding-top:233px}

/* ---------- tipografía compartida ---------- */
.hw-we-eyebrow,.hw-we-eyebrow-b p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0);margin:0 0 18px !important}
.hw-we-eyebrow-b{margin-bottom:18px !important}
.hw-we-h2,.hw-we-h2-b p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C);margin:0 0 25px !important}
.hw-we-h2-b{margin-bottom:25px !important}
.hw-we-body,.hw-we-body-b p{
  font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);max-width:472px;margin:0 !important}
.hw-we-body-b{margin-bottom:29px !important}
.hw-we-cta{margin-top:0 !important}

/* ---------- 3 y 4 · LOS DOS BLOQUES PARTIDOS ---------- */
.hw-we-split{background:#FFFFFF !important}
.hw-we-split .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-we-split .fusion-layout-column{margin:0 !important;float:none !important}
.hw-we-split__text {width:40.690% !important}
.hw-we-split__media{width:49.138% !important}
.hw-we-split--sjc .hw-we-split__media{margin-left:10.172% !important}
.hw-we-split--be  .hw-we-split__text {margin-left:10.172% !important}
.hw-we-split--sjc .hw-we-split__text{padding-top:31px}
.hw-we-split--be  .hw-we-split__text{padding-top:97px}

.hw-we-shot{position:relative;width:100%;overflow:hidden}
.hw-we-shot--sjc{aspect-ratio:570/478}
.hw-we-shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-we-shot:hover img{transform:scale(1.045)}

/* el panel de rayas pintadas con la foto del yoga dentro (570×598 con la foto
   de 402×422 metida 84 px por la izquierda y 88 por arriba) */
.hw-we-panel{position:relative;width:100%;aspect-ratio:570/598;
  background:#FFFFFF url('/wp-content/uploads/2026/09/hw-we-stripes.webp') center/cover no-repeat}
.hw-we-panel__win{position:absolute;left:14.737%;top:14.716%;
  width:70.526%;height:70.569%;overflow:hidden}
.hw-we-panel__win img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-we-panel:hover .hw-we-panel__win img{transform:scale(1.045)}

@media(prefers-reduced-motion:reduce){
  .hw-we-nature__media img,.hw-we-shot img,.hw-we-panel__win img{transition:none}
  .hw-we-nature__media:hover img,.hw-we-shot:hover img,
  .hw-we-panel:hover .hw-we-panel__win img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-we-hero__title p,.hw-we-hero__title.hw-we-hero__title h1{font-size:48px}
  .hw-we-h2,.hw-we-h2-b p{font-size:30px}
  .hw-we-top{padding-top:90px !important;padding-bottom:110px !important;
    background:var(--awb-color1,#EFEAE4) !important}
  .hw-we-intro{margin-bottom:70px !important}
  .hw-we-nature{flex-wrap:wrap;gap:48px}
  .hw-we-nature__media{flex:1 1 100%;max-width:570px}
  .hw-we-nature__text{flex:1 1 100%;padding-top:0}
  .hw-we-split .fusion-builder-row{flex-wrap:wrap !important}
  .hw-we-split__text,.hw-we-split__media{width:100% !important;margin-left:0 !important;padding-top:0}
  .hw-we-split--sjc .hw-we-split__media,.hw-we-split--be .hw-we-split__text{margin-left:0 !important}
  .hw-we-split__media{margin-top:48px !important;max-width:570px}
  .hw-we-split--be .fusion-builder-row{flex-direction:column-reverse}
  .hw-we-split--be .hw-we-split__media{margin-top:0 !important;margin-bottom:48px !important}
  .hw-we-split{padding-bottom:110px !important}
}
@media(max-width:760px){
  .hw-we-hero{min-height:520px !important;padding-top:170px !important}
  .hw-we-hero__title p,.hw-we-hero__title.hw-we-hero__title h1{font-size:36px}
  .hw-we-hero__rule span{height:64px;margin-top:56px}
  .hw-we-intro p{font-size:17px;line-height:1.8}
  .hw-we-h2,.hw-we-h2-b p{font-size:24px}
  .hw-we-split{padding-bottom:80px !important}
}

/* ==================================================================
   BĒ HEALTH (/be-health, página 3493)
   Nodo `14625:8547` del Figma, revisado el 2026-09-03 (frame 1440×4430).
   Bandas: héroe 0-680 · crema 680-1216 · blanco 1216-2938 · formulario 2939.
   ================================================================== */
body.page-id-3493 #main{padding-top:0 !important}

.hw-bh-hero,.hw-bh-intro,.hw-bh-split{padding-left:0 !important;padding-right:0 !important}
.hw-bh-hero .fusion-builder-row,.hw-bh-intro .fusion-builder-row,.hw-bh-split .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-bh-intro .fusion-builder-row,.hw-bh-split .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-bh-hero .fusion-column-wrapper,.hw-bh-intro .fusion-column-wrapper,
.hw-bh-split .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-bh-hero .fusion-layout-column,.hw-bh-intro .fusion-layout-column,
.hw-bh-split .fusion-layout-column{margin-bottom:0 !important}
.hw-bh-shot > p:empty,.hw-bh-panel > p:empty{display:none !important;margin:0 !important}
.hw-bh-hero .fusion-text p,.hw-bh-intro .fusion-text p,.hw-bh-split .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
/* El titular va en TRES líneas, así que arranca más arriba que en las otras
   L3 (y=225 en vez de 263) y la caja es de 806×258. */
.hw-bh-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-bh-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:196px !important;padding-bottom:0 !important}
.hw-bh-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-bh-hero > *{position:relative;z-index:1}
.hw-bh-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-bh-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-bh-hero__eyebrow{margin-bottom:18px !important}
.hw-bh-hero__title p,.hw-bh-hero__title.hw-bh-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:86px;line-height:1.0;letter-spacing:.5px;max-width:860px;margin:0 auto !important}
.hw-bh-hero__title{margin-bottom:0 !important}
.hw-bh-hero__rule{margin-bottom:0 !important}
.hw-bh-hero__rule span{display:block;width:1px;height:121px;margin:63px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO ---------- */
/* La banda crema acaba en 1216 pero la sección sigue hasta 1357: el corte va
   en un degradado, como en Explore y Wellness. */
.hw-bh-intro{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 536px, #FFFFFF 536px 100%) !important}
.hw-bh-intro__body p{font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:768px;margin:0 auto !important}

/* ---------- 3 y 4 · LOS DOS BLOQUES PARTIDOS ---------- */
.hw-bh-split{background:#FFFFFF !important}
.hw-bh-split .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-bh-split .fusion-layout-column{margin:0 !important;float:none !important}
.hw-bh-split__text {width:40.690% !important}
.hw-bh-split__media{width:49.138% !important}
.hw-bh-split--services .hw-bh-split__media{margin-left:10.172% !important}
.hw-bh-split--fitness  .hw-bh-split__text {margin-left:10.172% !important}
.hw-bh-split--services .hw-bh-split__text{padding-top:184px}
.hw-bh-split--fitness  .hw-bh-split__text{padding-top:118px}

.hw-bh-h2 p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C)}
.hw-bh-h2{margin-bottom:22px !important}
.hw-bh-body p{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);max-width:472px}
.hw-bh-body{margin-bottom:29px !important}

/* Enlaces dentro del cuerpo (BugHerd #140, #141): Avada pone `a{text-decoration:
   none}` y aquí el enlace se perdía dentro del párrafo. Mismo gesto que en la
   FAQ y en las páginas legales: subrayado, color heredado, y al pasar el cursor
   pasa a Tomato. */
.hw-bh-intro__body a,.hw-bh-body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-bh-intro__body a:hover,.hw-bh-body a:hover{color:var(--awb-color7,#E54511)}
.hw-bh-cta{margin-top:0 !important}

.hw-bh-shot{position:relative;width:100%;aspect-ratio:570/598;overflow:hidden}
.hw-bh-shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-bh-shot:hover img{transform:scale(1.045)}

/* el bloque azul-gris con la foto metida (570×598 con la foto de 374×394
   a 98 px por la izquierda y 102 por arriba) */
.hw-bh-panel{position:relative;width:100%;aspect-ratio:570/598;background:#BAC3CB}
.hw-bh-panel__win{position:absolute;left:17.193%;top:17.057%;
  width:65.614%;height:65.886%;overflow:hidden}
.hw-bh-panel__win img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-bh-panel:hover .hw-bh-panel__win img{transform:scale(1.045)}

@media(prefers-reduced-motion:reduce){
  .hw-bh-shot img,.hw-bh-panel__win img{transition:none}
  .hw-bh-shot:hover img,.hw-bh-panel:hover .hw-bh-panel__win img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-bh-hero__title p,.hw-bh-hero__title.hw-bh-hero__title h1{font-size:44px}
  .hw-bh-h2 p{font-size:30px}
  .hw-bh-intro{padding-top:90px !important;padding-bottom:110px !important;
    background:var(--awb-color1,#EFEAE4) !important}
  .hw-bh-split .fusion-builder-row{flex-wrap:wrap !important}
  .hw-bh-split__text,.hw-bh-split__media{width:100% !important;margin-left:0 !important;padding-top:0}
  .hw-bh-split--services .hw-bh-split__media,
  .hw-bh-split--fitness .hw-bh-split__text{margin-left:0 !important}
  .hw-bh-split__media{margin-top:48px !important;max-width:570px}
  .hw-bh-split--fitness .fusion-builder-row{flex-direction:column-reverse}
  .hw-bh-split--fitness .hw-bh-split__media{margin-top:0 !important;margin-bottom:48px !important}
  .hw-bh-split{padding-bottom:110px !important}
}
@media(max-width:760px){
  .hw-bh-hero{min-height:520px !important;padding-top:150px !important}
  .hw-bh-hero__title p,.hw-bh-hero__title.hw-bh-hero__title h1{font-size:32px}
  .hw-bh-hero__rule span{height:64px;margin-top:40px}
  .hw-bh-intro__body p{font-size:17px;line-height:1.8}
  .hw-bh-h2 p{font-size:24px}
  .hw-bh-split{padding-bottom:80px !important}
}

/* ==================================================================
   SCHOOLS (/schools, página 7492)
   Nodo `14620:7297` del Figma, revisado el 2026-09-03 (frame 1440×8424).
   Bandas: héroe 0-680 · crema 680-1291 · blanco 1291-2205 ·
           crema 2206-4059 (las cuatro fichas) · blanco 4060-6932 · form 6933.

   ⚠️ SIETE de las nueve fotos van rotuladas **FPO** en el diseño: la imagen
   existe pero la licencia no está cerrada. Se dejan con su rótulo puesto (así
   lo pidió el cliente) para que se vea de un vistazo cuáles hay que licenciar.
   ================================================================== */
body.page-id-7492 #main{padding-top:0 !important}

.hw-sc-hero,.hw-sc-intro,.hw-sc-cards,.hw-sc-ce,.hw-sc-split{
  padding-left:0 !important;padding-right:0 !important}
.hw-sc-hero .fusion-builder-row,.hw-sc-intro .fusion-builder-row,
.hw-sc-cards .fusion-builder-row,.hw-sc-ce .fusion-builder-row,
.hw-sc-split .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-sc-intro .fusion-builder-row,.hw-sc-cards .fusion-builder-row,
.hw-sc-ce .fusion-builder-row,.hw-sc-split .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-sc-hero .fusion-column-wrapper,.hw-sc-intro .fusion-column-wrapper,
.hw-sc-cards .fusion-column-wrapper,.hw-sc-ce .fusion-column-wrapper,
.hw-sc-split .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-sc-hero .fusion-layout-column,.hw-sc-intro .fusion-layout-column,
.hw-sc-cards .fusion-layout-column,.hw-sc-ce .fusion-layout-column,
.hw-sc-split .fusion-layout-column{margin-bottom:0 !important}
.hw-sc-shot > p:empty,.hw-sc-grid > p:empty{display:none !important;margin:0 !important}
.hw-sc-hero .fusion-text p,.hw-sc-intro .fusion-text p,.hw-sc-cards .fusion-text p,
.hw-sc-ce .fusion-text p,.hw-sc-split .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
.hw-sc-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-sc-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:196px !important;padding-bottom:0 !important}
.hw-sc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-sc-hero > *{position:relative;z-index:1}
.hw-sc-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-sc-hero__eyebrow p{font-family:'Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-sc-hero__eyebrow{margin-bottom:18px !important}
.hw-sc-hero__title p,.hw-sc-hero__title.hw-sc-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:86px;line-height:1.0;letter-spacing:.5px;max-width:806px;margin:0 auto !important}
.hw-sc-hero__title{margin-bottom:0 !important}
.hw-sc-hero__rule{margin-bottom:0 !important}
.hw-sc-hero__rule span{display:block;width:1px;height:121px;margin:63px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO + BRYAN COUNTY SCHOOLS ---------- */
/* La foto ancha monta el borde entre la banda crema y la blanca. */
.hw-sc-intro{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 611px, #FFFFFF 611px 100%) !important}
.hw-sc-intro__body p{font-family:'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:808px;margin:0 auto !important}
.hw-sc-intro__body{margin-bottom:146px !important}

/* ---------- tipografía compartida ---------- */
.hw-sc-eyebrow p,.hw-sc-card__e{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0);margin:0 !important}
.hw-sc-eyebrow{margin:52px 0 18px !important}
.hw-sc-eyebrow--c p{text-align:center}
.hw-sc-h2 p{font-family:'Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C)}
.hw-sc-h2{margin-bottom:24px !important}
.hw-sc-h2--c p{text-align:center;max-width:702px;margin:0 auto !important}
/* Una sola línea, como en el diseño: a 48 px Poppins es más ancha que la
   fuente del Figma y se partía en dos. */
.hw-sc-h2--one p{font-size:44px;line-height:1;max-width:780px;white-space:nowrap}
.hw-sc-lead p{font-family:'Lora',Georgia,serif;font-size:16px;line-height:1.75;
  color:var(--awb-color8,#19180C);max-width:762px;margin:0 auto !important;text-align:center}
.hw-sc-lead{margin-bottom:29px !important}
.hw-sc-body p{font-family:'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);max-width:472px}
.hw-sc-body{margin-bottom:29px !important}
.hw-sc-cta{margin-top:0 !important}
.hw-sc-cta--c p{justify-content:center}

/* ---------- las fotos y el rótulo FPO ---------- */
.hw-sc-shot{position:relative;width:100%;overflow:hidden}
.hw-sc-shot--wide{aspect-ratio:1160/525;margin-bottom:0}
.hw-sc-shot--tall{aspect-ratio:570/598}
.hw-sc-shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-sc-shot:hover img{transform:scale(1.045)}
/* El rótulo FPO del diseño: dice que la foto está puesta pero sin licencia
   cerrada. Se deja a la vista a propósito. Cuando se licencie una, basta con
   quitarle la clase `--fpo` en el contenido. */
/* La guarda `:not(:has(img))` no es adorno: el rótulo sólo sale si la caja
   está VACÍA de verdad, no sólo si alguien se acordó de poner la clase.
   El 2026-09-21 pasó en /commercial/: se metió una foto, la clase se quedó y
   el "FPO" siguió saliendo. Allí la caja era flex y salió AL LADO; aquí es
   absoluto y centrado, así que habría salido ENCIMA de la foto. */
.hw-sc-shot--fpo:not(:has(img))::after{
  content:"FPO";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:34px;letter-spacing:6px;
  color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(25,24,12,.35);
  pointer-events:none}

/* ---------- 3 · LAS CUATRO FICHAS ---------- */
.hw-sc-cards{background:var(--awb-color1,#EFEAE4) !important}
.hw-sc-grid{display:grid;grid-template-columns:repeat(2,570px);
  justify-content:space-between;row-gap:67px;column-gap:20px}
.hw-sc-card .hw-sc-shot{aspect-ratio:570/334;margin-bottom:32px}
.hw-sc-card__e{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0);margin:0 0 18px !important}
.hw-sc-card__n{font-family:'Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C);margin:0 0 19px !important}
.hw-sc-card__b{font-family:'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);max-width:460px;margin:0 0 29px !important}
.hw-sc-card__cta{margin:0 !important}
.hw-sc-card__cta a{display:inline-flex;align-items:center;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color7,#E54511) !important;text-decoration:none !important}
/* BugHerd #23 (2026-09-24): la flecha es la de 46 px a 13 del rótulo, como
   el resto de CTA (Figma schools, y=3038/3795); iba a 34. */
.hw-sc-card__cta a::after{
  content:"";display:inline-block;margin-left:13px;width:46px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat left center/calc(100% - .5px) 1px;
  transition:width .42s cubic-bezier(.22,.61,.36,1)}

/* ---------- 4 · EDUCACIÓN CONTINUA ---------- */
.hw-sc-ce{background:#FFFFFF !important}
.hw-sc-split{background:#FFFFFF !important}
.hw-sc-split .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-sc-split .fusion-layout-column{margin:0 !important;float:none !important}
.hw-sc-split__text {width:40.690% !important}
.hw-sc-split__media{width:49.138% !important}
.hw-sc-split--gsu .hw-sc-split__text,
.hw-sc-split--savtech .hw-sc-split__text{margin-left:10.172% !important}
.hw-sc-split--scad .hw-sc-split__media{margin-left:10.172% !important}
.hw-sc-split--gsu .hw-sc-split__text{padding-top:118px}
.hw-sc-split--scad .hw-sc-split__text{padding-top:159px}
.hw-sc-split--savtech .hw-sc-split__text{padding-top:107px}

@media(prefers-reduced-motion:reduce){
  .hw-sc-shot img{transition:none}
  .hw-sc-shot:hover img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-sc-hero__title p,.hw-sc-hero__title.hw-sc-hero__title h1{font-size:44px}
  .hw-sc-h2 p,.hw-sc-card__n{font-size:30px}
  .hw-sc-h2--one p{font-size:34px;white-space:normal}
  .hw-sc-intro{padding-top:90px !important;padding-bottom:110px !important;
    background:var(--awb-color1,#EFEAE4) !important}
  .hw-sc-intro__body{margin-bottom:80px !important}
  .hw-sc-grid{grid-template-columns:1fr;row-gap:56px}
  .hw-sc-cards{padding-top:90px !important;padding-bottom:90px !important}
  .hw-sc-ce{padding-top:110px !important}
  .hw-sc-split .fusion-builder-row{flex-wrap:wrap !important}
  .hw-sc-split__text,.hw-sc-split__media{width:100% !important;margin-left:0 !important;padding-top:0}
  .hw-sc-split--gsu .hw-sc-split__text,.hw-sc-split--savtech .hw-sc-split__text,
  .hw-sc-split--scad .hw-sc-split__media{margin-left:0 !important}
  .hw-sc-split__media{margin-top:48px !important;max-width:570px}
  .hw-sc-split--gsu .fusion-builder-row,
  .hw-sc-split--savtech .fusion-builder-row{flex-direction:column-reverse}
  .hw-sc-split--gsu .hw-sc-split__media,
  .hw-sc-split--savtech .hw-sc-split__media{margin-top:0 !important;margin-bottom:48px !important}
  .hw-sc-split{padding-top:0 !important;padding-bottom:90px !important}
}
@media(max-width:760px){
  .hw-sc-hero{min-height:520px !important;padding-top:150px !important}
  .hw-sc-hero__title p,.hw-sc-hero__title.hw-sc-hero__title h1{font-size:32px}
  .hw-sc-hero__rule span{height:64px;margin-top:40px}
  .hw-sc-intro__body p{font-size:17px;line-height:1.8}
  .hw-sc-h2 p,.hw-sc-card__n{font-size:24px}
  .hw-sc-h2--one p{font-size:28px;white-space:normal}
  .hw-sc-shot--fpo:not(:has(img))::after{font-size:22px;letter-spacing:4px}
}

/* ==================================================================
   WHAT'S HAPPENING (/whats-happening, página 7494)
   Nodo `14300:2448` del Figma, revisado el 2026-09-03 (frame 1440×4703).
   Bandas: héroe 0-680 · crema 680-1995 (News) · blanco 1996-3211 (Events) ·
           formulario 3212.

   Las dos rejillas salen de CONTENIDO REAL: `[hw_wh_news]` trae las últimas
   entradas y `[hw_wh_events]` los últimos eventos de The Events Calendar
   (que son todos pasados y TEC los esconde: ver el shortcode en functions.php).
   ================================================================== */
body.page-id-7494 #main{padding-top:0 !important}

.hw-wh-hero,.hw-wh-news,.hw-wh-events{padding-left:0 !important;padding-right:0 !important}
.hw-wh-hero .fusion-builder-row,.hw-wh-news .fusion-builder-row,.hw-wh-events .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-wh-news .fusion-builder-row,.hw-wh-events .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-wh-hero .fusion-column-wrapper,.hw-wh-news .fusion-column-wrapper,
.hw-wh-events .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-wh-hero .fusion-layout-column,.hw-wh-news .fusion-layout-column,
.hw-wh-events .fusion-layout-column{margin-bottom:0 !important}
.hw-wh-sec > p:empty,.hw-wh-grid > p:empty{display:none !important;margin:0 !important}
.hw-wh-hero .fusion-text p,.hw-wh-news .fusion-text p,.hw-wh-events .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
/* El titular es de UNA línea, así que cae más abajo que en el resto de las L3
   (y=297 en vez de 263) y el antetítulo va en y=268. */
.hw-wh-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-wh-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:268px !important;padding-bottom:0 !important}
.hw-wh-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-wh-hero > *{position:relative;z-index:1}
.hw-wh-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-wh-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-wh-hero__eyebrow{margin-bottom:18px !important}
.hw-wh-hero__title p,.hw-wh-hero__title.hw-wh-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:86px;line-height:1.0;letter-spacing:.5px}
.hw-wh-hero__title{margin-bottom:0 !important}
.hw-wh-hero__rule{margin-bottom:0 !important}
.hw-wh-hero__rule span{display:block;width:1px;height:121px;margin:96px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO ---------- */
.hw-wh-news{background:var(--awb-color1,#EFEAE4) !important}
.hw-wh-intro p{font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:660px;margin:0 auto !important}
.hw-wh-intro{margin-bottom:144px !important}

/* ---------- 3 · LAS DOS SECCIONES (carril + rejilla) ---------- */
/* 286 de carril + 124 de hueco + 750 de rejilla = 1160 */
.hw-wh-sec{display:flex;align-items:flex-start;gap:124px}
.hw-wh-sec__rail{flex:0 0 286px}
.hw-wh-sec__body{flex:1 1 auto;min-width:0}
.hw-wh-sec__h{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:48px;
  letter-spacing:2.4px;text-transform:uppercase;line-height:1;
  color:var(--awb-color8,#19180C);margin:0 0 13px !important}
.hw-wh-sec__s{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);margin:0 0 22px !important}
.hw-wh-sec__cta{margin:0 !important}
.hw-wh-sec__cta a{display:inline-flex;align-items:center;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color7,#E54511) !important;text-decoration:none !important}
.hw-wh-sec__cta a::after{
  content:"";display:inline-block;margin-left:16px;width:34px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat left center/calc(100% - .5px) 1px;
  transition:width .42s cubic-bezier(.22,.61,.36,1)}

/* ---------- las fichas ---------- */
/* Dos columnas de 333 con 84 de hueco. El alto lo marca el contenido: los
   títulos y los extractos son reales y no miden todos lo mismo. */
.hw-wh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,333px));
  justify-content:start;column-gap:84px;row-gap:41px}
.hw-wh-card{display:flex;flex-direction:column}
.hw-wh-card__wrap{display:block;text-decoration:none !important;color:inherit}
.hw-wh-card__media{position:relative;width:100%;aspect-ratio:333/220;overflow:hidden;
  background:#DED8CF;margin-bottom:16px}
.hw-wh-card__media--empty{background:#DED8CF}
.hw-wh-card__img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-wh-card__wrap:hover .hw-wh-card__img{transform:scale(1.045)}
/* Título y extracto RECORTADOS a dos líneas. Los textos son reales y no miden
   todos lo mismo; sin esto las fichas crecían y la rejilla quedaba desigual
   (la sección de News salía 267 px más alta que el diseño). */
.hw-wh-card__t{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:1.28;letter-spacing:.2px;
  color:var(--awb-color8,#19180C);margin:0 0 10px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hw-wh-card__t a{color:inherit;text-decoration:none}
.hw-wh-card__t a:hover{color:var(--awb-color7,#E54511)}
/* En el diseño aquí van DOS renglones: el nombre de la publicación y la fecha.
   La publicación no tiene de dónde salir (las entradas no llevan ese campo),
   así que por ahora va sólo la fecha. */
.hw-wh-card__meta{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;line-height:1.7;
  color:var(--awb-color4,#6D7EA0);margin:0 0 8px !important}
.hw-wh-card__x{font-family:calluna,'Lora',Georgia,serif;font-size:15px;line-height:1.5;
  color:var(--awb-color8,#19180C);margin:0 0 12px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hw-wh-card__cta{margin:0 !important}
.hw-wh-card__cta a{font-family:calluna,'Lora',Georgia,serif;font-size:15px;
  color:var(--awb-color8,#19180C);text-decoration:underline;text-underline-offset:3px}
.hw-wh-card__cta a:hover{color:var(--awb-color7,#E54511)}
/* En la ficha de evento la fecha va ANTES del título */
.hw-wh-card--event .hw-wh-card__meta{margin-bottom:6px !important}

.hw-wh-events{background:#FFFFFF !important}

@media(prefers-reduced-motion:reduce){
  .hw-wh-card__img{transition:none}
  .hw-wh-card__wrap:hover .hw-wh-card__img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-wh-hero__title p,.hw-wh-hero__title.hw-wh-hero__title h1{font-size:56px}
  .hw-wh-sec{flex-wrap:wrap;gap:40px}
  .hw-wh-sec__rail{flex:1 1 100%}
  .hw-wh-sec__body{flex:1 1 100%}
  .hw-wh-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .hw-wh-news{padding-top:90px !important;padding-bottom:90px !important}
  .hw-wh-intro{margin-bottom:80px !important}
  .hw-wh-events{padding-top:90px !important;padding-bottom:110px !important}
}
@media(max-width:760px){
  .hw-wh-hero{min-height:520px !important;padding-top:210px !important}
  .hw-wh-hero__title p,.hw-wh-hero__title.hw-wh-hero__title h1{font-size:38px}
  .hw-wh-hero__rule span{height:64px;margin-top:56px}
  .hw-wh-intro p{font-size:17px;line-height:1.8}
  .hw-wh-sec__h{font-size:30px}
  .hw-wh-grid{grid-template-columns:1fr;row-gap:36px}
}

/* ==================================================================
   VISIT US (/contact, página 60)
   Nodo `14340:4935` del Figma, revisado el 2026-09-03 (frame 1440×4632).
   Bandas: héroe 0-680 · crema 680-1250 · blanco 1251-3140 · formulario 3141.
   ================================================================== */
body.page-id-60 #main{padding-top:0 !important}

.hw-vu-hero,.hw-vu-intro,.hw-vu-model{padding-left:0 !important;padding-right:0 !important}
.hw-vu-hero .fusion-builder-row,.hw-vu-intro .fusion-builder-row,.hw-vu-model .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-vu-intro .fusion-builder-row,.hw-vu-model .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-vu-hero .fusion-column-wrapper,.hw-vu-intro .fusion-column-wrapper,
.hw-vu-model .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-vu-hero .fusion-layout-column,.hw-vu-intro .fusion-layout-column,
.hw-vu-model .fusion-layout-column{margin-bottom:0 !important}
.hw-vu-club > p:empty,.hw-vu-shot > p:empty,.hw-vu-list > p:empty{
  display:none !important;margin:0 !important}
.hw-vu-hero .fusion-text p,.hw-vu-intro .fusion-text p,.hw-vu-model .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
.hw-vu-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-vu-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:234px !important;padding-bottom:0 !important}
.hw-vu-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-vu-hero > *{position:relative;z-index:1}
.hw-vu-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-vu-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-vu-hero__eyebrow{margin-bottom:18px !important}
.hw-vu-hero__title p,.hw-vu-hero__title.hw-vu-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:86px;line-height:1.0;letter-spacing:.5px;max-width:806px;margin:0 auto !important}
.hw-vu-hero__title{margin-bottom:0 !important}
.hw-vu-hero__rule{margin-bottom:0 !important}
.hw-vu-hero__rule span{display:block;width:1px;height:121px;margin:125px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO + la foto del club ---------- */
/* La foto monta el borde entre la banda crema y la blanca: el corte va en un
   degradado, como en Explore, Wellness y Schools. */
.hw-vu-intro{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 571px, #FFFFFF 571px 100%) !important}
.hw-vu-intro__body p{font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:1.9;
  color:var(--awb-color8,#19180C);max-width:746px;margin:0 auto !important}
/* BugHerd #120 (2026-09-24): con `thickness:auto` la raya sale del dato de la
   webfont de Juana, que la pinta gruesa (~2,5 px a 20). Se fija a 1 px. */
.hw-vu-intro__body a{color:inherit;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
.hw-vu-intro__body a:hover{color:var(--awb-color7,#E54511)}
.hw-vu-intro__body{margin-bottom:39px !important}
.hw-vu-cta--c p{justify-content:center}
.hw-vu-cta{margin-bottom:108px !important}
.hw-vu-club{position:relative;width:100%;aspect-ratio:1160/525;overflow:hidden}
.hw-vu-club img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}

/* ---------- 3 · MODEL HOMES ---------- */
.hw-vu-model{background:#FFFFFF !important}
.hw-vu-model .fusion-builder-row{display:flex !important;flex-wrap:nowrap !important;
  align-items:flex-start;margin:0 auto !important}
.hw-vu-model .fusion-layout-column{margin:0 !important;float:none !important}
/* 460 de lista + 130 de hueco + 570 de foto = 1160 */
.hw-vu-model__text {width:39.655% !important}
.hw-vu-model__media{width:49.138% !important;margin-left:11.207% !important}

.hw-vu-h2 p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:1.09;
  color:var(--awb-color8,#19180C)}
.hw-vu-h2{margin-bottom:25px !important}
.hw-vu-lead p{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);max-width:460px}
.hw-vu-lead{margin-bottom:34px !important}

/* la lista de constructoras */
.hw-vu-b{margin-bottom:34px}
.hw-vu-b:last-child{margin-bottom:0}
.hw-vu-b__n{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color5,#424B0A);margin:0 0 16px !important}
.hw-vu-b__s{margin-bottom:12px}
.hw-vu-b__s:last-child{margin-bottom:0}
.hw-vu-b__h{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;line-height:1;
  color:var(--awb-color5,#424B0A);margin:0 0 8px !important}
.hw-vu-b__d{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:1.8;
  color:var(--awb-color8,#19180C);margin:0 !important}
.hw-vu-b__d a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-vu-b__d a:hover{color:var(--awb-color7,#E54511)}
.hw-vu-b__sep{color:#BAC3CB;margin:0 8px}
.hw-vu-b__tel{text-decoration:none !important}
.hw-vu-b__tel:hover{color:var(--awb-color7,#E54511)}

/* la foto con el marco dibujado a mano encima */
.hw-vu-shot{position:relative;width:100%;aspect-ratio:570/758;overflow:hidden}
.hw-vu-shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hw-vu-shot:hover img{transform:scale(1.045)}
/* El marco es un trazo suelto, en blanco, y va POR ENCIMA de la foto sin
   moverse con ella en el hover: es lo que lo hace leer como un dibujo sobre la
   imagen y no como parte de ella. Va en data-URI porque el SVG es pequeño
   (13 KB) y dentro de un `fusion_text` Avada se comería un `<svg>` suelto. */
.hw-vu-shot__doodle{
  position:absolute;left:17.193%;top:21.635%;width:65.614%;height:56.728%;
  pointer-events:none;background-repeat:no-repeat;background-position:center;
  background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg%20width%3D%22374%22%20height%3D%22430%22%20viewBox%3D%220%200%20374%20430%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M352.135%2026.6557C352.67%2029.446%20348.655%2031.5812%20348.254%2033.2553C347.791%2035.1479%20349.3%2036.8221%20349.117%2038.6904C348.789%2042.1722%20343.01%2048.6505%20345.784%2052.9087C345.991%2053.2363%20349.726%2055.056%20350.371%2055.0682C353.923%2055.141%20357.573%2042.8758%20357.792%2039.8671C358.084%2035.8637%20357.317%2027.3715%20352.123%2026.6557M344.592%2090.3472C356.6%2090.8931%20359.434%2084.0145%20355.748%2074.0907C352.366%2064.9798%20343.983%2070.4027%20344.032%2072.2224L344.592%2090.3351V90.3472ZM344.093%20108.46L344.713%20128.538C357.159%20131.571%20358.315%20119.269%20356.332%20110.813C354.385%20102.527%20345.188%20104.529%20344.093%20108.46ZM344.981%20165.588C345.954%20166.146%20349.957%20165.879%20351.587%20166.547C356.952%20162.871%20358.4%20147.706%20351.624%20145.607C349.543%20144.964%20345.127%20144.406%20344.361%20146.796C345.188%20150.314%20341.891%20163.805%20344.981%20165.588ZM342.889%20202.42C343.375%20203.536%20344.288%20203.852%20345.48%20204.009C358.12%20205.623%20363.753%20173.51%20343.704%20183.337L342.901%20202.42H342.889ZM351.466%20221.867C349.847%20220.266%20346.21%20219.101%20343.935%20219.72C341.368%20220.411%20343.521%20222.547%20343.412%20224.015C342.961%20230.19%20342.657%20236.389%20342.134%20242.54C342.791%20245.658%20349.166%20244.529%20351.38%20243.583C357.938%20240.793%20355.784%20226.162%20351.466%20221.867ZM353.217%20276.193C353.643%20275.768%20356.356%20269.072%20356.441%20268.101C357.33%20258.068%20352.159%20257.571%20343.436%20260.252C341.891%20261.283%20342.365%20273.597%20343.412%20275.477C344.908%20278.158%20351.405%20277.964%20353.205%20276.193M343.472%20294.075L344.008%20311.703L353.424%20311.642C357.488%20303.526%20355.164%20291.952%20343.46%20294.075M348.801%20356.942C349.02%20356.566%20354.957%20353.205%20356.356%20351.859C361.697%20346.727%20364.532%20339.448%20358.935%20333.164C355.201%20328.966%20345.37%20329.706%20344.677%20333.722C343.679%20339.46%20345.042%20355.486%20345.516%20362.171C345.869%20367.084%20346.441%20379.689%20347.487%20383.462C348.436%20386.871%20353.558%20388.812%20351.794%20393.943C368.826%20396.103%20372.829%20378.524%20361.198%20368.782C357.354%20365.555%20344.847%20363.651%20348.789%20356.93M324.092%206.18948C324.153%2011.6366%20328.277%2018.2363%20334.956%2016.9139C333.545%2012.0248%20330.917%204.69727%20324.092%206.18948ZM324.116%20384.262C322.364%20386.325%20329.64%20389.127%20328.289%20383.255L324.116%20384.262ZM325.576%20397.947L321.902%20398.918C322.462%20407.434%20312.887%20411.207%20319.469%20419.444C323.265%20424.188%20328.739%20426.481%20333.764%20421.992C337.499%20415.732%20330.844%20413.524%20328.557%20408.696C327.134%20405.699%20326.014%20401.223%20325.576%20397.935M310.746%2017.9694C312.96%2015.8827%20301.707%208.84632%20299.127%208.39745C295.429%207.7666%20293.008%209.34372%20290.623%2011.7701C293.105%2020.6262%20303.349%2017.5326%20310.746%2017.9694ZM277.253%20403.018C278.822%20413.961%20287.886%20421.349%20299.857%20418.134C304.626%20413.366%20298.799%20408.38%20299.383%20402.945L277.253%20403.018ZM253.894%2015.1184C254.125%2015.4824%20261.084%2018.952%20261.838%2019.0734C264.041%2019.4373%20275.562%2019.6799%20275.963%2017.5933C274.102%2013.3351%20265.987%209.46504%20261.364%209.39225C258.675%209.34372%20251.923%2012.1098%20253.894%2015.1184ZM259.344%20403.079C255.804%20403.54%20252.239%20402.751%20248.797%20402.593C246.984%20402.508%20246.071%20401.392%20244.624%20403.612C246.874%20406.476%20256.984%20408.684%20258.967%20406.063L259.332%20403.067L259.344%20403.079ZM239.161%2020.1652C240.913%2018.576%20231.801%2011.8429%20230.182%2011.1513C227.555%2010.0595%20219.951%208.60369%20218.953%2012.037C218.613%2013.2137%20224.099%2020.7233%20225.134%2021.0387L239.161%2020.1531V20.1652ZM215.255%2031.0352C214.513%2033.9711%20217.895%2033.0855%20220.036%2032.952C224.452%2032.673%20230.523%2032.3576%20234.672%2031.8359C235.937%2031.6782%20239.003%2031.4113%20238.37%2029.4824C236.29%2025.7701%20219.014%2028.7181%20215.243%2031.0231M189.584%2018.3819C188.441%2023.8533%20194.427%2024.9451%20198.089%2021.7787C198.028%2020.8325%20190.473%2017.4962%20189.584%2018.3819ZM224.245%20402.508C222.834%20401.489%20215.376%20400.47%20213.247%20400.361C211.094%20400.24%20209.683%20401.15%20208.053%20401.21C205.996%20401.283%20201.167%20398.833%20201.325%20402.8C201.617%20409.97%20225.669%20418.195%20231.107%20410.515C231.217%20410.018%20224.866%20402.982%20224.233%20402.521M177.869%20392.585C175.448%20393.167%20169.742%20391.323%20168.428%20393.58C170.849%20392.997%20176.482%20394.853%20177.869%20392.585ZM162.308%20400.458C162.746%20415.841%20193.636%20420.342%20177.589%20400.41L162.308%20400.458ZM142.429%2019.6921C142.502%2020.5534%20143.585%2025.0179%20143.913%2025.4304C144.947%2026.7406%20160.605%2025.6973%20162.698%2025.1271C164.279%2024.7025%20166.262%2022.543%20166.506%2020.9174C166.323%2014.7666%20141.638%209.90178%20142.429%2019.7042M121.516%20407.798C127.538%20417.006%20148.767%20417.697%20145.543%20403.976C144.205%20398.275%20128.657%20401.101%20124.995%20403.515C123.961%20404.195%20121.26%20406.609%20121.516%20407.798ZM107.695%2028.439C113.863%2026.9832%20119.885%2028.7666%20121.82%2021.5604C122.915%2017.472%20109.118%2011.0664%20105.164%2014.2692C102.537%2016.1739%20108.218%2020.3715%20108.449%2023.0162C108.583%2024.5933%20107.123%2026.595%20107.695%2028.4512M89.9813%20407.81C92.3171%20417.649%20116.345%20417.588%20103.413%20405.093C97.5364%20399.403%2088.3997%20401.162%2089.9813%20407.81ZM197.432%2034.0075C195.278%2023.4893%20182.102%2032.0543%20175.715%2032.1756C171.834%2032.2484%20169.182%2029.9919%20164.097%2030.1496C154.814%2030.4287%20143.354%2032.7458%20133.645%2033.2432C113.486%2034.2744%2092.9741%2033.2675%2073.1557%2036.8827C73.1678%2037.3195%2081.1731%2037.9503%2082.341%2037.9503C112.355%2038.1202%20145.118%2037.829%20174.851%2036.0578C182.455%2035.6089%20189.998%2036.3975%20197.432%2033.9954M82.4018%2028.524C80.3579%2021.0994%2085.3217%2019.3039%2075.9052%2015.1063C70.6616%2012.777%2063.4837%2010.9694%2057.9603%2012.7285C49.6631%2015.3732%2055.0161%2018.5274%2056.6585%2022.4945C57.3155%2024.0959%2056.5004%2027.2744%2058.082%2028.1843C66.1602%2029.9676%2074.3236%2029.3611%2082.414%2028.524M51.926%20402.945C48.8723%20407.81%2058.6903%20422.732%2069.8465%20417.673C77.7301%20414.082%2067.5715%20409.096%2065.4911%20406.209C62.8267%20402.521%2065.6979%20399.742%2057.5345%20400.859C56.6342%20400.98%2052.1084%20402.63%2051.9138%20402.945M41.2807%20366.708L41.597%20382.758C54.6755%20386.179%2067.1213%20385.463%2080.2363%20385.997C132.623%20388.12%20181.287%20385.488%20232.932%20379.774C258.14%20376.983%20284.978%20371.864%20309.517%20369.692C313.374%20369.353%20329.25%20370.42%20330.54%20368.625C330.443%20356.954%20333.642%20344.446%20331.951%20332.86C331.574%20330.264%20329.396%20328.833%20329.591%20324.987C329.993%20316.931%20335.419%20301.415%20332.426%20293.093C331.525%20290.606%20328.533%20289.38%20328.411%20285.813C328.277%20281.749%20331.939%20280.742%20332.426%20277.94C334.275%20267.155%20332.243%20249.406%20332.219%20237.76C332.219%20232.761%20334.336%20225.41%20332.572%20220.363C331.696%20217.852%20326.963%20216.857%20327.243%20213.375C327.413%20211.216%20331.075%20209.044%20331.793%20206.897C333.667%20201.28%20331.404%20184.271%20331.404%20177.028C331.428%20153.08%20332.036%20128.635%20330.321%20104.553C329.725%2096.134%20327.328%2068.1583%20321.622%2062.4928C318.994%2059.8845%20316.002%2060.8307%20316.05%2055.699C316.135%2047.6314%20329.895%2048.4443%20330.175%2037.7926L328.63%2035.5604L306.585%2041.1774C221.326%2039.2605%20136.601%2043.8221%2051.9989%2051.1496C48.3613%2051.4651%2044.5777%2050.9919%2040.94%2051.186L43.1664%2090.8082C46.2323%20156.356%2046.8892%20222.583%2047.2299%20288.725C47.3394%20310.805%2048.4343%20333.819%2047.0109%20356.141C46.7311%20360.448%2046.7311%20366.368%2041.2928%20366.696M34.6502%20189.33C36.4629%20205.441%2032.4603%20223.917%2035.1247%20239.786C35.3558%20241.132%2036.0128%20242.867%2037.2781%20241.229C38.0689%20231.961%2036.6089%20222.729%2036.3778%20213.266C36.2683%20208.583%2038.081%20203.548%2037.0712%20198.574L34.6502%20189.33ZM38.2392%20306.352L36.8401%20260.81C34.0419%20260.058%2033.9202%20263.394%2033.8107%20265.214C33.1173%20276.387%2034.6137%20290.023%2034.9787%20301.512C35.0517%20303.865%2032.4725%20310.404%2038.2392%20306.352ZM38.081%20335.736L37.5822%20319.576C35.4653%20319.333%2035.8425%20319.382%2035.2342%20320.801C33.3484%20325.205%2036.0006%20331.053%2033.9081%20335.699L38.0689%20335.736H38.081ZM23.3601%2096.3039L23.8589%20112.463L27.9224%20112.293C25.9515%20107.392%2031.1951%2095.7701%2023.3601%2096.3039ZM24.5889%20136.46L25.2824%20158.988H26.3408L25.8177%20141.846C25.7933%20140.961%2027.7156%20138.316%2026.7058%20136.46H24.6011H24.5889ZM36.5968%20355.814L30.2826%20356.323C27.4966%20357.597%2027.9589%20366.441%2028.5915%20369.049C29.1147%20371.221%2031.3532%20371.791%2031.8763%20373.963C32.4725%20376.45%2031.7425%20379.652%2032.144%20382.273C36.8036%20382.309%2034.0662%20379.191%2034.3704%20377.153C35.3923%20370.093%2036.6576%20363.044%2036.6089%20355.826M22.7883%2077.706L27.8616%2076.0803L27.5087%2064.6037C19.5643%2058.9382%2010.4763%2066.3871%2013.2137%2074.8065L16.3038%2074.7337C16.0605%2070.2935%2019.3818%2069.8325%2022.6667%2072.4772L22.7883%2077.706ZM23.2263%2026.8498C5.09894%2024.3628%209.72203%2049.9486%2021.1459%2046.2605C23.5791%2045.472%2022.4355%2042.1722%2022.983%2040.2675C24.3334%2035.5482%2026.061%2032.2363%2023.2263%2026.8498ZM22.0584%20397.013C20.1483%20398.687%2031.4505%20405.857%2033.7621%20401.38C33.6526%20400.276%2022.837%20396.333%2022.0584%20397.013ZM17.5083%20214.843C10.0505%20216.056%2013.3718%20229.85%2018.0801%20233.453L17.5083%20214.843ZM16.9243%20263.819C16.1457%20266.827%2014.2843%20269.339%2015.0751%20272.638H19.2845C19.1629%20271.85%2019.9415%20261.077%2016.9243%20263.819ZM20.8418%20323.555C15.1116%20323.689%2015.951%20334.668%2019.6738%20336.281C21.8272%20337.216%2021.1338%20334.68%2021.1702%20333.843C21.3284%20330.446%2020.7809%20326.952%2020.8539%20323.555M13.2258%20143.363C10.671%20149.222%207.09416%20160.226%2015.9145%20162.931C16.5228%20159.207%2015.6225%20155.495%2015.586%20151.685C15.5617%20149.016%2018.7979%20143.666%2013.2258%20143.363ZM15.4036%20112.002L15.9267%2095.9278L13.311%2094.3871C5.59774%2098.9729%205.48825%20110.425%2015.4036%20112.002ZM20.3673%20307.881L19.832%20290.254L14.8074%20290.472C14.0896%20291.248%2013.0312%20295.58%2013.0312%20296.781C13.0312%20299.401%2017.2041%20310.841%2020.3673%20307.881ZM16.4863%20181.541C12.0336%20181.687%204.66096%20192.605%207.47131%20195.238L16.973%20197.203L16.4863%20181.529V181.541ZM22.2774%20370.068L21.8272%20355.377L19.3088%20354.03C17.9828%20354.139%2013.5057%20357.682%2013.0068%20358.846C9.33271%20367.545%2020.7201%20375.358%2022.2774%20370.068ZM6.82651%2092.8221C8.07961%2091.4148%2013.2623%2087.8117%2013.5057%2086.8654L13.4205%2085.264C10.3668%2082.219%206.61969%2074.4668%206.69268%2070.4148C6.80218%2064.2519%2014.6858%2058.9382%2014.8196%2056.6089C15.0142%2053.2363%209.01639%2048.0682%207.26449%2044.7077C0.0743692%2031.0352%208.73658%2022.7007%2022.9343%2020.7111C25.3432%2018.4304%2026.134%206.5049%2027.6182%206.15308C33.2024%204.83072%2032.1075%208.5309%2034.3825%209.58636C35.9276%2010.3143%2038.0689%209.95031%2039.7234%2010.5205C41.7187%2011.212%2043.0326%2013.2501%2045.5145%2013.0318C47.4245%2012.8619%2050.5512%208.97977%2053.6049%207.83939C66.1359%203.13228%2078.9345%209.63488%2088.8863%2016.7926C101.21%206.34719%20113.583%204.44251%20126.844%2015.7007C129.46%2015.9191%20131.516%2012.9347%20134.168%2011.8186C144.254%207.58462%20155.118%207.13575%20165.386%2011.855C167.503%2012.8255%20170.654%2016.0162%20172.382%2016.3316C175.338%2016.8533%20177.455%2013.1046%20180.484%2012.5708C189.949%2010.9087%20196.032%2014.0023%20203.831%2018.3697C206.179%2018.3697%20210.133%2010.1444%20212.542%208.11842C222.08%200.123615%20235.487%206.28653%20242.799%2014.2085C245.122%2014.5725%20246.534%2010.5084%20248.054%209.34372C260.099%200.147879%20270.598%204.7458%20281.462%2013.0924C289.468%204.84285%20292.777%20-1.0289%20305.831%205.03696C308.337%206.20161%20311.05%2010.1565%20313.143%2010.1565C317.462%2010.1565%20318.788%20-3.38245%20330.199%200.802992C338.095%203.70247%20339.519%2014.9%20342.767%2016.9503C344.92%2018.3091%20347.475%2017.5569%20349.75%2018.3091C365.505%2023.5136%20365.237%2037.186%20361.284%2049.6574C360.164%2053.1878%20356.21%2058.9988%20356.295%2062.3593C356.393%2065.8775%20362.853%2072.6349%20363.23%2079.0283C363.705%2087.1687%20356.466%2094.2172%20356.49%2097.5899C356.514%20100.853%20362.95%20108.703%20363.279%20115.278C363.692%20123.855%20356.697%20131.146%20356.514%20135.902C356.405%20138.607%20361.953%20147.087%20362.318%20152.51C362.78%20159.498%20357.768%20166.826%20357.658%20170.04C357.5%20175.269%20363.084%20182.524%20363.267%20188.59C363.607%20199.666%20356.405%20203.621%20351.672%20212.089C358.035%20220.181%20362.889%20228.746%20361.016%20238.924C360.213%20243.28%20356.843%20248.909%20357.232%20253.58C357.585%20257.765%20364.143%20261.611%20362.33%20269.848C361.381%20274.119%20354.799%20282.368%20354.69%20283.775C354.495%20286.153%20361.247%20296.429%20361.648%20302.373C362.111%20309.228%20356.478%20319.224%20358.412%20324.72C359.179%20326.879%20364.556%20329.924%20366.162%20333.249C368.218%20337.495%20368.157%20344.325%20366.454%20348.583C364.799%20352.732%20355.651%20357.439%20357.025%20361.054C357.22%20361.564%20364.264%20364.573%20366.746%20366.963C381.491%20381.157%20372.33%20400.143%20352.098%20399.937C348.315%20420.609%20330.747%20444.703%20310.795%20418.595C301.743%20426.202%20288.519%20427.306%20279.26%20418.692C275.586%20415.271%20274.442%20410.176%20270.489%20406.937C268.493%20406.561%20268.457%20409.096%20267.192%20409.909C259.49%20414.859%20251.181%20412.893%20243.322%20409.12C240.037%20411.741%20236.862%20415.138%20232.762%20416.751C221.788%20421.058%20210.023%20418.632%20200.656%20411.474C199.171%20410.346%20198.466%20408.21%20196.726%20407.179L195.157%20407.64C186.166%20423.812%20169.365%20421.786%20157.819%20408.514C154.559%20409.205%20153.95%20412.408%20151.651%20414.167C139.801%20423.266%20128.475%20421.276%20116.965%20412.396C107.792%20421.956%2098.9476%20423.666%2087.8644%20414.919C85.6015%20413.136%2085.346%20409.606%2081.465%20410.491C78.0951%20425.158%2062.6199%20429.271%2051.1352%20417.928C47.4367%20414.276%2047.1934%20408.781%2043.3854%20405.165C34.1636%20409.411%2025.8177%20410.067%2018.4816%20401.89C10.9508%20393.495%2014.1748%20383.644%2011.6321%20374.193C11.0968%20372.203%208.91907%20370.59%207.99445%20368.612C2.66573%20357.184%2010.7683%20352.053%2020.5133%20347.503C15.5252%20340.176%209.04073%20333.831%2011.8389%20324.477C12.7392%20321.505%2018.6154%20318.496%2018.3477%20316.349C11.4009%20307.772%206.06005%20304.508%207.28882%20292.765C8.06744%20285.389%207.48348%20286.711%207.0455%20279.99C6.75351%20275.538%208.38376%20267.422%2010.817%20263.564C13.0677%20259.985%2019.7833%20256.964%2019.467%20253.664C18.6397%20244.966%209.04073%20233.683%207.48348%20224.876C6.79001%20220.933%209.07722%20216.651%207.79979%20213.533C6.68052%20210.791%201.23014%20210.924%200.183863%20201.692C-1.23956%20189.136%205.78023%20181.651%2015.0629%20174.032C7.50781%20163.404%200.0987012%20157.872%206.70485%20144.637C10.6345%20136.775%2019.3575%20135.453%2013.8463%20125.032C7.41048%20112.839%20-6.02081%20107.271%206.79001%2092.7978%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E")}

@media(prefers-reduced-motion:reduce){
  .hw-vu-shot img{transition:none}
  .hw-vu-shot:hover img{transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .hw-vu-hero__title p,.hw-vu-hero__title.hw-vu-hero__title h1{font-size:48px}
  .hw-vu-h2 p{font-size:30px}
  .hw-vu-intro{padding-top:90px !important;padding-bottom:70px !important;
    background:var(--awb-color1,#EFEAE4) !important}
  .hw-vu-cta{margin-bottom:70px !important}
  .hw-vu-model{padding-top:70px !important;padding-bottom:110px !important}
  .hw-vu-model .fusion-builder-row{flex-wrap:wrap !important}
  .hw-vu-model__text,.hw-vu-model__media{width:100% !important;margin-left:0 !important}
  .hw-vu-model__media{margin-top:48px !important;max-width:570px}
}
@media(max-width:760px){
  .hw-vu-hero{min-height:520px !important;padding-top:170px !important}
  .hw-vu-hero__title p,.hw-vu-hero__title.hw-vu-hero__title h1{font-size:36px}
  .hw-vu-hero__rule span{height:64px;margin-top:56px}
  .hw-vu-intro__body p{font-size:17px;line-height:1.8}
  .hw-vu-h2 p{font-size:24px}
  .hw-vu-b__d{font-size:15px}
  .hw-vu-model{padding-bottom:80px !important}
}

/* ==================================================================
   COMMERCIAL OPPORTUNITIES (/commercial, página 3057)
   Nodo `15109:10462` del Figma, revisado el 2026-09-03 (frame 1440×8920).
   Bandas: héroe 0-680 · crema 680-1218 · blanco 1218-2599 · crema 2599-6199
           · franjas 6147-7132 · formulario 7158.
   ================================================================== */
body.page-id-3057 #main{padding-top:0 !important}

.hw-cm-hero,.hw-cm-intro,.hw-cm-loc,.hw-cm-map,.hw-cm-opp,.hw-cm-int{
  padding-left:0 !important;padding-right:0 !important}
.hw-cm-hero .fusion-builder-row,.hw-cm-intro .fusion-builder-row,
.hw-cm-loc .fusion-builder-row,.hw-cm-map .fusion-builder-row,
.hw-cm-opp .fusion-builder-row,.hw-cm-int .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-cm-intro .fusion-builder-row,.hw-cm-loc .fusion-builder-row,
.hw-cm-map .fusion-builder-row,.hw-cm-opp .fusion-builder-row,
.hw-cm-int .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-cm-hero .fusion-column-wrapper,.hw-cm-intro .fusion-column-wrapper,
.hw-cm-loc .fusion-column-wrapper,.hw-cm-map .fusion-column-wrapper,
.hw-cm-opp .fusion-column-wrapper,.hw-cm-int .fusion-column-wrapper{
  margin-left:0 !important;margin-right:0 !important}
.hw-cm-hero .fusion-layout-column,.hw-cm-intro .fusion-layout-column,
.hw-cm-loc .fusion-layout-column,.hw-cm-map .fusion-layout-column,
.hw-cm-opp .fusion-layout-column,.hw-cm-int .fusion-layout-column{
  margin-bottom:0 !important}
/* el `<p>` vacío que mete wpautop, con sus 20px de margen */
.hw-cm-map__fig > p:empty,.hw-cm-cards > p:empty,.hw-cm-facts > p:empty,
.hw-cm-int__fig > p:empty,
.hw-cm-loc .fusion-text > p:empty,.hw-cm-opp .fusion-text > p:empty,
.hw-cm-int .fusion-text > p:empty{display:none !important;margin:0 !important}
.hw-cm-hero .fusion-text p,.hw-cm-intro .fusion-text p,
.hw-cm-loc .fusion-text p,.hw-cm-opp .fusion-text p{margin:0}

/* ---------- piezas compartidas de la página ---------- */
.hw-cm-eyebrow p{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0)}
.hw-cm-h2 p{font-family:'Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:48px;
  color:var(--awb-color8,#19180C)}
.hw-cm-body p{font-family:'Lora',Georgia,serif;font-size:16px;line-height:29px;
  color:var(--awb-color8,#19180C)}

/* El CTA de esta página NO lleva flecha: es rótulo naranja con una raya
   debajo, un pelo más ancha que el texto (629-810 contra 637-802 en el frame). */
.hw-cm-cta{margin-bottom:0 !important}
.hw-cm-cta p{margin:0}
.hw-cm-cta--c p{text-align:center}
.hw-cm-cta a{
  display:inline-block;padding:0 8px 9px;line-height:1;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color7,#E54511) !important;text-decoration:none !important;
  border-bottom:1px solid var(--awb-color7,#E54511)}
.hw-cm-cta a:hover,.hw-cm-cta a:focus-visible{opacity:.72}

/* ---------- 1 · HÉROE ---------- */
.hw-cm-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-cm-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:234px !important;padding-bottom:0 !important}
.hw-cm-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-cm-hero > *{position:relative;z-index:1}
.hw-cm-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-cm-hero__eyebrow p{font-family:'Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-cm-hero__eyebrow{margin-bottom:18px !important}
.hw-cm-hero__title p,.hw-cm-hero__title.hw-cm-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:90px;line-height:87px;letter-spacing:.5px;max-width:800px;
  margin:0 auto !important}
.hw-cm-hero__title{margin-bottom:0 !important}
.hw-cm-hero__rule{margin-bottom:0 !important}
.hw-cm-hero__rule span{display:block;width:1px;height:121px;margin:124px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO ---------- */
.hw-cm-intro{background:var(--awb-color1,#EFEAE4) !important;
  padding-top:131px !important;padding-bottom:125px !important}
.hw-cm-intro__body p{font-family:'Lora',Georgia,serif;font-size:20px;line-height:38px;
  color:var(--awb-color8,#19180C);max-width:706px;margin:0 auto !important}
.hw-cm-intro__body{margin-bottom:60px !important}

/* ---------- 3 · LOCATION ---------- */
.hw-cm-loc{padding-top:138px !important;padding-bottom:0 !important}
/* 140 → 633 → 1300 en el lienzo: 42,5% + 57,5%, sin calle entre columnas */
.hw-cm-loc__l{width:42.5% !important;margin-right:0 !important}
.hw-cm-loc__r{width:57.5% !important;margin-left:0 !important}
.hw-cm-loc__l .hw-cm-eyebrow{margin-bottom:0 !important}
.hw-cm-loc__h2{margin-top:35px !important}
.hw-cm-loc__r .hw-cm-body p{max-width:667px}
.hw-cm-loc__r .hw-cm-body{margin-bottom:0 !important}
/* Las dos listas repartidas en TODA la columna de 667, como el párrafo de
   arriba (BugHerd #146, 2026-09-24: iban a 295 + 295 y «I-95» se partía). */
.hw-cm-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:39px;
  margin-top:38px}
.hw-cm-facts ul{margin:0;padding-left:18px;list-style:disc}
.hw-cm-facts li{font-family:'Lora',Georgia,serif;font-size:16px;line-height:21.5px;
  color:var(--awb-color8,#19180C);margin:0}
.hw-cm-facts li::marker{font-size:.8em}

/* ---------- 4 · EL MAPA ---------- */
/* Es EL MISMO mapa que Location: mismo dibujo, misma caja de 1160×747 y los
   mismos rótulos vivos (`.hw-lm--*`, definidos en el bloque LOCATION). Aquí
   sólo se pone la caja. El diseño de Commercial encuadra el dibujo unos 75 px
   más a la izquierda; se ve exactamente lo mismo, así que no se duplica ni el
   recorte ni los rótulos. */
.hw-cm-map{padding-top:75px !important;padding-bottom:152px !important}
.hw-cm-map__fig{position:relative;width:100%;aspect-ratio:1160/747;
  container-type:inline-size;overflow:hidden}
.hw-cm-map__art{display:block;width:100%;height:100%;object-fit:cover;
  margin:0 !important}
/* Los rótulos son los MISMOS de Location (`.hw-lm--*`). Como aquí el dibujo va
   encuadrado 79 px más a la derecha, en vez de duplicar los veinte `left` se
   desplaza el envoltorio entero: 79/1160 = 6,8103%. */
.hw-cm-map__lbl{position:absolute;inset:0;transform:translateX(6.8103%)}

/* ---------- 5 · OPORTUNIDADES ---------- */
/* El pie son los 190 px del frame más los 45 que se pierden por el camino:
   las siete tarjetas rinden algo más cortas que en el diseño porque Lora
   quiebra distinto que la Calluna del Figma. Devolviéndolos aquí, la banda de
   franjas y el formulario caen en su sitio exacto. */
.hw-cm-opp{background:var(--awb-color1,#EFEAE4) !important;
  padding-top:126px !important;padding-bottom:235px !important}
.hw-cm-eyebrow--c p{text-align:center}
.hw-cm-eyebrow--c{margin-bottom:16px !important}
.hw-cm-opp__h2{margin-bottom:28px !important}
.hw-cm-opp__body p{max-width:766px;margin:0 auto !important}
.hw-cm-opp__body{margin-bottom:125px !important}

.hw-cm-cards{display:grid;grid-template-columns:570px 570px;column-gap:20px;
  row-gap:86px;align-items:start}
.hw-cm-card{margin:0}
/* Las fotos que faltan se pintan en FPO, como en el Figma, para que se vea qué
   queda por licenciar.

   El rótulo va condicionado a que la caja esté VACÍA (`:not(:has(img))`) y no a
   una clase que haya que acordarse de quitar. El 2026-09-21 se metió la foto de
   Outfitters Village y el "FPO" siguió saliendo AL LADO de ella: la caja es
   flex, así que el `::after` no se superponía, se ponía al lado como un
   hermano más. Con `:has()` desaparece solo en cuanto una caja recibe su
   imagen, y las otras seis lo conservan sin tocar nada. */
.hw-cm-card__ph{width:100%;aspect-ratio:570/334;background:#B6C2D0;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.hw-cm-card__ph:not(:has(img))::after{content:"FPO";font-family:'Poppins',sans-serif;
  font-weight:600;font-size:36px;letter-spacing:6px;color:#FFFFFF;opacity:.92}
/* La foto llena la caja: como hermana de un flex se quedaba a su tamaño
   natural y centrada, dejando franjas grises a los lados. */
.hw-cm-card__ph img{display:block;width:100%;height:100%;object-fit:cover;
  margin:0 !important}
.hw-cm-card__t{font-family:'Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:48px;
  color:var(--awb-color8,#19180C);margin:31px 0 0 !important}
.hw-cm-card__k{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0);margin:22px 0 0 !important}
.hw-cm-card__b{font-family:'Lora',Georgia,serif;font-size:16px;line-height:29px;
  color:var(--awb-color8,#19180C);max-width:492px;margin:25px 0 0 !important}

/* ---------- 6 · INTERESTED OR HAVE QUESTIONS? ---------- */
/* Las franjas pintadas son las mismas dos tiras de Location, alternadas. Van
   como CAPAS DE FONDO de la sección, no como elementos dentro de la columna:
   metidas en la columna se quedaban en los 1160 del contenido y no llegaban
   al borde. La primera cae todavía sobre la banda crema, así que el corte
   crema/blanco va en un degradado, como en Explore o Visit Us. */
.hw-cm-int{
  position:relative;min-height:985px !important;
  padding-top:0 !important;padding-bottom:0 !important;
  background-color:#FFFFFF !important;
  background-image:
    url('/wp-content/uploads/2026/09/hw-loc-stripe-a.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-b.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-a.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-b.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-a.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-b.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-a.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-b.webp'),
    url('/wp-content/uploads/2026/09/hw-loc-stripe-a.webp'),
    linear-gradient(to bottom, var(--awb-color1,#EFEAE4) 0 52px, #FFFFFF 52px 100%) !important;
  background-repeat:no-repeat !important;
  background-position:0 32px,0 141px,0 256px,0 371px,0 472px,0 590px,0 701px,0 799px,0 905px,0 0 !important;
  background-size:100% 52px,100% 52px,100% 50px,100% 57px,100% 56px,100% 56px,100% 45px,100% 48px,100% 58px,100% 100% !important}

.hw-cm-int__fig{position:relative;width:100%;aspect-ratio:1160/660;
  margin-top:163px;overflow:hidden}
.hw-cm-int__art{display:block;width:100%;height:100%;object-fit:cover;
  margin:0 !important}
/* El diseño oscurece la foto para que el texto blanco se lea. Medido contra el
   frame: multiplicar por 0,45 y sumar el negro de la marca → 55% de #19180C. */
.hw-cm-int__fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(25,24,12,.55)}
.hw-cm-int__txt{position:absolute;z-index:1;left:30.172%;top:27.727%;width:39.655%;
  text-align:center;color:#FFFFFF}
.hw-cm-int__txt p{margin:0}
.hw-cm-int__h2{font-family:'Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:48px}
.hw-cm-int__b{font-family:'Lora',Georgia,serif;font-size:16px;line-height:29px;
  margin-top:20px !important}
.hw-cm-int__n{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:28px;margin-top:30px !important}
.hw-cm-int__c{font-family:'Lora',Georgia,serif;font-size:16px;line-height:29px;
  margin-top:6px !important}
.hw-cm-int__c a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.hw-cm-int__c a.hw-cm-int__tel{text-decoration:none}
.hw-cm-int__c a:hover{color:var(--awb-color7,#E54511)}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-cm-hero{min-height:520px !important;padding-top:170px !important}
  .hw-cm-hero__title p,.hw-cm-hero__title.hw-cm-hero__title h1{font-size:52px;line-height:1.04}
  .hw-cm-hero__rule span{height:70px;margin-top:70px}
  .hw-cm-intro{padding-top:70px !important;padding-bottom:70px !important}
  .hw-cm-intro__body p{font-size:17px;line-height:31px}
  .hw-cm-intro__body{margin-bottom:40px !important}
  .hw-cm-loc{padding-top:70px !important}
  .hw-cm-loc__l,.hw-cm-loc__r{width:100% !important}
  .hw-cm-loc__h2{margin-top:20px !important;margin-bottom:26px !important}
  .hw-cm-h2 p,.hw-cm-card__t,.hw-cm-int__h2{font-size:30px;line-height:34px}
  .hw-cm-facts{grid-template-columns:1fr;row-gap:10px;margin-top:26px}
  .hw-cm-map{padding-top:40px !important;padding-bottom:70px !important}
  .hw-cm-opp{padding-top:70px !important;padding-bottom:80px !important}
  .hw-cm-opp__body{margin-bottom:56px !important}
  .hw-cm-cards{grid-template-columns:1fr;row-gap:56px}
  .hw-cm-card__ph:not(:has(img))::after{font-size:26px}
  .hw-cm-card__t{margin-top:22px !important}
  .hw-cm-int{min-height:0 !important;padding-top:60px !important;
    padding-bottom:60px !important;
    background-image:none !important;background-color:#FFFFFF !important}
  /* en móvil el texto sale bajo la foto, en negro sobre blanco: la tinta
     oscura del recuadro sobraba y se comía el bloque entero. */
  .hw-cm-int__fig{margin-top:0;aspect-ratio:auto}
  .hw-cm-int__fig::after{display:none}
  .hw-cm-int__art{aspect-ratio:1160/660}
  .hw-cm-int__txt{position:static;width:100%;color:var(--awb-color8,#19180C);
    margin-top:26px}
  .hw-cm-int__c a{color:inherit}
}

/* BugHerd #117 (2026-09-24): el velo del Figma sobre el mapa (nodo 15138:16416:
   relleno #BAC3CB al 10 % encima de la imagen). Sin él el dibujo se funde con el
   fondo blanco. Va en ::before —pintado ANTES que los rótulos, que también son
   absolutos, así que les queda debajo— y no captura clics. */
.hw-cm-map__fig::before{content:"";position:absolute;inset:0;z-index:0;
  background:rgba(186,195,203,.1);pointer-events:none}

/* ==================================================================
   NEWS (/news, página 58)
   Nodo `14358:5726` del Figma, revisado el 2026-09-03 (frame 1440×6167).
   Banda crema 0-673 (la foto destacada la monta), blanco hasta el formulario.
   El contenido lo pinta [hw_news_index] (child theme, functions.php).
   ================================================================== */
body.page-id-58 #main{padding-top:0 !important}

.hw-nw{padding-left:0 !important;padding-right:0 !important;
  padding-top:183px !important;padding-bottom:378px !important;
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 673px, #FFFFFF 673px 100%) !important}
.hw-nw .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-nw .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-nw .fusion-layout-column{margin-bottom:0 !important}
.hw-nw .fusion-text p{margin:0}
.hw-nw-body > p:empty,.hw-nw .fusion-text > p:empty{display:none !important;margin:0 !important}

/* ---------- cabecera ---------- */
.hw-nw-eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color5,#424B0A)}
.hw-nw-eyebrow{margin-bottom:20px !important}
.hw-nw-h1 p,.hw-nw-h1.hw-nw-h1 h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:80px;line-height:86px;color:var(--awb-color5,#424B0A)}
.hw-nw-h1{margin-bottom:0 !important}

/* ---------- filtros ---------- */
/* Dos renglones centrados, separación de 21 px, interlínea de 29. El activo va
   en azul oscuro y con raya debajo. */
.hw-nw-filters{display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:21px;row-gap:0;max-width:720px;margin:38px auto 0}
.hw-nw-filters__br{flex:0 0 100%;height:0}
.hw-nw-filters__i{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:29px;
  color:var(--awb-color4,#6D7EA0);text-decoration:none;white-space:nowrap}
.hw-nw-filters__i:hover{color:var(--awb-color7,#E54511)}
.hw-nw-filters__a{color:#042C45;box-shadow:inset 0 -1px 0 0 #8A96A0}
.hw-nw-filters__a:hover{color:#042C45}

/* ---------- la destacada ---------- */
.hw-nw-feat{display:block;max-width:767px;margin:67px auto 0}
.hw-nw-feat__media{display:block;width:100%;aspect-ratio:767/506;overflow:hidden}
.hw-nw-feat__img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}
.hw-nw-feat__body{display:flex;justify-content:space-between;align-items:flex-start;
  gap:47px;margin-top:23px}
.hw-nw-feat__l{flex:0 1 506px;min-width:0}
.hw-nw-feat__t{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:28px;color:var(--awb-color8,#19180C)}
.hw-nw-feat__t a{color:inherit;text-decoration:none}
.hw-nw-feat__t a:hover{color:var(--awb-color7,#E54511)}
.hw-nw-feat__x{font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:20px;
  color:var(--awb-color8,#19180C);margin-top:13px !important}
.hw-nw-feat__meta{flex:0 0 213px;text-align:right}
.hw-nw-feat .hw-nw-more{margin-top:13px !important}

/* ---------- la rejilla ---------- */
.hw-nw-grid{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:80.5px;row-gap:63px;margin-top:140px;align-items:start}
.hw-nw-card{margin:0}
.hw-nw-card__media{display:block;width:100%;aspect-ratio:333/220;overflow:hidden;
  background:#EFEAE4}
.hw-nw-card__img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}
/* Con contenido real los titulares y los resúmenes vienen de largos distintos;
   se recortan a dos líneas para que la rejilla no baile (igual que en What's
   Happening). */
.hw-nw-card__t{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:28px;color:var(--awb-color8,#19180C);
  margin-top:16px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hw-nw-card__t a{color:inherit;text-decoration:none}
.hw-nw-card__t a:hover{color:var(--awb-color7,#E54511)}
.hw-nw-card__x{font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:20px;
  color:var(--awb-color8,#19180C);margin-top:6px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- piezas compartidas ---------- */
/* En el diseño hay dos renglones: el nombre de la publicación y la fecha. La
   publicación NO tiene de dónde salir, así que va sólo la fecha. */
.hw-nw-meta{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:1.6px;text-transform:uppercase;line-height:19px;
  color:var(--awb-color4,#6D7EA0);margin-top:6px !important}
.hw-nw-more{margin-top:6px !important}
.hw-nw-more a{font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:20px;
  color:var(--awb-color8,#19180C);text-decoration:underline;text-underline-offset:3px}
.hw-nw-more a:hover{color:var(--awb-color7,#E54511)}
.hw-nw-vacio{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:29px;
  text-align:center;margin-top:140px !important}

/* "Load more": rótulo naranja con raya, como el CTA de Commercial. */
.hw-nw-load{text-align:center;margin-top:87px !important}
.hw-nw-load a{display:inline-block;padding:0 8px 9px;line-height:1;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color7,#E54511);text-decoration:none;
  border-bottom:1px solid var(--awb-color7,#E54511)}
.hw-nw-load a:hover{opacity:.72}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-nw{padding-top:130px !important;padding-bottom:90px !important;
    background:linear-gradient(to bottom,
      var(--awb-color1,#EFEAE4) 0 420px, #FFFFFF 420px 100%) !important}
  .hw-nw-h1 p,.hw-nw-h1.hw-nw-h1 h1{font-size:52px;line-height:58px}
  .hw-nw-filters{max-width:100%;column-gap:16px;margin-top:26px}
  .hw-nw-filters__i{font-size:10px;letter-spacing:1.6px;line-height:26px}
  .hw-nw-feat{margin-top:40px}
  .hw-nw-feat__body{display:block;margin-top:18px}
  .hw-nw-feat__meta{text-align:left;margin-top:10px !important}
  .hw-nw-grid{grid-template-columns:1fr;column-gap:0;row-gap:44px;margin-top:56px}
  .hw-nw-load{margin-top:56px !important}
}
@media (min-width:1024px) and (max-width:1279px){
  .hw-nw-grid{column-gap:40px}
}

/* BugHerd #198 (25-09) · MÓVIL: la foto de la primera noticia tiene que PARTIR
   el cambio de fondo, como en escritorio. El corte iba a 420 px fijos y caía
   justo en el borde de arriba de la foto (depende de cuántas líneas ocupen los
   filtros). Ahora la sección va en crema lisa y el blanco lo pinta la propia
   noticia destacada con un ::before a sangre que empieza a MEDIA FOTO: la
   foto es 767:506, así que su mitad está al 33 % del ancho, y un margen en %
   se mide contra el ancho. `overflow:clip` recorta el blanco al final de la
   sección sin crear scroll. */
@media (max-width:1023px){
  .hw-nw{background:var(--awb-color1,#EFEAE4) !important;isolation:isolate;overflow:clip}
  .hw-nw-feat{position:relative}
  .hw-nw-feat::before{content:"";position:absolute;z-index:-1;top:0;margin-top:32.99%;
    left:calc(50% - 50vw);width:100vw;height:30000px;background:#FFFFFF;pointer-events:none}
}

/* ==================================================================
   EVENTS (/events-calendar, página 3092) y su vista filtrada
   Nodos `14372:7342` y `14378:5806` del Figma, revisados el 2026-09-03
   (frames 1440×5712 y 1440×3284). Banda crema 0-686.
   El contenido lo pinta [hw_events_index] (child theme, functions.php).
   ================================================================== */
body.page-id-3092 #main{padding-top:0 !important}

.hw-ev{padding-left:0 !important;padding-right:0 !important;
  padding-top:183px !important;padding-bottom:340px !important;
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 686px, #FFFFFF 686px 100%) !important}
.hw-ev .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-ev .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-ev .fusion-layout-column{margin-bottom:0 !important}
.hw-ev .fusion-text p{margin:0}
.hw-ev-body > p:empty,.hw-ev .fusion-text > p:empty{display:none !important;margin:0 !important}

/* ---------- cabecera ---------- */
.hw-ev-eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color5,#424B0A)}
.hw-ev-eyebrow{margin-bottom:20px !important}
.hw-ev-h1 p,.hw-ev-h1.hw-ev-h1 h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:80px;line-height:86px;color:var(--awb-color5,#424B0A)}
.hw-ev-h1{margin-bottom:0 !important}

/* ---------- el rótulo de colores ---------- */
.hw-ev-dot{display:inline-block;width:14px;height:14px;border-radius:50%;
  vertical-align:middle;flex:0 0 14px}
.hw-ev-dot--everyone {background:var(--awb-color4,#6D7EA0)}
.hw-ev-dot--residents{background:#CEC439}
.hw-ev-key{display:flex;justify-content:center;gap:48px;margin:88px 0 0 !important}
.hw-ev-key__i{display:inline-flex;align-items:center;gap:9px;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:19px;
  color:var(--awb-color5,#424B0A)}

/* ---------- el calendario ---------- */
/* Caja de 767 centrada, cabecera de 59, fila de días de 34 y semanas de 72.
   Los bordes se pintan con un solo `box-shadow` por celda para que no se
   dupliquen entre vecinas. */
/* CALENDARIO (izquierda) + LO QUE PASA (derecha).
   El Figma deja el calendario centrado y las fichas debajo, y así saber qué
   pasa el día 18 obliga a bajar a buscarlo entre las fichas. La columna de la
   derecha lo dice sin salir de la vista, que es como funciona el calendario
   que el cliente ya tiene. El calendario conserva sus 767px del Figma. */
.hw-ev-top{display:grid;grid-template-columns:767px minmax(0,1fr);
  gap:40px;align-items:start;max-width:1160px;margin:46px auto 0}
.hw-ev-cal{max-width:767px;margin:0;border:1px solid #BAC3CB;
  background:#FFFFFF}
.hw-ev-cal__hd{display:flex;align-items:center;justify-content:space-between;
  height:59px;padding:0 28px;border-bottom:1px solid #BAC3CB}
.hw-ev-cal__m{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:1;color:var(--awb-color8,#19180C)}
.hw-ev-cal__nav{display:block;width:48px;height:12px;
  background:
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat center/calc(100% - .5px) 1px;
  position:relative;transition:opacity .2s}
.hw-ev-cal__nav::after{content:"";position:absolute;top:0;width:4.18px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M3.68 .5 .5 3.68 3.68 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/4.18px 7.36px}
.hw-ev-cal__nav--p::after{left:0}
.hw-ev-cal__nav--p{background-position:right center}
.hw-ev-cal__nav--n::after{right:0;transform:scaleX(-1)}
.hw-ev-cal__nav--n{background-position:left center}
.hw-ev-cal__nav:hover{opacity:.6}
.hw-ev-cal__wd{display:grid;grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid #BAC3CB}
.hw-ev-cal__wd span{height:33px;display:flex;align-items:center;justify-content:center;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;letter-spacing:1px;
  color:var(--awb-color8,#19180C)}
.hw-ev-cal__wd span + span{box-shadow:inset 1px 0 0 0 #BAC3CB}
.hw-ev-cal__g{display:grid;grid-template-columns:repeat(7,1fr)}
.hw-ev-cal__c{position:relative;min-height:72px;padding:9px 0 0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:inset 0 1px 0 0 #BAC3CB;text-decoration:none}
.hw-ev-cal__g > .hw-ev-cal__c:nth-child(7n+1){box-shadow:inset 0 1px 0 0 #BAC3CB}
.hw-ev-cal__g > .hw-ev-cal__c:not(:nth-child(7n+1)){
  box-shadow:inset 0 1px 0 0 #BAC3CB, inset 1px 0 0 0 #BAC3CB}
.hw-ev-cal__g > .hw-ev-cal__c:nth-child(-n+7){box-shadow:none}
.hw-ev-cal__g > .hw-ev-cal__c:nth-child(-n+7):not(:nth-child(7n+1)){
  box-shadow:inset 1px 0 0 0 #BAC3CB}
.hw-ev-cal__n{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:13px;
  line-height:1;color:var(--awb-color8,#19180C)}
.hw-ev-cal__c--out .hw-ev-cal__n{color:#BAC3CB}
.hw-ev-cal__dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;
  max-width:92px}
.hw-ev-cal__c--has:hover{background:rgba(239,234,228,.6)}
.hw-ev-cal__c--sel{background:var(--awb-color1,#EFEAE4)}

/* ---------- las fichas ---------- */
/* ---------- la columna de la derecha ---------- */

.hw-ev-side{background:#FFFFFF;border:1px solid #BAC3CB;padding:22px 24px}
.hw-ev-side__k{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:1.15;color:var(--awb-color8,#19180C);margin:0}
.hw-ev-side__n{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:2px;text-transform:uppercase;color:var(--awb-color4,#6D7EA0);
  margin:6px 0 14px !important}
.hw-ev-side__l{list-style:none;margin:0;padding:0}

/* La lista del mes entero puede traer decenas de filas: con scroll propio, y
   no estirando la fila, para que el calendario de al lado no se descuadre.
   Con un día elegido son pocas y se enseñan enteras. */
.hw-ev-side--mes .hw-ev-side__l{max-height:372px;overflow-y:auto;
  scrollbar-width:thin}

.hw-ev-row{border-top:1px solid #D4D6D7}
.hw-ev-row:last-child{border-bottom:1px solid #D4D6D7}
.hw-ev-row a{display:block;padding:11px 0 11px 16px;position:relative;
  text-decoration:none;color:var(--awb-color8,#19180C)}

/* El punto del color que le toca, alineado con la primera línea. Mismos
   colores que el rótulo y que los puntos del calendario. */
.hw-ev-row a::before{content:"";position:absolute;left:0;top:16px;
  width:8px;height:8px;border-radius:50%}
.hw-ev-row--everyone a::before{background:#6D7EA0}
.hw-ev-row--residents a::before{background:#CEC439}

.hw-ev-row__d{display:block;font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--awb-color4,#6D7EA0)}
.hw-ev-row__t{display:block;margin-top:3px;font-family:calluna,'Lora',Georgia,serif;
  font-size:14px;line-height:19px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.hw-ev-row__v{display:block;margin-top:3px;font-family:'Gravitica','Poppins',sans-serif;
  font-size:11px;color:var(--awb-color4,#6D7EA0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-ev-row a:hover .hw-ev-row__t{color:var(--awb-color7,#E54511)}

.hw-ev-side__vacio{font-family:calluna,'Lora',Georgia,serif;font-size:14px;
  color:var(--awb-color4,#6D7EA0);margin:10px 0 0 !important}
.hw-ev-side__todo{margin:16px 0 0 !important}
.hw-ev-side__todo a{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--awb-color7,#E54511);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px}

.hw-ev-grid{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:80.5px;row-gap:64px;margin-top:106px;align-items:start}
.hw-ev-card{margin:0}
.hw-ev-card__media{display:block;width:100%;aspect-ratio:333/220;overflow:hidden;
  background:#EFEAE4}
.hw-ev-card__img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}
.hw-ev-card__d{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:1.6px;text-transform:uppercase;line-height:14px;
  color:var(--awb-color4,#6D7EA0);margin-top:20px !important}
.hw-ev-card__t{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:28px;color:var(--awb-color8,#19180C);
  margin-top:6px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hw-ev-card__t a{color:inherit;text-decoration:none}
.hw-ev-card__t a:hover{color:var(--awb-color7,#E54511)}
.hw-ev-card__x{font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:20px;
  color:var(--awb-color8,#19180C);margin-top:6px !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hw-ev-more{margin-top:6px !important}
.hw-ev-more a{font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:20px;
  color:var(--awb-color8,#19180C);text-decoration:underline;text-underline-offset:3px}
.hw-ev-more a:hover{color:var(--awb-color7,#E54511)}

.hw-ev-vuelta{text-align:center;margin-top:40px !important}
.hw-ev-vuelta a{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:var(--awb-color4,#6D7EA0);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.hw-ev-vuelta a:hover{color:var(--awb-color7,#E54511)}
.hw-ev-vacio{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:29px;
  text-align:center;margin-top:106px !important}

.hw-ev-load{text-align:center;margin-top:49px !important}
.hw-ev-load a{display:inline-block;padding:0 8px 9px;line-height:1;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color7,#E54511);text-decoration:none;
  border-bottom:1px solid var(--awb-color7,#E54511)}
.hw-ev-load a:hover{opacity:.72}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-ev{padding-top:130px !important;padding-bottom:90px !important;
    background:linear-gradient(to bottom,
      var(--awb-color1,#EFEAE4) 0 560px, #FFFFFF 560px 100%) !important}
  .hw-ev-h1 p,.hw-ev-h1.hw-ev-h1 h1{font-size:52px;line-height:58px}
  .hw-ev-key{flex-direction:column;align-items:center;gap:10px;margin-top:44px !important}
  .hw-ev-cal{margin-top:0}
  .hw-ev-cal__hd{padding:0 14px;height:50px}
  .hw-ev-cal__m{font-size:18px}
  .hw-ev-cal__nav{width:32px}
  .hw-ev-cal__c{min-height:58px;padding-top:6px;gap:5px}
  .hw-ev-cal__dots{gap:3px;max-width:44px}
  .hw-ev-dot{width:9px;height:9px;flex-basis:9px}
  .hw-ev-grid{grid-template-columns:1fr;column-gap:0;row-gap:44px;margin-top:56px}
  .hw-ev-load{margin-top:44px !important}
}
@media (min-width:1024px) and (max-width:1279px){
  .hw-ev-grid{column-gap:40px}
}

/* Por debajo de 1240 no caben 767 + 40 + una columna que se lea: la lista pasa
   a ir debajo del calendario, a todo el ancho. */
@media (max-width:1239px){
  .hw-ev-top{grid-template-columns:minmax(0,1fr);max-width:767px;gap:24px}
  .hw-ev-side--mes .hw-ev-side__l{max-height:300px}
}

/* BugHerd #166 (25-09): la columna de «Upcoming events» a la MISMA altura que
   el calendario (iba 30 px más alta con 4 eventos y crecía con más). En la
   fila de dos columnas: la rejilla estira las dos, la lateral no aporta alto
   propio (`contain:size`) y su lista se come el sobrante con scroll dentro. */
@media (min-width:1240px){
  .hw-ev-top{align-items:stretch}
  .hw-ev-side{contain:size;display:flex;flex-direction:column;min-height:0;box-sizing:border-box}
  .hw-ev-side .hw-ev-side__l{flex:1 1 0;min-height:0;max-height:none !important;overflow-y:auto}
}

/* ==================================================================
   NEWS DETAIL y EVENT DETAIL (la entrada y el evento sueltos)
   Nodos `14369:6669` y `14378:6511` del Figma, revisados el 2026-09-03
   (frames 1440×3728 y 1440×2840). Las dos fichas son la misma: sólo cambia
   que el evento lleva un renglón de ficha en vez de dos.
   NO son páginas: son las plantillas de Avada. Aquí sólo se re-viste el
   marcado que ya generan — no se toca el JSON de las secciones, que es donde
   duele. El gancho es la clase `hw-articulo`, que pone `body_class` en
   functions.php para las entradas Y los eventos.
   Columna de contenido 767; el texto, 731. Banda crema hasta 673 del lienzo,
   que con la cabecera de 100 px son 573 dentro de #main.
   ================================================================== */
/* La crema tiene que empezar DETRÁS de la cabecera y llegar a los 673 del
   lienzo. La estructura de Avada es
   #wrapper > .fusion-header > #sliders-container > .fusion-page-title-bar > #main,
   así que el degradado va en `#wrapper` —el único que empieza en 0— y todo lo
   de dentro se pone transparente. Puesto en `#main` se quedaba corto y dejaba
   dos cremas distintas con una costura debajo de la cabecera. */
body.hw-articulo #wrapper{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 673px, #FFFFFF 673px 100%) !important}
body.hw-articulo .fusion-header,
body.hw-articulo .fusion-header-wrapper .fusion-header,
body.hw-articulo #sliders-container{background:transparent !important;box-shadow:none !important}
body.hw-articulo #main{
  padding-top:0 !important;padding-bottom:0 !important;background:transparent !important}
body.hw-articulo #main > .fusion-row{
  max-width:100% !important;padding-left:0 !important;padding-right:0 !important;
  width:100% !important}

/* la columna: 767 centrados, en la cabecera y en el cuerpo */
body.hw-articulo .fusion-tb-page-title-bar,
body.hw-articulo .fusion-tb-page-title-bar .fusion-fullwidth,
/* `:not(.hw-form)` — el formulario global se engancha por `the_content`, así
   que en las fichas cae DENTRO de `.post-content` y esta regla le borraba el
   fondo Boxwood y los 30 px de padding: se veía una banda blanca. Medido
   contra /schools/, donde la misma sección sale #BAC3CB con padding 30.
   Es el mismo tropiezo que ya obligó al `:not(.hw-form-icon)` de más abajo
   (el sello a 767×506): las reglas del artículo pillan al formulario. */
body.hw-articulo .post-content > .fusion-fullwidth:not(.hw-form){
  background:transparent !important;background-color:transparent !important;
  padding-left:0 !important;padding-right:0 !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion-builder-row,
body.hw-articulo .post-content > .fusion-fullwidth > .fusion-builder-row{
  max-width:767px !important;width:100% !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:0 !important;padding-right:0 !important}
body.hw-articulo .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
body.hw-articulo .fusion-layout-column{margin-bottom:0 !important}

/* ---------- cabecera: titular a la izquierda, ficha a la derecha ---------- */
body.hw-articulo .fusion-tb-page-title-bar{padding-top:72px !important;padding-bottom:0 !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_2_3{
  width:61.5% !important;margin-right:0 !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3{
  width:38.5% !important;margin-left:0 !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion-title-heading,
body.hw-articulo .fusion-tb-page-title-bar h1,
body.hw-articulo .fusion-tb-page-title-bar h2{
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-weight:400 !important;
  font-size:22px !important;line-height:28px !important;letter-spacing:0 !important;
  color:var(--awb-color8,#19180C) !important;margin:0 !important;text-transform:none !important}
/* La ficha de la derecha: en el diseño son dos renglones (la publicación y la
   fecha). No hay campo de publicación, así que arriba queda la categoría. */
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title{
  margin:0 !important;text-align:right !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title-heading,
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 h1,
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 h2,
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 h4{
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:10px !important;line-height:19px !important;letter-spacing:1.6px !important;
  text-transform:uppercase !important;text-align:right !important;
  color:var(--awb-color4,#6D7EA0) !important;margin:0 !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title-3{
  margin-top:0 !important}

/* ---------- la foto destacada ----------
   ⚠️ EL `:not(.hw-form-icon)` ES OBLIGATORIO.
   Estas reglas se escribieron para la foto de cabecera del artículo, pero
   seleccionan TODO `.fusion-imageframe` que caiga dentro de `.post-content` —
   y el sello del formulario global, que va al final de todas las páginas, cae
   ahí dentro. Resultado medido en `/4th-annual-founders-day/`: el logo se
   pintaba a 767×506 con un recorte 767/506 encima. Es el árbol de 62px.
   Mismo remedio y misma forma que ya se usa en `style.css:1422`. */
body.hw-articulo .post-content > .fusion-fullwidth:first-child{padding-top:30px !important}
body.hw-articulo .post-content .fusion-image-element:not(:has(.hw-form-icon)),
body.hw-articulo .post-content .fusion-imageframe:not(.hw-form-icon){
  display:block !important;width:100% !important;margin:0 !important}
body.hw-articulo .post-content .fusion-imageframe:not(.hw-form-icon) img{
  display:block;width:100%;aspect-ratio:767/506;object-fit:cover;margin:0 !important}

/* ---------- el cuerpo ---------- */
body.hw-articulo .fusion-content-tb{padding-top:60px !important}
body.hw-articulo .fusion-content-tb p,
body.hw-articulo .fusion-content-tb li{
  font-family:calluna,'Lora',Georgia,serif !important;font-size:14px !important;
  line-height:20px !important;color:var(--awb-color8,#19180C) !important;
  max-width:731px}
body.hw-articulo .fusion-content-tb p{margin:0 0 20px !important}
body.hw-articulo .fusion-content-tb h2,
body.hw-articulo .fusion-content-tb h3{
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-weight:400 !important;
  font-size:22px !important;line-height:28px !important;
  color:var(--awb-color8,#19180C) !important;margin:30px 0 12px !important}
body.hw-articulo .fusion-content-tb a{color:inherit;text-decoration:underline;
  text-underline-offset:3px}
body.hw-articulo .fusion-content-tb a:hover{color:var(--awb-color7,#E54511)}
/* Las fotos de dentro del artículo llegan a los 767 completos, no a los 731
   del texto (en el diseño, la grande de 472 y las dos de 275 suman 767). */
body.hw-articulo .fusion-content-tb img,
body.hw-articulo .fusion-content-tb .fusion-gallery{max-width:767px;margin-left:0}
body.hw-articulo .fusion-content-tb .fusion-gallery{margin-top:30px;margin-bottom:30px}

/* ---------- "back to all news" ---------- */
/* Lo añade un filtro de `the_content` (functions.php): la plantilla de Avada no
   lo trae y editar el JSON de la sección por un enlace no compensa. */
.hw-nd-back{margin:52px 0 0 !important;max-width:none !important}
.hw-nd-back a{
  display:inline-flex;align-items:center;
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:12px !important;letter-spacing:2px !important;text-transform:uppercase;
  color:var(--awb-color7,#E54511) !important;text-decoration:none !important}
.hw-nd-back a::before{
  content:"";display:inline-block;margin-right:16px;width:48px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M3.68 .5 .5 3.68 3.68 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat right center/calc(100% - .5px) 1px;
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.hw-nd-back a::before{transition:none}}

/* la entrada acaba justo antes del formulario */
body.hw-articulo .post-content{padding-bottom:198px}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  body.hw-articulo #wrapper{background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 400px, #FFFFFF 400px 100%) !important}
  body.hw-articulo .fusion-tb-page-title-bar{padding-top:40px !important}
  body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_2_3,
  body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3{width:100% !important}
  body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title,
  body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title-heading{
    text-align:left !important}
  body.hw-articulo .fusion-content-tb{padding-top:34px !important}
  body.hw-articulo .post-content{padding-bottom:70px}
}

/* ---------- la ficha del evento ---------- */
/* La plantilla de TEC (`tribe-events/single-event.php` del child theme) emite
   su propio marcado, así que aquí se le da la misma geometría que a la
   entrada: 768 de columna, 731 de texto. */
body.hw-articulo .hw-ed{max-width:768px;margin:0 auto;padding:0}
body.hw-articulo #sidebar{display:none !important}
body.hw-articulo #content{width:100% !important;float:none !important;margin:0 !important}
body.hw-articulo .tribe-events-back,
body.hw-articulo #tribe-events-header,
body.hw-articulo #tribe-events-footer,
body.hw-articulo .tribe-events-schedule,
body.hw-articulo .tribe-events-event-meta,
body.hw-articulo .tribe-events-single-section,
body.hw-articulo .tribe-events-cal-links,
body.hw-articulo .tribe-events-notices,
body.hw-articulo .tribe-events-event-categories,
body.hw-articulo .tribe-events-before-html,
body.hw-articulo .tribe-events-after-html{display:none !important}
.hw-ed-hd{display:flex;justify-content:space-between;align-items:flex-start;
  gap:47px;padding-top:172px}
/* En la ficha de evento no hay barra de título de Avada: la cabecera flota
   encima y el contenido arranca en el cero del lienzo, así que el hueco de
   arriba son los 172 del Figma tal cual. */
.hw-ed-hd__t{flex:1 1 513px;min-width:0;
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-weight:400 !important;
  font-size:22px !important;line-height:28px !important;letter-spacing:0 !important;
  text-transform:none !important;color:var(--awb-color8,#19180C) !important;margin:0 !important}
.hw-ed-hd__m{flex:0 0 205px;text-align:right;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:1.6px;text-transform:uppercase;line-height:19px;
  color:var(--awb-color4,#6D7EA0);margin:4px 0 0}
.hw-ed-feat{margin-top:20px}
.hw-ed-feat img{display:block;width:100%;aspect-ratio:768/505;object-fit:cover;margin:0}
.hw-ed-body{margin-top:61px;padding-bottom:198px}
.hw-ed-body p,.hw-ed-body li{font-family:calluna,'Lora',Georgia,serif;font-size:14px;
  line-height:20px;color:var(--awb-color8,#19180C);max-width:731px}
.hw-ed-body p{margin:0 0 20px}
.hw-ed-body img{max-width:768px;height:auto}
.hw-ed-body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-ed-body a:hover{color:var(--awb-color7,#E54511)}
/* El formulario va a sangre, fuera de la columna de 768. */
body.hw-articulo .hw-ed .hw-form{
  width:100vw;margin-left:calc(50% - 50vw);max-width:none}
@media (max-width:1023px){
  .hw-ed{padding:0 24px}
  .hw-ed-hd{display:block;padding-top:40px}
  .hw-ed-hd__m{text-align:left;margin-top:10px}
  .hw-ed-body{margin-top:34px;padding-bottom:70px}
}

/* ==================================================================
   GALLERY (/gallery, página 7499) y su lupa
   Nodos `14304:2977` y `14336:3385` del Figma, revisados el 2026-09-04
   (frames 1440×6802 y 1440×852). Toda la página va sobre crema (0-5311).
   El contenido lo pinta [hw_gallery]; la lupa, `hw-gallery.js`.
   ================================================================== */
body.page-id-7499 #main{padding-top:0 !important}

.hw-gl{padding-left:0 !important;padding-right:0 !important;
  padding-top:183px !important;padding-bottom:398px !important;
  background:var(--awb-color1,#EFEAE4) !important}
.hw-gl .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-gl .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-gl .fusion-layout-column{margin-bottom:0 !important}
.hw-gl .fusion-text p{margin:0}
.hw-gl-body > p:empty,.hw-gl .fusion-text > p:empty{display:none !important;margin:0 !important}

/* ---------- cabecera ---------- */
.hw-gl-eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color5,#424B0A)}
.hw-gl-eyebrow{margin-bottom:20px !important}
.hw-gl-h1 p,.hw-gl-h1.hw-gl-h1 h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:60px;line-height:86px;color:var(--awb-color5,#424B0A)}
.hw-gl-h1{margin-bottom:0 !important}
/* BugHerd #130 (2026-09-24): la entradilla sigue la convención de TODAS las
   demás (Juana Regular 20 / 38, 2 % de tracking). Iba en Calluna. La caja se
   queda en 658, que es la del Figma para esta página (14304:2999). */
.hw-gl-intro p{font-family:'Juana','Playfair Display',Georgia,serif;font-size:20px;line-height:38px;
  letter-spacing:.02em;
  color:var(--awb-color8,#19180C);max-width:658px;margin:0 auto !important}
.hw-gl-intro{margin-top:35px !important;margin-bottom:0 !important}

/* ---------- filtros ---------- */
.hw-gl-filters{display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:29px;margin:81px 0 0}
/* BugHerd #129 (2026-09-24), nodo `filters` 14307:3620: Gravitica 15 / 1,2,
   1,95 px (el tamaño GRANDE, `cta_reg`); el activo en #002942 con una raya
   de 1 px que sobresale 6 px por cada lado (Line 5, 84 px bajo «view all»,
   2 px por debajo del texto). El hover NO cambia de color: la raya nace en el
   borde izquierdo del rótulo, en su mismo color (Line 6, #6D7EA0, a opacidad
   0 en el diseño) y se alarga, como el resto de CTA subrayados. */
.hw-gl-filters__i{position:relative;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:1.95px;text-transform:uppercase;line-height:18px;
  color:var(--awb-color4,#6D7EA0) !important;text-decoration:none !important;white-space:nowrap}
.hw-gl-filters__i::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--awb-color4,#6D7EA0);opacity:0;transition:width .15s ease-out,opacity .15s ease-out}
.hw-gl-filters__i:hover::after,.hw-gl-filters__i:focus-visible::after{width:100%;opacity:1}
.hw-gl-filters__a{color:#002942 !important}
.hw-gl-filters__a::after,.hw-gl-filters__a:hover::after{left:-6px;width:calc(100% + 12px);opacity:1;
  background:#002942;
  transition:none}

/* ---------- la rejilla ---------- */
/* Bloques de tres: una grande de 767×523 y dos de 373×250, alternando el lado.
   Con `fr` los 1140 útiles (1160 menos la calle de 20) se reparten 767/373
   exactos. */
.hw-gl-grid{margin-top:45px}
.hw-gl-block{display:grid;grid-template-rows:250fr 250fr;
  column-gap:20px;row-gap:23px;margin-bottom:23px}
.hw-gl-block--a{grid-template-columns:767fr 373fr}
.hw-gl-block--b{grid-template-columns:373fr 767fr}
.hw-gl-block--a .hw-gl-i--big{grid-column:1;grid-row:1 / span 2}
.hw-gl-block--a .hw-gl-i--s1 {grid-column:2;grid-row:1}
.hw-gl-block--a .hw-gl-i--s2 {grid-column:2;grid-row:2}
.hw-gl-block--b .hw-gl-i--big{grid-column:2;grid-row:1 / span 2}
.hw-gl-block--b .hw-gl-i--s1 {grid-column:1;grid-row:1}
.hw-gl-block--b .hw-gl-i--s2 {grid-column:1;grid-row:2}
.hw-gl-i{display:block;padding:0;border:0;margin:0;background:#DCD6CE;
  cursor:pointer;overflow:hidden;position:relative;width:100%;height:100%}
.hw-gl-i img{display:block;width:100%;height:100%;object-fit:cover;margin:0;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.hw-gl-i:hover img,.hw-gl-i:focus-visible img{transform:scale(1.04)}
.hw-gl-i:focus-visible{outline:2px solid var(--awb-color7,#E54511);outline-offset:3px}
/* Las proporciones del Figma hay que FIJARLAS. Con `250fr 250fr` las filas se
   dimensionan por el contenido, asi que la altura del bloque la decidia la foto
   mas alta: con fotos de proporciones variadas (4:3, 16:9, verticales) cada
   bloque salia de una altura distinta -575, 625, 521...- y la rejilla perdia el
   ritmo del diseno. Fijando la proporcion de las DOS pequenas, la fila mide
   250 y la grande, que abarca las dos mas la calle de 23, mide 523 exactos.
   OJO: tiene que ir DESPUES de `.hw-gl-i{height:100%}`, que empata en
   especificidad y si no gana el 100% y la proporcion se ignora. */
.hw-gl-i--s1,.hw-gl-i--s2{aspect-ratio:373/250;height:auto}
/* La grande tambien: si no, una foto 4:3 en el hueco de 767 pedia 575 de alto
   y estiraba las dos filas con ella (bloques de 575 en medio de otros de 523).
   767/523 = 250 + 23 de calle + 250, o sea lo mismo que las dos pequenas. */
.hw-gl-i--big{aspect-ratio:767/523;height:auto;min-height:0}

/* Bloques incompletos. Los filtros no dan siempre un multiplo de tres (Homes
   son 8 fotos, Amenities 13), y el ultimo bloque dejaba un hueco de 373x250 a
   la derecha. En vez de recortar fotos, el bloque se recompone:
     · con dos fotos, la pequena se estira a lo alto (373x523)
     · con una sola, la grande ocupa el ancho entero (1160x523) */
.hw-gl-block:not(:has(.hw-gl-i--s2)) .hw-gl-i--s1{
  grid-row:1 / span 2;aspect-ratio:auto;height:100%}
.hw-gl-block:not(:has(.hw-gl-i--s1)){grid-template-columns:1fr}
.hw-gl-block:not(:has(.hw-gl-i--s1)) .hw-gl-i--big{grid-column:1;aspect-ratio:1160/523}
.hw-gl-vacio{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:29px;
  text-align:center;margin-top:80px !important}

.hw-gl-load{text-align:center;margin-top:68px !important}
.hw-gl-load a{display:inline-block;padding:0 8px 9px;line-height:1;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color7,#E54511);text-decoration:none;
  border-bottom:1px solid var(--awb-color7,#E54511)}
.hw-gl-load a:hover{opacity:.72}

/* ---------- la lupa ---------- */
/* BugHerd #128 (2026-09-24), contra el Figma (14336:3385): fondo VERDE
   Boxwood, la nav fuera (la lupa se cuelga de <body> desde hw-gallery.js y
   así la tapa), la foto centrada a 864×587 como máximo, las vecinas asomando
   a 30 px con el velo verde al 70 %, flechas a 50 px de los bordes, el
   contador y el pie alineados con la FOTO y el cerrar idéntico al del panel
   de menú (reusa `.hw-oc__close`, `.hw-roll` y `.hw-bars--x`). */
html.hw-gl-abierta{overflow:hidden}
.hw-gl-lb{position:fixed;inset:0;z-index:99999;background:var(--awb-color5,#424B0A);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
/* El `display:flex` de arriba gana al `display:none` que trae `[hidden]`, así
   que la lupa salía abierta al cargar. Hay que decirlo explícitamente. */
.hw-gl-lb[hidden]{display:none !important}
/* La foto manda: `display:table` + pie en `table-caption` hace que el pie mida
   lo mismo que la imagen y arranque en su borde izquierdo. */
.hw-gl-lb__f{position:relative;z-index:2;margin:0;display:table}
.hw-gl-lb__img{display:block;width:auto;height:auto;margin:0;
  max-width:min(864px, calc(100vw - 260px));max-height:min(587px, calc(100vh - 190px))}
.hw-gl-lb__cap{display:table-caption;caption-side:bottom;padding-top:12px;
  font-family:calluna,'Lora',Georgia,serif;font-size:14px;line-height:1.4;letter-spacing:.28px;
  color:var(--awb-color1,#EFEAE4)}
.hw-gl-lb__c{display:inline-block;margin-right:21px;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:1.56px;text-transform:uppercase}
/* las vecinas */
.hw-gl-lb__side{position:absolute;top:50%;z-index:1;cursor:pointer;overflow:hidden;
  width:864px;height:var(--hw-h,587px);transform:translateY(-50%)}
.hw-gl-lb__side[hidden]{display:none}
.hw-gl-lb__side img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.hw-gl-lb__side::after{content:"";position:absolute;inset:0;
  background:var(--awb-color5,#424B0A);opacity:.7}
.hw-gl-lb__side--p{right:calc(50% + var(--hw-w,864px) / 2 + 30px)}
.hw-gl-lb__side--n{left:calc(50% + var(--hw-w,864px) / 2 + 30px)}
/* cerrar: donde está el MENU de la barra, como en el panel */
.hw-gl-lb__x.hw-oc__close{position:absolute;z-index:3;top:33px;right:var(--hw-nav-pr,44px);
  flex:none;padding:0}
.hw-gl-lb__p,.hw-gl-lb__n{position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  width:46px;height:24px;background:none;border:0;cursor:pointer;padding:0}
.hw-gl-lb__p{left:50px}
.hw-gl-lb__n{right:50px}
.hw-gl-lb__p::before,.hw-gl-lb__n::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(#EFEAE4,#EFEAE4) no-repeat right center/calc(100% - .5px) 1px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M3.68 .5 .5 3.68 3.68 6.86' fill='none' stroke='%23EFEAE4' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/4.18px 7.36px}
.hw-gl-lb__n::before{transform:scaleX(-1)}
.hw-gl-lb__p:hover,.hw-gl-lb__n:hover{opacity:.7}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-gl{padding-top:130px !important;padding-bottom:90px !important}
  .hw-gl-h1 p,.hw-gl-h1.hw-gl-h1 h1{font-size:40px;line-height:48px}
  .hw-gl-intro p{font-size:17px;line-height:31px}
  .hw-gl-intro{margin-top:22px !important}
  .hw-gl-filters{column-gap:18px;margin-top:44px}
  .hw-gl-filters__i{font-size:12px;letter-spacing:1.56px;line-height:26px}
  .hw-gl-filters__i::after{bottom:2px}
  .hw-gl-grid{margin-top:30px}
  .hw-gl-block,.hw-gl-block--a,.hw-gl-block--b{
    grid-template-columns:1fr;grid-template-rows:none;row-gap:12px;margin-bottom:12px}
  .hw-gl-block .hw-gl-i{grid-column:1 !important;grid-row:auto !important}
  .hw-gl-i--big{aspect-ratio:767/523}
  .hw-gl-i--s1,.hw-gl-i--s2{aspect-ratio:373/250}
  .hw-gl-lb__img{max-width:calc(100vw - 40px)}
  .hw-gl-lb__side{display:none !important}
  .hw-gl-lb__p{left:6px}
  .hw-gl-lb__n{right:6px}
  .hw-gl-lb__x.hw-oc__close{top:24px;right:var(--hw-nav-pr,20px)}
}

/* ---------- BugHerd #201 y #202 (25-09) · móvil ---------- */
/* #201 · el marco rojo al tocar una foto: al cerrar la lupa el foco vuelve a
   la foto pulsada (por código), y Safari lo pinta como foco de teclado. En
   pantallas táctiles fuera el contorno; con teclado sigue como estaba. */
@media (hover:none){
  .hw-gl-i:focus,.hw-gl-i:focus-visible,
  .hw-gl-lb button:focus,.hw-gl-lb button:focus-visible{outline:none !important}
}
.hw-gl-lb__swipe{display:none}
/* #202 · la lupa del Figma móvil: tarjeta centrada sobre blanco con franja
   verde de 64 px arriba (Close ✕), foto a todo el ancho y barra «← SWIPE →».
   El JS mete el cerrar en la tarjeta y las flechas en la barra sólo aquí. */
@media (max-width:760px){
  .hw-gl-lb{background:#FFFFFF}
  .hw-gl-lb__f{display:block;width:100vw;position:relative;padding-top:64px;
    background:linear-gradient(var(--awb-color5,#424B0A),var(--awb-color5,#424B0A)) top/100% 64px no-repeat}
  .hw-gl-lb__img{width:100%;max-width:100%;height:auto;max-height:calc(100vh - 64px - 56px - 40px);
    object-fit:contain;margin:0 auto}
  .hw-gl-lb__cap{display:none}
  .hw-gl-lb__f > .hw-gl-lb__x.hw-oc__close{position:absolute;top:0;right:20px;height:64px;
    display:flex;align-items:center;color:var(--awb-color1,#EFEAE4)}
  .hw-gl-lb__swipe{display:flex;align-items:center;justify-content:center;position:relative;height:56px;
    font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;letter-spacing:1.56px;
    text-transform:uppercase;color:var(--awb-color4,#6D7EA0)}
  .hw-gl-lb__swipe .hw-gl-lb__p{left:20px}
  .hw-gl-lb__swipe .hw-gl-lb__n{right:20px}
  .hw-gl-lb__swipe .hw-gl-lb__p::before,.hw-gl-lb__swipe .hw-gl-lb__n::before{
    background:
      linear-gradient(#424B0A,#424B0A) no-repeat right center/calc(100% - .5px) 1px,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M3.68 .5 .5 3.68 3.68 6.86' fill='none' stroke='%23424B0A' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/4.18px 7.36px}
}
/* con la lupa abierta, fuera el sello fijo «Stay in the know» (quedaba encima) */
html.hw-gl-abierta #hw-cw{display:none !important}

/* ==================================================================
   AGENTS & BROKERS (/agents-brokers, página 7498)
   Nodo `15138:15611` del Figma, revisado el 2026-09-04 (frame 1440×3727).
   Bandas: héroe 0-680 · crema 680-1264 · blanco hasta el formulario (2223).
   ================================================================== */
body.page-id-7498 #main{padding-top:0 !important}

.hw-ag-hero,.hw-ag-intro,.hw-ag-out{padding-left:0 !important;padding-right:0 !important}
.hw-ag-hero .fusion-builder-row,.hw-ag-intro .fusion-builder-row,
.hw-ag-out .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-ag-intro .fusion-builder-row,.hw-ag-out .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-ag-hero .fusion-column-wrapper,.hw-ag-intro .fusion-column-wrapper,
.hw-ag-out .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-ag-hero .fusion-layout-column,.hw-ag-intro .fusion-layout-column,
.hw-ag-out .fusion-layout-column{margin-bottom:0 !important}
.hw-ag-links > p:empty,.hw-ag-shot > p:empty,
.hw-ag-out .fusion-text > p:empty{display:none !important;margin:0 !important}
.hw-ag-hero .fusion-text p,.hw-ag-intro .fusion-text p,.hw-ag-out .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
.hw-ag-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-ag-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:189px !important;padding-bottom:0 !important}
.hw-ag-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-ag-hero > *{position:relative;z-index:1}
.hw-ag-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-ag-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-ag-hero__eyebrow{margin-bottom:16px !important}
.hw-ag-hero__title p,.hw-ag-hero__title.hw-ag-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:90px;line-height:86px;letter-spacing:.5px;max-width:760px;
  margin:0 auto !important}
.hw-ag-hero__title{margin-bottom:0 !important}
.hw-ag-hero__rule{margin-bottom:0 !important}
.hw-ag-hero__rule span{display:block;width:1px;height:121px;margin:83px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO Y LOS ENLACES ---------- */
.hw-ag-intro{background:var(--awb-color1,#EFEAE4) !important;
  padding-top:136px !important;padding-bottom:154px !important}
.hw-ag-intro__body p{font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:38px;
  color:var(--awb-color8,#19180C);max-width:768px;margin:0 auto !important}
.hw-ag-intro__body{margin-bottom:44px !important}
/* Los siete enlaces van en dos renglones centrados, con la flecha naranja del
   resto del sitio (`.hw-os-cta`, aquí en versión suelta). */
.hw-ag-links__r{display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:48px;row-gap:0}
.hw-ag-links a{
  display:inline-flex;align-items:center;
  /* BugHerd #23 (2026-09-24, AnneMarie: «still looking incorrect … like the
     Agents & Brokers page»). Iban en versión pequeña (12 px, flecha de 34);
     en el Figma (agents, y=1061/1108) son el `CTA_primary` de siempre:
     Gravitica 15 / 1,95 px, flecha de 46 a 13 px del rótulo, 48 entre enlaces. */
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:1.95px;text-transform:uppercase;white-space:nowrap;line-height:47px;
  color:var(--awb-color7,#E54511);text-decoration:none}
.hw-ag-links a::after{
  content:"";display:inline-block;margin-left:13px;width:46px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat left center/calc(100% - .5px) 1px;
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.hw-ag-links a::after{transition:none}}

/* ---------- 3 · THE OUTFITTERS ---------- */
.hw-ag-out{padding-top:163px !important;padding-bottom:198px !important}
/* 140 → 730 → 1300 en el lienzo: 50,86% + 49,14% */
.hw-ag-out__t{width:50.862% !important;margin-right:0 !important}
.hw-ag-out__m{width:49.138% !important;margin-left:0 !important}
.hw-ag-eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0)}
.hw-ag-eyebrow{margin-bottom:0 !important}
.hw-ag-h2 p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:48px;
  color:var(--awb-color8,#19180C)}
.hw-ag-h2{margin-top:32px !important;margin-bottom:0 !important}
.hw-ag-body p{font-family:calluna,'Lora',Georgia,serif;font-size:16px;line-height:29px;
  color:var(--awb-color8,#19180C);max-width:460px}
.hw-ag-body{margin-top:32px !important;margin-bottom:0 !important}
.hw-ag-cta{margin-top:46px !important}
.hw-ag-shot{width:100%;aspect-ratio:570/598;overflow:hidden}
.hw-ag-shot img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-ag-hero{min-height:520px !important;padding-top:150px !important}
  .hw-ag-hero__title p,.hw-ag-hero__title.hw-ag-hero__title h1{font-size:46px;line-height:52px}
  .hw-ag-hero__rule span{height:70px;margin-top:56px}
  .hw-ag-intro{padding-top:70px !important;padding-bottom:70px !important}
  .hw-ag-intro__body p{font-size:17px;line-height:31px}
  .hw-ag-links__r{column-gap:28px}
  .hw-ag-links a{line-height:38px}
  .hw-ag-out{padding-top:70px !important;padding-bottom:80px !important}
  .hw-ag-out__t,.hw-ag-out__m{width:100% !important}
  .hw-ag-h2 p{font-size:30px;line-height:34px}
  .hw-ag-out__m{margin-top:34px !important}
}

/* ==================================================================
   HOMEBUILDERS (/homebuilders, página 7495)
   Nodo `15103:9094` del Figma, revisado el 2026-09-04 (frame 1440×4405).
   Bandas: héroe 0-680 · crema 680-1312 · blanco hasta el formulario (2901).
   ⚠️ Los originales del Figma vienen cortos (ver el README).
   ================================================================== */
body.page-id-7495 #main{padding-top:0 !important}

.hw-hb-hero,.hw-hb-intro,.hw-hb-list{padding-left:0 !important;padding-right:0 !important}
.hw-hb-hero .fusion-builder-row,.hw-hb-intro .fusion-builder-row,
.hw-hb-list .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-hb-intro .fusion-builder-row,.hw-hb-list .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-hb-hero .fusion-column-wrapper,.hw-hb-intro .fusion-column-wrapper,
.hw-hb-list .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-hb-hero .fusion-layout-column,.hw-hb-intro .fusion-layout-column,
.hw-hb-list .fusion-layout-column{margin-bottom:0 !important}
.hw-hb-cards > p:empty,.hw-hb-list .fusion-text > p:empty{
  display:none !important;margin:0 !important}
.hw-hb-hero .fusion-text p,.hw-hb-intro .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
.hw-hb-hero{
  position:relative;min-height:680px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-hb-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:234px !important;padding-bottom:0 !important}
.hw-hb-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.4)}
.hw-hb-hero > *{position:relative;z-index:1}
.hw-hb-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-hb-hero__eyebrow p{font-family:'Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-hb-hero__eyebrow{margin-bottom:18px !important}
.hw-hb-hero__title p,.hw-hb-hero__title.hw-hb-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:90px;line-height:87px;letter-spacing:.5px;max-width:740px;
  margin:0 auto !important}
.hw-hb-hero__title{margin-bottom:0 !important}
.hw-hb-hero__rule{margin-bottom:0 !important}
.hw-hb-hero__rule span{display:block;width:1px;height:121px;margin:124px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO ---------- */
.hw-hb-intro{background:var(--awb-color1,#EFEAE4) !important;
  padding-top:136px !important;padding-bottom:154px !important}
.hw-hb-intro__body p{font-family:'Lora',Georgia,serif;font-size:20px;line-height:38px;
  color:var(--awb-color8,#19180C);max-width:728px;margin:0 auto !important}

/* ---------- 3 · LAS CONSTRUCTORAS ---------- */
.hw-hb-list{padding-top:146px !important;padding-bottom:187px !important}
.hw-hb-cards{display:grid;grid-template-columns:570px 570px;column-gap:20px;
  row-gap:66px;align-items:start}
.hw-hb-card{margin:0}
.hw-hb-card__ph{width:100%;aspect-ratio:570/334;overflow:hidden;background:#B6C2D0}
.hw-hb-card__ph img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}
/* Toll Brothers no tenía foto: el Figma la dejaba en FPO. El cliente dio su
   LOGOTIPO (2026-09-21), que no es una fotografía y no se puede recortar a lo
   ancho de la tarjeta — quedaría un trozo de letra azul. Va entero y centrado
   sobre crema, como una placa de marca. La regla `--fpo` se queda por si
   alguna otra tarjeta vuelve a quedarse sin foto. */
.hw-hb-card__ph--fpo{display:flex;align-items:center;justify-content:center}
/* La guarda `:not(:has(img))` no es adorno: el rótulo sólo sale si la caja
   está VACÍA de verdad, no sólo si alguien se acordó de poner la clase.
   El 2026-09-21 pasó en /commercial/: se metió una foto, la clase se quedó y
   el "FPO" siguió saliendo. Allí la caja era flex y salió AL LADO; aquí es
   una caja flex, así que habría salido ENCIMA de la foto. */
.hw-hb-card__ph--fpo:not(:has(img))::after{content:"FPO";font-family:'Poppins',sans-serif;
  font-weight:600;font-size:36px;letter-spacing:6px;color:#FFFFFF;opacity:.92}
.hw-hb-card__ph--logo{display:flex;align-items:center;justify-content:center;
  background:var(--awb-color1,#EFEAE4)}
.hw-hb-card__ph--logo img{width:auto !important;height:auto !important;
  max-width:46%;max-height:62%;object-fit:contain !important}
.hw-hb-card__t{font-family:'Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:48px;
  color:var(--awb-color8,#19180C);margin:36px 0 0 !important}
.hw-hb-card__b{font-family:'Lora',Georgia,serif;font-size:16px;line-height:29px;
  color:var(--awb-color8,#19180C);max-width:513px;margin:18px 0 0 !important}
.hw-hb-card__cta{margin-top:32px !important}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-hb-hero{min-height:520px !important;padding-top:170px !important}
  .hw-hb-hero__title p,.hw-hb-hero__title.hw-hb-hero__title h1{font-size:48px;line-height:54px}
  .hw-hb-hero__rule span{height:70px;margin-top:70px}
  .hw-hb-intro{padding-top:70px !important;padding-bottom:70px !important}
  .hw-hb-intro__body p{font-size:17px;line-height:31px}
  .hw-hb-list{padding-top:70px !important;padding-bottom:80px !important}
  .hw-hb-cards{grid-template-columns:1fr;row-gap:48px}
  .hw-hb-card__t{font-size:30px;line-height:34px;margin-top:24px !important}
  .hw-hb-card__ph--fpo:not(:has(img))::after{font-size:26px}
}

/* ==================================================================
   PÁGINAS LEGALES: Terms of Use (2608), Privacy Policy (6553) y
   Accessibility Policy (3078)
   NO están en el Figma: se montan con el vocabulario del sitio — héroe con
   foto, texto centrado a 768 y mucho aire. Los apartados y el índice los
   arma `hw-legal.js` a partir del texto tal cual está en WordPress.
   ================================================================== */
body.hw-legal #main{padding-top:0 !important}

.hw-lg-hero,.hw-lg-body{padding-left:0 !important;padding-right:0 !important}
.hw-lg-hero .fusion-builder-row,.hw-lg-body .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-lg-body .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-lg-hero .fusion-column-wrapper,.hw-lg-body .fusion-column-wrapper{
  margin-left:0 !important;margin-right:0 !important}
.hw-lg-hero .fusion-layout-column,.hw-lg-body .fusion-layout-column{
  margin-bottom:0 !important}
.hw-lg-hero .fusion-text p{margin:0}
.hw-lg-body .fusion-text > p:empty{display:none !important;margin:0 !important}

/* ---------- héroe ---------- */
/* Más bajo que el de las L3 (460 en vez de 680): son páginas de leer, no de
   enseñar. */
.hw-lg-hero{
  position:relative;min-height:460px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-lg-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:214px !important;padding-bottom:0 !important}
.hw-lg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.45)}
.hw-lg-hero > *{position:relative;z-index:1}
.hw-lg-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-lg-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-lg-hero__eyebrow{margin-bottom:18px !important}
.hw-lg-hero__title p,.hw-lg-hero__title.hw-lg-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:64px;line-height:70px;letter-spacing:.5px;max-width:900px;
  margin:0 auto !important}
.hw-lg-hero__title{margin-bottom:0 !important}

/* ---------- el documento ---------- */
.hw-lg-body{background:#FFFFFF !important;
  padding-top:110px !important;padding-bottom:150px !important}
.hw-lg-doc{max-width:768px;margin:0 auto}
.hw-lg-doc p,.hw-lg-doc li{font-family:calluna,'Lora',Georgia,serif;font-size:16px;
  line-height:31px;color:var(--awb-color8,#19180C)}
.hw-lg-doc p{margin:0 0 22px}
.hw-lg-doc a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-lg-doc a:hover{color:var(--awb-color7,#E54511)}
.hw-lg-doc img{max-width:100%;height:auto;display:block;margin:0 auto 30px}
.hw-lg-doc ul,.hw-lg-doc ol{margin:0 0 22px;padding-left:22px}
.hw-lg-doc li{margin-bottom:8px}
/* (El <h2> del título original lo quita `apply-legal.php`, no el CSS: ocultar
   el primer h2 por CSS se comía el logo de Raydient de la página de
   accesibilidad, que también viene dentro de un h2.) */

/* Cada apartado, con aire de sobra entre uno y otro. */
.hw-lg-sec{padding-top:58px;scroll-margin-top:120px}
.hw-lg-sec:first-child{padding-top:0}
.hw-lg-sec__t{font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:15px !important;letter-spacing:1.6px !important;
  text-transform:uppercase !important;
  line-height:24px !important;color:var(--awb-color5,#424B0A) !important;
  margin:0 0 20px !important;text-align:left}

/* ---------- el índice ---------- */
/* EL ÍNDICE — rehecho 2026-09-11.
   Lo que había: once enlaces en MAYÚSCULAS, con `white-space:nowrap` y dos
   píxeles de interletraje, cada uno arrastrando una flecha de 26px que crecía
   a 46 al pasar por encima, todos en una fila que se partía con `row-gap:0`.
   Once nombres largos así no son un índice: son un muro. Y la flecha
   creciente, multiplicada por once, es puro ruido — el gesto está pensado para
   UN enlace de llamada a la acción, no para una lista.
   Lo que hay ahora es el vocabulario que la página de FAQ ya usa y que
   funciona: filas apiladas separadas por el mismo filete `#D4D6D7`, en dos
   columnas cuando hay sitio, alineadas a la izquierda para que el ojo baje por
   una vertical. Sin flechas que crecen: el que se está leyendo se marca con el
   color y con un filete a la izquierda, que es más callado y se ve mejor. */
/* BugHerd #135 (2026-09-24): el índice iba a 900 y el texto a 768; mismos
   márgenes que el documento. */
.hw-lg-idx{max-width:768px;margin:0 auto 84px;text-align:left}
.hw-lg-idx__k{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:30px;
  color:var(--awb-color4,#6D7EA0);margin:0 0 6px}
/* Dos columnas: once filas en una sola columna obligan a bajar demasiado antes
   de llegar al documento. `column-fill:balance` las reparte 6/5. */
.hw-lg-idx__l{columns:2;column-gap:56px;border-top:1px solid #D4D6D7}
.hw-lg-idx__l a{
  display:block;break-inside:avoid;
  padding:11px 0 11px 14px;
  border-bottom:1px solid #D4D6D7;
  border-left:2px solid transparent;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.6px;text-transform:none;line-height:1.35;
  color:var(--awb-color8,#19180C);text-decoration:none;
  transition:color .2s ease,border-left-color .2s ease}
.hw-lg-idx__l a:hover,.hw-lg-idx__l a:focus-visible{
  color:var(--awb-color7,#E54511);border-left-color:var(--awb-color7,#E54511)}
/* El apartado que se está leyendo. Lo marca el IntersectionObserver de
   `hw-legal.js`; aquí sólo se pinta. */
.hw-lg-idx__a{
  color:var(--awb-color7,#E54511) !important;
  border-left-color:var(--awb-color7,#E54511) !important}
@media(prefers-reduced-motion:reduce){.hw-lg-idx__l a{transition:none}}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  /* Dos columnas de 12px en un móvil son dos columnas ilegibles. */
  .hw-lg-idx__l{columns:1}
  .hw-lg-hero{min-height:340px !important;padding-top:150px !important}
  .hw-lg-hero__title p,.hw-lg-hero__title.hw-lg-hero__title h1{font-size:38px;line-height:44px}
  .hw-lg-body{padding-top:60px !important;padding-bottom:80px !important}
  .hw-lg-idx{margin-bottom:52px}
  .hw-lg-sec{padding-top:42px}
  .hw-lg-doc p,.hw-lg-doc li{font-size:15px;line-height:29px}
}

/* ==================================================================
   PÁGINAS DE CONSTRUCTORA: Centex Homes (7496), Del Webb Savannah,
   Pulte Homes y Toll Brothers
   Nodo `15103:9745` del Figma (Centex, frame 1440×5851). Las otras tres NO
   están en el Figma: misma plantilla, sus datos.
   Bandas: héroe 0-680 · crema 680-1452 · blanco hasta el formulario (4347).
   Los cuadros los pinta [hw_builder_tiles].
   ================================================================== */
body.hw-builder #main{padding-top:0 !important}

.hw-bd-hero,.hw-bd-intro,.hw-bd-sec{padding-left:0 !important;padding-right:0 !important}
.hw-bd-hero .fusion-builder-row,.hw-bd-intro .fusion-builder-row,
.hw-bd-sec .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-bd-intro .fusion-builder-row,.hw-bd-sec .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-bd-hero .fusion-column-wrapper,.hw-bd-intro .fusion-column-wrapper,
.hw-bd-sec .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-bd-hero .fusion-layout-column,.hw-bd-intro .fusion-layout-column,
.hw-bd-sec .fusion-layout-column{margin-bottom:0 !important}
.hw-bd-grid > p:empty,.hw-bd-modelo > p:empty,
.hw-bd-sec .fusion-text > p:empty,.hw-bd-intro .fusion-text > p:empty{
  display:none !important;margin:0 !important}
.hw-bd-hero .fusion-text p,.hw-bd-intro .fusion-text p,.hw-bd-sec .fusion-text p{margin:0}

/* ---------- 1 · HÉROE ---------- */
.hw-bd-hero{
  position:relative;min-height:680px !important;background:#2E3213;
  background-size:cover !important;background-position:center !important;
  background-repeat:no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:234px !important;padding-bottom:0 !important}
.hw-bd-hero--centex {background-image:url('/wp-content/uploads/2026/09/hw-bd-hero-centex.webp') !important}
.hw-bd-hero--delwebb{background-image:url('/wp-content/uploads/2026/09/hw-bd-hero-delwebb.webp') !important}
.hw-bd-hero--pulte  {background-image:url('/wp-content/uploads/2026/09/hw-bd-hero-pulte.webp') !important}
.hw-bd-hero--toll   {background-image:url('/wp-content/uploads/2026/09/hw-bd-hero-toll.webp') !important}
.hw-bd-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.42)}
.hw-bd-hero > *{position:relative;z-index:1}
.hw-bd-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-bd-hero__eyebrow p{font-family:'Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-bd-hero__eyebrow{margin-bottom:18px !important}
.hw-bd-hero__title p{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:90px;line-height:87px;letter-spacing:.5px;max-width:760px;
  margin:0 auto !important}
.hw-bd-hero__title{margin-bottom:0 !important}
.hw-bd-hero__rule{margin-bottom:0 !important}
.hw-bd-hero__rule span{display:block;width:1px;height:121px;margin:124px auto 0;
  background:var(--awb-color1,#EFEAE4);opacity:.85}

/* ---------- 2 · INTRO, FICHA Y CASETA ---------- */
.hw-bd-intro{background:var(--awb-color1,#EFEAE4) !important;
  padding-top:136px !important;padding-bottom:107px !important}
.hw-bd-intro__body p{font-family:'Lora',Georgia,serif;font-size:20px;line-height:38px;
  color:var(--awb-color8,#19180C);max-width:728px;margin:0 auto !important}
/* BugHerd #155 (2026-09-24): «font sizing is too small here». Va al tamaño
   GRANDE de este tipo (Gravitica 15 / 1,95 px, el de CTA y antetítulos; Alex
   en #153). El cero sin barra de #151 lo pone la fuente, no esta regla. */
.hw-bd-specs p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:1.95px;text-transform:uppercase;line-height:27px;
  color:var(--awb-color4,#6D7EA0);margin:0 auto !important}
.hw-bd-specs{margin-top:45px !important}
.hw-bd-modelo{text-align:center;margin-top:45px}
.hw-bd-modelo__k{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color5,#424B0A);margin:0 0 12px !important}
.hw-bd-modelo__d{font-family:'Lora',Georgia,serif;font-size:16px;line-height:28px;
  color:var(--awb-color8,#19180C);margin:0 !important}
.hw-bd-modelo__d a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-bd-modelo__d a:hover{color:var(--awb-color7,#E54511)}
.hw-bd-modelo__tel{text-decoration:none !important}
.hw-bd-modelo__sep{display:inline-block;margin:0 10px;color:#B9B2A6}

/* ---------- 3 · FLOORPLANS Y QUICK MOVE-INS ---------- */
/* 140 → 534 → 1300: la columna del rótulo mide 394 y la rejilla 766. */
.hw-bd-sec{padding-top:124px !important;padding-bottom:0 !important}
.hw-bd-sec--qmi{padding-top:154px !important;padding-bottom:215px !important}
.hw-bd-sec__t{width:33.966% !important;margin-right:0 !important;padding-right:60px}
.hw-bd-sec__g{width:66.034% !important;margin-left:0 !important}
.hw-bd-h2 p{font-family:'Poppins',sans-serif;font-weight:600;font-size:44px;
  letter-spacing:1px;text-transform:uppercase;line-height:48px;
  color:var(--awb-color8,#19180C)}
.hw-bd-h2{margin-bottom:0 !important}
.hw-bd-sub p{font-family:'Lora',Georgia,serif;font-size:16px;line-height:29px;
  color:var(--awb-color8,#19180C)}
.hw-bd-sub{margin-top:13px !important}
.hw-bd-cta{margin-top:31px !important}

/* la rejilla de cuadros: dos columnas de 333 con calle de 100 */
.hw-bd-grid{display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:100px;row-gap:32px;align-items:start}
.hw-bd-t{margin:0}
.hw-bd-t__ph{position:relative;width:100%;aspect-ratio:333/220;overflow:hidden;
  background:#B6C2D0}
.hw-bd-t__ph img{display:block;width:100%;height:100%;object-fit:cover;margin:0 !important}
/* La guarda `:not(:has(img))` no es adorno: el rótulo sólo sale si la caja
   está VACÍA de verdad, no sólo si alguien se acordó de poner la clase.
   El 2026-09-21 pasó en /commercial/: se metió una foto, la clase se quedó y
   el "FPO" siguió saliendo. Allí la caja era flex y salió AL LADO; aquí es
   absoluto a `inset:0`, así que habría salido ENCIMA de la foto. */
.hw-bd-t__ph--fpo:not(:has(img))::after{content:"FPO";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:26px;letter-spacing:5px;
  color:#FFFFFF;opacity:.92}
/* Una ficha de verdad a la que PIPSY no le da foto no es un "FPO" (foto puesta
   a falta de licencia): es un hueco del dato. Se dice. */
.hw-bd-t__ph--fpo[data-hw-pendiente]:not(:has(img))::after{content:"NO PHOTO";
  font-size:17px;letter-spacing:3.4px}
/* ---------- el corazón de guardar ----------
   Guarda en `localStorage` y ya: este sitio no tiene cuentas. Lo maneja
   `hw-favorites.js`; en los marcadores sigue siendo un <span> decorativo, y
   por eso las reglas de estado cuelgan de `button`.
   El corazón lleno usa el mismo naranja de marca que los CTA. */
.hw-bd-t__like{position:absolute;top:10px;right:10px;width:27px;height:27px;
  border:0;padding:0;border-radius:50%;background:#FFFFFF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 24 22' fill='none' stroke='%2319180C' stroke-width='1.6'%3E%3Cpath d='M12 20.5 3.6 12A5 5 0 0 1 12 5.6 5 5 0 0 1 20.4 12Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
  box-shadow:0 1px 3px rgba(25,24,12,.18)}
button.hw-bd-t__like{cursor:pointer;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease}
/* El corazón del diseño mide 27 px: con el dedo se falla. El área que
   responde se estira a 45×45 con un pseudo transparente, sin tocar lo que se
   ve. (El ::after de esta caja es el rótulo "NO PHOTO" y cuelga de `__ph`, no
   de aquí, así que no hay choque.) */
button.hw-bd-t__like::before{content:"";position:absolute;inset:-9px}
button.hw-bd-t__like:hover{transform:scale(1.12);
  box-shadow:0 2px 7px rgba(25,24,12,.26)}
button.hw-bd-t__like:focus-visible{outline:2px solid var(--awb-color7,#E54511);
  outline-offset:2px}
button.hw-bd-t__like[aria-pressed="true"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 24 22' fill='%23E54511'%3E%3Cpath d='M12 20.5 3.6 12A5 5 0 0 1 12 5.6 5 5 0 0 1 20.4 12Z'/%3E%3C/svg%3E")}
/* Un guiño al guardar, que es lo que hace que se note que ha pasado algo.
   Va en una clase que pone el JS al PULSAR, no en `aria-pressed`: si colgara
   del estado, al recargar la página con tres favoritos guardados los tres
   corazones darían un brinco sin que nadie haya tocado nada. */
@keyframes hw-bd-late{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
button.hw-bd-t__like.hw-late{animation:hw-bd-late .32s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){
  button.hw-bd-t__like,button.hw-bd-t__like.hw-late{transition:none;animation:none}
  button.hw-bd-t__like:hover{transform:none}}

/* ---------- ver sólo los guardados ----------
   El interruptor lo inyecta el JS en la columna del rótulo, debajo del CTA, y
   sólo cuando esa rejilla tiene algún favorito: un control que no filtra nada
   sobra. */
/* El relleno vertical es el área que responde al dedo: el texto solo mide
   17 px de alto. Los 13 px de arriba se le restan al margen para que quede
   donde estaba. */
.hw-bd-fav{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;
  margin-top:9px;padding:13px 0;border:0;background:none;cursor:pointer;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:1.8px;text-transform:uppercase;white-space:nowrap;
  color:var(--awb-color8,#19180C)}
.hw-bd-fav[hidden]{display:none}
.hw-bd-fav__i{width:15px;height:14px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 24 22' fill='%23E54511'%3E%3Cpath d='M12 20.5 3.6 12A5 5 0 0 1 12 5.6 5 5 0 0 1 20.4 12Z'/%3E%3C/svg%3E") no-repeat center/contain}
.hw-bd-fav__t{border-bottom:1.4px solid transparent;padding-bottom:2px;
  transition:border-color .2s ease}
.hw-bd-fav:hover .hw-bd-fav__t,.hw-bd-fav:focus-visible .hw-bd-fav__t{
  border-bottom-color:var(--awb-color7,#E54511)}
.hw-bd-fav:focus-visible{outline:2px solid var(--awb-color7,#E54511);
  outline-offset:4px}
.hw-bd-fav[aria-pressed="true"]{color:var(--awb-color7,#E54511)}
.hw-bd-grid--solo-fav .hw-bd-t:not(.is-fav){display:none}
.hw-bd-t__n{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:22px;line-height:28px;color:var(--awb-color8,#19180C);
  margin:16px 0 0 !important}
.hw-bd-t__n a{color:inherit;text-decoration:none}
.hw-bd-t__n a:hover{color:var(--awb-color7,#E54511)}
/* La tarjeta ENTERA lleva a su ficha en Find a Home (BugHerd #76), no sólo el
   nombre: el enlace del título se estira sobre la tarjeta con un ::after, que
   deja un solo <a> para el lector de pantalla y el tabulador. El corazón
   queda por encima y sigue guardando sin navegar. */
.hw-bd-t{position:relative}
.hw-bd-t__n a::after{content:"";position:absolute;inset:0;z-index:1}
.hw-bd-t__like{z-index:2}
.hw-bd-t:has(.hw-bd-t__n a):hover .hw-bd-t__n a{color:var(--awb-color7,#E54511)}
/* Segunda línea de las casas disponibles: la calle y cuándo se entra. No está
   en el Figma —dejó la tarjeta en lorem ipsum— pero una casa terminada se
   identifica por su dirección, no por el nombre de su plano, y dos casas del
   mismo plano salían idénticas. Va en la rejilla de QMI, donde TODAS las
   fichas la llevan, así que no descuadra las alturas. */
.hw-bd-t__sub{font-family:'Poppins',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:1.2px;text-transform:uppercase;line-height:16px;
  color:#8C8577;margin:5px 0 0 !important}
.hw-bd-t__sub + .hw-bd-t__p{margin-top:4px !important}
.hw-bd-t__p{font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:1.4px;line-height:26px;color:var(--awb-color4,#6D7EA0);
  margin:1px 0 0 !important}
/* La ficha de datos: dos filas de dos, con las rayas del diseño. */
.hw-bd-t__s{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;
  border-top:1px solid #DCD6CE;border-bottom:1px solid #DCD6CE}
.hw-bd-t__c{display:flex;align-items:center;gap:5px;min-height:39px;padding:0 6px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--awb-color8,#19180C)}
.hw-bd-t__c:nth-child(2n){box-shadow:inset 1px 0 0 0 #DCD6CE}
.hw-bd-t__c:nth-child(n+3){box-shadow:inset 0 1px 0 0 #DCD6CE}
.hw-bd-t__c:nth-child(4){box-shadow:inset 1px 0 0 0 #DCD6CE, inset 0 1px 0 0 #DCD6CE}
.hw-bd-t__i{flex:0 0 auto;color:#9AA3AC}
/* Mientras son marcadores, se ven algo más apagados: que no parezcan datos. */
.hw-bd-grid--muestra .hw-bd-t__n,.hw-bd-grid--muestra .hw-bd-t__p,
.hw-bd-grid--muestra .hw-bd-t__c{opacity:.55}

/* #53 · La línea del héroe tiene que llegar al borde inferior de la foto.
   `.hw-bd-hero` tiene `min-height:680px` y la línea mide 121 px fijos: con
   titular de DOS líneas el contenido llega a 694 y la línea toca sola, pero
   con titular de UNA (Toll, «Room to roam») se queda en 608 y sobran 72 px de
   relleno. Medido el 2026-09-22: Centex/Pulte/Del Webb 0, Toll 72.

   Se deja que la línea CREZCA hasta el fondo en vez de tocar la altura del
   héroe. Claves:
   · `flex:1 0 auto` (crecer sí, encoger NO). Con `1 1 auto` las tres buenas
     se comprimían de 694 a 680 y la línea de 121 a 107 — y Centex es la
     referencia del Figma, así que eso era una regresión.
   · `flex-direction:column`, porque en fila el span se estiraba a 1440 px de
     ancho y la línea visible la pinta su `::before` de 1 px.
   · `min-height:121px` conserva la medida del Figma cuando no hay holgura.
   Sólo en escritorio: a ≤1023 px la línea mide 70 px por diseño. */
@media (min-width:1024px){
  .hw-bd-hero .fusion-builder-row > .fusion-layout-column{align-self:stretch}
  .hw-bd-hero .fusion-column-wrapper{flex:1 0 auto}
  .hw-bd-hero__rule{flex:1 0 auto;display:flex;flex-direction:column}
  .hw-bd-hero__rule p{flex:1 0 auto;display:flex;flex-direction:column;
    align-items:center;margin:0}
  .hw-bd-hero__rule span{height:auto !important;min-height:121px;flex:1 0 auto;
    margin:124px 0 0}
}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-bd-hero{min-height:520px !important;padding-top:170px !important}
  .hw-bd-hero__title p{font-size:46px;line-height:52px}
  .hw-bd-hero__rule span{height:70px;margin-top:70px}
  .hw-bd-intro{padding-top:70px !important;padding-bottom:60px !important}
  .hw-bd-intro__body p{font-size:17px;line-height:31px}
  .hw-bd-sec,.hw-bd-sec--qmi{padding-top:70px !important}
  .hw-bd-sec--qmi{padding-bottom:80px !important}
  .hw-bd-sec__t,.hw-bd-sec__g{width:100% !important;padding-right:0}
  .hw-bd-h2 p{font-size:30px;line-height:34px}
  .hw-bd-sec__g{margin-top:34px !important}
  .hw-bd-grid{grid-template-columns:1fr;column-gap:0;row-gap:34px}
}
@media (min-width:1024px) and (max-width:1279px){
  .hw-bd-grid{column-gap:44px}
}
/* La rejilla se partía en UNA columna en todo lo que baja de 1024, y en una
   tableta de 768-1023 eso dejaba tarjetas de 688-943 px con fotos de 455-623
   de alto: seis de ésas son casi 5.000 px de scroll. Las dos columnas
   aguantan perfectamente hasta los 640; por debajo, una. */
@media (min-width:640px) and (max-width:1023px){
  /* El tope evita el otro extremo: a 1023, sin él, las tarjetas se iban a 456
     y al pasar a 1024 caían de golpe a 290. */
  .hw-bd-grid{grid-template-columns:repeat(2,1fr);column-gap:32px;row-gap:34px;
    max-width:760px}
}

/* ==================================================================
   FAQ (/faq, página 7497)
   Nodo `14340:3955` del Figma, revisado el 2026-09-04 (frame 1440×5334).
   Toda la página va sobre crema (0-3855). Un acordeón por categoría.
   El contenido lo pinta [hw_faq] desde `faq-data.php` del child theme.
   ================================================================== */
body.page-id-7497 #main{padding-top:0 !important}

.hw-fq{padding-left:0 !important;padding-right:0 !important;
  padding-top:183px !important;padding-bottom:395px !important;
  background:var(--awb-color1,#EFEAE4) !important}
.hw-fq .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-fq .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
.hw-fq .fusion-layout-column{margin-bottom:0 !important}
.hw-fq .fusion-text p{margin:0}
.hw-fq-body > p:empty,.hw-fq .fusion-text > p:empty{display:none !important;margin:0 !important}

/* ---------- cabecera ---------- */
.hw-fq-eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color5,#424B0A)}
.hw-fq-eyebrow{margin-bottom:20px !important}
.hw-fq-h1 p,.hw-fq-h1.hw-fq-h1 h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:80px;line-height:86px;color:var(--awb-color5,#424B0A)}
.hw-fq-h1{margin-bottom:0 !important}
.hw-fq-intro p{font-family:calluna,'Lora',Georgia,serif;font-size:20px;line-height:38px;
  color:var(--awb-color8,#19180C);max-width:660px;margin:0 auto !important}
.hw-fq-intro a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-fq-intro a:hover{color:var(--awb-color7,#E54511)}
.hw-fq-intro{margin-top:35px !important;margin-bottom:0 !important}

/* ---------- categorías ---------- */
.hw-fq-cat{margin-top:114px}
.hw-fq-cat:first-child{margin-top:103px}
.hw-fq-cat__k{
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  /* BugHerd #153 (2026-09-24): Alex — hay dos tamaños para este tipo y va el
     GRANDE, el de los CTA y antetítulos (Gravitica 15 / 1,95 px). Iba a 11. */
  font-size:15px !important;letter-spacing:1.95px !important;
  text-transform:uppercase !important;
  line-height:30px !important;color:var(--awb-color4,#6D7EA0) !important;
  margin:0 !important}

/* ---------- el acordeón ---------- */
/* <details>/<summary> nativos: se abren con el teclado, sin JavaScript, y el
   navegador los encuentra con Ctrl+F aunque estén cerrados. */
.hw-fq-i{border-top:1px solid #D4D6D7}
.hw-fq-list .hw-fq-i:last-child{border-bottom:1px solid #D4D6D7}
.hw-fq-q{
  position:relative;display:block;cursor:pointer;list-style:none;
  padding:25px 60px 25px 0;
  font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;font-size:22px;
  line-height:28px;color:var(--awb-color8,#19180C)}
.hw-fq-q::-webkit-details-marker{display:none}
.hw-fq-q:hover{color:var(--awb-color7,#E54511)}
.hw-fq-q:focus-visible{outline:2px solid var(--awb-color7,#E54511);outline-offset:3px}
/* El más y el menos del diseño: dos rayas de 24px, y al abrir se va la vertical. */
.hw-fq-q::before,.hw-fq-q::after{
  content:"";position:absolute;right:0;top:38px;background:currentColor;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s}
.hw-fq-q::before{width:24px;height:1px;margin-top:-0.5px}
.hw-fq-q::after{width:1px;height:24px;margin-right:11.5px;margin-top:-12px;right:0}
.hw-fq-i[open] .hw-fq-q::after{transform:rotate(90deg);opacity:0}
/* BugHerd #125 (2026-09-24): abierta, la respuesta va pegada a la pregunta
   como en el Figma (~10 px); los 25 px de abajo sólo tienen sentido cerrada. */
.hw-fq-i[open] > .hw-fq-q{padding-bottom:8px}
.hw-fq-a{padding:0 60px 25px 0;max-width:1024px}
.hw-fq-a p{font-family:calluna,'Lora',Georgia,serif !important;font-size:15px !important;
  line-height:29px !important;color:var(--awb-color8,#19180C) !important;
  margin:0 0 14px !important}
.hw-fq-a p:last-child{margin-bottom:0 !important}
.hw-fq-a a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-fq-a a:hover{color:var(--awb-color7,#E54511)}
.hw-fq-a b{font-weight:400;color:var(--awb-color5,#424B0A)}
.hw-fq-vacio{font-family:calluna,'Lora',Georgia,serif;font-size:16px;text-align:center;
  margin-top:100px !important}
@media(prefers-reduced-motion:reduce){
  .hw-fq-q::before,.hw-fq-q::after{transition:none}}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-fq{padding-top:130px !important;padding-bottom:90px !important}
  .hw-fq-h1 p,.hw-fq-h1.hw-fq-h1 h1{font-size:44px;line-height:50px}
  .hw-fq-intro p{font-size:17px;line-height:31px}
  .hw-fq-intro{margin-top:22px !important}
  .hw-fq-cat,.hw-fq-cat:first-child{margin-top:56px}
  .hw-fq-q{font-size:18px;line-height:25px;padding:20px 44px 20px 0}
  .hw-fq-q::before,.hw-fq-q::after{top:32px}
  .hw-fq-q::before{width:18px}
  .hw-fq-q::after{height:18px;margin-right:8.5px;margin-top:-9px}
  .hw-fq-a{padding:0 44px 20px 0}
}

/* ==================================================================
   HOME EN MÓVIL — intro y collage (nodo `14014:612` "Home - Mobile")
   Lienzo del Figma: 393 × 10593. Revisado el 2026-09-08.

   Las dos secciones de arriba de la home NO tenían versión móvil:

   · `.hw-introwrap` conservaba el `padding` de escritorio (230 px a cada
     lado) en una pantalla de 375 → ancho de contenido CERO, el párrafo
     salía a una palabra por línea y la sección medía 1843 px de alto.

   · `.hw-scatter` es un lienzo de proporción fija con todo colocado en
     absoluto por porcentajes. Las fotos escalan; el texto NO. A 375 px
     los bloques de texto quedaban de 66-83 px de ancho y hasta 672 de
     alto: nueve solapamientos y tres cajas cayendo encima de "Come on
     down".

   El Figma no lo resuelve apilando: recompone el mismo collage en un
   lienzo vertical propio de 393 × 1575. Aquí van esas coordenadas,
   pasadas a porcentaje sobre ese lienzo.

   No hay comp de tablet. De 393 a 900 se usa el mismo montaje, con la
   sección topada a 560 px y centrada para que no se estire hasta un
   lienzo absurdo de tres mil y pico de alto.
   ================================================================== */
@media(max-width:900px){

  /* ---------- "Deep in the coastal woodlands…" ----------
     Figma: texto de 277 de ancho centrado en 393 → 14.76 % a cada lado.
     Tipografía `messaging_large`: 28 px / 1.7 / +0.56 px, centrado.
     El padding hay que ganárselo con !important: Avada lo trae en un
     `--awb-padding-left` en línea y su hoja se imprime DESPUÉS. */
  .hw-introwrap{
    padding-top:60px !important;padding-bottom:50px !important;
    padding-left:14.76% !important;padding-right:14.76% !important}
  /* El comp usa Juana, que sólo tiene licencia de escritorio; aquí corre
     Playfair Display, más ancha: el mismo párrafo pasa de 7 a 10 líneas.
     Se compensa apretando la interlínea, si no la caja mide 476 px. */
  .hw-introwrap .hw-intro,
  .hw-introwrap .hw-intro .fusion-title-heading{
    font-size:28px !important;line-height:1.45 !important;
    letter-spacing:0.56px !important;text-align:center !important}

  /* ---------- el collage ----------
     Lienzo 393 × 1575 (de la foto del comedor a la marca H).
     left = x/393 · top = (y−1180)/1575 · width = w/393

     OJO con QUIÉN es el lienzo: el preámbulo pone `position:relative` en
     la COLUMNA, así que los porcentajes de los hijos absolutos se
     resuelven contra ella, no contra la sección. La proporción va ahí.
     Y la sección tiene que perder su padding de 30 px o el lienzo mide
     315 en vez de 375 y todo sale un 20 % pequeño. */
  .hw-scatter{
    aspect-ratio:auto;height:auto !important;
    padding-left:0 !important;padding-right:0 !important}
  .hw-scatter .fusion-row{
    width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important}
  /* BugHerd #178 (25-09): EN MÓVIL EL COLLAGE YA NO ES UN LIENZO ABSOLUTO.
     Con todo colocado en % sobre un lienzo de 393×1575, el texto sólo cabía
     con la fuente exacta con la que se midió. En el iPhone de Strada (Calluna
     real, más ancha que la de sustitución) los párrafos crecían y se montaban
     encima de las fotos y de otros párrafos. Ahora es una REJILLA de 24
     columnas en flujo: cada pieza ocupa las columnas que el Figma le da
     (col = x/393·24) y las filas crecen con su contenido, así que un párrafo
     más largo empuja lo de abajo en vez de pisarlo. Sólo los dos dibujos de
     línea (pinos y magnolia) siguen en absoluto, detrás de todo.
     Respaldo del montaje anterior: home-mobile.css.pre-bh178-20260925. */
  .hw-scatter .fusion-layout-column{
    width:100% !important;max-width:520px !important;margin:0 auto !important;
    padding:0 !important;height:auto !important;aspect-ratio:auto !important}
  .hw-scatter .fusion-column-wrapper{
    display:grid !important;grid-template-columns:repeat(24,minmax(0,1fr));
    row-gap:32px !important;column-gap:0 !important;align-items:start;
    width:100% !important;height:auto !important;min-height:0 !important;
    padding:30px 0 44px !important;margin:0 !important}
  /* Avada envuelve cada imagen en un `div.fusion-image-element`: sin esto el
     hijo de la rejilla es el envoltorio y no la foto (salían todas en la
     esquina de arriba, a 20 px). */
  .hw-scatter .fusion-column-wrapper > .fusion-image-element{display:contents !important}
  .hw-scatter :is(.s-dining,.s-vibe,.s-drive,.s-mandrink,.s-aerial,.s-trails,
    .s-sprinkler,.s-twowomen,.s-fresh,.s-cta,.s-hmark){
    position:relative !important;left:auto !important;top:auto !important;
    width:auto !important;margin:0 !important;transform:none !important}
  .hw-scatter .s-dining   {grid-row:1;grid-column:3 / 12}
  .hw-scatter .s-vibe     {grid-row:1;grid-column:14 / 23;align-self:center}
  .hw-scatter .s-drive    {grid-row:2;grid-column:3 / 16}
  .hw-scatter .s-mandrink {grid-row:2;grid-column:17 / 24;align-self:center}
  .hw-scatter .s-aerial   {grid-row:3;grid-column:3 / 13}
  .hw-scatter .s-trails   {grid-row:4;grid-column:10 / 23}
  .hw-scatter .s-sprinkler{grid-row:5;grid-column:6 / 23}
  .hw-scatter .s-twowomen {grid-row:6;grid-column:6 / 20}
  .hw-scatter .s-fresh    {grid-row:7;grid-column:4 / 22}
  .hw-scatter .s-cta      {grid-row:8;grid-column:1 / -1;justify-self:center}
  .hw-scatter .s-hmark    {grid-row:9;grid-column:1 / -1;justify-self:center;width:27px !important;aspect-ratio:1}
  /* los dibujos, detrás y en absoluto contra la columna (que ahora mide lo
     que mida el contenido) */
  .s-trees    {left:-7.38% !important;top:12.5% !important;width:40.66% !important}
  .s-magnolia {left:60.15% !important;top:42%   !important;width:82.85% !important}

  /* En el móvil los textos del collage van alineados a la izquierda salvo
     los dos últimos, que el Figma centra sobre el CTA. */
  .s-fresh,.s-fresh p,.s-cta,.s-cta p{text-align:center !important}

  .s-trees,.s-magnolia{z-index:0 !important}
  .s-vibe,.s-drive,.s-trails,.s-fresh,.s-cta{z-index:2 !important}

  /* ---------- SCHOOLS: la niña, dentro del marco ----------
     `.s2-checks` (el marco a cuadros) y `.s2-girl` son dos imágenes
     hermanas: en escritorio se superponen por coordenadas absolutas, pero
     el reset de móvil las apila y la foto caía DEBAJO del marco. El marco
     pasa a ser el fondo de la foto, con el encaje del comp (nodo
     `14030:730`: marco 333×349, foto 231×230 → 15.3 % a los lados y
     17.2 % arriba y abajo). */
  .hw-schools .s2-checks{display:none !important}
  .hw-schools .s2-girl{
    box-sizing:border-box !important;width:100% !important;
    padding:17.2% 15.3% !important;
    background:url('/wp-content/uploads/2026/07/hw-sch-checks.jpg') center/100% 100% no-repeat !important}
  .hw-schools .s2-girl img{width:100% !important;height:auto !important;aspect-ratio:231/230;object-fit:cover}

  /* ---------- WHAT'S HERE: el titular, encima de la foto ----------
     El envoltorio de columna es `flex/column`, así que basta con el orden.
     (El comp pone la foto primero; esto es una decisión del cliente.) */
  .hw-whatshere .wh-title{order:-1 !important}

  /* ---------- BREAKER: el collage, a escala de móvil ----------
     Las fichas llevan `left/top/width` en píxeles en línea, calculados para
     escritorio: la más ancha mide 578 en una pantalla de 375, y el lienzo
     se corta a 560 cuando el contenido llega a 801 — de ahí las fotos
     cortadas por abajo. En vez de recolocar veinte fichas a mano, se
     escala el conjunto: el lienzo entero (830 de alto, que sí contiene
     todo) reducido al 35 %. La más ancha queda en 202 px, como en el comp
     (nodo `14030:774`, mayor ficha 219×196). */
  .hw-breaker{padding:34px 0 !important}
  .hw-breaker .fusion-layout-column,
  .hw-breaker .fusion-column-wrapper,
  .hw-breaker .fusion-text{
    min-height:0 !important;height:291px !important;position:relative;overflow:hidden}
  .hw-collage-auto{
    position:absolute !important;top:0 !important;left:0 !important;
    width:calc(100% / .35) !important;height:830px !important;
    transform:scale(.35);transform-origin:top left}

  /* ---------- EXPLORE THE LIFE: que se lea el titular ----------
     `.hw-el-banner` lleva `aspect-ratio:1160/560`: a 315 de ancho eso son
     152 de alto, pero su contenido pide 245. Con `overflow:hidden` el
     rótulo se salía de la franja oscura y quedaba crema sobre crema. Se
     deja que lo dimensione el contenido. El comp lo pide casi cuadrado
     (333×369, nodo `14046:886`). */
  .hw-el-banner{aspect-ratio:auto !important;min-height:300px !important}
  .hw-el-inner{padding:40px 24px !important}

  /* ---------- STAY IN THE KNOW: más chico ----------
     El widget se pinta desde `hw-contact-widget.js`, que inyecta su <style>
     después de esta hoja: hace falta !important. Iba a la DERECHA; desde el
     24-09 va abajo a la izquierda en todos los tamaños (Santiago), así que
     aquí sólo queda el tamaño. */
  #hw-cw .hw-cw__badge{width:55px !important;height:55px !important}
}

/* ==========================================================================
   Explore — directorio "What's here"  [hw_directory]
   Medidas del Figma (nodo 15400:13238): rejilla de 3, ficha 373×423, foto
   333×220, pastilla de categoría sobre la foto, y la barra de vistas con
   filete y subrayado en la activa.
   ========================================================================== */

.hw-ex-directory .hw-dir {
	--hw-dir-gap: 20px;
	max-width: 1160px;
	margin: 0 auto;
	text-align: left;
}

/* --------------------------------------------------- barra de vistas */

/* Las pestañas a la izquierda y el filtro a la derecha, en la MISMA línea.
   Antes el filtro eran pastillas en su propia fila; el Figma lo pide como
   desplegable a la derecha, a la altura de "list view / map view". */
/* Aire entre el párrafo de la sección ("…see what's already here") y el filete
   de arriba de la barra. Iban a 1 px: el texto quedaba pegado al conmutador. */
.hw-ex-directory .hw-dir__bar {
	margin-top: 40px;
}

/* #14 · Filete de arriba en River Stone y SIN filete de abajo: en el Figma
   (15381:11884) la única raya inferior es el subrayado de la vista activa. */
.hw-dir__bar {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	/* Arriba, no centrado: el desplegable (15→55) baja más que las
	   pestañas (→45), igual que en el Figma. */
	align-items: flex-start;
	border-top: 1px solid #bac3cb;
}

.hw-dir__views {
	display: flex;
	gap: 15px;
}

.hw-dir__view {
	appearance: none;
	border: 0;
	background: none;
	padding: 14px 0;
	cursor: pointer;
	/* #14 · Los azules de la marca y el `cta_reg` del Figma: Gravitica
	   Demibold 15 / 1.2 con 13 % de interletraje. Activa en Deepwater con su
	   raya de 1 px; la otra en Veranda. Antes, verdes y a 13 px. */
	font-family: 'Gravitica', 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1.95px;
	text-transform: uppercase;
	color: #6d7ea0;
	border-bottom: 1px solid transparent;
	padding: 24px 6px 2px;
}

.hw-dir__view.is-on {
	color: #002942;
	border-bottom-color: #002942;
}

.hw-dir__view:hover { color: #002942; }

/* El <select> nativo va encima y transparente: se queda con el teclado, el
   foco y el comportamiento en móvil, y el aspecto lo pone la etiqueta. */
/* #13 · «Filter by:» + el desplegable del Figma (15400:13373): 244×40,
   filete River Stone, radio 2, rótulo en Gravitica Demibold 12 con 13 % de
   interletraje en Deepwater, y la flecha de marca girada hacia abajo. */
.hw-dir__filterform {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 15px;
}

.hw-dir__filterby {
	font-family: calluna, 'Lora', Georgia, serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.32;
	color: #002942;
	white-space: nowrap;
}

.hw-dir__dd {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 40px;
	min-width: 244px; /* el ancho del dropdown en el Figma */
	padding: 0 52px 0 18px;
	border: 1px solid #bac3cb;
	border-radius: 2px;
	cursor: pointer;
	font-family: 'Gravitica', 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 1.56px;
	text-transform: uppercase;
	color: #002942;
	background: #fff;
}

.hw-dir__dd select {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	cursor: pointer;
	font-size: 16px; /* < 16px hace que iOS haga zoom al enfocar */
}

/* La flecha de marca (asta + punta, la misma del CTA) apuntando abajo:
   12 px de largo, a 27 px del borde derecho, como en el Figma. */
.hw-dir__dd-arrow {
	position: absolute;
	right: 23px;
	top: 50%;
	width: 8px;
	height: 13px;
	margin-top: -6.5px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M4 .5v11.5M.8 8.8 4 12l3.2-3.2' fill='none' stroke='%23002942' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 8px 13px;
}

/* #13 · Fuera el contorno rojo. Se quedaba puesto DESPUÉS de elegir, porque
   el <select> conserva el foco, y se leía como un error. El foco de teclado
   se sigue viendo, pero en Deepwater y sólo con teclado. */
.hw-dir__dd:focus-within { outline: none; }

.hw-dir__dd:has(select:focus-visible) {
	outline: 2px solid #002942;
	outline-offset: 2px;
}

.hw-dir__dd-go {
	margin-left: 8px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #424b0a;
	border-radius: 6px;
	background: #424b0a;
	color: #fff;
	cursor: pointer;
}

/* -------------------------------------------------------------- rejilla */

.hw-dir__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px var(--hw-dir-gap);
	margin-top: 36px;
}

.hw-dir__card {
	display: flex;
	flex-direction: column;
}

.hw-dir__media {
	position: relative;
	display: block;
	aspect-ratio: 333 / 220;
	overflow: hidden;
	border-radius: 4px;
	background: #efeae4;
}

/* Antes había una variante `--tall` que daba `aspect-ratio: 333/300` a las
   fichas sin extracto. Con dos proporciones distintas en una misma fila, los
   pies de foto no caían nunca a la misma altura. Una sola proporción. */

/* `contain` y no `cover`.
   Las fotos de los POIs se suben en proporciones muy distintas —logos
   verticales, rótulos apaisados, fotos cuadradas— y `cover` recortaba a
   333:220 desde el centro, así que a un logo alto le cortaba la cabeza y los
   pies. Ahora se ve la foto ENTERA, y lo que sobra a los lados es el mismo
   beige que ya tenía el marco (`.hw-dir__media` lleva `background:#efeae4`). */
/* #18 · `cover`, como en el Figma: el marco de 333×220 LLENO en todas.
   Con `contain` (lo que había) el marco medía lo mismo, pero cada foto se
   veía de un tamaño según su proporción —de 1440×1760 a 1440×705— con franjas
   beige a los lados o arriba, y la rejilla se leía desigual.
   Excepción: los LOGOTIPOS (`--logo`, lo decide el PHP) van enteros sobre
   blanco, porque a `cover` se les cortaban las letras. */
.hw-dir__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hw-dir__media--logo { background: #fff; box-shadow: inset 0 0 0 1px #efeae4; }

.hw-dir__media--logo img {
	object-fit: contain;
	padding: 22px 28px;
	box-sizing: border-box;
}

/* Sin foto: el logotipo de Heartwood sobre Oyster, en vez de un degradado
   gris que parecía una imagen rota. */
.hw-dir__media--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: #efeae4 url("/wp-content/uploads/2026/07/HRT_logo_wordmark.png") no-repeat center / 58% auto;
}

/* 2px y ámbar con sombra — medido del Figma (`rounded-[2px]`, `bg-[#dca233]`,
   drop shadow). No es blanca ni es una pastilla. */
/* Un 20% más pequeña que el Figma: 23→18 de alto, 12→10 de aire, 11→9 de
   cuerpo. Sobre una foto que ahora se ve entera, la pastilla de 23px tapaba
   demasiado. El interletraje baja a la par o las mayúsculas se despegan. */
.hw-dir__cat {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	border-radius: 2px;
	background: #dca233;
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
	font-family: 'Gravitica', 'Poppins', sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

/* #12 · Un color por categoría. Los tres que dibuja el Figma, tal cual:
   Amenities #DCA233, Schools (Education) Heart Pine, Shop & Dine Veranda.
   Los demás salen de la hoja de marca (12003:127) con la misma derivación
   que el mapa, `tono(color, %)` —hacia blanco si es positivo, hacia negro si
   es negativo—, por familias: verdes lo que se anda, azules lo institucional
   y el alojarse, tierras los distritos, grises los servicios. Todos dan
   contraste ≥ 4:1 con el texto blanco salvo el ámbar del Figma (2,3:1),
   que se respeta porque es el del diseño. La categoría que no esté aquí
   se queda en el ámbar de siempre. */
.hw-dir__cat[data-cat="amenities"]{background:#dca233}
.hw-dir__cat[data-cat="education"]{background:#38251c}
.hw-dir__cat[data-cat="shop-dine"]{background:#6d7ea0}
.hw-dir__cat[data-cat="grocery"]{background:#4C5870} /* tono(veranda, -30) */
.hw-dir__cat[data-cat="model-homes"]{background:#363F50} /* tono(veranda, -50) */
.hw-dir__cat[data-cat="parks"]{background:#424B0A} /* tono(boxwood, 0) */
.hw-dir__cat[data-cat="health-wellness"]{background:#757D45} /* tono(boxwoodTint, 0) */
.hw-dir__cat[data-cat="neighborhoods"]{background:#716C1F} /* tono(saltmarsh, -45) */
.hw-dir__cat[data-cat="whats-nearby"]{background:#4C512D} /* tono(boxwoodTint, -35) */
.hw-dir__cat[data-cat="the-arbor"]{background:#524E17} /* tono(saltmarsh, -60) */
.hw-dir__cat[data-cat="hotels"]{background:#002942} /* tono(deepwater, 0) */
.hw-dir__cat[data-cat="government-civic"]{background:#405E71} /* tono(deepwater, 25) */
.hw-dir__cat[data-cat="churches"]{background:#667F8E} /* tono(deepwater, 40) */
.hw-dir__cat[data-cat="pine-bluff"]{background:#26495E} /* tono(deepwater, 15) */
.hw-dir__cat[data-cat="assisted-living"]{background:#5D6266} /* tono(riverStone, -50) */
.hw-dir__cat[data-cat="senior-living"]{background:#4A4E51} /* tono(riverStone, -60) */
.hw-dir__cat[data-cat="gas"]{background:#3C3E41} /* tono(riverStone, -68) */
.hw-dir__cat[data-cat="outfitters-village"]{background:#6A5C55} /* tono(heartPine, 25) */
.hw-dir__cat[data-cat="poplar-place"]{background:#847872} /* tono(heartPine, 38) */
.hw-dir__cat[data-cat="heartwood-commerce-park"]{background:#503F37} /* tono(heartPine, 12) */
.hw-dir__cat[data-cat="industry"]{background:#887C77} /* tono(heartPine, 40) */
.hw-dir__cat[data-cat="future-commercial-site"]{background:#85280A} /* tono(townSquare, -42) */
.hw-dir__cat[data-cat="new-resident-check-in"]{background:#2E3407} /* tono(boxwood, -30) */

/* #9 · Las FAMILIAS de Explore (capa de presentación, ver `hw_directory_familias`
   en functions.php). Cuatro comparten clave con una categoría y ya tienen su
   color arriba (health-wellness, neighborhoods, shop-dine, whats-nearby);
   éstas son las nuevas, con la misma hoja de marca:
     · Parks & Trails = Boxwood, como Parks.
     · Schools = Heart Pine, el "schools" del Figma.
     · Services = tono(deepwater, 25), como Government & Civic.
     · Industry = tono(heartPine, 12), como Heartwood Commerce Park.
     · Village Centers = Town Square: es el color de la ESTRELLA del mapa, y
       la estrella es justo la de los villages comerciales (#11). */
.hw-dir__cat[data-cat="parks-trails"]{background:#424b0a}
.hw-dir__cat[data-cat="schools"]{background:#38251c}
.hw-dir__cat[data-cat="services"]{background:#405e71}
.hw-dir__cat[data-cat="industry"]{background:#503f37}
.hw-dir__cat[data-cat="village-centers"]{background:#e54511}

.hw-dir__title {
	margin: 16px 0 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	font-weight: 500;
}

/* DOS LÍNEAS SIEMPRE, tenga una o tenga dos.
   Con la altura libre, "Anatolia" ocupaba una línea y "Arbor Market – Grocery
   Anchored Retail Site" dos, así que en la misma fila los botones acababan
   20px descuadrados. Reservar la altura es lo que iguala TODAS las fichas, no
   sólo las de una fila.

   ⚠️ Los dos `!important` no son pereza. La tipografía responsive de Avada
   escribe `--fontSize: 28; line-height: 1.3` EN EL ATRIBUTO style del <h3>, y
   un estilo en línea gana a cualquier selector. Medido: la hoja pedía 22px/1.2
   y el navegador calculaba 28px/36.4px, así que una altura fija en píxeles se
   quedaba 20px corta. Fijando el interlineado aquí, `2.6em` son exactamente dos
   líneas, mida lo que mida la letra.

   Y `display` también tiene que ganar: Avada deja el <h3> en `flow-root`, y con
   eso `-webkit-line-clamp` no recorta nada. */
.hw-ex-directory .hw-dir__card .hw-dir__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.2 !important;
	flex: 0 0 auto;
	/* BugHerd #108/#109/#110 (2026-09-24): Juana y no Playfair, al tamaño del
	   Figma (22), y SIN reservar dos líneas. La reserva (`height:2.6em`) dejaba
	   un hueco de una línea entera bajo los titulares cortos (#109) y a dos
	   líneas el interlineado de 1.3 se veía flojo (#110). Las fichas de una
	   misma fila siguen igualadas: los CTA bajan con `margin-top:auto`. */
	font-family: 'Juana', 'Playfair Display', Georgia, serif !important;
	font-size: 22px !important;
	font-weight: 400 !important;
}

.hw-dir__title a {
	color: #19180c;
	text-decoration: none;
}

/* #108: el titular no lleva rollover (ni subrayado ni cambio de color). */
.hw-ex-directory .hw-dir__title a,
.hw-ex-directory .hw-dir__title a:hover,
.hw-ex-directory .hw-dir__title a:focus-visible { text-decoration: none !important; color: #19180c !important; }

/* Igual que el título: tres líneas reservadas, haya texto o no. El PHP pinta
   siempre el párrafo, aunque venga vacío, para que la caja exista. */
.hw-dir__body {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #4a4739;
	min-height: calc(15px * 1.5 * 3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ⚠️ LOS DOS SELECTORES LLEVAN `.hw-ex-directory` DELANTE Y NO ES DECORATIVO.
   Avada trae `.post-content p { margin: 0 0 20px }`, que es (0,1,1) y gana a
   `.hw-dir__ctas` (0,1,0) — y su hoja se imprime después. El `margin:auto` se
   perdía y los pies NO bajaban: medido en vivo, tres fichas de la misma fila
   con los botones a 344, 344 y 380 px. Con el margen aplicado, los tres caen
   en 380. Especificidad, no `!important`. */
.hw-ex-directory .hw-dir__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px; /* 30 entre la punta y el siguiente rótulo: el Figma deja ~31
	                   (lista de Explore, «MAP IT →» / «VISIT SITE»). Con 15 la
	                   flecha se comía el siguiente rótulo (Santiago, 24-09). */
	margin: auto 0 0;
	padding-top: 16px;
}

/* (0,3,0): `explore.css` pone `.hw-ex-… .fusion-text p{margin:0}` (0,2,1) y
   con dos clases el margen se quedaba en 0 — el titular tocaba el texto. */
.hw-ex-directory .hw-dir__card .hw-dir__body {
	margin: 12px 0 0;
}

/* BugHerd #164 · Lo mismo le pasaba al pie: `.hw-ex-here .fusion-text p
   {margin:0}` (0,2,1) le ganaba a `.hw-ex-directory .hw-dir__ctas` (0,2,0) y
   el `margin-top:auto` se quedaba en 0. En una fila donde un titular ocupa dos
   líneas, los pies de las otras dos se quedaban 27 px más arriba (medido:
   391 / 364 / 364). Con (0,3,0) bajan todos al fondo de la tarjeta. */
.hw-ex-directory .hw-dir__card .hw-dir__ctas {
	margin: auto 0 0;
}

/* #15 · El `CTA_primary` del Figma (12076:589), como el resto del sitio:
   Gravitica Demibold 15 / 1.2, 13 % de interletraje, y la flecha LARGA de
   46 px a 13 px del rótulo —antes un `→` de la fuente, a 12 px—. En hover,
   lo mismo que los demás CTA con flecha: sólo se mueve la flecha, que se
   recorta 10 px por la cola con `clip-path` (ver bloque CTA · ROLLOVER). */
.hw-dir__cta {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	font-family: 'Gravitica', 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1.95px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #e54511;
	text-decoration: none;
}

.hw-dir__cta::after {
	content: "";
	flex: 0 0 46px;
	height: 12px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 4.18px 7.36px,
		linear-gradient(#e54511, #e54511) no-repeat left center / calc(100% - .5px) 1px;
	clip-path: inset(0 0 0 0);
	transition: clip-path .15s ease-out;
}

.hw-dir__cta:hover,
.hw-dir__cta:focus-visible { color: #e54511; text-decoration: none; }

.hw-dir__cta:hover::after,
.hw-dir__cta:focus-visible::after { clip-path: inset(0 0 0 10px); }

@media (prefers-reduced-motion: reduce) {
	.hw-dir__cta::after { transition: none; }
}

/* #19/#15/#14/#13 · Fuente de marca en todo el directorio.
   Las seis reglas de este bloque iban en **Jost**, que era la SUSTITUTA
   open-source de Gravitica de cuando no había licencia web. Al llegar la
   woff2 real nadie volvió aquí, así que el filtro, el conmutador List/Map,
   las fichas, los CTA y el "Load more" seguían con la sustituta. Es lo que
   Strada ve en #19 ("does not appear to be the brand font") y también en
   #14 (List/Map View) y #15 (Map it / Learn more).
   El `--hw-btn-stretch:1.12` (el scaleY que estiraba Jost para imitar a
   Gravitica) NO llega hasta aquí: sólo toca `.s-cta`, `.l-cta`, `.s2-cta`,
   `.lh-cta` y `.hw-el-cta`. Comprobado antes de tocar.
   Los TAMAÑOS se dejan como estaban: Gravitica es más alta y estrecha que
   Jost, así que puede que haya que repasarlos, pero eso pide medida contra
   el Figma y nadie lo ha pedido todavía. */

/* ---------------------------------------------------------- load more */

/* ⚠️ LOS TRES SELECTORES, Y NO ES DECORATIVO.
   `.hw-dir__more` es (0,1,0) y en esta misma hoja hay un
   `.hw-ex-… .fusion-text p { margin: 0 }` que es (0,2,1) y le gana: los 48 px
   de abajo se quedaban en CERO y el "Load more" salía pegado a las fichas.
   Medido en vivo, no leído: la hoja decía 48 y `getComputedStyle` decía 0.
   Con la cadena entera son (0,3,0) y mandan. Especificidad, no `!important`. */
.hw-ex-directory .hw-dir__list .hw-dir__more {
	margin: 48px 0 0;
}

.hw-dir__more {
	margin: 48px 0 0;
	text-align: center;
}

.hw-dir__more a {
	font-family: 'Gravitica', 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #424b0a;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

.hw-dir__empty {
	margin: 36px 0 0;
	color: #757d45;
}

/* ---------------------------------------------------------- map view */

.hw-dir__map { margin-top: 24px; }

.hw-dir__frame {
	display: block;
	width: 100%;
	height: 849px; /* el alto del "map view" en el Figma */
	border: 0;
	border-radius: 4px;
}

/* BugHerd #171 · aviso legal bajo el mapa (Community Map y Map view de
   Explore; lo pinta `hw_map_disclaimer()`). `.post-content` delante para
   ganarle a `.post-content p{margin:0 0 20px}` de Avada sin `!important`. */
.post-content .hw-map-disclaimer,
.hw-map-disclaimer {
	margin: 16px auto 24px;
	max-width: 1380px;
	padding: 0 30px;
	font-size: 12px;
	line-height: 1.6;
	color: #6b6757;
	text-align: left;
}
.hw-dir__map .hw-map-disclaimer,
.post-content .hw-dir__map .hw-map-disclaimer { padding: 0; margin: 14px 0 0; max-width: none; }
@media (max-width: 640px) {
	.post-content .hw-map-disclaimer, .hw-map-disclaimer { padding: 0 20px; font-size: 11px; }
}

/* --------------------------------------------------------------- móvil */

@media (max-width: 1024px) {
	.hw-dir__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.hw-dir__grid { grid-template-columns: 1fr; gap: 32px; }
	/* «Filter by:» + 244 px no caben en 310: el desplegable ocupa lo que
	   quede en vez de salirse 19 px de la columna. */
	.hw-dir__filterform { width: 100%; gap: 14px; }
	.hw-dir__dd { flex: 1 1 auto; min-width: 0; }
	.hw-dir__frame { height: 70vh; min-height: 420px; }
}

/* --------------------------------------------------- cambiando de categoría */

/* El desplegable ya no recarga la página: pide sólo la rejilla y la cambia.
   Staging tarda unos 3 s en cualquier petición, así que sin una señal el
   visitante cree que no ha pasado nada y vuelve a pulsar. */
.hw-dir__list.is-cargando .hw-dir__grid,
.hw-dir__list.is-cargando .hw-dir__more {
	opacity: 0.35;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.hw-dir__list.is-cargando {
	cursor: progress;
}

/* Los grupos del desplegable. El nativo los pinta en gris y en cursiva, que en
   esta tipografía se lee mal; esto es lo poco que un <select> deja tocar. */
.hw-dir__dd optgroup {
	font-family: 'Gravitica', 'Poppins', sans-serif;
	font-style: normal;
	font-weight: 600;
	color: #424b0a;
}

.hw-dir__dd option {
	font-style: normal;
	font-weight: 400;
	color: #19180c;
}

/* ==========================================================================
   Find a Home — ajustes de página  [hw_map skin="homes"]
   Sólo la página 6362. El mapa en sí vive en la app (repo heartwood-map);
   esto es lo que le pasa alrededor en WordPress.
   ========================================================================== */

/* --------------------------------------------- "Stay in the Know" (#hw-cw)

   Dos problemas a la vez, y los dos por lo mismo: el distintivo es un círculo
   de 78px con el FONDO TRANSPARENTE y la letra en oliva (#424b0a). Sobre el
   crema del resto del sitio se lee; encima de las fotos de las casas y del
   mapa, no. Y además se sentaba abajo a la IZQUIERDA, justo sobre la columna
   de resultados.

   Se va a la derecha y se le da fondo: verde con la letra en crema. Invertido
   se lee sobre cualquier cosa, que era la queja.

   ⚠️ `!important` obligatorio, no por pereza: el widget lo inyecta
   `hw-contact-widget.js` con su propio <style>, y ese <style> se imprime
   DESPUÉS de esta hoja. Mismo precedente que el bloque móvil de más arriba. */

.page-id-6362 #hw-cw {
	left: auto !important;
	right: 22px !important;
}

.page-id-6362 #hw-cw .hw-cw__panel {
	left: auto !important;
	right: 0 !important;
}

.page-id-6362 #hw-cw .hw-cw__badge {
	background: #424b0a !important;
	color: #f5f1e8 !important;
	box-shadow: 0 3px 14px rgb(0 0 0 / 28%) !important;
}

/* Abierto ya tenía su propio fondo oscuro: no se toca, sólo se conserva. */
.page-id-6362 #hw-cw.is-open .hw-cw__badge {
	background: #19180c !important;
}

/* En móvil el widget ya estaba a la derecha (regla del bloque móvil): aquí
   sólo hace falta heredar la inversión, y eso ya lo hacen las reglas de
   arriba porque no están dentro de ningún media query. */
/* ==================================================================
   RESIDENT PORTAL (/resident-portal, página 3301)
   NO está en el Figma: se monta con el vocabulario que ya usan las L3 —
   héroe con foto, texto centrado, y el formulario global al final.
   Es una página de SERVICIO, no de venta: manda que se encuentren las
   cosas rápido, así que casi todo son enlaces con su etiqueta a la vista.
   No duplica contenido — enlaza a las páginas y PDFs ya publicados.
   ================================================================== */

body.page-id-3301 #main{padding-top:0 !important}

.hw-rp-hero,.hw-rp-intro,.hw-rp-portals,.hw-rp-res,.hw-rp-sell,.hw-rp-help{
  padding-left:0 !important;padding-right:0 !important}
.hw-rp-hero .fusion-builder-row,.hw-rp-intro .fusion-builder-row,
.hw-rp-portals .fusion-builder-row,.hw-rp-res .fusion-builder-row,
.hw-rp-sell .fusion-builder-row,.hw-rp-help .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-rp-hero .fusion-builder-row{padding-left:0 !important;padding-right:0 !important}
.hw-rp-hero .fusion-column-wrapper,.hw-rp-intro .fusion-column-wrapper,
.hw-rp-portals .fusion-column-wrapper,.hw-rp-res .fusion-column-wrapper,
.hw-rp-sell .fusion-column-wrapper,.hw-rp-help .fusion-column-wrapper{
  margin-left:0 !important;margin-right:0 !important}
.hw-rp-hero .fusion-layout-column,.hw-rp-intro .fusion-layout-column,
.hw-rp-portals .fusion-layout-column,.hw-rp-res .fusion-layout-column,
.hw-rp-sell .fusion-layout-column,.hw-rp-help .fusion-layout-column{
  margin-bottom:0 !important}
/* `wpautop` deja un <p> vacío al final de cada bloque de texto: 20px fantasma
   que descuadran todo lo que va debajo. */
.hw-rp-portals .fusion-text > p:empty,.hw-rp-res .fusion-text > p:empty,
.hw-rp-sell .fusion-text > p:empty{display:none !important;margin:0 !important}

/* ---------- héroe ---------- */
.hw-rp-hero{
  position:relative;min-height:460px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-rp-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:214px !important;padding-bottom:64px !important}
.hw-rp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(46,50,19,.52)}
.hw-rp-hero > *{position:relative;z-index:1}
.hw-rp-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-rp-hero .fusion-text p{margin:0}
.hw-rp-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-rp-hero__eyebrow{margin-bottom:18px !important}
.hw-rp-hero__title p,.hw-rp-hero__title.hw-rp-hero__title h1{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:300;
  font-size:64px;line-height:70px;letter-spacing:.5px;max-width:900px;
  margin:0 auto !important}
/* BugHerd #203 (25-09): era una raya HORIZONTAL de 64 px. Ahora es la guía
   vertical del resto de páginas (el dibujo —trazo + gancho— lo pone el bloque
   FIDELIDAD · ajustes sueltos, 2.1) y va anclada al borde de abajo del héroe
   como en HÉROES UNIFICADOS: 96 px en escritorio y 64 en móvil. */
.hw-rp-hero{padding-bottom:128px !important}
body .hw-rp-hero :is(.fusion-builder-row,.fusion-layout-column,.fusion-column-wrapper){position:static !important}
body .hw-rp-hero .hw-rp-hero__rule{position:absolute !important;left:50%;bottom:0;
  transform:translateX(-50%);margin:0 !important;width:auto !important}
.hw-rp-hero__rule p{margin:0 !important;line-height:0}
.hw-rp-hero__rule span{display:block;height:96px}
@media(max-width:760px){
  .hw-rp-hero__rule span{height:64px}
}

/* ---------- entradilla ---------- */
.hw-rp-intro{background:#FFFFFF !important;
  padding-top:84px !important;padding-bottom:0 !important}
.hw-rp-intro__body p{font-family:calluna,'Lora',Georgia,serif;font-size:18px;line-height:30px;
  color:var(--awb-color8,#19180C);max-width:690px;margin:0 auto !important}

/* ---------- cejillas y titulares compartidos ---------- */
.hw-rp-eyebrow,.hw-rp-eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:9px;letter-spacing:2.2px;text-transform:uppercase;line-height:1;
  color:var(--awb-color4,#6D7EA0);margin:0 !important}
.hw-rp-h2,.hw-rp-h2 p{font-family:'Juana','Playfair Display',Georgia,serif;font-weight:400;
  font-size:38px;line-height:44px;color:var(--awb-color8,#19180C);
  margin:14px 0 0 !important}
.hw-rp-note,.hw-rp-note p{font-family:calluna,'Lora',Georgia,serif;font-size:15px;line-height:24px;
  color:var(--awb-color8,#19180C);max-width:620px;margin:14px auto 0 !important}
.hw-rp-body{font-family:calluna,'Lora',Georgia,serif;font-size:15px;line-height:24px;
  color:var(--awb-color8,#19180C);margin:16px 0 0 !important}
/* Los CTA de texto de esta página («How it works», «Email the community
   manager» y los «Go to portal») llevaban una «→» tipográfica y subrayado.
   Ahora son el CTA del resto del sitio (`cta_reg`: Gravitica 15/1.2,
   1,95 px, `ss01`, flecha de línea de 46 px con 16 de aire). El rollover
   está en el bloque CTA · ROLLOVER DEL FIGMA. */
.hw-rp-cta a,
.hw-rp-portal__go{display:inline-flex;align-items:center;align-self:flex-start;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:15px;line-height:1.2;
  letter-spacing:1.95px;font-feature-settings:"ss01" 1;text-transform:uppercase;
  white-space:nowrap;color:var(--awb-color7,#E54511) !important;
  text-decoration:none !important;border:0;padding-bottom:0}
.hw-rp-cta a::after,
.hw-rp-portal__go::after{
  content:"";display:block;flex:0 0 auto;margin-left:16px;width:46px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat left center/calc(100% - .5px) 1px}
.hw-rp-cta{margin:22px 0 0 !important}

/* ---------- los tres portales ---------- */
.hw-rp-portals{background:#FFFFFF !important;
  padding-top:96px !important;padding-bottom:0 !important}
.hw-rp-portals__g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:40px}

/* Tarjeta entera clicable: es un botón grande disfrazado. En una página de
   servicio, el objetivo es que no haya que apuntar a un enlace de una línea. */
.hw-rp-portal{display:flex;flex-direction:column;min-height:236px;
  padding:26px 26px 24px;border:1px solid #BAC3CB;background:#FFFFFF;
  text-decoration:none;color:var(--awb-color8,#19180C);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.hw-rp-portal:hover{border-color:var(--awb-color7,#E54511);
  box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.hw-rp-portal__k{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:9px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--awb-color4,#6D7EA0)}
.hw-rp-portal__t{margin-top:12px;font-family:'Juana','Playfair Display',Georgia,serif;
  font-size:24px;line-height:29px}
.hw-rp-portal__b{margin-top:10px;font-family:calluna,'Lora',Georgia,serif;font-size:14px;
  line-height:21px;color:#4A4739}
/* `margin-top:auto` lo baja al pie de la tarjeta, y así los tres "Go to portal"
   quedan en la misma línea aunque los textos midan distinto. */
.hw-rp-portal__go{margin-top:auto;padding-top:18px}

/* ---------- guías y formularios ---------- */
.hw-rp-res{background:#FFFFFF !important;
  padding-top:96px !important;padding-bottom:0 !important}
.hw-rp-res__g{display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:56px;margin-top:34px;border-top:1px solid #D4D6D7}
.hw-rp-res__i{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding:15px 0;border-bottom:1px solid #D4D6D7;
  text-decoration:none;color:var(--awb-color8,#19180C)}
.hw-rp-res__t{font-family:calluna,'Lora',Georgia,serif;font-size:15px;line-height:21px}
/* La etiqueta dice si el enlace abre un PDF, una página o un portal. Sin ella,
   quince enlaces iguales no dicen a qué llevan. */
.hw-rp-res__k{flex:0 0 auto;font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:9px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--awb-color4,#6D7EA0)}
.hw-rp-res__i:hover .hw-rp-res__t{color:var(--awb-color7,#E54511)}
.hw-rp-res__i:hover .hw-rp-res__k{color:var(--awb-color7,#E54511)}

/* ---------- vender la casa ---------- */
.hw-rp-sell{background:#FFFFFF !important;
  padding-top:96px !important;padding-bottom:0 !important}
.hw-rp-sell__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center}
.hw-rp-shot{display:block;width:100%;aspect-ratio:760/442;
  background:#EFEAE4 url('/wp-content/uploads/2026/09/hw-rp-sell.webp') center/cover no-repeat}

/* ---------- a quién llamar ---------- */
.hw-rp-help{background:#FFFFFF !important;
  padding-top:96px !important;padding-bottom:110px !important}

/* ---------- móvil ---------- */
@media (max-width:1023px){
  .hw-rp-hero{min-height:340px !important;padding-top:150px !important;
    padding-bottom:100px !important} /* #203: sitio para la guía de 64 px */
  .hw-rp-hero__title p,.hw-rp-hero__title.hw-rp-hero__title h1{font-size:42px;line-height:48px}
  .hw-rp-intro{padding-top:56px !important}
  .hw-rp-h2,.hw-rp-h2 p{font-size:30px;line-height:36px}
  .hw-rp-portals,.hw-rp-res,.hw-rp-sell,.hw-rp-help{padding-top:64px !important}
  .hw-rp-help{padding-bottom:72px !important}
  .hw-rp-portals__g{grid-template-columns:1fr;gap:16px}
  .hw-rp-portal{min-height:0}
  .hw-rp-res__g{grid-template-columns:1fr}
  .hw-rp-sell__g{grid-template-columns:1fr;gap:28px}
  /* La foto, primero: en vertical el texto largo antes de la imagen deja la
     sección sin nada que mirar hasta muy abajo. */
  .hw-rp-sell__m{order:-1}
}

/* ==================================================================
   TIPOGRAFÍA FIGMA 2026-09-15 · H2 en TAY Flapjack
   Plan de fidelidad, tarea 1.4. Estilo `header_flapjack_reg` del Figma:
   OTR Flapjack Regular, interlineado 1, tracking 5 %; 48 px en escritorio
   (nodo 1:2) y 36 px en móvil (nodo 14014:612). Hasta hoy los H2 salían en
   Jost/Gravitica 600 a 44 px con 1 px de tracking.

   Va AL FINAL del style.css a propósito: mismos selectores que los bloques de
   página, así que gana por orden sin subir especificidad. Donde el bloque
   original lleva !important (.l-title, .s2-title, .f-title) aquí también.

   Flapjack no trae Ē/ē/®: ningún H2 lleva "Bē Health" hoy (comprobado en
   /be-health/). Si alguno lo llevara, la pila cae a Gravitica sólo en ese signo.
   Entre 761 y 1150 px se queda el tamaño reducido de cada página.
   ================================================================== */
.hw-os-h2 p,.hw-os-vision__title p,.hw-loc-h2 p,.hw-loc-map__h2,.hw-loc-quote__t,
.hw-ex-grow__h2 p,.hw-ex-h2 p,.hw-lh-h2 p,.hw-we-h2,.hw-we-h2-b p,
.hw-bh-h2 p,.hw-sc-h2 p,.hw-vu-h2 p,.hw-cm-h2 p,.hw-cm-int__h2,
.hw-ag-h2 p,.hw-bd-h2 p,.hw-el-kicker{
  font-family:'TAY Flapjack','Oswald',sans-serif;font-weight:400;
  letter-spacing:.05em;line-height:1}
.l-title,.s2-title,.f-title{
  font-family:'TAY Flapjack','Oswald',sans-serif !important;font-weight:400 !important;
  letter-spacing:.05em !important;line-height:1 !important}

@media(min-width:1151px){
  .hw-os-h2 p,.hw-loc-h2 p,.hw-loc-map__h2,.hw-loc-quote__t,
  .hw-ex-grow__h2 p,.hw-ex-h2 p,.hw-lh-h2 p,.hw-we-h2,.hw-we-h2-b p,
  .hw-bh-h2 p,.hw-sc-h2 p,.hw-sc-h2--one p,.hw-vu-h2 p,.hw-cm-h2 p,.hw-cm-int__h2,
  .hw-ag-h2 p,.hw-bd-h2 p,.hw-el-kicker{font-size:48px}
  .l-title,.s2-title,.f-title{font-size:48px !important}
}
/* 1.5 · Titulares de héroe: Juana ExtraLight 78 / 1.1, tracking 2 % (estilo
   `messaging_xl`). Estaban en 90 px con peso 300, calibrados a ojo para
   Cormorant. Comprobado con la fuente real: "Welcome to our" mide 574 px a
   78, y el frame del Figma da 565. **Sólo escritorio**: a 393 px el Figma usa
   58 y ahí no cabe ("town in the trees" = 444 px sobre 333 útiles), así que
   los tamaños de móvil se quedan hasta la fase 5. */
@media(min-width:1151px){
  .hw-ag-hero__title p,.hw-ag-hero__title.hw-ag-hero__title h1,.hw-bd-hero__title p,.hw-bh-hero__title p,.hw-bh-hero__title.hw-bh-hero__title h1,.hw-cm-hero__title p,.hw-cm-hero__title.hw-cm-hero__title h1,
  .hw-ex-hero__title p,.hw-ex-hero__title.hw-ex-hero__title h1,.hw-hb-hero__title p,.hw-hb-hero__title.hw-hb-hero__title h1,.hw-lg-hero__title p,.hw-lg-hero__title.hw-lg-hero__title h1,.hw-lh-hero__title p,.hw-lh-hero__title.hw-lh-hero__title h1,
  .hw-loc-hero__title p,.hw-loc-hero__title.hw-loc-hero__title h1,.hw-os-hero__title p,.hw-os-hero__title.hw-os-hero__title h1,.hw-rp-hero__title p,.hw-rp-hero__title.hw-rp-hero__title h1,.hw-sc-hero__title p,.hw-sc-hero__title.hw-sc-hero__title h1,
  .hw-vu-hero__title p,.hw-vu-hero__title.hw-vu-hero__title h1,.hw-we-hero__title p,.hw-we-hero__title.hw-we-hero__title h1,.hw-wh-hero__title p,.hw-wh-hero__title.hw-wh-hero__title h1{
    font-size:78px;line-height:1.1;letter-spacing:.02em}
}
.hw-ag-hero__title p,.hw-ag-hero__title.hw-ag-hero__title h1,.hw-bd-hero__title p,.hw-bh-hero__title p,.hw-bh-hero__title.hw-bh-hero__title h1,.hw-cm-hero__title p,.hw-cm-hero__title.hw-cm-hero__title h1,
.hw-ex-hero__title p,.hw-ex-hero__title.hw-ex-hero__title h1,.hw-hb-hero__title p,.hw-hb-hero__title.hw-hb-hero__title h1,.hw-lg-hero__title p,.hw-lg-hero__title.hw-lg-hero__title h1,.hw-lh-hero__title p,.hw-lh-hero__title.hw-lh-hero__title h1,
.hw-loc-hero__title p,.hw-loc-hero__title.hw-loc-hero__title h1,.hw-os-hero__title p,.hw-os-hero__title.hw-os-hero__title h1,.hw-rp-hero__title p,.hw-rp-hero__title.hw-rp-hero__title h1,.hw-sc-hero__title p,.hw-sc-hero__title.hw-sc-hero__title h1,
.hw-vu-hero__title p,.hw-vu-hero__title.hw-vu-hero__title h1,.hw-we-hero__title p,.hw-we-hero__title.hw-we-hero__title h1,.hw-wh-hero__title p,.hw-wh-hero__title.hw-wh-hero__title h1{font-weight:280}

/* 1.6 · Antetítulos: Gravitica Demibold 15 / 1.7, tracking 13 % (`messaging_eyebrow`).
   Estaban entre 9 y 11 px. El tamaño es el mismo en el móvil del Figma. */
.hw-ag-eyebrow p,.hw-ag-hero__eyebrow p,.hw-bd-hero__eyebrow p,.hw-bh-hero__eyebrow p,
.hw-cm-eyebrow p,.hw-cm-hero__eyebrow p,.hw-ev-eyebrow p,.hw-ex-eyebrow p,
.hw-ex-hero__eyebrow p,.hw-fq-eyebrow p,.hw-gl-eyebrow p,.hw-hb-hero__eyebrow p,
.hw-lg-hero__eyebrow p,.hw-lh-eyebrow p,.hw-lh-hero__eyebrow p,.hw-loc-eyebrow p,
.hw-loc-hero__eyebrow p,.hw-nw-eyebrow p,.hw-os-eyebrow p,.hw-os-hero__eyebrow p,
.hw-rp-eyebrow p,.hw-rp-hero__eyebrow p,.hw-sc-eyebrow p,.hw-sc-hero__eyebrow p,
.hw-vu-hero__eyebrow p,.hw-we-hero__eyebrow p,.hw-wh-hero__eyebrow p{
  /* La familia FALTABA: este bloque fijaba tamaño, interlineado y tracking, y
     dejaba la familia de cada bloque de página, que dice 'Poppins' a secas.
     Cuando Gravitica dejó de servirse CON EL ALIAS 'Poppins' y pasó a tener
     nombre propio, todos esos antetítulos cayeron a la Poppins de Avada sin
     que cambiara ni un tamaño. Es lo que Strada ve en #39/#40/#43/#45/#46/
     #47/#50/#55. Misma pila que los H2 y la nav. */
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:15px;line-height:1.7;letter-spacing:.13em}

/* 1.6b · Los que la auditoría de #43 encontró TODAVÍA en la Poppins de Avada.
   Misma causa que 1.6: se escribieron cuando Gravitica se servía con el alias
   'Poppins'. Medido con getComputedStyle en /schools/, /homebuilders/,
   /commercial/ y /homebuilders/centex-homes/ el 2026-09-22.

   a) Antetítulos que se quedaron fuera de la lista de arriba. Van también al
      tamaño común de 15 px, que es lo que pide #40 y #55 ("misma fuente Y
      mismo tamaño en todas las páginas"). */
.hw-sc-card__e,.hw-cm-card__k,.hw-bd-modelo__k{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:15px;line-height:1.7;letter-spacing:.13em}

/* b) Titulares de tarjeta: son H2 de tarjeta a 44 px, así que van al mismo
      TAY Flapjack que el resto de titulares (#41 Schools, #48 Homebuilders).
      Se listan aquí y no en el bloque de H2 porque ese bloque va antes. */
.hw-sc-card__n,.hw-hb-card__t{
  font-family:'TAY Flapjack','Oswald',sans-serif;font-weight:400;
  letter-spacing:.05em;line-height:1}

/* c) CTA "Learn more" de las tarjetas de Schools (#42): todos los CTA del
      sitio son Gravitica, este se quedó en Poppins. */
.hw-sc-card__cta,.hw-sc-card__cta a{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  /* 12 -> 15 px: el CTA canónico es `.hw-os-cta` (Our Story, aprobada) y mide
     15. Era el único a 12, que es la mitad de #42 ("same font AND size"). */
  font-size:15px}

/* d) Ficha de constructora: specs y texto de los mosaicos de PIPSY (#54).
      Mismo origen; sólo se corrige la FAMILIA, los tamaños son los medidos. */
.hw-bd-specs,.hw-bd-specs p,.hw-bd-t__p,.hw-bd-t__c,.hw-bd-t__sub{
  font-family:'Gravitica','Poppins',sans-serif}

/* 1.5b · Entradillas en crema: Juana Regular 20 / 1.9, 2 % (`messaging_medium`).
   Iban en el serif del cuerpo ('Lora' = Source Serif). El tamaño 20 ya estaba
   bien; lo que cambia es la familia y el tracking. */
.hw-ag-intro__body p,.hw-bd-intro__body p,.hw-bh-intro__body p,.hw-cm-intro__body p,
.hw-hb-intro__body p,.hw-lh-intro__body p,.hw-loc-intro__body p,.hw-os-intro__body p,
.hw-os-intro__lead p,.hw-rp-intro__body p,.hw-sc-intro__body p,.hw-vu-intro__body p{
  font-family:'Juana','Playfair Display',Georgia,serif;letter-spacing:.02em}

@media(max-width:760px){
  .hw-os-h2 p,.hw-loc-h2 p,.hw-loc-map__h2,
  .hw-ex-grow__h2 p,.hw-ex-h2 p,.hw-lh-h2 p,.hw-we-h2,.hw-we-h2-b p,
  .hw-bh-h2 p,.hw-sc-h2 p,.hw-sc-h2--one p,.hw-vu-h2 p,.hw-cm-h2 p,.hw-cm-int__h2,
  .hw-ag-h2 p,.hw-bd-h2 p,.hw-el-kicker{font-size:36px;line-height:1}
  .l-title,.s2-title,.f-title{font-size:36px !important}
}

/* BugHerd #112 (2026-09-24): «All body copy across the site should use regular
   numerals instead of old-style numerals». Calluna (kit de Adobe) trae por
   defecto las cifras de estilo antiguo; el Figma las pide de caja alta
   (`body_reg` lleva "lnum" 1, "pnum" 1). Se declara en <body> y hereda a todo:
   Juana y Gravitica no tienen `onum`, así que no les cambia nada. Medido: la
   tira 0-9 de Calluna a 40 px pasa de 193,1 a 200,7 px. */
html body{font-variant-numeric:lining-nums proportional-nums}

/* ==================================================================
   FIDELIDAD 2026-09-15 · ajustes sueltos
   Plan de fidelidad al Figma: piezas pequeñas que no son de una página.
   Va detrás de "TIPOGRAFÍA FIGMA 2026-09-15".
   ================================================================== */

/* 2.9 · "Bē Health®" es marca: en su caja aunque la lista vaya en versalitas.
   El span lo pone hw-offcanvas.js (y el título del ítem 7526 del menú 73). */
.hw-tm{text-transform:none !important;letter-spacing:.02em}

/* 2.1 · Línea vertical de los héroes: el Figma (`hero-line.svg`) la remata con
   un gancho curvo de ~8 px arriba, hacia la derecha. Trazo de 1 px #EFEAE4.
   El gancho va en su propia capa (::after, 9×3 px) para que NO se estire con
   la altura: la línea la pinta ::before, que sí escala. La altura y el margen
   de cada página se quedan como están; aquí sólo se cambia el dibujo. */
.hw-os-hero__rule span,.hw-loc-hero__rule span,.hw-ex-hero__rule span,
.hw-lh-hero__rule span,.hw-we-hero__rule span,.hw-bh-hero__rule span,
.hw-sc-hero__rule span,.hw-wh-hero__rule span,.hw-vu-hero__rule span,
.hw-cm-hero__rule span,.hw-ag-hero__rule span,.hw-hb-hero__rule span,
.hw-bd-hero__rule span,.hw-rp-hero__rule span{
  position:relative;width:9px;background:none !important;opacity:1}
.hw-os-hero__rule span::before,.hw-loc-hero__rule span::before,.hw-ex-hero__rule span::before,
.hw-lh-hero__rule span::before,.hw-we-hero__rule span::before,.hw-bh-hero__rule span::before,
.hw-sc-hero__rule span::before,.hw-wh-hero__rule span::before,.hw-vu-hero__rule span::before,
.hw-cm-hero__rule span::before,.hw-ag-hero__rule span::before,.hw-hb-hero__rule span::before,
.hw-bd-hero__rule span::before,.hw-rp-hero__rule span::before{
  content:"";position:absolute;left:4px;top:1px;bottom:0;width:1px;
  background:var(--awb-color1,#EFEAE4)}
.hw-os-hero__rule span::after,.hw-loc-hero__rule span::after,.hw-ex-hero__rule span::after,
.hw-lh-hero__rule span::after,.hw-we-hero__rule span::after,.hw-bh-hero__rule span::after,
.hw-sc-hero__rule span::after,.hw-wh-hero__rule span::after,.hw-vu-hero__rule span::after,
.hw-cm-hero__rule span::after,.hw-ag-hero__rule span::after,.hw-hb-hero__rule span::after,
.hw-bd-hero__rule span::after,.hw-rp-hero__rule span::after{
  content:"";position:absolute;left:0;top:0;width:9px;height:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='3' viewBox='0 0 8.58 2.6' fill='none'%3E%3Cpath d='M0.5 0.5C2.31 0.74 3.85 1.16 5.04 1.61 6.22 2.06 8.08 2.09 8.08 2.09' stroke='%23EFEAE4' stroke-linecap='round' stroke-linejoin='bevel'/%3E%3C/svg%3E") no-repeat left top}

/* 2.1b · La guía de la Home vive ahora en el bloque HOME FIDELIDAD, dibujada
   con un solo SVG. Aquí había otra regla para el mismo `::after` y tener dos
   reglas para el mismo pseudo sólo confunde: se quita. */

/* 2.2 · "Stay in the know": el Figma lo pone en 70×70 y a 34 px del borde
   izquierdo (nodo 12076:479). Hoy son 78×78 a 22 px. En móvil, abajo a la
   izquierda también (Santiago, 24-09; ver el bloque ≤760).
   !important porque hw-contact-widget.js imprime su <style> después. */
@media(min-width:761px){
  /* 2026-09-16 · altura del Figma: y719 en una pantalla de 900, o sea el borde
     superior al 80 % de la vista (110 px desde abajo; estaba a 22). En
     proporción a la altura, con 22 px de mínimo en pantallas muy bajas. El
     panel que se abre encima pierde esa misma altura para no salirse por
     arriba. */
  /* 2026-09-23 · BugHerd #87: «debe anclarse a ras de la esquina inferior
     izquierda del navegador; ahora queda un poco alto». Vuelve a la posición
     del principio, 22 px de cada borde. Se descarta la altura del Figma
     (y719) y los 34 px de la izquierda. */
  #hw-cw{left:22px !important;bottom:22px !important}
  #hw-cw .hw-cw__panel{max-height:calc(100vh - 22px - 108px) !important}
  #hw-cw .hw-cw__badge{width:70px !important;height:70px !important}
}

/* 2026-09-16 · PRUEBA de Santiago: en móvil el widget pasa de abajo a la
   derecha a la IZQUIERDA y a MEDIA ALTURA de la pantalla. Sin `transform`
   para centrarlo (convertiría al contenedor en el bloque de referencia del
   panel fijo): se centra con `top` y la mitad de sus 55 px.
   Al abrirse, el panel ya no cabe "encima" del distintivo (a media altura se
   saldría por arriba): va fijo a la DERECHA del distintivo, centrado en alto (con scroll si no cabe),
   así el distintivo —que abierto es la X de cerrar— sigue a la vista.
   Find a Home (6362) queda fuera: allí se movió a la derecha a propósito para
   no tapar la columna de resultados. */
@media(max-width:760px){
  /* (tarde) más abajo: el centro del distintivo a 1/4 de la pantalla desde
     abajo. Y el MISMO distintivo de siempre (aro y letra en Boxwood), sólo que
     relleno de Oyster, el crema de la marca, para que se lea sobre las fotos.
     (Se probó en Boxwood con letra crema y Santiago lo prefirió así.) */
  /* 2026-09-24 · Santiago: «also be at the bottom left in mobile». Se acaba
     la prueba de media altura: esquina inferior izquierda, 14 px de cada
     borde (como en escritorio, a su escala). El panel vuelve a abrirse ENCIMA
     del distintivo, a todo el ancho menos 14 px por lado. */
  body:not(.page-id-6362) #hw-cw{
    left:14px !important;right:auto !important;
    top:auto !important;bottom:14px !important}
  /* BugHerd #179 (25-09): sin el relleno Oyster — el sello va TRANSPARENTE,
     como en escritorio, para que tome el color del fondo que tenga debajo. */
  body:not(.page-id-6362) #hw-cw:not(.is-open) .hw-cw__badge{
    background:transparent !important}
  body:not(.page-id-6362) #hw-cw .hw-cw__panel{
    position:fixed !important;left:14px !important;right:14px !important;
    top:auto !important;bottom:81px !important;width:auto !important;
    max-height:calc(100vh - 81px - 14px) !important;max-width:none !important}
}

/* 2.3 · La flecha de los CTA mide 46 px en el Figma (nodo CTA_primary
   `12076:589`); en staging estaba a 34. El crecimiento al pasar el cursor se
   mantiene, subido en la misma proporción. */
.l-cta p::after,.s2-cta p::after,.lh-cta p::after{width:46px}
.hw-os-cta a::after,.hw-ex-cta a::after,.hw-lh-cta a::after,
.hw-we-cta a::after,.hw-bh-cta a::after,.hw-sc-cta a::after{width:46px}
/* El crecimiento en hover se quitó el 22-09 (noche): ahora el gesto es único
   para todo el sitio y vive en el bloque CTA · ROLLOVER DEL FIGMA — el asta se
   recorta por la cola con clip-path y no cambia ninguna caja. */

/* 2.8 · La página actual, en color. Antes se pintaba sola la primera entrada
   porque al abrir el menú se le daba el foco y `a:focus` usaba el color de
   hover. El foco pasa a :focus-visible (teclado) y el color lo lleva
   aria-current, que marca hw-offcanvas.js por URL. */
.hw-oc__primary a:focus:not(:focus-visible){color:var(--awb-color1,#EFEAE4)}
.hw-oc__primary a[aria-current],
.hw-oc__secondary a[aria-current],
.hw-oc__toplinks a[aria-current]{color:var(--awb-color3,#CEC439)}

/* 2.5 · Formulario global (nodo 14095:683). Sólo lo que es presentación; los
   TEXTOS de los campos van en el form 7549 (base de datos).
   "Retiring" se queda, aunque no esté en el Figma: lo pidió el cliente.

   ⚠️ Corregido tras la revisión: la primera versión de este bloque cambiaba la
   tipografía de las etiquetas a Gravitica y ponía las casillas en rejilla. En
   el Figma (captura del nodo) las etiquetas van en el SERIF del cuerpo, en la
   MISMA línea que sus opciones, y las casillas fluyen al lado — que es
   exactamente como ya estaban. Aquí sólo queda lo que de verdad cambia. */

/* el asterisco va pegado ("Email*"), sin punteado bajo el abbr */
.hw-form abbr.fusion-form-element-required{
  margin-left:-.28em;text-decoration:none !important;border:0 !important}
/* las etiquetas, en Deepwater (sólo el color; la familia y el cuerpo no se tocan) */
.hw-form .fusion-form-field legend .label{color:var(--awb-color6,#002942) !important}
.hw-form input::placeholder,.hw-form textarea::placeholder{
  color:var(--awb-color6,#002942) !important;opacity:1}

/* "I'm a Real Estate Agent/Broker*": interruptor YES / NO en texto, no radios
   (en el Figma va en la misma línea que la etiqueta, con la opción activa
   subrayada). La casilla la dibuja Avada en los pseudo de la ETIQUETA. */
.hw-form .fusion-form-radio label::before,
.hw-form .fusion-form-radio label::after,
.hw-form .fusion-form-radio input:checked+label::before,
.hw-form .fusion-form-radio input:checked+label::after{display:none !important;content:none !important}
.hw-form .fusion-form-radio label{
  cursor:pointer;text-transform:uppercase !important;padding-left:0 !important;
  font-family:'Gravitica','Poppins',sans-serif !important;font-size:12px !important;letter-spacing:.13em;
  color:var(--awb-color4,#6D7EA0) !important;
  padding-bottom:2px;border-bottom:1px solid transparent}
.hw-form .fusion-form-radio:has(input:checked) label,
.hw-form .fusion-form-radio:has(input:focus-visible) label{
  color:var(--awb-color6,#002942) !important;border-bottom-color:currentColor}

/* Submit: 158×40, naranja con la letra en crema y su flecha (hoy 190×47 blanco) */
.hw-form .fusion-form-submit-field button,
.hw-form button.fusion-button,
.hw-form input[type="submit"]{
  width:158px !important;height:40px !important;min-height:0 !important;
  padding:0 16px !important;border-radius:0 !important;
  background:var(--awb-color7,#E54511) !important;border-color:var(--awb-color7,#E54511) !important;
  color:var(--awb-color1,#EFEAE4) !important;
  font-family:'Gravitica','Poppins',sans-serif;font-size:15px;letter-spacing:.13em;
  display:inline-flex !important;align-items:center;justify-content:center;gap:10px}
.hw-form .fusion-form-submit-field button::after,
.hw-form button.fusion-button::after{
  content:"";width:22px;height:10px;flex:0 0 auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M.5 .5 3.68 3.68 .5 6.86' fill='none' stroke='%23EFEAE4' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center/4.18px 7.36px,
    linear-gradient(var(--awb-color1,#EFEAE4),var(--awb-color1,#EFEAE4)) no-repeat left center/calc(100% - .5px) 1px}

/* el disclaimer: sólo el color, en Deepwater. La caja, el tamaño y su sitio
   junto al botón ya estaban bien; tocarlos fue lo que descuadró el formulario. */
.hw-form .hw-form-consent .fusion-form-field-description,
.hw-form .fusion-form-consent-field p{color:var(--awb-color6,#002942) !important}

/* 2026-09-16 · Casillas con el estilo `cta_form` del Figma: Calluna 16 / 1.32
   SIN tracking (heredaban 0,32 px del body), texto a 25 px de la casilla (era
   27,2) y 16 px entre opciones (eran 26). Con eso "Industrial Opportunities"
   cabe en la línea de "I'm interested in" (le faltaban 43 px) y "Good schools"
   sube a la primera línea de "What brings you…" (le faltaba 1): el bloque
   queda en 3 líneas, como el diseño. */
.hw-form .fusion-form-checkbox{margin-right:16px !important}
.hw-form .fusion-form-checkbox label{
  letter-spacing:0 !important;padding-left:25px !important}
.hw-form .fusion-form-checkbox-field legend .label,
.hw-form .fusion-form-radio-field legend .label{letter-spacing:0 !important}

/* 2026-09-16 · Tipografía del formulario contra el nodo 14095:683 (estilos del
   Figma entre paréntesis). Medido con getComputedStyle en staging:
   · etiquetas y casillas salían en 'Lora' 500 —la sustituta de Avada, más
     gruesa— y no en Calluna (`cta_form`: Calluna 16 / 1.32, sin tracking);
   · el aviso legal iba a 16 / 1.7 en 500 (`body_disclaimer`: 12 / 1.3, 0,24 px,
     caja de 552);
   · YES / NO a 12 px (`cta_reg`: Gravitica 15 / 1.2, 1,95 px);
   · SUBMIT a 13 px con 2 px (`cta_reg`);
   · la entradilla a 17 / 1.7 (`body_reg`: 16 / 1.8, 0,32 px). */
.hw-form legend .label,
.hw-form .fusion-form-label-wrapper label,
.hw-form .fusion-form-checkbox label{
  font-family:calluna,'Lora',Georgia,serif !important;font-weight:400 !important;
  font-size:16px !important;line-height:1.32 !important;letter-spacing:0 !important}
.hw-form input,.hw-form input::placeholder{
  font-family:calluna,'Lora',Georgia,serif !important;font-weight:400 !important;
  font-size:16px !important;letter-spacing:0 !important}
.hw-form .fusion-form-radio label{
  font-size:15px !important;line-height:1.2 !important;letter-spacing:1.95px !important;
  font-weight:600 !important;font-feature-settings:"ss01" 1}
.hw-form .hw-form-consent .fusion-form-field-description,
.hw-form .fusion-form-consent-field p,
.hw-form .fusion-form-field-description{
  font-family:calluna,'Lora',Georgia,serif !important;font-weight:400 !important;
  font-size:12px !important;line-height:1.3 !important;letter-spacing:.24px !important;
  max-width:552px}
.hw-form .fusion-form-submit-field button .fusion-button-text,
.hw-form button.fusion-button .fusion-button-text{
  font-size:15px !important;letter-spacing:1.95px !important;line-height:1.2 !important;
  font-weight:600 !important;font-feature-settings:"ss01" 1}
.hw-form .fusion-text p{font-size:16px !important;line-height:1.8 !important;letter-spacing:.32px !important;
  max-width:490px !important;margin-left:auto !important;margin-right:auto !important}
/* entradilla: el Figma la pone en 461, pero la Calluna web compone algo más ancha y a 461 el corte caía antes de "updates"; con 490 corta (la primera línea mide 480,3) "…email updates / (but not too
   many)…". Aviso legal: el Figma le da 552 px de caja junto al botón; aquí
   ocupaba 7 de las 12 columnas del formulario (432 px, con un tope de 430).
   Pasa a 9 columnas y el botón (158 px) a 3. */
.hw-form .hw-form-consent p.label{max-width:552px !important}
@media(min-width:761px){
  .hw-form .hw-form-consent{grid-column:span 9 !important}
  .hw-form .fusion-form-submit-field{grid-column:span 3 !important}
}

/* 2.6 · Pie: las tres columnas de enlaces miden 176 px en el Figma (15,15 %
   de los 1162 de contenido); estaban en 200/192/179. Y el separador de los
   legales lleva más aire ("  |  "). Sin YouTube: no hay canal (B4). */
.hw-ftr .hw-ftr__nav--1,
.hw-ftr .hw-ftr__nav--2,
.hw-ftr .hw-ftr__nav--3{width:15.15% !important}
/* #26 · Las rayitas entre los enlaces legales, en crema como el texto.
   No es que la regla las pintara mal: es que NO declaraba color, y Avada
   pinta `a::before` con `var(--link_color)` (#19180C), que gana a la
   herencia del enlace. Sobre el olivo del pie se leían gris oscuro mientras
   el texto iba en #EFEAE4. Pariente del `--link_hover_color` global.
   `currentColor` las ata al color del enlace, así que si el pie cambia de
   color las rayitas lo siguen solas. Opacidad a 1: Strada las pidió blancas,
   o sea iguales al texto; si se prefieren más discretas, basta bajarla. */
.hw-ftr__legal a + a::before{margin:0 8px;color:currentColor;opacity:1}

/* 3.8 · Our Story, el marco de mármol tras el héroe: 571×420 en el Figma
   (nodo 14857:14300), no 469×364. La foto de dentro va en las proporciones
   del nodo 14857:14291: metida 11,56 % / 15,24 % / 11,38 % / 18,1 %. */
.hw-os-intro .hw-os-frame--sign{width:571px;aspect-ratio:571/420}
.hw-os-intro .hw-os-frame--sign .hw-os-frame__win{
  left:11.56%;top:15.24%;width:77.06%;height:66.66%}
/* Y el crema tiene que cortarse a MEDIA altura del marco (en el Figma acaba en
   y1526 y el marco va de 1316 a 1736). El relleno de la sección lo escribe
   Avada, así que en vez de tocar la maquetación se mueve sólo el límite de
   color: el marco sobresale 58 px por abajo, así que media altura cae 152 px
   antes del final de la sección. */
.hw-os-intro{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 calc(100% - 152px),
    #FFFFFF calc(100% - 152px) 100%) !important}

/* 3.10 · Live Here, la textura de Rentals ("más textura", dijo el cliente).
   Medido: el relleno del Figma (nodo 14620:7267) tiene una desviación típica
   de 8,37 sobre una media de 236; el derivado que había en staging se quedaba
   en 7,27 — el aclarado de derive-assets.py se pasó. La nueva sale de la tela
   del Figma repetida en espejo para llegar a 2× SIN reescalar (reescalar
   difumina el grano): desviación 8,31, misma media.
   Nombre NUEVO a propósito: reutilizarlo dejaría la vieja en la caché. */
.hw-lh-panel{background-image:url('/wp-content/uploads/2026/09/hw-lh-panel-v2.webp') !important}

/* 3.6 · Home, "Smart thinking": el patrón de cuadros salía menudo (~3 por
   lado) porque se usaba el asset de julio estirado. En el Figma (12008:329) la
   tela va AMPLIADA al 161,4 % y desplazada, así que se ven ~2 por lado. La
   imagen nueva es ese recorte exacto a 2× (1140×1196); misma media de gris
   (220,5 frente a 219,6), sólo cambia el tamaño del cuadro.
   ⚠️ Lo que se veía mal NO era el tamaño del cuadro: era que esta regla no
   llegaba a aplicarse (el selector iba con un descendiente que no existe), así
   que seguía a la vista el asset de julio. Medido por autocorrelación sobre una
   franja de patrón puro, la v2 da un periodo de 109 px y el render del Figma,
   109 px. Una v3 "2,5× más grande" se fue a 274 y sobraba.
   El <img> lo pinta Avada desde el contenido de la página: en vez de reescribir
   la página, se tapa y el cuadro va de fondo en su marco. */
/* OJO: el elemento lleva `fusion-imageframe` Y `s2-checks` a la vez, no una
   dentro de otra. Con el selector descendente la regla no encajaba y seguía
   viéndose el asset de julio. */
.s2-checks{
  background:#FFFFFF url('/wp-content/uploads/2026/09/hw-sch-checks-v2.webp') center/cover no-repeat !important}
.s2-checks img{opacity:0}
@media(max-width:900px){
  .hw-schools .s2-girl{
    background-image:url('/wp-content/uploads/2026/09/hw-sch-checks-v2.webp') !important}
}

/* 3.12 · Explore, tarjetas del directorio: fondo blanco, 6 px de radio y
   sombra (`dropshadow1` del Figma: 0 2px 8px #00000033), con la foto metida
   22 px del borde. **Todo lo demás se queda**: tipografía, CTAs y el encaje
   de las imágenes son mejores en staging, lo dijo el cliente. */
.hw-dir__card{
  background:#fff;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2);
  padding:22px 20px 24px}
.hw-dir__media{border-radius:0}

/* 6.8 · Find a Home: "Stay in the know" no se leía. El fondo ya es verde
   (#424b0a) pero el sello es un PNG oliva (hw-badge-stayintheknow.png), así que
   `color`/currentColor no le llega: se pasa a crema con un filtro.
   brightness(0) lo deja negro; invert(1) blanco; sepia+saturate lo templa a crema. */
.page-id-6362 #hw-cw .hw-cw__mark{
  filter:brightness(0) invert(1) sepia(.12) saturate(1.4) !important}

/* BugHerd #180 (25-09): el sello «Stay in the know» baja al formulario (#form).
   Sin margen, la cabecera fija tapaba el sello del árbol que monta el borde
   de arriba de la sección. */
#form{scroll-margin-top:90px}
@media(max-width:760px){#form{scroll-margin-top:70px}}

/* ==================================================================
   HOME FIDELIDAD 2026-09-15
   Fase 3 (collage y fondos) y fase 4 (Home, escritorio) del plan de
   fidelidad. Va al final de la hoja, detrás de "FIDELIDAD 2026-09-15".
   La foto del café en festón (3.2) y el sello de la garza (3.3) YA estaban
   enmascarados en staging: el plan los daba por hacer y no lo estaban.
   ================================================================== */

/* 4.1 · Héroe: el Figma no lleva capa de color, lleva el vídeo con blur 6 px
   (nodo 12228:357). En staging había un degradado oscuro encima que apagaba
   el verde. El vídeo se agranda un 3 % para que el desenfoque no deje ver
   los bordes de la caja. */
/* El etalonaje se corrige en el filtro, no con una capa de color: medido sobre
   el render del Figma, el héroe está en luminancia 87 y saturación 0,41,
   mientras que el fichero de staging sin capa se queda en 111 y 0,13. */
.hw-hero::after{display:none !important}
.hw-hero > .fullwidth-video,
.hw-hero > .fullwidth-video-image{
  filter:blur(6px) brightness(.55) saturate(2.4) sepia(.4);
  transform:scale(1.03);transform-origin:center}

/* BugHerd #86 (2026-09-23): «1 px negro en el borde derecho del vídeo». Era
   ESTE vídeo, no el del héroe (captura de Santiago: el póster del cielo contra
   la franja marrón). La caja cae en decimales (x = 381,17 → 1058,83 a 1440) y
   la regla base le da `background:#000` y `object-fit:contain`: la imagen se
   pinta ajustada a píxel y la última media columna deja ver el negro del
   fondo. A zoom 100 % sale una línea; a otro zoom los decimales caen distinto
   y desaparece. Sin fondo y con `cover`, esa media columna la cubre la imagen
   (la caja ya lleva la proporción del póster/vídeo, así que no recorta nada
   visible). */
.hw-vidblock__video{background:transparent !important;object-fit:cover !important}

/* 3.1 · Vídeo de marca: el Figma monta el vídeo de 720×366 sobre un fondo de
   franjas de 807×457 (nodos 12004:121 y 12010:405), con **5 franjas por lado**
   y un margen de ~44 px. En staging el fondo era un derivado con 9 franjas y el
   bloque medía 880. El fondo nuevo sale del relleno del nodo con su mismo
   recorte (la imagen va al 100 % de ancho y al 176,59 % de alto, al 90 %).

   ⚠️ Segunda pasada: la v2 salía con FONDO BLANCO porque al montar el PNG del
   Figma sobre blanco perdía la transparencia. La v3 conserva el alfa, así que
   entre franja y franja se ve el crema de la página, como en el diseño. */
.hw-vidblock{
  max-width:807px !important;
  padding:5.64% 5.39% !important;
  background-image:url('/wp-content/uploads/2026/09/hw-video-backdrop-v3.webp') !important}
/* El play del Figma es un triángulo pequeño abajo a la derecha, sin círculo
   (nodo 12008:271). El <svg> del botón trae el disco, así que se apaga y el
   triángulo se dibuja con clip-path. */
.hw-vidblock__play{
  left:auto !important;top:auto !important;right:18px;bottom:18px;
  width:34px !important;height:34px !important;transform:none !important}
.hw-vidblock__play:hover{transform:scale(1.07) !important}
.hw-vidblock__play svg{display:none !important}
.hw-vidblock__play::after{
  content:"";display:block;width:100%;height:100%;
  background:var(--awb-color1,#EFEAE4);
  clip-path:polygon(22% 12%, 22% 88%, 86% 50%)}

/* 4.3 · "Deep in the coastal woodlands…": caja de 686 px (nodo 14002:583).
   Estaba en ~975 y a 38 px, por eso se veía más abierta. El tamaño va en la
   variable de Avada: el <h2> lleva `font-size:1em` EN LÍNEA y hereda de ahí. */
.hw-intro{
  --awb-font-size:28px !important;
  max-width:686px !important;margin-left:auto !important;margin-right:auto !important}
.hw-intro .fusion-title-heading{line-height:1.7 !important}

/* 4.5 · "Come on down": el mapa mide 570 px en el Figma (39,58 % de 1440);
   estaba en 34 % (488 px). */
.l-map{width:39.58% !important}

/* 4.7 · "Read all about it": el Figma da fichas de 334 px. Se intentó con una
   rejilla de tres columnas fijas y ROMPIÓ las fichas (salían estrechísimas):
   Avada monta las Post Cards con su propia rejilla y columnas anidadas, así
   que imponer `display:grid` en el contenedor deja los hijos reales fuera de
   sitio. Se deja como estaba hasta hacerlo por los ajustes del elemento. */

/* 3.7 · "Explore the life": en el Figma la sección entera va sobre franjas
   azules a sangre (nodo 14138:3977, 1440×985) y el vídeo mide 1160×660
   (12231:385). En staging era una banda crema sin franjas, con el vídeo a
   1160×560. El aire de arriba y abajo sale de (985−660)/2 ≈ 162.

   ⚠️ El vídeo salía a 1380 px en vez de 1160: la fila de Avada lleva
   `max-width:104% !important` EN LÍNEA y el `max-width` de la hoja no la toca.
   El ancho de contenido se fija con el padding del contenedor (9,72 % = 140 px
   a 1440), que es además lo que deja las franjas a sangre por detrás. */
.hw-explorelife{
  background:#FFFFFF url('/wp-content/uploads/2026/09/hw-el-stripes-v2.webp') center/cover no-repeat !important;
  /* el cliente lo quiere un 10 % más pequeño: 1160 → 1044, o sea 198 px de
     calle a cada lado en vez de 140 */
  padding:162px 13.75% !important}
.hw-el-banner{aspect-ratio:1160/660}

/* 3.4 · Las fotos del collage van RECTAS y sin sombra (estados 12114:766 y
   12114:768). Estaban giradas con `--rot` y con sombra. */
.hw-collage__item{transform:none !important;box-shadow:none !important}
.hw-collage__item--shadow{box-shadow:none !important}

/* 3.2b · La máscara del festón estaba MAL: se generó rellenando el rectángulo
   que encierra el aro, así que la foto asomaba por las muescas entre bombo y
   bombo y el recorte no se veía. La v2 sale de inundar el EXTERIOR del trazo,
   que es lo que deja la silueta real (97,2 % del cuadro, no 98,3 %). */
.s-twowomen img{
  -webkit-mask-image:url('/wp-content/uploads/2026/09/hw-scallop-mask-v2.png') !important;
          mask-image:url('/wp-content/uploads/2026/09/hw-scallop-mask-v2.png') !important}

/* 3.3b · La garza: en el Figma (12114:770) NO es un aro sobre la foto, es un
   SELLO macizo gris azulado de 168×233 con la foto de 132×195 DENTRO. Se pinta
   el sello de fondo y la foto se mete en su hueco; el aro que había encima
   sobra, y la foto ya no necesita máscara porque no llega al borde. */
.hw-collage__item--stamp{
  background:url('/wp-content/uploads/2026/09/hw-stamp-garza.svg') center/100% 100% no-repeat !important}
.hw-collage__item--stamp::after{display:none !important}
.hw-collage__item--stamp img{
  position:absolute;left:10.71%;top:8.15%;width:78.57%;height:83.69%;
  object-fit:cover;-webkit-mask:none !important;mask:none !important}

/* 3.4b · El marco verde del slider: en el Figma el borde ocupa el 12 % del
   ancho de la pieza (28 px sobre 230); aquí eran 14 px fijos sobre 290, o sea
   un 5 %, y por eso el marco se veía mucho más fino que el ejemplo. */
/* En porcentaje NO: el padding de un elemento posicionado se calcula contra el
   ancho del CONTENEDOR (el set del collage, 2400 px), y 12 % daban 288 px de
   borde. La pieza mide 290 px de ancho, así que el 12 % del Figma son 35. */
.hw-collage__item--green{padding:35px !important}

/* El collage se para y se reanuda al hacer clic (hw-collage.js): que se vea
   que es pulsable, y que el foco de teclado se note. */
.hw-collage-auto{cursor:pointer}
.hw-collage-auto:focus-visible{outline:2px solid var(--awb-color7,#E54511);outline-offset:4px}

/* 3.5 · El sello: en el Figma es una forma ORGÁNICA marrón dibujada a mano,
   sin sombra (nodo 12114:777), no un círculo perfecto. Se usa el propio SVG
   del diseño, que ya trae el aro de texto y la H tomate; por eso se apagan
   la circunferencia y la marca que dibujábamos nosotros.

   ⚠️ Con el SVG completo del Figma (que ya trae el texto y la H) el sello no
   podía girar: al rotarlo giraba también la H. Ahora el fondo es SÓLO la forma
   (`hw-seal-shape.svg`, el mismo trazo del nodo) y encima vuelven nuestro aro
   de texto —que gira y se para al pasar el ratón— y la H tomate quieta. */
.hw-collage__badge{
  background:url('/wp-content/uploads/2026/09/hw-seal-shape.svg') center/contain no-repeat !important;
  border-radius:0 !important;box-shadow:none !important}

/* ---- AJUSTES DE LA REVISIÓN · 2026-09-15 (noche) ----
   OJO: aquí NO puede ir una cabecera con una fila de "=", porque push-css.py
   la lee como el principio de OTRO bloque y deja copias sueltas en el
   style.css que ganan por orden. Pasó: había dos reglas de las fichas. */

/* 4.2 · Héroe de la Home. El rótulo iba 52 px por debajo de donde lo pone el
   Figma (y165) y el subtítulo se había quedado con la tipografía del cuerpo
   (Calluna 13) en vez del estilo `messaging_eyebrow`: Gravitica 15 / 1.7 con
   13 % de tracking. La guía con gancho queda centrada entre el subtítulo y el
   vídeo (21 px de aire arriba y abajo de sus 72 px). */
/* (posición del rótulo: ahora se resuelve con el padding del contenedor) */
.hw-hero .hw-script{margin-top:0 !important}
.hw-hero .hw-sub{margin-top:14px !important}
.hw-hero .hw-sub,
.hw-hero .hw-sub p{
  font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
  font-weight:600 !important;line-height:1.7 !important;letter-spacing:.13em !important;
  text-transform:uppercase;color:var(--awb-color1,#EFEAE4) !important}
/* La guía, en UN SOLO SVG con el trazo del Figma (`hero-line.svg`): el gancho
   y el asta iban en dos capas de fondo distintas y no casaban — el travesaño
   quedaba separado y el remate redondo del trazo se veía como un punto suelto.
   Alto 80 px, el del diseño.
   El gancho va ESPEJADO respecto al `hero-line.svg` que exportamos (el de las
   L3): medido sobre la captura del Figma, el extremo alto del travesaño cae a
   la DERECHA y el bajo a la izquierda. Y mide 16,4 px de ancho, no 8: el de la
   Home es el doble de largo, así que el trazo se redibuja a esa medida con el
   grosor de 1 px intacto. */
.hw-hero .hw-sub{position:relative}
.hw-hero .hw-sub::after{
  content:"" !important;position:absolute !important;
  left:50% !important;transform:translateX(-50%) !important;pointer-events:none;
  top:calc(100% + 24px) !important;
  width:18px !important;height:83px !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='83' viewBox='0 0 18 83' fill='none'%3E%3Cpath d='M9 1.23V83' stroke='%23EFEAE4' stroke-width='1'/%3E%3Cpath d='M16.52 0.5C12.9 0.74 9.82 1.16 7.44 1.61 5.08 2.06 1.36 2.09 1.36 2.09' stroke='%23EFEAE4' stroke-width='1' stroke-linecap='round' stroke-linejoin='bevel'/%3E%3C/svg%3E") no-repeat center/18px 83px !important}

/* 4.6 · "It's a big, wide welcome mat": el interlineado del Figma son 112 px
   (medidos en el render); estaba en 98,3. */
/* Avada escribe `line-height:1.26` EN LÍNEA en el <h2> (junto con --fontSize),
   así que hace falta !important y, sobre todo, el selector correcto: el titular
   cuelga de la sección `hw-livehere`. */
.hw-livehere .fusion-title-size-two .fusion-title-heading,
.hw-livehere h2.fusion-title-heading{line-height:1.44 !important}

/* Cuerpo: con Calluna puesta, nuestra tinta mide 14 px frente a los 12 del
   Figma y el interlineado era el mismo (29,2 contra 29,8), así que el texto
   se veía apretado. Se sube al 1,8 del estilo `body_reg`. */
.l-body,.s2-body,.lh-body,
.l-body p,.s2-body p,.lh-body p{line-height:1.8 !important}

/* 4.7 · "Read all about it": las fotos del Figma miden 333 y arrancan en x551,
   con 85 px de calle (medido en el render). La columna de fichas empezaba en
   x490 con fotos de 375. El hueco va en el AJUSTE del elemento (85) y aquí sólo
   se desplaza la rejilla los 61 px que faltan. Nada de `display:grid`: eso fue
   lo que rompió las fichas. */
.hw-happening .fusion-post-cards{padding-left:24px}   /* 61 dejaba las fotos en x588; el Figma las pone en x551 */

/* ---- REVISIÓN 2 · 2026-09-15 (noche) ----
   Medido banda a banda contra el render del Figma. Las desviaciones grandes
   eran de ALTURA, y por eso "todo se ve más grande": con menos alto y el mismo
   contenido, el aire desaparece.
     héroe        Figma 968 · staging 680   (y por eso la guía chocaba con el vídeo)
     slider       Figma 440 · staging 970
     slow & fast  Figma 1020 · staging 693  */

/* 1 · El héroe, a los 968 px del Figma. Con esto la guía cabe entera y sobra
   aire hasta el vídeo, que sigue montando sobre el héroe como antes. */
/* El héroe del Figma mide 968 px, pero eso NO cabe en la pantalla de un
   portátil y se comía la vista entera: se toma el menor de los dos, y el
   contenido se coloca en PROPORCIÓN (17 % el rótulo, como en el diseño), no
   con márgenes fijos, para que cuadre a cualquier alto.
   `overflow:hidden` corta el vídeo en recto: al ir desenfocado y un 3 % más
   grande, el borde inferior se veía deshilachado. */
.hw-hero{
  /* Dos topes: el 86 % de la pantalla (para que en un portátil quepa) y 768 px
     en absoluto. En un monitor alto, 968 px se comían el 84 % de la vista y el
     bloque del vídeo quedaba cortado; en el Figma —que se ve a escala— el héroe
     ocupa el 62 %. Con 700 px: 61 % en monitor y sin cambio en el portátil. */
  --hw-hero-h:min(86vh, 700px);
  min-height:var(--hw-hero-h) !important;
  overflow:hidden !important}
.hw-hero > .fusion-builder-row{
  align-items:flex-start !important;
  padding-top:calc(var(--hw-hero-h) * .17) !important}

/* 3 · "Come on down": el mapa mide bien (570) pero arrancaba 48 px a la derecha.
   En el Figma va de x730 a x1299, o sea que empieza en el 50,69 %. */
.l-map{left:50.69% !important}

/* 6 · La banda del slider: en el Figma es una VENTANA de 440 px sobre el
   collage (las fotos se ven cortadas por arriba y por abajo). Estaba en 970. */
.hw-breaker{padding:34px 0 !important}
.hw-breaker .fusion-layout-column,
.hw-breaker .fusion-column-wrapper,
.hw-breaker .fusion-text{min-height:372px !important}
/* quien manda en el alto es el contenedor del collage, no la columna */
.hw-breaker .hw-collage-auto{height:372px !important;overflow:hidden}

/* 5 · "Slow and fast": el Figma le da 1020 px de alto y nosotros 693, así que
   se veía apretada. El aire va en la sección, no en el contenido. */
/* NO por padding: el alto de esta sección lo fija un `aspect-ratio:1440/693`
   y su arte (el marco amarillo) va colocado en PORCENTAJES de ese alto, así
   que meter relleno sólo aprieta el contenido dentro de una caja fija. Para
   darle los 1020 px del Figma hay que cambiar la proporción Y recalcular esos
   porcentajes: queda pendiente, con medidas. */

/* El CTA "Find Your Home" (.s-cta) era el único que no declaraba familia: la
   heredaba del body y con Calluna se volvió serif. Los otros CTA sí la traen. */
.s-cta,.s-cta p{font-family:'Gravitica','Poppins',sans-serif}

/* "Slow and fast": el titular, ya en Flapjack 48, ocupa TRES líneas (144 px) y
   se comía el párrafo y el CTA, que van posicionados en absoluto con un `top`
   fijo pensado para dos líneas. Se recolocan debajo: 263 + 144 + 23 de aire. */
/* (2026-09-16: los `top` en px que iban aquí eran globales y rompían el apilado
   de ≤1150; ahora van en % dentro del bloque LIVE HERE + SLOW AND FAST) */
/* El titular acaba en 332 (188 + 144 de sus tres líneas): el párrafo entra en
   356 y el CTA en 564, y todo cabe en los 693 de la sección. */

/* El "punto" suelto sobre la guía era un SEPARADOR de Avada que quedaba en el
   contenido del héroe: un elemento de 1×1 px con borde crema, resto de la guía
   original de la página. Como la guía la dibuja el ::after de .hw-sub, sobra. */
.hw-hero .fusion-separator{display:none !important}

/* ---- 4.4 · "WELCOME": EL COLLAGE DE LA INTRO CONTRA EL FIGMA · 2026-09-16 ----
   Medido contra los nodos de 14002:328. Tres causas de que "no se pareciera":
   · el lienzo NO medía 1440: la sección lleva 30 px de padding de Avada y los
     porcentajes se resolvían contra 1380, así que TODO salía un 4 % pequeño y
     corrido 30 px (fotos de 254 donde el Figma pone 265);
   · el lienzo era 1440×1700 y en el Figma el tramo va de y1451 a y3035
     (1584): sobraban ~116 px y todo bajaba 71 px respecto a su entradilla;
   · los pinos (278 px) y la magnolia (388 px de PNG) iban a
     171 y 264; y los párrafos en Calluna 20/1.6, cuando el estilo del Figma es
     `messaging_medium`: Juana 20 / 1.9 / 0.4 px, con cajas más anchas (464 en
     "Like, let's drive less…", por eso quedaba más lejos de la foto).
   Lienzo: left = x/1440 · top = (y−1451)/1584 · width = w/1440.
   Sólo escritorio: el móvil (≤900) tiene su propio lienzo 393×1575. */
@media(min-width:901px){
  .hw-scatter{
    aspect-ratio:1440/1584;
    padding-left:0 !important;padding-right:0 !important;
    /* por si algún dibujo se sale por la derecha: recorta sin crear un
       contenedor de scroll */
    overflow-x:clip !important;overflow-y:visible !important}
  .hw-scatter .fusion-layout-column{padding:0 !important}
  .hw-scatter .fusion-column-wrapper{margin:0 !important;padding:0 !important}

  .s-dining   {left:29.51% !important;top:-2.71% !important;width:18.40% !important}
  .s-vibe     {left:54.65% !important;top:0.63%  !important;width:20.76% !important}
  .s-mandrink {left:60.83% !important;top:13.32% !important;width:14.58% !important}
  .s-trees    {left:5.35%  !important;top:15.66% !important;width:19.31% !important}
  .s-drive    {left:17.01% !important;top:16.86% !important;width:32.22% !important}
  .s-aerial   {left:23.13% !important;top:32.39% !important;width:20.83% !important}
  .s-trails   {left:50.69% !important;top:35.04% !important;width:25.56% !important}
  /* el PNG trae 246 px de margen transparente a la izquierda: la posición sale
     de correlacionar su alfa con el dibujo del render (0,82), no del nodo */
  .s-magnolia {left:73.06% !important;top:33.52% !important;width:26.94% !important}
  .s-sprinkler{left:64.44% !important;top:44.38% !important;width:18.96% !important}
  .s-twowomen {left:41.67% !important;top:51.52% !important;width:16.67% !important}
  .s-fresh    {left:38.06% !important;top:76.70% !important;width:23.82% !important}
  .s-cta      {left:50%    !important;top:84.15% !important}
  .s-hmark    {left:49.03% !important;top:88.01% !important;width:1.88%  !important}

  /* los dibujos de línea, por detrás: los pinos pisan ya el principio del
     párrafo y la magnolia queda debajo del vídeo del riego */
  .s-trees,.s-magnolia{z-index:0 !important}
  .s-dining,.s-mandrink,.s-aerial,.s-sprinkler,.s-twowomen,
  .s-vibe,.s-drive,.s-trails,.s-fresh,.s-cta{z-index:2 !important}

  .hw-scatter .s-vibe,.hw-scatter .s-vibe p,
  .hw-scatter .s-drive,.hw-scatter .s-drive p,
  .hw-scatter .s-trails,.hw-scatter .s-trails p,
  .hw-scatter .s-fresh,.hw-scatter .s-fresh p{
    font-family:'Juana','Playfair Display',Georgia,serif !important;
    font-size:20px !important;line-height:1.9 !important;letter-spacing:.4px !important}
}
/* La foto del café se cambió por `hw-friends-coffee-heartwood.jpg`, ya
   recortada en vertical (964:1276) sobre las dos chicas de la derecha, que es
   el encuadre del Figma: el `object-position:8%` de la foto anterior sobra. */
.s-twowomen img{object-position:center center !important}

/* ---- COME ON DOWN / SMART THINKING · 2026-09-16 ----
   Nodos 12010:334 (location) y 12008:310 (schools).

   · CTA ("Here we are", "Study up"): estilo `cta_reg` del Figma = Gravitica
     Demibold 15 / 1.2, tracking 13 % (1,95 px), `ss01`, flecha de 46 px a 13 px
     del texto. Iban a 12 px y ESTIRADOS un 12 % en vertical: el
     `--hw-btn-stretch` era un apaño para Jost y seguía puesto con la Gravitica
     real. Aquí se anula sólo en estas dos secciones.
   · Los titulares van en dos líneas (COME / ON DOWN, SMART / THINKING): el
     corte está en el CONTENIDO (`<br />`, por SQL), no por anchos de caja.
   · Desde 1151 px: por debajo, el preámbulo apila estas secciones en flujo
     normal y las posiciones del lienzo las descolocarían.
   · Tope de ancho: las dos secciones eran lienzos con `aspect-ratio` sobre el
     ANCHO DE LA VENTANA, así que en una pantalla de más de 1440 todo crecía
     (el mapa pasaba de 570 px) y la sección se veía "a sangre" y con las fotos
     enormes. El Figma es un lienzo de 1440: ahora la proporción la lleva la
     COLUMNA, topada a 1440 y centrada, y el fondo blanco sigue a sangre.
     A 1440 o menos no cambia nada.
   · Mapa: en el Figma arranca a 104 px del borde superior (14,81 %) y acaba
     justo en el borde inferior; estaba en 17,1 % y se salía 16 px. */
@media(min-width:1151px){
  .hw-location,.hw-schools{aspect-ratio:auto !important}
  /* el tope va en el PADDING del contenedor: la fila lleva `max-width` EN
     LÍNEA con !important y un max-width de la hoja no le llega */
  .hw-location,.hw-schools{
    /* el % se resuelve contra .post-content, que mide 60 px MENOS que la
       sección (Avada le da 30 px de padding al <main> y -30 de margen al
       contenedor): de ahí el +30 */
    padding-left:max(0px, calc(50% + 30px - 720px)) !important;
    padding-right:max(0px, calc(50% + 30px - 720px)) !important}
  .hw-location .fusion-layout-column{aspect-ratio:1440/702;height:auto !important}
  .hw-schools .fusion-layout-column{aspect-ratio:1440/693;height:auto !important}
  .hw-schools{margin-top:min(3.68vw,53px) !important}
  .hw-location .l-map{top:14.81% !important}

  .hw-location .l-cta,.hw-schools .s2-cta,
  .hw-location .l-cta p,.hw-schools .s2-cta p{
    font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
    font-weight:600 !important;line-height:1.2 !important;letter-spacing:1.95px !important;
    font-feature-settings:"ss01" 1}
  .hw-location .l-cta p,.hw-schools .s2-cta p{transform:none !important}
  .hw-location .l-cta p::after,.hw-schools .s2-cta p::after{
    transform:none !important;margin-left:13px !important}
  /* Cuerpo: el Figma es Calluna 16 / 1.8 (`body_reg`) y aquí salía a 17 por
     el `clamp(…1.18vw…)`. Ese píxel de más le sumaba una línea a cada párrafo
     y dejaba el CTA pegado al texto (7 px de aire donde el Figma deja 48).
     Se mantiene la escala con la ventana, con el tope en 16. */
  .hw-location .l-body,.hw-schools .s2-body,
  .hw-location .l-body p,.hw-schools .s2-body p{font-size:clamp(14px,1.11vw,16px) !important}
  /* Aun a 16 px, la Calluna web compone más ancho que el render del Figma: 8
     líneas donde el diseño tiene 7 (location) y 4 donde tiene 3 (schools). Los
     CTA bajan lo justo para conservar los 48 px de aire del Figma entre el
     final del párrafo y el CTA (medido a 1440 y a 1280). */
  /* BugHerd #91 (2026-09-24): con el cuerpo ya a 16 px el párrafo ha vuelto a
     7 líneas y el 84,9 % dejaba 76 px de aire. Vuelve la cota del Figma. */
  .hw-location .l-cta{top:81.2% !important}
  /* BugHerd #91 (2026-09-24, Santiago): «Smart thinking» igual que «Come on
     down»: 50 px de aire entre el párrafo y el CTA (iban 76). */
  .hw-schools .s2-cta{top:73.85% !important}
}

/* ---- LIVE HERE + SLOW AND FAST · 2026-09-16 ----
   Nodos 12010:345 ("It's a big, wide welcome mat") y 12013:19 ("Slow and
   fast"), medidos contra staging a 1440.

   · Titular de Live here: `messaging_xl` = Juana ExtraLight 78 / 1.1, tracking
     2 % (1,56 px). Estaba a 1.44 (112 px por línea, frente a 86): el "4.6" de
     ayer se midió sobre la Cormorant sustituta y quedó mal.
   · CTA en `cta_reg` y cuerpo a 16 px, igual que en Location/Schools.
   · Aire: en el Figma hay 53 px entre Schools y Live here, 41 entre Live here
     y Slow and fast y 155 hasta el slider. En staging eran 0 (el `margin-top`
     de la hoja no llegaba), y por eso el collage se montaba sobre el marco
     amarillo. Con eso la banda pasa a los 889 px del Figma (5805→6694): era
     la "Slow and fast mide 693 y el Figma 1020" del handoff.
   · Tope de 1440 como en las dos secciones anteriores. Los fondos (el bloque
     Oyster y la acuarela amarilla) eran un ::before de la SECCIÓN en % de su
     ancho: pasan a la COLUMNA, que es el lienzo topado.
   · Titular de Slow and fast en tres líneas como el Figma (SLOW AND FAST / IN
     ALL THE RIGHT / PLACES): el corte va en el contenido con `<br />`.
   · Foto de Slow and fast: el Figma la amplía al 135,79 % y la sube un 75,64 %
     (encuadre sobre la chica), no un `cover` centrado. */
@media(min-width:1151px){
  .hw-livehere,.hw-whatshere{
    aspect-ratio:auto !important;
    padding-left:max(0px, calc(50% + 30px - 720px)) !important;
    padding-right:max(0px, calc(50% + 30px - 720px)) !important}
  .hw-livehere .fusion-layout-column{aspect-ratio:1440/1245;height:auto !important}
  .hw-whatshere .fusion-layout-column{aspect-ratio:1440/693;height:auto !important}
  .hw-livehere{margin-top:min(3.68vw,53px) !important}
  .hw-whatshere{margin-top:min(2.85vw,41px) !important;
    /* 155 del Figma menos los 34 de relleno propio del slider */
    margin-bottom:min(8.4vw,121px) !important}

  .hw-livehere::before,.hw-whatshere::before{display:none !important}
  .hw-livehere .fusion-layout-column::before{
    content:"";position:absolute;left:9.72%;top:7.63%;width:80.56%;height:78.55%;
    background:var(--awb-color1,#EFEAE4);z-index:0}
  .hw-whatshere .fusion-layout-column::before{
    content:"";position:absolute;left:9.72%;top:13.71%;width:39.58%;height:86.29%;
    background:url('/wp-content/uploads/2026/09/hw-watercolor-frame-yellow.jpg') center/cover no-repeat;
    z-index:0}

  .hw-livehere .lh-title,
  .hw-livehere .lh-title .fusion-title-heading,
  .hw-livehere h2.fusion-title-heading{
    line-height:1.1 !important;letter-spacing:1.56px !important;font-weight:280 !important}
  .hw-livehere .lh-title{width:30.35% !important}

  .hw-livehere .lh-cta,.hw-whatshere .wh-cta,
  .hw-livehere .lh-cta p,.hw-whatshere .wh-cta p{
    font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
    font-weight:600 !important;line-height:1.2 !important;letter-spacing:1.95px !important;
    font-feature-settings:"ss01" 1}
  .hw-livehere .lh-cta p,.hw-whatshere .wh-cta p{transform:none !important}
  .hw-livehere .lh-cta p::after,.hw-whatshere .wh-cta p::after{
    transform:none !important;margin-left:13px !important}

  .hw-livehere .lh-body,.hw-whatshere .wh-body,
  .hw-livehere .lh-body p,.hw-whatshere .wh-body p{font-size:clamp(14px,1.11vw,16px) !important}
  /* vuelven las posiciones del Figma en %, que escalan con el lienzo
     (363 y 582 sobre 693), en vez de los px fijos de ayer */
  .hw-whatshere .wh-body{top:52.38% !important}
  /* 83,98 % es el del Figma, pero con la Calluna web el párrafo compone en 7
     líneas (el Figma, 6) y el CTA quedaba a 18 px: baja a 88 % para los 46 px
     de aire del diseño */
  .hw-whatshere .wh-cta{top:88% !important}
  /* el CTA mide 174 (Figma 165): se corre 9 px para que la flecha acabe en
     x1202, donde la pone el Figma */
  .hw-livehere .lh-cta{left:71.39% !important}

  /* el cuadro manda (394×394): sin aspect-ratio el span crecía con la foto */
  .hw-whatshere .wh-photo{overflow:hidden !important;aspect-ratio:1/1 !important}
  .hw-whatshere .wh-photo img{
    width:135.79% !important;max-width:none !important;height:auto !important;
    aspect-ratio:auto !important;object-fit:fill !important;margin-top:-75.64% !important}
}

/* ---- SLIDER "TOWN & LOWCOUNTRY" · 2026-09-16 ----
   Nodo 12013:49 (breaker slider, 1440×775) con el componente
   collage_slide_autoplay (12114:766). Ayer se había dejado en una "ventana"
   de 440 px (372 de collage + 34 de relleno) midiendo bandas de fondo: en el
   Figma la banda mide 775 y las fotos van de y0 a y736. Las posiciones de las
   fotos están ahora en hw-collage.js, a escala 1:1.
   · 155 px de aire desde "Slow and fast" (ya puesto en .hw-whatshere) y 54
     hasta "In the middle of everything-is-possible".
   · La lámina TOWN & LOWCOUNTRY (type repeat bg, 1440×595) arranca 77 px por
     debajo del borde y va a su tamaño, centrada; antes iba en `cover` sobre
     toda la sección y cambiaba de escala con el alto.
   · Marco verde: 24 px de borde sobre 228 (el Figma), con box-sizing de borde
     para que el aspect-ratio sea el de la pieza entera. */
@media(min-width:901px){
  .hw-breaker{padding:0 !important}
  .hw-breaker .fusion-layout-column,
  .hw-breaker .fusion-column-wrapper,
  .hw-breaker .fusion-text{min-height:775px !important}
  .hw-breaker .hw-collage-auto{height:775px !important;overflow:hidden}
  .hw-whatshere{margin-bottom:min(10.76vw,155px) !important}
  .hw-commercial{margin-top:min(3.75vw,54px) !important}
  .hw-breaker__bg{
    background-size:1440px 595px !important;
    background-position:center 77px !important;
    background-repeat:no-repeat !important}
  .hw-collage__item{box-sizing:border-box}
  .hw-collage__item--green{padding:24px !important}
  /* Sello: en el Figma (seal, 162 px) el aro de texto es más menudo y la H
     ocupa ~16 % del disco; aquí iban a 16,25 unidades y al 25 %, heredados de
     cuando el disco encogió de 190 a 152 y se compensó al alza. */
  .hw-collage__badge-ring text{font-size:13.5px !important;letter-spacing:3px !important}
  .hw-collage__badge-mark{width:16% !important;height:16% !important}
}
/* Móvil: el lienzo del collage se escala al 35 % (bloque de móvil del
   preámbulo), pero la ventana de 372 px de ayer también le llegaba y lo dejaba
   en 130 px de alto, con las fotos cortadas. Ahora el lienzo mide los 775 del
   Figma y la caja, 775 × 0,35 = 271. */
@media(max-width:900px){
  .hw-breaker .hw-collage-auto{height:775px !important}
  .hw-breaker .fusion-layout-column,
  .hw-breaker .fusion-column-wrapper,
  .hw-breaker .fusion-text{min-height:0 !important;height:271px !important}
}

/* ---- SLIDER: SELLO Y ENCUADRE · 2026-09-16 (tarde) ----
   · El sello del Figma (nodo seal, 12013:79) no lleva texto vivo: el aro son
     trazos en #BAC3CB, en un radio bastante más cerrado que nuestro textPath
     (que se salía hacia el borde de la forma), y la H es BLANCA sobre un
     cuadrado TOMATE de 22 px (13,6 % del disco). Se usan esos mismos trazos:
     `hw-seal-ring.svg` es el aro (lo que gira) y `hw-seal-h.svg` la H quieta.
     El textPath se oculta pero se queda para lectores de pantalla.
   · `--pos`: encuadre por foto desde hw-collage.js (la reunión, abajo). */
.hw-collage__item img{object-position:var(--pos,center center)}
.hw-collage__badge-ring{
  background:url('/wp-content/themes/Avada-Child-Theme/img/hw-seal-ring.svg') center/100% 100% no-repeat}
.hw-collage__badge-ring text{fill:transparent !important}
.hw-collage__badge-mark{
  width:13.6% !important;height:13.5% !important;
  -webkit-mask:none !important;mask:none !important;
  background:url('/wp-content/themes/Avada-Child-Theme/img/hw-seal-h.svg') center/100% 100% no-repeat !important}

/* ---- IN THE MIDDLE OF EVERYTHING-IS-POSSIBLE · 2026-09-16 ----
   Nodo 12013:96 (commercial, 708 de alto). Las posiciones ya casaban con el
   Figma a 1440 (título y177, cuerpo y353, foto 570×598 en x730,y110). Lo que
   faltaba, igual que en las secciones anteriores:
   · CTA en `cta_reg` (15 px, sin el estirado), cuerpo a 16 px;
   · tope de 1440 (el lienzo va en la columna) — desde 1151, porque por
     debajo el preámbulo apila la sección;
   · el titular corta IN THE MIDDLE / OF EVERYTHING- / IS-POSSIBLE (con
     `<br />` en el contenido) y el texto del cuerpo es el del Figma;
   · 212 px de aire hasta "Explore the life" (8231→8443); eran 230.
   El CTA se queda en 88,5 % y no en el 85,17 % del Figma: el párrafo compone
   en 8 líneas (Figma, 7) y así conserva los ~45 px de aire del diseño. */
@media(min-width:1151px){
  .hw-commercial{
    aspect-ratio:auto !important;
    padding-left:max(0px, calc(50% + 30px - 720px)) !important;
    padding-right:max(0px, calc(50% + 30px - 720px)) !important}
  .hw-commercial .fusion-layout-column{aspect-ratio:1440/708;height:auto !important}
  .hw-explorelife{margin-top:min(14.72vw,212px) !important}

  .hw-commercial .cm-cta,.hw-commercial .cm-cta p{
    font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
    font-weight:600 !important;line-height:1.2 !important;letter-spacing:1.95px !important;
    font-feature-settings:"ss01" 1}
  .hw-commercial .cm-cta p{transform:none !important}
  .hw-commercial .cm-cta p::after{transform:none !important;margin-left:13px !important}
  .hw-commercial .cm-body,.hw-commercial .cm-body p{font-size:clamp(14px,1.11vw,16px) !important}
}

/* ---- EXPLORE THE LIFE + READ ALL ABOUT IT · 2026-09-16 ----
   Nodos 12017:115 (explore the life, 985) y 12017:181 (what's happening,
   1097; fichas 14362:6502 / 6524).

   EXPLORE THE LIFE (el vídeo se queda un 10 % más pequeño, decisión del
   cliente):
   · CTA "Come visit us" en `cta_reg` (15 px, sin estirado);
   · entradilla en `body_reg` 16/1.8, caja de 458 como el Figma (2 líneas);
   · tope: el padding lateral no baja de lo que da a 1440 y centra en
     pantallas anchas (antes crecía con la ventana: 1066 px de alto a 1728);
   · 54 px de aire hasta Read all about it (Figma 9428→9482); eran 0.

   READ ALL ABOUT IT:
   · columna izquierda en x140 (estaba en 88) y el titular 28 px más abajo
     que las fichas (Figma: título y+138, fichas y+110); entradilla de 295 en
     16/1.8; CTA en `cta_reg`;
   · fichas de 333 px en x551 y x967 (eran 357, y la segunda en 992), foto
     333×220, título Juana 20/1.4, fecha Gravitica 12/1.6 con 1,56 px, extracto
     Calluna 14/1.4 recortado a 2 líneas y "Read More" 14 subrayado, con 6 px
     entre piezas: es lo que hacía que la sección midiera 1397 frente a 1097;
   · 54 px hasta el formulario (antes 110 de relleno). */
@media(min-width:1151px){
  .hw-explorelife{
    /* mismo tope que Read all about it para que el vídeo y las noticias
       compartan ancho también entre 1151 y 1440 (con 13,75 % el vídeo
       encogía y las noticias no) */
    padding-left:max(40px, calc(50% + 30px - 530px)) !important;
    padding-right:max(40px, calc(50% + 30px - 530px)) !important;
    margin-bottom:min(3.75vw,54px) !important;
    /* Las franjas son una lámina de 1440×985 y la sección medía 947: con
       `cover` se recortaban arriba y abajo y la primera y la última franja
       salían partidas (en pantallas algo más anchas, más). La sección vuelve a
       los 985 del Figma (vídeo de 603 centrado) y la
       lámina se ajusta a la caja, sin recorte, a cualquier ancho. */
    /* 2026-09-16 (tarde, Santiago): en el Figma el borde del vídeo corta la
       SEGUNDA franja (se ve una entera y un trozo arriba y abajo). Con el
       vídeo un 10 % menor y la sección a 985 asomaban casi dos. Se escala la
       sección en la misma proporción que el vídeo (603/660 → 985 × 0,914 =
       900) y la lámina con ella: 138,5 + 20 del bloque interior + 603 + 138,5. */
    padding-top:138.5px !important;padding-bottom:138.5px !important;
    background-size:100% 100% !important}
  .hw-el-sub{font-size:16px !important;line-height:1.8 !important;letter-spacing:.32px !important;
    max-width:458px;margin-left:auto !important;margin-right:auto !important}
  .hw-el-cta{font-size:15px !important;letter-spacing:1.95px !important;line-height:1.2 !important;
    font-weight:600 !important;font-feature-settings:"ss01" 1;transform:none !important}

  /* 2026-09-16 (tarde) · Santiago: los textos y las fichas van al ANCHO DEL
     VÍDEO de Explore the life (en el Figma, 140→1300 ambos; aquí el vídeo es
     un 10 % menor, 190→1250). Mismo tope que ese bloque, así que en pantallas
     anchas tampoco se abre. Texto en x190 y fichas en x501 / x917. */
  .hw-happening{
    padding-bottom:0 !important;
    padding-left:max(40px, calc(50% + 30px - 530px)) !important;
    padding-right:max(40px, calc(50% + 30px - 530px)) !important;
    /* Visualmente el Figma deja ~205 px entre el último "Read More" y el
       formulario (sus fichas son más altas que su contenido); con los 26 de
       margen de la ficha, 180 */
    margin-bottom:min(12.5vw,180px) !important}
  .hw-happening > .fusion-builder-row{margin-left:0 !important;margin-right:0 !important;
    width:100% !important;max-width:100% !important;flex-wrap:nowrap !important}
  .hw-happening .hp-left{width:310px !important;flex:0 0 310px !important;padding:0 !important;margin:0 !important}
  .hw-happening .hp-right{width:auto !important;flex:1 1 auto !important;margin:0 !important}
  .hw-happening .hp-left > .fusion-column-wrapper,
  .hw-happening .hp-right > .fusion-column-wrapper{margin-left:0 !important;margin-right:0 !important}
  .hw-happening .hp-left .fusion-column-wrapper{padding-left:0 !important;padding-top:28px !important}
  .hw-happening .fusion-post-cards{padding-left:0 !important}
  .hw-happening .hp-title{margin-bottom:11px !important}
  .hw-happening .hp-intro,.hw-happening .hp-intro p{
    max-width:295px;line-height:1.8 !important;letter-spacing:.32px !important}
  .hw-happening .hp-cta{margin-top:37px !important}
  .hw-happening .hp-cta,.hw-happening .hp-cta p,.hw-happening .hp-cta a{
    font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
    font-weight:600 !important;line-height:1.2 !important;letter-spacing:1.95px !important;
    font-feature-settings:"ss01" 1}
  .hw-happening .hp-cta p{transform:none !important}
  .hw-happening .hp-cta p::after,.hw-happening .hp-cta a::after{transform:none !important}

  .hw-happening .fusion-grid-column{padding-bottom:0 !important;margin-bottom:26px !important}
  .hw-happening .fusion-grid-column > .fusion-column-wrapper{width:333px !important;max-width:333px !important}
  .hw-happening .fusion-post-card img{aspect-ratio:333/220 !important}
  .hw-happening .fusion-builder-row-inner,
  .hw-happening .fusion-builder-row-inner .fusion-column-wrapper{margin:0 !important;padding:0 !important;width:100% !important;max-width:100% !important}
  .hw-happening .fusion-builder-row-inner .fusion-layout-column{margin:0 !important;padding:0 !important;width:100% !important}
  .hw-card-title{margin:16px 0 0 !important}
  .hw-card-title,.hw-card-title a,.hw-card-title .fusion-title-heading{
    font-family:'Juana','Playfair Display',Georgia,serif !important;font-weight:400 !important;
    font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}
  .hw-card-date{margin:6px 0 0 !important}
  .hw-card-date,.hw-card-date p{font-size:12px !important;line-height:1.6 !important;
    letter-spacing:1.56px !important;text-transform:uppercase;margin-bottom:0 !important;font-feature-settings:"ss01" 1}
  .hw-card-excerpt{margin:6px 0 0 !important}
  .hw-card-excerpt p{font-size:14px !important;line-height:1.4 !important;letter-spacing:.28px !important;
    margin:0 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hw-happening .hw-card-more,.hw-happening .hw-card-excerpt + div{margin-top:6px !important}
  .hw-card-more .fusion-button-text,.hw-happening .fusion-post-card .fusion-button-text{
    font-size:14px !important;line-height:1.4 !important;letter-spacing:.28px !important}
}

/* ---- HOME MÓVIL · REVISIÓN DE SANTIAGO · 2026-09-16 ---- */

/* 6 · Blanco entre el formulario y el pie: Avada deja 60 px de relleno bajo
   el contenido (#main). Todas las páginas que acaban en el formulario global
   lo pegan al pie (en escritorio también estaba, se notaba menos). */
body:has(.hw-form) #main{padding-bottom:0 !important}

@media(max-width:760px){
  /* 1 · Héroe: medía 700 y el vídeo de marca empezaba en y637, fuera de la
     primera pantalla. Con 560 (o el 66 % de la vista, nunca menos de 460) el
     rótulo, el subtítulo y la guía caben y el vídeo entra en pantalla. */
  .hw-hero{--hw-hero-h:max(460px, min(66vh, 560px))}
}

@media(max-width:900px){
  /* 2 · "Trails to run…" y el vídeo del riego, centrados en el lienzo móvil
     (iban cargados a la derecha con las x del comp). */
  .s-trails{left:22.14% !important}
  .s-trails,.s-trails p{text-align:center !important}
  .s-sprinkler{left:14.89% !important}
}

@media(max-width:1150px){
  /* 3 · Come on down: el mapa salía a 133 px porque le llegaban las reglas de
     escritorio sin media query (`.l-map{width:39.58%;left:50.69%}`). Pasa al
     ancho completo y ARRIBA del titular, igual que la foto de la niña en
     Schools. */
  .hw-location .l-map{
    width:100% !important;max-width:570px;left:auto !important;top:auto !important;
    margin:0 0 22px !important}
  /* el ítem flexible es el envoltorio de Avada, no la imagen */
  .hw-location .fusion-image-element:has(.l-map){order:-1}

  /* 4 · Explore the life: 162 px de franjas arriba y abajo del vídeo (casi
     tres); se deja en franja y media. */
  .hw-explorelife{padding-top:76px !important;padding-bottom:76px !important}

  /* 5 · Read all about it: las fichas iban 24 px corridas a la derecha (la
     regla de escritorio `padding-left:24px` no tenía media query): 46 px a la
     izquierda y 22 a la derecha. Ahora 34 y 34, y el titular, el párrafo y el
     CTA arrancan en ese mismo 34. */
  .hw-happening .fusion-post-cards{padding-left:12px !important;padding-right:12px !important}
  .hw-happening .hp-left > .fusion-column-wrapper{padding-left:13px !important}
}

/* ---- HOME TABLET · 2026-09-16 ----
   Revisión a 768 (iPad vertical) y 1024 (horizontal). Schools se queda como
   está (decisión de Santiago). */

@media(min-width:901px) and (max-width:1439px){
  /* El collage "Welcome" es un lienzo en % que encoge con la ventana, pero sus
     párrafos iban a 20 px fijos: a 1024 "…to pediatricians" caía sobre la foto
     de los árboles y "great people" tapaba el CTA. El texto escala con el
     lienzo (20 px a 1440 = 1,389vw), con 13 px de mínimo. */
  .hw-scatter .s-vibe,.hw-scatter .s-vibe p,
  .hw-scatter .s-drive,.hw-scatter .s-drive p,
  .hw-scatter .s-trails,.hw-scatter .s-trails p,
  .hw-scatter .s-fresh,.hw-scatter .s-fresh p{font-size:max(13px, 1.389vw) !important}
}

@media(max-width:900px){
  /* Read all about it a 768: Avada aún ponía el texto y las fichas lado a lado
     (texto de 251 px, fichas de 182): se apila como en el móvil, con las dos
     columnas de fichas a todo el ancho. */
  .hw-happening > .fusion-builder-row{flex-wrap:wrap !important}
  .hw-happening .hp-left,.hw-happening .hp-right{width:100% !important;flex:0 0 100% !important}
}
@media(min-width:641px) and (max-width:900px){
  /* y el texto, al mismo borde que las fichas (41 px a 768; iba en 62) */
  .hw-happening .hp-left > .fusion-column-wrapper{padding-left:0 !important;margin-left:33px !important;margin-right:33px !important}
}

/* "PLEASED TO MEET YOU" (formulario, todas las páginas): la caja del titular
   tiene un tope de 330 px, que a 48 px da PLEASED TO / MEET YOU; a 42 px
   (tablet y móvil) cabía "PLEASED TO MEET" y quedaba YOU solo. El tope pasa a
   medirse en `em` del propio titular (330/48) y la caja se centra (a 768 y
   1024 iba pegada a la izquierda). */
.hw-form .fusion-title{margin-left:auto !important;margin-right:auto !important}
.hw-form h2.fusion-title-heading{max-width:6.9em;margin-left:auto !important;margin-right:auto !important}

/* BugHerd #95 (2026-09-24): «vertical spacing between these article units is a
   little tight». Había 52 px entre el «Read More» y la foto de la fila de abajo. */
.hw-happening .fusion-grid-posts-cards > li{margin-bottom:28px !important}

/* BugHerd #92 (2026-09-24): «Background text appears pixelated (can it be
   live text or svg instead?) and is cropped off at the bottom».
   La lámina TOWN & LOWCOUNTRY era un PNG de 2400 px pintado a 1440 (1,67×:
   borroso en retina) y su cuarta fila venía cortada en el propio PNG. Ahora
   es TEXTO VIVO en Juana ExtraLight, que ya es la fuente real del sitio.
   Medidas sacadas de la lámina por correlación (build-scripts/globals/README):
   cuerpo 168 px con 2,6 px de tracking, paso de fila ~145, color #EFE8E4 al 82 % sobre blanco, y cada
   fila arranca a una altura distinta de la frase, como en el Figma:
   «TOWN & LOWCOU…», «…COUNTRY TOWN &…», «…N & LOWCOUNTRY», «…WCOUNTRY TOWN».
   Los tres <span> ya estaban en el contenido (fila 1-3); la 4.ª es el ::after.
   Sólo escritorio: en móvil el collage se escala al 35 % y la lámina se queda. */
@media(min-width:901px){
  .hw-breaker__bg{background:none !important}
  .hw-breaker__bg span,.hw-breaker__bg::after{
    display:block !important;position:absolute;
    left:calc(50% - 720px);top:111px;
    font-family:'Juana','Playfair Display',Georgia,serif;font-weight:200;font-size:168px;
    line-height:1;letter-spacing:2.6px;text-transform:uppercase;white-space:nowrap;
    color:rgba(239,232,228,.82);font-variant-numeric:normal;
    user-select:none}
  .hw-breaker__bg span::after,.hw-breaker__bg::after{
    content:" Town & Lowcountry Town & Lowcountry Town & Lowcountry Town & Lowcountry"}
  .hw-breaker__bg::after{content:"Town & Lowcountry Town & Lowcountry Town & Lowcountry Town & Lowcountry"}
  .hw-breaker__bg span:nth-child(1){margin-left:-10px}
  /* tops = 77 (arranque de la lámina) + alto de mayúscula en la lámina − 22
     (lo que hay del borde de la línea al remate de la T a 168 px) */
  .hw-breaker__bg span:nth-child(2){margin-left:-1144px;top:259px}
  .hw-breaker__bg span:nth-child(3){margin-left:-451px;top:402px}
  .hw-breaker__bg::after{margin-left:-979px;top:545px}
}

/* ==================================================================
   JUANA CON NOMBRE PROPIO 2026-09-16
   Juana se servía SÓLO con el alias 'Playfair Display', y Avada carga la
   Playfair Display de verdad desde Google a peso 400. Con el mismo nombre de
   familia el navegador escoge la cara de Google (peso exacto) y la Juana
   Regular (rango 341-900) no llega a cargarse: las entradillas "en Juana"
   salían en Playfair o, si Google fallaba, en Georgia. La ExtraLight de los
   titulares sí salía, porque a 280 no hay otra cara que compita.
   Mismo arreglo que Gravitica/Poppins: familia propia 'Juana' delante del
   alias en todas las pilas. Ficheros del child theme (fonts/).
   ================================================================== */
@font-face{font-family:'Juana';src:url('fonts/Juana-ExtraLight.woff2') format('woff2');font-weight:100 340;font-style:normal;font-display:swap}
@font-face{font-family:'Juana';src:url('fonts/Juana-Regular.woff2') format('woff2');font-weight:341 900;font-style:normal;font-display:swap}
@font-face{font-family:'Juana';src:url('fonts/Juana-RegularIt.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
/* La entradilla de la Home ("Deep in the coastal woodlands…", nodo 14002:583)
   es un Título de Avada: su familia sale de las opciones de tipografía del tema
   ('Playfair Display' a secas), no de ninguna pila del child theme. */
.hw-intro .fusion-title-heading{font-family:'Juana','Playfair Display',Georgia,serif !important}

/* ==================================================================
   OUR STORY · FIDELIDAD 2026-09-16
   Tarea 6.1 del plan (con 3.9) y la revisión de Santiago del 16. Medidas del
   frame `14100:1148` (Our story - Desktop) leídas con get_design_context.
   Va al final de la hoja: gana por orden a OUR STORY y a TIPOGRAFÍA FIGMA.
   ================================================================== */

/* ---------- Héroe: 680 px, velo Boxwood al 40 % y la guía del Figma ----------
   Nodo 14100:2498. El héroe medía 725 (la columna sumaba 20 px de margen y la
   guía no llegaba al borde). La foto va anclada ABAJO (`object-bottom`) y el
   velo es plano, rgba(66,75,10,.4), no el radial oscuro de antes. */
/* Alto y relleno sólo en escritorio: en móvil y tablet el héroe crece con el
   titular (a 393 cae en 3-4 líneas). */
@media(min-width:1151px){
  .hw-os-hero{height:680px !important;min-height:680px !important;overflow:hidden;
    padding-top:234px !important}
}
.hw-os-hero{background-position:center bottom !important}
.hw-os-hero::before{background:rgba(66,75,10,.4)}
.hw-os-hero .fusion-layout-column,.hw-os-hero .fusion-column-wrapper{margin-bottom:0 !important}
/* "OUR STORY": Gravitica 12 / 19 px, 1,56 px (texto 14100:2502, y234). */
.hw-os-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-os-hero__eyebrow{margin-bottom:10px !important}
/* Guía (14115:2784): 121 px, de y559 al borde inferior, trazo en x717,5. El
   titular (dos líneas de 85,8) acaba en y435 → 124 px de aire. */
@media(min-width:1151px){
  .hw-os-hero__rule span{height:121px !important;margin:124px auto 0 !important;
    transform:translateX(-2px)}
}

/* ---------- Intro (14100:1586) ----------
   Texto en caja de 768 que arranca 131 px bajo el héroe. Juana 20/1.9 y, tras
   una línea en blanco (38 px), el remate en Juana 28/1.7 con 0,56 px. */
@media(min-width:1151px){
  .hw-os-intro{padding-top:131px !important}
}
.hw-os-intro__body p{max-width:768px !important}
.hw-os-intro__body{margin-bottom:38px !important}
.hw-os-intro__lead p{
  font-size:28px !important;line-height:1.7 !important;letter-spacing:.56px !important;
  max-width:768px !important}
@media(max-width:760px){
  .hw-os-intro__lead p{font-size:22px !important}
}
/* El marco del rótulo: 64 px bajo el texto y 14 px a la izquierda del centro
   (instancia 14857:14300 en x420, no x434,5). */
.hw-os-intro__scallop{margin-top:68px !important}
@media(min-width:1151px){
  .hw-os-intro .hw-os-frame--sign{left:-14px}
}
/* El crema acaba en y1526, a media altura del marco: la sección termina 172 px
   por debajo de ese corte (el marco asoma 38 px bajo ella). */
.hw-os-intro{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 calc(100% - 172px),
    #FFFFFF calc(100% - 172px) 100%) !important}

/* ---------- La visión (14103:2527) ----------
   Título a 48 como el resto de H2 (se había quedado en 42). Tarjetas: título
   Juana 20/1.4 (`header_juana`) y texto Calluna 14/1.4 con 0,28 px
   (`body_small`) en caja de 155-165. Iconos al tamaño de sus vectores. */
@media(min-width:1151px){
  .hw-os-vision__title p{font-size:48px !important}
  /* El margen del encabezado no se aplica (la fila es flex y otro bloque lo
     fija): el aire hasta los iconos va arriba de cada tarjeta. */
  .hw-os-vc{padding-top:28px !important}
  .hw-os-split--kayak{margin-top:7px !important}
}
.hw-os-vc__title{
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-size:20px !important;
  line-height:1.4 !important;letter-spacing:.4px !important;margin-bottom:9px !important;max-width:207px}
.hw-os-vc__body{
  font-size:14px !important;line-height:1.4 !important;letter-spacing:.28px !important;max-width:165px}
.hw-os-vc__icon{height:126px;margin-bottom:10px !important}
.hw-os-vc:nth-child(2) .hw-os-vc__icon img{width:113px}
.hw-os-vc:nth-child(3) .hw-os-vc__icon img{width:105px}
.hw-os-vc:nth-child(4) .hw-os-vc__icon img{width:110px}
.hw-os-vc:nth-child(5) .hw-os-vc__icon img{width:116px}
.hw-os-vc:nth-child(6) .hw-os-vc__icon img{width:136px}

/* ---------- Bloques con foto (14100:1279 location, 14100:1294 raydient) ----------
   Columna de texto de 472 (no 458) a 118 px de la foto. La foto del kayak pasa
   a 570×598 (antes 430 de alto) y la del perro a 394×394 metida 88/102 px:
   los ficheros nuevos (`hw-os-kayak-tall`, `hw-os-dog-feet`) llevan ya el
   encuadre del Figma, con los pies y el perro. */
@media(min-width:1151px){
  .hw-os-split__text{width:40.69% !important}
  .hw-os-split--kayak .hw-os-split__media,
  .hw-os-split--dog .hw-os-split__text{margin-left:10.17% !important}
  .hw-os-split--kayak .hw-os-split__text{padding-top:15px}
  .hw-os-split--dog .hw-os-split__text{padding-top:5px}
  /* 226 px entre la foto del kayak y el marco del perro, y 235 hasta el
     formulario (en staging eran 149 y 170). Medido con Calluna cargada: con
     la sustituta el párrafo del kayak salía más largo y engañaba. */
  .hw-os-split--dog{margin-top:77px !important;padding-bottom:235px !important}
  .hw-os-split--dog .hw-os-eyebrow{margin-bottom:12px !important}
  .hw-os-split--dog .hw-os-h2{margin-bottom:18px !important}
  .hw-os-split.hw-os-split--dog .hw-os-cta{margin-top:55px !important}
}
.hw-os-plain{aspect-ratio:570/598}
.hw-os-split--dog .hw-os-frame{aspect-ratio:570/598}
.hw-os-split--dog .hw-os-frame__win{left:15.44%;top:17.06%;width:69.12%;height:65.89%}
.hw-os-eyebrow{margin-bottom:18px !important}
.hw-os-h2{margin-bottom:24px !important}
.hw-os-body p{line-height:1.8 !important}
.hw-os-body p + p{margin-top:10px !important}

/* ---------- CTA: `cta_reg` ----------
   Gravitica Demibold 15 / 1.2, 1,95 px, `ss01` (instancias 14100:1288 y
   14100:1301). Estaban a 12 px con 2 px. */
.hw-os-cta a{
  font-size:15px !important;line-height:1.2 !important;letter-spacing:1.95px !important;
  font-feature-settings:"ss01" 1}
/* Sólo en Our Story: Live Here (y otras) reutilizan la clase `hw-os-cta` en
   sus CTA y este margen les descuadraba los botones. */
.hw-os-split .hw-os-cta{margin-top:36px !important}

/* ---------- BugHerd #186 · #187 · #188 (25-09) · MÓVIL ---------- */
@media(max-width:760px){
  /* #188 · el héroe: la mesa está al 34 % del ancho de la foto (2560×1209);
     con `center` a 390 px de pantalla sólo se veía el borde izquierdo de la
     escena. 28 % deja la mesa en el centro del encuadre. */
  body .hw-os-hero{background-position:28% bottom !important}

  /* #186 · la foto del marco festoneado tiene que PARTIR el cambio de fondo
     (crema arriba, blanco abajo), como en escritorio. El degradado de
     escritorio corta a 172 px del final de la sección, que en móvil cae en
     otro sitio: aquí la sección va en crema lisa y el blanco lo pinta la
     propia foto con un ::before a sangre desde su mitad hacia abajo, detrás
     de todo (la sección aísla la pila; `clip` en x para no crear scroll). */
  body .hw-os-intro{background:var(--awb-color1,#EFEAE4) !important;
    isolation:isolate;overflow-x:clip}
  body .hw-os-intro .hw-os-intro__scallop{position:relative}
  body .hw-os-intro .hw-os-intro__scallop::before{content:"";position:absolute;z-index:-1;
    top:50%;left:calc(50% - 50vw);width:100vw;height:2000px;background:#FFFFFF;
    pointer-events:none}

  /* #187 · los iconos de «Our Vision» iban pegados al texto de la ficha de
     arriba (0 px entre fichas); 40 px, como el aire entre la entradilla y el
     primer icono. */
  body .hw-os-vision .hw-os-vc + .hw-os-vc{margin-top:40px !important}
}

/* BugHerd #194 (25-09) · móvil: tras la última ficha de «Vision» quedaban
   ~114 px vacíos antes del módulo siguiente: el `<p>` vacío que deja wpautop
   y el margen del último párrafo de cada ficha. */
@media(max-width:760px){
  body .hw-os-vc__t > p:empty{display:none !important}
  body .hw-os-vc__t p:last-child{margin-bottom:0 !important}
}

/* ==================================================================
   LOCATION · FIDELIDAD 2026-09-16
   Revisión de Santiago: rótulo del héroe, velo de la foto y el párrafo de
   Savannah. Frame `14122:2796` (Location - Desktop), leído con
   get_design_context. Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe (14122:3304): 680 px, mismo sistema que Our Story ----------
   "LOCATION" (14122:3307) es Gravitica Demibold 12 / 19 px con 1,56 px en y234
   — no el antetítulo de 15 de las secciones. Titular en y263. La guía
   (14122:3308) va de y559 al borde: el héroe medía 695 y la guía empezaba en
   574. */
@media(min-width:1151px){
  .hw-loc-hero{height:680px !important;min-height:680px !important;overflow:hidden;
    padding-top:234px !important}
}
.hw-loc-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-loc-hero__eyebrow{margin-bottom:10px !important}
@media(min-width:1151px){
  .hw-loc-hero__rule span{margin-top:124px !important;transform:translateX(-2px)}
}
/* Velo: la foto del Figma (instancia bg_location, 14230:2466) trae el tinte
   horneado. Comparada píxel a píxel con nuestra foto (correlación 0,97), el
   mejor ajuste es un velo plano #424B0A (Boxwood) al 40-42 %: el mismo de Our
   Story. Sustituye al radial oscuro, que apagaba la foto sin darle el verde. */
.hw-loc-hero::before{background:rgba(66,75,10,.4)}

/* ---------- Savannah (14122:2799) ----------
   Párrafo `body_reg`: Calluna 16 / 1.8 (28,8 px, estaba a 28) con 0,32 px y
   cifras `lnum pnum`, a 18 px del titular (estaba a 26). */
.hw-loc-body p{line-height:1.8 !important;font-feature-settings:"lnum" 1,"pnum" 1}
.hw-loc-savannah .hw-loc-h2{margin-bottom:18px !important}

/* BugHerd #174 (25-09): «EXPLORE HEARTWOOD» bajo el mapa, centrado, con el
   CTA subrayado de la casa (`.hw-cm-cta`, el de «Let's talk business»; `.s-cta` NO, que en la home va `absolute`), rollover en el bloque CTA · ROLLOVER). */
.hw-loc-map .hw-loc-map__cta{margin:56px 0 0 !important;text-align:center}
.hw-loc-map .hw-loc-map__cta p{margin:0 !important}
@media(max-width:760px){.hw-loc-map .hw-loc-map__cta{margin-top:32px !important}}

/* ==================================================================
   EXPLORE · FIDELIDAD 2026-09-16
   Revisión rápida de tipografías contra el frame `14138:3979` (Explore
   Heartwood - Desktop). El directorio (List view / Map view, la app) NO se
   toca: queda para su propia sesión. Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe: el mismo sistema que Our Story y Location ----------
   "EXPLORE HEARTWOOD" es Gravitica 12 / 19 px con 1,56 px en y234 (no el
   antetítulo de 15); titular en y263; la guía llega al borde de un héroe de
   680 (medía 695). */
@media(min-width:1151px){
  .hw-ex-hero{height:680px !important;overflow:hidden}
}
.hw-ex-hero .fusion-layout-column{margin-bottom:0 !important}
.hw-ex-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-ex-hero__eyebrow{margin-bottom:10px !important}
@media(min-width:1151px){
  .hw-ex-hero__rule span{margin-top:124px !important;transform:translateX(-2px)}
}

/* ---------- Intro: Juana, no Calluna ----------
   14138:4026 es `messaging_medium`: Juana Regular 20 / 1.9 con 0,4 px. Salía
   en Calluna (la pila vieja 'Lora' la recogía el cuerpo del sitio). */
.hw-ex-intro p{font-family:'Juana','Playfair Display',Georgia,serif !important;letter-spacing:.4px !important}

/* ---------- Cuerpos `body_reg`: Calluna 16 / 1.8, cifras lnum pnum ----------
   Estaban a 28 px de interlineado (1.75). */
.hw-ex-grow__intro p,.hw-ex-d__b,.hw-ex-d__b p,.hw-ex-body p,.hw-ex-here__intro p,.hw-ex-next__body p{
  line-height:1.8 !important;font-feature-settings:"lnum" 1,"pnum" 1}

/* ---------- Distritos: `messaging_eyebrow` ----------
   "TOWN DISTRICT"… (15329:10859 y hermanos): Gravitica 15 / 1.7, 1,95 px. Iban
   a 13 / 13 con 2 px. */
.hw-ex-d__t{font-size:15px !important;line-height:1.7 !important;letter-spacing:1.95px !important}

/* ---------- Coming soon (14140:4579) ----------
   Antetítulo `messaging_eyebrow` (15 / 1.7, 1,95 px; iba a 11) y titular
   `messaging_xl`: Juana ExtraLight 78 / 1.1 con 1,56 px (iba a 90 / 0.96,
   calibrado cuando la fuente era Cormorant). */
.hw-ex-next__eyebrow p{font-size:15px !important;line-height:1.7 !important;letter-spacing:1.95px !important}
@media(min-width:1151px){
  .hw-ex-next__title p{font-size:78px !important;line-height:1.1 !important;letter-spacing:1.56px !important;font-weight:280 !important}
}

/* ---------- BugHerd #192 (25-09): el mapa de distritos en móvil ----------
   Strada: «use the file as is». Los rótulos vivos (en cqw) se amontonaban a
   375 px, así que en móvil va la imagen ENTERA del mapa de escritorio con sus
   rótulos (`hw-ex-districts-map-labeled.webp`, captura 2× del mapa a 1160 y
   bajada a 1400) y se esconden el dibujo y los rótulos sueltos. En escritorio
   esa imagen va con `display:none` y, al ser `lazy`, ni se descarga.
   Y el fondo: como en escritorio, crema hasta la MITAD del mapa y blanco
   desde ahí, para que las fichas de distrito queden sobre blanco. El corte
   de escritorio es un degradado a 904 px fijos; en móvil la altura de lo de
   arriba varía, así que el blanco lo pinta el propio mapa con un ::after a
   sangre desde su mitad, detrás del contenido (la sección aísla la pila). */
.hw-ex-map__baked{display:none}
@media(max-width:1150px){
  .hw-ex-grow{isolation:isolate;overflow:hidden}
  .hw-ex-map{position:relative}
  .hw-ex-map::after{content:"";position:absolute;z-index:-1;top:50%;
    left:calc(50% - 50vw);width:100vw;height:6000px;background:#FFFFFF;
    pointer-events:none}
}
@media(max-width:760px){
  .hw-ex-map__fig{aspect-ratio:auto}
  .hw-ex-map__fig .hw-ex-map__art,
  .hw-ex-map__fig .hw-exlm{display:none !important}
  .hw-ex-map__fig .hw-ex-map__baked{display:block;width:100%;height:auto;margin:0 !important}
}

/* ---------- BugHerd #193 (25-09): «What's next?» en móvil ----------
   Apiladas, el titular y el cuerpo quedaban pegados (la columna derecha
   perdía su margen por el `margin-left:0 !important` del bloque responsive
   y el `margin-top` sin `!important`). 32 px, el aire antetítulo→titular. */
@media(max-width:1150px){
  .hw-ex-next .fusion-layout-column.hw-ex-next__r{margin-top:32px !important}
}

/* ==================================================================
   LIVE HERE · FIDELIDAD 2026-09-16
   Revisión rápida contra el frame `14620:6415` (Live Here - Desktop), página
   2175 (/real-estate/). Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe: el mismo sistema que Our Story, Location y Explore ----------
   "LIVE HERE" (14620:6456) en Gravitica 12 / 19 px con 1,56 px en y234;
   titular en y263; guía de y559 al borde de un héroe de 680 (medía 695). */
@media(min-width:1151px){
  .hw-lh-hero{height:680px !important;min-height:680px !important;overflow:hidden;
    padding-top:234px !important}
  .hw-lh-hero__rule span{margin-top:124px !important;transform:translateX(-2px)}
}
.hw-lh-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-lh-hero__eyebrow{margin-bottom:10px !important}

/* ---------- Barrios: tarjetas ----------
   Nombre `header_juana` Juana 20 / 1.4 con 0,4 px (iba a 22); texto
   `body_small` Calluna 14 / 1.4 con 0,28 px; estado `nav_gravitica`
   Gravitica 12 / 1.6 con 1,56 px (iba a 11 con 2 px), ~34 px bajo el texto. */
.hw-lh-hood__n{font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}
.hw-lh-hood__b{letter-spacing:.28px !important;font-feature-settings:"lnum" 1,"pnum" 1}
.hw-lh-hood__t{font-size:12px !important;line-height:1.6 !important;letter-spacing:1.56px !important;
  font-feature-settings:"ss01" 1;margin-top:34px !important}

/* ---------- Cuerpos `body_reg`: cifras lnum pnum ---------- */
.hw-lh-body p,.hw-lh-hoods__intro p{font-feature-settings:"lnum" 1,"pnum" 1}
/* Rentals: los dos párrafos van a 10 px (iban a 18) */
.hw-lh-body p + p{margin-top:10px !important}

/* ---------- Anchos del texto (Figma) ----------
   Homebuilders y Future neighborhoods: párrafo de 460 (no 472). */
.hw-lh-split--builders .hw-lh-body p,.hw-lh-future .hw-lh-body p{max-width:460px}
/* Rentals: los dos CTA a 30 px de distancia, como en el Figma (65 en staging). */
.hw-lh-cta.hw-lh-cta--2{margin-top:1px !important}
/* Future neighborhoods: el texto empieza en x140 y el collage en x730. El
   `margin-left` de la columna del collage perdía contra
   `.hw-lh-future .fusion-layout-column{margin:0}` (misma especificidad, va
   después) y la fila quedaba centrada: texto en x199, collage en x671. */
@media(min-width:1151px){
  .hw-lh-future .hw-lh-future__media{margin-left:10.172% !important}
}
/* ==================================================================
   VISIT US · FIDELIDAD 2026-09-16
   Revisión contra el frame `14340:4935` (Visit Us - Desktop), página 60
   (/contact/). Tarea 6.5 del plan. Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe: el mismo sistema que las demás páginas ----------
   "VISIT US" (14340:5021) Gravitica 12 / 19 px, 1,56 px en y234; titular en
   y263; guía de y559 al borde de un héroe de 680 (medía 695). */
@media(min-width:1151px){
  .hw-vu-hero{height:680px !important;min-height:680px !important;overflow:hidden;
    padding-top:234px !important}
  .hw-vu-hero__rule span{margin-top:124px !important;transform:translateX(-2px)}
}
.hw-vu-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-vu-hero__eyebrow{margin-bottom:10px !important}

/* ---------- "GET DIRECTIONS" (14340:5001) ----------
   Subrayado con una línea de 1 px y SIN flecha, 39 px bajo el texto. El
   CTA lleva también `hw-os-cta`, que le sumaba 34 px de margen y la flecha. */
.hw-vu-cta.hw-vu-cta--c{margin-top:0 !important}
.hw-vu-cta--c a::after{display:none !important}
.hw-vu-cta--c a{padding:3px 8px 4px;background:linear-gradient(currentColor,currentColor) no-repeat left bottom/100% 1px}

/* ---------- Model homes (14340:4986) ----------
   Texto en x140 y foto en x730: el `margin-left` de la foto perdía contra
   `.hw-vu-model .fusion-layout-column{margin:0}` y la fila salía centrada
   (x205 / x665). */
@media(min-width:1151px){
  .hw-vu-model .hw-vu-model__media{margin-left:11.207% !important}
}
/* Constructora `messaging_eyebrow`: Gravitica 15 / 1.7, 1,95 px (iba a 13).
   Barrio: Gravitica 12 / 1.6, 1,56 px (iba a 11). 16 px entre ambos. */
.hw-vu-b__n{font-size:15px !important;line-height:1.7 !important;letter-spacing:1.95px !important;
  font-feature-settings:"ss01" 1;margin-bottom:16px !important}
.hw-vu-b__h{font-size:12px !important;line-height:1.6 !important;letter-spacing:1.56px !important;
  font-feature-settings:"ss01" 1;margin-bottom:0 !important}
.hw-vu-b__d,.hw-vu-lead p{font-feature-settings:"lnum" 1,"pnum" 1}
/* el separador "|" en Veranda Blue, con dos espacios a cada lado */
.hw-vu-b__sep{color:var(--awb-color4,#6D7EA0) !important}
/* Cada ficha (barrio + dirección + teléfono) mide 83 en el Figma (77 aquí). */
.hw-vu-b__s{min-height:83px}
/* 244 px de la última ficha al formulario (en staging eran 257). */
@media(min-width:1151px){
  .hw-vu-model{padding-bottom:244px !important}
}
/* ==================================================================
   WELLNESS · FIDELIDAD 2026-09-16
   Revisión contra el frame `14620:8016` (Wellness - Desktop), página 7493
   (/wellness/). Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe: el mismo sistema que las demás páginas ----------
   "WELLNESS" (14620:8085) Gravitica 12 / 19 px, 1,56 px en y234; titular en
   y263; guía de y559 al borde de un héroe de 680 (medía 695). */
@media(min-width:1151px){
  .hw-we-hero{height:680px !important;min-height:680px !important;overflow:hidden;
    padding-top:234px !important}
  .hw-we-hero__rule span{margin-top:124px !important;transform:translateX(-2px)}
}
.hw-we-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-we-hero__eyebrow{margin-bottom:10px !important}

/* ---------- Intro: Juana, no Calluna ----------
   14620:8071 es `messaging_medium`: Juana Regular 20 / 1.9 con 0,4 px. */
.hw-we-intro p{font-family:'Juana','Playfair Display',Georgia,serif !important;letter-spacing:.4px !important}

/* ---------- Antetítulos `messaging_eyebrow` ----------
   Gravitica 15 / 1.7 con 1,95 px (iban a 11 / 11 con 2 px), 17 px sobre el
   titular. */
.hw-we-eyebrow,.hw-we-eyebrow-b p{font-size:15px !important;line-height:1.7 !important;
  letter-spacing:1.95px !important;font-feature-settings:"ss01" 1}
.hw-we-eyebrow,.hw-we-eyebrow-b{margin-bottom:17px !important}

/* ---------- Cuerpos `body_reg`: cifras lnum pnum ----------
   Titular → párrafo: 27 px en "Living in nature", 20 en las otras dos.
   Párrafo → CTA: 32 px (St. Joseph's) y 27 (Bē Health). Ancho 460 en esas dos. */
.hw-we-body,.hw-we-body-b p{font-feature-settings:"lnum" 1,"pnum" 1}
.hw-we-h2{margin-bottom:27px !important}
.hw-we-h2-b{margin-bottom:20px !important}
.hw-we-body-b p{max-width:460px}
.hw-we-split--sjc .hw-we-body-b{margin-bottom:32px !important}
.hw-we-split--be .hw-we-body-b{margin-bottom:27px !important}
/* En las secciones "-b" el margen lo llevaba también el <p> de dentro (18 y
   25 px) y se sumaba al del envoltorio: el aire sale sólo del envoltorio. */
.hw-we-eyebrow-b p,.hw-we-h2-b p,.hw-we-body-b p{margin-bottom:0 !important}
/* ==================================================================
   BĒ HEALTH · FIDELIDAD 2026-09-16
   Revisión contra el frame `14625:8547` (Be Health - Desktop), página
   /be-health/. Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe ----------
   "BĒ HEALTH" (14625:8588) Gravitica 12 / 19 px, 1,56 px en y196 (aquí el
   titular tiene tres líneas y el bloque arranca más arriba); titular en y225. */
.hw-bh-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-bh-hero__eyebrow{margin-bottom:10px !important}
@media(min-width:1151px){
  .hw-bh-hero{height:680px !important;min-height:680px !important;overflow:hidden}
}

/* ---------- Bloques ----------
   Párrafos `body_reg` con cifras lnum pnum. Health services: párrafo de 460 a
   18 px del titular. Fitness: titular y párrafo de 448. */
.hw-bh-body p{font-feature-settings:"lnum" 1,"pnum" 1}
.hw-bh-split--services .hw-bh-body p{max-width:460px}
.hw-bh-split--fitness .hw-bh-h2 p,.hw-bh-split--fitness .hw-bh-body p{max-width:448px}
/* Guía del héroe (14625:8589): de y559 al borde (salía en y545). */
@media(min-width:1151px){
  .hw-bh-hero__rule span{margin-top:77px !important;transform:translateX(-2px)}
  /* 246 px de la foto de Fitness al formulario (eran 259). */
  .hw-bh-split--fitness{padding-bottom:246px !important}
}
.hw-bh-split--services .hw-bh-h2{margin-bottom:18px !important}
.hw-bh-split--fitness .hw-bh-h2{margin-bottom:20px !important}
/* ==================================================================
   WHAT'S HAPPENING · FIDELIDAD 2026-09-16
   Revisión contra el frame `14300:2448` (Whats Happening - Desktop), página
   7494 (/whats-happening/). Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe ----------
   "WHAT'S HAPPENING" (14300:2534) Gravitica 12 / 19 px, 1,56 px en y268;
   titular de una línea en y297; guía (14300:2535) de y559 al borde (salía en
   y493 y se quedaba a 66 px de él). */
.hw-wh-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-wh-hero__eyebrow{margin-bottom:10px !important}
@media(min-width:1151px){
  .hw-wh-hero__rule span{margin-top:176px !important;transform:translateX(-2px)}
}

/* ---------- Intro: Juana (messaging_medium 20 / 1.9, 0,4 px) ---------- */
.hw-wh-intro p{font-family:'Juana','Playfair Display',Georgia,serif !important;letter-spacing:.4px !important}

/* ---------- Carril: "NEWS" / "EVENTS" ----------
   `header_flapjack_reg` (salían en Gravitica 600). Subtítulo `body_reg` y CTA
   `cta_reg` 15 / 1.2 / 1,95 con la flecha de 46 px de las demás páginas. */
.hw-wh-sec__h{font-family:'TAY Flapjack','Oswald',sans-serif !important;font-weight:400 !important;
  letter-spacing:.05em !important;line-height:1 !important}
.hw-wh-sec__s{font-feature-settings:"lnum" 1,"pnum" 1}
.hw-wh-sec__cta a{font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
  line-height:1.2 !important;letter-spacing:1.95px !important;font-feature-settings:"ss01" 1}
.hw-wh-sec__cta a::after{width:46px}

/* ---------- Fichas ----------
   Título `header_juana` Juana 20 / 1.4, 0,4 px (salía en Playfair a 28: el
   Título de Avada imprime su tamaño en línea, de ahí el !important).
   Fecha `nav_gravitica` 12 / 1.6, 1,56 px. Extracto `body_small` Calluna
   14 / 1.4, 0,28 px. "Read More" / "Get Details" Calluna 14 / 1.4 subrayado.
   6 px entre piezas; 16 px imagen → título (noticia) y 20 px imagen → fecha
   (evento). */
.hw-wh-card__t,.hw-wh-card__t a{font-family:'Juana','Playfair Display',Georgia,serif !important;
  font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important;font-weight:400 !important}
.hw-wh-card__t{margin:0 0 6px !important}
.hw-wh-card__meta{font-family:'Gravitica','Poppins',sans-serif !important;font-size:12px !important;
  line-height:1.6 !important;letter-spacing:1.56px !important;font-feature-settings:"ss01" 1;margin:0 0 6px !important}
.hw-wh-card__x{font-size:14px !important;line-height:1.4 !important;letter-spacing:.28px !important;
  font-feature-settings:"lnum" 1,"pnum" 1;margin:0 0 6px !important}
.hw-wh-card__cta a{font-family:calluna,'Lora',Georgia,serif !important;font-size:14px !important;
  line-height:1.4 !important;letter-spacing:.28px !important}
.hw-wh-card--event .hw-wh-card__media{margin-bottom:20px}
/* 21 px del subtítulo al CTA (salían 27) y 155 px de la última ficha de
   eventos al formulario (salían 167). */
.hw-wh-sec__s{margin-bottom:16px !important}
@media(min-width:1151px){
  .hw-wh-events{padding-bottom:155px !important}
}

/* ==================================================================
   EVENTS · FIDELIDAD 2026-09-16
   Sólo tipografías (la maquetación de /events-calendar/ está aprobada por el
   cliente). Frame `14372:7342` (Events - Desktop). Va al final de la hoja.
   ================================================================== */

/* Cabecera: antetítulo Gravitica 12 / 19 px, 1,56 px; "Events" `messaging_xl`
   Juana ExtraLight 78 / 1.1, 1,56 px (iba a 80 / 86, peso 300). */
.hw-ev-eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-ev-eyebrow{margin-bottom:10px !important}
@media(min-width:1151px){
  .hw-ev-h1 p,.hw-ev-h1.hw-ev-h1 h1{font-size:78px !important;line-height:1.1 !important;letter-spacing:1.56px !important}
}
.hw-ev-h1 p,.hw-ev-h1.hw-ev-h1 h1{font-weight:280 !important}

/* Rótulo de colores `nav_gravitica`: 12 / 1.6, 1,56 px (iba a 11 con 2 px). */
.hw-ev-key__i{font-size:12px !important;line-height:1.6 !important;letter-spacing:1.56px !important;
  font-feature-settings:"ss01" 1}

/* Calendario. Mes `header_juana` 20 / 1.4, 0,4 px. Días de la semana y
   números `messaging_eyebrow` Gravitica 15 / 1.7, 1,95 px (iban a 11 y 13). */
.hw-ev-cal__m{font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}
.hw-ev-cal__wd span,.hw-ev-cal__n{font-family:'Gravitica','Poppins',sans-serif !important;
  font-size:15px !important;letter-spacing:1.95px !important;text-transform:uppercase;
  font-feature-settings:"ss01" 1}
.hw-ev-cal__n{line-height:1.7 !important;text-indent:1.95px}
.hw-ev-cal__c{padding-top:1px !important;gap:4px !important}

/* Columna de la derecha (no está en el Figma; mismos estilos que el resto):
   título en Juana (salía en Playfair 28: el Título de Avada imprime su
   tamaño en línea) como el mes del calendario; fechas `nav_gravitica`. */
.hw-ev-side__k,.hw-ev-side__k *{font-family:'Juana','Playfair Display',Georgia,serif !important;
  font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important;font-weight:400 !important}
.hw-ev-side__n,.hw-ev-row__d{font-size:12px !important;line-height:1.6 !important;letter-spacing:1.56px !important;
  font-feature-settings:"ss01" 1}
.hw-ev-row__t{letter-spacing:.28px !important;line-height:1.4 !important}

/* Fichas: fecha `nav_gravitica` 12 / 1.6; título `header_juana` 20 / 1.4;
   extracto `body_small` 14 / 1.4, 0,28 px; "Get Details" 14 / 1.4. */
.hw-ev-card__d{font-size:12px !important;line-height:1.6 !important;letter-spacing:1.56px !important;
  font-feature-settings:"ss01" 1}
.hw-ev-card__t{font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}
.hw-ev-card__x,.hw-ev-more{font-size:14px !important;line-height:1.4 !important;letter-spacing:.28px !important;
  font-feature-settings:"lnum" 1,"pnum" 1}
/* ==================================================================
   NEWS · FIDELIDAD 2026-09-16
   Tipografías contra el frame `14358:5726` (News - Desktop), /news/.
   Mismo sistema que Events. Va al final de la hoja y gana por orden.
   ================================================================== */

/* Cabecera: antetítulo Gravitica 12 / 19 px, 1,56 px, 10 px sobre el título;
   "News" `messaging_xl` Juana ExtraLight 78 / 1.1, 1,56 px (iba a 80 / 86). */
.hw-nw-eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-nw-eyebrow{margin-bottom:10px !important}
@media(min-width:1151px){
  .hw-nw-h1 p,.hw-nw-h1.hw-nw-h1 h1{font-size:78px !important;line-height:1.1 !important;letter-spacing:1.56px !important}
}
.hw-nw-h1 p,.hw-nw-h1.hw-nw-h1 h1{font-weight:280 !important}

/* Filtros `cta_reg`: Gravitica 15 / 1.2, 1,95 px, ss01 (iban a 11 con 2 px). */
.hw-nw-filters__i{font-size:15px !important;line-height:1.2 !important;letter-spacing:1.95px !important;
  font-feature-settings:"ss01" 1}

/* Destacada y fichas: título `header_juana` 20 / 1.4, 0,4 px; fecha
   `nav_gravitica` 12 / 1.6, 1,56 px; extracto `body_small` 14 / 1.4, 0,28 px;
   "Read More" 14 / 1.4. */
.hw-nw-feat__t,.hw-nw-card__t{font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}
.hw-nw-meta{font-size:12px !important;line-height:1.6 !important;letter-spacing:1.56px !important;
  font-feature-settings:"ss01" 1}
.hw-nw-feat__x,.hw-nw-card__x,.hw-nw-more{font-size:14px !important;line-height:1.4 !important;
  letter-spacing:.28px !important;font-feature-settings:"lnum" 1,"pnum" 1}

/* "Load more" `cta_reg` 15 / 1.2, 1,95 px (iba a 12 con 2 px). */
.hw-nw-load,.hw-nw-load a{font-size:15px !important;line-height:1.2 !important;letter-spacing:1.95px !important;
  font-feature-settings:"ss01" 1}
/* Las dos filas de filtros a ~30 px de paso (y336 / y366 en el Figma). */
/* 6 y no 12: el salto de fila es un elemento vacío que suma su propio hueco. */
.hw-nw-filters{row-gap:6px !important}

/* ==================================================================
   NEWS DETAIL · FIDELIDAD 2026-09-16
   Frame `14369:6669` (News Detail - Desktop). Tipografías, galería del Figma
   (una grande + dos pequeñas), "Back to all news" y el formulario global, que
   ya sustituye al cierre viejo en la plantilla 1004. Va al final de la hoja.
   ================================================================== */

/* ---------- Cabecera ----------
   Título `header_juana` Juana 20 / 1.4, 0,4 px (iba a 22 / 28). Publicación y
   fecha `nav_gravitica` Gravitica 12 / 1.6, 1,56 px, ss01 (iban a 10 / 19). */
body.hw-articulo .fusion-tb-page-title-bar .fusion-title-heading,
body.hw-articulo .fusion-tb-page-title-bar h1,
body.hw-articulo .fusion-tb-page-title-bar h2{
  font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title-heading,
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 h1,
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 h2,
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 h4{
  font-family:'Gravitica','Poppins',sans-serif !important;
  font-size:12px !important;line-height:1.6 !important;letter-spacing:1.56px !important;
  font-feature-settings:"ss01" 1}

/* ---------- Cuerpo `body_small` ----------
   Calluna 14 / 1.4 con 0,28 px, peso 400 (salía a 500 y a 20 px de
   interlineado), cifras lnum pnum y 10 px entre párrafos (iban a 20). */
body.hw-articulo .fusion-content-tb p,
body.hw-articulo .fusion-content-tb li{
  font-family:calluna,'Lora',Georgia,serif !important;font-weight:400 !important;
  line-height:1.4 !important;letter-spacing:.28px !important;
  font-feature-settings:"lnum" 1,"pnum" 1}
body.hw-articulo .fusion-content-tb p{margin:0 0 10px !important}
body.hw-articulo .fusion-content-tb strong,body.hw-articulo .fusion-content-tb b{font-weight:700}

/* ---------- Galería (14378:5674-5676) ----------
   Una grande de 472×334 a la izquierda y dos de 275×156 apiladas a la derecha,
   con 20 px y 22 px de hueco; el patrón se repite de tres en tres. Las
   galerías de Avada colocan las fotos con posiciones absolutas por JS
   (isotope): se anulan y manda la rejilla. */
body.hw-articulo .fusion-content-tb .fusion-gallery{
  display:grid !important;grid-template-columns:minmax(0,472fr) minmax(0,275fr);grid-auto-rows:auto;
  column-gap:20px;row-gap:22px;grid-auto-flow:row dense;
  height:auto !important;max-width:767px !important;margin:53px 0 !important}
body.hw-articulo .fusion-content-tb .fusion-gallery > .fusion-gallery-column{
  left:auto !important;top:auto !important;transform:none !important;
  width:auto !important;height:auto !important;padding:0 !important;margin:0 !important;grid-column:2;
  aspect-ratio:275/156}
body.hw-articulo .fusion-content-tb .fusion-gallery > .fusion-gallery-column:nth-child(4n+1){
  grid-column:1;grid-row:span 2;aspect-ratio:auto}
body.hw-articulo .fusion-content-tb .fusion-gallery > .fusion-gallery-column:last-child:nth-child(4n+1){
  grid-column:1 / -1;grid-row:span 2;aspect-ratio:767/334}
/* Sin alturas fijas: las pequeñas llevan la proporción 275/156 y la grande se
   estira a las dos filas, así en móvil escala entero. */
body.hw-articulo .fusion-content-tb .fusion-gallery .fusion-gallery-image,
body.hw-articulo .fusion-content-tb .fusion-gallery .fusion-gallery-image a{display:block;height:100%}
/* La foto va absoluta dentro de su celda: si no, una vertical empuja la fila
   con su alto natural y la grande de la siguiente tanda se estira. */
body.hw-articulo .fusion-content-tb .fusion-gallery > .fusion-gallery-column{position:relative !important;overflow:hidden;min-height:0}
body.hw-articulo .fusion-content-tb .fusion-gallery img{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;margin:0 !important}
body.hw-articulo .fusion-content-tb .fusion-gallery .fusion-grid-sizer,
body.hw-articulo .fusion-content-tb .fusion-gallery > .clearfix{display:none !important}
/* Avada mete un .clearfix cada tres fotos: por eso el patrón es 4n+1 y no 3n+1. */

/* ---------- "Back to all news" (CTA_back 14369:7323) ----------
   `cta_reg` 15 / 1.2, 1,95 px con la flecha de 46 px a la izquierda; 77 px
   bajo el último párrafo. */
/* Con más especificidad que `.fusion-content-tb p{margin:0 0 10px}`, que le
   ganaba y lo dejaba pegado al contenido (margen 0). */
body.hw-articulo .fusion-content-tb p.hw-nd-back{margin:77px 0 0 !important}
.hw-nd-back a{font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
  line-height:1.2 !important;letter-spacing:1.95px !important;font-feature-settings:"ss01" 1}
.hw-nd-back a::before{width:46px;margin-right:13px}

/* ---------- Formulario global ----------
   Ahora va DENTRO de .post-content (plantilla 1004): no hereda la columna de
   767 del artículo ni el relleno inferior; 198 px entre el CTA y el formulario. */
body.hw-articulo .post-content{padding-bottom:0 !important}
body.hw-articulo .post-content > .hw-form > .fusion-builder-row{max-width:none !important}

/* ---------- Alineación y aire vertical ----------
   Título en y172 (la fecha 11 px más abajo), foto en y258, texto en y824 y en
   x337: el contenedor interno del contenido traía 30 px de relleno y la fila
   -14 px de margen (el texto salía en x352). */
body.hw-articulo .fusion-tb-page-title-bar{padding-top:100px !important}
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title{margin-top:11px !important}
/* BugHerd #199 (25-09): esos 11 px eran para bajar el PRIMER renglón (la
   categoría) a la altura del titular, pero pegaban también al segundo: la
   fecha quedaba 11 px suelta. En el Figma los dos renglones van seguidos. */
body.hw-articulo .fusion-tb-page-title-bar .fusion_builder_column_1_3 .fusion-title + .fusion-title{margin-top:0 !important}
@media(min-width:1024px){
  body.hw-articulo .fusion-content-tb .fusion-fullwidth{padding:0 !important}
  body.hw-articulo .fusion-content-tb .fusion-builder-row{margin-left:0 !important;margin-right:0 !important;width:100% !important}
}
/* 135 -> 147: el Figma (`14369:6669`) pone el CTA_back en y 2008 +18 de alto
   y el formulario en y 2224, o sea 198 px de hueco. Con 135 medían 186.
   La ficha de EVENTO ya hacía 198 (no lleva `hw-articulo`, así que se
   libró de estas reglas): sirve de patrón de control. */
body.hw-articulo .post-content > .hw-form{margin-top:147px !important}
@media(min-width:1024px){
  body.hw-articulo .post-content > .fusion-fullwidth:first-child{padding-top:0 !important;margin-top:-8px !important}
  body.hw-articulo .fusion-content-tb{padding-top:24px !important}
}

/* 2026-09-24 · Santiago: en la ficha de noticia en móvil el titular, la
   categoría y la fecha iban pegados al borde. Salen de la barra de título de
   Avada (`.fusion-page-title-bar`), cuyo contenedor en móvil tiene 0 de
   relleno; el cuerpo del artículo va a 24 px. Mismo margen. */
@media(max-width:1023px){
  body.hw-articulo .fusion-page-title-bar .fusion-fullwidth{
    padding-left:24px !important;padding-right:24px !important}
}

/* ==================================================================
   EVENT DETAIL · FIDELIDAD 2026-09-16
   Frame `14378:6511` (Event Detail - Desktop): la misma ficha que la noticia.
   Va al final de la hoja y gana por orden.
   ================================================================== */

/* Título `header_juana` Juana 20 / 1.4, 0,4 px (iba a 22 / 28). Fecha
   `nav_gravitica` Gravitica 12 / 1.6, 1,56 px, ss01 (iba a 10). */
.hw-ed-hd__t{font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}
.hw-ed-hd__m{font-family:'Gravitica','Poppins',sans-serif !important;font-size:12px !important;
  line-height:1.6 !important;letter-spacing:1.56px !important;font-feature-settings:"ss01" 1}

/* Cuerpo `body_small`: Calluna 14 / 1.4, 0,28 px, peso 400, cifras lnum pnum y
   10 px entre párrafos. Salía a 16 / 1.8 con 20 px: la hoja de The Events
   Calendar le ganaba a la regla del bloque. */
body.hw-articulo .hw-ed-body p,body.hw-articulo .hw-ed-body li{
  font-family:calluna,'Lora',Georgia,serif !important;font-weight:400 !important;
  font-size:14px !important;line-height:1.4 !important;letter-spacing:.28px !important;
  font-feature-settings:"lnum" 1,"pnum" 1}
body.hw-articulo .hw-ed-body p{margin:0 0 10px !important}

/* "Back to all events": 77 px bajo el contenido, igual que en la noticia (el
   Figma pone 55, pero Santiago pidió más aire en la de noticias y las dos
   fichas van a juego). */
body.hw-articulo .hw-ed-body p.hw-nd-back{margin:77px 0 0 !important}
/* ==================================================================
   COMMERCIAL · FIDELIDAD 2026-09-16
   Tipografías y aire contra el frame `15109:10462` (Commercial Opportunities -
   Desktop), página 3057. Las cajas FPO de las fichas NO se tocan: las fotos las
   manda Paige. Va al final de la hoja y gana por orden.
   ================================================================== */

/* ---------- Héroe ----------
   "COMMERCIAL OPPORTUNITIES" Gravitica 12 / 19 px, 1,56 px en y234; titular en
   y263; guía de y559 al borde de un héroe de 680 (medía 694). */
.hw-cm-hero__eyebrow p{font-size:12px !important;line-height:19px !important;letter-spacing:1.56px !important}
.hw-cm-hero__eyebrow{margin-bottom:10px !important}
@media(min-width:1151px){
  .hw-cm-hero{height:680px !important;min-height:680px !important;overflow:hidden}
  .hw-cm-hero__rule span{transform:translateX(-2px)}
}

/* ---------- Intro ----------
   Caja de 734 (iba a 706 y cortaba en 6 líneas en vez de 5). "LET'S TALK
   BUSINESS" `cta_reg` 15 / 1.2, 1,95 px, subrayado (iba a 12). */
.hw-cm-intro__body p{max-width:734px !important}
.hw-cm-cta a{font-family:'Gravitica','Poppins',sans-serif !important;font-size:15px !important;
  line-height:1.2 !important;letter-spacing:1.95px !important;font-feature-settings:"ss01" 1;
  padding:0 8px 6px !important}

/* ---------- Cuerpos `body_reg` 16 / 1.8 (iban a 29 px) y listas `body_tight`
   16 / 1.3, cifras lnum pnum ---------- */
.hw-cm-body p,.hw-cm-body,.hw-cm-opp__body p,.hw-cm-opp__body,.hw-cm-card__b,.hw-cm-int__b p,.hw-cm-int__b,
.hw-cm-int__c p,.hw-cm-int__c{line-height:1.8 !important;font-feature-settings:"lnum" 1,"pnum" 1}
.hw-cm-facts li{line-height:1.3 !important;font-feature-settings:"lnum" 1,"pnum" 1}

/* ---------- Fichas ----------
   Título `header_flapjack_reg` TAY Flapjack 48 / 1, 2,4 px (salía en Gravitica
   44), 39 px bajo la caja; etiqueta `messaging_eyebrow` 15 / 1.7, 1,95 px (iba a
   11) 5 px bajo el título; texto 18 px bajo la etiqueta. */
.hw-cm-card__t{font-family:'TAY Flapjack','Oswald',sans-serif !important;font-weight:400 !important;
  letter-spacing:.05em !important}
@media(min-width:1151px){
  .hw-cm-card__t{font-size:48px !important;line-height:1 !important;margin-top:39px !important}
}
.hw-cm-card__k{font-size:15px !important;line-height:1.7 !important;letter-spacing:1.95px !important;
  font-feature-settings:"ss01" 1;margin-top:5px !important}
.hw-cm-card__b{margin-top:18px !important}

/* ---------- Interested or have questions? ----------
   "Paige Glazer" `header_juana` Juana 20 / 1.4, 0,4 px (iba a 22 / 28); el
   correo en Calluna Regular subrayado. */
.hw-cm-int__n,.hw-cm-int__n p{font-size:20px !important;line-height:1.4 !important;letter-spacing:.4px !important}

/* ---------- Aire de Location ----------
   Titular 44 px bajo el antetítulo (salían 61) y el párrafo de la derecha
   15 px más abajo que el antetítulo (y1369 frente a y1356). */
@media(min-width:1151px){
  .hw-cm-loc .hw-cm-loc__h2{margin-top:18px !important}
  /* desplazado, no con relleno: la lista y el mapa de debajo ya caen en su sitio */
  .hw-cm-loc .hw-cm-body p{position:relative;top:15px}
  .hw-cm-opp .hw-cm-eyebrow--c{margin-top:6px !important}
}

/* ====================================================================
   COMMUNITY MAP · LA CHAPA "STAY IN THE KNOW" · 2026-09-17
   ====================================================================
   `hw-contact-widget.js` la pinta fija abajo a la izquierda, con el fondo
   transparente: sobre una página normal se lee bien, pero aquí cae encima del
   panel blanco del mapa y su filete queda flotando sobre la lista de sitios,
   como si fuera parte de ella.

   Sólo en esta página (3101): fondo Oyster opaco y un borde tenue, para que se
   lea como lo que es — un botón por encima del mapa. Lo de no tapar la última
   ficha de la lista lo resuelve el propio mapa, que reserva 104 px abajo.

   Y a la ESQUINA: la regla de escritorio lo sube a `max(22px, 20vh - 70px)`
   para casar con el Figma de las otras páginas — en una pantalla de 768 son
   84 px desde abajo, que aquí se lee como "flotando a media altura" sobre el
   panel. En esta página manda la esquina.

   El widget inyecta su <style> DESPUÉS de esta hoja: hace falta !important. */
.page-id-3101 #hw-cw{left:24px !important;bottom:24px !important;top:auto !important}
.page-id-3101 #hw-cw .hw-cw__panel{
  max-height:calc(100vh - 24px - 108px) !important}

.page-id-3101 #hw-cw .hw-cw__badge{
  background:var(--awb-color1,#EFEAE4) !important;
  border:1px solid rgba(25,24,12,.14) !important;
  box-shadow:0 6px 18px rgba(25,24,12,.14) !important}

/* Abierta ya se pinta en Heart Pine: ahí no se toca nada. */
.page-id-3101 #hw-cw.is-open .hw-cw__badge{
  background:#38251C !important;border-color:transparent !important}

/* ==================================================================
   NAV OVERLAY · HOVER DEL FIGMA (2026-09-18)
   ==================================================================
   Dos cosas, las dos del panel de menú (`hw-offcanvas.js`):

   1. «Our story» no se ponía amarilla al pasar el ratón. No era cosa de
      esa entrada: al abrir el panel se le da el foco a la PRIMERA del
      menú, y la regla del bloque 2.8

          .hw-oc__primary a:focus:not(:focus-visible){color:…crema}

      va DESPUÉS del `:hover` del bloque OFF-CANVAS NAV y además pesa más
      (0,3,1 contra 0,2,1). Con el foco puesto, el hover perdía el empate
      y la entrada se quedaba en crema. Se resuelve devolviéndole el
      color cuando además hay ratón encima (0,4,1), sin tocar el bloque
      viejo.

   2. El movimiento del Figma: al pasar por encima la palabra se desplaza
      un poco a la IZQUIERDA y se pone amarilla, para que se lea que es
      pulsable. El desplazamiento es proporcional al tamaño del rótulo:
      8 px en la lista serif, 5 en la secundaria y en los enlaces de la
      barra de arriba.

   `transform` necesita que el enlace no sea inline: los tres contenedores
   (`__primary`, `__secondary`, `__toplinks`) son flex, así que sus hijos
   ya están blockificados. Con `prefers-reduced-motion` sólo queda el
   color.
   ------------------------------------------------------------------ */

.hw-oc__primary a,
.hw-oc__secondary a,
.hw-oc__toplinks a{
  transition:color .25s ease, opacity .25s ease,
             transform .32s cubic-bezier(.22,.61,.36,1);
}

.hw-oc__primary a:hover,
.hw-oc__primary a:focus-visible{transform:translateX(-8px)}

.hw-oc__secondary a:hover,
.hw-oc__secondary a:focus-visible,
.hw-oc__toplinks a:hover,
.hw-oc__toplinks a:focus-visible{transform:translateX(-5px)}

/* la página actual (aria-current) ya va en amarillo: que también se mueva,
   si no parece que esa entrada no responde */
.hw-oc__primary a[aria-current]:hover{transform:translateX(-8px)}

/* el arreglo de «Our story»: hover gana al foco-sin-teclado */
.hw-oc__primary a:focus:not(:focus-visible):hover{color:var(--awb-color3,#CEC439)}

@media(prefers-reduced-motion:reduce){
  .hw-oc__primary a,
  .hw-oc__secondary a,
  .hw-oc__toplinks a{transition:color .25s ease,opacity .25s ease}
  .hw-oc__primary a:hover,.hw-oc__primary a:focus-visible,
  .hw-oc__primary a[aria-current]:hover,
  .hw-oc__secondary a:hover,.hw-oc__secondary a:focus-visible,
  .hw-oc__toplinks a:hover,.hw-oc__toplinks a:focus-visible{transform:none}
}

/* ---- Location: CTA «Explore Heartwood» bajo el párrafo del mapa ----
   El bloque de texto del mapa está posicionado en absoluto dentro de la
   ilustración (`.hw-loc-map__txt`), así que el CTA no empuja nada: cuelga
   del párrafo con el mismo margen que en el resto del sitio. */
.hw-loc-map__txt .hw-os-cta{margin-top:26px !important}
@media(max-width:1150px){
  .hw-loc-map__txt .hw-os-cta{margin-top:22px !important}
}

/* ---- el logo del panel se perdía en el fondo al pasar el ratón ----
   `.hw-oc__brand` era el ÚNICO enlace del panel sin `:hover` propio, así que
   se lo quedaba la regla global de Avada

       a:hover{color:var(--link_hover_color)}

   y esa variable vale **#424B0A**, que es exactamente el verde Boxwood del
   fondo del panel (`.hw-oc{background:var(--awb-color5,#424B0A)}`): medido en
   vivo, el rótulo pasaba de crema a rgb(66,75,10) y desaparecía.

   Se le pone el amarillo del resto del panel (close, toplinks, lista serif,
   sello). Con (0,2,0) contra el (0,1,1) de `a:hover` gana por especificidad,
   así que da igual que fusion-styles se imprima después. No se le añade el
   desplazamiento del hover: el rótulo está centrado en la barra y moverlo
   descuadra la simetría con los toplinks y el botón de cerrar. */
.hw-oc__brand:hover,
.hw-oc__brand:focus-visible{color:var(--awb-color3,#CEC439)}

/* ---- «Commercial opportunities»: las dos líneas se leían como dos enlaces ----
   Es la única entrada del menú que baja a dos líneas a 1440 (la columna mide
   340 px y el rótulo 409). El interlineado de la lista es 1,42 → 48,3 px, que
   es TAMBIÉN el paso entre entradas: con la misma separación dentro del
   rótulo que entre rótulos, «Commercial» y «opportunities» parecían dos
   opciones distintas.

   En el Figma (`12017:223` → `primary list`) esas dos cosas sí se distinguen:
   las entradas van de 52 en 52 px, y la que se parte ocupa 86 = 52 + **34**.
   O sea, la segunda línea suma justo el cuerpo de la fuente: interlineado 1
   dentro del rótulo.

   Aquí se hace lo mismo y se devuelve la diferencia como padding —
   (1,42 − 1) ÷ 2 = 0,21em arriba y abajo — para que la caja de una entrada de
   una línea siga midiendo 48,3 px. Así NADA se mueve: comprobado en pantalla,
   las ocho entradas de una línea quedan al píxel donde estaban, y el hueco
   entre la segunda línea de «Commercial opportunities» y «Visit us» también.
   Lo único que cambia es lo que se pedía: las dos líneas del rótulo pasan de
   48,3 a 34 px de separación (la entrada mide 82,3 en vez de 96,5).

   Va en `min-width:901px` a propósito: por debajo el bloque responsive pone
   28 px y `max-width:none`, no se parte ningún rótulo, y el padding sí
   descuadraría el ritmo de la lista en móvil. */
@media(min-width:901px){
  .hw-oc__primary a{line-height:1;padding:.21em 0}
}

/* En móvil pasa lo mismo: el bloque de ≤900 px pone 28 px de cuerpo y 1,5 de
   interlineado (42 px), y «Commercial opportunities», que también se parte
   porque la pantalla es estrecha, vuelve a leerse como dos entradas. Misma
   receta con los números de ahí: interlineado 1 y (1,5 − 1) ÷ 2 = 0,25em de
   padding, así que la caja de una entrada sigue midiendo 42 px y la lista no
   se mueve. */
@media(max-width:900px){
  .hw-oc__primary a{line-height:1;padding:.25em 0}
}

/* ==================================================================
   POI DETAIL (la ficha de /guide/<slug>/)
   Plantilla `single-avada_portfolio.php` del child theme. Sustituye a la
   ficha de PROYECTO de Avada. El modelo es la ficha de negocio del
   directorio de Richmond Hill, con la geometría y las tipografías de la
   ficha de noticia de este sitio, más el mapa a sangre al final.
   Gancho: la clase `hw-poi-page` que pone `body_class`.
   Lienzo 1160 (el de Explore): 731 de texto + 56 de hueco + 373 de ficha,
   que es el ancho EXACTO de las tarjetas del directorio. No es casualidad:
   la ficha y la lista tienen que rimar.
   ================================================================== */

/* La cabecera de este sitio FLOTA (position:absolute, z-index 200): sin el
   hueco de arriba el título se mete debajo de la nav. Y la crema arranca
   detrás de ella, así que el degradado va en #wrapper —el único que empieza
   en 0— igual que en la ficha de noticia. */
body.hw-poi-page #wrapper{
  background:linear-gradient(to bottom,
    var(--awb-color1,#EFEAE4) 0 560px, #FFFFFF 560px 100%) !important}
body.hw-poi-page .fusion-header,
body.hw-poi-page .fusion-header-wrapper .fusion-header,
body.hw-poi-page #sliders-container{background:transparent !important;box-shadow:none !important}
body.hw-poi-page #main{
  padding-top:0 !important;padding-bottom:0 !important;background:transparent !important}
body.hw-poi-page #main > .fusion-row{
  max-width:100% !important;width:100% !important;
  padding-left:0 !important;padding-right:0 !important}
body.hw-poi-page #sidebar{display:none !important}

/* El lienzo. El tope va por PADDING y no por max-width: a partir de 1240 el
   contenido se queda en 1160 centrado, y por debajo respira 40 px a cada
   lado sin que nada se salga. */
body.hw-poi-page .hw-poi,
body.hw-poi-page .hw-poi-map > :not(.hw-poi-map__frame),
body.hw-poi-page .hw-poi-back{
  box-sizing:border-box;width:100%;
  padding-left:max(40px, calc((100% - 1160px) / 2));
  padding-right:max(40px, calc((100% - 1160px) / 2))}

/* ---------- migas ---------- */
.hw-poi-bc{
  margin:0;padding-top:172px;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:10px;
  line-height:19px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--awb-color4,#6D7EA0)}
.hw-poi-bc a{color:inherit;text-decoration:none}
.hw-poi-bc a:hover{color:var(--awb-color7,#E54511)}
.hw-poi-bc span{margin:0 8px}
.hw-poi-bc__aqui{margin-left:0;color:var(--awb-color8,#19180C)}

/* ---------- titular y pastilla ---------- */
.hw-poi-hd{display:flex;justify-content:space-between;align-items:baseline;
  gap:47px;margin-top:18px}
.hw-poi-hd__t{flex:1 1 auto;min-width:0;margin:0 !important;
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-weight:400 !important;
  font-size:34px !important;line-height:1.24 !important;letter-spacing:0 !important;
  text-transform:none !important;color:var(--awb-color8,#19180C) !important}
.hw-poi-hd__m{flex:0 0 auto;margin:0;text-align:right;
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:10px;
  line-height:19px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--awb-color4,#6D7EA0)}

/* ---------- la foto ---------- */
.hw-poi-feat{margin:28px 0 0;position:relative}
.hw-poi-feat img{display:block;width:100%;aspect-ratio:1160/540;object-fit:cover;margin:0}

/* (El distintivo «Licencia pendiente» se quitó el 24-09, BugHerd #161.) */

/* BugHerd #157 (2026-09-24): el LOGO de un negocio no es una foto. El marco
   es el mismo (1160×540, 4:3 en móvil) para que todas las fichas midan igual,
   pero en blanco y con el logo entero, centrado y con aire: 560 px de ancho
   como mucho y nunca por encima de su tamaño natural, para que no pixele
   (Bleu Coat mide 300). */
.hw-poi-feat--logo{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1160/540;background:#FFF;padding:6% 10%;box-sizing:border-box}
.hw-poi-feat.hw-poi-feat--logo img{width:auto;height:auto;aspect-ratio:auto;
  max-width:min(560px, 100%);max-height:100%;object-fit:contain}

/* ---------- cuerpo + ficha ----------
   731 + 56 + 373 = 1160. Las dos columnas arrancan a la misma altura. */
.hw-poi-cols{
  display:grid;grid-template-columns:minmax(0,731fr) 373fr;
  column-gap:56px;align-items:start;
  margin-top:53px;padding-bottom:96px}

.hw-poi-estado{
  margin:0 0 18px !important;
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:11px !important;line-height:1.6 !important;letter-spacing:1.6px !important;
  text-transform:uppercase !important;color:var(--awb-color7,#E54511) !important}

/* El cuerpo NO vive dentro de `.post-content`, así que la regla de Avada
   `.post-content p{margin:0 0 20px}` (0,1,1) no llega. Aun así el prefijo
   `body.hw-poi-page` se queda: la hoja de Avada se imprime DESPUÉS y una
   clase suelta pierde los empates. */
body.hw-poi-page .hw-poi-body p,
body.hw-poi-page .hw-poi-body li{
  font-family:calluna,'Lora',Georgia,serif !important;font-weight:400 !important;
  font-size:16px !important;line-height:1.55 !important;letter-spacing:.28px !important;
  color:var(--awb-color8,#19180C) !important;
  font-feature-settings:"lnum" 1,"pnum" 1}
body.hw-poi-page .hw-poi-body p{margin:0 0 16px !important}
body.hw-poi-page .hw-poi-body ul{margin:0 0 16px;padding-left:20px}
body.hw-poi-page .hw-poi-body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
body.hw-poi-page .hw-poi-body a:hover{color:var(--awb-color7,#E54511)}
body.hw-poi-page .hw-poi-body > :last-child{margin-bottom:0 !important}

/* La ficha. Sin sombra y sin caja de color: una regla arriba y aire, que es
   el idioma del resto del sitio. La franja crema llega hasta 560, así que la
   ficha se ve sobre blanco: no necesita fondo propio. */
.hw-poi-card{border-top:1px solid rgba(25,24,12,.18);padding-top:20px}
.hw-poi-meta{margin:0;display:grid;grid-template-columns:1fr;row-gap:14px}
.hw-poi-meta dt{
  margin:0;font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:10px;line-height:19px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--awb-color4,#6D7EA0)}
.hw-poi-meta dd{
  margin:2px 0 0;font-family:calluna,'Lora',Georgia,serif;font-size:15px;
  line-height:1.45;color:var(--awb-color8,#19180C)}
.hw-poi-meta dd a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hw-poi-meta dd a:hover{color:var(--awb-color7,#E54511)}
.hw-poi-cats a{text-decoration:none}
.hw-poi-cats a:hover{text-decoration:underline}
.hw-poi-cats span{margin:0 4px;color:var(--awb-color4,#6D7EA0)}

/* Los botones. El primero (la web) en relleno oliva; los demás en línea, que
   es como se comportan los CTA secundarios del sitio. */
.hw-poi-acts{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0 !important}
.hw-poi-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border:1px solid rgba(25,24,12,.28);
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--awb-color8,#19180C);text-decoration:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.hw-poi-btn:hover,.hw-poi-btn:focus-visible{
  background:var(--awb-color8,#19180C);border-color:var(--awb-color8,#19180C);color:#FFF}
.hw-poi-btn--1{
  background:var(--awb-color5,#4E6D43);border-color:var(--awb-color5,#4E6D43);color:#FFF}
.hw-poi-btn--1:hover,.hw-poi-btn--1:focus-visible{
  background:var(--awb-color8,#19180C);border-color:var(--awb-color8,#19180C)}
@media(prefers-reduced-motion:reduce){.hw-poi-btn{transition:none}}

/* ---------- el mapa ----------
   A sangre: es lo que convierte la ficha en un directorio navegable. El marco
   se sale del lienzo de 1160 a propósito. */
.hw-poi-map{padding-top:64px;padding-bottom:0;background:var(--awb-color1,#EFEAE4)}
.hw-poi-map__k{
  margin:0 !important;font-family:'Gravitica','Poppins',sans-serif !important;
  font-weight:600 !important;font-size:10px !important;line-height:19px !important;
  letter-spacing:1.6px !important;text-transform:uppercase !important;
  color:var(--awb-color4,#6D7EA0) !important}
.hw-poi-map__t{
  margin:8px 0 28px !important;
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-weight:400 !important;
  font-size:28px !important;line-height:1.24 !important;letter-spacing:0 !important;
  text-transform:none !important;color:var(--awb-color8,#19180C) !important}
.hw-poi-map__frame{width:100%}
/* `[hw_map]` trae `height:calc(100vh - var(--hw-header-h))` por defecto; aquí
   se le pasa una altura fija y el iframe la obedece tal cual. */
.hw-poi-map__frame .hw-map-wrap{margin:0}

/* ---------- vuelta ---------- */
.hw-poi-back{margin:0 !important;padding-top:44px;padding-bottom:96px}
.hw-poi-back a{
  display:inline-flex;align-items:center;
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:15px !important;line-height:1.2 !important;letter-spacing:1.95px !important;
  text-transform:uppercase;color:var(--awb-color7,#E54511) !important;
  text-decoration:none !important;font-feature-settings:"ss01" 1}
.hw-poi-back a::before{
  content:"";display:inline-block;margin-right:13px;width:46px;height:12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.18' height='7.36' viewBox='0 0 4.18 7.36'%3E%3Cpath d='M3.68 .5 .5 3.68 3.68 6.86' fill='none' stroke='%23E54511' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/4.18px 7.36px,
    linear-gradient(var(--awb-color7,#E54511),var(--awb-color7,#E54511)) no-repeat right center/calc(100% - .5px) 1px;
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.hw-poi-back a::before{transition:none}}

/* ---------- tableta y móvil ----------
   1100 y no 900: a 1024 la ficha de 373 deja el texto en 500 y largo. */
@media(max-width:1100px){
  .hw-poi-cols{grid-template-columns:1fr;row-gap:40px;padding-bottom:64px}
  .hw-poi-card{max-width:520px}
}
@media(max-width:760px){
  body.hw-poi-page #wrapper{
    background:linear-gradient(to bottom,
      var(--awb-color1,#EFEAE4) 0 420px, #FFFFFF 420px 100%) !important}
  body.hw-poi-page .hw-poi,
  body.hw-poi-page .hw-poi-map > :not(.hw-poi-map__frame),
  body.hw-poi-page .hw-poi-back{padding-left:24px;padding-right:24px}
  .hw-poi-bc{padding-top:120px}
  /* La última miga repite el titular que va justo debajo, y en 390 px se
     parte en dos renglones con el corte donde cae. Fuera ella y su barra:
     `:has()` es la única forma de alcanzar la barra ANTERIOR a un elemento. */
  .hw-poi-bc__aqui{display:none}
  .hw-poi-bc span[aria-hidden]:has(+ .hw-poi-bc__aqui){display:none}
  .hw-poi-hd{display:block}
  .hw-poi-hd__t{font-size:26px !important}
  .hw-poi-hd__m{text-align:left;margin-top:10px}
  .hw-poi-feat img{aspect-ratio:4/3}
  .hw-poi-feat--logo{aspect-ratio:4/3;padding:10% 12%}
  .hw-poi-cols{margin-top:34px}
  .hw-poi-map{padding-top:44px}
  .hw-poi-map__t{font-size:22px !important}
  /* El alto se lo pone `[hw_map]` EN LÍNEA, así que aquí hace falta el
     `!important`: 620 px en un móvil se comen la pantalla entera. */
  .hw-poi-map__frame .hw-map-frame{height:460px !important}
  .hw-poi-back{padding-top:34px;padding-bottom:64px}
}

/* ==================================================================
   TITULARES DE PÁGINA EN <h1>
   El titular de cada página pasa de <p> a <h1> por SEO. La regla de cada
   bloque, más arriba, nombra ahora a los dos, así que la tipografía no se
   mueve.

   ⚠️ El h1 va con la clase REPETIDA en todos los sitios, a propósito.
   `fusion-styles` se imprime DESPUÉS de este fichero y sus reglas de h1 pesan
   (0,1,1), así que con un selector normal EMPATAN y gana Avada: medido, el
   titular salía en Playfair 400, interlínea 101,4 en vez de 85,8, sin espaciado
   entre letras y —en FAQ, Events y News— en #19180C en vez del verde de marca.
   Repitiendo la clase el hijo pesa (0,2,1) y manda.

   Aquí abajo sólo se apaga lo que Avada le pone a un h1 y el <p> no tenía:
   52 px de margen vertical y un color propio. Nada más: cada propiedad que la
   regla del bloque ya declara se deja en paz. */
.hw-loc-hero__title.hw-loc-hero__title h1{margin:0;color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-ex-hero__title.hw-ex-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-lh-hero__title.hw-lh-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-sc-hero__title.hw-sc-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-we-hero__title.hw-we-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-wh-hero__title.hw-wh-hero__title h1{margin:0;color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-cm-hero__title.hw-cm-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-vu-hero__title.hw-vu-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-hb-hero__title.hw-hb-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-bh-hero__title.hw-bh-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-ag-hero__title.hw-ag-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-rp-hero__title.hw-rp-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-lg-hero__title.hw-lg-hero__title h1{color:inherit;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-fq-h1.hw-fq-h1 h1{margin:0;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-gl-h1.hw-gl-h1 h1{margin:0;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-ev-h1.hw-ev-h1 h1{margin:0;text-transform:inherit;font-style:inherit;text-align:inherit}
.hw-nw-h1.hw-nw-h1 h1{margin:0;text-transform:inherit;font-style:inherit;text-align:inherit}

/* FAQ y Gallery no tenían regla de fidelidad con `!important` para su titular,
   y ahí Avada SÍ fuerza la interlínea y el espaciado del h1 (medido: 86,4 px en
   vez de 86, y `letter-spacing:normal` en vez de los 0,32 px que el <p> heredaba
   de la tipografía de párrafo). Se copian los valores del <p>; Avada los pone FIJOS, no
   en em: a los 60 px de Gallery un `.004em` se quedaba en 0,24. */
.hw-fq-h1.hw-fq-h1 h1{line-height:86px !important;letter-spacing:.32px !important}
.hw-gl-h1.hw-gl-h1 h1{line-height:86px !important;letter-spacing:.32px !important}
@media (max-width:1023px){
  .hw-fq-h1.hw-fq-h1 h1{line-height:50px !important}
  .hw-gl-h1.hw-gl-h1 h1{line-height:48px !important}
}
/* ==================================================================
   PÁGINA 404
   Sección «404 Content» (1145) del layout 1134, condición `not_found`.
   No hay frame en el Figma: se arma con el sistema medido el 2026-09-22 —
   antetítulo Gravitica 15/1.7 tracking .13 em, titular TAY Flapjack,
   entradilla Juana 20, CTA `.hw-os-cta`.

   El titular va en <h1> con la CLASE REPETIDA a propósito: `fusion-styles`
   se imprime después de esta hoja y sus reglas de h1 pesan (0,1,1), así que
   con un selector normal empatan y gana Avada. Mismo truco que el bloque
   TITULARES DE PÁGINA EN <h1>.
   ================================================================== */
/* La raya blanca sobre la barra de menú: `#main` trae 26 px de padding de
   Avada y la cabecera es transparente. Las demás páginas lo anulan con su
   `body.page-id-N #main`; la 404 no tiene id de página. */
body.error404 #main{padding-top:0 !important}

.hw-404{padding:150px 30px 170px !important}

.hw-404__eyebrow p{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:15px;line-height:1.7;letter-spacing:.13em;text-transform:uppercase;
  color:var(--awb-color5,#424B0A);margin:0 0 18px}

.hw-404__title.hw-404__title h1{
  font-family:'TAY Flapjack','Oswald',sans-serif;font-weight:400;
  font-size:48px;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  color:var(--awb-color8,#19180C);
  /* Avada le mete 52 px de margen vertical y color propio a cualquier h1 */
  margin:0;text-align:inherit;font-style:inherit}

.hw-404__body p{
  font-family:'Juana','Playfair Display',Georgia,serif;
  font-size:20px;line-height:1.9;letter-spacing:.02em;
  color:var(--awb-color8,#19180C);
  /* `!important` porque el `p` de Avada gana al margin:auto a secas:
     medido, la entradilla salía con el centro en 336 y no en 720. */
  max-width:560px;margin:26px auto 0 !important}

/* `.hw-os-cta` es COMPARTIDA con Our Story y Live Here: todo lo de aquí se
   acota a `.hw-404__cta` para no moverles nada. */
.hw-404__cta{margin-top:38px !important}

.hw-404__links p{margin:56px 0 0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 34px}
.hw-404__links a{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:12px;line-height:1;letter-spacing:.13em;text-transform:uppercase;
  color:var(--awb-color8,#19180C);text-decoration:none;
  padding-bottom:6px;border-bottom:1px solid rgba(25,24,12,.28);
  transition:color .2s ease,border-color .2s ease}
/* Avada pinta TODO a:hover con --link_hover_color (#424B0A). Aquí se declara
   el hover a propósito para que no dependa de esa global. */
.hw-404__links a:hover,.hw-404__links a:focus-visible{
  color:var(--awb-color5,#424B0A);border-bottom-color:var(--awb-color5,#424B0A)}

@media(max-width:900px){
  .hw-404{padding:96px 24px 110px !important}
  .hw-404__title.hw-404__title h1{font-size:36px}
  .hw-404__body p{font-size:18px;margin-top:22px}
  .hw-404__links p{margin-top:42px;gap:12px 24px}
}

/* ==================================================================
   CTA · ROLLOVER DEL FIGMA (BugHerd 2026-09-22)
   ==================================================================
   Una sola pasada para los rollovers que Strada marcó en #90, #93, #97,
   #116, #122, #126 y #131 — «should be consistent with other underlined
   CTAs across site» — y los enlaces de texto que se ponían rojos (#119,
   #124, #134).

   El Figma tiene TRES componentes de CTA, y los tres llevan el mismo
   prototipo: al pasar el ratón, Smart Animate a la variante `hover`,
   150 ms, ease-out. Ninguno cambia de color ni de opacidad.

   1. CTA subrayado — `CTA_findahome` (12076:570), 26 instancias: «Find
      your home», «Come visit us», «Let's talk business», «Get directions»
      y los «Load more» de galería, noticias y Explore. En hover el texto
      RUEDA hacia arriba (sale el rótulo y entra una copia desde abajo) y
      la raya se alarga 12,5 px por cada lado (137 → 162 px).
      Antes cada uno hacía una cosa: raya de 3 px que crecía (home),
      opacidad .72 (Commercial, galería, noticias), paso a Saltmarsh
      (Come visit us), nada (Contact). Y cada uno pintaba la raya a su
      manera (border en el <p>, border en el <a>, degradado): aquí pasa a
      ser SIEMPRE un `::before` del enlace, porque un borde no puede
      crecer más allá de su caja.
      La copia del texto la mete `hw-cta.js` (hace falta un elemento que
      recorte); sin JS queda la raya, que ya es el gesto principal.

   2. CTA con flecha — `CTA_primary` (12076:589), 112 instancias, y el
      botón SUBMIT — `CTA_submit` (12076:681). En hover el rótulo avanza
      10 px y el asta se acorta 10 px por la COLA: la punta se queda donde
      está. Así lo hace el componente y así lo pidió Alex en #23 (25-09).
      Del 22 al 25-09 los CTA de texto sólo movían la flecha; ya no.
      Antes de eso la flecha CRECÍA (46 → 70, 34 → 58), y al crecer el CTA
      ensanchaba y empujaba a los de al lado — en Agents & Brokers los
      siete van en una fila flex centrada y se movía la fila entera.

   3. Enlaces de texto: sin rojo.
      #119 el email sobre la foto de Commercial → opacidad.
      #124 FAQ: el titular no cambia; el + / − baja un poco de opacidad.
      #134 índice de Terms: siempre en mayúsculas y sin la barra roja.
   ------------------------------------------------------------------ */

/* ---- 1. CTA subrayado ---------------------------------------------- */

body .s-cta a,
body a.hw-el-cta,
body .hw-cm-cta a,
body .hw-vu-cta--c a,
body .hw-gl-load a,
body .hw-nw-load a,
body .hw-dir__more a{
  position:relative !important;display:inline-block !important;
  padding:0 0 7px !important;
  border:0 !important;background:none !important;opacity:1 !important;
  text-decoration:none !important;transform:none !important;
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:15px !important;line-height:1.2 !important;letter-spacing:1.95px !important;
  text-transform:uppercase !important;font-feature-settings:"ss01" 1;
  white-space:nowrap !important}

/* Naranja, salvo «Come visit us», que va en crema sobre el vídeo. Fijado
   también en hover/visited: Avada pinta `a:hover` con --link_hover_color. */
body .s-cta a, body .s-cta a:hover, body .s-cta a:visited,
body .hw-cm-cta a, body .hw-cm-cta a:hover, body .hw-cm-cta a:visited,
body .hw-vu-cta--c a, body .hw-vu-cta--c a:hover, body .hw-vu-cta--c a:visited,
body .hw-gl-load a, body .hw-gl-load a:hover, body .hw-gl-load a:visited,
body .hw-nw-load a, body .hw-nw-load a:hover, body .hw-nw-load a:visited,
body .hw-dir__more a, body .hw-dir__more a:hover, body .hw-dir__more a:visited{
  color:var(--awb-color7,#E54511) !important}
body a.hw-el-cta, body a.hw-el-cta:hover, body a.hw-el-cta:visited,
body a.hw-el-cta:hover:visited{color:#EFEAE4 !important}

/* «Find your home» llevaba la raya en el <p> (borde de 1,5 px + barra de
   3 px que crecía) y el <p> seguía estirado un 12 % en vertical: era el
   parche de cuando se servía Jost en vez de Gravitica. Fuera las tres
   cosas; la raya va en el enlace como en los demás. */
body .s-cta p{padding-bottom:0 !important;border-bottom:0 !important;transform:none !important}
body .s-cta p::after{display:none !important}

/* La raya: 1 px, 7 px por debajo de la caja del texto, asomando ~3 px a
   cada lado (el `right` descuenta el tracking que queda tras la última
   letra, que la caja sí incluye). */
body .s-cta a::before,
body a.hw-el-cta::before,
body .hw-cm-cta a::before,
body .hw-vu-cta--c a::before,
body .hw-gl-load a::before,
body .hw-nw-load a::before,
body .hw-dir__more a::before{
  content:"" !important;position:absolute !important;display:block !important;
  left:-3px;right:-1px;bottom:0;height:1px;margin:0 !important;
  /* `inherit` explícito: alguna regla le da color propio al ::before de los
     enlaces y la raya salía en #19180C con `currentColor`. */
  color:inherit !important;background:currentColor !important;
  transition:left .15s ease-out,right .15s ease-out}

body .s-cta a:hover::before,        body .s-cta a:focus-visible::before,
body a.hw-el-cta:hover::before,     body a.hw-el-cta:focus-visible::before,
body .hw-cm-cta a:hover::before,    body .hw-cm-cta a:focus-visible::before,
body .hw-vu-cta--c a:hover::before, body .hw-vu-cta--c a:focus-visible::before,
body .hw-gl-load a:hover::before,   body .hw-gl-load a:focus-visible::before,
body .hw-nw-load a:hover::before,   body .hw-nw-load a:focus-visible::before,
body .hw-dir__more a:hover::before, body .hw-dir__more a:focus-visible::before{
  left:-15.5px;right:-13.5px}

/* La rueda del texto. `hw-cta.js` deja el rótulo así:
     <a><span class="hw-roll"><span class="hw-roll__in" data-t="…">…</span></span></a>
   y la copia es un ::after con texto alternativo vacío, para que el lector
   de pantalla no lea el rótulo dos veces. */
.hw-roll{display:inline-block;overflow:hidden;vertical-align:top}
.hw-roll__in{display:block;position:relative;transition:transform .15s ease-out}
.hw-roll__in::after{
  content:attr(data-t);
  content:attr(data-t) / "";
  position:absolute;left:0;top:100%}
body a:hover > .hw-roll > .hw-roll__in,
body a:focus-visible > .hw-roll > .hw-roll__in{transform:translateY(-100%)}

/* ---- 2. CTA con flecha y Submit ------------------------------------ */

/* Contact: «Get directions» lleva `hw-os-cta` pero es SUBRAYADO (la flecha
   ya está oculta en `.hw-vu-cta--c`); por eso el `:not()`.

   EL RÓTULO SE DESLIZA CON LA RAYA (#23, Alex, 25-09: «the type should be
   sliding right with the line segment»). Es lo que hace el componente
   `CTA_primary` del Figma: el texto va de x=0 a x=10 y el asta se acorta 10 px
   por la COLA, así que la punta no se mueve. Sustituye a la regla del 22-09
   («sólo se mueve la flecha»), que se tomó al leer la queja de #23 —la raya
   que asomaba por la punta— como una queja del movimiento.

   Cómo, sin mover nada alrededor: todos estos CTA son filas flex con la
   flecha como `::after` de 46 px. En hover el enlace gana 10 px de
   padding-left y la flecha pierde 10 de ancho: la caja mide lo mismo en
   todos los fotogramas (en Agents los siete van en una fila centrada y
   cualquier cambio de ancho movía la fila entera). La punta está anclada a
   la derecha del sprite y el asta es `calc(100% - .5px)`, así que acortar el
   ancho recorta la cola. */
body .hw-os-cta:not(.hw-vu-cta--c) a,
body .hw-ex-cta a, body .hw-lh-cta a, body .hw-we-cta a,
body .hw-bh-cta a, body .hw-sc-cta a,
body .hw-wh-sec__cta a,
body .hw-ag-links a,
body .hw-sc-card__cta a,
body .hw-rp-portal__go, body .hw-rp-cta a,
body .l-cta p, body .s2-cta p, body .lh-cta p{
  padding-left:0 !important;transition:padding-left .15s ease-out !important}

body .hw-os-cta:not(.hw-vu-cta--c) a::after,
body .hw-ex-cta a::after, body .hw-lh-cta a::after, body .hw-we-cta a::after,
body .hw-bh-cta a::after, body .hw-sc-cta a::after,
body .hw-wh-sec__cta a::after,
body .hw-ag-links a::after,
body .hw-sc-card__cta a::after,
body .hw-rp-portal__go::after, body .hw-rp-cta a::after,
body .l-cta p::after, body .s2-cta p::after, body .lh-cta p::after{
  clip-path:none !important;transition:width .15s ease-out !important}

body .hw-os-cta:not(.hw-vu-cta--c) a:hover,  body .hw-os-cta:not(.hw-vu-cta--c) a:focus-visible,
body .hw-ex-cta a:hover,  body .hw-ex-cta a:focus-visible,
body .hw-lh-cta a:hover,  body .hw-lh-cta a:focus-visible,
body .hw-we-cta a:hover,  body .hw-we-cta a:focus-visible,
body .hw-bh-cta a:hover,  body .hw-bh-cta a:focus-visible,
body .hw-sc-cta a:hover,  body .hw-sc-cta a:focus-visible,
body .hw-wh-sec__cta a:hover,  body .hw-wh-sec__cta a:focus-visible,
body .hw-ag-links a:hover,     body .hw-ag-links a:focus-visible,
body .hw-sc-card__cta a:hover, body .hw-sc-card__cta a:focus-visible,
body .hw-rp-portal:hover .hw-rp-portal__go, body .hw-rp-portal:focus-visible .hw-rp-portal__go,
body .hw-rp-cta a:hover, body .hw-rp-cta a:focus-visible,
body .l-cta:hover p,  body .l-cta:focus-within p,
body .s2-cta:hover p, body .s2-cta:focus-within p,
body .lh-cta:hover p, body .lh-cta:focus-within p{padding-left:10px !important}

body .hw-os-cta:not(.hw-vu-cta--c) a:hover::after,  body .hw-os-cta:not(.hw-vu-cta--c) a:focus-visible::after,
body .hw-ex-cta a:hover::after,  body .hw-ex-cta a:focus-visible::after,
body .hw-lh-cta a:hover::after,  body .hw-lh-cta a:focus-visible::after,
body .hw-we-cta a:hover::after,  body .hw-we-cta a:focus-visible::after,
body .hw-bh-cta a:hover::after,  body .hw-bh-cta a:focus-visible::after,
body .hw-sc-cta a:hover::after,  body .hw-sc-cta a:focus-visible::after,
body .hw-wh-sec__cta a:hover::after,  body .hw-wh-sec__cta a:focus-visible::after,
body .hw-ag-links a:hover::after,     body .hw-ag-links a:focus-visible::after,
body .hw-sc-card__cta a:hover::after, body .hw-sc-card__cta a:focus-visible::after,
body .hw-rp-portal:hover .hw-rp-portal__go::after, body .hw-rp-portal:focus-visible .hw-rp-portal__go::after,
body .hw-rp-cta a:hover::after, body .hw-rp-cta a:focus-visible::after,
body .l-cta:hover p::after,  body .l-cta:focus-within p::after,
body .s2-cta:hover p::after, body .s2-cta:focus-within p::after,
body .lh-cta:hover p::after, body .lh-cta:focus-within p::after{width:36px !important}

/* Las flechas de «volver» apuntan a la izquierda, así que su cola está a la
   DERECHA: el recorte va por ese lado. */
body .hw-nd-back a::before, body .hw-poi-back a::before{
  clip-path:inset(0 0 0 0);transition:clip-path .15s ease-out !important}
body .hw-nd-back a:hover::before,  body .hw-nd-back a:focus-visible::before,
body .hw-poi-back a:hover::before, body .hw-poi-back a:focus-visible::before{
  clip-path:inset(0 10px 0 0)}

/* Sin cambio de color. Los de Agents eran los únicos sin color fijado con
   `!important`, y en hover les llegaba el `a:hover` de Avada
   (--link_hover_color, #424B0A): el rótulo se volvía verde oscuro. */
body .hw-ag-links a, body .hw-ag-links a:hover,
body .hw-ag-links a:focus-visible, body .hw-ag-links a:visited{
  color:var(--awb-color7,#E54511) !important}

/* Submit (#97). En reposo tampoco cuadraba: la instancia del formulario
   (12076:687) pone el texto en x=21 y una flecha de 46 px de x=92 a 138,
   con 20 px de aire a la derecha; aquí iba centrado con una flecha de 22.
   En hover el Submit hace lo mismo que los CTA de texto: el rótulo avanza
   10 px (aquí con `transform`, porque es un <span> propio) y la flecha se
   recorta otros 10 por la cola con `clip-path`. La caja no cambia
   en absoluto. */
body .hw-form .fusion-form-submit-field button,
body .hw-form button.fusion-button{
  justify-content:flex-start !important;padding:0 20px 0 21px !important;gap:13px !important}
body .hw-form .fusion-form-submit-field button::after,
body .hw-form button.fusion-button::after{
  width:46px !important;clip-path:inset(0 0 0 0);
  transition:clip-path .15s ease-out !important}
body .hw-form .fusion-form-submit-field button .fusion-button-text,
body .hw-form button.fusion-button .fusion-button-text{transition:transform .15s ease-out !important}
body .hw-form .fusion-form-submit-field button:hover .fusion-button-text,
body .hw-form .fusion-form-submit-field button:focus-visible .fusion-button-text,
body .hw-form button.fusion-button:hover .fusion-button-text,
body .hw-form button.fusion-button:focus-visible .fusion-button-text{transform:translateX(10px)}
body .hw-form .fusion-form-submit-field button:hover::after,
body .hw-form .fusion-form-submit-field button:focus-visible::after,
body .hw-form button.fusion-button:hover::after,
body .hw-form button.fusion-button:focus-visible::after{clip-path:inset(0 0 0 10px)}

/* ---- 3. Enlaces de texto: sin rojo --------------------------------- */

/* #119 — texto sobre foto: se queda en su color y baja la opacidad. */
body .hw-cm-int__c a{transition:opacity .15s ease-out}
body .hw-cm-int__c a:hover,
body .hw-cm-int__c a:focus-visible{color:#fff !important;opacity:.7}

/* #124 — FAQ: el titular no cambia; el más y el menos, un poco más claros.
   Abierto, la raya vertical está a opacidad 0: no se toca. */
body .hw-fq-q:hover{color:var(--awb-color8,#19180C)}
body .hw-fq-q:hover::before,
body .hw-fq-i:not([open]) > .hw-fq-q:hover::after{opacity:.6}

/* #134 — índice de las páginas legales: en mayúsculas siempre (el texto
   viene de WordPress con mayúsculas a medias) y sin la barra roja. */
body .hw-lg-idx__l a{text-transform:uppercase}
body .hw-lg-idx__l a:hover{border-left-color:transparent}

@media (prefers-reduced-motion:reduce){
  .hw-roll__in,
  body .s-cta a::before, body a.hw-el-cta::before, body .hw-cm-cta a::before,
  body .hw-vu-cta--c a::before, body .hw-gl-load a::before,
  body .hw-nw-load a::before, body .hw-dir__more a::before,
  body .hw-os-cta:not(.hw-vu-cta--c) a, body .hw-os-cta:not(.hw-vu-cta--c) a::after,
  body .hw-wh-sec__cta a, body .hw-wh-sec__cta a::after,
  body .hw-ag-links a, body .hw-ag-links a::after,
  body .hw-sc-card__cta a, body .hw-sc-card__cta a::after,
  body .hw-ex-cta a, body .hw-ex-cta a::after, body .hw-lh-cta a, body .hw-lh-cta a::after,
  body .hw-we-cta a, body .hw-we-cta a::after, body .hw-bh-cta a, body .hw-bh-cta a::after,
  body .hw-sc-cta a, body .hw-sc-cta a::after,
  body .hw-rp-portal__go, body .hw-rp-portal__go::after, body .hw-rp-cta a, body .hw-rp-cta a::after,
  body .hw-nd-back a::before, body .hw-poi-back a::before,
  body .l-cta p, body .l-cta p::after, body .s2-cta p, body .s2-cta p::after,
  body .lh-cta p, body .lh-cta p::after,
  body .hw-form button.fusion-button .fusion-button-text,
  body .hw-form button.fusion-button::after,
  body .hw-form .fusion-form-submit-field button .fusion-button-text,
  body .hw-form .fusion-form-submit-field button::after{transition:none !important}
}

/* ==================================================================
   FITNESS CALENDAR (/fitness-calendar, página 3509)
   NO está en el Figma: se monta con el vocabulario del sitio, igual que la
   404 y las legales — héroe con foto y velo, entradilla centrada a 768, el
   calendario del mes dentro de un marco y las clases en dos columnas.
   La página venía sin héroe ni plantilla: el JPG del calendario empezaba a
   ras de la nav y las clases salían en las dos columnas de Avada, con la
   tipografía por defecto.
   ================================================================== */
.hw-fc-hero,.hw-fc-intro,.hw-fc-cal,.hw-fc-classes{
  padding-left:0 !important;padding-right:0 !important}
.hw-fc-hero .fusion-builder-row,.hw-fc-intro .fusion-builder-row,
.hw-fc-cal .fusion-builder-row,.hw-fc-classes .fusion-builder-row{
  box-sizing:border-box !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important}
.hw-fc-intro .fusion-builder-row,.hw-fc-cal .fusion-builder-row,
.hw-fc-classes .fusion-builder-row{
  padding-left:max(40px, calc((100% - 1160px) / 2)) !important;
  padding-right:max(40px, calc((100% - 1160px) / 2)) !important}
.hw-fc-hero .fusion-column-wrapper,.hw-fc-intro .fusion-column-wrapper,
.hw-fc-cal .fusion-column-wrapper,.hw-fc-classes .fusion-column-wrapper{
  margin-left:0 !important;margin-right:0 !important}
.hw-fc-hero .fusion-layout-column,.hw-fc-intro .fusion-layout-column,
.hw-fc-cal .fusion-layout-column,.hw-fc-classes .fusion-layout-column{
  margin-bottom:0 !important}
.hw-fc-hero .fusion-text p{margin:0}
.hw-fc-intro .fusion-text > p:empty,.hw-fc-cal .fusion-text > p:empty,
.hw-fc-classes .fusion-text > p:empty{display:none !important;margin:0 !important}

/* ---------- héroe ---------- */
/* 460 como las legales: es una página de consultar, no de enseñar. La foto es
   una clase de verdad en el centro comunitario (`Be Health Yoga.jpg`). */
.hw-fc-hero{
  position:relative;min-height:460px !important;
  background:#2E3213 url('/wp-content/uploads/2026/09/hw-fc-hero.webp') center/cover no-repeat !important;
  color:var(--awb-color1,#EFEAE4);
  padding-top:214px !important;padding-bottom:0 !important}
.hw-fc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(66,75,10,.45)}
.hw-fc-hero > *{position:relative;z-index:1}
.hw-fc-hero .fusion-text{color:var(--awb-color1,#EFEAE4)}
.hw-fc-hero__eyebrow p{font-family:'Gravitica','Poppins',sans-serif;font-weight:600;
  font-size:9px;letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hw-fc-hero__eyebrow{margin-bottom:18px !important}
/* El titular va en <h1> y Avada lo pisa desde `fusion-styles`, que se imprime
   DESPUÉS: con un selector normal EMPATAN (0,1,1) y gana él. De ahí la clase
   repetida, igual que en el bloque TITULARES DE PÁGINA EN <h1>. Tamaño: el de
   los héroes del sitio (`messaging_xl`, Juana ExtraLight 78/1.1, tracking 2 %),
   no el 64 de las legales. */
.hw-fc-hero__title.hw-fc-hero__title h1,.hw-fc-hero__title.hw-fc-hero__title p{
  font-family:'Juana','Playfair Display',Georgia,serif !important;font-weight:200 !important;
  font-size:78px !important;line-height:1.1 !important;letter-spacing:.02em !important;
  max-width:900px;margin:0 auto !important;color:var(--awb-color1,#EFEAE4) !important;
  text-transform:none !important;font-style:normal !important}
.hw-fc-hero__title{margin-bottom:0 !important}

/* ---------- entradilla ---------- */
.hw-fc-intro{background:#FFFFFF !important;
  padding-top:110px !important;padding-bottom:0 !important}
.hw-fc-intro__body{max-width:768px;margin:0 auto 40px !important}
.hw-fc-intro__body p{font-family:calluna,'Lora',Georgia,serif;font-size:20px;
  line-height:1.9;color:var(--awb-color8,#19180C);margin:0}
/* El CTA hereda el gesto de `hw-os-cta` (flecha + rollover del bloque CTA). */
.hw-fc-cta{margin:0 auto 0 !important;text-align:center}
.hw-fc-cta p{margin:0}

/* ---------- el calendario del mes ---------- */
.hw-fc-cal{background:#FFFFFF !important;
  padding-top:70px !important;padding-bottom:0 !important}
.hw-fc-cal__fig{margin:0}
.hw-fc-cal__fig img{display:block;width:100%;height:auto;
  border:1px solid rgba(25,24,12,.14)}
.hw-fc-cal__fig figcaption{
  font-family:'Gravitica','Poppins',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;font-feature-settings:"ss01" 1;
  color:var(--awb-color8,#19180C);opacity:.66;margin-top:14px}

/* ---------- las clases ---------- */
.hw-fc-classes{background:#FFFFFF !important;
  padding-top:100px !important;padding-bottom:150px !important}
.hw-fc-classes__title{margin-bottom:46px !important}
/* H2 del sitio: OTR Flapjack Regular, interlineado 1, tracking 5 % y 48 px
   (bloque TIPOGRAFÍA FIGMA). Clase repetida y !important por lo mismo que el
   h1: Avada fuerza familia, tamaño e interlineado del hN. */
.hw-fc-classes__title.hw-fc-classes__title h2{
  font-family:'TAY Flapjack','Oswald',sans-serif !important;font-weight:400 !important;
  font-size:48px !important;line-height:1 !important;letter-spacing:.05em !important;
  color:var(--awb-color8,#19180C) !important;margin:0 !important;
  text-align:center !important;text-transform:none !important;font-style:normal !important}
.hw-fc-grid{display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:84px;row-gap:44px}
.hw-fc-class.hw-fc-class h3{font-family:'Gravitica','Poppins',sans-serif !important;
  font-weight:600 !important;font-size:15px !important;line-height:1.2 !important;
  letter-spacing:1.95px !important;text-transform:uppercase !important;
  font-feature-settings:"ss01" 1;color:var(--awb-color7,#E54511) !important;
  margin:0 0 12px !important;font-style:normal !important}
.hw-fc-class p{font-family:calluna,'Lora',Georgia,serif;font-size:16px;
  line-height:1.8;color:var(--awb-color8,#19180C);margin:0}

@media (max-width:1024px){
  .hw-fc-hero{min-height:360px !important;padding-top:150px !important}
  .hw-fc-hero__title.hw-fc-hero__title h1{font-size:48px !important}
  .hw-fc-classes__title.hw-fc-classes__title h2{font-size:38px !important}
}
@media (max-width:768px){
  .hw-fc-hero{min-height:300px !important;padding-top:120px !important}
  .hw-fc-hero__title.hw-fc-hero__title h1{font-size:36px !important}
  .hw-fc-intro{padding-top:70px !important}
  .hw-fc-intro__body p{font-size:17px}
  .hw-fc-classes{padding-top:70px !important;padding-bottom:90px !important}
  .hw-fc-grid{grid-template-columns:1fr;row-gap:34px}
}

/* ==================================================================
   NAV · ROLLOVERS Y POSICIONES DEL FIGMA (BugHerd #79-#82, 2026-09-23)
   ------------------------------------------------------------------
   Hay TRES barras con la misma nav y tres marcados distintos:
     · cabecera transparente  .hw-hdr   (sección 9 de Avada, en la BD)
     · barra opaca con scroll .hw-nav   (hw-nav.js)
     · panel de menú abierto  .hw-oc__top (hw-offcanvas.js)
   Cada una tenía sus márgenes (40 / 60 / 60 px), su cuerpo de letra y su
   dibujo de rayas (44 px, 22 px, una X en SVG de 34), así que al pasar de
   una a otra todo saltaba de sitio. Strada (#81): «la posición de los
   elementos de la nav no puede cambiar entre nav transparente, opaca y
   overlay». Aquí las tres comparten las medidas del Figma (frame 1440,
   componente `main nav` 12017:637):
     enlaces     x=42, hueco 31 px              (#79 «algo más juntos»)
     rótulos     Gravitica DemiBold 12 / 1.6, tracking 13 % = 1,56 px
     rayas       52 px, 1 px, separadas 7 px, borde derecho a 44 px
     rótulo→rayas 10 px · banda de 81 px con el centro a 40,5
   Rollovers (nav_utility 12076:501, nav_menu 12076:541, nav_close
   12076:608; todos SMART_ANIMATE 150 ms EASE_OUT):
     · el rótulo RUEDA: dos copias en una ventana de 15 px, sube 14 px
       (12 en el Figma; ver la nota de .hw-roll__t + .hw-roll__t).
       Sin cambio de color, opacidad ni desplazamiento lateral (#82: igual
       en las tres barras).
     · menú: las dos rayas se juntan en una (y=5 y 12 → 8).
     · cerrar: la X de 52 px pasa a una sola diagonal «/» de 40 px.
   El marcado lo ponen hw-nav.js (que también decora la cabecera de la
   BD) y hw-offcanvas.js: .hw-roll > .hw-roll__t ×2 y .hw-bars.
   ------------------------------------------------------------------ */
:root{--hw-nav-pl:42px;--hw-nav-pr:44px;--hw-nav-h:81px;--hw-nav-gap:31px}
@media(max-width:1024px){:root{--hw-nav-pl:30px;--hw-nav-pr:30px}}

/* ---- el rótulo que rueda ----
   La ventana lleva 5 px de más a cada lado (y el margen negativo que los
   devuelve) para que el overflow no muerda el tracking ni los remates. */
.hw-roll{
  display:inline-flex;flex-direction:column;vertical-align:top;
  height:15px;overflow:hidden;padding:0 5px;margin:0 -5px}
.hw-roll__t{
  display:block;white-space:nowrap;margin-top:-2px;
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:12px !important;line-height:19.2px !important;letter-spacing:1.56px !important;
  text-transform:uppercase;transition:transform .15s ease-out}
/* la copia, 14 px por debajo de la primera: 19,2 − 5,2. En el Figma son 12,
   pero así sus mayúsculas quedaban a 0,5 px del fondo de la ventana y, con el
   suavizado antialiased (#88), ese medio píxel se pintaba como un subrayado
   bajo FIND A HOME / COMMUNITY MAP. Con 14 quedan 2,5 px de holgura; en
   reposo y al final del hover todo está donde estaba. */
.hw-roll__t + .hw-roll__t{margin-top:-5.2px}
.hw-hdr__links a:hover .hw-roll__t,
.hw-hdr__links a:focus-visible .hw-roll__t,
.hw-hdr__menu:hover .hw-roll__t,
.hw-nav__left a:hover .hw-roll__t,
.hw-nav__left a:focus-visible .hw-roll__t,
.hw-nav__menu:hover .hw-roll__t,
.hw-nav__menu:focus-visible .hw-roll__t,
.hw-oc__toplinks a:hover .hw-roll__t,
.hw-oc__toplinks a:focus-visible .hw-roll__t,
.hw-oc__close:hover .hw-roll__t,
.hw-oc__close:focus-visible .hw-roll__t{transform:translateY(-14px)}

/* ---- rayas del menú y X de cerrar ---- */
.hw-bars,
.hw-hdr__bars{
  position:relative;display:inline-block;flex:0 0 auto;vertical-align:middle;
  width:52px !important;height:15px !important;border:0 !important;color:inherit}
.hw-bars::before,.hw-bars::after,
.hw-hdr__bars::before,.hw-hdr__bars::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .15s ease-out}
.hw-bars::before,.hw-hdr__bars::before{top:5px}
.hw-bars::after,.hw-hdr__bars::after{top:12px}
.hw-hdr__menu:hover .hw-hdr__bars::before,
.hw-nav__menu:hover .hw-bars::before,
.hw-nav__menu:focus-visible .hw-bars::before{transform:translateY(3px)}
.hw-hdr__menu:hover .hw-hdr__bars::after,
.hw-nav__menu:hover .hw-bars::after,
.hw-nav__menu:focus-visible .hw-bars::after{transform:translateY(-4px)}
/* X: dos trazos de 52 px girados, con el centro en el de las rayas (26, 9) */
.hw-bars--x::before,.hw-bars--x::after{top:9px}
.hw-bars--x::before{transform:rotate(45deg)}
.hw-bars--x::after{transform:rotate(-45deg)}
.hw-oc__close:hover .hw-bars--x::before,
.hw-oc__close:hover .hw-bars--x::after,
.hw-oc__close:focus-visible .hw-bars--x::before,
.hw-oc__close:focus-visible .hw-bars--x::after{transform:rotate(-45deg) scaleX(.77)}

/* ---- fuera los rollovers viejos: opacidad, rojo, amarillo, desplazamiento ---- */
.hw-hdr__links a,.hw-hdr__links a:hover,
.hw-hdr__menu,.hw-hdr__menu:hover{opacity:1 !important}
.hw-nav__left a{opacity:1;color:inherit}
.hw-nav__left a:hover,.hw-nav__menu:hover{color:inherit}
.hw-oc__toplinks a{opacity:1}
.hw-oc__toplinks a:hover,.hw-oc__toplinks a:focus-visible{transform:none}
.hw-oc__toplinks a:not([aria-current]):hover,
.hw-oc__toplinks a:not([aria-current]):focus-visible,
.hw-oc__close:hover{color:var(--awb-color1,#EFEAE4)}

/* ---- la misma geometría en las tres barras (escritorio y tablet) ---- */
@media(min-width:901px){
  .fusion-tb-header .hw-hdr{
    padding:0 var(--hw-nav-pr) 0 var(--hw-nav-pl) !important;
    min-height:var(--hw-nav-h);display:flex !important;align-items:center}
  .fusion-tb-header .hw-hdr > .fusion-builder-row{width:100%}
  /* Avada da 20 px de margin-bottom a cada columna; el padding viejo (34/24)
     lo tapaba y ahora descentraría la fila 10 px hacia arriba */
  .fusion-tb-header .hw-hdr .fusion-layout-column{margin-bottom:0 !important}
  .hw-nav__in{
    max-width:none;min-height:var(--hw-nav-h);height:var(--hw-nav-h);
    padding:0 var(--hw-nav-pr) 0 var(--hw-nav-pl)}
  .hw-oc__top{height:var(--hw-nav-h);padding:0 var(--hw-nav-pr) 0 var(--hw-nav-pl);box-sizing:border-box}

  .hw-hdr__links p,.hw-nav__left,.hw-oc__toplinks{gap:var(--hw-nav-gap)}
  .hw-hdr__links a,.hw-nav__left a,.hw-oc__toplinks a{display:inline-flex;align-items:center;line-height:1}
  .hw-hdr__menu p,.hw-nav__menu,.hw-oc__close{gap:10px}

  /* el logo, al tamaño de la cabecera transparente en las tres */
  .hw-nav__brand,.hw-oc__brand{font-size:20px;letter-spacing:6px;line-height:1}
}

/* ---- móvil y tablet estrecha (≤900): la barra del panel = la barra opaca ----
   · Los enlaces de arriba llevan width:100% para bajar a su fila, pero el
     flex:1 (base 0 %) de la regla general se come ese ancho: a 768 no bajaban,
     se quedaban en la primera fila y empujaban «Close» al centro de la barra.
   · El panel iba 11 px más abajo que la barra opaca y con el logo a 19 px
     (18 en la opaca): mismo padding, misma altura y mismo logo. */
@media(max-width:900px){
  /* y sin los 22 px de margen lateral, que con la base al 100 % la desbordaban:
     los recuadros quedan a 22 px del borde, alineados con el logo */
  .hw-oc__toplinks{flex:0 0 100%;margin-left:0 !important;margin-right:0 !important}
  .hw-oc__top{padding:12px 22px;row-gap:0}
  .hw-oc__brand,.hw-oc__close{min-height:32px}
  .hw-oc__brand{display:flex;align-items:center;font-size:18px;letter-spacing:4px;line-height:1}
  .hw-oc__close{gap:10px}
  .hw-nav__menu{gap:10px}
  /* La cabecera transparente pasaba a móvil a 640 y las otras dos a 900: entre
     medias, al abrir el menú el logo saltaba del centro a la izquierda. Aquí
     entra en la misma maqueta que ellas: sin enlaces, logo a la izquierda. */
  .fusion-tb-header .hw-hdr{padding:19px 22px 17px !important}
  .fusion-tb-header .hw-hdr > .fusion-builder-row{margin-left:0 !important;margin-right:0 !important}
  .fusion-tb-header .hw-hdr .fusion-layout-column{margin-bottom:0 !important;padding:0 !important}
  .fusion-tb-header .hw-hdr__col--left{display:none !important}
  .fusion-tb-header .hw-hdr__col--brand{flex:1 1 auto !important;width:auto !important;order:0 !important}
  .fusion-tb-header .hw-hdr__col--menu{flex:0 0 auto !important;width:auto !important;order:1 !important}
  .fusion-tb-header .hw-hdr__col--brand .fusion-column-wrapper,
  .fusion-tb-header .hw-hdr__col--menu .fusion-column-wrapper{padding:0 !important;margin:0 !important}
  .hw-hdr__brand,.hw-hdr__brand p{text-align:left !important}
  .hw-hdr__brand a{font-size:18px !important;letter-spacing:4px !important}
  .hw-hdr__menu p{gap:10px}
}

/* ---- UNA sola nav: fija desde arriba, cambia de piel sin moverse ----
   (#81, segunda lectura, 2026-09-23). En el Figma «transparente» y «opaca»
   son variantes del MISMO componente (`main nav` Default / opaque): mismos
   hijos en el mismo sitio, sólo cambian fondo y tinta. Antes la cabecera de
   Avada se iba con el scroll y al pasar el héroe BAJABA deslizándose otra
   barra. Ahora hw-nav.js pone `hw-nav-fixed` en <html>: la barra .hw-nav
   está fija desde el principio, transparente y con la tinta de la cabecera
   (crema sobre héroe oscuro, Boxwood sobre página clara), y con `.is-solid`
   pasa a blanco + Boxwood (#FFFFFF / #424B0A, variante `opaque`) con un
   fundido. La cabecera de Avada queda oculta; sin JS se ve ella, como antes.
   El panel de menú (z-index 99999) entra con un fundido de opacidad encima,
   y su barra cae en el mismo píxel que ésta. */
.hw-nav-fixed .fusion-tb-header .hw-hdr{visibility:hidden}
.hw-nav-fixed .hw-nav{
  --hw-nav-ink:var(--awb-color5,#424B0A);
  transform:none !important;color:var(--hw-nav-ink);
  background:transparent;border-bottom-color:transparent;box-shadow:none;
  pointer-events:none;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
body.hw-hdr-light .hw-nav{--hw-nav-ink:var(--awb-color1,#EFEAE4)}
.hw-nav-fixed .hw-nav.is-solid{
  --hw-nav-ink:var(--awb-color5,#424B0A);
  background:#fff;border-bottom-color:rgba(66,75,10,.12);
  box-shadow:0 4px 20px rgba(25,24,12,.06);pointer-events:auto}
/* mientras es transparente sólo capturan el clic sus enlaces y el botón,
   como hacía la cabecera: el resto de la franja deja pasar al héroe */
.hw-nav-fixed .hw-nav a,.hw-nav-fixed .hw-nav button{pointer-events:auto}
.hw-nav .hw-nav__left,.hw-nav .hw-nav__menu,.hw-nav .hw-nav__brand{
  color:var(--hw-nav-ink,#19180c);transition:color .3s ease,opacity .2s ease}
/* el logo, con el hover de la cabecera (la tinta a .75), no el Boxwood fijo */
.hw-nav-fixed .hw-nav__brand:hover,
.hw-nav-fixed .hw-nav__brand:focus-visible{color:var(--hw-nav-ink);opacity:.75}

/* ---- listas del panel (BugHerd #83 y #84) ----
   #83 «algo más de espacio vertical»: la lista principal iba de 48,3 en 48,3
   px (el interlineado 1,42 de la regla vieja convertido en padding de .21em)
   y en el Figma (`primary list`, 12101:288) va de 52 en 52. Con el cuerpo de
   34 que ya lleva, 52 = 34 + 9 + 9; y la entrada partida, «Commercial
   opportunities», queda en 34 + 34 + 18 = 86, que es EXACTAMENTE lo que mide
   en el Figma. Sólo escritorio: en móvil (28 px, paso 42) ya casa con el
   frame móvil (≈43).
   #84: la secundaria sólo cambia de color al pasar el ratón (componente
   nav_overlay_secondary 12101:474: la variante hover no mueve el texto). La
   principal sí se mueve, 10 px a la izquierda (nav_overlay_primary: x 0 → −10;
   iban 8). */
@media(min-width:901px){
  .hw-oc__primary a{line-height:1;padding:9px 0}
}
.hw-oc__primary a:hover,
.hw-oc__primary a:focus-visible,
.hw-oc__primary a[aria-current]:hover{transform:translateX(-10px)}
.hw-oc__secondary a:hover,
.hw-oc__secondary a:focus-visible{transform:none}

/* #85 (2026-09-23): «BĒ HEALTH» en mayúsculas en el menú, como el resto de la
   lista secundaria. La regla general `.hw-tm{text-transform:none}` (para que
   en el texto corrido se lea «Bē Health®») lo dejaba en caja mixta también
   aquí. Sólo dentro del panel: fuera sigue como estaba. Gravitica trae la Ē
   (U+0112). Con el tracking de sus hermanas, no el .02em de .hw-tm. */
.hw-oc__secondary .hw-tm{text-transform:uppercase !important;letter-spacing:inherit}

@media(prefers-reduced-motion:reduce){
  .hw-oc__primary a:hover,.hw-oc__primary a:focus-visible,
  .hw-oc__primary a[aria-current]:hover{transform:none}
  .hw-nav-fixed .hw-nav,.hw-nav .hw-nav__left,.hw-nav .hw-nav__menu,.hw-nav .hw-nav__brand,
  .hw-roll__t,.hw-bars::before,.hw-bars::after,
  .hw-hdr__bars::before,.hw-hdr__bars::after{transition:none}
}

/* ---- 2026-09-24 · móvil (Santiago) ---------------------------------------
   1) El menú secundario (Homebuilders, Bē Health…) va en DOS COLUMNAS QUE SE
      LLENAN DE ARRIBA ABAJO, como el Figma (overlay móvil 14070:1552):
      Homebuilders → Residents a la izquierda y Raydient → Accessibility a la
      derecha. Antes la rejilla se llenaba por filas y los rótulos de 2 y 3
      líneas descuadraban las dos columnas. El orden del HTML ya es ese.
   2) El «Stay in the know» fijo (#hw-cw, z-index máximo) quedaba ENCIMA del
      panel abierto. Con el panel abierto (html.hw-oc-lock) se oculta; el panel
      ya trae su propio sello abajo. */
@media(max-width:900px){
  /* Columnas de texto y no rejilla: en una rejilla las dos columnas comparten
     el alto de fila y «Raydient Places & Properties» (2-3 líneas) empujaba la
     columna de la izquierda. El salto va forzado antes del 7.º enlace. */
  .hw-oc__secondary{display:block !important;columns:2;column-gap:24px}
  .hw-oc__secondary a{display:block;break-inside:avoid;margin:0 0 11px}
  .hw-oc__secondary a:nth-child(7){break-before:column}
}
html.hw-oc-lock #hw-cw{display:none !important}

/* ---- BugHerd #185 (25-09) · el pie del panel en móvil ----------------------
   «There should be a line at the bottom with the Stay in the Know button in
   the bottom left then the social icons in the bottom right. The background
   is also not extending to the bottom of the menu.»
   1) El fondo (vídeo del roble, y su póster en ::before) iba `absolute` dentro
      de un panel que hace scroll: cubría la primera pantalla y, al bajar, el
      resto quedaba en verde liso. `fixed` lo deja quieto detrás de todo.
   2) `.hw-oc__foot` (lo monta hw-offcanvas.js): filete, sello a la izquierda,
      iconos a la derecha. El sello del panel lo ocultaba hw-contact-widget.js
      con `display:none!important` (0,1,0); aquí se le gana con más peso. */
html .hw-oc > .hw-oc__foot{position:static}
.hw-oc__foot .hw-oc__social--foot{display:none}
@media(max-width:900px){
  .hw-oc__bg,.hw-oc::before{position:fixed !important}
  .hw-oc__body{padding-bottom:12px !important}
  .hw-oc__secondary .hw-oc__social{display:none !important}
  html .hw-oc > .hw-oc__foot{
    position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
    margin:8px 22px 0;padding:22px 0 30px;border-top:1px solid rgba(239,234,228,.35)}
  html .hw-oc .hw-oc__foot .hw-oc__badge{display:flex !important;position:static !important;
    margin:0 !important;width:64px;height:64px}
  html .hw-oc .hw-oc__foot .hw-oc__social--foot{display:flex !important;margin:0;gap:18px}
}

/* ==================================================================
   SUAVIZADO DE TEXTO COMO EN EL FIGMA (BugHerd #88, 2026-09-23)
   Strada: «¿es el peso regular de Juana? Se ve algo más pesado (puede ser
   el aliasing del navegador frente a Figma)». Es la Regular: cara 341-900
   cargada (document.fonts), peso 400 sin negrita sintética, y el fichero es
   Juana Regular con usWeightClass 400.
   Lo que engorda es el suavizado por defecto de macOS (`auto`), que dilata
   los trazos del texto oscuro sobre fondo claro. Figma pinta sin esa
   dilatación. `antialiased` la quita en Chrome y Safari de Mac, y
   `grayscale` en Firefox de Mac. No afecta a Windows, que no respeta
   ninguna de las dos propiedades. El panel del menú ya iba así.
   Va en todo el sitio y no sólo en Juana: la dilatación engorda todas las
   fuentes por igual.
   ================================================================== */
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* ==================================================================
   IMÁGENES SIN HOVER SI NO SON UN CTA (BugHerd #89, 2026-09-23)
   Strada: «quitar los efectos de hover de todas las imágenes que no
   formen parte de un CTA». Había un zoom de 1,045 repartido por las
   páginas (.hw-os-*, .hw-loc-*, .hw-ex-*, .hw-lh-*, .hw-we-*, .hw-bh-*,
   .hw-sc-*, .hw-wh-card, .hw-vu-*), otro general para TODA imagen de
   Avada y toda tarjeta de entrada, el sello del formulario a 1,07 y el
   `hover-type-zoomin` de las opciones de Avada.
   Criterio: una imagen es «parte de un CTA» si está DENTRO de un enlace o
   de un botón. Esas conservan su zoom (tarjetas enlazadas, galería); las
   demás se quedan quietas. Ninguna de estas imágenes tiene transform en
   reposo (sólo la transición), así que anular con `none` no mueve nada.
   Las reglas de origen se quedan como están, en sus .css por página: este
   bloque va detrás y las anula con !important.
   ================================================================== */
.fusion-imageframe:hover img:not(a *):not(button *),
.hover-type-zoomin:hover img:not(a *):not(button *),
.fusion-post-card:hover .fusion-image-wrapper img:not(a *),
.hw-form-icon:hover img,
.hw-os-plain:hover .hw-os-plain__img:not(a *),
.hw-os-frame:hover .hw-os-frame__front:not(a *),
.hw-loc-c:hover .hw-loc-c__win img:not(a *),
.hw-ex-shot:hover img:not(a *),
.hw-lh-shot:hover img:not(a *),
.hw-lh-panel:hover .hw-lh-panel__win img:not(a *),
.hw-lh-cc:hover img:not(a *),
.hw-we-nature__media:hover img:not(a *),
.hw-we-shot:hover img:not(a *),
.hw-we-panel:hover .hw-we-panel__win img:not(a *),
.hw-bh-shot:hover img:not(a *),
.hw-bh-panel:hover .hw-bh-panel__win img:not(a *),
.hw-sc-shot:hover img:not(a *),
.hw-wh-card__wrap:hover .hw-wh-card__img:not(a *),
.hw-vu-shot:hover img:not(a *){transform:none !important}
/* ==================================================================
   HÉROES UNIFICADOS — BugHerd #154 (y #40, #118, #153)
   2026-09-24. Strada: «audit all of the headers … different heights,
   placement of text in different spots, eyebrow fonts different sizes …
   They should all be the same» (Location, Our Story y Homebuilders).

   Medido antes en vivo (a 1634): la mayoría —Location, Our Story, Explore,
   Live Here, Wellness, Commercial, Visit Us— iban a 680 de alto, antetítulo
   de 12 px en y=234 y titular en y=263. Se salían:
     · Homebuilders y las 4 fichas de constructora: antetítulo a 15 con 26 de
       caja y 18 de margen → titular en 278 y héroe de 694.
     · Schools y Bē Health: arrancaban en 196.
     · What's Happening: en 268.
   Y el antetítulo, en dos tamaños. Alex (#153) fija el GRANDE: 15 px /
   1,95 px, el de los CTA. Se deja la caja de 19 px del Figma para que el
   titular siga en 263 en todas.

   Fuera a propósito: Resident Portal (héroe corto, sin foto a sangre) y las
   legales (460 px, páginas de leer).
   ------------------------------------------------------------------ */
/* Alto y arranque, sólo en escritorio: en móvil cada página ya tiene su
   héroe más bajo y eso no se toca. */
@media(min-width:1024px){
  body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
    .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero){
    padding-top:234px !important;min-height:680px !important;position:relative !important}
  /* La guía vertical: en el Figma va SIEMPRE de y=559 al borde inferior
     (121 px), mida lo que mida el titular. Iba en flujo, colgada del titular
     con un margen, así que un titular de tres líneas (Schools) empujaba el
     héroe a 704. Anclada abajo, el alto lo dan el arranque y el titular, con
     680 de mínimo. En las fichas de constructora (#53) se estiraba con flex
     para rellenar: anclada abajo ya no hace falta. */
  body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
    .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero)
    :is(.hw-loc-hero__rule,.hw-os-hero__rule,.hw-ex-hero__rule,.hw-lh-hero__rule,
    .hw-sc-hero__rule,.hw-we-hero__rule,.hw-wh-hero__rule,.hw-cm-hero__rule,
    .hw-vu-hero__rule,.hw-bh-hero__rule,.hw-hb-hero__rule,.hw-bd-hero__rule,
    .hw-ag-hero__rule){
    position:absolute !important;left:50%;bottom:0;transform:translateX(-50%);
    margin:0 !important;flex:none !important;width:auto !important}
  /* …y para que «abajo» sea el borde del HÉROE y no el de la columna (que es
     `relative` en Avada y acaba donde acaba el titular), la columna no crea
     contexto de posición. */
  body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
    .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero)
    :is(.fusion-builder-row,.fusion-layout-column,.fusion-column-wrapper){position:static !important}
  /* Our Story centra la columna (`align-self:center`): con la guía fuera del
     flujo, la columna encogía y bajaba a y=357. Arriba, como todas. */
  body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
    .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero)
    .fusion-layout-column{align-self:flex-start !important}
  body :is(.hw-loc-hero__rule,.hw-os-hero__rule,.hw-ex-hero__rule,.hw-lh-hero__rule,
    .hw-sc-hero__rule,.hw-we-hero__rule,.hw-wh-hero__rule,.hw-cm-hero__rule,
    .hw-vu-hero__rule,.hw-bh-hero__rule,.hw-hb-hero__rule,.hw-bd-hero__rule,
    .hw-ag-hero__rule) :is(p, span){margin:0 !important}
  body :is(.hw-loc-hero__rule,.hw-os-hero__rule,.hw-ex-hero__rule,.hw-lh-hero__rule,
    .hw-sc-hero__rule,.hw-we-hero__rule,.hw-wh-hero__rule,.hw-cm-hero__rule,
    .hw-vu-hero__rule,.hw-bh-hero__rule,.hw-hb-hero__rule,.hw-bd-hero__rule,
    .hw-ag-hero__rule) span{height:121px !important;display:block !important}
}
body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
  .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero)
  :is(.hw-loc-hero__eyebrow,.hw-os-hero__eyebrow,.hw-ex-hero__eyebrow,.hw-lh-hero__eyebrow,
  .hw-sc-hero__eyebrow,.hw-we-hero__eyebrow,.hw-wh-hero__eyebrow,.hw-cm-hero__eyebrow,
  .hw-vu-hero__eyebrow,.hw-bh-hero__eyebrow,.hw-hb-hero__eyebrow,.hw-bd-hero__eyebrow,
  .hw-ag-hero__eyebrow){margin-bottom:10px !important}
body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
  .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero)
  :is(.hw-loc-hero__eyebrow,.hw-os-hero__eyebrow,.hw-ex-hero__eyebrow,.hw-lh-hero__eyebrow,
  .hw-sc-hero__eyebrow,.hw-we-hero__eyebrow,.hw-wh-hero__eyebrow,.hw-cm-hero__eyebrow,
  .hw-vu-hero__eyebrow,.hw-bh-hero__eyebrow,.hw-hb-hero__eyebrow,.hw-bd-hero__eyebrow,
  .hw-ag-hero__eyebrow) p{
  font-family:'Gravitica','Poppins',sans-serif !important;font-weight:600 !important;
  font-size:15px !important;line-height:19px !important;letter-spacing:1.95px !important;
  margin:0 !important}

/* BugHerd #190 (25-09) · MÓVIL: «On all pages, the line should be anchored to
   the bottom of the images». La guía iba en flujo bajo el titular y, con los
   héroes de 520 px de mínimo, quedaba flotando a 60-140 px del borde (medido a
   375: Location 132, Schools 141, Agents 59…). Se ancla abajo igual que en
   escritorio, con su alto de siempre (64-70 px); el titular no se mueve. */
@media(max-width:1023px){
  body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
    .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero){
    position:relative !important}
  body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
    .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero)
    :is(.fusion-builder-row,.fusion-layout-column,.fusion-column-wrapper){position:static !important}
  body :is(.hw-loc-hero,.hw-os-hero,.hw-ex-hero,.hw-lh-hero,.hw-sc-hero,.hw-we-hero,
    .hw-wh-hero,.hw-cm-hero,.hw-vu-hero,.hw-bh-hero,.hw-hb-hero,.hw-bd-hero,.hw-ag-hero)
    :is(.hw-loc-hero__rule,.hw-os-hero__rule,.hw-ex-hero__rule,.hw-lh-hero__rule,
    .hw-sc-hero__rule,.hw-we-hero__rule,.hw-wh-hero__rule,.hw-cm-hero__rule,
    .hw-vu-hero__rule,.hw-bh-hero__rule,.hw-hb-hero__rule,.hw-bd-hero__rule,
    .hw-ag-hero__rule){
    position:absolute !important;left:50%;bottom:0;transform:translateX(-50%);
    margin:0 !important;flex:none !important;width:auto !important}
  body :is(.hw-loc-hero__rule,.hw-os-hero__rule,.hw-ex-hero__rule,.hw-lh-hero__rule,
    .hw-sc-hero__rule,.hw-we-hero__rule,.hw-wh-hero__rule,.hw-cm-hero__rule,
    .hw-vu-hero__rule,.hw-bh-hero__rule,.hw-hb-hero__rule,.hw-bd-hero__rule,
    .hw-ag-hero__rule) :is(p, span){margin:0 !important}
}

/* BugHerd #195-#197 y #200 (25-09) · MÓVIL: encuadre de las fotos del héroe.
   A 390×520 una foto de 2880×1360 a `cover` sólo enseña el 35 % central del
   ancho. Se centra el encuadre en lo que importa (posición medida sobre la
   foto): Wellness, la corredora (31 % → 21 %); Commercial, las dos personas
   (36 % → 28 %); What's Happening, la chica del polo amarillo y su polo
   (70 % → 81 %). */
@media(max-width:760px){
  body .hw-we-hero{background-position:21% 50% !important}
  body .hw-cm-hero{background-position:28% 50% !important}
  body .hw-wh-hero{background-position:81% 50% !important}
  /* #200 · Homebuilders: «Homes / for you / (and you too)» en tres líneas; en
     dos tocaba los bordes. El salto sólo existe en móvil. */
  .hw-hb-hero .hw-br-m{display:block}
  /* y Commercial (25-09, Santiago): «Business, there's a / place for you» a
     390 dejaba la «a» sola en una línea. En móvil: «Business, / there's a
     place / for you»; el <br> de escritorio se apaga. */
  .hw-cm-hero .hw-br-m{display:block}
  .hw-cm-hero br.hw-br-d{display:none}
}
.hw-br-m{display:none}

/* ==================================================================
   CARRIL DE SECCIÓN — BugHerd #94 y #147 (2026-09-24)
   Encima del bloque «HOME · AJUSTES 2026-09-01 / 2) MARCADORES DE SECCIÓN»,
   que sigue siendo el que lo dibuja. Aquí sólo cambia:
   · la posición: ya no va clavado a media pantalla. `hw-custom.js` le pone el
     `top` en cada scroll: entra con su sección y se queda a 130 px del borde.
   · la guía de avance sólo se ve en Welcome (`.has-progress`).
   · la letra, la del Figma (`nav_gravitica`: Gravitica 12 / 1,56 px; los
     rótulos `section` del frame miden 70 px para «LOCATION»).
   ------------------------------------------------------------------ */
.hw-secrail{top:130px;transform:none}
.hw-secrail__track{display:none}
.hw-secrail.has-progress .hw-secrail__track{display:block}
.hw-secrail__label{font-size:12px;letter-spacing:1.56px}

/* BugHerd #206 (25-09): el apóstrofo de «WHAT’S» salía como un guion suelto
   («WHAT - S»). Con `text-orientation:mixed`, en vertical el navegador toma la
   forma VERTICAL de la puntuación (la fuente sí trae la ’ normal, 223 u de
   avance). `sideways` pinta la línea entera como texto horizontal girado: la
   ’ queda como apóstrofo. Las letras se ven exactamente igual que antes. */
.hw-secrail__label{text-orientation:sideways}

/* ==================================================================
   VÍDEO DE MARCA EN VENTANA — BugHerd #5 (2026-09-24)
   Como en wildlight.com (Santiago: «just as they have in their wildlight
   example»). El JS está en `hw-custom.js`; aquí:
   · el avance mudo en bucle, encima del vídeo largo (que se queda debajo sólo
     para dar el tamaño del recuadro y el póster);
   · el botón cubre TODO el recuadro, con «Play video» + el triángulo del
     Figma abajo a la derecha y un degradado suave a la derecha para que se
     lea (el mismo recurso que Wildlight: 20 % del ancho, a negro);
   · la ventana: velo rgba(0,0,0,.6), caja blanca, × de 18 px arriba a la
     derecha, vídeo 16:9. Medidas de su CSS (`.modal__container`):
     escritorio con relleno clamp(1.5rem, .8rem + 2.19vw, 5rem); por debajo
     de 992 px, caja a todo el ancho con 45 / 15 / 15 de relleno.
   ------------------------------------------------------------------ */
.hw-vidblock__preview{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block;border-radius:2px;pointer-events:none}

body .hw-vidblock .hw-vidblock__play{
  position:absolute !important;inset:0 !important;z-index:2;
  width:auto !important;height:auto !important;transform:none !important;
  display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;
  padding:18px 18px 16px !important;margin:0;border:0;border-radius:2px;cursor:pointer;
  background:linear-gradient(90deg, rgba(0,0,0,0) 80%, rgba(0,0,0,.35) 100%) !important;
  color:var(--awb-color1,#EFEAE4);line-height:1}
body .hw-vidblock .hw-vidblock__play:hover{transform:none !important}
body .hw-vidblock .hw-vidblock__play::after{
  content:"";display:block;flex:0 0 auto;width:14px !important;height:16px !important;
  background:var(--awb-color1,#EFEAE4);
  clip-path:polygon(0 0, 0 100%, 100% 50%);transition:transform .2s ease}
body .hw-vidblock .hw-vidblock__play:hover::after,
body .hw-vidblock .hw-vidblock__play:focus-visible::after{transform:translateX(3px)}
.hw-vidblock__label{
  font-family:'Juana','Playfair Display',Georgia,serif;font-size:18px;letter-spacing:.02em;
  color:var(--awb-color1,#EFEAE4);text-shadow:0 1px 8px rgba(0,0,0,.35)}
body .hw-vidblock .hw-vidblock__play:focus-visible{
  outline:3px solid var(--awb-color7,#E54511);outline-offset:3px;border-radius:2px}
body .hw-vidblock.is-playing .hw-vidblock__play{opacity:1;pointer-events:auto}

/* ---------- la ventana ---------- */
html.hw-vmodal-abierta{overflow:hidden}
/* z-index al máximo: en móvil el sello «Stay in the know» va por encima de
   99999 y quedaba sin velo. */
.hw-vmodal{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center}
.hw-vmodal[hidden]{display:none !important}
.hw-vmodal__box{position:relative;box-sizing:border-box;background:#fff;
  padding:clamp(1.5rem, .8rem + 2.19vw, 5rem)}
.hw-vmodal__frame{
  width:min(1000px, calc(100vw - 2 * clamp(1.5rem, .8rem + 2.19vw, 5rem) - 80px),
            calc((100vh - 2 * clamp(1.5rem, .8rem + 2.19vw, 5rem) - 80px) * 16 / 9));
  aspect-ratio:16/9;background:#000}
.hw-vmodal__video{display:block;width:100%;height:100%;object-fit:contain;background:#000;margin:0}
.hw-vmodal__x{position:absolute;top:0;right:1.5rem;
  height:clamp(1.5rem, .8rem + 2.19vw, 5rem);width:18px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;color:#19180c}
.hw-vmodal__x svg{width:18px;height:18px;display:block}
.hw-vmodal__x:hover{opacity:.6}
.hw-vmodal__x:focus-visible{outline:2px solid var(--awb-color7,#E54511);outline-offset:4px}

@media(max-width:991px){
  .hw-vmodal__box{width:100%;padding:45px 15px 15px}
  .hw-vmodal__frame{width:100%}
  .hw-vmodal__x{height:45px;right:15px}
  .hw-vidblock__label{font-size:16px}
  body .hw-vidblock .hw-vidblock__play{padding:12px 12px 10px !important;
    background:linear-gradient(90deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%) !important}
}
@media(prefers-reduced-motion:reduce){
  body .hw-vidblock .hw-vidblock__play::after{transition:none}
}

/* BugHerd #168 (25-09): mientras no haya vídeo, la home enseña sólo el póster
   (el shortcode pinta un <img> con las mismas clases que el <video>). */
/* con la proporción del vídeo del Figma (720×366, nodo 12004:121), para que el
   bloque mida lo mismo que con vídeo: el póster es 3:2 y lo estiraba a 587. */
.hw-vidblock--estatico .hw-vidblock__img{display:block;width:100%;height:auto;aspect-ratio:720/366;
  object-fit:cover !important;object-position:50% 65%;margin:0 !important;cursor:default}

/* ==================================================================
   MÓDULO MEDIA + TEXTO EN MÓVIL — BugHerd #182 (y #181)
   2026-09-25. Strada: «On all pages, there is a lot of inconsistency with
   this module on mobile … It should always be the image first then the
   eyebrow, headline, copy and CTA should be centered» (librería de módulos
   del Figma, «Media Left/Right Content», columna móvil).

   Medido a 390 antes del cambio: en las 16 apariciones el texto iba a la
   IZQUIERDA y la foto salía unas veces antes y otras después según el orden
   de escritorio (Location, Explore ×2, Live Here ×3, Schools ×3, Wellness ×2,
   Bē Health ×2, Our Story ×2, Agents, Visit Us) y, en la home, Come on down,
   Smart thinking, Welcome mat, Slow and fast y Commercial, cada uno a su
   manera. (Welcome mat tiene su propio montaje móvil en el Figma: #183,
   abajo.) Aquí una sola regla para todos: la columna de la foto primero
   (`order:-1`) y todo el texto centrado.

   Sólo ≤760: en tablet cada página conserva su montaje.
   ------------------------------------------------------------------ */
@media(max-width:760px){
  /* ---- páginas interiores: dos columnas, media + texto ---- */
  body :is(.hw-loc-savannah,.hw-ex-split,.hw-lh-split,.hw-lh-future,.hw-sc-split,
    .hw-we-split,.hw-bh-split,.hw-os-split,.hw-ag-out,.hw-vu-model) > .fusion-builder-row{
    display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important}
  /* `.fusion-builder-row >` delante: varias páginas anulan el margen de sus
     columnas con (0,2,0) y aquí hace falta ganarles para el aire foto→texto. */
  body .fusion-builder-row > :is(.hw-loc-sav__media,.hw-ex-split__media,.hw-lh-split__media,.hw-lh-future__media,
    .hw-sc-split__media,.hw-we-split__media,.hw-bh-split__media,.hw-os-split__media,
    .hw-ag-out__m,.hw-vu-model__media){
    order:-1 !important;width:100% !important;max-width:100% !important;
    margin:0 0 36px !important;align-self:center !important}
  body .fusion-builder-row > :is(.hw-loc-sav__text,.hw-ex-split__text,.hw-lh-split__text,.hw-lh-future__text,
    .hw-sc-split__text,.hw-we-split__text,.hw-bh-split__text,.hw-os-split__text,
    .hw-ag-out__t,.hw-vu-model__text){
    order:0 !important;width:100% !important;max-width:100% !important;
    margin:0 !important;padding-top:0 !important;text-align:center !important}

  /* ---- home: una sola columna con la foto dentro ---- */
  body :is(.hw-location,.hw-schools,.hw-whatshere,.hw-commercial)
    .fusion-column-wrapper > .fusion-image-element{order:-1 !important;margin-bottom:32px !important}
  /* Slow and fast llevaba el titular delante de la foto (decisión anterior,
     `.wh-title{order:-1}`): ahora manda el módulo. */
  body .hw-whatshere .wh-title{order:0 !important}

  /* ---- el texto, centrado (antetítulo, titular, cuerpo y CTA) ---- */
  body :is(.hw-loc-sav__text,.hw-ex-split__text,.hw-lh-split__text,.hw-lh-future__text,
    .hw-sc-split__text,.hw-we-split__text,.hw-bh-split__text,.hw-os-split__text,
    .hw-ag-out__t,.hw-vu-model__text,
    .hw-location,.hw-schools,.hw-whatshere,.hw-commercial)
    :is(.fusion-text,.fusion-text p,.fusion-title,.fusion-title-heading,h1,h2,h3,h4,p,ul,li){
    text-align:center !important}
  body :is(.hw-location,.hw-schools,.hw-whatshere,.hw-commercial)
    :is(.fusion-title,.fusion-text){margin-left:auto !important;margin-right:auto !important}
  body :is(.hw-location,.hw-schools,.hw-whatshere,.hw-commercial) .fusion-title{
    justify-content:center !important}
  /* los CTA: su <p> es a veces flex o inline-block con la flecha en ::after */
  body :is(.hw-loc-sav__text,.hw-ex-split__text,.hw-lh-split__text,.hw-lh-future__text,
    .hw-sc-split__text,.hw-we-split__text,.hw-bh-split__text,.hw-os-split__text,
    .hw-ag-out__t,.hw-vu-model__text,
    .hw-location,.hw-schools,.hw-whatshere,.hw-commercial)
    [class*="-cta"]{
    text-align:center !important;justify-content:center !important;
    align-self:center !important;margin-left:auto !important;margin-right:auto !important}

  /* ---- #181 · Slow and fast: la acuarela amarilla detrás de la foto ----
     En escritorio es un ::before de la columna (570×598 con la foto de 394
     centrada: 15,4 % a los lados y 17 % arriba y abajo) y en móvil se
     apagaba. Aquí la pinta la propia foto como fondo, con ese encaje. */
  body .hw-whatshere .wh-photo{
    box-sizing:border-box !important;width:100% !important;
    padding:17% 15.4% !important;
    background:url('/wp-content/uploads/2026/09/hw-watercolor-frame-yellow.jpg') center/cover no-repeat !important}
  body .hw-whatshere .wh-photo img{width:100% !important;height:auto !important;aspect-ratio:1/1 !important}

  /* ---- #183 · «It's a big, wide welcome mat» (home, `.hw-livehere`) ----
     Este NO es el módulo centrado: el Figma móvil lo monta sobre un panel
     Oyster (24 px de margen a cada lado) con el titular a la izquierda, el
     cuerpo SANGRADO (75 px desde el panel, 34 por la derecha), el CTA a la
     DERECHA y la foto abajo, con el panel acabando a ~73 % de su alto (la
     foto «monta» el borde). Medidas del comp de Strada pasadas a 393. */
  body .hw-livehere{padding-left:0 !important;padding-right:0 !important;
    background:#FFFFFF !important}
  body .hw-livehere .fusion-layout-column{padding:0 !important;margin:0 !important}
  body .hw-livehere .fusion-column-wrapper{position:relative !important;z-index:0;
    padding:48px 49px 0 !important;margin:0 !important}
  body .hw-livehere .fusion-column-wrapper::before{content:"";position:absolute;z-index:-1;
    left:24px;right:24px;top:0;bottom:53px;background:var(--awb-color1,#EFEAE4)}
  body .hw-livehere :is(.lh-title,.lh-title .fusion-title-heading,.lh-body,.lh-body p){
    text-align:left !important}
  body .hw-livehere .lh-title{margin:0 0 28px !important;justify-content:flex-start !important}
  body .hw-livehere .lh-body{padding:0 0 0 50px !important;margin:0 !important}
  body .hw-livehere .lh-cta{align-self:flex-end !important;text-align:right !important;
    margin:28px 0 0 !important}
  body .hw-livehere .fusion-column-wrapper > .fusion-image-element{
    order:0 !important;margin:36px 0 0 !important}
}

/* ---- #194 (25-09) · el aire ENTRE módulos en móvil ----
   «On multiple pages, there is a large amount of spacing between modules».
   Medido a 390 (del final del texto de uno a la foto del siguiente): de 80 a
   283 px según la página — cada sección traía el padding de escritorio
   rebajado a ojo (80, 90, 110, 152, 163). Ahora los módulos media+texto y las
   entradillas que los preceden dejan 64 px abajo y 0 arriba: entre dos
   módulos seguidos queda 64 + el aire propio de la foto. */
@media(max-width:760px){
  body .post-content .fusion-fullwidth:is(.hw-loc-savannah,.hw-ex-split,.hw-lh-split,.hw-lh-future,
    .hw-lh-hoods,.hw-sc-split,.hw-we-split,.hw-bh-split,.hw-os-split,.hw-ag-out,.hw-vu-model){
    padding-top:0 !important;padding-bottom:64px !important}
  body .post-content .fusion-fullwidth:is(.hw-sc-intro,.hw-we-top,.hw-bh-intro,.hw-lh-intro,
    .hw-ex-grow,.hw-sc-cards,.hw-os-vision,.hw-sc-ce){padding-bottom:64px !important}
  body .post-content .fusion-fullwidth.hw-sc-ce{padding-top:64px !important}
}

/* ==================================================================
   LOGOTIPO «HEARTWOOD» — BugHerd #204 y #205 (2026-09-25)
   «This is not the Heartwood logo, please replace!» La nav, la cabecera de
   Avada, el panel del menú y el pie escribían «HEARTWOOD» con una fuente; el
   logotipo real (carpeta «Heartwood Logos › Wordmark» de Strada) tiene sus
   propias letras. Aquí se pinta el logotipo de verdad:
   `hw-wordmark.svg` (en el tema hijo, sacado del PDF vectorial con
   pdftocairo y recortado a la tinta: 285,25 × 26,75, 10,66:1) como MÁSCARA
   sobre `currentColor`, así hereda la tinta de cada sitio (crema sobre el
   héroe, Boxwood en la barra blanca, crema en el pie) sin tener dos ficheros.
   El texto sigue en el HTML (lectores de pantalla y SEO) con cuerpo 0; el
   ancho de cada uno es el que ya ocupaba el texto, medido en vivo.
   ------------------------------------------------------------------ */
.hw-nav__brand,.hw-hdr__brand a,.hw-oc__brand,.hw-ftr__wordmark a{
  font-size:0 !important;letter-spacing:0 !important;line-height:0 !important}
.hw-nav__brand::before,.hw-hdr__brand a::before,.hw-oc__brand::before,.hw-ftr__wordmark a::before{
  content:"";display:inline-block;vertical-align:middle;
  width:184px;aspect-ratio:285.25/26.75;
  /* `color:inherit`: otra regla le daba #19180C al ::before de los enlaces y
     el logotipo salía casi negro sobre el héroe y sobre el pie. */
  color:inherit !important;background-color:currentColor !important;
  -webkit-mask:url('hw-wordmark.svg') center/contain no-repeat;
          mask:url('hw-wordmark.svg') center/contain no-repeat}
.hw-ftr__wordmark a::before{width:243px}
@media(max-width:900px){
  .hw-nav__brand::before,.hw-hdr__brand a::before,.hw-oc__brand::before{width:153px}
}
@media(max-width:760px){
  .hw-ftr__wordmark a::before{width:197px}
}

/* ==================================================================
   ENCUADRE DE FOTOS · NOTICIAS Y EVENTOS
   Lo decide `hw-media-fit.js` (en el tema): cuando la foto no tiene la
   forma de su marco (cartel vertical, banda apaisada con texto), el marco
   lleva `.hw-fit`, la foto se ve entera y detrás va `.hw-fit__bg`, una
   copia de la misma foto desenfocada y velada con Oyster. Las que sí
   encajan no llevan nada y siguen a `cover`.
   Marcos: tarjetas de What's Happening, News y Events, la destacada de
   News y las cabeceras de las fichas de noticia y de evento.
   ================================================================== */
.hw-fit{position:relative !important;overflow:hidden !important;isolation:isolate;
  background:#DED8CF}
.hw-fit > .hw-fit__bg{position:absolute;inset:-30px;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(24px) saturate(.85);transform:scale(1.05);pointer-events:none}
.hw-fit > .hw-fit__bg::after{content:"";position:absolute;inset:0;
  background:rgba(239,234,228,.38)}
.hw-fit > img{position:relative;z-index:1;object-fit:contain !important;
  background:transparent !important}

/* La foto de cabecera repetida dentro del cuerpo de la ficha. */
.hw-dup-hero{display:none !important}