: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 */
header{position:sticky;top:0;z-index:20;background:rgba(15,37,71,.97);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.hd{display:flex;align-items:center;justify-content:space-between;height:82px}
.brand__logo{display:flex;align-items:center}
.brand__logo img{height:52px;width:auto;display:block}
.hd__since{color:#9fb3d1;font-size:12px;letter-spacing:.22em;text-transform:uppercase}

/* Hero — banner tríptico de 3 verticales, contenido centrado con logo grande */
.hero{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero__tri{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.hero__tri span{background-size:cover;background-position:center;position:relative;filter:saturate(.9) contrast(1.02)}
.hero__tri span+span{box-shadow:-1px 0 0 rgba(255,255,255,.08)}
/* Overlay unificador: tiñe las 3 imágenes hacia el mismo navy para que lean como una sola pieza */
.hero__tint{position:absolute;inset:0;background:#16335f;opacity:.44;mix-blend-mode:multiply}
.hero__scrim{position:absolute;inset:0;background:radial-gradient(ellipse 100% 92% at 50% 48%,rgba(11,23,45,.62) 0%,rgba(11,23,45,.4) 66%,rgba(11,23,45,.56) 100%)}
.hero__content{position:relative;color:#fff;max-width:900px;padding:80px 28px}
.hero__logo{display:block;margin:0 auto 30px;height:clamp(86px,11.5vw,140px);width:auto;filter:drop-shadow(0 6px 26px rgba(0,0,0,.5))}
.eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#f1c0bc;font-weight:600;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red)}
.hero h1{font-family:'Fraunces';font-weight:600;font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 em{font-style:italic;color:#f3b8b3}

/* Historia */
.story{background:var(--navy-deep);color:#cdd8ea;padding:64px 0}
.story__inner{max-width:820px}
.story p{font-size:17.5px;margin-bottom:16px}
.story p strong{color:#fff;font-weight:600}
.story__rule{width:60px;height:3px;background:var(--red);margin-top:28px;border-radius:2px}

/* Marcas */
.brands{padding:80px 0 96px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.legend{text-align:center;margin-bottom:52px}
.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}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.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:132px;display:grid;place-items:center;margin-bottom:28px;padding:6px}
.card__logo img{max-height:96px;max-width:88%;width:auto;height:auto;object-fit:contain}
.card__logo--rouxlub img{max-width:94%;max-height:76px}
.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}

/* Footer */
footer{background:var(--navy-deep);color:#9fb3d1;padding:40px 0;text-align:center}
.ft__name{font-family:'Fraunces';font-weight:600;font-size:18px;color:#fff;margin-bottom:8px}
.ft__meta{font-size:13px}
.ft__bar{height:4px;background:var(--red)}

@media(max-width:860px){
  .grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .hero{min-height:440px}
  .hd__since{display:none}
}