/* =========================================================
   LEÓN & GALVÁN ABOGADOS — hoja de estilos
   Paleta e identidad basadas en el logotipo de la firma
   ========================================================= */

:root{
  --green-950:#171d15;
  --green-800:#233024;
  --green-700:#31402c;
  --green-600:#47593f;   /* verde de marca */
  --green-500:#5b7050;
  --gold-600:#a9854c;
  --gold-500:#c9a96e;   /* dorado de marca */
  --gold-300:#e6d9b6;
  --ivory:#f8f5ec;
  --ivory-200:#efe9da;
  --charcoal:#22241f;
  --line:rgba(201,169,110,.35);

  --font-display:"Fraunces", "Georgia", serif;
  --font-sans:"Jost", "Segoe UI", sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-sans);
  color:var(--charcoal);
  background:var(--ivory);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--green-800);
  font-weight:500;
  line-height:1.15;
  margin:0;
}

a{color:inherit; text-decoration:none;}

img{max-width:100%; display:block;}

.container-xl{max-width:1200px; margin:0 auto; padding-left:2rem; padding-right:2rem;}

/* ---------- Utility: kicker / section labels ---------- */
.kicker{
  font-family:var(--font-sans);
  /* font-size:.82rem; */
  letter-spacing:.09em;
  color:var(--gold-600);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.9rem;
}
.kicker::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold-500);
  display:inline-block;
}

.section-head{max-width:640px; margin-bottom:3rem;}
.section-head h2{font-size:2.1rem;}
.section-head p{color:#4c5147; margin-top:1rem; font-size:1.05rem;}

section{padding:5.5rem 0;}

/* ---------- Buttons ---------- */
.btn-brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.9rem;
  border:1px solid var(--gold-500);
  color:var(--gold-300);
  font-family:var(--font-sans);
  font-size:.95rem;
  letter-spacing:.02em;
  border-radius:2px;
  transition:background .25s ease, color .25s ease;
  background:transparent;
}
.btn-brand:hover{background:var(--gold-500); color:var(--green-950);}

.btn-brand-solid{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.9rem;
  border:1px solid var(--green-600);
  background:var(--green-600);
  color:var(--ivory);
  font-family:var(--font-sans);
  font-size:.95rem;
  border-radius:2px;
  transition:background .25s ease, border-color .25s ease;
}
.btn-brand-solid:hover{background:var(--green-800); border-color:var(--green-800); color:var(--ivory);}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:1.1rem 0;
  background:transparent;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:var(--green-950);
  padding:.7rem 0;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.site-header .container-xl{display:flex; align-items:center; justify-content:space-between;}

.brand-mark{display:flex; align-items:center;}
.brand-logo{height:34px; width:auto; display:block;}

.nav-links{display:flex; align-items:center; gap:2.1rem; margin:0; padding:0; list-style:none;}
.nav-links a{
  color:var(--ivory);
  font-size:.92rem;
  opacity:.85;
  position:relative;
  padding:.3rem 0;
}
.nav-links a:hover{opacity:1;}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:var(--gold-500);
  transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--gold-500);
  width:42px; height:38px;
  border-radius:2px;
  color:var(--ivory);
  align-items:center; justify-content:center;
}

.nav-close-item{display:none;}
.nav-close{
  background:none; border:1px solid var(--gold-500);
  width:38px; height:36px;
  border-radius:2px;
  color:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.nav-close:hover{background:var(--gold-500); color:var(--green-950);}

@media (max-width:991px){
  .nav-links{
    position:fixed; top:0; right:0; bottom:0;
    width:78%; max-width:340px;
    background:var(--green-950);
    flex-direction:column;
    align-items:flex-start;
    padding:5rem 2rem 2rem;
    gap:1.6rem;
    transform:translateX(100%);
    transition:transform .35s ease;
    box-shadow:-12px 0 30px rgba(0,0,0,.25);
  }
  .nav-links.is-open{transform:translateX(0);}
  .nav-close-item{
    display:block;
    position:absolute;
    top:1.3rem; right:1.4rem;
  }
  .nav-toggle{display:inline-flex;}
  .nav-cta{display:none;}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  background-color:var(--green-800);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1100px 600px at 82% -10%, rgba(201,169,110,.12), transparent 80%),
    linear-gradient(180deg, var(--green-950), var(--green-800) 55%, var(--green-700));
  background-blend-mode:overlay, normal, normal;
  background-size:240px 240px, auto, auto;
  color:var(--ivory);
  min-height:92vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(201,169,110,.25);
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  top:6%; bottom:6%;
  width:1px;
  background:rgba(201,169,110,.25);
}
.hero::before{left:5%;}
.hero::after{right:5%;}

.hero-inner{position:relative; z-index:2; text-align:center; margin:0 auto; max-width:900px;}

.hero-logo{
  height:64px;
  width:auto;
  margin:0 auto 1.5rem;
  display:block;
}

.hero-heading{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.9rem, 4.4vw, 3.15rem);
  line-height:1.28;
  color:var(--ivory);
  max-width:780px;
  margin:2.8rem 2rem 2.8rem;
  min-height:clamp(8.7rem, 13vw, 8.7rem); /* reserves space so layout doesn't jump while typing */
}

.type-cursor{
  display:inline-block;
  width:2px;
  margin-left:.15rem;
  background:var(--gold-500);
  height:.85em;
  transform:translateY(.1em);
  animation:blink .9s steps(1) infinite;
}
.type-cursor.is-done{animation:blink .9s steps(1) infinite; opacity:.7;}
@keyframes blink{
  0%, 49%{opacity:1;}
  50%, 100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .type-cursor{animation:none; opacity:0;}
}

.hero-ctas{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}

/* =========================================================
   SERVICIOS
   ========================================================= */
.services{background:var(--ivory);}
.service-card{
  border:1px solid rgba(71,89,63,.18);
  padding:2.4rem 2rem;
  height:100%;
  background:#fff;
  transition:border-color .25s ease, transform .25s ease;
}
.service-card:hover{border-color:var(--gold-500); transform:translateY(-4px);}
.service-card h3{
  font-size:1.25rem;
  color:var(--green-700);
}
.service-card .rule{width:34px; height:2px; background:var(--gold-500); margin:1rem 0 1.4rem;}
.service-card ul{list-style:none; padding:0; margin:0;}
.service-card ul li{
  padding:.5rem 0;
  border-bottom:1px dashed rgba(71,89,63,.15);
  color:#3a3d36;
  font-size:.98rem;
}
.service-card ul li:last-child{border-bottom:none;}

/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */
.about{
  background:var(--green-950);
  color:var(--ivory-200);
  position:relative;
}
.about .kicker{color:var(--gold-500);}
.about .kicker::before{background:var(--gold-500);}
.about-grid{display:grid; grid-template-columns:1fr 1px 1.15fr; gap:3rem; align-items:center;}
.about-grid .divider{background:rgba(201,169,110,.3); height:100%; min-height:180px;}
.about-photo{
  border:1px solid rgba(201,169,110,.4);
  padding:10px;
  background:rgba(255,255,255,.02);
}
.about-photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  filter:grayscale(.25) contrast(1.05) brightness(.96);
}
.about-copy p{margin:0 0 1.1rem; color:#d8d9cf; font-size:1.03rem;}
.about-copy strong{color:var(--ivory);}

@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;}
  .about-grid .divider{display:none;}
}

/* =========================================================
   EQUIPO
   ========================================================= */
.team{background:var(--ivory-200);}
.team-card{background:#fff; border:1px solid rgba(71,89,63,.15); height:100%;}
.team-photo{aspect-ratio:3/4; overflow:hidden; position:relative;}
.team-photo img{width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(.15) contrast(1.02);}
.team-body{padding:1.6rem 1.5rem 1.8rem;}
.team-body .name{font-family:var(--font-display); font-size:1.18rem; color:var(--green-800);}
.team-body .role{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-600); margin:.35rem 0 1rem; font-weight:500;
}
.team-body ul{list-style:none; padding:0; margin:0;}
.team-body ul li{
  font-size:.86rem;
  color:#4a4d44;
  padding:.4rem 0 .4rem 1rem;
  position:relative;
  border-top:1px solid rgba(71,89,63,.1);
}
.team-body ul li:first-child{border-top:none;}
.team-body ul li::before{
  content:"";
  position:absolute; left:0; top:1rem;
  width:5px; height:1px; background:var(--gold-500);
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{background:var(--ivory);}
.contact-info{background:var(--green-700); color:var(--ivory); padding:3rem 2.4rem; height:100%;}
.contact-info .kicker{color:var(--gold-500);}
.contact-info .kicker::before{background:var(--gold-500);}
.contact-list{list-style:none; padding:0; margin:2rem 0 0;}
.contact-list li{display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start;}
.contact-list .ico{
  width:38px; height:38px; flex:0 0 38px;
  border:1px solid var(--gold-500); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold-500);
}
.contact-list .label{font-size:.76rem; letter-spacing:.08em; color:var(--gold-300); text-transform:uppercase;}
.contact-list .value{color:var(--ivory); font-size:1rem;}

.social-row{display:flex; gap:.75rem; margin-top:2rem;}
.social-row a{
  width:38px; height:38px; border:1px solid rgba(248,245,236,.35); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ivory);
  transition:background .2s ease, border-color .2s ease;
}
.social-row a:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--green-950);}

.contact-form-wrap{background:#fff; border:1px solid rgba(71,89,63,.15); padding:3rem 2.4rem; height:100%;}
.form-brand .form-label{font-size:.82rem; letter-spacing:.03em; color:var(--green-800); font-weight:500;}
.form-brand .form-control,
.form-brand textarea.form-control{
  border:none;
  border-bottom:1px solid rgba(71,89,63,.3);
  border-radius:0;
  padding:.6rem .1rem;
  background:transparent;
  font-family:var(--font-sans);
}
.form-brand .form-control:focus{
  box-shadow:none;
  border-color:var(--gold-500);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--green-950); color:#c9cbc0; padding:3.5rem 0 1.6rem;}
.site-footer .footer-logo{height:32px; width:auto;}
.site-footer h4{
  color:var(--ivory); font-family:var(--font-sans); font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.2rem; font-weight:500;
}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer ul li{margin-bottom:.65rem;}
.site-footer ul li a{color:#c9cbc0; font-size:.92rem;}
.site-footer ul li a:hover{color:var(--gold-500);}
.footer-bottom{
  border-top:1px solid rgba(201,169,110,.18);
  margin-top:2.6rem; padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.82rem; color:#8f9186;
}

/* back to top */
.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:900;
  width:44px; height:44px; border-radius:50%;
  background:var(--green-950); color:var(--gold-500);
  border:1px solid var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:translateY(0);}

@media (max-width:767px){
  section{padding:3.8rem 0;}
  .contact-info, .contact-form-wrap{padding:2.2rem 1.5rem;}
}

/* =========================================================
   ANIMACIONES DE APARICIÓN AL HACER SCROLL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}
.reveal-delay-5{transition-delay:.5s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}