/* VyL Mecanizados — estilos del sitio (clon del diseño original Astra + Elementor) */

/* ---------- Iconos (Font Awesome 5 + eicons, servidos localmente) ---------- */
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(../fonts/fa-solid-900.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/fa-regular-400.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/fa-brands-400.woff2) format("woff2")}
@font-face{font-family:"eicons";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/eicons.woff2) format("woff2")}
.fas,.far,.fab,.eicon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}
.fas{font-family:"Font Awesome 5 Free";font-weight:900}
.far{font-family:"Font Awesome 5 Free";font-weight:400}
.fab{font-family:"Font Awesome 5 Brands";font-weight:400}
.eicon{font-family:"eicons";font-weight:400}
.fa-check-double:before{content:"\f560"}
.fa-sun:before{content:"\f185"}
.fa-plus:before{content:"\f067"}
.fa-minus:before{content:"\f068"}
.fa-calendar-check:before{content:"\f274"}
.fa-user-check:before{content:"\f4fc"}
.fa-location-arrow:before{content:"\f124"}
.fa-mail-bulk:before{content:"\f674"}
.fa-whatsapp:before{content:"\f232"}
.fa-envelope:before{content:"\f0e0"}
.fa-facebook-f:before{content:"\f39e"}
.fa-instagram:before{content:"\f16d"}
.fa-linkedin-in:before{content:"\f0e1"}
.eicon-chevron-right:before{content:"\e87d"}
.eicon-chevron-left:before{content:"\e87e"}

/* ---------- Base ---------- */
:root{
  --naranja:#FE6602;
  --oscuro:#1E2A36;
  --texto:#4B4F58;
  --titulo:#3a3a3a;
  --gris:#f1f1f1;
  --celeste:#09aeb8;
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--texto);font-family:"Open Sans",sans-serif;font-size:15px;font-weight:400;line-height:1.85714285714286;overflow-x:hidden}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:var(--naranja);text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-family:"Josefin Sans",sans-serif;font-weight:700;color:var(--titulo)}
h2,h3{line-height:1.3}
h4{line-height:1.2}
h6{line-height:1.25}
p{margin:0 0 1.6em}
ul{margin:0 0 1.5em 3em;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.container{max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;position:relative}
.container.w1200{max-width:1200px}
.col{position:relative;display:flex;flex-direction:column;padding:10px;min-height:1px}
.col-100{width:100%}
.col-50{width:50%}
.col-33{width:33.333%}
.col.middle{justify-content:center}
.col>*+*{margin-top:20px}
.orange{color:var(--naranja)}
.center{text-align:center}
.t35{font-size:35px}

/* ---------- Header ---------- */
.site-header{position:absolute;left:0;right:0;top:0;z-index:99}
.header-bar{max-width:1240px;margin:0 auto;padding:0 20px;min-height:100px;display:flex;align-items:center;justify-content:space-between}
.site-logo{display:block;line-height:0}
.site-logo img{width:88px;height:auto}
.header-btn{display:block;background:var(--naranja);color:#fff;padding:15px 25px;font-size:15px;line-height:1;transition:all .2s linear}
.header-btn:hover{background:var(--celeste);color:#000}
.menu-toggle{display:none;width:41px;height:41px;align-items:center;justify-content:center;background:transparent;border:0;padding:0;color:var(--celeste);cursor:pointer;line-height:0}
.menu-toggle svg{width:24px;height:28px;fill:currentColor}
.menu-toggle .ico-close{display:none;height:24px}
.site-header.menu-open .menu-toggle .ico-open{display:none}
.site-header.menu-open .menu-toggle .ico-close{display:block}
.site-nav{flex:1;display:flex;justify-content:center}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.site-nav a{display:block;padding:0 1em;color:#fff;line-height:100px;text-shadow:0 1px 4px rgba(0,0,0,.65);transition:color .2s linear;white-space:nowrap}
.site-nav a:hover,.site-nav a:focus{color:var(--naranja)}
.site-nav .nav-tel{display:none}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:0}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding:120px 0 60px;background:url(../img/hero.jpg) center/cover no-repeat}
.hero>.container{width:100%}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff 20%,#0A0708 38%);opacity:.41}
.hero .col{padding:0;text-align:center}
.hero h2{color:#fff}
.hero .h-vyl{font-size:60px;margin:-25px}
.hero .h-mec{font-size:35px}
.hero .h-sub{font-family:"Roboto",sans-serif;font-size:20px;font-weight:400;margin-top:4px}

/* ---------- Objetivo / Qué hacemos ---------- */
.objetivo{padding:100px 0 30px}
.objetivo>.container>.col{padding:0}
.card-col{width:50%;display:flex}
.card{flex:1;margin:10px;padding:10px;background:#fff;box-shadow:0 0 45px 0 rgba(225,225,225,.5);display:flex;flex-direction:column;border:0 solid var(--celeste);transition:background .3s,border .3s,box-shadow .3s}
.card:hover{border-bottom-width:4px}
.card.middle{justify-content:center}
.card>*+*{margin-top:20px}
.icon-box{text-align:center}
.objetivo .icon-box{padding:50px}
.icon-box .icon{display:flex;justify-content:center;line-height:1;color:var(--naranja);font-size:56px}
.icon-box .icon i{width:1em;height:1em;display:block}
.objetivo .icon-box .icon{margin-bottom:15px}
.objetivo .icon-box h6{font-size:35px;margin-bottom:5px}
.icon-box p{margin:0}
.que h2{font-size:19px}
ul.icon-list{list-style:none;margin-left:0;margin-bottom:0;padding:0}
.icon-list li{display:flex;align-items:center;text-align:left}
.icon-list li i{font-size:14px;width:1.25em;flex-shrink:0}
.icon-list li span{padding-left:5px}

/* ---------- Misión, Visión y Valores ---------- */
.accordion{text-align:left}
.acc-item{border:1px solid #d5d8dc}
.acc-item+.acc-item{border-top:none}
.acc-title{margin:0;padding:15px 20px;font-weight:700;line-height:1;cursor:pointer;outline:none;font-family:inherit;font-size:15px;color:var(--texto)}
.acc-title .acc-icon{display:inline-block;width:1.5em;float:left;text-align:left}
.acc-title .fa-minus{display:none}
.acc-item.open .acc-title .fa-plus{display:none}
.acc-item.open .acc-title .fa-minus{display:inline-block}
.acc-content{display:none;padding:15px 20px;border-top:1px solid #d5d8dc}
.acc-item.open .acc-content{display:block}

/* ---------- Carruseles ---------- */
/* Cinta de clientes: pasa sola y sin cortes; el logo bajo el mouse se muestra a color */
.marquee{position:relative;overflow:hidden;padding:10px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee var(--dur,40s) linear infinite}
.marquee-item{flex:0 0 auto;padding:0 28px;line-height:0}
.marquee-item img{width:150px;height:150px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .35s ease,opacity .35s ease,transform .35s ease}
.marquee-item:hover img{filter:grayscale(0);opacity:1;transform:scale(1.08)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:767px){.marquee-item{padding:0 16px}.marquee-item img{width:110px;height:110px}}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.marquee-item[aria-hidden]{display:none}}
.carousel{position:relative}
.car-viewport{overflow:hidden}
.car-track{display:flex;align-items:flex-start;will-change:transform}
.car-slide{flex:0 0 auto;text-align:center;line-height:0}
.car-slide img{display:inline-block}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;cursor:pointer;font-size:25px;color:rgba(237,237,237,.9);background:none;border:0;padding:0}
.car-arrow.prev{left:10px}
.car-arrow.next{right:10px}
.car-dots{position:absolute;left:0;right:0;bottom:5px;text-align:center;z-index:2}
.car-dots span{display:inline-block;width:6px;height:6px;margin:0 6px;border-radius:50%;background:#000;opacity:.2;cursor:pointer}
.car-dots span.active{opacity:1}
.carousel.dots-outside{padding-bottom:30px}
.carousel.dots-outside .car-arrow{top:calc(50% - 15px)}
.carousel.full .car-slide img{width:100%}

.divider{padding:2px 0;line-height:0}
.divider span{display:block;border-top:1px solid var(--gris)}

/* ---------- Nos especializamos ---------- */
.especial{overflow:hidden;padding:0 0 100px}
.especial>.container>.col{padding:0}
.esp-left{background:var(--gris);padding:50px !important;justify-content:center;text-align:center}
.image-box{text-align:left;padding-bottom:30px}
.image-box h4{font-size:35px;color:var(--naranja);margin-bottom:10px}
.image-box p{margin:0}
.esp-right>*+*{margin-top:0}
.duo{display:flex;flex-wrap:wrap}
.duo>div{width:50%;padding:45px}
.duo .bg-orange{background:var(--naranja)}
.duo .bg-dark{background:var(--oscuro)}
.duo .icon{font-size:41px;color:#fff}
.duo .bg-orange p{color:var(--gris)}
.duo .bg-dark p{color:#fff}

/* ---------- Trabajos / Metalurgia ---------- */
.works{background:#F8F8F8;padding:70px 0}
.works h2,.works h3,.works h4{font-family:"Poppins",sans-serif}
.works .kicker{font-size:15px;font-weight:600;color:#FEA700}
.works .pre{font-size:30px;font-weight:700;color:#2C2B2B}
.works .big{font-size:50px;font-weight:700;color:#2C2B2B}
.works .desc{font-size:20px;font-weight:500;line-height:1.3;color:#181818;padding:15px 0}
.works .col-car{padding:0 0 0 80px}
.anim{opacity:0}
.anim.in{opacity:1;animation-duration:2s;animation-fill-mode:both}
.anim.left.in{animation-name:fadeInLeft}
.anim.right.in{animation-name:fadeInRight}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
.works{overflow:hidden}

/* ---------- Tira de 3 fotos ---------- */
.strip .container{max-width:none}
.strip .col{padding:0}
.strip img{width:100%;transition:filter 1s}
.strip .col:hover img{filter:brightness(62%)}

/* ---------- Formulario de contacto ---------- */
.formulario{padding:50px 0 40px}
.formulario .col{max-width:640px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.form-grid input[type=text],.form-grid input[type=email],.form-grid textarea{width:100%;border:1px solid #d5d8dc;background:#fff;padding:10px 14px;font:inherit;color:var(--texto);border-radius:0;outline:none;transition:border-color .2s}
.form-grid input:focus,.form-grid textarea:focus{border-color:var(--naranja)}
.form-grid textarea{display:block;min-height:96px;resize:vertical;line-height:1.6}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn{background:var(--naranja);color:#fff;border:0;padding:15px 25px;font:inherit;line-height:1;cursor:pointer;transition:all .2s linear}
.btn:hover{background:var(--celeste);color:#000}
.btn[disabled]{opacity:.6;cursor:default}
.form-msg{margin:0;font-weight:700}
.form-msg.ok{color:#2e7d32}
.form-msg.err{color:#c62828}

/* ---------- Contacto (barra naranja) ---------- */
.contacto{background:var(--naranja);overflow:hidden}
.contacto .container{min-height:200px;align-items:center}
.contacto .col{padding:0 0 0 100px;justify-content:center}
.contacto .spacer{height:10px}
.contacto .icon-box{display:flex;align-items:center;gap:15px;text-align:left}
.contacto .icon{font-size:35px;color:#fff;flex-shrink:0}
.contacto h6{font-size:18px;margin-bottom:3px}
.contacto h6,.contacto h6 a,.contacto p,.contacto p a{color:#fff}
.contacto p a:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.site-footer{background:var(--gris);border-top:1px solid var(--gris);padding:26px 20px;text-align:center}
.site-footer p{margin:0}
.site-footer .social{list-style:none;margin:0 0 14px;padding:0;display:flex;justify-content:center;gap:12px}
.site-footer .social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--oscuro);color:#fff;font-size:17px;transition:background .2s linear}
.site-footer .social a:hover,.site-footer .social a:focus{background:var(--naranja)}
.site-footer .credito{font-size:.88em;margin-top:2px}
.site-footer .credito a{color:var(--texto);font-weight:700}
.site-footer .credito a:hover{color:var(--naranja)}

/* ---------- Botón flotante (Hablemos) ---------- */
.chat{position:fixed;right:25px;bottom:25px;z-index:10001;display:flex;flex-direction:column;align-items:center}
.chat button,.chat a{position:relative;display:block;width:54px;height:54px;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;line-height:0}
.chat svg{width:54px;height:54px;display:block;border-radius:50%;box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2)}
.chat .ch{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;color:#fff;font-size:28px;box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2)}
.chat .ch-wa{background:#49E670;font-size:32px}
.chat .ch-mail{background:#FF485F;font-size:24px}
.chat-channels{display:none;flex-direction:column;gap:8px;margin-bottom:8px}
.chat.open .chat-channels{display:flex}
.chat .chat-close{display:none}
.chat.open .chat-open{display:none}
.chat.open .chat-close{display:block}
.chat [data-tip]:after{content:attr(data-tip);position:absolute;right:64px;top:50%;transform:translateY(-50%);background:#fff;color:#333;font:17px/21px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;padding:5px 15px;border-radius:10px;white-space:nowrap;box-shadow:0 1.93px 6.63px rgba(0,0,0,.26);opacity:0;visibility:hidden;transition:opacity .2s}
.chat [data-tip]:hover:after,.chat:not(.open):not(.clicked) .chat-open:after{opacity:1;visibility:visible}

/* ---------- Tablet (≤1024) ---------- */
@media (max-width:1100px){
  .site-nav a{padding:0 .6em}
}
@media (max-width:1024px){
  .objetivo{padding:60px 20px 50px}
  .objetivo .icon-box{padding:20px}
  .card{padding:0}
  .especial{padding:0 30px}
  .esp-left{padding:20px !important}
  .image-box{padding-bottom:0}
  .duo>div{padding:10px;display:flex;flex-direction:column;justify-content:center}
  .duo .icon-box{padding:10px}
  .duo .icon{font-size:24px}
  .works .col-car{padding:0 0 0 20px}
  .strip{padding:0 30px}
  .contacto{padding:0 20px}
  .contacto .col{padding:0 0 0 50px}
  .contacto .col:first-child{padding:0}
  .formulario{padding:50px 20px 40px}
}

/* ---------- Header móvil (≤921, igual que Astra) ---------- */
@media (max-width:921px){
  .header-btn{display:none}
  .menu-toggle{display:flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:98px;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.12)}
  .site-header.menu-open .site-nav{display:block}
  .site-nav ul{display:block}
  .site-nav li{border-bottom:1px solid #eaeaea}
  .site-nav li:last-child{border-bottom:0}
  .site-nav a{color:var(--texto);line-height:3;padding:0 20px;text-shadow:none}
  .site-nav .nav-tel{display:block}
  .site-nav .nav-tel a{color:var(--naranja);font-weight:700}
  .header-bar{min-height:98px}
  /* Astra reduce la tipografía base al 91.2% en tablet y móvil */
  body{font-size:13.68px}
  .acc-title{font-size:13.68px}
  .contacto h6{font-size:16.416px}
}

/* ---------- Móvil (≤767) ---------- */
@media (max-width:767px){
  .col-50,.col-33,.card-col{width:100%}
  .hero{min-height:0;display:block;background-position:0 0;padding:170px 0 100px}
  .hero .col{padding:0 20px}
  .objetivo{padding:0 0 50px}
  .objetivo .inner{padding:50px 25px 0}
  .objetivo .icon-box{padding:30px}
  .objetivo .icon-box h6{font-size:24px}
  .especial{padding:0 0 50px}
  .esp-left{padding:50px 20px !important}
  .image-box{text-align:center}
  .duo>div{width:100%}
  .duo .icon-box{padding:20px}
  .works .col-text{text-align:center}
  .works .col-car{padding:50px 10px 0}
  .contacto{padding:0 50px 50px}
  .contacto .col{padding:0 !important}
  .contacto .icon-box{display:block;text-align:center}
  .contacto .icon{margin-bottom:15px}
  .site-footer{padding-bottom:95px}
  .acc-title{padding:12px 15px}
  .acc-content{padding:7px 15px}
  .form-grid{grid-template-columns:1fr}
  .formulario{padding:40px 10px 30px}
}