/* Estilos exclusivos de Inicio */

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

.clients{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}

.client{height:100px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;place-items:center}

.client img{max-height:65px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:.2s}

.client:hover img{filter:none;opacity:1}

.hero-slider{
  position:relative;
  overflow:hidden;
  background:#08090b;
  height:calc(100vh - 149px);
  min-height:600px;
  max-height:900px;
}

.hero-slide{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  visibility:hidden;
  transform:scale(1.035);
  transition:opacity .9s ease,visibility .9s ease,transform 7s ease;
  background-image:
    linear-gradient(90deg,rgba(4,5,7,.96) 0%,rgba(4,5,7,.84) 28%,rgba(4,5,7,.48) 48%,rgba(4,5,7,.08) 72%,rgba(4,5,7,0) 100%),
    var(--slide-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--slide-position,center center);
}

.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18));
  pointer-events:none;
}

.hero-slide.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

.hero-slide .container.hero-inner{
  width:min(var(--max),calc(100% - 120px));
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,42%) minmax(0,58%);
  align-items:center;
  position:relative;
  z-index:2;
}

.hero-content{
  grid-column:1;
  position:relative;
  top:-30px;
  width:100%;
  max-width:620px;
  padding:0;
  margin:0;
  color:#fff;
  opacity:0;
  transform:translateX(-28px);
  transition:transform .75s ease .18s,opacity .75s ease .18s;
}

.hero-slide.active .hero-content{
  opacity:1;
  transform:translateX(0);
}

.hero-content .eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  color:#ef1c24;
  font-size:.78rem;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-content .eyebrow::before{
  content:"";
  width:36px;
  height:3px;
  background:#ef1c24;
}

.hero-slide h1,
.hero-slide h2{
  max-width:610px;
  margin:0 0 16px;
  font-size:clamp(2.6rem,3.55vw,3.85rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.hero-slide h1 span,
.hero-slide h2 span{
  display:block;
  color:#e31b23;
}

.hero-slide p{
  max-width:570px;
  margin:0 0 22px;
  color:#f0f1f3;
  font-size:.96rem;
  line-height:1.5;
}

.hero-content .actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin:0;
}

.hero-content .btn{
  min-height:48px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  border-radius:6px;
  font-size:.93rem;
}

.hero-content .btn b{
  font-size:1.2rem;
  font-weight:400;
  transition:transform .2s;
}

.hero-content .btn:hover b{transform:translateX(4px)}

.hero-content .btn-outline{
  border:1px solid rgba(255,255,255,.85);
  background:rgba(6,7,9,.18);
  backdrop-filter:blur(5px);
}

.slider-arrow{
  position:absolute;
  z-index:8;
  top:50%;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(0,0,0,.26);
  color:#fff;
  font-size:1.45rem;
  cursor:pointer;
  transform:translateY(-50%);
  transition:.25s;
  backdrop-filter:blur(4px);
}

.slider-arrow:hover{
  background:#d71920;
  border-color:#d71920;
}

.slider-prev{left:22px}

.slider-next{right:22px}

.slider-bars{
  position:absolute;
  z-index:8;
  left:max(60px,calc((100vw - var(--max))/2));
  bottom:24px;
  display:flex;
  gap:16px;
}

.slider-dot{
  width:45px;
  height:3px;
  padding:0;
  border:0;
  border-radius:0;
  background:rgba(255,255,255,.85);
  cursor:pointer;
  transition:.3s;
}

.slider-dot.active{
  width:64px;
  background:#e31b23;
}

.solutions-section{position:relative;overflow:hidden;background:#f8f9fb;padding:72px 0 76px}

.solutions-section::before,
.solutions-section::after{content:"";position:absolute;width:170px;height:170px;opacity:.35;pointer-events:none;background-image:radial-gradient(#cfd3da 1.5px,transparent 1.5px);background-size:12px 12px}

.solutions-section::before{left:-30px;top:45px}

.solutions-section::after{right:-35px;top:120px}

.solutions-heading{margin-bottom:36px;max-width:830px;position:relative;z-index:1}

.solutions-heading h2{font-size:clamp(2.3rem,4.4vw,3.55rem);line-height:1.02;margin:12px 0 18px;letter-spacing:-.035em}

.solutions-heading h2 span{color:var(--red)}

.solutions-heading p{font-size:1.02rem;line-height:1.5;margin:0}

.solutions-grid{position:relative;z-index:1;gap:20px}

.solution-card{border-radius:14px;border:1px solid #e2e5ea;box-shadow:0 12px 34px rgba(27,32,40,.065);display:flex;flex-direction:column;min-height:470px;background:rgba(255,255,255,.96)}

.solution-card:hover{transform:translateY(-7px);box-shadow:0 20px 46px rgba(27,32,40,.12)}

.solution-card .product-media{height:245px;background:transparent;padding:24px 24px 10px;position:relative}

.solution-card .product-media::after{content:"";position:absolute;left:22%;right:22%;bottom:17px;height:16px;border-radius:50%;background:rgba(25,29,35,.12);filter:blur(10px);z-index:0}

.solution-card .product-media img{max-height:220px;position:relative;z-index:1;transition:transform .3s ease}

.solution-card:hover .product-media img{transform:scale(1.035)}

.solution-card .product-body{padding:12px 24px 24px;display:flex;flex-direction:column;flex:1}

.solution-card:hover .card-accent{width:58px}

.solution-card .product-body h3{text-transform:uppercase;letter-spacing:.015em;font-size:1.08rem;line-height:1.2;margin:0 0 12px}

.solution-card .product-body p{font-size:.93rem;line-height:1.55;margin:0 0 18px;min-height:72px}

.solution-card .text-link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-size:.96rem}

.solution-card .text-link span{font-size:1.2rem;transition:transform .25s ease}

.solution-card .text-link:hover span{transform:translateX(5px)}

.solutions-benefits{position:relative;z-index:1;margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #e1e4e9;border-top:2px solid var(--red);border-radius:14px;box-shadow:0 12px 32px rgba(27,32,40,.06);padding:24px 18px}

.benefit-item{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;padding:0 20px;border-right:1px solid #dde1e7}

.benefit-item:last-child{border-right:0}

.benefit-icon{width:50px;height:50px;color:var(--red);display:grid;place-items:center}

.benefit-icon svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

.benefit-item strong{display:block;text-transform:uppercase;font-size:.82rem;line-height:1.2;margin-bottom:4px}

.benefit-item p{font-size:.79rem;color:var(--muted);line-height:1.45;margin:0}

.about-dark-section{position:relative;overflow:hidden;background:#11151a;color:#fff;padding:82px 0 88px}

.about-dark-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 35%,rgba(226,20,29,.10),transparent 28%),linear-gradient(90deg,rgba(17,21,26,.98),rgba(17,21,26,.91));}

.about-dark-bg::before{content:"";position:absolute;inset:0;background:url("../img/slider/planta-transformadores.png") right center/56% auto no-repeat;opacity:.055;filter:grayscale(1)}

.about-dark-bg::after{content:"";position:absolute;left:-40px;bottom:35px;width:165px;height:230px;background-image:radial-gradient(rgba(226,20,29,.62) 1.5px,transparent 1.5px);background-size:13px 13px;opacity:.52}

.about-dark-grid{position:relative;z-index:1;display:grid;grid-template-columns:.98fr 1.02fr;gap:62px;align-items:center}

.about-product-panel{position:relative;padding:18px 0 18px 20px}

.about-product-panel::before{content:"";position:absolute;inset:0 9% 0 0;border:1px solid rgba(226,20,29,.75);clip-path:polygon(11% 0,100% 0,100% 100%,11% 100%,0 83%,0 17%);transform:translate(-18px,0);opacity:.65}

/* Panel visual de la sección Nosotros */
.about-product-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:1.62/1;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:#080b0f;
  border:1px solid rgba(226,20,29,.85);
  box-shadow:0 22px 48px rgba(0,0,0,.30);
}

.about-product-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center;
  filter:none;
  opacity:1;
  transform:none;
  -webkit-mask-image:none;
  mask-image:none;
}

.about-dark-content .eyebrow{color:var(--red)}

.about-dark-content h2{font-size:clamp(2.45rem,4.25vw,4.1rem);line-height:1.04;letter-spacing:-.045em;margin:18px 0 30px;max-width:690px}

.about-dark-content h2 span{color:var(--red)}

.about-intro{max-width:710px;color:#d3d7dc;font-size:1rem;line-height:1.72;margin:0 0 26px}

.about-feature-list{display:grid;gap:10px;margin:0 0 22px}

.about-feature{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:16px;
  align-items:center;
  padding:13px 16px;
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid var(--red);
  border-radius:10px;
  transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;
}

.about-feature:hover{
  transform:translateY(-2px);
  border-color:rgba(226,20,29,.95);
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

.feature-icon{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(226,20,29,.14)}

.feature-icon svg,
.stat-icon svg{
  width:22px;
  height:22px;
  display:block;
  margin:0;
  transform:none!important;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.about-feature p{margin:0;color:#e7e9ec;line-height:1.45}

.about-feature strong{color:#fff}

.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}

.about-stat{
  min-height:126px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:18px 15px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(0,0,0,.12);
}

.stat-icon{
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--red);
  border:1px solid rgba(226,20,29,.55);
  line-height:0;
}

.about-stat strong{display:block;color:var(--red);font-size:1.8rem;line-height:1;margin-bottom:8px}

.about-stat > div > span{
  display:block;
  color:#eef0f2;
  line-height:1.35;
  font-size:.92rem;
}


/* =========================================================
   HOME — HERO OPTIMIZADO PARA IPHONE / MÓVIL
   Usa los selectores reales del slider.
   ========================================================= */
@media (max-width:640px){

  .hero-slider{
    height:calc(100svh - 112px);
    min-height:680px;
    max-height:none;
  }

  .hero-slide{
    padding:0;
    background-image:
      linear-gradient(
        180deg,
        rgba(4,5,7,.48) 0%,
        rgba(4,5,7,.66) 30%,
        rgba(4,5,7,.90) 68%,
        rgba(4,5,7,.98) 100%
      ),
      var(--slide-image);
    background-size:cover;
    background-position:var(--slide-mobile-position,var(--slide-position,center center));
  }

  .hero-slide .container.hero-inner{
    width:calc(100% - 40px);
    height:100%;
    display:flex;
    align-items:flex-end;
    margin:0 auto;
    padding:0 0 108px;
  }

  .hero-content{
    position:relative;
    top:0;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }

  .hero-content .eyebrow{
    gap:10px;
    margin-bottom:14px;
    font-size:.72rem;
    line-height:1.25;
    letter-spacing:.075em;
  }

  .hero-content .eyebrow::before{
    width:28px;
    height:3px;
  }

  .hero-slide h1,
  .hero-slide h2{
    max-width:100%;
    margin:0 0 18px;
    font-size:clamp(2.35rem,10.2vw,3rem);
    line-height:1;
    letter-spacing:-.045em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  .hero-slide h1 span,
  .hero-slide h2 span{
    display:inline;
  }

  .hero-slide p{
    max-width:100%;
    margin:0 0 24px;
    font-size:.94rem;
    line-height:1.48;
  }

  .hero-content .actions{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .hero-content .btn{
    width:100%;
    min-height:54px;
    padding:0 18px;
    justify-content:space-between;
    font-size:.92rem;
  }

  .slider-arrow{
    display:none;
  }

  .slider-bars{
    left:50%;
    bottom:34px;
    gap:12px;
    transform:translateX(-50%);
  }

  .slider-dot{
    width:42px;
    height:3px;
  }

  .slider-dot.active{
    width:58px;
  }

  .whatsapp{
    right:16px;
    bottom:78px;
    width:54px;
    height:54px;
  }

  .whatsapp > svg{
    width:32px !important;
    height:32px !important;
  }

  /* Ajustes individuales por longitud del título */
  .hero-slide:nth-child(1) h1,
  .hero-slide:nth-child(1) h2{
    font-size:clamp(2.2rem,9.4vw,2.8rem);
  }

  .hero-slide:nth-child(2) h1,
  .hero-slide:nth-child(2) h2{
    font-size:clamp(2.25rem,9.7vw,2.9rem);
  }

  .hero-slide:nth-child(3) h1,
  .hero-slide:nth-child(3) h2{
    font-size:clamp(2.25rem,9.7vw,2.9rem);
  }

  /* Encuadre móvil de cada fondo */
  .hero-slide:nth-child(1){
    --slide-mobile-position:58% center;
  }

  .hero-slide:nth-child(2){
    --slide-mobile-position:62% center;
  }

  .hero-slide:nth-child(3){
    --slide-mobile-position:56% center;
  }
}

@media (max-width:390px){
  .hero-slider{
    min-height:650px;
  }

  .hero-slide .container.hero-inner{
    width:calc(100% - 32px);
    padding-bottom:102px;
  }

  .hero-slide h1,
  .hero-slide h2{
    font-size:clamp(2.05rem,10vw,2.55rem);
  }

  .hero-slide p{
    font-size:.9rem;
  }

  .hero-content .btn{
    min-height:52px;
  }
}