/* ============ TOKENS ============ */
:root{
  --navy: #0B1D2E;
  --navy-deep: #071420;
  --parchment: #F3EEE3;
  --brass: #B08D57;
  --brass-light: #D9BE8F;
  --garnet: #6B2027;
  --slate: #3E4C5E;

  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --ease: cubic-bezier(.22,.68,0,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--navy);
  color: var(--parchment);
  font-family: var(--font-body);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin: 0 0 .6rem;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: auto;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  padding-top: 8vh;
  padding-bottom: 4rem;
  overflow:hidden;
  text-align:center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.hero__banner{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(176,141,87,.18), transparent 55%),
    repeating-linear-gradient(115deg, rgba(243,238,227,.035) 0 2px, transparent 2px 42px),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, #0e2438 100%);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
}

.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,20,32,.35) 0%, rgba(7,20,32,.55) 60%, var(--navy) 100%);
}

.hero__stage{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width: 640px;
}

/* --- Puertas de sala de audiencias --- */
.doors{
  position:absolute;
  inset:0;
  z-index: 5;
  display:flex;
  pointer-events:none;
}
.doors__panel{
  flex:1;
  background:
    linear-gradient(180deg, #0d2236 0%, var(--navy-deep) 100%);
  border-image: linear-gradient(180deg, var(--brass), var(--brass-light), var(--brass)) 1;
  transition: transform 1.4s var(--ease);
}
.doors__panel--left{
  border-right: 2px solid var(--brass);
  transform: translateX(0%);
}
.doors__panel--right{
  border-left: 2px solid var(--brass);
  transform: translateX(0%);
}
.doors.is-open .doors__panel--left{ transform: translateX(-100%); }
.doors.is-open .doors__panel--right{ transform: translateX(100%); }

/* --- Contenido del hero --- */
.hero__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  transform: translateY(14px);
}
.hero__content.is-visible{
  animation: contentIn .9s var(--ease) forwards;
}
@keyframes contentIn{
  to{ opacity:1; transform:translateY(0); }
}

.photo-frame{
  width: 210px;
  height: 210px;
  border-radius: 50%;
  padding: 6px;
  background: conic-gradient(from 200deg, var(--brass-light), var(--brass), var(--garnet), var(--brass-light));
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: scale(.85);
}
.hero__content.is-visible .photo-frame{
  animation: photoIn 1s .5s var(--ease) forwards;
}
@keyframes photoIn{
  to{ opacity:1; transform: scale(1); }
}
.photo-frame__img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit: cover;
  object-position: center 20%;
  background: var(--slate);
  border: 3px solid var(--navy);
}

.hero__nombre{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  margin: 0 0 .3rem;
  letter-spacing: .01em;
}
.hero__cargo{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--brass-light);
  margin: 0 0 .5rem;
}
.hero__juzgado{
  font-size: .95rem;
  margin: 0;
  max-width: 420px;
  color: rgba(243,238,227,.85);
}
.hero__sede{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(243,238,227,.55);
  margin: .35rem 0 1.5rem;
}

/* --- Redes sociales --- */
.social-row{
  display:flex;
  gap: .9rem;
}
.social-row a{
  width: 50px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(176,141,87,.5);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  transition: transform .25s var(--ease), background .25s, border-color .25s;
}
.social-row a svg{ width:22px; height:22px; display:block; fill: var(--parchment); }
.social-row a:hover, .social-row a:focus-visible{
  background: var(--brass);
  border-color: var(--brass);
  transform: translateY(-3px);
  outline: none;
}
.social-row a:focus-visible{ box-shadow: 0 0 0 3px rgba(217,190,143,.5); }

.scroll-cue{
  position: static;
  margin-top: 2.5rem;
  display:flex; flex-direction:column; align-items:center;
  gap:.4rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: rgba(243,238,227,.55);
}
.scroll-cue__line{
  width:1px; height:34px;
  background: linear-gradient(var(--brass-light), transparent);
  animation: cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{
  0%,100%{ opacity:.3; } 50%{ opacity:1; }
}

/* ============ SECCIONES CON PARALLAX ============ */
[data-parallax-bg]{
  position:relative;
  padding: 6.5rem 1.5rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
[data-parallax-bg]::before{
  content:"";
  position:absolute;
  top:-15%; left:0; right:0; height:130%;
  z-index:0;
  background-image: var(--bg-img, none);
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: translateY(var(--parallax-y, 0px));
}
[data-parallax-bg]::after{
  content:"";
  position:absolute; inset:0; z-index:1;
}
[data-parallax-bg] > *{ position:relative; z-index:2; }

.semblanza::before{
  background-image: var(--bg-img, radial-gradient(circle at 80% 30%, rgba(107,32,39,.35), transparent 60%)),
    linear-gradient(160deg, #0f2a3f, var(--navy-deep));
}
.semblanza::after{ background: rgba(7,20,32,.45); }
.semblanza__panel{ max-width: 620px; }
.semblanza__texto{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.6;
  color: var(--parchment);
}

.trayectoria::before{
  background-image: var(--bg-img, radial-gradient(circle at 15% 70%, rgba(176,141,87,.2), transparent 55%)),
    linear-gradient(200deg, var(--navy-deep), #10283d);
}
.trayectoria{
  padding-top: 2.5rem;
}
.trayectoria__header{
  margin-bottom: 1.5rem;
}

.trayectoria::after{ background: rgba(7,20,32,.4); }
.trayectoria__header{ margin-bottom: 3rem; }
.trayectoria__titulo{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin:0;
}

.docket{
  width:100%;
  max-width: 780px;
  display:flex;
  flex-direction:column;
  gap: 2.2rem;
  text-align:left;
}
.docket__item{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 1.2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(176,141,87,.25);
  opacity:0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.docket__item:last-child{ border-bottom:none; }
.docket__item.is-visible{ opacity:1; transform:none; }

.docket__num{
  font-family: var(--font-mono);
  color: var(--brass-light);
}
.docket__num span{
  display:block;
  font-size: .68rem;
  letter-spacing:.12em;
  color: rgba(243,238,227,.5);
  text-transform: uppercase;
}
.docket__num strong{
  font-size: 1.5rem;
  color: var(--brass-light);
}
.docket__anio{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--brass-light);
  margin: 0 0 .3rem;
}
.docket__titulo{
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 .4rem;
}
.docket__desc{
  margin:0;
  font-size: .92rem;
  line-height:1.55;
  color: rgba(243,238,227,.8);
}

.contacto::before{
  background-image: var(--bg-img, radial-gradient(circle at 50% 0%, rgba(176,141,87,.22), transparent 60%)),
    linear-gradient(180deg, #10283d, var(--navy-deep));
}
.contacto::after{ background: rgba(7,20,32,.5); }
.contacto__panel{ max-width: 500px; }
.contacto__linea{
  font-family: var(--font-mono);
  font-size: .95rem;
  margin: .3rem 0;
  color: rgba(243,238,227,.85);
}
.social-row--footer{ justify-content:flex-start;
  padding-top: 10vh; margin-top: 1.8rem; }
.footer__nota{
  margin-top: 3.5rem;
  font-size: .72rem;
  letter-spacing:.08em;
  color: rgba(243,238,227,.4);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 560px){
  .docket__item{ grid-template-columns: 60px 1fr; gap:.8rem; }
  .docket__num strong{ font-size:1.15rem; }
  .photo-frame{ width:132px; height:132px; }
  [data-parallax-bg]{ padding: 4.5rem 1.1rem; }
}