.elementor-kit-21{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--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;}.elementor-kit-21 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);}@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 *//* ============================================
   SEPARACIÓN LATERAL FLUIDA - LAYOUT GLOBAL
   Sistema de márgenes proporcionales al viewport
   Inspirado en el enfoque de Squarespace (plenty.tv)
   ============================================ */

/* --- BODY: Padding lateral fluido ---
   Usa clamp() con calc() para una transición suave:
   - A 1140px o menos: 10px fijos (mínimo)
   - De 1140px en adelante: crece progresivamente
   - Máximo: 8vw (~154px en pantalla de 1920px)
   
   Fórmula: clamp(MÍNIMO, VALOR_PREFERIDO, MÁXIMO)
   El calc() interior hace que el valor crezca 0.2px
   por cada 1px que el viewport supera los 1140px.
   Esto genera una transición fluida sin saltos bruscos.
   ============================================ */
body {
    padding-left: clamp(10px, calc((100vw - 1140px) * 0.2 + 10px), 8vw);
    padding-right: clamp(10px, calc((100vw - 1140px) * 0.2 + 10px), 8vw);
}

/* --- MOBILE: Sin separación lateral ---
   En celulares el contenido ocupa el 100% del ancho.
   No necesita aire lateral porque la pantalla ya es chica.
   ============================================ */
@media (max-width: 767px) {
    body {
        padding-left: 0;
        padding-right: 0;
    }
}

/* --- HEADER Y FOOTER: Expansión a ancho completo ---
   El padding del body empuja todo el contenido hacia adentro,
   pero header y footer necesitan llegar de borde a borde
   (para que la línea decorativa, sombra sticky y fondos
   no se corten).
   
   Se usa margin negativo igual al padding del body
   para compensar y que se expandan al 100% del viewport.
   ============================================ */
.elementor-location-header,
.elementor-location-footer {
    margin-left: calc(-1 * clamp(10px, calc((100vw - 1140px) * 0.2 + 10px), 8vw));
    margin-right: calc(-1 * clamp(10px, calc((100vw - 1140px) * 0.2 + 10px), 8vw));
}

/* --- MOBILE: Sin compensación necesaria ---
   Como el body ya no tiene padding en mobile,
   no hay nada que compensar.
   ============================================ */
@media (max-width: 767px) {
    .elementor-location-header,
    .elementor-location-footer {
        margin-left: 0;
        margin-right: 0;
    }
}

/* --- HEADER/FOOTER: Padding interno del contenido ---
   El margin negativo anterior hace que el fondo del
   header/footer llegue a los bordes, pero el contenido
   interior (logo, menú, texto del footer) debe mantener
   la misma alineación que el resto del sitio.
   
   Se aplica el mismo clamp() como padding interno
   para que logo y menú queden alineados con el contenido.
   
   Selectores múltiples para cubrir distintas estructuras
   de Elementor (secciones clásicas y Flexbox containers).
   ============================================ */
.elementor-location-header .elementor-section-wrap,
.elementor-location-header > .elementor-section,
.elementor-location-header > .e-con,
.elementor-location-footer .elementor-section-wrap,
.elementor-location-footer > .elementor-section,
.elementor-location-footer > .e-con {
    padding-left: clamp(10px, calc((100vw - 1140px) * 0.2 + 10px), 8vw);
    padding-right: clamp(10px, calc((100vw - 1140px) * 0.2 + 10px), 8vw);
}

/* --- MOBILE: Padding mínimo en header/footer ---
   En celulares se deja 10px de respiro para que
   el logo y menú no queden pegados al borde.
   ============================================ */
@media (max-width: 767px) {
    .elementor-location-header .elementor-section-wrap,
    .elementor-location-header > .elementor-section,
    .elementor-location-header > .e-con,
    .elementor-location-footer .elementor-section-wrap,
    .elementor-location-footer > .elementor-section,
    .elementor-location-footer > .e-con {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* --- FIX: Fondo transparente en embeds de Vimeo --- */
.elementor-widget-video iframe,
.flex-video iframe {
    display: block;
    background-color: transparent !important;
}/* End custom CSS */