/*
Theme Name: High Living Miami
Theme URI: https://highlivingmiami.com
Author: Orangutan
Author URI: https://highlivingmiami.com
Description: Tema personalizado para High Living Miami. Landing page premium oscura (negro + dorado) enfocada en el comprador de primera vivienda. Fotografias a pantalla completa, profundidad por capas y layouts editoriales. Todos los textos e imagenes se editan desde Apariencia -> Personalizar.
Version: 1.15.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: high-living-miami
*/

/* ==========================================================================
   Variables y reset
   ========================================================================== */
:root{
  --hlm-black:#000000;
  --hlm-ink:#070707;
  --hlm-ink-2:#0d0d0d;
  --hlm-gold:#e1b77e;
  --hlm-gold-soft:#c9a06a;
  --hlm-white:#ffffff;
  --hlm-grey:#b8b8b8;
  --hlm-grey-2:#9a9a9a;
  --hlm-border:rgba(225,183,126,0.25);
  --hlm-border-soft:rgba(225,183,126,0.14);
  --hlm-font-title:'Tenor Sans',serif;
  --hlm-font-body:'Montserrat',sans-serif;
  --hlm-max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--hlm-black);
  color:var(--hlm-white);
  font-family:var(--hlm-font-body);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--hlm-font-title);font-weight:500;line-height:1.2;margin:0 0 .5em;}
p{margin:0 0 1em;}

.hlm-container{max-width:var(--hlm-max);margin:0 auto;padding:0 24px;}
.hlm-section{padding:104px 0;position:relative;}
.hlm-eyebrow{font-family:var(--hlm-font-body);font-weight:600;letter-spacing:.28em;text-transform:uppercase;font-size:.72rem;color:var(--hlm-gold);margin-bottom:18px;display:block;}
.hlm-section-title{font-family:var(--hlm-font-title);font-size:clamp(1.9rem,4vw,3rem);color:var(--hlm-white);margin-bottom:24px;line-height:1.16;}
.hlm-lead{font-size:1.06rem;color:var(--hlm-grey);font-weight:300;max-width:760px;}
.hlm-center{text-align:center;}
.hlm-center .hlm-lead{margin-left:auto;margin-right:auto;}

/* ==========================================================================
   Botones / CTA
   ========================================================================== */
.hlm-btn{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--hlm-gold);color:var(--hlm-black);
  font-family:var(--hlm-font-body);font-weight:600;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:16px 34px;border-radius:2px;border:1px solid var(--hlm-gold);
  transition:all .3s ease;cursor:pointer;
  box-shadow:0 10px 30px rgba(225,183,126,.14);
}
.hlm-btn:hover{background:transparent;color:var(--hlm-gold);box-shadow:0 10px 30px rgba(0,0,0,.4);}
.hlm-btn--lg{padding:19px 42px;font-size:.9rem;}
.hlm-btn--ghost{background:transparent;color:var(--hlm-gold);box-shadow:none;}
.hlm-btn--ghost:hover{background:var(--hlm-gold);color:var(--hlm-black);}
.hlm-btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto;}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.hlm-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;transition:all .35s ease;
  background:transparent;
}
.hlm-header.is-scrolled{background:rgba(0,0,0,.92);backdrop-filter:blur(8px);padding:14px 0;border-bottom:1px solid var(--hlm-border);}
.hlm-header__inner{display:flex;align-items:center;justify-content:space-between;}
.hlm-logo{display:inline-flex;align-items:center;font-family:var(--hlm-font-title);font-size:1.35rem;letter-spacing:.12em;color:var(--hlm-white);text-transform:uppercase;}
.hlm-logo span{color:var(--hlm-gold);}
.hlm-logo img{max-height:46px;width:auto;}
/* Logo dorado: el PNG negro se usa como mascara sobre un fondo #e1b77e,
   asi la silueta del logo queda en el dorado exacto de la paleta. */
.hlm-logo__img{
  display:inline-block;
  height:50px;width:221px;           /* ratio 2371:536 = 4.4235 */
  background-color:var(--hlm-gold);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:height .35s ease,width .35s ease;
}
.hlm-header.is-scrolled .hlm-logo__img{height:38px;width:168px;}
.hlm-footer .hlm-logo__img{height:40px;width:177px;}
.hlm-nav ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;}
.hlm-nav a{font-family:var(--hlm-font-body);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hlm-white);transition:color .25s;}
.hlm-nav a:hover,.hlm-nav .current-menu-item>a{color:var(--hlm-gold);}
.hlm-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.hlm-burger span{width:26px;height:2px;background:var(--hlm-gold);display:block;transition:.3s;}

/* Selector de idioma (bandera) — discreto, en el header */
.hlm-lang{display:inline-flex;align-items:center;margin-left:22px;opacity:.72;transition:opacity .25s;flex:0 0 auto;line-height:0;}
.hlm-lang:hover{opacity:1;}
.hlm-lang__flag{width:24px;height:16px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18);}
@media(min-width:821px){ .hlm-nav{margin-left:auto;} }
@media(max-width:820px){ .hlm-lang{margin-left:auto;margin-right:16px;} }

/* ==========================================================================
   1. Hero — imagen a pantalla completa + overlay por capas
   ========================================================================== */
.hlm-hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;padding:150px 0 110px;
  background-size:cover;background-position:center;
}
.hlm-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.72) 70%),
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.86) 100%);
}
.hlm-hero__inner{position:relative;z-index:2;max-width:940px;margin:0 auto;text-align:center;}
.hlm-hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--hlm-font-body);font-weight:600;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--hlm-gold);
  border:1px solid var(--hlm-border);border-radius:100px;
  padding:9px 20px;margin-bottom:30px;
  background:rgba(0,0,0,.35);backdrop-filter:blur(4px);
}
.hlm-hero__badge svg{color:var(--hlm-gold);}
.hlm-hero h1{
  font-family:var(--hlm-font-title);color:var(--hlm-gold);
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.16;letter-spacing:.02em;
  margin:0 auto 28px;text-shadow:0 4px 30px rgba(0,0,0,.55);
}
.hlm-hero__sub{font-size:clamp(1.05rem,2vw,1.28rem);color:#ececec;margin:0 auto 40px;max-width:680px;font-weight:300;}
.hlm-hero__scroll{
  position:absolute;left:50%;bottom:34px;z-index:2;transform:translateX(-50%);
  width:26px;height:42px;border:1px solid var(--hlm-border);border-radius:14px;
}
.hlm-hero__scroll::after{
  content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:3px;height:8px;border-radius:2px;background:var(--hlm-gold);
  animation:hlm-scroll 1.8s ease-in-out infinite;
}
@keyframes hlm-scroll{0%{opacity:0;top:8px;}40%{opacity:1;}80%{opacity:0;top:22px;}100%{opacity:0;}}

/* ==========================================================================
   2. Lo que esta en juego — bandas verticales narrativas
   ========================================================================== */
.hlm-stakes{background:var(--hlm-black);padding:104px 0 0;}
.hlm-stakes__head{margin-bottom:20px;}
.hlm-stake{position:relative;padding:74px 0;border-top:1px solid var(--hlm-border-soft);overflow:hidden;}
.hlm-stake--1{background:var(--hlm-black);}
.hlm-stake--2{background:var(--hlm-ink);}
.hlm-stake--3{background:var(--hlm-black);}
/* brillo dorado sutil, alterna de lado para dar personalidad a cada bloque */
.hlm-stake::after{
  content:"";position:absolute;top:-30%;width:60vw;height:160%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(225,183,126,.10) 0%, rgba(225,183,126,0) 62%);
}
.hlm-stake--1::after{right:-15vw;}
.hlm-stake--2::after{left:-15vw;}
.hlm-stake--3::after{right:-10vw;top:20%;}
.hlm-stake__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;}
.hlm-stake__index{
  font-family:var(--hlm-font-title);font-size:clamp(5rem,13vw,11rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(225,183,126,.45);
  letter-spacing:.02em;user-select:none;
}
.hlm-stake__content{max-width:680px;}
.hlm-stake__title{font-family:var(--hlm-font-title);font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--hlm-gold);margin-bottom:22px;}
.hlm-stake__text p{font-size:1.02rem;line-height:1.85;color:var(--hlm-grey);margin:0 0 18px;}
.hlm-stake__text p:last-child{margin-bottom:0;}
/* Bloque 2: invertido (numero a la derecha, texto alineado a la derecha) */
.hlm-stake--2 .hlm-stake__inner{grid-template-columns:minmax(0,1fr) minmax(0,auto);}
.hlm-stake--2 .hlm-stake__index{order:2;text-align:right;}
.hlm-stake--2 .hlm-stake__content{order:1;justify-self:end;text-align:right;}
.hlm-stake--2 .hlm-stake__text p strong{color:var(--hlm-gold);}

/* ==========================================================================
   3. Como funciona — imagen de fondo + overlay + pasos
   ========================================================================== */
.hlm-how{position:relative;padding:104px 0;background-size:cover;background-position:center;background-attachment:fixed;}
.hlm-how::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.90),rgba(0,0,0,.82));}
.hlm-how>.hlm-container{position:relative;z-index:1;}
.hlm-steps{list-style:none;margin:56px 0 40px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:none;}
.hlm-step{position:relative;text-align:center;padding:0 14px;}
.hlm-step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;margin-bottom:22px;
  font-family:var(--hlm-font-title);font-size:1.6rem;color:var(--hlm-gold);
  border:1px solid var(--hlm-gold);background:rgba(225,183,126,.06);
}
.hlm-step__text{color:#dcdcdc;font-size:1rem;max-width:280px;margin:0 auto;}
/* linea conectora entre pasos */
.hlm-step:not(:last-child)::after{
  content:"";position:absolute;top:33px;left:calc(50% + 45px);right:calc(-50% + 45px);
  height:1px;background:var(--hlm-border);
}
.hlm-how__subtext{text-align:center;color:var(--hlm-gold);font-weight:400;letter-spacing:.02em;max-width:560px;margin:0 auto 34px;}

/* ==========================================================================
   4. No te cuesta mas
   ========================================================================== */
.hlm-cost{background:var(--hlm-ink);}
.hlm-cost__box{position:relative;max-width:860px;margin:0 auto;text-align:center;border:1px solid var(--hlm-border);padding:70px 52px;border-radius:6px;background:linear-gradient(180deg,rgba(225,183,126,.05),rgba(0,0,0,0));overflow:hidden;}
.hlm-cost__mark{position:absolute;top:-38px;right:6px;font-family:var(--hlm-font-title);font-size:16rem;line-height:1;color:rgba(225,183,126,.06);user-select:none;pointer-events:none;}
.hlm-cost__box .hlm-section-title{position:relative;}

/* ==========================================================================
   5. Reviews
   ========================================================================== */
.hlm-reviews{background:var(--hlm-black);}
.hlm-reviews__widget{margin-top:48px;min-height:120px;}
.hlm-reviews__placeholder{border:1px dashed var(--hlm-border);padding:52px;text-align:center;color:var(--hlm-grey);border-radius:6px;background:var(--hlm-ink);}

/* ==========================================================================
   6. Equipo — layout asimetrico alternado, fotos que sangran al borde
   ========================================================================== */
.hlm-team{background:var(--hlm-ink);padding:104px 0;}
.hlm-team__head{margin-bottom:64px;}
.hlm-member{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;min-height:600px;
}
.hlm-member+.hlm-member{margin-top:8px;}
.hlm-member__photo{
  background:#161616 center 18% / cover no-repeat;min-height:520px;position:relative;
}
.hlm-member__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 55%,rgba(13,13,13,.65) 100%);}
.hlm-member__panel{display:flex;align-items:center;background:var(--hlm-black);padding:56px clamp(28px,6vw,84px);}
.hlm-member__panel-inner{max-width:520px;}
.hlm-member__role{font-family:var(--hlm-font-body);font-weight:600;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hlm-gold);display:block;margin-bottom:14px;}
.hlm-member__name{font-family:var(--hlm-font-title);font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--hlm-white);margin-bottom:22px;line-height:1.1;}
.hlm-member__name::after{content:"";display:block;width:54px;height:2px;background:var(--hlm-gold);margin-top:20px;}
.hlm-member__bio{color:var(--hlm-grey);font-size:1.02rem;line-height:1.85;}
/* segundo miembro invertido: foto a la derecha */
.hlm-member--flip .hlm-member__photo{order:2;}
.hlm-member--flip .hlm-member__panel{order:1;justify-content:flex-end;}
.hlm-member--flip .hlm-member__photo::after{background:linear-gradient(270deg,rgba(0,0,0,0) 55%,rgba(13,13,13,.65) 100%);}

/* ==========================================================================
   7. FAQ
   ========================================================================== */
.hlm-faq-sec{background:var(--hlm-black);}
.hlm-faq{max-width:860px;margin:52px auto 0;}
.hlm-faq__item{border-bottom:1px solid var(--hlm-border-soft);}
.hlm-faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:26px 0;font-family:var(--hlm-font-title);font-size:1.15rem;color:var(--hlm-white);
  transition:color .25s;
}
.hlm-faq__q:hover{color:var(--hlm-gold);}
.hlm-faq__icon{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .3s;}
.hlm-faq__icon::before,.hlm-faq__icon::after{content:"";position:absolute;background:var(--hlm-gold);}
.hlm-faq__icon::before{top:50%;left:0;right:0;height:2px;transform:translateY(-50%);}
.hlm-faq__icon::after{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);transition:opacity .3s;}
.hlm-faq__item.is-open .hlm-faq__icon::after{opacity:0;}
.hlm-faq__a{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.hlm-faq__a-inner{padding:0 0 26px;color:var(--hlm-grey);font-size:.98rem;line-height:1.8;}

/* ==========================================================================
   8. Cierre — imagen a pantalla completa + overlay
   ========================================================================== */
.hlm-closing{background-size:cover;background-position:center;position:relative;text-align:center;padding:130px 0;}
.hlm-closing::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.74) 50%,rgba(0,0,0,.9));}
.hlm-closing__inner{position:relative;z-index:1;max-width:720px;margin:0 auto;}
.hlm-closing .hlm-section-title{color:var(--hlm-gold);}

/* ==========================================================================
   Footer
   ========================================================================== */
.hlm-footer{background:#050505;border-top:1px solid var(--hlm-border);padding:56px 0 32px;}
.hlm-footer__grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px;}
.hlm-footer__brand .hlm-logo{margin-bottom:14px;display:inline-block;}
.hlm-footer p{color:var(--hlm-grey);font-size:.9rem;}
.hlm-footer__links a{color:var(--hlm-grey);font-size:.85rem;display:block;margin-bottom:8px;transition:color .25s;}
.hlm-footer__links a:hover{color:var(--hlm-gold);}
.hlm-footer__brand{max-width:420px;}
.hlm-footer__seo{color:#8a8a8a !important;font-size:.8rem !important;margin-top:10px;}
.hlm-footer__bottom{border-top:1px solid var(--hlm-border);padding-top:24px;text-align:center;color:#666;font-size:.78rem;}
.hlm-footer__seo{color:var(--hlm-grey);margin-bottom:6px;}
.hlm-footer__copyright{color:var(--hlm-grey);}
.hlm-footer__disclaimer{color:#5f5f5f !important;font-size:.72rem !important;line-height:1.7;max-width:920px;margin:14px auto 0;}

/* Bloque Avanti Way (centrado, como la web actual) */
.hlm-avanti{padding:14px 0 44px;margin-bottom:8px;text-align:center;}
.hlm-avanti__title{font-family:var(--hlm-font-title);color:#d4d4d4;font-size:1.4rem;margin-bottom:16px;}
.hlm-footer .hlm-avanti__text{color:#d4d4d4;font-size:.88rem;line-height:1.8;max-width:920px;margin:0 auto;}
.hlm-avanti__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;margin:30px auto;}
.hlm-stat{display:flex;flex-direction:column;align-items:center;}
.hlm-stat__num{font-family:var(--hlm-font-title);color:#d4d4d4;font-size:1.6rem;line-height:1.1;}
.hlm-stat__label{color:#d4d4d4;font-size:.82rem;margin-top:6px;letter-spacing:.02em;}
.hlm-avanti__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:44px;margin-top:26px;}
.hlm-avanti__logos img{height:52px;width:auto;opacity:.82;filter:grayscale(100%) brightness(1.6);transition:opacity .25s;}
.hlm-avanti__logos img:hover{opacity:1;}

/* Barra sticky de WhatsApp (siempre visible) */
body{padding-bottom:64px;}
.hlm-wa-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,0.85);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:13px 18px;text-align:center;
  border-top:0.5px solid rgba(255,255,255,0.1);
  transition:background .25s;
}
.hlm-wa-sticky:hover{background:rgba(20,20,20,0.9);}
.hlm-wa-sticky__inner{display:inline-flex;align-items:center;gap:12px;}
.hlm-wa-sticky__icon{width:22px;height:22px;fill:#25D366;flex:0 0 auto;}
.hlm-wa-sticky__text{
  font-family:var(--hlm-font-body);font-weight:600;font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;color:#d4d4d4;
}

/* ==========================================================================
   Blog
   ========================================================================== */
.hlm-page-head{padding:160px 0 64px;text-align:center;border-bottom:1px solid var(--hlm-border);}
.hlm-page-head h1{font-size:clamp(2rem,4vw,3rem);}
.hlm-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.hlm-post-card{background:var(--hlm-ink-2);border:1px solid var(--hlm-border);border-radius:4px;overflow:hidden;transition:transform .3s,border-color .3s;}
.hlm-post-card:hover{transform:translateY(-5px);border-color:var(--hlm-gold);}
.hlm-post-card__thumb{aspect-ratio:16/10;background:#161616 center/cover no-repeat;}
.hlm-post-card__body{padding:26px 24px;}
.hlm-post-card__date{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hlm-gold);}
.hlm-post-card__title{font-size:1.25rem;margin:10px 0 12px;color:var(--hlm-white);}
.hlm-post-card__excerpt{color:var(--hlm-grey);font-size:.9rem;}
.hlm-single{max-width:760px;margin:0 auto;padding:150px 0 80px;}
.hlm-single h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:16px;}
.hlm-single__meta{color:var(--hlm-gold);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:36px;}
.hlm-single__content{color:#d8d8d8;font-weight:300;}
.hlm-single__content h2,.hlm-single__content h3{color:var(--hlm-white);margin-top:1.6em;}
.hlm-single__content img{border-radius:4px;margin:1.4em 0;}
.hlm-single__content a{color:var(--hlm-gold);text-decoration:underline;}
.hlm-pagination{display:flex;justify-content:center;gap:14px;margin-top:56px;}
.hlm-pagination .page-numbers{padding:10px 16px;border:1px solid var(--hlm-border);color:var(--hlm-grey);}
.hlm-pagination .current{background:var(--hlm-gold);color:var(--hlm-black);border-color:var(--hlm-gold);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:980px){
  .hlm-member{grid-template-columns:1fr;min-height:0;}
  .hlm-member__photo{min-height:440px;order:1 !important;}
  .hlm-member__panel{order:2 !important;justify-content:flex-start !important;padding:44px 28px 52px;}
  .hlm-member__photo::after{background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(13,13,13,.6) 100%) !important;}
  .hlm-posts{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:820px){
  .hlm-section{padding:72px 0;}
  .hlm-stake{padding:52px 0;}
  .hlm-stake__inner,
  .hlm-stake--2 .hlm-stake__inner{grid-template-columns:1fr;gap:8px;}
  .hlm-stake--2 .hlm-stake__index{order:0;text-align:left;}
  .hlm-stake--2 .hlm-stake__content{order:0;justify-self:start;text-align:left;}
  .hlm-stake__index{font-size:clamp(4rem,18vw,6rem);}
  .hlm-how{background-attachment:scroll;}
  .hlm-steps{grid-template-columns:1fr;gap:36px;max-width:340px;margin-inline:auto;}
  .hlm-step:not(:last-child)::after{display:none;}
  .hlm-nav{position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;background:#0a0a0a;flex-direction:column;padding:100px 32px;transition:right .35s ease;border-left:1px solid var(--hlm-border);z-index:1050;}
  .hlm-nav.is-open{right:0;}
  .hlm-nav ul{flex-direction:column;gap:24px;}
  .hlm-burger{display:flex;z-index:1200;}
  .hlm-posts{grid-template-columns:1fr;}
  .hlm-hero{padding:130px 0 90px;min-height:92vh;}
  .hlm-cost__box{padding:44px 26px;}
  .hlm-cost__mark{font-size:11rem;top:-20px;}
}

/* ============================================================
   REDISEÑO VISUAL GLOBAL — Landing HLM (Elementor, página 11)
   Sistema: contenedor 850px · ritmo vertical · tipografía 5 niveles.
   Solo diseño (spacing/tipografia/proporciones); NO cambia contenido ni
   estructura. Targetea el markup de Elementor por id de sección/widget,
   scope .elementor-page-11, con !important para ganarle al CSS generado.
   (La home es Elementor; las clases .hlm-* de arriba NO estilizan la portada.)
   Añadido 2026-07-06.
   ============================================================ */

/* 1. Contenedor de contenido 850px (secciones de texto + open loops) */
.elementor-element-6dfaa49 > .elementor-container,
.elementor-element-d85e8f7 > .elementor-container,
.elementor-element-3f58175 > .elementor-container,
.elementor-element-5c2eae8 > .elementor-container,
.elementor-element-ed28827 > .elementor-container,
.elementor-element-849d101 > .elementor-container,
.elementor-element-6007709 > .elementor-container,
.elementor-element-a4b72fe > .elementor-container,
.elementor-element-1868b55 > .elementor-container,
.elementor-element-f6e8473 > .elementor-container,
.elementor-element-60b9a08 > .elementor-container,
.elementor-element-f9d0f51 > .elementor-container,
.elementor-element-75172c5 > .elementor-container,
.elementor-element-82df662 > .elementor-container,
.elementor-element-f378ca8 > .elementor-container,
.elementor-element-7044433 > .elementor-container,
.elementor-element-5b8d3eb > .elementor-container { max-width:850px !important; }

/* 2. Ritmo vertical */
.elementor-element-6dfaa49,
.elementor-element-60b9a08,
.elementor-element-75172c5,
.elementor-element-7044433,
.elementor-element-5b8d3eb { padding-top:120px !important; padding-bottom:120px !important; }
/* "No encarece tu compra" (1868b55): solo título + 3 párrafos cortos → 80px (menos que las secciones largas) */
.elementor-element-1868b55 { padding-top:80px !important; padding-bottom:80px !important; }
.elementor-element-3f58175 { padding:80px 0 !important; }
/* Su columna (e5e5222) traía padding vertical asimétrico 68/34 en el widget-wrap → se anula para que el título quede centrado verticalmente (los 80/80 de la sección mandan). Laterales intactos. */
.elementor-element-e5e5222 > .elementor-widget-wrap { padding-top:0 !important; padding-bottom:0 !important; }
.elementor-element-5c2eae8,
.elementor-element-ed28827 { padding-top:40px !important; padding-bottom:40px !important; }
.elementor-element-849d101 { padding-top:40px !important; padding-bottom:80px !important; }
.elementor-element-d85e8f7,
.elementor-element-6007709,
.elementor-element-a4b72fe,
.elementor-element-f6e8473,
.elementor-element-f9d0f51,
.elementor-element-82df662,
.elementor-element-f378ca8 { padding-top:80px !important; padding-bottom:50px !important; }

/* 3. Tipografía — 5 niveles */
/* H1 del hero: Antonio (condensada) weight 400 — como el sitio original. SOLO el hero; H2/H3 siguen en Tenor Sans.
   Antonio es condensada y de trazos gruesos → se ve más grande que Tenor al mismo tamaño, por eso 44-52px (no 60). */
.elementor-element-9f6d076 h1 { font-family:'Antonio',sans-serif !important; font-weight:400 !important; color:#e1b77e !important; font-size:clamp(44px,4.6vw,52px) !important; line-height:1.2 !important; text-transform:none !important; transform:none !important; text-align:center !important; }
/* Hero layout: contenido centrado (V+H) y orden headline → subtítulo → badge.
   El DOM trae badge → spacer → headline → subtítulo; se reordena por flexbox y se oculta el spacer que empujaba el badge arriba. */
.elementor-element-df11ccd > .elementor-widget-wrap { flex-direction:column !important; align-items:center !important; justify-content:center !important; }
.elementor-element-96b2b99 { order:1 !important; }                        /* headline */
.elementor-element-2b9a49e { order:2 !important; margin-top:22px !important; }  /* subtítulo */
.elementor-element-d894165 { order:3 !important; margin-top:26px !important; }  /* badge "Sin afectar tu crédito" */
.elementor-element-95c451a { display:none !important; }                   /* spacer que dejaba el badge pegado al nav */
.elementor-element-96b2b99 .elementor-heading-title,
.elementor-element-2b9a49e { text-align:center !important; }
/* Títulos de sección en Antonio (misma fuente que el H1 del hero), manteniendo color blanco y tamaño. */
.elementor-element-3f58175 h2,
.elementor-element-7044433 h2,
.elementor-element-1868b55 h2,
.elementor-element-60b9a08 h2,
.elementor-element-75172c5 h2 { font-family:'Antonio',sans-serif !important; font-weight:400 !important; color:#fff !important; font-size:clamp(34px,3.6vw,42px) !important; text-transform:none !important; line-height:1.2 !important; letter-spacing:normal !important; }
/* CTA final: título ahora es H1 (cambiado de H2 en _elementor_data), con la tipografía del hero: Antonio, dorado. */
.elementor-element-5b8d3eb h1 { font-family:'Antonio',sans-serif !important; font-weight:400 !important; color:#e1b77e !important; font-size:clamp(34px,3.6vw,42px) !important; text-transform:none !important; line-height:1.2 !important; }
.elementor-element-5c2eae8 h3,
.elementor-element-ed28827 h3,
.elementor-element-849d101 h3 { font-family:'Tenor Sans',serif !important; color:#e1b77e !important; font-size:26px !important; line-height:1.25 !important; }
.elementor-element-6dfaa49 .elementor-widget-text-editor p,
.elementor-element-5b8d3eb .elementor-widget-text-editor p { font-size:17px !important; }
.elementor-widget-text-editor p { font-weight:300 !important; line-height:1.75 !important; margin:0 0 24px !important; }
.elementor-widget-text-editor p:last-child { margin-bottom:0 !important; }

/* 4. Open loops (accent) — Montserrat italic, dorado, centrado */
.elementor-element-d85e8f7 .elementor-widget-container,
.elementor-element-6007709 .elementor-widget-container,
.elementor-element-a4b72fe .elementor-widget-container,
.elementor-element-f6e8473 .elementor-widget-container,
.elementor-element-f9d0f51 .elementor-widget-container,
.elementor-element-82df662 .elementor-widget-container,
.elementor-element-f378ca8 .elementor-widget-container { text-align:center !important; }
.elementor-element-d85e8f7 p,
.elementor-element-6007709 p,
.elementor-element-a4b72fe p,
.elementor-element-f6e8473 p,
.elementor-element-f9d0f51 p,
.elementor-element-82df662 p,
.elementor-element-f378ca8 p { font-family:'Montserrat',sans-serif !important; font-style:italic !important; font-weight:300 !important; font-size:18px !important; color:#e1b77e !important; line-height:1.6 !important; }

/* 5. Ghost numbers — outline dorado transparente. Base compartida */
.elementor-element-7654ac3 .elementor-heading-title,
.elementor-element-203ca42 .elementor-heading-title,
.elementor-element-e0e47d1 .elementor-heading-title,
.elementor-element-b959b5e .elementor-heading-title,
.elementor-element-b77b893 .elementor-heading-title,
.elementor-element-95e7faf .elementor-heading-title { font-family:'Tenor Sans',serif !important; font-weight:400 !important; line-height:1 !important; color:transparent !important; -webkit-text-stroke:1px rgba(225,183,126,0.55) !important; margin:0 0 6px !important; letter-spacing:.02em !important; }
/* Pasos "cómo funciona" (3 columnas): moderados */
.elementor-element-b959b5e .elementor-heading-title,
.elementor-element-b77b893 .elementor-heading-title,
.elementor-element-95e7faf .elementor-heading-title { font-size:46px !important; }
/* Pilares: grandes y prominentes (elemento de presencia) */
.elementor-element-7654ac3 .elementor-heading-title,
.elementor-element-203ca42 .elementor-heading-title,
.elementor-element-e0e47d1 .elementor-heading-title { font-size:130px !important; -webkit-text-stroke:1.5px rgba(225,183,126,0.5) !important; }

/* 6. Fixes por sección */
.elementor-element-9f6d076 > .elementor-container { max-width:980px !important; }
.elementor-element-9f6d076 .elementor-button { padding:8px 18px !important; font-size:12px !important; letter-spacing:.14em !important; border-color:rgba(225,183,126,0.35) !important; }
/* Hero: sin caja oscura central; overlay gradiente full-screen (skyline visible arriba, texto legible abajo) */
.elementor-element-9f6d076 .elementor-widget-wrap { background-color:transparent !important; }
.elementor-element-9f6d076 .elementor-background-overlay { background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 100%) !important; }
.elementor-element-1868b55 .elementor-widget-wrap { border:none !important; border-radius:0 !important; background:none !important; }
.elementor-element-28455aa > .elementor-widget-wrap,
.elementor-element-7be57f2 > .elementor-widget-wrap { padding:48px clamp(32px,5vw,84px) !important; justify-content:center !important; }
.elementor-element-28455aa .elementor-widget-text-editor,
.elementor-element-7be57f2 .elementor-widget-text-editor { max-width:560px !important; }
/* Secciones "Cómo funciona" (7044433) y CTA final (5b8d3eb): SIN imagen de fondo → NEGRO SÓLIDO,
   consistentes con las demás secciones negras (120px padding, contenedor 850px, misma tipografía).
   Se eliminan las imágenes (asesores-juntos / asesores-duo), la altura fija de franja (580px) y los
   degradados que existían solo para legibilidad del texto sobre la foto (ya no hacen falta sobre negro). */
.elementor-element-7044433,
.elementor-element-5b8d3eb {
  background-image:none !important;
  background-color:#000 !important;
  min-height:0 !important;
}
.elementor-element-ed55612 > .elementor-widget-wrap,
.elementor-element-5b8d3eb .elementor-widget-wrap { background:none !important; }

/* Foto de Daniel (dec8b83) en la sección del equipo: reencuadre a "torso hacia arriba" en desktop
   (el cover hace más zoom en pantallas anchas). No pertenece a las secciones de arriba. */
@media (min-width:768px){
  .elementor-element-dec8b83 > .elementor-widget-wrap { background-position:center 40% !important; }
}

/* 7. Responsive móvil — reducir el ritmo vertical para que no quede excesivo */
@media (max-width:767px){
  .elementor-element-6dfaa49,
  .elementor-element-1868b55,
  .elementor-element-60b9a08,
  .elementor-element-75172c5,
  .elementor-element-7044433,
  .elementor-element-5b8d3eb { padding-top:72px !important; padding-bottom:72px !important; }
  .elementor-element-3f58175 { padding:56px 0 !important; }
  .elementor-element-5c2eae8,
  .elementor-element-ed28827 { padding-top:28px !important; padding-bottom:28px !important; }
  .elementor-element-849d101 { padding-top:28px !important; padding-bottom:56px !important; }
  .elementor-element-d85e8f7,
  .elementor-element-6007709,
  .elementor-element-a4b72fe,
  .elementor-element-f6e8473,
  .elementor-element-f9d0f51,
  .elementor-element-82df662,
  .elementor-element-f378ca8 { padding-top:56px !important; padding-bottom:36px !important; }
  .elementor-element-9f6d076 h1 { font-size:clamp(28px,8.2vw,34px) !important; }
  /* Hero móvil: overlay más suave para que el edificio de fondo se vea más (desktop sin cambios). */
  .elementor-element-9f6d076 .elementor-background-overlay { background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%) !important; }
  .elementor-element-b959b5e .elementor-heading-title,
  .elementor-element-b77b893 .elementor-heading-title,
  .elementor-element-95e7faf .elementor-heading-title { font-size:38px !important; }
  .elementor-element-7654ac3 .elementor-heading-title,
  .elementor-element-203ca42 .elementor-heading-title,
  .elementor-element-e0e47d1 .elementor-heading-title { font-size:90px !important; }
}

/* ============================================================
   AJUSTE GLOBAL DE PADDING VERTICAL — máx 60/60 (contenido) y 40/30 (loops).
   SUPERSEDE los valores de ritmo vertical de arriba (bloque al final del
   archivo = gana en desktop y móvil; mismo valor absoluto en ambos).
   El espacio real = padding de sección + padding vertical del widget-wrap
   de la columna; por eso además se anula el vertical de esas columnas.
   NO toca el hero (9f6d076). Añadido 2026-07-06.
   ============================================================ */
/* Secciones de contenido → 60px arriba / 60px abajo */
.elementor-element-6dfaa49,
.elementor-element-3f58175,
.elementor-element-5c2eae8,
.elementor-element-ed28827,
.elementor-element-849d101,
.elementor-element-7044433,
.elementor-element-1868b55,
.elementor-element-60b9a08,
.elementor-element-75172c5,
.elementor-element-5b8d3eb { padding-top:60px !important; padding-bottom:60px !important; }
/* Columnas con padding vertical propio → anulado (mandan los 60 de la sección). Laterales intactos. */
.elementor-element-5410c23 > .elementor-widget-wrap,
.elementor-element-e5e5222 > .elementor-widget-wrap,
.elementor-element-9138c49 > .elementor-widget-wrap,
.elementor-element-66c76f5 > .elementor-widget-wrap,
.elementor-element-d6b6975 > .elementor-widget-wrap,
.elementor-element-281def6 > .elementor-widget-wrap,
.elementor-element-662e59b > .elementor-widget-wrap,
.elementor-element-c2d510c > .elementor-widget-wrap,
.elementor-element-ed55612 > .elementor-widget-wrap,
.elementor-element-1c8f591 > .elementor-widget-wrap,
.elementor-element-487944f > .elementor-widget-wrap,
.elementor-element-55536db > .elementor-widget-wrap,
.elementor-element-e4dc2bf > .elementor-widget-wrap { padding-top:0 !important; padding-bottom:0 !important; }
/* Open loops (frases itálicas doradas) → 40px arriba / 30px abajo */
.elementor-element-d85e8f7,
.elementor-element-6007709,
.elementor-element-a4b72fe,
.elementor-element-f6e8473,
.elementor-element-f9d0f51,
.elementor-element-82df662,
.elementor-element-f378ca8 { padding-top:40px !important; padding-bottom:30px !important; }
/* Footer / Avanti — reducir el tope superior (56+14 avanti = 70 → 44+14 ≈ 58) */
.hlm-footer { padding-top:44px !important; }

/* Pilares: centrar los títulos H3 SOLO en móvil (desktop mantiene su alineación actual). */
@media (max-width:767px){
  .elementor-element-5c2eae8 h3,
  .elementor-element-ed28827 h3,
  .elementor-element-849d101 h3 { text-align:center !important; }
}

/* ============================================================
   FONDOS ALTERNADOS bajo el hero — contenido #0f0f0f, open loops #000000.
   El !important gana a los colores de sección de Elementor (post-11.css, sin !important).
   NO toca el hero (9f6d076). Añadido 2026-07-06.
   ============================================================ */
/* Secciones de contenido → gris #0f0f0f (incluye steps 66039fd y ambas secciones del equipo) */
.elementor-element-6dfaa49,
.elementor-element-3f58175,
.elementor-element-5c2eae8,
.elementor-element-ed28827,
.elementor-element-849d101,
.elementor-element-7044433,
.elementor-element-66039fd,
.elementor-element-1868b55,
.elementor-element-60b9a08,
.elementor-element-75172c5,
.elementor-element-a84edf1,
.elementor-element-0033b28,
.elementor-element-5b8d3eb { background-color:#0f0f0f !important; }
/* Columnas de TEXTO del equipo (tenían negro sólido) → gris para igualar la sección; las columnas de FOTO no se tocan */
.elementor-element-28455aa > .elementor-widget-wrap,
.elementor-element-7be57f2 > .elementor-widget-wrap { background-color:#0f0f0f !important; }
/* Open loops (frases itálicas doradas de transición) → negro #000000 */
.elementor-element-d85e8f7,
.elementor-element-6007709,
.elementor-element-a4b72fe,
.elementor-element-f6e8473,
.elementor-element-f9d0f51,
.elementor-element-82df662,
.elementor-element-f378ca8 { background-color:#000000 !important; }
/* Footer / Avanti → negro #000000 */
.hlm-footer { background-color:#000000 !important; }
