:root{--navy:#06355a;--petrol:#008f91;--steel:#5b6066;--ink:#101820;--paper:#f4f6f7;--white:#fff;--line:#dce2e5;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--white);line-height:1.6}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.container{width:min(calc(100% - 36px),var(--max));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav{min-height:92px;display:flex;align-items:center;gap:32px}.logo{width:280px;max-width:42vw}.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px;font-weight:700}.nav-links a:hover,.nav-links a.active{color:var(--petrol)}.menu-toggle{display:none;margin-left:auto;border:0;background:var(--navy);color:#fff;padding:10px 13px;font-size:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;font-weight:800;border:1px solid transparent;transition:.2s}.btn-primary{background:var(--petrol);color:#fff}.btn-dark{background:var(--navy);color:#fff}.btn-outline{border-color:#fff;color:#fff}.hero{min-height:670px;color:#fff;display:grid;align-items:center;background:linear-gradient(90deg,rgba(4,23,37,.92),rgba(4,23,37,.48)),url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2000&q=85') center/cover}.eyebrow{color:#35d0ca;text-transform:uppercase;letter-spacing:.18em;font-size:.82rem;font-weight:900}.hero h1,.page-hero h1{font-size:clamp(3rem,7vw,6.5rem);line-height:.92;letter-spacing:-.055em;margin:.18em 0}.hero h1 span,.page-hero h1 span{color:#40c9c2}.hero p{max-width:700px;font-size:1.2rem;color:#dfe7ea}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.stats{background:var(--ink);color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}.stat{padding:28px;border-right:1px solid #344049}.stat strong{display:block;color:#36c7c1;font-size:2rem}.section{padding:90px 0}.section-alt{background:var(--paper)}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:38px}.section h2{font-size:clamp(2.1rem,4vw,4rem);line-height:1;margin:0}.section-head p{max-width:560px;color:#556068}.grid{display:grid;gap:22px}.cards-3{grid-template-columns:repeat(3,1fr)}.cards-4{grid-template-columns:repeat(4,1fr)}.card{background:#fff;border:1px solid var(--line);padding:28px}.card-dark{background:var(--navy);color:#fff;border:0}.card .number{color:var(--petrol);font-weight:900;font-size:2rem}.card h3{margin:.35em 0;font-size:1.35rem}.product-list{list-style:none;padding:0;margin:0;columns:2}.product-list li{padding:10px 0;border-bottom:1px solid var(--line)}.product-list li:before{content:'—';color:var(--petrol);margin-right:9px;font-weight:900}.page-hero{min-height:430px;color:#fff;display:grid;align-items:end;padding:70px 0;background:linear-gradient(90deg,rgba(5,29,46,.92),rgba(5,29,46,.4)),var(--hero-image) center/cover}.page-hero p{font-size:1.15rem;max-width:680px}.split{display:grid;grid-template-columns:1.15fr .85fr;gap:55px;align-items:center}.quote{background:var(--navy);color:#fff;padding:38px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field input,.field select,.field textarea{width:100%;padding:14px;border:1px solid #bfc9ce;font:inherit}.field textarea{min-height:140px}.footer{background:#0b161d;color:#d6e0e4;padding:55px 0 25px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:45px}.footer img{width:260px;background:#fff;padding:8px}.footer h3{color:#fff}.footer a{display:block;margin:7px 0}.copyright{border-top:1px solid #33414a;margin-top:35px;padding-top:22px}.whatsapp{position:fixed;right:22px;bottom:22px;background:#25d366;color:#fff;padding:14px 20px;border-radius:999px;font-weight:900;z-index:60;box-shadow:0 12px 30px #0003}.blog-card{padding:0;overflow:hidden}.blog-card img{height:220px;width:100%;object-fit:cover}.blog-card .content{padding:25px}.tag{color:var(--petrol);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}.photo-cards .card{position:relative;isolation:isolate;min-height:390px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:0;color:#fff;background-position:center;background-size:cover;box-shadow:0 18px 45px #0b1b2530;transition:transform .25s ease,box-shadow .25s ease}.photo-cards .card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,18,30,.12) 8%,rgba(3,18,30,.94) 92%)}.photo-cards .card:hover{transform:translateY(-5px);box-shadow:0 25px 55px #0b1b2545}.photo-cards .card .number{color:#3de0d8}.photo-cards .card h3{font-size:1.55rem;margin:.25em 0}.photo-cards .card p{margin:0;color:#edf5f6}.home-products .card:nth-child(1){background-image:url("https://images.unsplash.com/photo-1535813547-99c456a41d4a?auto=format&fit=crop&w=1000&q=85")}.home-products .card:nth-child(2){background-image:url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1000&q=85")}.home-products .card:nth-child(3){background-image:url("https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=1000&q=85")}.service-cards .card:nth-child(1){background-image:url("/assets/images/servicios/corte-laser.png")}.service-cards .card:nth-child(2){background-image:url("/assets/images/servicios/corte-plasma.png")}.service-cards .card:nth-child(3){background-image:url("/assets/images/servicios/oxicorte.png")}.service-cards .card:nth-child(4){background-image:url("/assets/images/servicios/cilindrado.png")}.service-cards .card:nth-child(5){background-image:url("/assets/images/servicios/plegado.png")}.service-cards .card:nth-child(6){background-image:url("/assets/images/servicios/dimensionado.png")}@media(max-width:900px){.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:92px;left:0;right:0;background:#fff;padding:25px;box-shadow:0 15px 30px #0002;flex-direction:column;align-items:flex-start}.nav-links.open{display:flex}.cards-3,.cards-4,.split,.footer-grid{grid-template-columns:1fr 1fr}.hero{min-height:600px}.logo{width:230px}}@media(max-width:620px){.container{width:min(calc(100% - 24px),var(--max))}.nav{min-height:76px}.nav-links{top:76px}.logo{width:190px;max-width:70vw}.hero{min-height:560px}.hero h1,.page-hero h1{font-size:clamp(2.7rem,14vw,4.5rem)}.stats-grid,.cards-3,.cards-4,.split,.footer-grid,.form-grid{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid #344049}.section{padding:65px 0}.section-head{display:block}.product-list{columns:1}.whatsapp{right:12px;bottom:12px;padding:12px 15px}.field.full{grid-column:auto}}

/* Cabecera más amplia y fotografía industrial en Servicios */
@media (min-width:901px){
  .nav>a:first-child{flex:0 1 600px}
  .logo{width:560px;height:132px;max-width:100%;object-fit:cover;object-position:center}
  .nav{min-height:152px}
  .nav{gap:18px}
  .nav-links{gap:22px}
}

/* Portada exclusiva de Inicio: galpón ECOACEROS en operación. */
.hero {
  background-image:
    linear-gradient(90deg, rgba(4, 23, 37, .94) 0%, rgba(4, 23, 37, .70) 42%, rgba(4, 23, 37, .25) 100%),
    url("/assets/images/hero-industrial-ecoaceros-v2.png");
  background-position: center;
  background-size: cover;
}
.services-hero{
  min-height:560px;
  align-items:center;
  background-image:linear-gradient(90deg,rgba(3,20,34,.92) 0%,rgba(3,20,34,.66) 48%,rgba(3,20,34,.28) 100%),var(--hero-image);
  background-position:center;
  background-size:cover;
}
.processing-photo{
  color:#fff;
  background-image:linear-gradient(90deg,rgba(3,20,34,.94),rgba(3,20,34,.64)),url("https://images.unsplash.com/photo-1565043666747-69f6646db940?auto=format&fit=crop&w=2000&q=88");
  background-position:center;
  background-size:cover;
}
.processing-photo .quote{background:rgba(6,53,90,.88);backdrop-filter:blur(3px)}

/* Catálogo visual de materiales */
.product-photo-list{
  columns:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.product-photo-list li{
  min-height:190px;
  display:flex;
  align-items:flex-end;
  padding:24px;
  border:0;
  color:#fff;
  font-size:1.08rem;
  font-weight:800;
  background-position:center;
  background-size:cover;
  box-shadow:0 14px 32px rgba(5,29,46,.18);
}
.product-photo-list li:before{color:#3de0d8}
.product-photo-list li:nth-child(-n+6){background-image:linear-gradient(180deg,rgba(3,18,30,.08),rgba(3,18,30,.90)),url("/assets/images/productos/planchas-acero.png")}
.product-photo-list li:nth-child(n+7):nth-child(-n+9){background-image:linear-gradient(180deg,rgba(3,18,30,.08),rgba(3,18,30,.90)),url("/assets/images/productos/perfiles-vigas.png")}
.product-photo-list li:nth-child(n+10):nth-child(-n+12){background-image:linear-gradient(180deg,rgba(3,18,30,.08),rgba(3,18,30,.90)),url("/assets/images/productos/tubos-perfiles.png")}
.product-photo-list li:nth-child(n+13):nth-child(-n+14){background-image:linear-gradient(180deg,rgba(3,18,30,.08),rgba(3,18,30,.90)),url("/assets/images/productos/barras-pletinas.png")}
.product-photo-list li:nth-child(n+15):nth-child(-n+16){background-image:linear-gradient(180deg,rgba(3,18,30,.08),rgba(3,18,30,.90)),url("/assets/images/productos/mallas-metal-desplegado.png")}
.product-photo-list li:nth-child(n+17):nth-child(-n+18){background-image:linear-gradient(180deg,rgba(3,18,30,.08),rgba(3,18,30,.90)),url("/assets/images/productos/inox-especiales.png")}
@media(max-width:900px){.product-photo-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.product-photo-list{grid-template-columns:1fr}.product-photo-list li{min-height:165px}}

/* Fotografías específicas de Inicio y Cotizaciones. */
.processing-photo{
  background-image:linear-gradient(90deg,rgba(3,20,34,.95),rgba(3,20,34,.62)),url("/assets/images/oxicorte-portada.png");
}
.quote-hero{
  --hero-image:url("/assets/images/cotizaciones-portada.png");
  background-position:center;
}
.page-hero[style*="1581092921461"]{
  --hero-image:url("/assets/images/cotizaciones-portada.png") !important;
}

/* Artículos del blog. */
.blog-card{display:flex;flex-direction:column}
.blog-card .content{display:flex;flex:1;flex-direction:column}
.blog-card .btn{align-self:flex-start;margin-top:auto}
.article-hero{min-height:520px;align-items:end}
.article{width:min(calc(100% - 36px),860px);margin:auto}
.article-meta{color:var(--petrol);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.article h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-top:1.5em}
.article h3{font-size:1.35rem;margin-top:1.5em}
.article p,.article li{font-size:1.08rem;color:#344049}
.article .lead{font-size:1.3rem;color:var(--ink)}
.article-callout{margin:35px 0;padding:28px;border-left:5px solid var(--petrol);background:var(--paper)}
.article-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:45px;padding-top:28px;border-top:1px solid var(--line)}
@media(max-width:620px){.article{width:min(calc(100% - 24px),860px)}.article-hero{min-height:450px}}

/* Fotografías exclusivas para Nosotros y Blog. */
.about-hero{
  min-height:560px;
  align-items:center;
  background-image:linear-gradient(90deg,rgba(3,20,34,.94) 0%,rgba(3,20,34,.68) 42%,rgba(3,20,34,.18) 100%),var(--hero-image);
  background-position:center;
  background-size:cover;
}
.about-story{
  position:relative;
  color:#fff;
  min-height:620px;
  display:grid;
  align-items:center;
  background-image:linear-gradient(90deg,rgba(3,20,34,.96) 0%,rgba(3,20,34,.78) 50%,rgba(3,20,34,.58) 100%),url("/assets/images/nosotros-asesoria-v2.png");
  background-position:center;
  background-size:cover;
}
.about-story h2{max-width:720px}
.about-story p{color:#edf5f6;font-size:1.08rem}
.about-values .card{
  color:#fff;
  background:rgba(6,53,90,.86);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  backdrop-filter:blur(4px);
}
.about-values .card p{margin-bottom:0}
.blog-hero{
  min-height:560px;
  align-items:center;
  background-image:linear-gradient(90deg,rgba(3,20,34,.96) 0%,rgba(3,20,34,.73) 48%,rgba(3,20,34,.22) 100%),var(--hero-image);
  background-position:center;
  background-size:cover;
}
@media(max-width:620px){
  .about-hero,.blog-hero{min-height:500px;background-position:58% center}
  .about-story{min-height:auto;background-position:64% center}
}