/*
 Theme Name: Basora OnePage Child
 Theme URI: https://example.com/basora-child
 Description: Astra child theme optimized for a one-page site with Elementor (HTML blocks only). Includes base.css with design tokens and UI components.
 Author: Basora
 Template: astra
 Version: 1.0.0
 Text Domain: basora-onepage-child
*/
/* === BASORA · One-Page (HTML+CSS only) =============================== */
/* Tipografías */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Merriweather:wght@700;900&display=swap');

:root{
  /* Paleta (ajústala a tu referencia) */
  --navy-900:#0b2e4a;     /* fondo principal */
  --navy-800:#113a5e;     /* secciones oscuras */
  --ink-900:#0d1b2a;      /* texto oscuro */
  --ink-700:#1e293b;
  --cream:#f5f7fb;        /* secciones claras */
  --white:#ffffff;
  --gold-500:#d7a44a;     /* acento */
  --gold-600:#c38c25;

  /* UI */
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:12px;
  --maxw:1160px;
	
	--sp-0: 0;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
	
	--pad-scale: 1.2;
	
	--shadow-lg: 0 16px 48px rgba(13,27,42,.15);

	--shadow-md: 0 10px 32px rgba(13,27,42,.16);
  
--page-navy:#0b2e4a;
  --boxed-gutter: clamp(20px, 5vw, 48px); /* NECESARIA para mobile/tablet */
  --boxed-md: 1080px;                     /* 1025–1365px */
  --boxed-lg: 1280px;                     /* ≥1366px */
	
	--mobile-pad: clamp(14px, 5vw, 22px); 
	
	--footer-bg: var(--navy-900, #0b2e4a);
  --footer-ink: #fff;
  --footer-ink-muted: rgba(255,255,255,.85);
  --footer-line: rgba(255,255,255,.18);
--gutter-m: clamp(16px, 5vw, 24px); 
}

/* --- MARGIN --- */
.m_t_0{ margin-top:var(--sp-0) !important; }
.m_t_1{ margin-top:var(--sp-1) !important; }
.m_t_2{ margin-top:var(--sp-2) !important; }
.m_t_3{ margin-top:var(--sp-3) !important; }
.m_t_4{ margin-top:var(--sp-4) !important; }

.m_b_0{ margin-bottom:var(--sp-0) !important; }
.m_b_1{ margin-bottom:var(--sp-1) !important; }
.m_b_2{ margin-bottom:var(--sp-2) !important; }
.m_b_3{ margin-bottom:var(--sp-3) !important; }
.m_b_4{ margin-bottom:var(--sp-4) !important; }

.m_l_0{ margin-left:var(--sp-0) !important; }
.m_l_1{ margin-left:var(--sp-1) !important; }
.m_l_2{ margin-left:var(--sp-2) !important; }
.m_l_3{ margin-left:var(--sp-3) !important; }
.m_l_4{ margin-left:var(--sp-4) !important; }

.m_r_0{ margin-right:var(--sp-0) !important; }
.m_r_1{ margin-right:var(--sp-1) !important; }
.m_r_2{ margin-right:var(--sp-2) !important; }
.m_r_3{ margin-right:var(--sp-3) !important; }
.m_r_4{ margin-right:var(--sp-4) !important; }

/* Ejes y todos */
.m_y_0{ margin-top:var(--sp-0) !important; margin-bottom:var(--sp-0) !important; }
.m_y_1{ margin-top:var(--sp-1) !important; margin-bottom:var(--sp-1) !important; }
.m_y_2{ margin-top:var(--sp-2) !important; margin-bottom:var(--sp-2) !important; }
.m_y_3{ margin-top:var(--sp-3) !important; margin-bottom:var(--sp-3) !important; }
.m_y_4{ margin-top:var(--sp-4) !important; margin-bottom:var(--sp-4) !important; }

.m_x_0{ margin-left:var(--sp-0) !important; margin-right:var(--sp-0) !important; }
.m_x_1{ margin-left:var(--sp-1) !important; margin-right:var(--sp-1) !important; }
.m_x_2{ margin-left:var(--sp-2) !important; margin-right:var(--sp-2) !important; }
.m_x_3{ margin-left:var(--sp-3) !important; margin-right:var(--sp-3) !important; }
.m_x_4{ margin-left:var(--sp-4) !important; margin-right:var(--sp-4) !important; }

.m_all_0{ margin:var(--sp-0) !important; }
.m_all_1{ margin:var(--sp-1) !important; }
.m_all_2{ margin:var(--sp-2) !important; }
.m_all_3{ margin:var(--sp-3) !important; }
.m_all_4{ margin:var(--sp-4) !important; }

/* --- PADDING --- */
.p_t_0{ padding-top:var(--sp-0) !important; }
.p_t_1{ padding-top:var(--sp-1) !important; }
.p_t_2{ padding-top:var(--sp-2) !important; }
.p_t_3{ padding-top:var(--sp-3) !important; }
.p_t_4{ padding-top:var(--sp-4) !important; }

.p_b_0{ padding-bottom:var(--sp-0) !important; }
.p_b_1{ padding-bottom:var(--sp-1) !important; }
.p_b_2{ padding-bottom:var(--sp-2) !important; }
.p_b_3{ padding-bottom:var(--sp-3) !important; }
.p_b_4{ padding-bottom:var(--sp-4) !important; }

.p_l_0{ padding-left:var(--sp-0) !important; }
.p_l_1{ padding-left:var(--sp-1) !important; }
.p_l_2{ padding-left:var(--sp-2) !important; }
.p_l_3{ padding-left:var(--sp-3) !important; }
.p_l_4{ padding-left:var(--sp-4) !important; }

.p_r_0{ padding-right:var(--sp-0) !important; }
.p_r_1{ padding-right:var(--sp-1) !important; }
.p_r_2{ padding-right:var(--sp-2) !important; }
.p_r_3{ padding-right:var(--sp-3) !important; }
.p_r_4{ padding-right:var(--sp-4) !important; }

.p_y_0{ padding-top:var(--sp-0) !important; padding-bottom:var(--sp-0) !important; }
.p_y_1{ padding-top:var(--sp-1) !important; padding-bottom:var(--sp-1) !important; }
.p_y_2{ padding-top:var(--sp-2) !important; padding-bottom:var(--sp-2) !important; }
.p_y_3{ padding-top:var(--sp-3) !important; padding-bottom:var(--sp-3) !important; }
.p_y_4{ padding-top:var(--sp-4) !important; padding-bottom:var(--sp-4) !important; }

.p_x_0{ padding-left:var(--sp-0) !important; padding-right:var(--sp-0) !important; }
.p_x_1{ padding-left:var(--sp-1) !important; padding-right:var(--sp-1) !important; }
.p_x_2{ padding-left:var(--sp-2) !important; padding-right:var(--sp-2) !important; }
.p_x_3{ padding-left:var(--sp-3) !important; padding-right:var(--sp-3) !important; }
.p_x_4{ padding-left:var(--sp-4) !important; padding-right:var(--sp-4) !important; }

.p_all_0{ padding:var(--sp-0) !important; }
.p_all_1{ padding:var(--sp-1) !important; }
.p_all_2{ padding:var(--sp-2) !important; }
.p_all_3{ padding:var(--sp-3) !important; }
.p_all_4{ padding:var(--sp-4) !important; }

/* --- GAP (para flex/grid) --- */
.gap_0{ gap:var(--sp-0) !important; }
.gap_1{ gap:var(--sp-1) !important; }
.gap_2{ gap:var(--sp-2) !important; }
.gap_3{ gap:var(--sp-3) !important; }
.gap_4{ gap:var(--sp-4) !important; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}


/* Fondo base */
body,
.site,
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template .site-content,
.ast-separate-container .site-content,
.ast-container{ background: var(--page-navy) !important; }

/* Quita paddings automáticos de Elementor en wrappers 
body.elementor-page .elementor .e-con,
body.elementor-page .elementor .e-con > .e-con-inner{ padding:0 !important; }*/

/* Quita paddings automáticos SOLO en desktop */
@media (min-width:1025px){
  body.elementor-page .elementor .e-con,
  body.elementor-page .elementor .e-con > .e-con-inner{ padding:0 !important; }
}



/* HERO form + imagen (elementor-element-6408711) */
body.elementor-page .elementor .elementor-element.elementor-element-6408711,
body.elementor-page .elementor .elementor-element.elementor-element-6408711 > .e-con-inner{
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}

/* Our Location / Contact (elementor-element-c80b3b7) */
body.elementor-page .elementor .elementor-element.elementor-element-c80b3b7,
body.elementor-page .elementor .elementor-element.elementor-element-c80b3b7 > .e-con-inner{
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}

/* (opcional) un poco más de aire en desktop grande */
@media (min-width:1280px){
  body.elementor-page .elementor .elementor-element.elementor-element-6408711,
  body.elementor-page .elementor .elementor-element.elementor-element-6408711 > .e-con-inner,
  body.elementor-page .elementor .elementor-element.elementor-element-c80b3b7,
  body.elementor-page .elementor .elementor-element.elementor-element-c80b3b7 > .e-con-inner{
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}







/* IMPORTANTE: no limites el inner; limita el WRAPPER de nivel superior */
body.elementor-page .elementor > :is(.e-con,.elementor-section){
  width: calc(100% - (var(--boxed-gutter) * 2)) !important; /* móvil/tablet */
  margin-inline:auto !important;
}

/* Desktop chico: ancho fijo */
@media (min-width:1025px) and (max-width:1365px){
  body.elementor-page .elementor > :is(.e-con,.elementor-section){
    width: var(--boxed-md) !important;
  }
}

/* Desktop grande: ancho fijo */
@media (min-width:1366px){
  body.elementor-page .elementor > :is(.e-con,.elementor-section){
    width: var(--boxed-lg) !important;
  }
}

/* Evita que el inner “rompa” el ancho fijo */
body.elementor-page .elementor .elementor-container,
body.elementor-page .elementor .e-con-inner{
  max-width:none !important; width:100% !important;
}

/* Si algún section está en “Stretch section / Full width”, neutralízalo */
.elementor-section.elementor-section-stretched,
body.elementor-page [data-elementor-stretched-section="true"]{
  width:auto !important; left:auto !important; right:auto !important;
}

/* Utilidad para secciones que SÍ quieras full-bleed (barras, CTA, etc.) */
.fullbleed{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}




/* =========================
   Lateral shadow (solo lados)
   Úsalo en el wrapper top-level:
   body.elementor-page .elementor > :is(.e-con,.elementor-section)
   ========================= */

/* Desktop: aplica sombra izquierda + derecha */
@media (min-width:1025px){
  body.elementor-page .elementor > :is(.e-con,.elementor-section).edge-shadow{
    position: relative;
    overflow: visible !important;           /* que la sombra no se recorte */
    /* 2 sombras, una a cada lado; spread negativo para no tocar arriba/abajo */
    box-shadow:
      -36px 0 68px -36px rgba(8,23,38,.36),
       36px 0 68px -36px rgba(8,23,38,.36);
  }

  /* Variante más suave por si la quieres en secciones claras */
  body.elementor-page .elementor > :is(.e-con,.elementor-section).edge-shadow--soft{
    box-shadow:
      -28px 0 56px -34px rgba(8,23,38,.26),
       28px 0 56px -34px rgba(8,23,38,.26);
  }

  /* Variante más intensa (hero, banners) */
  body.elementor-page .elementor > :is(.e-con,.elementor-section).edge-shadow--lg{
    box-shadow:
      -48px 0 90px -40px rgba(8,23,38,.42),
       48px 0 90px -40px rgba(8,23,38,.42);
  }
}

/* Tablet/Mobile: normalmente sin sombra (va full-width) */
@media (max-width:1024px){
  body.elementor-page .elementor > :is(.e-con,.elementor-section).edge-shadow,
  body.elementor-page .elementor > :is(.e-con,.elementor-section).edge-shadow--soft,
  body.elementor-page .elementor > :is(.e-con,.elementor-section).edge-shadow--lg{
    box-shadow: none !important;
  }
}




/* Tablet & mobile full-width */
@media (max-width:1024px){

  /* 1) Mata los gutters usados por tu regla base */
  :root{ --boxed-gutter: 0px; }

  /* 2) Cualquier sección/Container a orilla-orilla */
  body.elementor-page .elementor :is(.e-con,.elementor-section){
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* 3) El inner al 100%, sin max-width ni márgenes*/
  body.elementor-page .elementor :is(.e-con,.elementor-section)
    > :is(.e-con-inner,.elementor-container){
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important; 
    padding-inline: clamp(14px, 5vw, 22px) !important;  /*si quieres cero, pon 0*/
  } 

  /* 4) Override explícito por si queda alguna regla calc() viva */
  body.elementor-page .elementor :is(.e-con-inner,.elementor-container){
    width: 100% !important;
  }
}







/* Header 100% transparente sobre el hero (Astra Builder) */
.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header,
.ast-below-header,
.ast-mobile-header-wrap,
.site-header .ast-builder-grid-row,
.site-header .ast-builder-grid-row-container,
.site-header .ast-container{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Por si Astra inyecta overlays con :before */
.site-header::before,
.main-header-bar::before,
.ast-primary-header-bar::before,
.site-header .ast-builder-grid-row::before{
  content: none !important;
}

/* Sticky también transparente */
.ast-sticky-active .main-header-bar,
.ast-sticky-active .ast-primary-header-bar,
.ast-sticky-active .site-header{
  background: transparent !important;
}

/* Colores del menú encima de foto */
.site-header a,
.main-header-menu .menu-link{ color:#fff !important; }
.main-header-menu .menu-link:hover{ color:#d7a44a !important; }

/* Header por encima del hero */
.site-header{ position:absolute; top:0; left:0; right:0; z-index:1000; }
.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }

/* ===== Mobile: logo grande y más arriba, sin menú ===== */
@media (max-width: 921px){

  /* tamaño del logo (ajusta 34–40px si quieres) */
  .site-logo-img img,
  .custom-logo{
    height: 36px !important;
    width: auto !important;
  }

  /* fila del header compacta para que quede casi al tope */
  .site-header .ast-builder-grid-row{
    min-height: 44px !important;   /* suficiente para un logo de 36px */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* sin menú móvil (ya lo quitaste, lo mantenemos por si acaso) */
  .ast-header-break-point .menu-toggle,
  .ast-mobile-header-wrap .ast-mobile-menu-trigger,
  .ast-mobile-header-wrap .ast-builder-menu-1,
  .ast-mobile-popup-drawer{ display:none !important; }
}

/* header transparente encima del hero */
.ast-transparent-header .site-header{
  position:absolute; top:0; left:0; right:0; z-index:1000;
  background:transparent !important; box-shadow:none !important;
}

/* cuando estás logueado en WP, que no lo baje la barra de admin en preview */
.admin-bar.ast-transparent-header .site-header{ top:0 !important; }










/* Helpers */
.container{ width:min(var(--maxw), 100% - 32px); margin-inline:auto }
.section{ padding: clamp(48px, 7vw, 96px) 0 }
.h1, .h2, .h3{ font-family:Merriweather, Georgia, serif; letter-spacing:.2px }
.h1{ font-weight:900; font-size:clamp(36px, 5vw, 56px); line-height:1.2 !important; color: var(--white)}
.h2{ font-weight:900; font-size:clamp(28px, 3.2vw, 38px); line-height:1.15; margin:0 0 22px }
.h3{ font-weight:700; font-size:clamp(20px, 2.3vw, 24px); margin:0 0 12px }

.lead{ font-size:clamp(18px, 2.2vw, 20px); color:#e8eef7 }
.muted{ color:#5f7996 }
.kicker{ font:600 13px/1 Inter; letter-spacing:.18em; text-transform:uppercase; color:#cfe0ff }


/* Hero (bg por CSS var)*/
.bso-hero{
  position:relative; color:#fff; background:var(--navy-900);
  background-image: var(--hero, none); background-size:cover; background-position:center;
} 

.bso-hero::before {
    content: "";
    position: absolute;
    inset: 0;
     background:none !important; 
}
.bso-hero__wrap{ position:relative; z-index:1; display:grid; align-items:end; min-height:68vh }
.bso-hero__copy{ max-width:720px; padding: clamp(28px, 4vw, 44px) 0 }
.bso-hero .trust{ margin-top:18px; font:600 14px/1.4 Inter; color:#d3e3ff }

.bso-hero h2{color: var(--white)}

/* === CTA buttons inline (hero) === */
.cta-row{
  display:flex; gap:16px; flex-wrap:wrap;
  margin:16px 0 6px;
}




/* === CTAs del hero — forzar colores correctos === */
.btn { font-size:1.2rem !important; text-decoration:none !important; font-weight:800 !important; }

/* Primary: azul con texto blanco; hover azul más oscuro */
.btn.btn--primary{
  background-color: var(--navy-800) !important;
  color:#fff !important;
  border:0px solid rgba(255,255,255,.18) !important;
	padding: 16px 48px !important;
	border-radius:16px !important;
}
.btn.btn--primary:hover,
.btn.btn--primary:focus{
  background-color: var(--navy-900) !important;
  color:#fff !important;
  text-decoration:none !important;
}

/* Accent: dorado con texto blanco; hover dorado más oscuro */
.btn.btn--accent{
 /* background-color: var(--gold-500) !important;*/
	background:linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color:#fff !important;
  border:0 !important;
	padding: 16px 48px !important;
	border-radius:16px !important;
}
.btn.btn--accent:hover,
.btn.btn--accent:focus{
  /*background-color: var(--gold-600) !important;*/
	background:linear-gradient(180deg, var(--gold-600), var(--gold-500));
  color:#fff !important;
  text-decoration:none !important;
}


.why2-plans .btn.btn--accent{
 /* background-color: var(--gold-500) !important;*/
	background:linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color:#fff !important;
  border:0 !important;
	padding: 16px 48px !important;
	border-radius:16px !important;
	font-size:.8em !important;
}
.why2-plans .btn.btn--accent:hover,
.why2-plans .btn.btn--accent:focus{
  /*background-color: var(--gold-600) !important;*/
	background:linear-gradient(180deg, var(--gold-600), var(--gold-500));
  color:#fff !important;
  text-decoration:none !important;
	font-size:.8em !important;
}










/* ===== Section: Value + Media ===== */

/* Modificadores específicos del bloque .vp */
.vp.pt-0{ padding-top:0 !important; }
.vp.pb-0{ padding-bottom:0 !important; }
.vp.mt-0{ margin-top:0 !important; }
.vp.mb-0{ margin-bottom:0 !important; }


/*.vp{
  background: var(--cream);
  padding: clamp(32px,6vw,80px) 16px;
}*/
.vp{
	background: var(--cream);
  padding-top: clamp(32px, 6vw, 80px);
  padding-right: 16px;
  padding-left: 16px;
  padding-bottom: 0;
}
.vp__wrap{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px,4vw,48px);
  align-items: center;
  /* controla el solapamiento */
  --overlap: clamp(0px, 3vw, 36px);
}
@media (max-width: 900px){
  .vp__wrap{ grid-template-columns: 1fr; }
}

/* Tarjeta de contenido */
.vp-card{
  background: var(--white);
  color: var(--ink-900);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px,4.5vw,48px);
  position: relative;
  z-index: 2;
  margin-right: calc(-1 * var(--overlap)); /* solapa sobre el media */
}
.vp-eyebrow{
  font-weight: 600;
  color: var(--navy-800);
  letter-spacing:.02em;
  margin-bottom:.6rem;
}
.vp-title-1{}
.vp h2{
  font: 800 clamp(26px,4vw,48px)/1.06 Merriweather, Georgia, serif;

  margin: 0 0 10px;
  color: var(--ink-900);
}
.vp-lead{
  font-size: clamp(15px,2.1vw,18px);
  color: var(--ink-700);
  margin: 0 0 18px;
}

/* Lista con checks */
.vp-list{
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.vp-list li{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px; align-items: start;
  margin: 10px 0;
}
.vp-list li::before{
  content:"";
  width: 22px; height: 22px;
  margin-top: 2px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--gold-500) 0 50%, transparent 51%),
    conic-gradient(from 0deg at 50% 50%, var(--gold-600), var(--gold-500));
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 20.6 7.4 19.2 6z"/></svg>')
    center/70% 70% no-repeat;
          mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 20.6 7.4 19.2 6z"/></svg>')
    center/70% 70% no-repeat;
  background-color: var(--gold-600);
}


/* === TABLET + MOBILE: que NO recorte (≤1024px) === */
@media (max-width:1024px){
  .vp-media{
    padding:0 !important;
    min-height:auto !important;
    height:auto !important;
    margin-block:0 !important;
    overflow:visible !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    background:#fff !important;
  }
  .vp-media > img,
  .vp-media > video{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* (opcional) apilar la sección también en tablet */
  /* .vp__wrap{ grid-template-columns:1fr !important; } */
}

/* === DESKTOP: cover + solape (≥1025px) === */
@media (min-width:1025px){
  .vp-media{
    padding-left: var(--overlap) !important;
    min-height: clamp(520px, 64vh, 680px) !important;
    margin-block: clamp(-24px, -2vw, -36px);
    overflow: hidden !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    background:#fff !important;
  }
  .vp-media > img,
  .vp-media > video{
    position: absolute; inset: 0;
    width: 100%; height: 100% !important;
    object-fit: cover !important;
    object-position: center;
  }
}



/* ===== Value + Media — ajustes para referencia ===== */
.vp__wrap{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.62fr 0.38fr;     /* card más ancha */
  gap: clamp(20px,4vw,44px);
  align-items: stretch;                     /* cada columna con su propia altura */
  --overlap: clamp(28px, 5vw, 72px);        /* cuánto pisa la card al media */
}

/* Tarjeta (izquierda) solapando al media */
.vp-card{
  position: relative; z-index: 2;
  background: var(--white);
  color: var(--ink-900);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(13,27,42,.15);
  padding: clamp(22px,4.4vw,48px);
  margin-right: calc(-1 * var(--overlap));
}

/* Media (derecha) más alto que la card */
.vp-media{
  position: relative; z-index: 1;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(13,27,42,.15);
  background: var(--navy-800);
  padding-left: var(--overlap);             /* espacio para el solape */
  min-height: clamp(520px, 64vh, 680px);    /* MÁS alto que la card */
  margin-block: clamp(-24px, -2vw, -36px);  /* estira un poco hacia arriba/abajo */
}

/* Forzamos cobertura total del contenido del media */
.vp-media > img,
.vp-media > video{
  position: absolute; inset: 0;
  width: 100%; height: 100% !important;     /* vence height:auto de Elementor */
  object-fit: cover;
  object-position: 35% center;              /* mueve el sujeto a la izquierda */
  display: block;
}

/* Botonera local (por si no la tienes ya) */
.vp .cta-row{ display:flex; gap:12px; flex-wrap:wrap; }


/* Responsivo */
@media (max-width: 1024px){
  .vp__wrap{ grid-template-columns: 1fr; }
  .vp-card{ margin-right: 0; }
  .vp-media{ padding-left: 0; min-height: 360px; margin-block: 0; }
}
@media (max-width: 560px){
  .vp-card, .vp-media{ border-radius: 20px; }
  .vp .btn{ width:100%; justify-content:center; }
}

/* ===== Distribución vertical solo en desktop ===== */
@media (min-width:1025px){
  /* La card ocupa toda su pista y reparte el contenido a lo alto */
  .vp-card{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    gap: clamp(10px, 1.2vw, 18px); /* espacio entre bloques */
  }
  /* Empuja la botonera al fondo de la card */
  .vp .cta-row{ margin-top: auto; }

  /* Ajustes finos de espacios internos para que no “infle” arriba/abajo */
  .vp-eyebrow{ margin-bottom: .5rem; }
  .vp h2{ margin-bottom: .5rem; }
  .vp-lead{ margin-bottom: .75rem; }
  .vp-list{ margin-bottom: 0; }
}


/*BENEFITS*/

/* si prefieres propiedades clásicas */
#benefits.section{
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: 0;
}

.card{
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:22px;
}


/* Tamaño icónico armonizado con tus cards */
.icon-xl{ width:min(160px, 40%); height:auto; margin: 6px auto 12px; display:block; }

/* Card oscura (última) */
.card--navy{
	border-radius:var(--radius-lg);
	padding:22px;
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.card--navy .h3{ color:#fff; }
.card--navy p{ color:#ffffff; }
















/* ===== Guide section (BG + card + steps) ===== */
.guide{
  position:relative;
  background: var(--navy-900);
  background-image: var(--bg, none);
  background-size: cover; background-position: center;
}
.guide::before{
  content:""; position:absolute; inset:0;
  /* overlay suave para legibilidad sobre la foto */
  background: radial-gradient(1200px 600px at 20% 40%, rgba(11,46,74,.45), rgba(11,46,74,.65) 40%, rgba(11,46,74,.72));
}
.guide .container{ position:relative; z-index:1; }
.guide__wrap{ min-height: 74vh; display:grid; align-items:center; }
.guide__card{
  margin-left:auto; /* coloca la tarjeta a la derecha */
  max-width: 640px;
  background:#fff; color:var(--ink-900);
  border:1px solid #e6edf6; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(18px, 3.6vw, 36px);
}
.guide__card .h2{ margin:0 0 12px; }
.guide__card .muted{ color:#4b627c; }

/* Steps grid */
.guide-steps{
  margin-top: 14px;
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .guide-steps{ grid-template-columns: repeat(2, 1fr); }
  .guide-steps .step--full{ grid-column: 1 / -1; }
}

.step{
  position:relative; background:#fff; border-radius: var(--radius-lg);
  border:1px solid #e6edf6; box-shadow: var(--shadow-md);
  padding: 16px 16px 14px 16px;
}
.step .h3{ margin: 2px 0 6px; }
.step p{ margin:0; color:#415a77; }

/* Badge numerado en azul navy (reemplaza morado) */
.badge{
  position:absolute; top:-12px; left:-12px;
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:999px;
  font:800 14px/1 Inter, system-ui; color:var(--navy-900);
  background:#fff; border:3px solid var(--navy-800);
  box-shadow:0 4px 12px rgba(11,46,74,.18);
}

/* CTA centrado */
.cta-center{ display:flex; justify-content:center; margin-top:18px; }

/* Responsivo: en mobile la tarjeta respira y la foto queda full-bleed */
@media (max-width: 920px){
  .guide__wrap{ min-height: unset; }
  .guide__card{ margin: 20px auto; }
}




	  
	  
	  
	  
	  
	  
/* ===== Plans (Growth Path) ===== */	  
	  
	 .plans{
  background: var(--cream);
  padding: clamp(44px, 7vw, 96px) 16px;
}
.plans__wrap{
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.plans__eyebrow{
  color: var(--ink-700);
  font-weight: 600;
  margin-bottom: .3rem;
}
.plans__title{
  margin: 0 0 .4rem;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--ink-900);
	font-family: Merriweather, Georgia, serif;
}
.plans__sub{
  margin: 0 auto clamp(22px, 3vw, 36px);
  color: var(--ink-700);
  max-width: 760px;
  font-size: clamp(14px, 1.8vw, 16px);
}

/* Grid */
.plans__grid{
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: center;
}
@media (min-width: 900px){
  .plans__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Card base (usa tu clase .card--navy para el fondo) */
.plan-card{
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 380px);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.plan-card.card--navy{
  background: var(--navy-900);
  color: #fff;
}
.plan-card.card--navy .h3,
.plan-card.card--navy p{ color:#fff; }

/* Badge “Popular” */
.plan-card .badge{
  position:absolute;
  left: 50%; transform: translate(-50%, -50%);
  top: 0;
  background: var(--navy-800);
  color:#fff;
  font-weight:700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(11,46,74,.35);
  border: 2px solid rgba(255,255,255,.14);
}

/* Tipografía dentro de la card */
.plan-title{ font: 800 clamp(22px, 2.4vw, 26px)/1.2 system-ui; margin: 0 0 8px !important; color: var(--gold-500) !important; }
.plan-desc{ margin: 0 0 16px; opacity:.95; }

.plan-price{
  margin: 4px 0 14px;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
}
.plan-price .from{ display:block; font-size: clamp(18px, 2.6vw, 22px); }
.plan-price .amount{ display:block; font-size: clamp(28px, 5vw, 40px); }

/* Lista de features (checks dorados sutiles) */
.plan-features{ list-style:none; padding:0; margin: 0 0 18px; text-align:left; }
.plan-features li{
  display:grid; grid-template-columns: 18px 1fr; gap:10px;
  margin: 8px 0; color:#fff;
}
.plan-features li::before{
  content:"";
  width: 10px; height:10px; margin: 7px 0 0 4px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  transform: rotate(45deg);
}

/* CTA */
.plan-cta{ margin-top: auto; }
.plans .btn.btn--secondary{
  /* asegúrate que el secondary contraste en fondo navy */
  color:#fff; border:2px solid rgba(255,255,255,.85);
  background: transparent;
  padding: 14px 18px; border-radius: 999px; font-weight:800;
}
.plans .btn.btn--secondary:hover{
  background: rgba(255,255,255,.12);
}

/* Estado “destacado” (opcional) */
.plan-card.is-popular{
  outline: 2px solid rgba(255,255,255,.22);
  box-shadow:
    0 14px 40px rgba(11,46,74,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
} 
	  
	  
	





/* Cinta a full ancho con el color del sitio */
.band-navy{
  background: var(--navy-900);
  padding-block: clamp(24px,4vw,56px);
}

/* Caja interna con ancho máx, centrada, con esquinas y sombra */
.boxed-card{
  width: min(100% - 48px, 1200px);   /* márgenes laterales + ancho máx */
  margin-inline: auto;
  background: var(--q-panel, #F4F7FB);
  /*border-radius: 16px;*/
  /*padding: clamp(20px,3vw,44px);*/
  /*box-shadow: 0 10px 30px rgba(6,26,47,.18);*/
  overflow: clip; /* respeta el border-radius */
}

/* Si usas el modelo antiguo de Sections/Columns de Elementor,
   aplica la “caja” al contenedor interno automáticamente */
.elementor-section.band-navy > .elementor-container{
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
}

/* Utilidad opcional para 2 columnas (texto/form + imagen/mapa) */
.boxed-card.grid-2{
  display: grid;
  grid-template-columns: 1fr minmax(300px,420px);
  gap: clamp(16px,3vw,40px);
  align-items: start;
}
@media (max-width: 992px){
  .boxed-card.grid-2{ grid-template-columns: 1fr; }
}





/* Astra footer (todas las variantes del builder) */
.site-footer,
.ast-footer-overlay,
.ast-builder-footer-wrap,
.ast-footer-widget-area,
.ast-small-footer,
.footer-adv-overlay,
.site-footer .ast-builder-grid-row-container,
/* Elementor footer (si usas plantilla de footer) */
.elementor-location-footer{
  background: var(--footer-bg) !important;
  background-image: none !important;
  color: var(--footer-ink) !important;
}

/* Colores de texto */
.site-footer,
.elementor-location-footer{
  color: var(--footer-ink-muted) !important;
}
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.elementor-location-footer h1, .elementor-location-footer h2, .elementor-location-footer h3,
.elementor-location-footer h4, .elementor-location-footer h5, .elementor-location-footer h6{
  color: var(--footer-ink) !important;
}

/* Enlaces */
.site-footer a,
.elementor-location-footer a{
  color: #fff !important;
  text-decoration: none;
}
.site-footer a:hover,
.elementor-location-footer a:hover{
  color: #e6f0ff !important;
  text-decoration: none;
}

/* Líneas/separadores y bordes suaves */
.site-footer hr,
.elementor-location-footer hr{
  border-color: none !important;
}
.site-footer .widget, .ast-footer-copyright{
  border-color: var(--footer-line) !important;
}

/* Formularios en el footer (inputs/textarea) */
.site-footer input, .site-footer textarea,
.elementor-location-footer input, .elementor-location-footer textarea{
  background: transparent !important;
  border: 1px solid var(--footer-line) !important;
  color: #fff !important;
}
.site-footer ::placeholder,
.elementor-location-footer ::placeholder{
  color: rgba(255,255,255,.7) !important;
}

/* Botones dentro del footer: usa tu estilo primario */
.site-footer .btn.btn--primary,
.elementor-location-footer .btn.btn--primary{
  background-color: var(--navy-800) !important;
  color: #fff !important;
  border: 0 !important;
}
.site-footer .btn.btn--primary:hover,
.elementor-location-footer .btn.btn--primary:hover{
  background-color: var(--navy-900) !important;
}

/* Opcional: iconos sociales (si son SVG/links simples) */
.site-footer .social a,
.elementor-location-footer .social a{
  color: #fff !important;
  opacity: .95;
}
.site-footer .social a:hover,
.elementor-location-footer .social a:hover{
  opacity: 1;
}

.ast-footer-copyright{color:white;}



/* Quitar el borde/separador superior del footer (Astra HFB) */
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-footer-separator,
.ast-small-footer .ast-footer-overlay,
.ast-footer-overlay,
.site-below-footer-wrap .ast-builder-grid-row-container {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Por si el separador se dibuja con pseudo-elemento */
.site-above-footer-wrap::before,
.site-primary-footer-wrap::before,
.site-below-footer-wrap::before {
  content: none !important;
}



/* ===== Mobile/Tablet — Gutters quirúrgicos (≤1024px) ===== */
@media (max-width:1024px){

  /* A) Quita la "caja" global y cualquier padding base del inner */
  body.elementor-page .elementor > :is(.e-con,.elementor-section){
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.elementor-page .elementor :is(.e-con,.elementor-section)
    > :is(.e-con-inner,.elementor-container){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* B) SOLO estas secciones llevan padding lateral en móvil/tablet */
  .elementor-7 
  :is(.elementor-element.elementor-element-6408711,
      .elementor-element.elementor-element-c80b3b7,
      .elementor-element.elementor-element-4324f01,
      .elementor-element.elementor-element-bbacc66,
      .elementor-element.elementor-element-0268e4f)
  > :is(.e-con-inner,.elementor-container){
    padding-inline: clamp(16px, 5vw, 24px) !important;
    box-sizing: border-box !important;
  }

  /* C) Utilidades manuales (pon la clase en la sección/Container) */
  .elementor-7 .pad-x > :is(.e-con-inner,.elementor-container){
    padding-inline: clamp(16px, 5vw, 24px) !important;
  }
  .elementor-7 .no-pad-x > :is(.e-con-inner,.elementor-container){
    padding-inline: 0 !important;
  }
  .elementor-7 .pad-y-0{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* (Opcional) Variante de banda ajustada si usas band-navy pero sin alto extra */
.band-navy.tight-y{ padding-block: 0 !important; }



/* === no-pad-x (definitivo) — gana siempre en ≤1024px === */
@media (max-width:1024px){
  /* Wrapper Container (modelo Containers de Elementor) */
  .elementor-7 .elementor-element.no-pad-x,
  .elementor-7 .elementor-section.no-pad-x{
    padding-left:0 !important; padding-right:0 !important;
  }
  .elementor-7 .elementor-element.no-pad-x > .e-con-inner,
  .elementor-7 .elementor-section.no-pad-x > .elementor-container{
    padding-left:0 !important; padding-right:0 !important;
  }

  /* Si la clase quedó en el inner por error */
  .elementor-7 :is(.e-con-inner,.elementor-container).no-pad-x{
    padding-left:0 !important; padding-right:0 !important;
  }

  /* Si el padding proviene de tus propios bloques */
  .elementor-7 .no-pad-x :is(.plans,.vp,.boxed-card){
    padding-left:0 !important; padding-right:0 !important;
  }
  /* Y si .boxed-card achica el ancho, que vaya a orilla-orilla */
  .elementor-7 .no-pad-x .boxed-card{
    width:100% !important; margin-left:0 !important; margin-right:0 !important;
  }
}