/* Bronstar — fondo blanco neutro, tinta esmeralda y el oro como único color cálido (kit oficial de identidad).
   Sin tarjetas: la estructura la dan la tipografía, el aire y filetes finos. El logo siempre es el archivo oficial. */
:root{
  --marfil:#FFFFFF;
  --piedra:#E4E5E1;
  --tinta:#111C17;
  --pizarra:#4A5A52;
  --esmeralda:#0B5235;
  --esmeralda-900:#07281A;
  --oro:#C89F38;
  --oro-base:#B1882C;
  --oro-tinta:#8E6B1F;
  --oro-luz:#E7C656;
  --firma:linear-gradient(90deg, #095837 0%, #17643E 35%, #7D8E42 52%, #D2AC43 72%, #ECCD5E 92%, #C89F38 100%);
  --lapidaria:"Cinzel", "Trajan Pro", Georgia, serif;
  --editorial:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen:clamp(16px, 4vw, 48px);
  --ancho:1240px;
  --lx:.7; --ly:.3;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:hidden}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--marfil);color:var(--tinta);font-family:var(--sans);font-size:16.5px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--editorial);font-weight:500;letter-spacing:-.01em;line-height:1.02}
h1 em,h2 em{font-style:italic;color:var(--oro-tinta)}
p,dl,dd{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:1.5px solid var(--esmeralda);outline-offset:4px;border-radius:2px}
::selection{background:rgba(200,159,56,.28)}
.saltar{position:absolute;left:16px;top:-60px;background:var(--tinta);color:var(--marfil);padding:10px 14px;z-index:50}
.saltar:focus{top:12px}

.rotulo{font-family:var(--lapidaria);font-weight:500;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-tinta);line-height:1.6}

/* ---------- acciones ---------- */
.boton{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:6px;border:1px solid var(--oro);
  background:linear-gradient(135deg, #07281A 0%, #0B5235 55%, #1E6D47 100%);color:#FCFBF8;text-decoration:none;
  font-weight:600;font-size:15px;letter-spacing:.02em;box-shadow:0 10px 30px -14px rgba(7,40,26,.55);transition:transform .25s, box-shadow .25s, border-color .25s}
.boton svg{width:19px;height:19px}
.boton:hover{transform:translateY(-2px);border-color:var(--oro-luz);box-shadow:0 14px 30px -12px rgba(200,159,56,.5)}
.boton:active{transform:translateY(0)}
.enlace{font-weight:500;text-decoration:none;padding:4px 0;color:var(--tinta);
  background:linear-gradient(var(--oro), var(--oro)) 0 100% / 100% 1px no-repeat;transition:background-size .35s, color .2s}
.enlace:hover{color:var(--esmeralda);background-size:0 1px;background-position:100% 100%}
.enlace-flecha{display:inline-flex;align-items:center;gap:8px;color:var(--esmeralda);font-weight:600;font-size:14.5px}
.enlace-flecha svg{width:18px;height:18px;transition:transform .25s}
.enlace-flecha:hover svg{transform:translateX(3px)}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:44px}
.acciones-centro{justify-content:center}

/* ---------- barra ---------- */
.barra{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:40px;padding:22px var(--margen);transition:background-color .35s, box-shadow .35s, padding .35s}
.barra.con-fondo{background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--piedra);padding-top:14px;padding-bottom:14px}
.marca{margin-right:auto}
.marca img{height:42px;width:auto}
.barra nav{display:flex;gap:34px}
.barra nav a{font-size:14px;color:var(--pizarra);text-decoration:none;padding:4px 0;background:linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1px no-repeat;transition:background-size .3s, color .2s}
.barra nav a:hover{color:var(--tinta);background-size:100% 1px}

/* ---------- hero: papel, luz cálida y el isotipo oficial con su sombra ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-escenario{position:relative;min-height:100svh;max-width:1400px;margin:0 auto;padding:130px var(--margen) 90px;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:48px}
.hero-texto{position:relative;z-index:2;max-width:680px}
.hero h1{margin-top:26px;font-size:clamp(3.1rem, 6.6vw, 6.6rem);line-height:.98}
.hero-sub{margin-top:30px;max-width:540px;color:var(--pizarra);font-size:1.12rem}
.sello{position:relative;justify-self:end;width:min(36vw, 520px);aspect-ratio:1}
.sello img{position:absolute;inset:0;width:100%;height:100%}
.sello-sombra{filter:brightness(0) blur(22px);opacity:.13;transform:translate3d(calc((.5 - var(--lx)) * 70px), calc(30px + (.5 - var(--ly)) * 40px), 0) scale(.93)}
.hero-puente{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;opacity:0;
  font-family:var(--editorial);font-weight:500;font-size:clamp(3rem, 8.4vw, 8.4rem);line-height:.98;letter-spacing:-.015em}
.hero-puente em{font-style:italic;color:var(--oro-tinta)}
.firma{position:absolute;left:var(--margen);right:var(--margen);bottom:0;height:1px;background:var(--firma);transform-origin:0 50%}

/* ---------- secciones ---------- */
section:not(.hero){padding:clamp(96px, 13vw, 176px) 0}
.encabezado{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen);display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 48px;align-items:baseline}
.encabezado h2{font-size:clamp(2.3rem, 4.5vw, 4.3rem);max-width:920px}
.encabezado-nota{grid-column:2;margin-top:24px;max-width:540px;color:var(--pizarra)}

/* filete que se dibuja al entrar en pantalla */
.trazo{position:relative;border-top:1px solid var(--piedra)}
.trazo::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--firma);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.2,.7,.1,1)}
.trazo.visto::before{transform:scaleX(1)}

/* sobre mí: texto editorial en la columna derecha */
.sobre-cuerpo{max-width:var(--ancho);margin:56px auto 0;padding:0 var(--margen) 0 calc(var(--margen) + 288px);display:grid;gap:22px}
.sobre-cuerpo p{max-width:640px;color:var(--pizarra);font-size:1.07rem}
.sobre-cuerpo .sobre-entrada{font-family:var(--editorial);font-weight:500;font-size:clamp(1.55rem, 2.5vw, 2.1rem);line-height:1.25;color:var(--tinta);max-width:760px}

/* proyectos: imagen grande y texto al lado; la imagen entra como un acercamiento de cámara */
.lista-proyectos{max-width:var(--ancho);margin:80px auto 0;padding:0 var(--margen);display:grid;gap:clamp(72px, 10vw, 140px)}
.proyecto{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:center}
.proyecto:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.proyecto:nth-child(even) .proyecto-imagen{order:2}
.proyecto-imagen{display:block;overflow:hidden;border-radius:4px;box-shadow:0 30px 60px -36px rgba(17,28,23,.45)}
.proyecto-imagen img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.proyecto-imagen:hover img{transform:scale(1.03)}
.proyecto-texto .num{display:block;font-family:var(--lapidaria);font-weight:600;font-size:14px;letter-spacing:.18em;color:var(--oro-tinta)}
.proyecto-texto h3{margin-top:14px;font-size:clamp(2rem, 3.2vw, 2.8rem)}
.proyecto-texto p{margin-top:16px;color:var(--pizarra);max-width:460px}
.proyecto-texto .proyecto-tecnica{margin-top:14px;font-size:13.5px;color:var(--oro-tinta);letter-spacing:.02em}
.proyecto-texto .enlace-flecha{margin-top:26px}

/* explorar: filtros por tema, buscador y la lista de notas */
html:not(.js) .explorador{display:none}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.explorador{max-width:var(--ancho);margin:64px auto 0;padding:0 var(--margen);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px}
.filtros{display:flex;flex-wrap:wrap;gap:4px 30px}
.filtro{appearance:none;background:none;border:0;border-radius:0;padding:8px 0;cursor:pointer;position:relative;
  font-family:var(--lapidaria);font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--pizarra);transition:color .25s}
.filtro::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--oro);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.2,.7,.1,1)}
.filtro:hover, .filtro[aria-pressed="true"]{color:var(--tinta)}
.filtro[aria-pressed="true"]::after{transform:scaleX(1)}
.filtro-n{font-family:var(--sans);font-size:11px;letter-spacing:0;color:var(--oro-tinta);vertical-align:super;margin-left:1px}
.buscar{display:flex;align-items:center;gap:10px;min-width:260px;padding:6px 0;border-bottom:1px solid var(--piedra);transition:border-color .3s}
.buscar:focus-within{border-color:var(--oro-base)}
.buscar svg{width:18px;height:18px;flex:none;color:var(--pizarra)}
.buscar input{width:100%;border:0;outline:0;background:transparent;padding:4px 0;font:inherit;font-size:15px;color:var(--tinta)}
.buscar input::placeholder{color:#8C968F}
.buscar input::-webkit-search-cancel-button{cursor:pointer}
.explorar-cuenta{max-width:var(--ancho);margin:30px auto 0;padding:0 var(--margen);font-size:13px;color:var(--pizarra)}
.lista-notas{max-width:var(--ancho);margin:14px auto 0;padding:0 var(--margen)}
.lista-notas > .nota:last-child{border-bottom:1px solid var(--piedra)}
.nota{display:grid;grid-template-columns:200px minmax(0,1fr) 150px;gap:6px 48px;align-items:baseline;padding:28px 0 30px}
.nota[hidden]{display:none}
.nota-tema{font-family:var(--lapidaria);font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-tinta)}
.nota-titulo{font-family:var(--editorial);font-weight:500;font-size:clamp(1.5rem, 2.4vw, 2.05rem);line-height:1.18;color:var(--tinta)}
.nota-titulo a{color:inherit;text-decoration:none}
.nota-resumen{margin-top:6px;color:var(--pizarra);font-size:15px}
.nota-estado{font-size:13px;color:var(--pizarra);text-align:right}
.sin-resultados{max-width:var(--ancho);margin:26px auto 0;padding:0 var(--margen);font-family:var(--editorial);font-size:1.5rem;color:var(--pizarra)}

/* notas: un destello dorado recorre el título una sola vez */
.nota-titulo{background:linear-gradient(100deg, var(--tinta) 0 42%, var(--oro-luz) 50%, var(--tinta) 58% 100%) 100% 0 / 260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.nota.visto .nota-titulo{animation:destello 1.9s .55s cubic-bezier(.45,0,.2,1) forwards}
@keyframes destello{to{background-position:0 0}}
@media (prefers-reduced-motion: reduce){ .nota.visto .nota-titulo{animation:none} }

/* platiquemos */
.platiquemos{text-align:center;padding-left:var(--margen)!important;padding-right:var(--margen)!important}
.separador{width:min(760px, 100%);height:auto;margin:0 auto 56px}
.platiquemos h2{margin:22px auto 0;white-space:normal;font-size:clamp(2.7rem, 6.2vw, 5.8rem);max-width:1000px}
.contacto-discreto{margin-top:56px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:12px 32px;font-size:15px}
.contacto-discreto .rotulo{font-size:12px}

/* pie */
.pie{max-width:var(--ancho);margin:0 auto;padding:44px var(--margen) 52px;border-top:1px solid var(--piedra);display:grid;gap:10px;color:var(--pizarra);font-size:14px}
.pie img{height:36px;width:auto;margin-bottom:10px}
.pie a{color:var(--tinta)}
.pie-legal{color:#7F8A84}

/* ---------- celular ---------- */
@media (max-width: 900px){
  .barra{gap:16px}
  .barra nav{display:none}
  .marca img{height:32px}
  .hero-escenario{grid-template-columns:1fr;align-content:center;gap:28px;padding-top:110px;padding-bottom:72px}
  .sello{order:-1;justify-self:start;width:min(46vw, 230px)}
  .hero h1{margin-top:18px}
  .encabezado{grid-template-columns:1fr;gap:18px}
  .encabezado-nota{grid-column:1;margin-top:6px}
  .nota{grid-template-columns:1fr;gap:6px;padding:24px 0 26px}
  .nota-estado{text-align:left}
  .explorador{margin-top:40px;flex-direction:column;align-items:stretch}
  .filtros{gap:2px 22px}
  .buscar{min-width:0}
  .sobre-cuerpo{padding-left:var(--margen);margin-top:36px}
  .lista-proyectos{margin-top:48px;gap:64px}
  .proyecto, .proyecto:nth-child(even){grid-template-columns:1fr;gap:26px}
  .proyecto:nth-child(even) .proyecto-imagen{order:0}
}
@media (max-width: 380px){
  .enlace-flecha{font-size:13.5px}
  .boton{padding:15px 22px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;transition-delay:0s!important}
}