/* =========================================================================
   Genesal Energy — Landing SEM «Grupos electrógenos industriales»
   Réplica en HTML/CSS/JS de https://genesalenergy.com/grupos-electrogenos-industriales
   ========================================================================= */

/* ------------------------------ Tokens ---------------------------------- */
:root{
  --rojo:            #b8012d;
  --rojo-hover:      #93042d;
  --texto-oscuro:    #222222;
  --texto-medio:     #434343;
  --texto-cuerpo:    #626262;
  --texto-gris:      #666666;
  --gris-footer:     #9f9f9f;
  --negro-footer:    #151515;
  --gris-socket:     #707070;
  --bg-contacto:     #fafcf8;
  --borde-input:     #e1e1e1;
  --bg-input:        #f8f8f8;
  --placeholder:     #919191;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --header-h:        93px;   /* 40px topbar + 53px barra logo */
  --main-offset:     81px;
  --container-max:   1408px;
  --container-pad:   50px;
}

/* ------------------------------ Reset ----------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:13px;
  line-height:1.65;
  color:var(--texto-gris);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;border:0;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6,p{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

/* ------------------------------ Layout ---------------------------------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
}
/* Secciones con contenido limitado a 1084px (como .mil-ochenta-y-cuatro) */
.container--1084{max-width:1184px;}
/* Bloque de iconos: sangrado izquierdo mayor, como en el original */
@media (min-width:990px){
  .container--wide-left{padding:0 2% 0 8%;}
}

.content{width:100%;}

.hr{display:block;width:100%;}
.hr--20{height:20px;}
.hr--40{height:40px;}
.hr--70{height:70px;}

.rojo{color:var(--rojo);}

/* ------------------------------ Tipografía ------------------------------ */
.ge-subtitulo-grande{
  font-size:31px;
  line-height:38px;
  font-weight:500;
  color:var(--texto-oscuro);
  max-width:524px;
  margin:0 0 24px;
}
h3.ge-subtitulo-grande::before{
  content:"";
  display:block;
  width:22px;
  height:4px;
  background:var(--rojo);
  margin:0 0 24px;
}
.ge-subtitulo-mediano-inline{
  font-size:18px;
  line-height:23px;
  font-weight:500;
  color:var(--texto-oscuro);
  margin:33px 0 0;
}
.ge-subtitulo-mediano-inline::before{
  content:"";
  display:block;
  width:12px;
  height:2px;
  background:var(--rojo);
  margin:0 0 12px;
}
.ge-titulo-pequeno{
  font-size:13px;
  line-height:21px;
  font-weight:500;
  text-transform:uppercase;
  color:var(--rojo);
  margin:0 0 12px;
}
.ge-subtitulo-pequeno{
  font-size:18px;
  line-height:26px;
  font-weight:500;
  color:var(--texto-oscuro);
  margin:0 0 48px;
}
.ge-subtitulo-pequeno strong{font-weight:700;}

.section p:not([class]){
  font-size:16px;
  line-height:23px;
  color:var(--texto-cuerpo);
  max-width:636px;
  margin:24px 0 0;
}
.cols-2 ul li{
  font-size:16px;
  line-height:23px;
  color:var(--texto-cuerpo);
  max-width:636px;
  margin:6px 0;
  padding:3px 0 3px 14px;
  position:relative;
}
.cols-2 ul li::before{
  content:"•";
  position:absolute;
  left:0;
  top:3px;
  color:var(--texto-cuerpo);
}

/* ------------------------------ Botón ----------------------------------- */
.buttonrow{display:block;}
.btn{
  display:inline-block;
  margin:16px 24px 24px 0;
  padding:16px 24px 15px;
  font-size:12px;
  font-weight:500;
  line-height:12px;
  color:#fff;
  background:var(--rojo);
  border:2px solid #b7012b;
  border-radius:3px;
  transition:background-color .3s ease, border-color .3s ease;
}
.btn:hover{background:var(--rojo-hover);border-color:var(--rojo-hover);}

/* ------------------------------ Header ---------------------------------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  z-index:501;
}
.site-header__bg{
  position:absolute;
  inset:0 0 1px 0;
  background:#fff;
}
.site-header__topbar{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:40px;
  background:var(--rojo);
}
.site-header__inner{
  position:relative;
  height:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
}
.site-logo{
  position:absolute;
  top:-1px;
  left:var(--container-pad);
  width:320px;
  height:94px;
  display:block;
  z-index:2;
}
.site-logo img{width:320px;height:94px;}

/* ------------------------------ Main ------------------------------------ */
#main{padding-top:var(--main-offset);}

/* ------------------------------ Hero ------------------------------------ */
.hero{
  position:relative;
  min-height:calc(100vh - 94px);
  display:flex;
  background-color:#e3e3e3;
  background-image:url("../img/hero.webp");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.hero .container{display:flex;}
.hero__inner{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:calc(100% - 112px);
  max-width:1440px;
  margin:0 56px;
  padding:80px 0;
  min-height:calc(100vh - 94px);
}
.hero h1{
  font-size:12px;
  line-height:16px;
  font-weight:400;
  letter-spacing:1px;
  color:var(--texto-medio);
  margin:0 0 8px;
}
.hero h2{
  font-size:46px;
  line-height:48px;
  font-weight:500;
  letter-spacing:.01px;
  color:var(--texto-oscuro);
  max-width:484px;
  margin:0 0 16px;
}
.hero__top p{
  font-size:28px;
  line-height:36px;
  font-weight:500;
  letter-spacing:.01px;
  color:var(--texto-oscuro);
  max-width:600px;
  margin:0;
}
.hero__top p br{display:none;}
.hero__bottom{display:block;margin:0;}
.hero__bottom .somos{
  font-size:19px;
  line-height:20px;
  font-weight:400;
  color:var(--texto-oscuro);
  max-width:477px;
  margin:0 0 4px;
}
.hero__bottom .btn{margin:16px 0 0;}

/* Animaciones de entrada */
.fade-in-one,.fade-in-two,.fade-in-three{opacity:0;}
.in-view .fade-in-one{animation:geFadeIn .6s .1s forwards;}
.in-view .fade-in-two{animation:geFadeIn .6s .4s forwards;}
.in-view .fade-in-three{animation:geFadeIn .6s .7s forwards;}
@keyframes geFadeIn{
  0%{opacity:0;transform:translate3d(0,30px,0);}
  100%{opacity:1;transform:translate3d(0,0,0);}
}
@media (prefers-reduced-motion:reduce){
  .fade-in-one,.fade-in-two,.fade-in-three{opacity:1;animation:none !important;}
}

/* ------------------------------ Secciones ------------------------------- */
.section{background:#fff;}
.section--intro .content{padding:50px 0;}
.section--iconos .content{padding:20px 0 56px;}
.section--cta .content{padding:0 0 13px;}
.section--gama .content{padding:108px 0;}
.section--medida .content{padding:0;}
.section--pura-energia .content{padding:50px 0;}
.section--contacto{background:var(--bg-contacto);}
.section--contacto .ge-subtitulo-grande{margin-bottom:12px;}
.section--contacto .content{padding:130px 0;}

/* Iconos */
.iconos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
}
.icono{margin:0;}
.iconos .icono__img{margin:0;height:72px;display:flex;align-items:flex-start;}
.iconos .icono__img img{display:block;}
.icono--empty{display:block;}

/* Imagen a ancho completo */
.image-container{margin:0 0 10px;text-align:center;}
.image-container img{width:100%;height:auto;}
.image-container--left{text-align:left;}
.image-container--left img{width:auto;max-width:100%;}
.section--gama .image-container{margin-top:0;}

/* ------------------------------ Slider ---------------------------------- */
.ge-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:12px 0 32px;
  background:#fff;
}
.ge-slider__controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  height:21px;
  margin:0 auto 17px;
  max-width:65.15vw;
}
.ge-slider__counter{
  font-size:16px;
  line-height:21px;
  color:var(--texto-cuerpo);
  white-space:nowrap;
}
.ge-slider__counter span{font-weight:500;}
.ge-slider__arrow{
  width:42px;
  height:13px;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  transition:opacity .3s ease;
}
.ge-slider__arrow:hover{opacity:.55;}
.ge-slider__arrow--prev{background-image:url("../img/arrow-prev-red-slide.png");}
.ge-slider__arrow--next{background-image:url("../img/arrow-next-red-slide.png");}
.ge-slider__viewport{width:100%;overflow:hidden;}
.ge-slider__track{
  display:flex;
  gap:20px;
  will-change:transform;
  transition:transform .3s ease;
}
.ge-slide{
  flex:0 0 65.15vw;
  width:65.15vw;
}
.ge-slide img{
  width:100%;
  height:auto;
  display:block;
}
@media (min-width:1408px){
  .ge-slider__controls{max-width:1084px;}
  .ge-slide{flex-basis:1084px;width:1084px;}
}

/* ------------------------------ Vídeo ----------------------------------- */
.video-wrap{margin:10px auto;max-width:none;padding:0;}
.video-link{display:block;position:relative;}
.video-link img{width:100%;height:auto;padding:10px 0;}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(11,11,11,.9);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.lightbox[hidden]{display:none;}
.lightbox__inner{width:100%;max-width:1084px;}
.lightbox video{width:100%;height:auto;display:block;background:#000;}
.lightbox__close{
  position:absolute;
  top:14px;right:24px;
  font-size:40px;
  line-height:1;
  color:#fff;
}

/* ------------------------------ Dos columnas ---------------------------- */
.cols-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:6%;
  margin:36px 0;
}
.cols-2 .col > .ge-subtitulo-grande{max-width:509px;}
.cols-2 .col p,.cols-2 .col ul li{max-width:509px;}

/* ------------------------------ Formulario Mautic ----------------------- */
.mautic-form-landing-sem-2023{width:102%;margin-left:-1%;}
.mautic-form-landing-sem-2023 .mauticform_wrapper{max-width:100%;margin:10px auto;}
.mautic-form-landing-sem-2023 .mauticform-row{width:48%;margin:0 1%;float:left;}
.mautic-form-landing-sem-2023 .mauticform-row.mauticform-field-textarea,
.mautic-form-landing-sem-2023 .mauticform-checkboxgrp-row,
.mautic-form-landing-sem-2023 .mauticform-freetext,
.mautic-form-landing-sem-2023 .mauticform-button-wrapper{
  clear:both;float:none;width:98%;
}
.mautic-form-landing-sem-2023 .mauticform-label{display:none;}
.mautic-form-landing-sem-2023 input[type="text"],
.mautic-form-landing-sem-2023 input[type="email"],
.mautic-form-landing-sem-2023 input[type="tel"],
.mautic-form-landing-sem-2023 select,
.mautic-form-landing-sem-2023 textarea{
  width:100%;
  padding:14px 16px;
  margin:0 0 20px;
  font-family:var(--font);
  font-size:13px;
  color:var(--placeholder);
  background:var(--bg-input);
  border:1px solid var(--borde-input);
  border-radius:0;
  box-sizing:border-box;
}
.mautic-form-landing-sem-2023 select{border-radius:2px;}
.mautic-form-landing-sem-2023 textarea{resize:none;min-height:69px;}
.mautic-form-landing-sem-2023 ::placeholder{color:var(--placeholder);opacity:1;}
.mautic-form-landing-sem-2023 .mauticform-checkboxgrp-label,
.mautic-form-landing-sem-2023 .mauticform-freetext p{
  font-size:12px;
  line-height:16px;
  color:var(--texto-medio);
}
.mautic-form-landing-sem-2023 a{color:var(--rojo);}
.mautic-form-landing-sem-2023 button,
.mautic-form-landing-sem-2023 input[type="submit"]{
  display:inline-block;
  margin:24px 0;
  padding:16px 24px 15px;
  font-size:13px;
  font-weight:500;
  line-height:13px;
  color:#fff;
  background:var(--rojo);
  border:0;
  border-radius:4px;
  cursor:pointer;
  transition:background-color .3s ease;
}
.mautic-form-landing-sem-2023 button:hover,
.mautic-form-landing-sem-2023 input[type="submit"]:hover{background:var(--rojo-hover);}
.mautic-form-landing-sem-2023::after{content:"";display:table;clear:both;}

/* ------------------------------ Footer ---------------------------------- */
.site-footer{background:var(--negro-footer);color:#fff;}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  column-gap:6%;
  padding:36px 0;
  align-items:start;
}
.footer-col{padding:30px 0;}
.site-footer h4{
  font-size:14px;
  line-height:32px;
  font-weight:500;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 4px;
}
.footer-menu li{margin:0;}
.footer-menu a{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  line-height:30px;
  text-transform:uppercase;
  color:var(--gris-footer);
  transition:color .3s ease;
}
.footer-menu a:hover{color:#fff;}
.footer-menu a.is-green{color:#55914d;}
.footer-menu a.is-white{color:#fff;}
.site-footer hr{
  height:1px;
  border:0;
  border-top:1px solid transparent;
  margin:12px 0;
}
.site-footer p{
  font-size:12px;
  line-height:18px;
  color:var(--gris-footer);
  margin:24px 0;
}
.site-footer p span{font-weight:600;color:#fff;}
.footer-img{display:inline-block;}
.footer-ue img{background:#fff;}
.footer-certs{display:grid;grid-template-columns:repeat(4,1fr);max-width:180px;}
.footer-certs img{width:100%;height:auto;}
.footer-col--last .footer-img img{max-width:127px;}

/* Socket */
.site-socket{background:var(--negro-footer);}
.site-socket .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:15px;
  font-size:11px;
  text-transform:uppercase;
  color:var(--gris-socket);
}
.socket-menu ul{display:flex;gap:24px;}
.site-socket a{color:var(--gris-socket);transition:color .3s ease;}
.site-socket a:hover{color:#fff;}
.site-socket .copyright{order:2;}
.socket-menu{order:1;}

/* =========================================================================
   Responsive
   ========================================================================= */

/* --- Tablet: 768 – 989 --- */
@media (max-width:989px){
  .cols-2{column-gap:6%;}
}

/* --- Móvil: ≤ 767 --- */
@media (max-width:767px){
  :root{
    --header-h:81px;
    --container-pad:7.5%;
  }

  /* Header */
  .site-header{height:81px;background:var(--rojo);}
  .site-header__bg{display:none;}
  .site-header__topbar{height:81px;}
  .site-header__inner{padding:0;}
  .site-logo{left:0;top:0;width:300px;height:80px;}
  .site-logo img{width:300px;height:80px;object-fit:contain;object-position:left center;}

  #main{padding-top:81px;}

  .container{padding:0 7.5%;}
  .container--1084{max-width:none;padding:0 7.5%;}

  /* Hero */
  .hero{
    align-items:flex-start;
    min-height:100vh;
    background-position:center -64px;
    background-color:#f7f7f7;
  }
  .hero .container{align-items:flex-start;}
  .hero__inner{
    width:100%;
    margin:0;
    padding:32px 0 0;
    min-height:calc(100vh - 94px);
  }
  .hero h2{font-size:36px;line-height:36px;max-width:343px;}
  .hero__top p{font-size:24px;line-height:24px;max-width:216px;}
  .hero__top p br{display:inline;}
  .hero__bottom{margin:24px 0 0;}
  .hero__bottom .somos{font-size:13px;line-height:18px;}
  .hero__bottom .btn{transform:scale(.8);transform-origin:left top;margin-top:8px;}

  /* Tipografía */
  .ge-subtitulo-grande{font-size:26px;line-height:32px;}
  .section p:not([class]),
  .cols-2 ul li{font-size:15px;line-height:21px;}
  .btn{margin:36px 0 0;}
  .hero__bottom .btn{margin-top:8px;}

  /* Secciones */
  .section--iconos .content{padding:20px 0;}
  .section--contacto .content{padding:72px 0;}
  .section--medida .hr--70{height:20px;}

  .iconos{grid-template-columns:1fr;gap:20px;}
  .icono--empty{display:none;}

  .cols-2{grid-template-columns:1fr;row-gap:20px;margin:24px 0;}
  .image-container--left img{width:100%;}

  /* Slider */
  .ge-slider{padding:12px 0 0;}
  .ge-slider__controls{max-width:calc(100vw - 20px);}
  .ge-slider__track{gap:0;}
  .ge-slide{flex:0 0 calc(100vw - 20px);width:calc(100vw - 20px);}

  /* Formulario */
  .mautic-form-landing-sem-2023{width:100%;margin-left:0;}
  .mautic-form-landing-sem-2023 .mauticform-row{width:100%;margin:0;float:none;}

  /* Footer */
  .footer-cols{grid-template-columns:1fr;row-gap:20px;padding:0;}
  .site-socket .container{display:block;padding-bottom:15px;}
  .site-socket .copyright{float:right;}
  .socket-menu ul{flex-wrap:wrap;gap:0 10px;}
  .socket-menu a{display:inline-block;line-height:13px;}

  .lightbox{padding:16px;}
}