.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-7550ff2:#CDDB00;--e-global-color-a9af510:#007A4C;--e-global-color-acb2156:#011E41;--e-global-color-d4fff24:#FF9E18;--e-global-color-360f3ed:#E1FFD4;--e-global-color-a109fcd:#F2F2F2;--e-global-color-f84f9ea:#707070;--e-global-color-8b01941:#000000;--e-global-color-06449a3:#011E4142;--e-global-color-742faf2:#FFFFFF;--e-global-color-aa7258d:#FFFFFF00;--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;--e-global-typography-bec4208-font-family:"IBM Plex Sans";--e-global-typography-bec4208-font-size:clamp(2rem, 1.4rem + 3vw, 5rem);--e-global-typography-bec4208-font-weight:300;--e-global-typography-bec4208-line-height:clamp(2rem, 1.4rem + 3vw, 5rem);--e-global-typography-9ee1dea-font-family:"IBM Plex Sans";--e-global-typography-9ee1dea-font-size:clamp(1.7rem, 1.42rem + 1.425vw, 3.125rem);--e-global-typography-9ee1dea-font-weight:400;--e-global-typography-9ee1dea-line-height:clamp(2.2rem, 1.92rem + 1.4vw, 3.6rem);--e-global-typography-632b548-font-family:"IBM Plex Sans";--e-global-typography-632b548-font-size:clamp(1.3rem, 1.19rem + 0.575vw, 1.875rem);--e-global-typography-632b548-font-weight:800;--e-global-typography-632b548-line-height:clamp(1.6rem, 1.46rem + 0.7vw, 2.3rem);--e-global-typography-4fe9f59-font-family:"IBM Plex Sans";--e-global-typography-4fe9f59-font-size:clamp(1.3rem, 1.19rem + 0.575vw, 1.875rem);--e-global-typography-4fe9f59-font-weight:500;--e-global-typography-4fe9f59-line-height:clamp(1.6rem, 1.46rem + 0.7vw, 2.3rem);--e-global-typography-65921b6-font-family:"IBM Plex Sans";--e-global-typography-65921b6-font-size:clamp(1.1rem, 1.07rem + 0.15vw, 1.25rem);--e-global-typography-65921b6-font-weight:500;--e-global-typography-65921b6-line-height:clamp(1.1rem, 1.07rem + 0.15vw, 1.25rem);--e-global-typography-c926572-font-family:"IBM Plex Sans";--e-global-typography-c926572-font-size:clamp(1.5rem, 1.3rem + 1vw, 2.5rem);--e-global-typography-c926572-font-weight:500;--e-global-typography-c926572-line-height:clamp(2rem, 1.8rem + 1vw, 3rem);--e-global-typography-48287be-font-family:"IBM Plex Sans";--e-global-typography-48287be-font-size:clamp(1.1rem, 1.02rem + 0.4vw, 1.5rem);--e-global-typography-48287be-font-weight:500;--e-global-typography-48287be-line-height:clamp(1.5rem, 1.42rem + 0.4vw, 1.9rem);--e-global-typography-4ce867d-font-family:"IBM Plex Sans";--e-global-typography-4ce867d-font-size:clamp(1.1rem, 1.07rem + 0.15vw, 1.25rem);--e-global-typography-4ce867d-font-weight:400;--e-global-typography-4ce867d-line-height:clamp(1.1rem, 1.07rem + 0.15vw, 1.25rem);--e-global-typography-457666a-font-family:"IBM Plex Sans";--e-global-typography-457666a-font-size:clamp(1.1rem, 1.07rem + 0.15vw, 1.25rem);--e-global-typography-457666a-font-weight:500;--e-global-typography-578f7b8-font-family:"IBM Plex Sans";--e-global-typography-578f7b8-font-size:clamp(1.2rem, 1.1rem + 0.5vw, 1.7rem);--e-global-typography-578f7b8-font-weight:400;--e-global-typography-578f7b8-line-height:clamp(1.7rem, 1.6rem + 0.5vw, 2.2rem);--e-global-typography-bd6b236-font-family:"IBM Plex Sans";--e-global-typography-bd6b236-font-size:clamp(1.3rem, 1.06rem + 1.2vw, 2.5rem);--e-global-typography-bd6b236-font-weight:400;--e-global-typography-bd6b236-line-height:clamp(1.7rem, 1.46rem + 1.2vw, 2.9rem);--e-global-typography-1d6f1fd-font-family:"IBM Plex Sans";--e-global-typography-1d6f1fd-font-size:clamp(1.2rem, 1.04rem + 0.8vw, 2rem);--e-global-typography-1d6f1fd-font-weight:200;--e-global-typography-1d6f1fd-line-height:clamp(1.4rem, 1.24rem + 0.8vw, 2.2rem);--e-global-typography-a8f91d0-font-family:"IBM Plex Sans";--e-global-typography-a8f91d0-font-size:clamp(1.1rem, 0.95rem + 0.775vw, 1.875rem);--e-global-typography-a8f91d0-font-weight:400;--e-global-typography-a8f91d0-line-height:clamp(1.6rem, 1.46rem + 0.7vw, 2.3rem);--e-global-typography-ed8039e-font-family:"IBM Plex Sans";--e-global-typography-ed8039e-font-size:clamp(1.1rem, 1.02rem + 0.4vw, 1.5rem);--e-global-typography-ed8039e-font-weight:400;--e-global-typography-ed8039e-line-height:clamp(1.5rem, 1.42rem + 0.4vw, 1.9rem);--e-global-typography-05a46e9-font-family:"IBM Plex Sans";--e-global-typography-05a46e9-font-size:clamp(1.05rem, 1.04rem + 0.075vw, 1.125rem);--e-global-typography-05a46e9-font-weight:400;--e-global-typography-05a46e9-line-height:clamp(1.4rem, 1.36rem + 0.2vw, 1.6rem);--e-global-typography-886f1e4-font-family:"IBM Plex Sans";--e-global-typography-886f1e4-font-size:1rem;--e-global-typography-886f1e4-font-weight:400;--e-global-typography-886f1e4-line-height:1.5rem;--e-global-typography-607a2e3-font-family:"IBM Plex Sans";--e-global-typography-607a2e3-font-size:1rem;--e-global-typography-607a2e3-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100vw;}.e-con{--container-max-width:100vw;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}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:1440px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100vw;}.e-con{--container-max-width:100vw;}}@media(max-width:1280px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100vw;}.e-con{--container-max-width:100vw;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100vw;}.e-con{--container-max-width:100vw;}}@media(max-width:880px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100vw;}.e-con{--container-max-width:100vw;}}@media(max-width:480px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100vw;}.e-con{--container-max-width:100vw;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(min-width:2400px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100vw;}.e-con{--container-max-width:100vw;}}/* Start custom CSS *//* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   HOME HERO ENERPATH — CSS COMPLETO
   Desktop: vídeo + máscara blanca + verde SVG (contenedor real) + flecha (Icon widget SVG)
   <= 880: sin vídeo + sin blanca + blanco + franja verde grande + flecha centrada

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* =========================
   VARIABLES
========================= */
:root{
  --header-h: 12dvh;
  --hero-max-w: 1920px;

  /* Desktop shapes */
  --white-w: 64%;
  --green-w: 34%;
  --green-h: 40%;

  /* Flecha: UN SOLO TAMAÑO (clamp) */
  --arrow-size: clamp(3.5rem, 4vw, 4.75rem); /* desktop */

  /* Ajuste fino de posición (si algún día lo necesitas) */
  --arrow-x: -5em;  /* + derecha, - izquierda */
  --arrow-y: 5vh;  /* + abajo, - arriba */
}

/* Header (plantilla Elementor) */
.site-header{ height: var(--header-h); }

/* =========================
   HERO: 0 scroll
========================= */
.hero-energy{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;

  width: min(100%, var(--hero-max-w));
  margin: 0 auto;

  height: calc(100dvh - var(--header-h));
  background: transparent;
}

.hero-energy,
.hero-energy > .e-con,
.hero-energy > .elementor-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   VÍDEO (desktop)
========================= */
.hero-energy .elementor-background-video-container,
.hero-energy .elementor-background-video-embed{
  position:absolute;
  inset:0;
  z-index: 1;
}

.hero-energy .elementor-background-video-container video.elementor-background-video-hosted{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* Overlay Elementor */
.hero-energy .elementor-background-overlay{ z-index: 2; }

/* Contenido */
.hero-energy__content{
  position: relative;
  z-index: 10;
  width: min(760px, 44vw);
  padding: clamp(28px, 4vw, 90px);
}

/* =========================
   MÁSCARA BLANCA (solo desktop)
========================= */
.hero-energy::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  width: var(--white-w);
  height: 100.1%;
  z-index: 6;
  pointer-events:none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='none'%3E%3Cg transform='scale(4.75695 3.409414)'%3E%3Cpath fill='%23FFFFFF' d='M0,0h314.61s-3.2,2.89-1.63,6.61,89.54,163.37,89.54,163.37c0,0,5.09,12.13-6.65,23.48s-140.74,117.91-140.74,117.91c0,0-1.57,4.52,2.09,5.13s-257.22,0-257.22,0V0Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
}

/* =========================
   VERDE DESKTOP (contenedor real)
========================= */
.hero-energy__green{
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--green-w);
  height: var(--green-h);
  z-index: 7;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080' preserveAspectRatio='none'%3E%3Cg transform='scale(2.637363 3.121387)'%3E%3Cpath fill='%23007A4C' d='M16.5918 346L0.0414295 30.538C-0.996503 10.762 17.6391 -4.21642 36.7087 1.07229L728 192.835V345.991H16.5918V346Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none; /* la forma no captura clicks */
}

/* =========================
   FLECHA (Elementor Icon widget con SVG subido)
   - Tamaño con clamp
   - Centrada en el triángulo
========================= */
.hero-energy__scroll{
  pointer-events: auto; /* clicable */

  width: var(--arrow-size) !important;
  height: var(--arrow-size) !important;

  display: grid !important;
  place-items: center !important;

  transform: translate(var(--arrow-x), var(--arrow-y)) !important;
}

/* El wrapper del Icon widget */
.hero-energy__scroll .elementor-icon{
  width: 100% !important;
  height: 100% !important;

  display: grid !important;
  place-items: center !important;
}

/* El SVG ocupa toda la caja: así escala perfecto */
.hero-energy__scroll .elementor-icon svg{
  width: 100% !important;
  height: 100% !important;
}

/* Scroll suave para el anchor */
html{ scroll-behavior: smooth; }

/* =========================
   BREAKPOINTS (ancho objetivo)
========================= */
@media (max-width: 1440px){ :root{ --hero-max-w: 1440px; } }
@media (max-width: 1280px){ :root{ --hero-max-w: 1280px; } }
@media (max-width: 1024px){ :root{ --hero-max-w: 1024px; } }

/* ==========================================================
   <= 880px: TODO BLANCO + FRANJA VERDE GRANDE (sin vídeo)
   Flecha centrada
========================================================== */
@media (max-width: 880px){
  :root{
    --hero-max-w: 100%;

    /* Flecha móvil: más grande con clamp */
    --arrow-size: clamp(4.25rem, 10vw, 5.25rem);

    /* centrada */
    --arrow-x: 0px;
    --arrow-y: 0px;
  }

  /* Sin vídeo */
  .hero-energy .elementor-background-video-container,
  .hero-energy .elementor-background-video-embed,
  .hero-energy video,
  .hero-energy iframe{
    display: none !important;
  }

  /* Fondo blanco total */
  .hero-energy{
    background: #ffffff !important;
  }

  /* Sin máscara blanca */
  .hero-energy::before{
    display: none !important;
  }

  /* Franja verde grande (banda inclinada) */
  .hero-energy__green{
    width: 100%;
    height: 42%;
    right: 0;
    bottom: 0;

    background-image: none !important;
    background-color: #007A4C !important;

    /* Ajusta este valor si quieres más/menos inclinación */
    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 100%);

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-energy__content{
    width: min(680px, 92vw);
    padding: 28px;
  }
}

/* <= 480 */
@media (max-width: 480px){
  .hero-energy__content{ padding: 24px; }

  /* Un pelín más de verde si lo quieres */
  .hero-energy__green{ height: 45%; }

  /* Flecha un poco más grande */
  :root{ --arrow-size: clamp(4.5rem, 12vw, 5.75rem); }
}


/* ==========================================================
   CONTROLES DE ENCUADRE DEL VÍDEO (Elementor background video)
   - --vid-x:  + derecha / - izquierda
   - --vid-y:  + abajo / - arriba
   - --vid-scale: aumenta para evitar bordes al desplazar
========================================================== */
:root{
  --vid-x: 10vw;
  --vid-y: -5vh;
  --vid-scale: 1.12;
}

/* Recorta correctamente */
.hero-energy .elementor-background-video-container{
  overflow: hidden;
}

/* Caso vídeo hospedado (<video>) */
.hero-energy .elementor-background-video-container video.elementor-background-video-hosted{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: auto !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;

  transform:
    translate(calc(-50% + var(--vid-x)), calc(-50% + var(--vid-y)))
    scale(var(--vid-scale)) !important;
}

/* (Por si alguna vez usas YouTube/Vimeo) */
.hero-energy .elementor-background-video-embed iframe{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 177.78vh !important; /* 16:9 cover para iframe */
  height: 100vh !important;
  min-width: 100% !important;
  min-height: 100% !important;

  transform:
    translate(calc(-50% + var(--vid-x)), calc(-50% + var(--vid-y)))
    scale(var(--vid-scale)) !important;
}

/* En móvil ya ocultas el vídeo; por seguridad lo centramos */
@media (max-width: 880px){
  :root{
    --vid-x: 0px;
    --vid-y: 0px;
  }
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   /FINAL HOME HERO ENERPATH — CSS COMPLETO
   Desktop: vídeo + máscara blanca + verde SVG (contenedor real) + flecha (Icon widget SVG)
   <= 880: sin vídeo + sin blanca + blanco + franja verde grande + flecha centrada

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   HERO PÁGINAS (REUTILIZABLE CON VARIABLES DE COLOR) — IMAGEN + MÁSCARA COLOR SVG + CUÑA VARIABLE
   FIX: el ancho de la máscara responde SIEMPRE (no depende de la altura)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/* =========================
   VARIABLES SOLO PARA PÁGINAS
========================= */
.hero-paginas{
  --paginas-header-h: 12dvh;
  --paginas-hero-max-w: 1920px;

  /* Color dinámico principal */
  --paginas-mask-color: #007A4C;

  /* NUEVO: color de la cuña (por defecto igual al de la máscara) */
  --paginas-wedge-color: var(--paginas-mask-color);

  /* Tamaño REAL de la máscara (ajustables) */
  --paginas-mask-w: 68%;  /* prueba 60–75% */
  --paginas-mask-h: 88%;  /* 84–92% (para que NO llegue abajo) */

  /* Cuña inferior */
  --paginas-white-w: 26%;
  --paginas-white-h: 12%;
  --paginas-white-x: 54%;
  --paginas-white-bottom: 0%;

  /* Contenido */
  --paginas-content-max: 55vw;
  --paginas-content-pad: clamp(28px, 4vw, 80px);
}

/* =========================
   COLORES POR PÁGINA
========================= */
.hero-paginas.mask--green  { --paginas-mask-color: #007A4C; }
.hero-paginas.mask--orange { --paginas-mask-color: #FF9E18; }
.hero-paginas.mask--white  { --paginas-mask-color: #FFFFFF; }

/* (Opcional) Permitir cuña independiente */
.hero-paginas.wedge--green  { --paginas-wedge-color: #007A4C; }
.hero-paginas.wedge--orange { --paginas-wedge-color: #FF9E18; }
.hero-paginas.wedge--white  { --paginas-wedge-color: #FFFFFF; }


/* ==========================================================
   CONTROLES IMAGEN FONDO — HERO PÁGINAS (anti-conflictos)
========================================================== */
.hero-paginas{
  --paginas-bg-x: 30%;
  --paginas-bg-y: 50%;
  --paginas-bg-zoom: 1.2;
}

.hero-paginas{
  background-position: var(--paginas-bg-x) var(--paginas-bg-y) !important;
  background-size: calc(100% * var(--paginas-bg-zoom)) auto !important;
  background-repeat: no-repeat !important;
}

.hero-paginas > .e-con,
.hero-paginas > .elementor-container{
  background-position: var(--paginas-bg-x) var(--paginas-bg-y) !important;
  background-size: calc(100% * var(--paginas-bg-zoom)) auto !important;
  background-repeat: no-repeat !important;
}

.hero-paginas [style*="background-image"]{
  background-position: var(--paginas-bg-x) var(--paginas-bg-y) !important;
  background-size: calc(100% * var(--paginas-bg-zoom)) auto !important;
  background-repeat: no-repeat !important;
}


/* =========================
   CONTENEDOR BASE
========================= */
.hero-paginas{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;

  width: min(100%, var(--paginas-hero-max-w));
  margin: 0 auto;

  height: calc(100dvh - var(--paginas-header-h));

  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Limpieza Elementor */
.hero-paginas,
.hero-paginas > .e-con,
.hero-paginas > .elementor-container{
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Breakpoints de ancho */
@media (max-width: 1440px){ .hero-paginas{ --paginas-hero-max-w: 1440px; } }
@media (max-width: 1280px){ .hero-paginas{ --paginas-hero-max-w: 1280px; } }
@media (max-width: 1024px){ .hero-paginas{ --paginas-hero-max-w: 1024px; } }


/* ==========================================================
   MÁSCARA DE COLOR (SVG EXACTO)
========================================================== */
.hero-paginas--color-left .hero-paginas__color{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;

  background: var(--paginas-mask-color);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1122 760' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M706.29,757.9L0,585V0h1122l-340.37,722.61c-13.35,28.35-45.01,43.18-75.35,35.29Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1122 760' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M706.29,757.9L0,585V0h1122l-340.37,722.61c-13.35,28.35-45.01,43.18-75.35,35.29Z'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: left top;
  mask-position: left top;

  -webkit-mask-size: var(--paginas-mask-w) var(--paginas-mask-h) !important;
  mask-size: var(--paginas-mask-w) var(--paginas-mask-h) !important;
}


/* =========================
   CONTENIDO
========================= */
.hero-paginas__content{
  position: relative;
  z-index: 8;
  width: min(var(--paginas-content-max), 92%);
  padding: var(--paginas-content-pad);
  color: #ffffff;
}

.hero-paginas.mask--white .hero-paginas__content{
  color: #001b2a;
}


/* ==========================================================
   CUÑA INFERIOR (COLOR VARIABLE)
========================================================== */
.hero-paginas__white{
  position: absolute;
  left: var(--paginas-white-x);
  bottom: var(--paginas-white-bottom);
  width: var(--paginas-white-w);
  height: var(--paginas-white-h);
  z-index: 7;
  pointer-events: none;

  /* CAMBIO CLAVE: ahora el color es variable */
  background: var(--paginas-wedge-color);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 439 71.6' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M29.81,11.16L0,71.6h439L51.36.33c-8.8-1.62-17.6,2.8-21.55,10.82Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 439 71.6' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M29.81,11.16L0,71.6h439L51.36.33c-8.8-1.62-17.6,2.8-21.55,10.82Z'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left top;
  mask-position: left top;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


/* ==========================================================
   <= 880px: diseño alternativo
========================================================== */
@media (max-width: 880px){

  .hero-paginas{
    --paginas-hero-max-w: 100%;
    height: 35dvh !important;
    background-image: none !important;
    background-color: var(--paginas-mask-color) !important;
  }

  .hero-paginas__color{
    display: none !important;
  }

  .hero-paginas__white{
    display: block !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0% !important;
    width: 35vw !important;
    max-width: 420px !important;
    min-width: 240px !important;
    height: 5vh !important;
  }

  .hero-paginas__content{
    width: min(680px, 92vw);
    padding: 24px;
  }

  .hero-paginas.mask--white .hero-paginas__content{
    color: #001b2a;
  }
}

@media (max-width: 480px){
  .hero-paginas{
    height: 45dvh !important;
  }

  .hero-paginas__white{
    width: 35vw !important;
    height: 5vh !important;
    bottom: 0% !important;
  }
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   /FINAL HERO PÁGINAS (REUTILIZABLE CON VARIABLES DE COLOR)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
   
   SECCIÓN FINAL — MÁSCARA SVG DE FONDO
   Contenedor Elementor flex, ancho 100%, alto por contenido
   Totalmente aislado de hero-energy y hero-paginas

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.seccion-final{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Variables propias */
  --final-mask-color: #007A4C;
  --final-mask-opacity: 1;

  /* Padding visual compensado */
  --final-mask-pad-x: 1.5%;
  --final-mask-pad-y: 3%; /* mayor para equilibrar la curva inferior */
}


/* Variantes de color */
.seccion-final.mask--green  { --final-mask-color:#007A4C; }
.seccion-final.mask--orange { --final-mask-color:#FF9E18; }
.seccion-final.mask--white  { --final-mask-color:#FFFFFF; }

/* =========================
   MÁSCARA SVG
========================= */
.seccion-final::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 0;
  pointer-events:none;

  background: var(--final-mask-color);
  opacity: var(--final-mask-opacity);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1661 825.56' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,206.79v578.77c0,22.09,17.91,40,40,40h1581c22.09,0,40-17.91,40-40V40c0-23.75-20.58-42.27-44.2-39.78L35.8,167.01C15.45,169.16,0,186.33,0,206.79Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1661 825.56' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,206.79v578.77c0,22.09,17.91,40,40,40h1581c22.09,0,40-17.91,40-40V40c0-23.75-20.58-42.27-44.2-39.78L35.8,167.01C15.45,169.16,0,186.33,0,206.79Z'/%3E%3C/svg%3E");

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;

  -webkit-mask-position:center;
  mask-position:center;

  /* Padding compensado X/Y */
  -webkit-mask-size:
    calc(100% - (var(--final-mask-pad-x) * 2))
    calc(100% - (var(--final-mask-pad-y) * 2));
  mask-size:
    calc(100% - (var(--final-mask-pad-x) * 2))
    calc(100% - (var(--final-mask-pad-y) * 2));
}

/* Contenido por encima */
.seccion-final > *{
  position: relative;
  z-index: 1;
}



/* ==========================================================
   <= 480px: SIN MÁSCARA, SOLO FONDO SÓLIDO
   (respeta mask--green / mask--orange / mask--white)
========================================================== */
@media (max-width: 480px){

  /* El contenedor se convierte en “bloque de color” */
  .seccion-final{
    background-color: var(--final-mask-color) !important;
  }

  /* Apagamos la máscara y con ello desaparece el padding */
  .seccion-final::before{
    display: none !important;
    content: none !important;
  }
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
   
   /FINAL SECCIÓN FINAL — MÁSCARA SVG DE FONDO
   Contenedor Elementor flex, ancho 100%, alto por contenido
   Totalmente aislado de hero-energy y hero-paginas

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   ANIMACIONES
   
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* ===== LISTING GRID ANIMADOS ===== */
/* Contenedor del Listing Grid */
.listing-grid-animado .jet-listing-grid__items {
  --stagger-step: 220ms;
}

/* Estado inicial */
.listing-grid-animado .jet-listing-grid__item {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--item-delay, 0ms);
  will-change: opacity, transform;
}

/* Estado visible */
.listing-grid-animado .jet-listing-grid__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===== EFECTO FLASH ELEMENTO REUTILIZABLE ===== */
.efecto-flash img {
  animation: flash 2s infinite; /* Duración de 2 segundos y repetición infinita */
}

@keyframes flash {
  0%, 100% {
    opacity: 1; /* Imagen completamente visible */
  }
  50% {
    opacity: 0.3; /* Imagen semitransparente */
  }
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   /FINAL ANIMACIONES
   
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   VARIOS
   
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* ===== MENU TOGGLE ALINEACIÓN DERECHA ===== */
.elementor-menu-toggle {
    justify-content: end !important;
}


/* ===== BOTÓN CONTACTO: ALINEAR ICONO + TEXTO ===== */
.boton-contacto .elementor-button .elementor-button-content-wrapper{
  display: inline-flex;
  align-items: center;
  gap: .5em;            /* separación icono-texto (ajusta) */
}

/* Quita el “baseline drama” del SVG */
.boton-contacto .elementor-button .elementor-button-icon{
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.boton-contacto .elementor-button .elementor-button-icon svg{
  display: block;       /* CLAVE: fuera baseline */
  width: 1.6em;         /* escala con el texto (1rem => 1em). Ajusta 1.1–1.4 */
  height: 1.6em;
}

.boton-contacto .elementor-button .elementor-button-icon svg{
  transform: translateY(1px); /* prueba -1, 0, +1 */
}

/* Evita que el texto empuje por line-height */
.boton-contacto .elementor-button .elementor-button-text{
  line-height: 1;
}

.boton-contacto .elementor-button{
  transform: translateY(-2px); /* prueba -1 o -2px */
}


/* ===== FORZAR ANCHO SECCIÓN TRANSICIÓN ENERGÉTICA EN PÁGINA CONOCE ENERPATH <880px >480px ===== */
@media (min-width: 481px) {
    .elementor-37 .elementor-element.elementor-element-7fe9aec {
        --width: 100% !important;
    }
}

@media (min-width: 481px) {
    .elementor-37 .elementor-element.elementor-element-cde36e9 {
        --width: 100% !important;
    }
}


/* ===== FORZAR LISTAS UL ===== */
.interlineado-parrafo-limitado ul {
  margin-top: 0.5em;
  margin-left: -0.5em;
}

@media screen and (max-width: 480px) {
.interlineado-parrafo-limitado ul {
  margin-left: -1em;
}
}


/* ===== ELIMINAR ESPACIO INFERIOR EN PÁRRAFOS ===== */
p {
    margin-block-end: 0 !important;
}


/* ===== AJUSTES DYNAMIC FIELD CUSTOM FIELD OUTPUT TIPO BULLETS ===== */
@media (min-width: 1024px){

  /* solo tus 3 campos */
  .df-inline .jet-listing-dynamic-field.display-inline{
    display: block;
  }

  /* el P es el que debe ser grid, no el inline-wrap */
  .df-inline .jet-listing-dynamic-field__content{
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .35em;
    align-items: start;
    margin: 0;      /* importantísimo: JetEngine mete márgenes al <p> */
    max-width: 100%;
  }

  .df-inline .df-label{
    white-space: nowrap;
    font-weight: 600;
  }

  .df-inline .df-value{
    min-width: 0;
    overflow-wrap: break-word; /* o anywhere si tienes palabras/URLs asesinas */
  }
}


/* ===== TÍTULOS POST PROYECTOS SECCIÓN OTROS PROYECTOS ===== */
.titulo-subrayado {
    text-decoration: underline;
}



/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

   /FINAL VARIOS
   
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> *//* End custom CSS */