/* Lapatec — lapatec.com
   Display: Montserrat · Cuerpo: Hanken Grotesk · Marca Ma-ko: Baloo 2 */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-700.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-800.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/baloo2-700.woff2') format('woff2')}

/* ============ TOKENS ============ */
:root{
  color-scheme:light dark;
  --font-display:'Montserrat';
  --font-body:'Hanken Grotesk';
  --bone:#F9F8F3; --navy:#041026; --red:#E62429; --red-deep:#BB0015;
  --blue:#0EA5E9; --yellow:#FFD700;

  --ground:#F9F8F3; --ground-band:#EFEEE9; --surface:#F9F8F3; --surface-high:#E9E8E3;
  --text:#041026; --text-muted:#4D4732; --text-soft:rgba(77,71,50,.8);
  --card-border:rgba(4,16,38,.1); --nav-bg:rgba(249,248,243,.82);
  /* #D71F24: mismo rojo lapa pero pasa AA 4.5:1 sobre hueso en texto pequeño */
  --accent-red:#D71F24; --accent-blue:#0EA5E9;
  --mako:#0F766E;
  --footer-bg:#041026; --footer-text:#F9F8F3; --footer-muted:rgba(227,227,222,.7);
  --shadow-card:0 32px 64px rgba(4,16,38,.1);
  --orb-red:rgba(230,36,41,.05); --orb-blue:rgba(14,165,233,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#041026; --ground-band:#081831; --surface:#081831; --surface-high:#0C2140;
    --text:#F9F8F3; --text-muted:#B7BDC9; --text-soft:rgba(183,189,201,.8);
    --card-border:rgba(249,248,243,.14); --nav-bg:rgba(4,16,38,.82);
    --accent-red:#FF5A5E; --accent-blue:#38BDF8;
    --mako:#2BD4C9;
    --footer-bg:#020A18; --footer-muted:rgba(183,189,201,.7);
    --shadow-card:0 32px 64px rgba(0,0,0,.5);
    --orb-red:rgba(230,36,41,.12); --orb-blue:rgba(14,165,233,.12);
  }
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--font-body),system-ui,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display),system-ui,sans-serif; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
svg{display:block}
img{max-width:100%}
::selection{background:var(--yellow); color:var(--navy)}
:focus-visible{outline:2px solid var(--accent-blue); outline-offset:3px; border-radius:4px}

/* i18n: default ES; html.lang-en muestra EN */
html.lang-en [lang="es"]{display:none !important}
html:not(.lang-en) [lang="en"]{display:none !important}

.wrap{max-width:1280px; margin:0 auto; padding-left:clamp(16px,5vw,64px); padding-right:clamp(16px,5vw,64px)}
section{scroll-margin-top:88px}
main:focus{outline:none}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--yellow); color:var(--navy); padding:12px 20px; border-radius:0 0 8px 0;
  font:600 14px var(--font-body),sans-serif; text-decoration:none;
}
.skip:focus{left:0}

.label{font:600 12px/16px var(--font-body),sans-serif; letter-spacing:.08em; text-transform:uppercase}
.icon{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.icon.sm{width:16px; height:16px}

/* motion */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1; transform:none}
  .reveal.d1{transition-delay:.1s}
}

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.bar{
  max-width:1280px; margin:0 auto; padding:14px clamp(16px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.bar-right{display:flex; align-items:center; gap:14px}
.wordmark{
  display:inline-flex; align-items:center; gap:10px;
  font:800 24px/32px var(--font-display),sans-serif; letter-spacing:-.01em; text-decoration:none;
  transition:opacity .2s;
}
.wordmark:hover{opacity:.8}
.wordmark img{height:32px; width:auto}
nav.links{display:flex; align-items:center; gap:24px}
nav.links a{text-decoration:none; color:var(--text-muted); font-size:16px; transition:color .2s}
nav.links a:hover{color:var(--text)}
.lang{display:flex; gap:2px; border:1px solid var(--card-border); border-radius:12px; padding:3px}
.lang button{
  font:600 12px var(--font-body),sans-serif; letter-spacing:.06em; border:0; background:none;
  color:var(--text-muted); padding:5px 10px; border-radius:9px; cursor:pointer;
}
.lang button.on{background:var(--text); color:var(--ground)}
.hamb{display:none; background:none; border:0; color:var(--text); cursor:pointer; padding:4px}
.mobile-menu{display:none}
@media (max-width:820px){
  nav.links{display:none}
  .hamb{display:block}
  .mobile-menu.open{
    display:flex; flex-direction:column; gap:4px; padding:8px clamp(16px,5vw,64px) 16px;
    border-top:1px solid var(--card-border);
  }
  .mobile-menu a{text-decoration:none; color:var(--text-muted); padding:10px 0; font-size:16px}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; cursor:pointer; border-radius:4px; padding:13px 32px;
  font:600 12px/16px var(--font-body),sans-serif; letter-spacing:.08em; text-transform:uppercase;
  transition:opacity .2s, background .2s, color .2s;
}
.btn.yellow{background:var(--yellow); color:var(--navy); border:1px solid var(--yellow)}
.btn.yellow:hover{opacity:.88}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--text)}
.btn.ghost:hover{background:var(--text); color:var(--ground)}

/* ============ HERO ============ */
.hero{
  position:relative; padding-top:clamp(120px,18vh,192px); padding-bottom:clamp(96px,14vh,128px);
  background:radial-gradient(circle at top right, var(--orb-red) 0%, var(--orb-blue) 40%, transparent 80%);
}
.hero .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:center}
.hero .copy{grid-column:span 9; display:flex; flex-direction:column; gap:32px}
@media (max-width:960px){ .hero .copy{grid-column:span 12} }
.hero h1{
  font-size:clamp(44px,5.5vw,64px); line-height:1.12; font-weight:800; letter-spacing:-.02em;
}
.hero h1 .m-emite{color:var(--accent-red)}
.hero h1 .m-mako{color:var(--mako)}
.hero .sub{font-size:18px; line-height:28px; color:var(--text-muted); max-width:36rem}
.hero .ctas{display:flex; flex-wrap:wrap; gap:16px; padding-top:8px}

/* ============ MARCAS ============ */
.brands{padding:clamp(96px,14vh,128px) 0}
.brands h2, .contact h2{
  font-size:clamp(28px,3.4vw,32px); line-height:1.25; font-weight:700; letter-spacing:-.01em;
}
.brands .head{margin-bottom:64px}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:860px){ .cards{grid-template-columns:1fr} }
.card{
  position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--card-border); border-radius:8px; padding:clamp(32px,4vw,48px);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-card)}
.card .orb{
  position:absolute; top:-40px; right:-40px; width:256px; height:256px; border-radius:50%;
  filter:blur(48px); pointer-events:none; transition:opacity .3s; opacity:.6;
}
.card:hover .orb{opacity:1}
.card.emite .orb{background:rgba(230,36,41,.09)}
.card.mako .orb{background:rgba(43,212,201,.1)}
.card .id{display:flex; align-items:center; gap:16px; margin-bottom:24px; position:relative}
.card .chip{
  width:48px; height:48px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  flex:none;
}
.card.emite .chip{background:rgba(230,36,41,.1); color:var(--accent-red)}
.card.mako .chip{background:rgba(43,212,201,.14); color:var(--mako)}
.card .chip img{width:32px; height:auto}
.card h3{font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.01em}
.card.mako h3{font-family:'Baloo 2',sans-serif; letter-spacing:0}
.card .tagline{margin-bottom:16px}
.card.emite .tagline{color:var(--accent-red)}
.card.mako .tagline{color:var(--mako)}
.card .body{color:var(--text-muted); margin-bottom:48px; max-width:46ch; position:relative}
.card .go{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font:600 16px var(--font-body),sans-serif; padding:9px 24px; border-radius:4px;
  border:1px solid currentColor; transition:background .25s, color .25s, gap .2s;
}
.card .go:hover{gap:13px}
.card.emite .go{color:var(--accent-red)}
.card.emite .go:hover{background:var(--red); color:var(--bone)}
.card.mako .go{color:var(--mako)}
.card.mako .go:hover{background:var(--mako); color:var(--ground)}

/* ============ MISSION ============ */
.mission{
  position:relative; overflow:hidden; padding:clamp(96px,16vh,128px) clamp(16px,5vw,64px);
  background:radial-gradient(circle at bottom left, rgba(255,215,0,.2) 0%, transparent 60%),
             linear-gradient(180deg, #E62429 0%, #BB0015 100%);
  text-align:center;
}
.mission .orbs{position:absolute; inset:0; opacity:.2; pointer-events:none}
.mission .orbs i{position:absolute; border-radius:50%; filter:blur(48px); mix-blend-mode:overlay}
.mission .orbs .o1{top:-96px; right:-96px; width:384px; height:384px; background:#F9F8F3}
.mission .orbs .o2{bottom:-128px; left:-128px; width:500px; height:500px; background:#FFD700}
.mission h2{
  position:relative; z-index:1; color:#F9F8F3;
  font-size:clamp(36px,5.5vw,64px); line-height:1.15; font-weight:800; letter-spacing:-.02em;
}
.mission h2 em{font-style:normal; color:#FFD700}

/* ============ ABOUT ============ */
.about{padding:clamp(96px,14vh,128px) 0}
.about .grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:center}
.about .visual{grid-column:span 6}
.about .copy{grid-column:8 / span 5; display:flex; flex-direction:column; gap:24px}
@media (max-width:960px){
  .about .visual{grid-column:span 12}
  .about .copy{grid-column:span 12; margin-top:24px}
}
.about-frame{
  width:100%; height:clamp(280px,40vw,384px); border-radius:48px; border-top-right-radius:0;
  overflow:hidden; background:var(--surface-high); box-shadow:0 24px 48px rgba(4,16,38,.05);
}
.about-frame svg{width:100%; height:100%}
.about-title{font-size:clamp(28px,4vw,48px); line-height:1.16; font-weight:700; letter-spacing:-.01em}
.about .lede{font-size:18px; line-height:28px; color:var(--text-muted)}
.about .more{color:var(--text-soft)}

/* ============ CONTACT ============ */
.contact{background:var(--ground-band)}
.contact .wrap{
  padding-top:clamp(80px,12vh,112px); padding-bottom:clamp(80px,12vh,112px);
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
}
.contact .label{color:var(--accent-red)}
.contact h2{font-size:clamp(32px,4.5vw,48px); line-height:1.15; font-weight:700}
.contact .mail{margin-top:8px; text-transform:none; font-size:16px; letter-spacing:.02em}
.contact .loc{display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:16px}

/* ============ FOOTER ============ */
footer{background:var(--footer-bg); color:var(--footer-text)}
.foot-grid{
  max-width:1280px; margin:0 auto; padding:64px clamp(16px,5vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; font-size:14px; line-height:20px;
}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand{display:flex; flex-direction:column; gap:16px}
.foot-brand .fm{
  display:inline-flex; align-items:center; gap:10px;
  font:800 24px/32px var(--font-display),sans-serif; color:#FFD700;
}
.foot-brand .fm img{height:28px; width:auto}
.foot-brand p{color:var(--footer-muted); max-width:20rem}
.foot-links{display:flex; flex-direction:column; gap:12px}
.foot-links a{text-decoration:none; color:var(--footer-muted); transition:color .2s}
.foot-links a:hover{color:#FFD700}
.foot-meta{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:16px}
@media (min-width:821px){ .foot-meta{align-items:flex-end} }
.made{
  display:inline-flex; align-items:center; gap:8px; background:rgba(249,248,243,.1);
  padding:6px 12px; border-radius:999px; font-size:12px; letter-spacing:.04em; color:#F9F8F3;
}
.foot-meta .copy-line{color:var(--footer-muted)}
.foot-legal{border-top:1px solid rgba(249,248,243,.12); background:var(--footer-bg)}
.foot-legal p{
  max-width:1280px; margin:0 auto; padding:20px clamp(16px,5vw,64px);
  color:var(--footer-muted); font-size:12px; line-height:18px;
}
.foot-legal strong{font-weight:600; color:rgba(249,248,243,.85)}