/* ============ TOKENS ============ */
:root{
  --caoba: #5C1A1F;
  --caoba-deep: #3B0F14;
  --caoba-light: #7A2A30;
  --crema: #F4ECDD;
  --crema-soft: #EAE0CB;
  --bronce: #8B6F47;
  --texto-oscuro: #2B1810;

  --font-display: "Cormorant Garamond", 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(--crema);
  color: var(--texto-oscuro);
  font-family: var(--font-body);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  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; }
}

/* ============ LAYOUT GENERAL ============ */
.layout{
  display:flex;
  min-height:100vh;
}

/* ============ PANEL LATERAL (placa institucional) ============ */
.panel{
  width: 34%;
  min-width: 340px;
  max-width: 420px;
  position: sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 3rem 2.4rem;
  border-right: 1px solid rgba(139,111,71,.5);
  overflow: hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image: var(--panel-bg, none);
  background-size: cover;
  background-position: center;
}
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(175deg, rgba(92,26,31,.65) 0%, rgba(59,15,20,.8) 100%);
}
.panel > *{ position:relative; z-index:2; color: var(--crema); }
.panel .eyebrow{ color: rgba(244,236,221,.55); }

.panel__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  opacity:0;
  transform: translateX(-16px);
  animation: panelIn .9s .15s var(--ease) forwards;
}
@keyframes panelIn{ to{ opacity:1; transform:translateX(0); } }

/* --- Foto tipo plafón con cortina --- */
.photo-plaque{
  position:relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--bronce);
  padding: 8px;
  margin-bottom: 1.8rem;
  background: rgba(244,236,221,.04);
}
.photo-plaque::before{
  content:"";
  position:absolute;
  inset: 4px;
  border: 1px solid rgba(139,111,71,.6);
  pointer-events:none;
  z-index:3;
}
.photo-plaque__img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 20%;
  background: rgba(244,236,221,.08);
}
.photo-plaque__curtain{
  position:absolute;
  inset: 8px;
  background: var(--caoba-deep);
  z-index:2;
  transform-origin: top;
  animation: curtainLift 1.1s .5s var(--ease) forwards;
}
@keyframes curtainLift{
  to{ transform: scaleY(0); }
}

.panel__nombre{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  margin: 0;
  line-height: 1.15;
}
.rule{
  width: 0;
  height: 1px;
  background: var(--bronce);
  margin: .8rem 0 .9rem;
  animation: ruleDraw .8s .9s var(--ease) forwards;
}
@keyframes ruleDraw{ to{ width: 64px; } }

.panel__cargo{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  margin: 0 0 .5rem;
  color: var(--crema);
}
.panel__juzgado{
  font-size: .88rem;
  line-height:1.5;
  margin:0 0 .3rem;
  color: rgba(244,236,221,.85);
  max-width: 280px;
}
.panel__sede{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing:.04em;
  color: rgba(244,236,221,.5);
  margin: 0 0 2rem;
}

/* --- Redes (columna, panel lateral) --- */
.social-col{
  display:flex;
  gap: .7rem;
}
.social-col a, .social-row-mobile a{
  width: 40px;
  aspect-ratio: 1/1;
  border: 1px solid var(--bronce);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background .25s var(--ease), border-color .25s;
}
.social-col a svg, .social-row-mobile a svg{
  width: 17px; height:17px; display:block;
  fill: var(--crema);
}
.social-col a:hover, .social-col a:focus-visible,
.social-row-mobile a:hover, .social-row-mobile a:focus-visible{
  background: var(--bronce);
  outline:none;
}

/* ============ CONTENIDO PRINCIPAL (documento) ============ */
.doc{
  width: 66%;
  flex:1;
  background:
    radial-gradient(circle at 90% 0%, rgba(139,111,71,.05), transparent 45%),
    var(--crema);
}

[data-parallax-bg]{
  position:relative;
  padding: 6rem 4rem;
  overflow:hidden;
  border-bottom: 1px solid rgba(139,111,71,.25);
}
[data-parallax-bg]::before{
  content:"";
  position:absolute;
  top:-10%; left:0; right:0; height:120%;
  z-index:0;
  opacity: .5;
  background-image:
    var(--bg-img, none),
    repeating-linear-gradient(0deg, rgba(139,111,71,.05) 0 1px, transparent 1px 26px);
  background-size: cover, auto;
  background-position: center, center;
  will-change: transform;
  transform: translateY(var(--parallax-y, 0px));
}
[data-parallax-bg] > *{ position:relative; z-index:1; }

.doc__section--semblanza{ max-width: 720px; }
.doc__texto{
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--caoba-deep);
  margin:0;
}

.doc__titulo{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  margin: 0 0 2.5rem;
  color: var(--caoba-deep);
}

/* --- Timeline vertical --- */
.timeline{
  position:relative;
  max-width: 680px;
  padding-left: 1.6rem;
  border-left: 1px solid var(--bronce);
}
.timeline__item{
  position:relative;
  padding-bottom: 2.4rem;
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item.is-visible{ opacity:1; transform:none; }

.timeline__item::before{
  content:"";
  position:absolute;
  left: -1.85rem;
  top: .35rem;
  width: 9px; height:9px;
  border-radius:50%;
  background: var(--crema);
  border: 2px solid var(--caoba);
}
.timeline__anio{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--bronce);
  margin: 0 0 .3rem;
}
.timeline__titulo{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.25rem;
  margin: 0 0 .35rem;
  color: var(--caoba-deep);
}
.timeline__desc{
  margin:0;
  font-size: .92rem;
  line-height:1.55;
  color: rgba(43,24,16,.75);
  max-width: 540px;
}

/* --- Contacto --- */
.doc__section--contacto{ text-align:left; max-width: 500px; }
.doc__linea{
  font-family: var(--font-mono);
  font-size: .92rem;
  margin: .3rem 0;
  color: var(--caoba-deep);
}
.social-row-mobile{
  display:none;
  gap:.7rem;
  margin: 1.4rem 0 1.8rem;
}
.social-row-mobile a{ border-color: var(--caoba); }
.social-row-mobile a svg{ fill: var(--caoba-deep); }
.doc__nota{
  margin-top: 2rem;
  font-size: .7rem;
  letter-spacing:.06em;
  color: rgba(43,24,16,.45);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 880px){
  .layout{ flex-direction:column; }
  .panel{
    width:100%;
    max-width:none;
    min-width:0;
    height:auto;
    position:relative;
    padding: 3rem 1.6rem;
    align-items:center;
  }
  .panel__inner{ align-items:center; text-align:center; }
  .panel__juzgado{ max-width: none; }
  .photo-plaque{ max-width: 180px; }
  .doc{ width:100%; }
  [data-parallax-bg]{ padding: 3.5rem 1.4rem; }
  .doc__section--semblanza, .doc__titulo, .timeline, .doc__section--contacto{ max-width:none; }
  .social-col{ display:none; }
  .social-row-mobile{ display:flex; justify-content:center; }
  .rule{ margin-left:auto; margin-right:auto; }
}