/* =========================================================
   Ricardo Avilés Mendoza
   Diseño jurídico realista, dinámico y responsivo
   ========================================================= */

:root{
  --charcoal:#17191b;
  --charcoal-2:#202327;
  --charcoal-3:#2d3136;
  --stone:#d8d3c9;
  --paper:#ece8df;
  --paper-light:#f5f1e9;
  --ink:#222427;
  --muted:#71747a;
  --ivory:#f3eee3;
  --metal:#b9b2a2;
  --metal-light:#e2daca;
  --line-dark:rgba(34,36,39,.14);
  --line-light:rgba(243,238,227,.16);
  --shadow:0 26px 70px rgba(15,17,18,.16);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;line-height:1.55;
  text-rendering:optimizeLegibility;overflow-x:hidden
}
body.menu-open{overflow:hidden}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.wrap{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.skip-link{
  position:fixed;left:14px;top:-70px;z-index:5000;
  background:var(--ivory);color:var(--charcoal);
  padding:10px 14px;border-radius:3px;text-decoration:none
}
.skip-link:focus{top:14px}

/* Navegación */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:1300;
  background:linear-gradient(180deg,rgba(15,17,19,.88),rgba(21,23,25,.76));
  border-bottom:1px solid rgba(243,238,227,.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .3s ease,box-shadow .3s ease
}
.topbar.scrolled{background:rgba(18,20,22,.97);box-shadow:0 16px 44px rgba(0,0,0,.18)}
.nav-wrap{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:grid;gap:3px;text-decoration:none;color:var(--ivory);line-height:1.08}
.brand-overline{color:var(--metal);font-size:.64rem;text-transform:uppercase;letter-spacing:.19em}
.brand strong{font-size:1.18rem;font-weight:600;letter-spacing:.015em}
.nav{display:flex;align-items:center;gap:28px}
.nav-link{
  position:relative;padding:9px 0;color:#ddd8cd;text-decoration:none;
  font-size:.86rem;letter-spacing:.08em
}
.nav-link::after{
  content:"";position:absolute;left:50%;right:50%;bottom:3px;height:1px;
  background:var(--metal-light);transition:left .25s ease,right .25s ease
}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.active::after{left:0;right:0}
.menu-btn{
  display:none;position:relative;width:44px;height:40px;padding:9px;
  background:transparent;border:1px solid rgba(243,238,227,.16);
  border-radius:3px;cursor:pointer
}
.menu-btn span{display:block;height:1px;margin:5px 0;background:var(--ivory);transition:.25s ease}

/* Portada */
.hero{
  --mx:55%;--my:35%;
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;padding:126px 0 86px;color:var(--ivory);
  background:
    linear-gradient(115deg,rgba(255,255,255,.02),transparent 33%),
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.07),transparent 26%),
    linear-gradient(145deg,#35393e 0%,#222529 46%,#141618 100%)
}
.hero-noise{
  position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.008) 0,rgba(255,255,255,.008) 1px,transparent 1px,transparent 6px)
}
.hero-spotlight{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 460px at var(--mx) var(--my),rgba(230,220,198,.105),transparent 68%);
  transition:background .08s linear
}
.architectural-line{position:absolute;border:1px solid rgba(243,238,227,.08);pointer-events:none}
.line-a{
  width:620px;height:620px;right:-350px;top:-320px;border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.008),0 0 0 140px rgba(255,255,255,.006)
}
.line-b{width:380px;height:380px;left:-250px;bottom:-180px;transform:rotate(22deg)}
.hero-grid{
  position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr);
  gap:76px;align-items:center
}
.hero-kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  color:var(--metal-light);text-transform:uppercase;font-size:.72rem;letter-spacing:.22em
}
.kicker-line{width:54px;height:1px;background:linear-gradient(90deg,var(--metal-light),transparent)}
.hero h1{
  margin:0;font-size:clamp(3.35rem,7vw,6.8rem);line-height:.91;
  letter-spacing:-.04em;font-weight:500;text-shadow:0 3px 18px rgba(0,0,0,.22)
}
.hero h1 em{font-style:normal;color:#ded8cc}
.hero-services{
  max-width:790px;margin:28px 0 0;color:#cbc6bc;
  font-size:clamp(.94rem,1.55vw,1.08rem);line-height:1.8
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:33px}
.btn{
  min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 21px;border-radius:3px;text-decoration:none;
  font-size:.88rem;letter-spacing:.055em;border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease
}
.btn:hover,.btn:focus-visible{transform:translateY(-3px)}
.btn-primary{
  color:#1f2225;background:linear-gradient(180deg,#f8f3e9 0%,#ded7c8 100%);
  border-color:#eee7d9;box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.7)
}
.btn-primary:hover{box-shadow:0 15px 34px rgba(0,0,0,.23)}
.btn-secondary{
  color:var(--ivory);border-color:rgba(243,238,227,.28);
  background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
.btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(243,238,227,.55)}
.btn-icon{font-size:.92rem}

/* Tarjeta con material y profundidad */
.identity-card{
  --rx:0deg;--ry:0deg;
  position:relative;overflow:hidden;padding:36px 32px 32px;min-height:520px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(243,238,227,.18);border-radius:6px;
  background:
    linear-gradient(118deg,rgba(255,255,255,.08),transparent 30%),
    linear-gradient(165deg,#34383d 0%,#282c30 45%,#1e2124 100%);
  box-shadow:
    0 38px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.4);
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .18s ease,box-shadow .35s ease
}
.identity-card:hover{box-shadow:0 46px 95px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.13)}
.card-sheen{
  position:absolute;inset:-35%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.08) 48%,transparent 58%);
  transform:translateX(-44%) rotate(8deg);transition:transform .7s ease
}
.identity-card:hover .card-sheen{transform:translateX(44%) rotate(8deg)}
.card-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px)
}
.metal-seal{
  position:absolute;right:30px;top:30px;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#eee7d8 0%,#b9b09e 38%,#706a60 74%,#3d3a35 100%);
  box-shadow:0 12px 25px rgba(0,0,0,.34),inset 0 2px 2px rgba(255,255,255,.6),inset 0 -3px 5px rgba(0,0,0,.42)
}
.seal-inner{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(41,40,37,.55);color:#292825;font-size:2.2rem;
  text-shadow:0 1px 0 rgba(255,255,255,.34);
  box-shadow:inset 0 0 0 4px rgba(244,238,225,.14)
}
.card-heading{position:relative;z-index:2;margin-bottom:18px;max-width:75%}
.card-heading small{
  display:block;margin-bottom:6px;color:#c7c0b3;text-transform:uppercase;
  letter-spacing:.18em;font-size:.65rem
}
.card-heading strong{font-size:1.56rem;font-weight:500;line-height:1.12;color:#f2ede3}
.engraved-rule{
  position:relative;z-index:2;height:1px;margin:0 0 23px;
  background:linear-gradient(90deg,rgba(243,238,227,.75),rgba(243,238,227,.1),transparent);
  box-shadow:0 1px 0 rgba(0,0,0,.45)
}
.card-contact{position:relative;z-index:2;display:grid;gap:2px;margin-bottom:18px}
.card-label{
  margin-bottom:5px;color:#aaa396;text-transform:uppercase;letter-spacing:.17em;font-size:.62rem
}
.card-contact a{
  width:fit-content;max-width:100%;color:#f1ece2;text-decoration:none;
  font-size:1.16rem;line-height:1.42;border-bottom:1px solid transparent;overflow-wrap:anywhere
}
.card-contact a:hover{border-color:#dad3c5}
.card-contact-small a{font-size:.89rem}
.identity-card address{
  position:relative;z-index:2;margin-top:5px;color:#c7c1b6;font-style:normal;font-size:.88rem
}
.scroll-cue{
  position:absolute;z-index:4;left:50%;bottom:20px;transform:translateX(-50%);
  display:grid;justify-items:center;gap:7px;color:#aaa59c;text-decoration:none;
  text-transform:uppercase;letter-spacing:.18em;font-size:.59rem
}
.scroll-cue i{width:1px;height:22px;background:#b8b1a4;animation:scrollLine 1.6s ease-in-out infinite}
@keyframes scrollLine{
  0%{transform:scaleY(.2);transform-origin:top;opacity:.2}
  55%{opacity:1}
  100%{transform:scaleY(1);transform-origin:top;opacity:.05}
}

/* Servicios */
.services{
  position:relative;padding:116px 0 126px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.65),transparent 34%),
    repeating-linear-gradient(0deg,rgba(42,44,47,.018) 0,rgba(42,44,47,.018) 1px,transparent 1px,transparent 5px),
    var(--paper)
}
.paper-shadow{
  position:absolute;left:0;right:0;top:0;height:45px;
  background:linear-gradient(180deg,rgba(0,0,0,.06),transparent);pointer-events:none
}
.section-head{text-align:center;max-width:740px;margin:0 auto 58px}
.section-overline{color:var(--muted);font-size:.69rem;letter-spacing:.22em;text-transform:uppercase}
.section-overline.light{color:#aaa397}
.section-head h2{
  margin:7px 0 0;font-size:clamp(2.45rem,4vw,4rem);
  line-height:1;font-weight:500;letter-spacing:-.025em
}
.section-rule{
  width:92px;height:1px;margin:24px auto 0;
  background:linear-gradient(90deg,transparent,#37393c,transparent)
}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-card{
  --cx:50%;--cy:50%;
  position:relative;overflow:hidden;min-height:238px;padding:30px 28px 28px;
  display:flex;align-items:flex-end;border:1px solid rgba(52,54,57,.16);border-radius:3px;
  background:
    radial-gradient(circle 180px at var(--cx) var(--cy),rgba(255,255,255,.85),transparent 65%),
    linear-gradient(155deg,#f3efe7 0%,#e2ddd3 100%);
  box-shadow:0 16px 34px rgba(42,44,47,.08),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(84,80,73,.08);
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease
}
.service-card::before{
  content:"";position:absolute;inset:0;opacity:.28;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(37,39,41,.018) 0,rgba(37,39,41,.018) 1px,transparent 1px,transparent 4px)
}
.service-card:hover{
  transform:translateY(-9px) rotateX(1deg);
  box-shadow:0 26px 55px rgba(42,44,47,.16),inset 0 1px 0 rgba(255,255,255,.94);
  border-color:rgba(52,54,57,.28)
}
.folder-tab{
  position:absolute;left:20px;top:0;padding:7px 11px 6px;
  background:linear-gradient(180deg,#b9b09f,#989081);color:#26282a;border-radius:0 0 3px 3px;
  font-size:.65rem;letter-spacing:.15em;box-shadow:0 4px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.4)
}
.service-mark{
  position:absolute;right:22px;top:16px;color:rgba(44,46,49,.18);
  font-size:4rem;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.65)
}
.service-card h3{
  position:relative;z-index:2;margin:0;max-width:92%;
  font-size:clamp(1.33rem,2.25vw,1.87rem);line-height:1.17;font-weight:500
}
.card-edge{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,#6b675e,#c9c1b2,#777166)
}
.service-wide{grid-column:2/span 2}

/* Contacto */
.contact{
  position:relative;overflow:hidden;padding:120px 0;color:var(--ivory);
  background:
    linear-gradient(120deg,rgba(255,255,255,.02),transparent 42%),
    radial-gradient(circle at 83% 12%,rgba(220,211,193,.075),transparent 26%),
    linear-gradient(145deg,#2d3135 0%,#1f2225 54%,#151719 100%)
}
.contact::before{
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 5px)
}
.contact-light{
  position:absolute;right:-180px;top:-230px;width:650px;height:650px;border-radius:50%;
  border:1px solid rgba(243,238,227,.07);
  box-shadow:0 0 0 85px rgba(255,255,255,.006),0 0 0 170px rgba(255,255,255,.004)
}
.contact-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:.83fr 1.17fr;gap:78px
}
.contact-heading{align-self:start;position:sticky;top:120px}
.contact-heading h2{
  margin:9px 0 0;font-size:clamp(3rem,5vw,5.3rem);
  line-height:.91;letter-spacing:-.04em;font-weight:500
}
.contact-heading h2 em{font-style:normal;color:#d5cfc2}
.contact-heading p{margin:20px 0 0;color:#aaa499;letter-spacing:.05em}
.contact-console{display:grid;gap:15px}
.contact-panel{
  position:relative;display:grid;grid-template-columns:62px 1fr;gap:20px;
  padding:28px 30px;border:1px solid rgba(243,238,227,.14);border-radius:4px;
  background:linear-gradient(100deg,rgba(255,255,255,.052),rgba(255,255,255,.022));
  box-shadow:0 18px 38px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .28s ease,border-color .28s ease,background .28s ease
}
.contact-panel:hover{
  transform:translateX(7px);border-color:rgba(243,238,227,.28);
  background:linear-gradient(100deg,rgba(255,255,255,.075),rgba(255,255,255,.03))
}
.panel-icon{
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  color:#282724;font-size:1.05rem;
  background:radial-gradient(circle at 33% 27%,#ebe4d5,#a69e8f 68%,#6f685e 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.7)
}
.panel-label{
  display:block;margin-bottom:8px;color:#aaa398;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase
}
.phone-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 18px}
.phone-list a,.email{
  width:fit-content;max-width:100%;color:#f0ebe1;text-decoration:none;
  border-bottom:1px solid transparent;overflow-wrap:anywhere
}
.phone-list a{font-size:clamp(1.23rem,2.3vw,1.7rem)}
.email{font-size:clamp(1rem,2.2vw,1.42rem)}
.phone-list a:hover,.email:hover{border-color:#d8d1c4}
.contact-panel address{font-style:normal;color:#ddd7cc;font-size:1.02rem}

/* Contacto rápido */
.quick-contact{
  padding:38px 0;background:linear-gradient(180deg,#d9d4c9 0%,#cbc5b9 100%);
  border-top:1px solid rgba(37,39,42,.14);border-bottom:1px solid rgba(37,39,42,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42)
}
.quick-grid{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:32px}
.quick-name{display:grid;gap:3px}
.quick-name span{color:#696b6e;font-size:.64rem;text-transform:uppercase;letter-spacing:.17em}
.quick-name strong{font-size:1.24rem;font-weight:600}
.quick-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 18px}
.quick-links a{color:#2e3032;text-decoration:none;border-bottom:1px solid rgba(46,48,50,.28);overflow-wrap:anywhere}

/* Pie */
.footer{padding:58px 0;background:#111315;color:#ece7dd}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px}
.footer-label{display:block;margin-bottom:4px;color:#999388;font-size:.64rem;text-transform:uppercase;letter-spacing:.17em}
.footer-grid strong{font-size:1.16rem}
.footer-contact{display:grid;gap:5px}
.footer-contact a{color:#d1ccc2;text-decoration:none;overflow-wrap:anywhere}
.footer address{color:#b9b4aa;font-style:normal}

/* Animaciones seguras */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1)
}
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:900;width:45px;height:45px;
  border-radius:50%;border:1px solid rgba(243,238,227,.16);
  background:rgba(19,21,23,.94);color:var(--ivory);cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s ease
}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--metal-light);outline-offset:4px}

/* Tablet */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-copy{text-align:center}
  .hero-kicker{justify-content:center}
  .hero-services{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .identity-card{width:min(100%,620px);margin:auto;min-height:460px;text-align:left}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-wide{grid-column:auto}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .contact-heading{position:static;text-align:center}
  .phone-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer address{grid-column:1/-1}
}

/* Móvil */
@media (max-width:760px){
  .nav-wrap{min-height:70px}
  .menu-btn{display:block;z-index:1402}
  .nav{
    position:fixed;inset:0;z-index:1401;display:flex;flex-direction:column;
    justify-content:center;gap:24px;background:rgba(15,17,19,.988);
    opacity:0;visibility:hidden;transform:translateY(-100%);transition:.3s ease
  }
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav-link{font-size:1.28rem}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hero{padding-top:110px}
  .hero h1{font-size:clamp(3rem,13vw,4.8rem)}
  .hero-kicker{font-size:.64rem}
  .identity-card{transform:none!important}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:190px}
  .phone-list{grid-template-columns:1fr}
  .contact-panel{grid-template-columns:52px 1fr;padding:24px 20px}
  .quick-grid{grid-template-columns:1fr}
  .quick-links{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr}
  .footer address{grid-column:auto}
}

/* Teléfono pequeño */
@media (max-width:480px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .brand-overline{font-size:.57rem}
  .brand strong{font-size:.96rem}
  .hero{padding-bottom:84px}
  .hero h1{font-size:clamp(2.65rem,14vw,4rem)}
  .hero-services{font-size:.91rem;line-height:1.7}
  .hero-actions{display:grid}
  .btn{width:100%}
  .identity-card{padding:30px 22px 26px;min-height:470px}
  .metal-seal{width:72px;height:72px;right:22px;top:22px}
  .seal-inner{width:54px;height:54px;font-size:1.8rem}
  .card-heading{max-width:72%}
  .card-heading strong{font-size:1.3rem}
  .services,.contact{padding:86px 0}
  .service-card{padding:26px 22px}
  .contact-heading h2{font-size:clamp(2.7rem,14vw,4rem)}
  .contact-panel{grid-template-columns:1fr}
  .panel-icon{width:46px;height:46px}
}

/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important
  }
  .js .reveal{opacity:1;transform:none}
  .identity-card{transform:none!important}
}