/* ===================================================================
   shared.css — estilos comunes a TODAS las páginas del sitio
   (variables de marca, barra superior, panel de contacto, lightbox,
   pie de página / dashboard, franja de clientes).
   Los estilos propios de cada página (home, proyectos) van en el
   <style> interno de cada archivo .html.
=================================================================== */

:root{
  --navy-950:#14151d;
  --navy:#2a2d3e;
  --navy-700:#3a3e54;
  --navy-500:#565b78;
  --red:#a2232a;
  --red-bright:#c9333c;
  --white:#ffffff;
  --mist:#aeb3c4;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.06);
  --font-head:'Space Grotesk',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --dash-h:74px;
  --clients-h:46px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--navy-950);
  color:var(--white);
  font-family:var(--font-head);
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
.mono{font-family:var(--font-mono);letter-spacing:.06em;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- corner brackets (single deliberate frame motif) ---------- */
.bracket{position:fixed;width:26px;height:26px;border-color:rgba(255,255,255,.35);border-style:solid;border-width:0;pointer-events:none;z-index:35;opacity:.9;}
.bracket.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px;}
.bracket.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px;}
.bracket.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px;}
.bracket.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px;}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:34px 40px;z-index:40;pointer-events:none;}
.topbar > *{pointer-events:auto;}
.btn-plus{width:66px;height:66px;border-radius:50%;border:1px solid var(--line);background:rgba(20,21,29,.55);backdrop-filter:blur(6px);position:relative;transition:border-color .25s;}
.btn-plus:hover{border-color:var(--red);}
.btn-plus span,.btn-plus::before{content:'';position:absolute;background:var(--white);left:50%;top:50%;}
.btn-plus span{width:21px;height:3px;transform:translate(-50%,-50%);transition:transform .3s;}
.btn-plus::before{width:3px;height:21px;transform:translate(-50%,-50%);transition:transform .3s;}
.btn-plus.open span{transform:translate(-50%,-50%) rotate(45deg);}
.btn-plus.open::before{transform:translate(-50%,-50%) rotate(45deg);}
.btn-plus.open{border-color:var(--red);}

.wordmark-link{text-decoration:none;}
.wordmark{font-size:1.3125rem;font-weight:600;letter-spacing:.04em;text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.wordmark em{font-style:normal;color:var(--red-bright);}
.wordmark small{display:block;font-family:var(--font-mono);font-style:normal;font-size:.62rem;color:var(--mist);letter-spacing:.16em;margin-top:6px;font-weight:400;}

/* ---------- contact panel ---------- */
.contact-panel{position:fixed;inset:0;background:rgba(15,16,22,.78);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:60;opacity:0;pointer-events:none;transition:opacity .3s;}
.contact-panel.open{opacity:1;pointer-events:auto;}
.contact-card{width:min(440px,88vw);max-height:88vh;overflow-y:auto;background:var(--navy);border:1px solid var(--line);padding:34px 32px;position:relative;transform:translateY(10px);opacity:0;transition:transform .35s ease, opacity .35s ease;}
.contact-panel.open .contact-card{transform:translateY(0);opacity:1;}
.contact-card::before,.contact-card::after{content:'';position:absolute;width:16px;height:16px;border-color:var(--red);border-style:solid;}
.contact-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.contact-card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.contact-head span{color:var(--red-bright);font-size:.68rem;}
.contact-head h2{font-size:1.5rem;margin:10px 0 22px;font-weight:600;}
#contactForm label{display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--mist);letter-spacing:.08em;margin-bottom:14px;}
#contactForm input,#contactForm textarea{width:100%;margin-top:6px;background:var(--navy-950);border:1px solid var(--line);color:var(--white);padding:10px 12px;font-family:var(--font-head);font-size:.92rem;resize:vertical;}
#contactForm input:focus,#contactForm textarea:focus{outline:none;border-color:var(--red);}
.captcha-row{display:flex;align-items:center;gap:10px;}
.captcha-row input{flex:1;}
.captcha-q{color:var(--white);font-family:var(--font-mono);background:var(--navy-950);border:1px solid var(--line);padding:9px 12px;white-space:nowrap;}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}
.error-msg{display:none;margin-top:4px;margin-bottom:12px;font-family:var(--font-mono);font-size:.7rem;color:var(--red-bright);}
.error-msg.show{display:block;}
#contactForm button{width:100%;margin-top:6px;padding:13px;background:var(--red);border:none;color:var(--white);font-weight:600;letter-spacing:.03em;transition:background .2s;}
#contactForm button:hover{background:var(--red-bright);}
.close-contact{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--mist);font-size:1rem;}
.sent-msg{display:none;margin-top:16px;font-family:var(--font-mono);font-size:.75rem;color:#7fd4a0;}
.sent-msg.show{display:block;}

/* ---------- lightbox (fotos y videos, usado en home y proyectos) ---------- */
.lightbox{position:fixed;inset:0;background:rgba(10,10,14,.9);display:flex;align-items:center;justify-content:center;z-index:70;opacity:0;pointer-events:none;transition:opacity .3s;}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox-card{position:relative;width:min(900px,90vw);border:1px solid var(--line);background:var(--navy-950);}
.lightbox-card::before,.lightbox-card::after{content:'';position:absolute;width:18px;height:18px;border-color:var(--red);border-style:solid;}
.lightbox-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.lightbox-card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.lightbox-media{line-height:0;}
.lightbox-media img,.lightbox-media video{width:100%;max-height:82vh;display:block;background:#000;object-fit:contain;}
.lightbox-media.is-embed{position:relative;width:100%;aspect-ratio:16/9;}
.lightbox-media.is-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.close-lightbox{position:absolute;top:-38px;right:0;background:none;border:none;color:var(--white);font-size:1.1rem;}

/* ---------- bottom dashboard (4 casillas) ---------- */
.dash{position:fixed;left:0;right:0;bottom:0;height:var(--dash-h);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);z-index:30;}
.dash-box{background:var(--navy-950);padding:14px 26px;display:flex;align-items:center;}
.coords{flex-direction:column;align-items:flex-start;gap:4px;justify-content:center;}
.coords .mono{font-size:.68rem;color:var(--mist);}
.coords .mono.hl{color:var(--white);}
.projects{justify-content:center;}
.projects-link{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;color:var(--mist);text-decoration:none;padding:10px 16px;border:1px solid var(--line);transition:border-color .2s,color .2s;}
.projects-link:hover,.projects-link.active{border-color:var(--red);color:var(--white);}
.projects-link .dot-ico{width:6px;height:6px;border-radius:50%;background:var(--red-bright);}
.social{justify-content:center;gap:22px;}
.social a{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mist);transition:border-color .2s,color .2s;}
.social a:hover{border-color:var(--red);color:var(--white);}
.social svg{width:15px;height:15px;fill:currentColor;}
.cta{justify-content:flex-end;}
.cta button{background:transparent;border:1px solid var(--line);color:var(--white);padding:10px 20px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;transition:border-color .2s,background .2s;}
.cta button:hover{border-color:var(--red);background:rgba(162,35,42,.18);}

/* ---------- clients strip ---------- */
.clients-strip{position:fixed;left:0;right:0;bottom:var(--dash-h);height:var(--clients-h);background:var(--navy-950);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);overflow:hidden;z-index:29;display:flex;align-items:center;}
.clients-track{display:flex;gap:52px;white-space:nowrap;animation:scrollLogos 32s linear infinite;padding-left:40px;align-items:center;}
.clients-track span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--navy-500);transition:color .2s;border:1px solid var(--line-soft);padding:6px 14px;}
.clients-track span:hover{color:var(--mist);border-color:var(--line);}
@keyframes scrollLogos{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media (prefers-reduced-motion:reduce){
  .clients-track{animation:none !important;}
}

/* ---------- responsive (compartido) ---------- */
@media (max-width:900px){
  :root{--dash-h:195px;--clients-h:46px;}
  .bracket{display:none;}
  .topbar{padding:20px 22px;}
  .btn-plus{width:56px;height:56px;}
  .wordmark{font-size:1.1rem;}
  .dash{grid-template-columns:1fr;height:auto;}
  .dash-box{padding:10px 20px;}
  .coords,.social,.cta,.projects{justify-content:center;text-align:center;}
}