/* ===================================================
   Candela Alvarez — Brand: a. studio
   Blue #0212FF / Gray #B4B4B4 / White #FFFFFF
   Display + Body: Poppins (tipografía única, según indicación de marca)
=================================================== */

:root{
  --blue:#0212FF;
  --blue-dark:#0009B8;
  --gray:#B4B4B4;
  --graylight:#F2F2F2;
  --ink:#131313;
  --white:#FFFFFF;
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--blue);color:var(--white);}

.display{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1;
}

/* ---------- LOGO MARK (imagen real de marca) ---------- */
.logo-mark{
  height:40px;width:auto;
  display:inline-block;
  object-fit:contain;
}
.logo-mark.on-blue{
  filter:brightness(0) invert(1);
}

/* ---------- HIGHLIGHT (recuadro azul detrás de texto) ---------- */
.hl{
  background:var(--blue);color:var(--white);
  padding:0 8px;display:inline-block;
}
.hl.dark{background:var(--blue-dark);}

/* ---------- LINE DIVIDER between two words/phrases (conectada al texto) ---------- */
.line-between{
  display:inline-flex;align-items:baseline;gap:0;
  text-align:left;
}
.line-between .seg{white-space:nowrap;}
.line-between .rule{
  flex:1 1 auto;min-width:32px;
  height:0;
  border-bottom:3px solid currentColor;
  margin:0 4px;
}
@media(max-width:600px){
  .line-between{flex-wrap:wrap;}
  .line-between .rule{min-width:20px;margin:0 3px;}
}

/* wide word-spacing utility, per brand board */
.wide{word-spacing:0.35em;}

/* ---------- WORDMARK ---------- */
.wordmark{
  display:inline-flex;
  align-items:flex-end;
  gap:0;
  font-family:'Poppins',sans-serif;
  font-weight:800;
  color:var(--blue);
}
.wordmark .w-candela,
.wordmark .w-alvarez{font-size:1em;}
.wordmark .w-mid{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  padding:0 10px;
  height:1em;
}
.wordmark .w-mid::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0.16em;
  border-bottom:2px solid var(--blue);
}
.wordmark .studio-label{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:0.22em;
  color:var(--gray);
  text-transform:lowercase;
  position:relative;
  top:-0.55em;
  white-space:nowrap;
  background:var(--white);
  padding:0 4px;
  z-index:1;
}
.wordmark .ast{font-size:0.4em;margin-left:2px;margin-bottom:0.12em;}

/* ---------- HEADER / NAV ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(2,18,255,0.1);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
}
.nav-inner a.brand{display:flex;align-items:center;gap:10px;}
.nav-inner .logo-mark{height:36px;}
.nav-inner .brand-word{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;
  color:var(--gray);letter-spacing:0.01em;
}
.navlinks{display:flex;gap:4px;align-items:center;}
.navlinks a{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;
  padding:9px 16px;border-radius:3px;
  transition:background .15s ease, color .15s ease;
}
.navlinks a:hover{background:var(--graylight);}
.navlinks a.active{background:var(--blue);color:var(--white);}
.navlinks a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.navlinks .cta{background:var(--blue);color:var(--white);}
.navlinks .cta:hover{background:var(--blue-dark);}
.navlinks .cta:hover{background:var(--blue);}

@media (max-width:680px){
  .navlinks{gap:0;}
  .navlinks a{padding:8px 10px;font-size:12px;}
  .nav-inner .brand-word{display:none;}
}

/* ---------- PATTERN TEXTURE (ghost "a." tiles) ---------- */
.pattern-band{
  position:relative;
  overflow:hidden;
  background:var(--white);
}
.pattern-band .tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:6px;
  padding:20px;
  opacity:0.5;
}
.pattern-band .tiles span{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:34px;color:var(--graylight);
  text-align:center;
}

/* ---------- SECTION LABEL (blue tag, from brand board) ---------- */
.tag-label{
  display:inline-block;background:var(--blue);color:var(--white);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:0.05em;
  padding:6px 12px;margin-bottom:20px;
}

.eyebrow-line{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.eyebrow-line .ast{color:var(--blue);font-size:20px;font-family:'Poppins',sans-serif;}
.eyebrow-line span.txt{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--gray);
}

/* ---------- GENERIC PAGE HEADER ---------- */
.page-head{
  max-width:var(--maxw);margin:0 auto;
  padding:70px 24px 50px;
}
.page-head h1{font-size:clamp(30px,5vw,58px);color:var(--blue);}
.page-head h1 .accent{
  color:var(--blue);font-size:0.42em;
  vertical-align:top;margin-left:4px;
  display:inline-block;transform:translateY(0.15em);
}
.page-head p.lede{
  margin-top:20px;max-width:560px;font-size:16.5px;line-height:1.6;color:#444;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;
  padding:13px 26px;border-radius:3px;
  background:var(--blue);color:var(--white);
  border:none;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--blue-dark);}
.btn.outline{
  background:transparent;color:var(--blue);
  border:2px solid var(--blue);
  padding:11px 24px;
}
.btn.outline:hover{background:var(--blue);color:var(--white);}

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid rgba(2,18,255,0.1); margin-top:0; background:var(--white); }
.footer-inner{ height:94px; padding:0 10%; display:flex; justify-content:space-between; align-items:center; }
.footer-home{ font-family:'Poppins',sans-serif; font-weight:300; font-size:15px; color:var(--gray); cursor:default; }
.footer-logo{ display:block; line-height:0; }
.footer-logo img{ height:24px; width:auto; display:block; }
.wk-back,.wk-prev,.wk-next{ font-family:'Poppins',sans-serif; font-weight:300; font-size:12px; letter-spacing:.01em; color:var(--gray); transition:color .2s; }
.wk-back:hover,.wk-prev:hover,.wk-next:hover{ color:var(--blue); }
.wk-back{ position:absolute; top:2px; left:max(20px,4%); z-index:5; }
.wk-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px max(20px,4%) 30px; }
@media (max-width:760px){ .footer-inner{ height:76px; padding:0 20px; } .wk-back{ left:20px; top:6px; } }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}


/* ===== LOGO SUPERIOR (todas las páginas menos Home) ===== */
.slant-nav{
  position:relative;z-index:50;
  height:clamp(40px,3.2vw,46px);margin-top:0;margin-bottom:calc(13.154vw - clamp(40px,3.2vw,46px));
}
.top-logo{position:absolute;left:4.385%;top:7px;display:block;line-height:0;transition:opacity .2s;}
.top-logo img{height:32px;width:auto;display:block;}
.top-logo:hover{opacity:.7;}
@media (min-width:761px){ .nav-overlay{margin-top:-13.154vw !important;} }
@media (max-width:760px){
  .slant-nav{height:48px;margin:0 0 20px;}
  .top-logo{left:20px;top:10px;}
  .top-logo img{height:28px;}
}

/* ===== TÍTULO DE TRABAJO (arriba a la derecha) ===== */
.ttlblk{ position:absolute; right:4.385%; top:1.63cqw; z-index:3; text-align:right; color:var(--blue); font-family:'Poppins',sans-serif; font-size:1.556cqw; line-height:2.4cqw; white-space:nowrap; }
.ttlblk h1{ margin:0; font:inherit; font-weight:700; letter-spacing:-.01em; }
.ttlblk p{ margin:0; font-weight:400; }
@media (max-width:760px){
  .ttlblk{ position:static !important; align-self:flex-end; margin:6px 0 22px; font-size:17px; line-height:26px; }
}