/* =========================================================
   VINIGAS - ESTILOS PRINCIPALES
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;padding:0;background:#fff;color:#222;font-family:Arial,Helvetica,sans-serif;line-height:1.6;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
:root{--color-primary:#f47b20;--color-secondary:#ffffff;--color-text:#222222;--color-text-light:#666666;--color-background:#ffffff;--color-background-light:#f5f5f5;--container-width:1280px;}
.container{width:min(92%,var(--container-width));margin-inline:auto;}
/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:relative;z-index:1000;width:100%;background:#fff;border-bottom:1px solid #eee;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.header-container{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:40px;}
/* LOGO */
.site-logo{flex-shrink:0;}
.site-logo a{display:block;}
.site-logo img{display:block;width:auto;height:42px;max-width:220px;object-fit:contain;}
/* =========================================================
   NAVEGACIÓN PRINCIPAL
   ========================================================= */
.main-navigation{margin-left:auto;height:100%;}
.main-menu{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none;}
.main-menu li{position:relative;margin:0;padding:0;list-style:none;}
.main-menu li a{position:relative;display:flex;align-items:center;padding:28px 16px;color:#333;font-size:14px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.4px;text-decoration:none;transition:color .25s ease;}
.main-menu li a:hover{color:var(--color-primary);}
.main-menu>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:15px;height:3px;border-radius:3px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .25s ease;}
.main-menu>li>a:hover::after{transform:scaleX(1);}
.main-menu>.current-menu-item>a,.main-menu>.current_page_item>a,.main-menu>.current-menu-ancestor>a{color:var(--color-primary);}
.main-menu>.current-menu-item>a::after,.main-menu>.current_page_item>a::after,.main-menu>.current-menu-ancestor>a::after{transform:scaleX(1);}
/* =========================================================
   BOTÓN MENÚ MÓVIL
   ========================================================= */
.menu-toggle{display:none;width:42px;height:42px;padding:8px;border:0;background:transparent;cursor:pointer;}
.menu-toggle span{display:block;width:100%;height:2px;margin:6px 0;background:#333;border-radius:2px;transition:transform .3s ease,opacity .3s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
/* =========================================================
   HERO SLIDER
   ========================================================= */
.hero-slider{position:relative;width:100%;overflow:hidden;background:#eee;}
.hero-slides{position:relative;width:100%;}
.hero-slide{display:none;width:100%;margin:0;padding:0;}
.hero-slide.is-active{display:block;animation:heroFade .7s ease;}
.hero-slide img{display:block;width:100%;height:auto;max-width:none;object-fit:cover;}
@keyframes heroFade{from{opacity:0;}to{opacity:1;}}
/* FLECHAS HERO */
.hero-arrow{position:absolute;z-index:20;top:50%;width:46px;height:56px;padding:0;border:0;background:rgba(0,0,0,.25);color:#fff;font-size:28px;line-height:1;cursor:pointer;transform:translateY(-50%);transition:background .25s ease;}
.hero-arrow:hover{background:rgba(0,0,0,.55);}
.hero-arrow-prev{left:0;}
.hero-arrow-next{right:0;}
/* INDICADORES HERO */
.hero-dots{position:absolute;z-index:20;left:50%;bottom:18px;display:flex;gap:9px;transform:translateX(-50%);}
.hero-dot{width:11px;height:11px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;cursor:pointer;transition:background .25s ease,transform .25s ease;}
.hero-dot.is-active{background:#fff;transform:scale(1.2);}
/* =========================================================
   REDES SOCIALES HEADER
   ========================================================= */
.header-social{display:flex;align-items:center;gap:7px;margin-left:12px;}
.header-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #e8e8e8;border-radius:50%;background:#fff;color:#555;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;}
.header-social a svg{width:16px;height:16px;fill:currentColor;}
.header-social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-2px);}

/* =========================================================
   RESPONSIVE TABLET / MÓVIL
   ========================================================= */
@media(max-width:900px){
.header-container{min-height:64px;}
.site-logo img{height:36px;max-width:190px;}
.menu-toggle{display:block;flex-shrink:0;}
.main-navigation{position:absolute;top:100%;left:0;width:100%;height:auto;max-height:0;margin:0;overflow:hidden;background:#fff;border-top:1px solid #eee;box-shadow:0 8px 15px rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:max-height .35s ease,opacity .25s ease,visibility .25s ease;}
.main-navigation.is-open{max-height:500px;opacity:1;visibility:visible;}
.main-menu{display:block;width:min(92%,var(--container-width));margin:0 auto;padding:10px 0 20px;}
.main-menu li{width:100%;border-bottom:1px solid #eee;}
.main-menu li:last-child{border-bottom:0;}
.main-menu li a{display:block;width:100%;padding:16px 5px;color:#333;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.main-menu li a:hover{color:var(--color-primary);}
.main-menu>li>a::after{display:none;}
.main-menu>.current-menu-item>a,.main-menu>.current_page_item>a,.main-menu>.current-menu-ancestor>a{color:var(--color-primary);}
.header-social{display:none;}
}
/* =========================================================
   HERO RESPONSIVE
   ========================================================= */
@media(max-width:768px){
.hero-slide img{width:100%;min-height:300px;object-fit:cover;object-position:center;}
.hero-arrow{width:38px;height:48px;font-size:22px;}
.hero-dots{bottom:12px;}
}
@media(max-width:480px){
.container{width:92%;}
.header-container{min-height:60px;}
.site-logo img{height:32px;max-width:165px;}
.menu-toggle{width:40px;height:40px;}
.hero-slide img{min-height:250px;}
.hero-arrow{width:34px;height:44px;font-size:20px;}
}
/* =========================================================
   PRODUCTOS DESTACADOS
   ========================================================= */

.featured-products{padding:80px 0 90px;background:#fff;}
.section-heading{text-align:center;margin-bottom:50px;}
.section-heading h2{margin:0;color:#222;font-size:36px;font-weight:500;line-height:1.2;}
.section-heading-line{display:block;width:60px;height:3px;margin:16px auto;background:var(--color-primary);}
.section-heading p{margin:15px 0 0;color:var(--color-text-light);font-size:14px;}
.products-slider{position:relative;}
.products-viewport{width:100%;overflow:hidden;}
.products-track{display:flex;transition:transform .55s cubic-bezier(.25,.8,.25,1);will-change:transform;}
.product-card{flex:0 0 25%;padding:0 18px;text-align:center;}
.product-image{height:240px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;overflow:hidden;}
.product-image img{width:auto;max-width:100%;max-height:220px;object-fit:contain;transition:transform .35s ease;}
.product-card:hover .product-image img{transform:scale(1.06);}
.product-info h3{min-height:44px;margin:0 0 8px;color:#333;font-size:16px;font-weight:500;line-height:1.35;}
.product-brand{display:block;margin-bottom:10px;color:#888;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.product-info p{min-height:42px;margin:0 auto 22px;color:#777;font-size:13px;line-height:1.5;}
.product-button{display:inline-flex;align-items:center;justify-content:center;min-width:135px;padding:10px 18px;border:1px solid var(--color-primary);border-radius:6px;color:var(--color-primary);font-size:13px;font-weight:600;transition:background .25s ease,color .25s ease,transform .25s ease;}
.product-button:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px);}
.products-arrow{position:absolute;z-index:20;top:145px;width:38px;height:58px;padding:0;border:0;background:rgba(244,123,32,.55);color:#fff;font-size:24px;cursor:pointer;transition:background .25s ease;}
.products-arrow:hover{background:var(--color-primary);}
.products-arrow-prev{left:-15px;}
.products-arrow-next{right:-15px;}

@media(max-width:1000px){
.product-card{flex-basis:50%;}
.products-arrow-prev{left:0;}
.products-arrow-next{right:0;}
}

@media(max-width:600px){
.featured-products{padding:55px 0 65px;}
.section-heading{margin-bottom:35px;}
.section-heading h2{font-size:28px;}
.product-card{flex-basis:100%;padding:0 35px;}
.product-image{height:220px;}
.products-arrow{top:130px;width:34px;height:50px;font-size:20px;}
.products-arrow-prev{left:0;}
.products-arrow-next{right:0;}
}
/* =========================================================
   NUESTRA EMPRESA
   ========================================================= */

.company-section{padding:90px 0 110px;background:#f8f8f8;}
.company-content{position:relative;display:flex;align-items:center;max-width:1150px;margin:0 auto;}
.company-image{width:64%;height:460px;overflow:hidden;border-radius:4px;}
.company-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.company-content:hover .company-image img{transform:scale(1.035);}
.company-card{position:relative;z-index:5;width:48%;margin-left:-12%;padding:50px 55px;background:#fff;border-radius:4px;box-shadow:0 15px 45px rgba(0,0,0,.10);}
.company-card::before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:var(--color-primary);border-radius:4px 0 0 4px;}
.company-label{display:block;margin-bottom:8px;color:var(--color-primary);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.company-card h3{margin:0 0 20px;color:#222;font-size:30px;font-weight:500;line-height:1.2;}
.company-card p{margin:0 0 16px;color:#666;font-size:14px;line-height:1.8;}
.company-button{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:11px 22px;border:1px solid var(--color-primary);border-radius:5px;background:var(--color-primary);color:#fff;font-size:13px;font-weight:600;transition:background .25s ease,color .25s ease,transform .25s ease;}
.company-button:hover{background:#fff;color:var(--color-primary);transform:translateY(-2px);}

/* =========================================================
   NUESTRA EMPRESA RESPONSIVE
   ========================================================= */

@media(max-width:900px){
.company-section{padding:70px 0 80px;}
.company-content{display:block;}
.company-image{width:100%;height:400px;}
.company-card{width:88%;margin:-70px auto 0;padding:40px;}
}

@media(max-width:600px){
.company-section{padding:55px 0 65px;}
.company-image{height:300px;border-radius:4px 4px 0 0;}
.company-card{width:100%;margin:0;padding:32px 25px;border-radius:0 0 4px 4px;box-shadow:0 10px 30px rgba(0,0,0,.08);}
.company-card::before{width:100%;height:4px;border-radius:0;}
.company-card h3{font-size:25px;}
.company-card p{font-size:13px;}
}
/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{margin-top:0;background:#161616;color:#d7d7d7;}
.footer-main{padding:70px 0 55px;background:linear-gradient(135deg,#191919 0%,#242424 100%);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:55px;}
.footer-logo{display:inline-block;margin-bottom:22px;padding:10px 14px;background:#fff;border-radius:8px;}
.footer-logo img{width:auto;height:42px;max-width:210px;}
.footer-brand p{max-width:360px;margin:0 0 24px;color:#aaa;font-size:14px;line-height:1.8;}
.footer-social{display:flex;align-items:center;gap:10px;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;}
.footer-social a svg{display:block;width:17px;height:17px;fill:currentColor;}
.footer-social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-3px);}
.footer-column h3{position:relative;margin:0 0 25px;padding-bottom:13px;color:#fff;font-size:16px;font-weight:700;}
.footer-column h3::after{content:"";position:absolute;left:0;bottom:0;width:35px;height:2px;background:var(--color-primary);}
.footer-column ul{margin:0;padding:0;list-style:none;}
.footer-column li{margin-bottom:11px;}
.footer-column li a{position:relative;color:#aaa;font-size:13px;transition:color .25s ease,padding-left .25s ease;}
.footer-column li a::before{content:"›";position:absolute;left:0;opacity:0;color:var(--color-primary);transition:opacity .25s ease;}
.footer-column li a:hover{padding-left:12px;color:#fff;}
.footer-column li a:hover::before{opacity:1;}
.footer-contact p{margin:0 0 15px;color:#aaa;font-size:13px;line-height:1.6;}
.footer-contact strong{color:#fff;font-weight:600;}
.footer-contact a{color:#aaa;transition:color .25s ease;}
.footer-contact a:hover{color:var(--color-primary);}
.footer-bottom{background:#101010;border-top:1px solid rgba(255,255,255,.06);}
.footer-bottom-content{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-bottom p{margin:0;color:#777;font-size:12px;}


/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */
@media(max-width:1000px){
.footer-grid{grid-template-columns:repeat(2,1fr);gap:45px;}
}

@media(max-width:600px){
.footer-main{padding:55px 0 40px;}
.footer-grid{grid-template-columns:1fr;gap:38px;}
.footer-logo img{height:36px;}
.footer-brand p{max-width:none;}
.footer-bottom-content{min-height:auto;flex-direction:column;align-items:flex-start;padding-top:18px;padding-bottom:18px;gap:5px;}
}

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================= */
.whatsapp-float{position:fixed;right:25px;bottom:25px;z-index:9999;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,.25);transition:transform .25s ease,background .25s ease,box-shadow .25s ease;}
.whatsapp-float svg{display:block;width:31px;height:31px;fill:currentColor;}
.whatsapp-float:hover{background:#20ba5a;color:#fff;transform:translateY(-4px) scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.30);}
.whatsapp-tooltip{position:absolute;right:70px;white-space:nowrap;padding:8px 13px;border-radius:5px;background:#222;color:#fff;font-size:12px;font-weight:600;opacity:0;visibility:hidden;transform:translateX(8px);transition:opacity .25s ease,visibility .25s ease,transform .25s ease;}
.whatsapp-tooltip::after{content:"";position:absolute;top:50%;right:-6px;transform:translateY(-50%);border-width:6px 0 6px 6px;border-style:solid;border-color:transparent transparent transparent #222;}
.whatsapp-float:hover .whatsapp-tooltip{opacity:1;visibility:visible;transform:translateX(0);}

@media(max-width:600px){
.whatsapp-float{right:16px;bottom:16px;width:54px;height:54px;}
.whatsapp-float svg{width:29px;height:29px;}
.whatsapp-tooltip{display:none;}
}
/* =========================================================
   CONTACTO
   ========================================================= */
.contact-section{padding:90px 0 100px;background:#fff;}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start;max-width:1150px;margin:0 auto;}
.contact-label{display:block;margin-bottom:10px;color:var(--color-primary);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.contact-info h3{margin:0 0 20px;color:#222;font-size:30px;font-weight:500;line-height:1.3;}
.contact-description{max-width:480px;margin:0 0 35px;color:#666;font-size:14px;line-height:1.8;}
.contact-items{display:flex;flex-direction:column;gap:22px;}
.contact-item{display:flex;align-items:center;gap:16px;}
.contact-icon{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:rgba(244,123,32,.10);color:var(--color-primary);}
.contact-icon svg{width:21px;height:21px;fill:currentColor;}
.contact-item div:last-child{display:flex;flex-direction:column;}
.contact-item strong{margin-bottom:3px;color:#333;font-size:14px;}
.contact-item a,.contact-item span{color:#777;font-size:13px;transition:color .25s ease;}
.contact-item a:hover{color:var(--color-primary);}

/* FORMULARIO */
.contact-form-wrapper{padding:40px;background:#f8f8f8;border-radius:8px;box-shadow:0 12px 35px rgba(0,0,0,.07);}
.contact-form{width:100%;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;margin-bottom:7px;color:#333;font-size:13px;font-weight:600;}
.form-group input,.form-group textarea{width:100%;padding:13px 14px;border:1px solid #ddd;border-radius:5px;background:#fff;color:#333;font-family:inherit;font-size:14px;outline:none;transition:border-color .25s ease,box-shadow .25s ease;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(244,123,32,.10);}
.form-group textarea{resize:vertical;min-height:140px;}
.contact-submit{display:inline-flex;align-items:center;justify-content:center;min-width:160px;padding:12px 24px;border:0;border-radius:5px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .25s ease,transform .25s ease,box-shadow .25s ease;}
.contact-submit:hover{background:#db6918;transform:translateY(-2px);box-shadow:0 6px 15px rgba(244,123,32,.25);}

/* =========================================================
   CONTACTO RESPONSIVE
   ========================================================= */
@media(max-width:900px){
.contact-section{padding:70px 0 80px;}
.contact-grid{grid-template-columns:1fr;gap:45px;}
}

@media(max-width:600px){
.contact-section{padding:55px 0 65px;}
.contact-info h3{font-size:25px;}
.contact-form-wrapper{padding:28px 20px;}
.form-row{grid-template-columns:1fr;gap:0;}
.contact-submit{width:100%;}
}