:root{--navy:#16335f;--navy-deep:#0f2547;--red:#e1251b;--red-deep:#b81d15;--paper:#f7f3ec;--paper-2:#efe8dc;--ink:#1a1a1a;--muted:#5f6b7e;--line:#e2d8c8}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}

/* Header — fondo BLANCO */
header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:26px;height:84px}
.brand__logo{display:flex;align-items:center}
.brand__logo img{height:56px;width:auto;display:block}
.hd__nav{display:flex;gap:30px}
.hd__nav a{font-size:14.5px;font-weight:600;color:var(--navy);letter-spacing:.01em;transition:color .2s ease}
.hd__nav a:hover{color:var(--red)}
.hd__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin:-8px}
.hd__burger span{width:26px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .hd{height:74px}
  .brand__logo img{height:44px}
  .hd__burger{display:flex}
  .hd__nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px -18px rgba(22,51,95,.45);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .hd__nav.is-open{max-height:320px}
  .hd__nav a{padding:16px 28px;border-top:1px solid var(--line);font-size:16px}
}

/* Hero — banner de imagen sola (refinería/laboratorio), recortado y limpio */
.hero{position:relative;height:clamp(300px,40vw,460px);overflow:hidden}
.hero__img{position:absolute;inset:0;background-image:url('../img/hero-desk.png');background-size:cover;background-position:center;filter:saturate(.97) contrast(1.02)}
/* MÓVIL: banner horizontal del desktop, completo (aspect 1702/564). Revertir = comentar este bloque + descomentar el REVERT de abajo. */
@media(max-width:600px){.hero{height:auto;aspect-ratio:1702/564}.hero__img{background-image:url('../img/hero-desk.png');background-size:cover;background-position:center}}
/* REVERT (portrait recortado):
@media(max-width:600px){.hero{height:330px}.hero__img{background-image:url('../img/hero-mobile.png');background-position:center 64%}}
*/

/* Historia — clara, sobre papel */
.story{background:var(--paper);padding:74px 0}
.story__inner{max-width:880px}
.story__intro{text-align:center;margin-bottom:42px}
.story__logo{display:block;margin:0 auto 18px;width:min(330px,74vw);height:auto}
.story__tagline{font-family:'Fraunces';font-weight:600;font-size:clamp(20px,2.8vw,30px);color:var(--navy);line-height:1.25}
.story__tagline em{font-style:italic;color:var(--red-deep)}
.story__eb{font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--red-deep);font-weight:700;margin-bottom:12px}
.story__h{font-family:'Fraunces';font-weight:600;font-size:clamp(26px,3.4vw,40px);color:var(--navy);letter-spacing:-.01em;margin-bottom:24px}
.story p{font-size:17px;margin-bottom:16px;color:#3a4654}
.story p strong{color:var(--navy);font-weight:600}
.story__rule{width:60px;height:3px;background:var(--red);margin-top:26px;border-radius:2px}

/* Misión y Visión — banda navy */
.mv{background:var(--navy);color:#dce5f2;padding:74px 0}
.mv__title{font-family:'Fraunces';font-weight:600;font-size:clamp(24px,3.2vw,36px);color:#fff;text-align:center;margin-bottom:44px;letter-spacing:-.01em}
.mv__cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:980px;margin:0 auto}
.mv__col h3{font-family:'Fraunces';font-weight:600;font-size:23px;color:#f3b8b3;margin-bottom:14px;position:relative;padding-bottom:12px}
.mv__col h3::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;background:var(--red)}
.mv__col p{font-size:16px;color:#c2cfe2}
.mv__col p + p{margin-top:13px}
@media(max-width:760px){.mv__cols{grid-template-columns:1fr;gap:34px}}

/* Política de calidad */
.politica{background:var(--paper-2);padding:62px 0}
.politica__inner{max-width:880px;border-left:4px solid var(--red);padding-left:28px}
.politica h2{font-family:'Fraunces';font-weight:600;font-size:clamp(22px,2.8vw,30px);color:var(--navy);margin-bottom:16px}
.politica p{font-size:16.5px;color:#3a4654}
@media(max-width:600px){.politica__inner{padding-left:20px}}

/* Productos — catálogo de lubricantes por línea y subgrupo (sin precios) */
.products{background:#fff;padding:82px 0}
.legend{text-align:center;max-width:760px;margin:0 auto 8px}
.legend__eb{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--red-deep);font-weight:700;margin-bottom:14px}
.legend h2{font-family:'Fraunces';font-weight:600;font-size:clamp(26px,3.4vw,38px);color:var(--navy);letter-spacing:-.01em;line-height:1.12}
.legend__lead{font-size:16.5px;color:#4a5666;margin-top:18px}
.lines{display:flex;flex-direction:column;gap:26px;margin-top:48px}
.line{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 38px -28px rgba(22,51,95,.4)}
.line--0{background:#fff}
.line--1{background:var(--paper)}
.line__title{display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;font-family:'Fraunces';font-weight:600;font-size:21px;padding:17px 28px;letter-spacing:-.005em}
.line__title::before{content:"";width:6px;height:24px;background:var(--red);border-radius:2px;flex-shrink:0}
.line__groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 34px;padding:30px 28px 34px}
.grp__label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep);font-weight:700;margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.grp__items{list-style:none}
.grp__items li{font-size:14.5px;color:#3a4654;padding:3px 0 3px 16px;position:relative}
.grp__items li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;background:var(--red);transform:rotate(45deg)}
.products__cta{text-align:center;margin-top:42px}

/* Marcas */
.brands{padding:88px 0 104px;background:#fff}
.brands .legend{margin-bottom:66px}
.brands .legend__logo{display:block;margin:46px auto 0;width:min(340px,70vw);height:auto}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:38px 30px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px -24px rgba(22,51,95,.45);border-color:#cdbfa8}
.card__logo{width:100%;height:150px;display:grid;place-items:center;margin-bottom:28px;padding:6px}
.card__logo img{max-height:122px;max-width:90%;width:auto;height:auto;object-fit:contain}
/* Straton es el único logo horizontal (esfera + texto en línea) — el ancho lo limita;
   cap de alto para que no quede demasiado bajo frente a los 3 logos verticales. */
.card__logo--straton img{max-height:84px}

/* Botón */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;font-weight:600;font-size:14.5px;letter-spacing:.02em;padding:13px 32px;border-radius:8px;transition:background .2s ease,gap .2s ease}
.btn:hover{background:var(--red-deep);gap:13px}
.btn svg{width:15px;height:15px}

/* Maquila + formulario (sobre navy) */
.maquila{background:var(--navy-deep);color:#cdd8ea;padding:82px 0}
.maquila__head{max-width:780px;margin:0 auto 38px;text-align:center}
.maquila__eb{font-family:'Fraunces';font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em;color:#f3b8b3;font-weight:700;margin-bottom:22px;line-height:1.12}
.maquila h2{font-family:'Fraunces';font-weight:600;font-size:clamp(26px,3.4vw,40px);color:#fff;letter-spacing:-.01em;margin-bottom:18px}
.maquila__lead{font-size:16.5px;color:#b6c4dc}
.mq__form{max-width:840px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:34px}
.mq__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mq__field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:#9fb1cd;letter-spacing:.01em}
.mq__field--wide{margin-top:18px}
.mq__form input,.mq__form select,.mq__form textarea{font-family:inherit;font-size:15px;font-weight:400;color:#13243f;background:#f7f9fc;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:12px 14px;width:100%}
.mq__form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316335f' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.mq__form input:focus,.mq__form select:focus,.mq__form textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(225,37,27,.25)}
.mq__form textarea{resize:vertical;min-height:96px}
.mq__btn{margin-top:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-weight:600;font-size:15px;letter-spacing:.02em;padding:14px 40px;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease}
.mq__btn:hover{background:var(--red-deep)}
.mq__ok{max-width:840px;margin:0 auto 22px;background:rgba(58,160,90,.16);border:1px solid rgba(86,196,120,.5);color:#d6f3e0;padding:14px 18px;border-radius:10px;font-size:15px;text-align:center}
.mq__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media(max-width:600px){.mq__grid{grid-template-columns:1fr}.mq__form{padding:24px}}

/* Cotización — formulario en su propia sección (navy más claro, separa de Maquila) */
.cotiza{background:var(--navy);color:#cdd8ea;padding:74px 0 90px}
.cotiza__title{font-family:'Fraunces';font-weight:600;font-size:clamp(20px,2.6vw,28px);color:#fff;letter-spacing:-.01em;line-height:1.3;max-width:760px;margin:0 auto 36px;text-align:center}

/* Contacto — sección final clara: email + teléfono */
.contacto{background:var(--paper);padding:84px 0 92px;text-align:center}
.contacto__title{font-family:'Fraunces';font-weight:600;font-size:clamp(26px,3.4vw,38px);color:var(--navy);letter-spacing:-.01em;margin-bottom:40px}
.contacto__items{display:flex;justify-content:center;align-items:center;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap}
.contacto__item{display:inline-flex;align-items:center;gap:15px;font-size:clamp(17px,1.9vw,21px);font-weight:600;color:var(--navy);transition:color .2s ease}
.contacto__item:hover{color:var(--red)}
.contacto__icon{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;flex-shrink:0;transition:transform .2s ease}
.contacto__item:hover .contacto__icon{transform:translateY(-3px)}
.contacto__icon svg{width:23px;height:23px}
@media(max-width:600px){.contacto__items{flex-direction:column;gap:22px}}

/* Footer */
footer{background:var(--navy-deep);color:#9fb3d1;padding:44px 0}
.ft__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ft__name{font-family:'Fraunces';font-weight:600;font-size:20px;color:#fff;margin-bottom:6px}
.ft__meta{font-size:13px}
.ft__links{display:flex;gap:24px;flex-wrap:wrap}
.ft__links a{font-size:14px;color:#bcccE3;transition:color .2s ease}
.ft__links a:hover{color:#fff}
.ft__links-soon{font-size:14px;color:#7e93b3;cursor:default}
.ft__links-soon small{font-size:11px;opacity:.75;letter-spacing:.02em}
.ft__bar{height:4px;background:var(--red)}

@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}