/* Vessel Solutions — hoja de estilo del sitio público
   Colores, tipos y medidas: no editar desde el panel. */

:root{
  --ink:#1B1C1E;
  --ink-2:#3A3B3D;
  --ink-3:#5D5D60;
  --ink-4:#77777A;
  --line:rgba(27,28,30,.14);
  --line-2:rgba(27,28,30,.24);
  --bg:#F4F4F4;
  --paper:#FFFFFF;
  --dark:#1B1C1E;
  --dark-2:#2C2D30;
  --acc:#F2E205;
  --acc-ink:#7A6E00;
  --pad:clamp(16px,4vw,48px);
  --max:1560px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acc-ink)}
::selection{background:var(--acc);color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;text-transform:uppercase;margin:0}
p{margin:0}
button{font:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc-ink)}
.kicker i{width:34px;height:3px;background:var(--acc);display:block}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Marcas de registro (esquinas) ---------- */
.mk{position:relative}
.mk>i{position:absolute;width:11px;height:11px;color:var(--acc);z-index:2;pointer-events:none}
.mk>i::before{content:'';position:absolute;left:5px;top:0;width:1px;height:100%;background:currentColor}
.mk>i::after{content:'';position:absolute;top:5px;left:0;width:100%;height:1px;background:currentColor}
.mk>i.tl{top:-6px;left:-6px}.mk>i.tr{top:-6px;right:-6px}
.mk>i.bl{bottom:-6px;left:-6px}.mk>i.br{bottom:-6px;right:-6px}
.mk-ink>i{color:rgba(27,28,30,.6)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding:16px 28px;border:1px solid transparent;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-y{background:var(--acc);color:var(--ink);border-color:var(--acc)}
.btn-y:hover{background:var(--ink);color:var(--acc);border-color:var(--ink)}
.btn-o{border-color:var(--line-2);color:var(--ink)}
.btn-o:hover{border-color:var(--ink);background:var(--bg)}
.btn-d{background:var(--ink);color:var(--acc)}
.btn-d:hover{background:var(--bg);color:var(--ink)}
.btn-sm{padding:12px 18px;font-size:13.5px;letter-spacing:.12em}

/* ---------- Encabezado ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:600;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s ease}
.hdr.on{box-shadow:0 4px 22px rgba(27,28,30,.09)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:78px}
.hdr-logo img{height:42px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);font-family:var(--cond);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nav a{padding:4px 0;border-bottom:1px solid transparent;color:#4A4B4E}
.nav a:hover,.nav a.act{border-color:var(--acc);color:var(--ink)}
.hdr-cta{display:flex;align-items:center;gap:10px}
.dot{width:7px;height:7px;background:currentColor;border-radius:50%;animation:blink 1.8s infinite}
.spacer{height:78px}
.burger{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:46px;height:46px;flex:0 0 auto;border:1px solid var(--line-2);background:transparent;cursor:pointer;margin-left:auto}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(20,21,23,.55);z-index:700;animation:fadein .28s ease both}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);background:var(--dark);z-index:710;display:flex;flex-direction:column;padding:88px 0 24px;animation:drawerin .3s cubic-bezier(.2,.7,.2,1) both}
.drawer a{color:#F4F4F4;font-family:var(--cond);font-weight:600;font-size:22px;letter-spacing:.1em;text-transform:uppercase;padding:16px 26px;border-bottom:1px solid var(--dark-2);transition:background .2s ease,padding .2s ease}
.drawer a:hover{background:var(--acc);color:var(--ink);padding-left:34px}
.drawer .last{margin-top:auto;border:none;background:var(--acc);color:var(--ink);text-align:center;border-top:1px solid var(--acc)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;min-height:min(78vh,700px);display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .9s ease}
.hero-bg.on{opacity:1}
.hero-veil{position:absolute;inset:0;background:linear-gradient(94deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 46%,rgba(255,255,255,.5) 60%,rgba(255,255,255,.04) 74%,rgba(255,255,255,0) 100%)}
.hero-in{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(72px,9vw,124px) var(--pad) clamp(46px,5vw,70px)}
.hero-txt{max-width:min(54ch,50%)}
.hero-txt h1{font-size:clamp(46px,8.2vw,116px);line-height:.92;letter-spacing:-.02em;margin:0 0 24px}
.hero-txt .kicker{margin-bottom:26px}
.hero-txt p{max-width:52ch;font-size:clamp(16px,1.4vw,19px);color:var(--ink-3);margin:0 0 36px}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px}
.slide{display:none}
.slide.on{display:block;animation:slidefx .55s cubic-bezier(.2,.7,.2,1) both}
.dots{position:absolute;left:var(--pad);bottom:clamp(14px,2vw,22px);display:flex;gap:10px;z-index:3}
.dots button{cursor:pointer;border:none;padding:0;width:18px;height:3px;background:#C9C9CB;transition:width .3s ease,background .3s ease}
.dots button.on{width:46px;background:var(--acc)}

/* ---------- Bandas ---------- */
.band{padding:clamp(64px,8vw,124px) 0}
.band-sm{padding:clamp(44px,5vw,72px) 0}
.band-line{border-bottom:1px solid var(--line)}
.band-dark{background:var(--dark);color:#F4F4F4}
.band-dark .eyebrow{color:var(--acc)}
.band-paper{background:var(--paper)}
.band-y{background:var(--acc);color:var(--ink)}

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.sec-head h2{font-size:clamp(34px,5.4vw,76px);line-height:.95;letter-spacing:-.02em}
.sec-head .eyebrow{margin-bottom:16px;display:block}
.sec-head p{max-width:38ch;color:var(--ink-3)}
.band-dark .sec-head p{color:#B4B4B6}

/* Certificaciones */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(18px,2.4vw,34px)}
.certs .intro{align-self:center}
.certs .intro h2{font-size:clamp(28px,3.4vw,46px);line-height:1;margin:0 0 12px}
.certs .intro p{color:var(--ink-3);font-size:15px;max-width:36ch}
.cert{background:var(--paper);border:1px solid rgba(27,28,30,.16);padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,30px);display:grid;gap:10px;align-content:center;text-align:center}
.cert .org{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8A8A8C}
.cert .code{font-family:var(--cond);font-weight:700;font-size:clamp(40px,4.4vw,62px);line-height:.9}
.cert .nm{font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#4A4B4E}
.cert .note{font-size:14px;color:var(--ink-4)}

/* Líneas */
.lineas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.linea{background:var(--bg);display:block}
.linea:hover{background:#EDEDEE}
.linea-img{position:relative;aspect-ratio:5/4;background:var(--dark);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px}
.linea-img img{width:min(42%,140px);height:auto;display:block}
.linea-txt{padding:26px 24px 30px}
.linea-txt .code{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#8A8A8C;margin-bottom:10px}
.linea-txt h3{font-size:30px;line-height:1;margin:0 0 12px}
.linea-txt p{color:var(--ink-3);font-size:15px;margin:0 0 18px}
.more{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--acc);padding-bottom:3px}

/* Por qué */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,80px)}
.two h2{font-size:clamp(34px,5vw,72px);line-height:.95;letter-spacing:-.02em;margin:0 0 22px}
.vent{display:grid;gap:1px;background:#333437;align-self:start}
.vent>div{background:var(--dark);padding:24px 4px;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.vent>div:hover{background:#222325}
.vent .n{font-family:var(--mono);font-size:11px;color:var(--acc);padding-top:5px}
.vent h4{font-weight:600;font-size:22px;letter-spacing:.04em;margin:0 0 6px}
.vent p{color:#95959A;font-size:15px}

/* Clientes */
.marq{display:grid;gap:14px;overflow:hidden}
.marq-row{display:flex;width:max-content;animation:marq 46s linear infinite}
.marq-row.rev{animation:marqrev 52s linear infinite}
.marq-row span{width:212px;height:92px;margin:0 7px;border:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:var(--cond);font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}

/* CTA */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:clamp(56px,7vw,104px) 0}
.cta h2{font-size:clamp(34px,5.6vw,80px);line-height:.92;margin:0 0 14px;max-width:20ch}
.cta p{max-width:44ch;font-size:18px}
.cta .btn{padding:22px 36px;font-size:18px}

/* ---------- Encabezado de página ---------- */
.page-head{background:var(--dark);color:#F4F4F4;padding:clamp(48px,6vw,90px) 0}
.page-head h1{font-size:clamp(42px,7vw,104px);line-height:.92;margin:0 0 18px}
.page-head p{max-width:56ch;color:#B4B4B6}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8A8A8C;margin-bottom:22px}
.crumb a{color:inherit}
.crumb a:hover{color:var(--acc)}
.crumb .now{color:var(--acc)}
.crumb-l{color:var(--ink-4)}
.crumb-l .now{color:var(--ink)}

/* ---------- Catálogo ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:36px}
.chip{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border:1px solid rgba(27,28,30,.2);color:var(--ink);cursor:pointer;background:transparent}
.chip:hover{border-color:var(--ink)}
.chip.on{border-color:var(--ink);background:var(--acc)}
.count{margin-left:auto;align-self:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,30px)}
.pcard{display:block;border:1px solid var(--line);background:var(--paper)}
.pcard:hover{border-color:var(--ink)}
.pcard-img{position:relative;aspect-ratio:4/3;background:var(--paper);border-bottom:1px solid rgba(27,28,30,.1);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px}
.pcard-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;mix-blend-mode:multiply}
.pcard-img .ph{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#A2A2A4}
.pcard-img .tag{position:absolute;top:0;left:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;background:var(--acc);padding:4px 8px}
.pcard-txt{padding:20px}
.pcard-txt h4{font-weight:600;font-size:22px;line-height:1.05;margin:0 0 8px}
.pcard-txt .spec{font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.empty{padding:40px 16px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8A8A8C;border:1px solid var(--line)}

/* ---------- Ficha de producto ---------- */
.prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.prod-main{position:relative;aspect-ratio:1;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px;padding:clamp(24px,4vw,56px);background:var(--paper)}
.prod-main img{position:relative;z-index:2;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;mix-blend-mode:multiply}
.prod-main .ph{font-family:var(--mono);font-size:11px;color:#A2A2A4;position:relative;z-index:2}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.thumbs button{aspect-ratio:1;border:1px solid var(--line);background:var(--paper);padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumbs button.on,.thumbs button:hover{border-color:var(--ink)}
.thumbs img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.tagline{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--acc);padding:4px 9px;margin-bottom:18px}
.prod h1{font-size:clamp(36px,4.6vw,66px);line-height:.95;margin:0 0 18px}
.prod .desc{color:var(--ink-3);max-width:52ch;margin:0 0 32px}
.specs{border-top:1px solid var(--line);margin-bottom:32px}
.specs>div{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.specs .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.specs .v{font-size:15px}

/* ---------- Nosotros ---------- */
.about{position:relative;overflow:hidden;background:#141517}
.about-bg{position:absolute;left:0;right:0;top:-560px;height:calc(100% + 1120px);background-size:cover;background-position:center;will-change:transform}
.about-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,23,.82) 0%,rgba(20,21,23,.44) 26%,rgba(20,21,23,.5) 62%,rgba(20,21,23,.86) 100%)}
.about-in{position:relative;color:#F4F4F4}
.about h1{font-size:clamp(40px,7vw,104px);line-height:.92;margin:0 auto;max-width:22ch}
.about .kicker{justify-content:center;color:var(--acc);margin-bottom:20px}
.about-lead{max-width:min(78ch,1100px);margin:0 auto;padding:0 var(--pad) clamp(48px,6vw,90px);display:grid;gap:clamp(24px,3vw,42px);text-align:center}
.about-lead p,.about-txt{font-size:clamp(18px,1.55vw,23px);line-height:1.72;color:#F4F4F4;text-shadow:0 1px 18px rgba(12,13,14,.85);text-wrap:pretty}
.about h2{font-size:clamp(32px,4.4vw,62px);line-height:1;margin:0 0 24px;text-align:center}
.about h3{font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:.06em;margin:0 0 18px;color:var(--acc);text-align:center}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,80px)}
.contact h1{font-size:clamp(40px,6vw,88px);line-height:.94;margin:0 0 26px}
.rows{border-top:1px solid var(--line)}
.rows>div{display:grid;grid-template-columns:minmax(110px,.4fr) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.rows .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.rows .v{font-family:var(--cond);font-size:22px;font-weight:600}
.wa-card{border:1px solid var(--line);background:var(--paper);padding:clamp(22px,3vw,40px);display:grid;gap:18px;align-content:start}
.wa-card h2{font-size:clamp(26px,3vw,38px);line-height:1}
.wa-card p{color:var(--ink-3)}

/* ---------- Texto legal ---------- */
.legal{max-width:78ch;display:grid;gap:20px}
.legal h1{font-size:clamp(34px,5vw,66px);line-height:.96;margin:0 0 8px}
.legal p{color:var(--ink-2);font-size:16.5px;line-height:1.7;text-wrap:pretty}

/* ---------- Pie ---------- */
.ftr{background:var(--dark);color:#8A8A8C}
.ftr-in{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,80px) var(--pad) 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px}
.ftr img{height:44px;width:auto;display:block;margin-bottom:18px}
.ftr p{font-size:14px;max-width:32ch}
.ftr-col{display:grid;gap:8px;font-family:var(--cond);font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.ftr-col .h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#55565A;text-transform:uppercase}
.ftr-col a{color:#C9C9CB}
.ftr-col a:hover{color:var(--acc)}
.ftr-data{display:grid;gap:8px;font-family:var(--mono);font-size:12px}
.ftr-data span{color:#C9C9CB}
.ftr-data .h{font-size:10px;letter-spacing:.2em;color:#55565A}
.ftr-btm{max-width:var(--max);margin:0 auto;padding:18px var(--pad) 30px;border-top:1px solid var(--dark-2);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.ftr-btm a{color:#8A8A8C}
.ftr-btm a:hover{color:var(--acc)}

/* ---------- WhatsApp flotante ---------- */
.wa{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:500;width:62px;height:62px;border-radius:50%;background:var(--acc);display:grid;place-items:center;box-shadow:0 6px 22px rgba(27,28,30,.32);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wa:hover{transform:scale(1.08)}
.wa .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:pulse 2.4s ease-out infinite}
.wa svg{width:32px;height:32px;display:block;position:relative}

/* ---------- Aparición al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .marq-row,.wa .ring,.dot{animation:none}
}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqrev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes slidefx{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes drawerin{from{transform:translateX(100%)}to{transform:translateX(0)}}

@media (max-width:1100px){.hero-txt{max-width:min(54ch,68%)}}
@media (max-width:940px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .hero-txt{max-width:100%}
  .hero-veil{background:linear-gradient(94deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 58%,rgba(255,255,255,.55) 100%)}
}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .specs>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .rows>div{grid-template-columns:minmax(0,1fr);gap:2px}
}