/* ==========================================================
   daCompany — sistema suizo: 12 columnas × 8pt, tinta/papel/rojo
   ========================================================== */

:root{
  --u: 8px;               /* unidad base 8pt */
  --page: 40px;           /* margen exterior */
  --gutter: 24px;         /* medianil */
  --cols: 12;
  --ink: #111111;
  --paper: #f4f2ee;
  --accent: #6b625a;   /* topo cálido neutro — cada marca aporta su propio color */
  --line: rgba(17,17,17,.18);
  --line-strong: rgba(17,17,17,.42);
  --fg-dim: rgba(17,17,17,.55);
  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.7,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html,body{background:var(--paper);color:var(--ink);font-family:var(--ff)}
body{overflow-x:hidden;font-size:15px;line-height:1.45;position:relative}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* (el campo de color de pantalla completa se retiró — el hover tiñe solo la fila) */

/* ---------- Contenedor ---------- */
.wrap{
  position:relative;z-index:1;
  padding:0 var(--page);
  max-width:1680px;margin:0 auto;
}
.row12{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gutter)}

/* ---------- Header ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  padding:calc(var(--u)*2.5) var(--page);
  display:flex;justify-content:space-between;align-items:baseline;
  transition:transform .5s var(--ease);
}
.top .brand{font-weight:600;letter-spacing:-.01em;font-size:15px}
.top .brand .dot{color:var(--accent)}
.top .brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.top nav{display:flex;gap:calc(var(--u)*4)}
.top nav a{font-size:13px;letter-spacing:.02em;color:var(--fg-dim);position:relative;padding-bottom:2px}
.top nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.top nav a:hover{color:var(--ink)}
.top nav a:hover::after{transform:scaleX(1)}
.top nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--u)*14);padding-bottom:calc(var(--u)*11);position:relative}
.hero .meta{grid-column:1 / span 3;align-self:start}
.hero .meta p{font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--fg-dim);text-transform:uppercase}
.hero .meta p + p{margin-top:calc(var(--u)*2)}
.hero .meta b{color:var(--ink);font-weight:500;display:block;text-transform:none;letter-spacing:0;font-size:13px}

.logotype{grid-column:1 / -1;margin-top:calc(var(--u)*4)}
.logotype h1{
  font-weight:800;
  font-size:clamp(44px, 12.5vw, 210px);
  line-height:.82;
  letter-spacing:-.05em;
  color:var(--ink);
  position:relative;
  display:inline-block;
}
/* punto rojo con física — sigue la velocidad del scroll */
.logotype .odot{display:inline-block;position:relative;color:transparent}
.logotype .odot .disk{
  position:absolute;left:50%;top:54%;
  width:.5em;height:.5em;border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
  will-change:transform;
}
.logotype .odot .disk.pulse{animation:diskPulse .5s var(--ease)}
@keyframes diskPulse{0%{box-shadow:0 0 0 0 rgba(107,98,90,.5)}100%{box-shadow:0 0 0 40px rgba(107,98,90,0)}}

.hero .tag{
  grid-column:1 / span 6;margin-top:calc(var(--u)*5);
  font-size:clamp(18px,2vw,26px);line-height:1.28;letter-spacing:-.015em;font-weight:400;max-width:30ch;
}
.hero .tag .r{color:var(--accent)}
.hero .idx{grid-column:10 / span 3;margin-top:calc(var(--u)*5);align-self:end;text-align:right}
.hero .idx p{font-size:12px;color:var(--fg-dim);letter-spacing:.02em;line-height:1.6}
.hero .idx .big{font-size:13px;color:var(--ink);font-weight:500}

/* ---------- Encabezado de sección ---------- */
.sec-head{
  padding-top:calc(var(--u)*10);padding-bottom:calc(var(--u)*4);
  border-top:1px solid var(--line-strong);
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gutter);align-items:baseline;
}
.sec-head .num{grid-column:1 / span 1;font-size:12px;color:var(--accent);font-weight:500;letter-spacing:.02em}
.sec-head .ttl{grid-column:2 / span 6;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;font-weight:500}
.sec-head .say{grid-column:9 / span 4;font-size:13px;color:var(--fg-dim);line-height:1.5;text-align:right;letter-spacing:.01em}

/* ---------- Índice de proyectos ---------- */
.index{margin-top:calc(var(--u)*2)}
.prow{
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gutter);
  align-items:baseline;
  padding:calc(var(--u)*3) 0;
  border-top:1px solid var(--line);
  position:relative;
  cursor:pointer;
}
.prow:last-child{border-bottom:1px solid var(--line)}
.prow .no{grid-column:1 / span 1;font-size:12px;color:var(--fg-dim);letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.prow .name{grid-column:2 / span 5;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.025em;font-weight:500;line-height:1;transition:transform .5s var(--ease)}
.prow .disc{grid-column:7 / span 3;font-size:13px;color:var(--fg-dim);letter-spacing:.01em;transition:color .4s var(--ease)}
.prow .year{grid-column:11 / span 2;text-align:right;font-size:13px;color:var(--fg-dim);font-variant-numeric:tabular-nums;letter-spacing:.02em;transition:color .4s var(--ease)}
.prow .name .arw{display:inline-block;opacity:0;transform:translateX(-8px);transition:all .45s var(--ease);color:var(--accent);margin-left:.3em;font-weight:400}

.prow:hover .name{transform:translateX(12px)}
.prow:hover .name .arw{opacity:1;transform:translateX(0)}

/* renglones aún sin destino (dominio propio próximamente) */
.prow.soon{cursor:default}
.prow.soon .name{color:var(--ink)}
.prow.soon:hover .name{transform:none}
.prow.soon .disc::after{content:" · pronto";color:var(--accent)}
.prow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- Estudio / manifiesto ---------- */
.about{padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*4)}
.about .lead{grid-column:2 / span 6;font-size:clamp(24px,3.2vw,44px);line-height:1.14;letter-spacing:-.03em;font-weight:400}
.about .lead .r{color:var(--accent)}
.about .cols{grid-column:2 / -1;margin-top:calc(var(--u)*8);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.about .cols .c h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:calc(var(--u)*1.5);font-weight:500}
.about .cols .c p{font-size:14px;line-height:1.55;color:rgba(17,17,17,.78);max-width:34ch}

/* ---------- Servicios ---------- */
.caps{padding-top:calc(var(--u)*6);padding-bottom:calc(var(--u)*8)}
.caps .list{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);border-top:1px solid var(--line-strong);padding-top:calc(var(--u)*4)}
.caps .list .cap .k{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.caps .list .cap ul{list-style:none;margin-top:calc(var(--u)*1.5)}
.caps .list .cap li{font-size:14px;line-height:1.7;letter-spacing:-.005em}
.caps .list .cap li span{color:var(--fg-dim)}

/* ---------- Contacto ---------- */
.contact{padding-top:calc(var(--u)*11);padding-bottom:calc(var(--u)*9);border-top:1px solid var(--line-strong)}
.contact .lbl{grid-column:1 / span 3;font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-weight:500;align-self:start}
.contact .huge{grid-column:1 / span 9;font-size:clamp(40px,7.6vw,124px);line-height:.88;letter-spacing:-.045em;font-weight:600;text-transform:lowercase;margin-top:calc(var(--u)*3)}
.contact .huge a{position:relative;display:inline-block}
.contact .huge a .u{display:block;height:.055em;background:var(--accent);width:0;transition:width .6s var(--ease);margin-top:.04em}
.contact .huge a:hover .u{width:100%}
.contact .huge a:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:2px}
.contact .sidewrap{grid-column:10 / span 3;align-self:end;text-align:right}
.contact .side p{font-size:13px;color:var(--fg-dim);line-height:1.6}
.contact .side b{display:block;color:var(--ink);font-weight:500;margin-bottom:calc(var(--u)*.5)}
.contact .side.two{margin-top:calc(var(--u)*3.5);padding-top:calc(var(--u)*3);border-top:1px solid var(--line)}

/* ---------- Footer ---------- */
.foot{padding:calc(var(--u)*5) 0 calc(var(--u)*4);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gutter);align-items:baseline}
.foot .a{grid-column:1 / span 4;font-size:12px;color:var(--fg-dim);letter-spacing:.02em}
.foot .b{grid-column:6 / span 3;font-size:12px;color:var(--fg-dim);letter-spacing:.02em}
.foot .c{grid-column:10 / span 3;text-align:right;font-size:12px;color:var(--fg-dim);letter-spacing:.02em}
.foot .c a{color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:border-color .3s}
.foot .c a:hover{border-color:var(--accent);color:var(--accent)}

/* reloj */
.clock{position:fixed;bottom:16px;right:var(--page);z-index:8500;font-size:11px;letter-spacing:.04em;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.clock b{color:var(--ink);font-weight:500}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  :root{--page:20px;--gutter:12px}
  .top nav{gap:calc(var(--u)*2.5)}
  .top nav a:nth-child(2){display:none}
  .hero .meta{grid-column:1 / -1}
  .hero .meta p{display:inline-block;margin-right:calc(var(--u)*3)}
  .hero .meta p + p{margin-top:0}
  .hero .tag{grid-column:1 / -1}
  .hero .idx{grid-column:1 / -1;text-align:left;margin-top:calc(var(--u)*4)}
  .sec-head .ttl{grid-column:2 / -1}
  .sec-head .say{display:none}
  .prow .name{grid-column:2 / -1}
  .prow .disc{grid-column:2 / span 6;margin-top:calc(var(--u)*1);font-size:12px}
  .prow .year{grid-column:9 / span 4}
  .prow:hover .name{transform:translateX(6px)}
  .about .lead{grid-column:1 / -1}
  .about .cols{grid-column:1 / -1;grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .caps .list{grid-template-columns:1fr 1fr;gap:calc(var(--u)*4) var(--gutter)}
  .contact .lbl{grid-column:1 / -1}
  .contact .huge{grid-column:1 / -1}
  .contact .sidewrap{grid-column:1 / -1;text-align:left;margin-top:calc(var(--u)*4)}
  .contact .side.two{text-align:left}
  .foot .a,.foot .b,.foot .c{grid-column:1 / -1;text-align:left}
  .foot .b,.foot .c{margin-top:calc(var(--u)*1.5)}
}
@media (max-width:520px){
  .hero .meta p{display:block;margin-right:0}
  .hero .meta p + p{margin-top:calc(var(--u)*1.5)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .logotype .odot .disk{transition:none}
}