.elementor-kit-5{--e-global-color-primary:#010101;--e-global-color-secondary:#F2440D;--e-global-color-text:#FCFBFC;--e-global-color-accent:#FDC020;--e-global-color-0197319:#1F1A1C;--e-global-color-4b654a7:#EFE6D2;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#EFE6D2;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* 1. Evita que cualquier elemento sobresalga del cuerpo del sitio */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* 2. Corrige el posible error del SVG del separador de Elementor */
.elementor-shape-bottom svg {
    width: calc(100% + 1.3px) !important;
    left: -1px;
}

/* 3. Asegura que las imágenes no empujen el diseño en móviles */
img {
    max-width: 100%;
    height: auto;
}

/*--------------------------------------------*/

/* 1) Importar fuentes (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Tipografías */
  --font-primary: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Tamaños (dados) */
  --font-size-heading-1: clamp(48px, 41.84px + 1.7105vw, 61px);
  --font-size-heading-2: clamp(40px, 35.74px + 1.1842vw, 49px);
  --font-size-heading-3: clamp(33px, 30.16px + 0.7895vw, 39px);
  --font-size-heading-4: clamp(28px, 26.58px + 0.3947vw, 31px);
  --font-size-heading-5: clamp(23px, 22.05px + 0.2632vw, 25px);
  --font-size-heading-6: clamp(19px, 18.53px + 0.1316vw, 20px);
  --font-size-body-big: 18px;
  --font-size-body: 16px;
  --font-size-body-small: 14px;

  /* Line-heights (ajustables) */
  --lh-heading: 1.05;
  --lh-body: 1.6;

  /* Espaciado entre bloques tipográficos */
  --flow-spacing: 1.15;
}

/* 2) Reset tipográfico base */
html { font-family: var(--font-secondary); font-size: 16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { margin:0; font-size: var(--font-size-body); line-height: var(--lh-body); color: #111; font-family: var(--font-secondary); }

/* 3) Encabezados globales (usar Poppins por defecto para headings) */
h1, .h1 { font-family: var(--font-primary); font-size: var(--font-size-heading-1); line-height: var(--lh-heading); margin: 0 0 calc(var(--flow-spacing) * 1rem); }
h2, .h2 { font-family: var(--font-primary); font-size: var(--font-size-heading-2); line-height: var(--lh-heading); margin: 0 0 calc(var(--flow-spacing) * 1rem); }
h3, .h3 { font-family: var(--font-primary); font-size: var(--font-size-heading-3); line-height: var(--lh-heading); margin: 0 0 calc(var(--flow-spacing) * 0.9rem); }
h4, .h4 { font-family: var(--font-primary); font-size: var(--font-size-heading-4); line-height: var(--lh-heading); margin: 0 0 calc(var(--flow-spacing) * 0.8rem); }
h5, .h5 { font-family: var(--font-primary); font-size: var(--font-size-heading-5); line-height: var(--lh-heading); margin: 0 0 calc(var(--flow-spacing) * 0.7rem); }
h6, .h6 { font-family: var(--font-primary); font-size: var(--font-size-heading-6); line-height: var(--lh-heading); margin: 0 0 calc(var(--flow-spacing) * 0.6rem); }

/* 4) Textos y utilidades */
p { font-size: var(--font-size-body); line-height: var(--lh-body); margin: 0 0 1rem; }
.small, .text-small { font-size: var(--font-size-body-small); }
.lead, .text-lg, .body-big { font-size: var(--font-size-body-big); }

/* 5) Clases útiles para Elementor widgets (asigna estas clases a widgets cuando quieras tamaños específicos) */
.hero-title { font-family: var(--font-primary); font-size: var(--font-size-heading-1); line-height: var(--lh-heading); }
.section-title { font-family: var(--font-primary); font-size: var(--font-size-heading-2); line-height: var(--lh-heading); }
.card-title { font-family: var(--font-primary); font-size: var(--font-size-heading-3); }
.card-subtitle { font-family: var(--font-secondary); font-size: var(--font-size-body); }

/* 6) Ejemplo de combinación de clamp con límites (opcional, más fluidez para títulos) */
.hero-title { font-size: clamp(2.5rem, 1.5rem + 3.5vw, var(--font-size-heading-1)); }

/* 7) Accesibilidad: respetar tamaño de texto del usuario (si lo desea) */
/* Nada necesario aquí si no quieres forzar tamaños; las variables ya usan unidades absolutas/relativas dadas. */

/* 8) Ajustes específicos para móviles (si quieres forzar cambios adicionales) */
@media (max-width: 767px){
  :root{
    /* si quieres reducir la base en móviles, descomenta y ajusta */
    /* --font-size-body: 15px; */
    /* --font-size-body-small: 13px; */
  }
  /* Ejemplo: reducir espaciamiento entre headings en móvil */
  h1, h2, h3, h4, h5, h6 { margin-bottom: 0.6rem; }
}

/* 9) Ejemplos rápidos de uso en Elementor:
   - Asigna clase "hero-title" al widget del título principal.
   - Asigna clase "section-title" a subtítulos de secciones.
   - Usa .lead para párrafos destacados.
*//* End custom CSS */