/* ============================================================
   AYALA MANRÍQUEZ ABOGADOS — Hoja de estilos
   Sistema de diseño editorial / corporativo legal
   ============================================================ */

:root{
  /* Paleta */
  --ink:        #0c1a2b;   /* navy profundo, casi negro */
  --ink-2:      #122740;   /* navy secundario */
  --ink-3:      #1c3a5e;   /* navy claro para detalles */
  --paper:      #f6f3ec;   /* crema cálido (fondo editorial) */
  --paper-2:    #ffffff;
  --bronze:     #ab8a51;   /* dorado/bronce sobrio (acento) */
  --bronze-2:   #c2a571;
  --slate:      #51606f;   /* texto secundario sobre claro */
  --slate-2:    #6f7b88;
  --line:       rgba(12,26,43,.12);
  --line-soft:  rgba(255,255,255,.14);

  /* Tipografía */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:16.5px;
  font-weight:400;
  letter-spacing:.005em;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:.01em; }
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--bronze);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:32px; height:1px; background:var(--bronze); display:inline-block; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }
.section-pad{ padding-block:clamp(72px, 11vw, 140px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:18px;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease, border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; gap:14px; color:#fff; transition:color .4s; }
.logo{ height:56px; width:auto; display:block; transition:height .4s ease; }
.logo-on-light{ display:none; }
.site-header.scrolled .logo-on-dark{ display:none; }
.site-header.scrolled .logo-on-light{ display:block; }
.site-header.scrolled .logo{ height:46px; }
.brand .monogram{
  width:42px; height:42px; flex:none;
  border:1px solid var(--bronze);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.05rem; font-weight:600; letter-spacing:.02em;
  color:var(--bronze);
}
.brand .wordmark{ display:flex; flex-direction:column; line-height:1; }
.brand .wordmark b{ font-family:var(--serif); font-weight:600; font-size:1.18rem; letter-spacing:.06em; }
.brand .wordmark span{ font-size:.6rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase; margin-top:5px; opacity:.7; }

.nav{ display:flex; align-items:center; gap:38px; }
.nav a{
  color:#fff; font-size:.82rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  position:relative; padding-block:6px; transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--bronze); transition:width .35s ease;
}
.nav a:hover{ color:var(--bronze-2); }
.nav a:hover::after{ width:100%; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--bronze);
  color:var(--ink); background:var(--bronze);
  cursor:pointer; transition:.35s ease; border-radius:var(--radius);
}
.btn:hover{ background:transparent; color:var(--bronze-2); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ border-color:var(--bronze); color:var(--bronze-2); background:transparent; }
.nav .btn{ color:var(--ink); }

/* Header en estado "scrolled" (fondo sólido claro) */
.site-header.scrolled{
  background:var(--paper-2);
  box-shadow:0 1px 24px rgba(12,26,43,.08);
  border-bottom-color:var(--line);
  padding-block:12px;
}
.site-header.scrolled .brand,
.site-header.scrolled .nav a{ color:var(--ink); }
.site-header.scrolled .nav a:hover{ color:var(--bronze); }
.site-header.scrolled .brand .wordmark span{ opacity:.55; }

/* Botón hamburguesa */
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:26px; height:2px; background:#fff; transition:.3s; }
.site-header.scrolled .burger span{ background:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(28,58,94,.55) 0%, transparent 55%),
    linear-gradient(180deg, #0c1a2b 0%, #0e2138 55%, #0c1a2b 100%);
}
/* Textura sutil de líneas verticales */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:clamp(70px,9vw,120px) 100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.hero .container{ position:relative; z-index:2; padding-top:120px; padding-bottom:60px; }
.hero-inner{ max-width:880px; }
.hero h1{
  font-size:clamp(2.7rem, 6.4vw, 5.4rem);
  font-weight:500; line-height:1.02; letter-spacing:.005em; margin-top:26px;
}
.hero h1 em{ font-style:italic; color:var(--bronze-2); }
.hero p.lead{
  font-size:clamp(1.02rem,1.5vw,1.28rem); color:rgba(255,255,255,.78);
  max-width:620px; margin-top:30px; font-weight:300; line-height:1.7;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:42px; }

/* Pie del hero: dato/ubicación */
.hero-meta{
  position:absolute; left:var(--gut); right:var(--gut); bottom:34px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55); border-top:1px solid var(--line-soft); padding-top:20px;
}
.hero-meta .scroll-hint{ display:inline-flex; align-items:center; gap:10px; }
.hero-meta .scroll-hint i{ width:1px; height:26px; background:var(--bronze); display:inline-block; animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%,100%{opacity:.3; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)} }

/* ============================================================
   NOSOTROS
   ============================================================ */
.about{ background:var(--paper); }
.about-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(36px,6vw,90px); align-items:start; }
.about h2{ font-size:clamp(2rem,3.6vw,3.2rem); margin-top:22px; }
.about-lead{ font-size:clamp(1.1rem,1.6vw,1.4rem); color:var(--ink); line-height:1.5; font-family:var(--serif); font-style:italic; }
.about-body p{ color:var(--slate); margin-top:20px; max-width:56ch; }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:54px; border:1px solid var(--line); }
.values div{ background:var(--paper); padding:26px 22px; }
.values .num{ font-family:var(--serif); font-size:1.5rem; color:var(--bronze); line-height:1.1; }
.values .lbl{ font-size:.88rem; color:var(--slate); margin-top:10px; line-height:1.45; }

/* ============================================================
   ÁREAS DE PRÁCTICA
   ============================================================ */
.areas{ background:var(--ink); color:#fff; }
.areas .head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:54px; }
.areas h2{ font-size:clamp(2rem,3.8vw,3.4rem); margin-top:20px; max-width:14ch; }
.areas .head p{ color:rgba(255,255,255,.6); max-width:34ch; font-weight:300; }
.areas-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft); }
.area-card{
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:40px 34px 46px; position:relative; transition:background .4s ease;
}
.area-card .idx{ font-family:var(--serif); font-size:.95rem; color:var(--bronze); letter-spacing:.1em; }
.area-card h3{ font-size:1.55rem; margin-top:26px; font-weight:500; transition:color .4s; }
.area-card p{ color:rgba(255,255,255,.62); font-size:.95rem; margin-top:14px; font-weight:300; line-height:1.6; }
.area-card .line{ width:36px; height:2px; background:var(--bronze); margin-top:28px; transition:width .45s ease; }
.area-card:hover{ background:var(--ink-2); }
.area-card:hover .line{ width:80px; }
.area-card:hover h3{ color:var(--bronze-2); }

/* ============================================================
   EQUIPO
   ============================================================ */
.team{ background:var(--paper); }
.team .head{ text-align:center; max-width:680px; margin:0 auto 64px; }
.team h2{ font-size:clamp(2rem,3.8vw,3.4rem); margin-top:20px; }
.team .head p{ color:var(--slate); margin-top:18px; }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,4vw,56px); max-width:920px; margin-inline:auto; }
.member{ background:var(--paper-2); border:1px solid var(--line); overflow:hidden; transition:transform .45s ease, box-shadow .45s ease; }
.member:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(12,26,43,.4); }
.member .photo{ aspect-ratio:4/5; overflow:hidden; background:var(--ink-2); }
.member .photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:grayscale(100%) contrast(1.02); transition:filter .6s ease, transform .9s ease; }
.member:hover .photo img{ filter:grayscale(0%); transform:scale(1.04); }
.member .info{ padding:30px 30px 0; }
.member .info h3{ font-size:1.7rem; font-weight:500; }
.member .role{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); margin-top:10px; font-weight:600; }
.member-bio{ font-size:.92rem; color:var(--slate); margin-top:16px; line-height:1.55; }
.member .contact{
  margin:26px -30px 0; padding:22px 30px 26px;
  background:var(--paper);
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:11px; font-size:.93rem;
}
.member .contact a{ color:var(--ink-2); display:inline-flex; align-items:center; gap:11px; transition:color .3s; width:fit-content; font-weight:500; }
.member .contact a:hover{ color:var(--bronze); }
.member .contact svg{ width:16px; height:16px; flex:none; color:var(--bronze); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{ background:var(--ink); color:#fff; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,6vw,84px); align-items:start; }
.contact h2{ font-size:clamp(2rem,3.8vw,3.4rem); margin-top:20px; }
.contact .intro p{ color:rgba(255,255,255,.7); margin-top:20px; max-width:42ch; font-weight:300; }
.info-list{ margin-top:42px; display:flex; flex-direction:column; gap:26px; }
.info-list .item{ display:flex; gap:18px; align-items:flex-start; }
.info-list .item svg{ width:20px; height:20px; flex:none; color:var(--bronze); margin-top:3px; }
.info-list .item .k{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:600; }
.info-list .item .v{ font-size:1rem; color:#fff; margin-top:4px; line-height:1.5; }
.info-list .item .v a:hover{ color:var(--bronze-2); }

/* Formulario */
.form-wrap{ background:rgba(255,255,255,.04); border:1px solid var(--line-soft); padding:clamp(28px,4vw,44px); }
.form-wrap h3{ font-size:1.6rem; font-weight:500; }
.field{ margin-top:22px; }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:600; margin-bottom:9px; }
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,.05); border:1px solid var(--line-soft);
  color:#fff; font-family:var(--sans); font-size:1rem; padding:14px 16px; border-radius:var(--radius);
  transition:border-color .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.35); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--bronze); background:rgba(255,255,255,.08); }
.field textarea{ resize:vertical; min-height:120px; }
.consent{ display:flex; gap:12px; align-items:flex-start; margin-top:22px; font-size:.85rem; color:rgba(255,255,255,.65); }
.consent input{ margin-top:4px; accent-color:var(--bronze); width:16px; height:16px; flex:none; }
.consent a{ color:var(--bronze-2); text-decoration:underline; text-underline-offset:3px; }
.form-wrap .btn{ width:100%; margin-top:26px; }
.form-note{ font-size:.78rem; color:rgba(255,255,255,.4); margin-top:16px; text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#091523; color:rgba(255,255,255,.6); padding-block:64px 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-soft); }
.footer-top .brand{ color:#fff; align-items:flex-start; }
.footer-top .brand .logo{ height:60px; }
.footer-col h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); font-weight:600; margin-bottom:18px; }
.footer-col a, .footer-col p{ display:block; font-size:.92rem; color:rgba(255,255,255,.6); margin-bottom:11px; transition:color .3s; }
.footer-col a:hover{ color:var(--bronze-2); }
.footer-brand-text{ font-size:.9rem; color:rgba(255,255,255,.5); margin-top:18px; max-width:30ch; line-height:1.6; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:24px; font-size:.8rem; color:rgba(255,255,255,.4); }
.footer-bottom a:hover{ color:var(--bronze-2); }

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.4s; }

/* Animación inicial del hero (sin esperar scroll) */
.hero .reveal{ opacity:0; transform:translateY(28px); animation:heroIn .95s cubic-bezier(.16,1,.3,1) forwards; }
.hero .reveal.d1{ animation-delay:.15s; } .hero .reveal.d2{ animation-delay:.3s; }
.hero .reveal.d3{ animation-delay:.45s; } .hero .reveal.d4{ animation-delay:.6s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-top .brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    background:var(--ink); flex-direction:column; align-items:flex-start;
    justify-content:center; padding:40px; gap:26px;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
    box-shadow:-30px 0 60px rgba(0,0,0,.4);
  }
  .nav.open{ transform:none; }
  .nav a{ color:#fff !important; font-size:1rem; }
  .site-header.scrolled .nav a{ color:#fff !important; }
  .burger{ display:flex; z-index:120; }
  .nav .btn{ width:100%; }
  .values{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .hero-meta{ display:none; }
}