/* Kova Studio — redesign 2026-07. Tokens + componentes compartidos.
   Fuente: design system "Kova Studio Design System" (Claude Design export). */

/* ---------- Tokens: color ---------- */
:root{
  --kova-tinta:#15130F;
  --kova-carbon:#26231D;
  --kova-grafito:#4A463F;
  --kova-piedra:#8B867B;
  --kova-niebla:#B7B2A7;
  --kova-lino:#D8D2C6;
  --kova-hueso:#ECE7DC;
  --kova-blanco-roto:#F6F3EB;

  --text-strong:var(--kova-tinta);
  --text-body:var(--kova-grafito);
  --text-muted:var(--kova-piedra);
  --surface-page:var(--kova-blanco-roto);
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--kova-lino);
  --border-hairline:rgba(21,19,15,.12);
  --border-strong:rgba(21,19,15,.24);

  --dark-text-strong:var(--kova-hueso);
  --dark-text-body:var(--kova-niebla);
  --dark-text-muted:var(--kova-piedra);
  --dark-surface-page:var(--kova-tinta);
  --dark-surface-raised:var(--kova-carbon);
  --dark-border-hairline:rgba(236,231,220,.14);
  --dark-border-strong:rgba(236,231,220,.26);

  /* ---------- Tokens: tipografía ---------- */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --weight-display-light:340;
  --weight-display-regular:400;
  --track-display:-.02em;
  --track-label:.24em;
  --leading-display:1.0;
  --leading-body:1.6;

  /* ---------- Tokens: spacing / radios ---------- */
  --space-section:clamp(58px,7vw,116px);
  --space-gutter:clamp(24px,5vw,84px);
  --radius-sm:6px;
  --radius-md:9px;
  --radius-pill:999px;
  --hairline:1px solid var(--border-hairline);
  --maxw-page:1560px;
}
.kova-on-dark{
  --text-strong:var(--dark-text-strong);
  --text-body:var(--dark-text-body);
  --text-muted:var(--dark-text-muted);
  --surface-page:var(--dark-surface-page);
  --surface-raised:var(--dark-surface-raised);
  --surface-sunken:var(--kova-carbon);
  --border-hairline:var(--dark-border-hairline);
  --border-strong:var(--dark-border-strong);
  color:var(--text-body);
  background:var(--surface-page);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--kova-blanco-roto);color:var(--kova-grafito);font-family:var(--font-text);-webkit-font-smoothing:antialiased}
a{color:var(--kova-grafito)} a:hover{color:var(--kova-tinta)}
img{display:block}

/* ---------- Header / nav ---------- */
.kv-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:20px 64px;background:rgba(21,19,15,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(236,231,220,.12)}
.kv-nav{display:flex;align-items:center;gap:38px}
.kv-nav a{font-family:var(--font-text);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--kova-niebla);text-decoration:none;transition:color .2s}
.kv-nav a:hover,.kv-nav a[aria-current="page"]{color:var(--kova-hueso)}

/* ---------- Logo lockup (K | KOVA STUDIO) ---------- */
.kv-lockup{display:inline-flex;align-items:center;gap:12px;color:var(--kova-hueso);text-decoration:none}
.kv-lockup-k{font-family:var(--font-display);font-weight:440;font-size:var(--lk,26px);line-height:.82}
.kv-lockup-dv{width:1px;height:calc(var(--lk,26px) * 1.15);background:rgba(236,231,220,.32)}
.kv-lockup-nm{font-family:var(--font-text);font-size:calc(var(--lk,26px) * .38);letter-spacing:.34em;text-transform:uppercase;line-height:1.7;font-weight:500}

/* ---------- Label ---------- */
.kv-label{font-family:var(--font-text);font-size:12px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-strong)}

/* ---------- Divider ---------- */
.kv-divider{height:1px;background:var(--border-hairline)}
.kv-divider--strong{background:var(--border-strong)}

/* ---------- Botones ---------- */
.kv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 34px;border-radius:var(--radius-pill);font-family:var(--font-text);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.kv-btn-solid{background:var(--kova-tinta);color:var(--kova-hueso);border-color:var(--kova-tinta)}
.kv-btn-solid:hover{background:var(--kova-grafito);color:var(--kova-hueso)}
.kova-on-dark .kv-btn-solid{background:var(--kova-hueso);color:var(--kova-tinta);border-color:var(--kova-hueso)}
.kova-on-dark .kv-btn-solid:hover{background:var(--kova-blanco-roto);color:var(--kova-tinta)}
.kv-btn-outline{background:transparent;color:var(--kova-tinta);border-color:rgba(21,19,15,.3)}
.kv-btn-outline:hover{border-color:var(--kova-tinta);color:var(--kova-tinta)}
.kova-on-dark .kv-btn-outline{color:var(--kova-hueso);border-color:rgba(236,231,220,.3)}
.kova-on-dark .kv-btn-outline:hover{border-color:var(--kova-hueso);color:var(--kova-hueso)}

/* ---------- Animaciones compartidas ---------- */
@keyframes kvHeroImg{from{transform:scale(1.07);opacity:.35}to{transform:scale(1);opacity:1}}
@keyframes kvRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@keyframes kvMarquee{to{transform:translateX(-50%)}}
@keyframes kvDriftA{from{transform:translate(0,0)}to{transform:translate(8px,-11px)}}
@keyframes kvDriftB{from{transform:translate(0,0)}to{transform:translate(-10px,7px)}}
@keyframes kvDriftC{from{transform:translate(0,0)}to{transform:translate(6px,13px)}}
@keyframes kvCyc{0%{opacity:0;transform:translateY(16px)}5%{opacity:1;transform:translateY(0)}22%{opacity:1;transform:translateY(0)}27%{opacity:0;transform:translateY(-12px)}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-cl-in]{opacity:1!important;transform:none!important}
  [data-cl] img,[data-cyc]{animation:none!important}
  [data-cyc]{opacity:0}
  [data-cyc]:first-of-type{opacity:1!important;transform:none!important}
}

/* ---------- Responsive básico ---------- */
.kv-wrap-row{display:flex}
@media (max-width:900px){
  .kv-header{padding:14px 20px}
  .kv-nav{gap:16px}
  .kv-nav a{font-size:10.5px;letter-spacing:.14em}
  section{padding-left:24px!important;padding-right:24px!important}
  .kv-wrap-row{flex-wrap:wrap}
  .kv-wrap-row > *{flex:1 1 46%!important;min-width:150px;max-width:100%!important}
  /* grids inline (stills 4 col) → 2 col */
  .kv-wrap-row[style*="grid-template-columns"]{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
  .kv-cols-3{columns:2!important}
  .kv-step-grid{grid-template-columns:1fr!important;gap:18px!important}
}
@media (max-width:640px){
  /* header compacto: solo la K de logo, nav entero a la vista */
  .kv-header .kv-lockup-nm,.kv-header .kv-lockup-dv{display:none}
  .kv-header{padding:12px 16px}
  .kv-nav{gap:13px}
  .kv-nav a{font-size:9.5px;letter-spacing:.08em}
  /* escala tipográfica mobile: pisa los clamp de escritorio (estilos inline) */
  h1{font-size:clamp(38px,11.5vw,54px)!important;letter-spacing:-.01em!important}
  h2{font-size:clamp(30px,9.6vw,46px)!important}
  h3{font-size:clamp(24px,7vw,32px)!important}
  /* frases cíclicas de Servicios */
  [style*="clamp(50px"]{font-size:clamp(26px,8vw,38px)!important}
  /* números gigantes de los pasos */
  [style*="clamp(90px"]{font-size:clamp(56px,16vw,84px)!important}
  /* hero home: menos alto mínimo */
  section[id="top"]{min-height:600px!important}
  /* tiras de imágenes con altura fija → fluidas */
  .kv-wrap-row > img{height:auto!important;width:100%!important;margin-top:0!important}
  /* marquee más bajo */
  #kv-feed-track img{height:170px!important;margin-right:14px!important}
  /* figuras del beat "Y se ve así" y cards a ancho completo */
  .kv-cols-3{columns:1!important}
  .kv-wrap-row > *{flex:1 1 100%!important}
  .kv-wrap-row[style*="grid-template-columns"]{grid-template-columns:repeat(2,1fr)!important}
  /* figura centrada al 76% (Beefeater en home) → ancho completo */
  figure[style*="width:76%"]{width:100%!important}
  /* galaxy del Portfolio: solo la banda superior, miniatura, sin pisar el texto */
  .kv-collage-tile img{width:52px!important;border-radius:4px!important}
  .kv-collage-tile:nth-child(3n) img{width:72px!important}
  .kv-collage-tile:nth-child(5n) img{width:62px!important}
  .kv-collage-tile:nth-child(n+8){display:none}
  /* botones y CTAs cómodos al dedo */
  .kv-btn{padding:14px 26px}
  /* footer y filas de metadatos */
  section [style*="justify-content:space-between"]{row-gap:14px}
}