/* ==========================================================================
   davidmelara.com — hoja de estilos
   Derivada del MODELO DE LA EXPERIENCIA V1. Invariantes: lienzo, retícula,
   tipografía, estela, custodia del autor. Variables: temperatura por sección.
   ========================================================================== */

:root{
  --tinta:#101312;            /* lienzo único de todo el recorrido */
  --hueso:#EAE7DF;            /* texto primario */
  --niebla:#9CA29B;           /* texto secundario */
  --hilo:#B99B6B;             /* estela: memoria del sistema */
  --hilo-tenue:rgba(185,155,107,.55);
  --linea:rgba(234,231,223,.14);

  /* temperaturas (una lámpara por registro) */
  --t-hero:#5E6D78;           /* manifiesto: acero frío */
  --t-sobre:#8A6F52;          /* humano: cálido */
  --t-territorio:#5C6F66;     /* observacional: sereno */
  --t-problema:#46545F;       /* quirúrgico: el más frío */
  --t-capacidades:#7A6B4F;    /* operativo: templado */
  --t-contacto:#996F3D;       /* cercano: el más cálido */

  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;

  --margen:clamp(20px,6vw,96px);
  --carril:clamp(16px,6vw,88px);   /* carril de la estela */
  --medida:66ch;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--tinta);
  color:var(--hueso);
  font-family:var(--serif);
  font-size:clamp(17px,1.35vw,19px);
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--hilo);color:var(--tinta)}
a{color:var(--hueso)}
:focus-visible{outline:1.5px solid var(--hilo);outline-offset:4px}

.skip{position:absolute;left:-999px;top:8px;background:var(--hueso);color:var(--tinta);
  padding:8px 14px;font-family:var(--mono);font-size:12px;z-index:100}
.skip:focus{left:8px}

.marco{max-width:1200px;margin:0 auto;padding:0 var(--margen) 0 calc(var(--carril) + clamp(24px,4vw,72px))}
.marco-lectura{max-width:calc(var(--medida) + var(--carril) + 160px)}
.marco-estrecho{max-width:calc(58ch + var(--carril) + 160px)}

/* ---------- tipografía de sistema ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--niebla)}
.eyebrow-seccion{margin-bottom:clamp(28px,4vh,44px)}
.eyebrow-seccion::after{content:"";display:block;width:34px;height:1px;background:var(--hilo-tenue);margin-top:12px}

h1{font-weight:300;font-size:clamp(42px,6.4vw,88px);line-height:1.02;letter-spacing:-.015em;
  font-variation-settings:'opsz' 72}
h2{font-weight:400;font-size:clamp(20px,2vw,24px);line-height:1.25;letter-spacing:.01em}

p + p{margin-top:1.35em}
em{font-style:italic;color:var(--hueso)}
strong{font-weight:500}

.apertura{font-size:clamp(21px,2.3vw,29px);line-height:1.4;font-weight:300;color:var(--hueso);
  max-width:32ch;margin-bottom:1.4em;font-variation-settings:'opsz' 40}
.transicion{font-style:italic;color:var(--niebla)}
.sec p:not(.apertura):not(.posicionamiento){color:#CFCCC3}

/* ---------- estela: esqueleto y memoria ----------
   El SVG ya no es el fenómeno: es la trayectoria (invisible como objeto)
   y la memoria de lo recorrido, asentada, más tenue, historia.
   El presente —la energía— vive en el lienzo #energia. */
#estela{position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none}

#estela-residuo path{stroke:url(#estela-grad);stroke-linecap:round}
.e-nucleo{stroke-width:1;opacity:.55}
.e-halo{stroke-width:4;opacity:.09}
.e-resplandor{stroke-width:11;opacity:.035}

#energia{position:fixed;inset:0;z-index:1;pointer-events:none}

#estela-origen-halo{opacity:.4}
#estela-fin-halo{opacity:0;transition:opacity 2.4s ease}
#estela-fin-halo.entregado{opacity:.8}

#estela-nodos circle{fill:var(--tinta);stroke:var(--hilo-tenue);stroke-width:1;
  transition:fill .8s ease,stroke .8s ease}
#estela-nodos circle.encendido{fill:#D8B98A;stroke:#D8B98A}
#estela-nodos circle.terminal{stroke-width:1.5}
.anclaje{display:block;width:1px;height:1px}

/* ---------- momentos (avance, no scroll) ---------- */
#momentos{position:fixed;right:clamp(14px,2.4vw,32px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:26px;z-index:10}
.momento{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(156,162,155,.42);text-align:right;position:relative;padding-right:16px;
  transition:color .5s ease}
.momento::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;border:1px solid rgba(156,162,155,.42);transition:all .5s ease}
.momento.activo{color:var(--hilo)}
.momento.activo::after{background:var(--hilo);border-color:var(--hilo)}
@media(max-width:900px){#momentos{display:none}}

/* ---------- secciones: un lienzo, seis temperaturas ---------- */
.sec{position:relative;z-index:2;padding:clamp(72px,12vh,140px) 0}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.10;transition:opacity 1.2s ease;
  background:radial-gradient(ellipse 70% 55% at var(--foco,30% 40%),var(--lampara),transparent 70%)}
.sec.activa::before{opacity:.20}

.hero{--lampara:var(--t-hero);--foco:68% 42%}
.sobre{--lampara:var(--t-sobre);--foco:26% 34%}
.territorio{--lampara:var(--t-territorio);--foco:60% 30%}
.problema{--lampara:var(--t-problema);--foco:34% 46%}
.capacidades{--lampara:var(--t-capacidades);--foco:30% 50%}
.contacto{--lampara:var(--t-contacto);--foco:42% 46%}

/* ---------- costuras: el silencio con dueño ---------- */
.costura{position:relative;z-index:2;height:clamp(140px,26vh,300px);
  display:flex;align-items:center;justify-content:center}
.costura .anclaje{position:absolute;top:50%}
.costura .anclaje[data-estela="izq"]{left:calc(var(--carril) - 22px)}
.costura .anclaje[data-estela="der"]{left:calc(var(--carril) + 30px)}
.costura .anclaje[data-estela="lane"]{left:var(--carril)}

/* ---------- revelado direccional (avance) ---------- */
[data-motion="on"] .revela{opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform .9s ease}
[data-motion="on"] .revela.visible{opacity:1;transform:none}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:clamp(48px,8vh,96px)}
.hero .marco{width:100%}
.hero-cabecera{margin-bottom:clamp(40px,9vh,110px)}
.hero-cabecera .eyebrow{color:var(--hueso);letter-spacing:.3em}
.hero-sub{font-style:italic;color:var(--niebla);font-size:15px;margin-top:8px}
.hero-cuerpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:clamp(24px,4vw,56px);align-items:end}
.hero-texto{position:relative;z-index:3;padding-bottom:clamp(24px,6vh,64px)}
.hero h1{margin-bottom:.55em;max-width:12ch}
.posicionamiento{font-size:clamp(18px,1.8vw,22px);line-height:1.55;color:var(--niebla);max-width:38ch}
.cta-fila{display:flex;gap:16px;margin-top:clamp(28px,5vh,48px);flex-wrap:wrap}
.cta{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--hueso);padding:14px 26px;color:var(--hueso);
  transition:border-color .3s,color .3s,background .3s}
.cta:hover{border-color:var(--hilo);color:var(--hilo)}
.cta-secundaria{border-color:rgba(234,231,223,.3);color:var(--niebla)}

/* ---------- retratos: la autoría ---------- */
.retrato{position:relative;margin:0;background:#161917;border:1px solid var(--linea)}
.retrato img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.94)}
.retrato.sin-imagen img{display:none}
.retrato.sin-imagen::after{content:"D M";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,5vw,72px);letter-spacing:.3em;color:rgba(234,231,223,.22)}
.retrato-hero{height:clamp(380px,72vh,680px);margin-left:clamp(-90px,-6vw,-24px)}
.retrato-hero .anclaje{position:absolute;left:0;bottom:22%}
.retrato-contacto{width:clamp(180px,22vw,240px);height:clamp(220px,28vw,300px);flex-shrink:0}
.retrato-contacto .anclaje{position:absolute;left:30%;top:0}

/* ---------- PROBLEMA: compresión quirúrgica ---------- */
.problema p:not(.apertura){line-height:1.66}
.problema .apertura{max-width:30ch}

/* ---------- CAPACIDADES: estaciones sobre la línea ---------- */
.apertura-capacidades{max-width:40ch}
.capacidad-lista{list-style:none;margin-top:clamp(40px,7vh,72px)}
.capacidad{position:relative;display:flex;gap:clamp(20px,3vw,44px);
  padding:clamp(28px,4.5vh,44px) 0;border-top:1px solid var(--linea);align-items:baseline}
.capacidad:last-child{border-bottom:1px solid var(--linea)}
.anclaje-cap{position:absolute;left:calc(-1 * clamp(24px,4vw,72px));top:2.4em}
.cap-indice{font-family:var(--mono);font-size:12px;color:var(--hilo);letter-spacing:.1em;min-width:34px}
.cap-cuerpo{max-width:56ch}
.cap-cuerpo h2{margin-bottom:.5em;font-weight:500}
.cap-cuerpo p{color:#CFCCC3}
.cierre-capacidades{margin-top:clamp(36px,6vh,60px);font-family:var(--mono);font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--hilo)}

/* ---------- CONTACTO: la entrega ---------- */
.contacto{padding-bottom:clamp(100px,16vh,180px)}
.marco-contacto{display:flex;gap:clamp(28px,5vw,64px);align-items:flex-start;
  max-width:calc(60ch + 260px + var(--carril) + 160px)}
.contacto-texto{max-width:52ch}
.respondo{font-style:italic;color:var(--hueso)}
.contacto-vias{margin-top:1.8em;font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.contacto-vias a{text-decoration:none;border-bottom:1px solid var(--hilo-tenue);
  padding-bottom:3px;transition:color .3s,border-color .3s}
.contacto-vias a:hover{color:var(--hilo);border-color:var(--hilo)}
.contacto-vias .sep{margin:0 14px;color:var(--niebla)}

/* ---------- pie ---------- */
.pie{position:relative;z-index:2;border-top:1px solid var(--linea);padding:28px 0 40px}
.pie .eyebrow{letter-spacing:.14em}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-cuerpo{grid-template-columns:1fr;align-items:start}
  .retrato-hero{order:-1;height:clamp(300px,52vh,440px);margin-left:0;max-width:420px}
  .hero{min-height:auto;padding-top:clamp(72px,10vh,110px)}
  .marco-contacto{flex-direction:column}
}
@media(max-width:640px){
  :root{--carril:20px}
  .marco{padding-left:calc(var(--carril) + 24px)}
  .costura{height:clamp(96px,18vh,150px)}
  .capacidad{flex-direction:column;gap:10px}
  .anclaje-cap{top:1.2em}
}

/* ---------- movimiento reducido: la memoria completa, en reposo ---------- */
@media (prefers-reduced-motion: reduce){
  [data-motion] .revela{opacity:1;transform:none;transition:none}
  .sec::before{transition:none}
  #estela-nodos circle{transition:none}
  #energia{display:none}
  #estela-fin-halo{transition:none}
}