/* ============================================================
   LIC. ANGÉLICA RAMOS U. — Sitio institucional
   CSS autónomo, responsivo, sin frameworks.
   ============================================================ */
:root {
  --navy: #0b2133;
  --navy-deep: #071724;
  --navy-lift: #14344a;
  --gold: #c7a36a;
  --gold-light: #efd7a8;
  --cream: #fbf9f4;
  --paper: #f5f1e9;
  --sand: #ece5da;
  --ink: #152b3a;
  --muted: #65717a;
  --stroke: #e7e2d9;
  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --container: 1210px;
  --header-height: 88px;
  --radius: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #e5b86a; outline-offset: 4px; }
::selection { background: var(--gold); color: var(--navy); }
.container { width: min(calc(100% - 80px), var(--container)); margin-inline: auto; }
.icon { height: 20px; width: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); position: absolute!important; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; background: var(--gold-light); color: var(--navy); font-weight: 700; padding: 10px 18px; border-radius: 5px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header { height: var(--header-height); background: rgba(7, 23, 36, .99); border-bottom: 1px solid rgba(221, 187, 131, .19); position: sticky; top: 0; z-index: 100; transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 14px 38px rgba(0,0,0,.17); }
.header-inner { min-height: 100%; display: flex; align-items: center; gap: 29px; }
.brand { display: inline-flex; gap: 13px; align-items: center; min-width: 0; color: #fff; flex: none; }
.brand-mark { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(220,184,123,.67); color: #e9cda0; font: 26px var(--serif); letter-spacing: -4px; padding-right: 3px; position: relative; }
.brand-mark::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(220,184,123,.28); pointer-events: none; }
.brand-dot { letter-spacing: 0; color: #fff; }
.brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; white-space: nowrap; }
.brand-text strong { font: 17px var(--serif); letter-spacing: 1.15px; font-weight: 400; }
.brand-text small { font-size: 9px; letter-spacing: 2.2px; color: var(--gold-light); font-weight: 650; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 33px); margin-left: auto; }
.nav-link { position: relative; color: #d6dfe1; font-size: 12px; letter-spacing: .4px; font-weight: 550; padding: 12px 0; transition: color .2s; }
.nav-link::after { content: ''; position: absolute; bottom: 5px; height: 1px; left: 0; width: 0; background: var(--gold); transition: width .25s; }
.nav-link:hover, .nav-link.is-active { color: var(--gold-light); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.header-call { display: inline-flex; align-items: center; gap: 11px; border: 1px solid rgba(226,193,143,.58); padding: 12px 15px; color: var(--gold-light); font-size: 12px; white-space: nowrap; font-weight: 700; letter-spacing: .25px; transition: background .25s, color .25s; }
.header-call .icon { width: 16px; height: 16px; }
.header-call:hover { background: var(--gold); color: var(--navy); }
.menu-toggle { display: none; }

/* Hero */
.hero { isolation: isolate; position: relative; overflow: hidden; background: radial-gradient(ellipse at 77% 41%, #1e4051 0%, #0d2739 30%, #091c2b 69%, #061724 100%); color: #fff; }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .20; pointer-events: none; background-image: linear-gradient(to right, transparent 99%, rgba(239,214,174,.2) 100%), linear-gradient(to bottom, transparent 99%, rgba(239,214,174,.2) 100%); background-size: 100px 100px; mask-image: linear-gradient(90deg, transparent, black); }
.hero::after { content: ''; position: absolute; top: -210px; right: -290px; width: 760px; height: 760px; border: 1px solid rgba(213,183,135,.09); border-radius: 50%; pointer-events: none; }
.hero-glow { position: absolute; pointer-events: none; border-radius: 100%; filter: blur(70px); opacity: .12; }
.hero-glow-one { width: 500px; height: 400px; background: #b99a66; left: -350px; bottom: -260px; }
.hero-glow-two { width: 360px; height: 330px; background: #60a2ab; right: -200px; top: -170px; }
.hero-grid { min-height: 700px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(30px,5vw,90px); padding-block: 66px 69px; position: relative; z-index: 2; }
.hero-copy { padding-block: 22px; max-width: 690px; }
.eyebrow { display: inline-flex; align-items: center; gap: 13px; color: #ac7f48; font-size: 10.5px; font-weight: 700; letter-spacing: 2.9px; text-transform: uppercase; line-height: 1.4; }
.eyebrow--light { color: #d9b57d; }
.eyebrow-line { display: inline-block; width: 29px; height: 1px; background: currentColor; }
.hero-kicker { color: #eef0eb; font-size: 13px; font-weight: 650; letter-spacing: 2.5px; margin: 36px 0 11px; }
.hero h1 { font: 400 clamp(52px, 5.2vw, 83px)/1.115 var(--serif); letter-spacing: -2.5px; margin: 0 0 25px; max-width: 750px; text-wrap: balance; }
.hero h1 span:not(.gold-point) { color: #e8c68d; }
.gold-point { color: var(--gold); }
.hero-description { color: #c1ccd1; font-size: 17px; max-width: 470px; margin: 0 0 33px; line-height: 1.8; }
.hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 23px; min-height: 52px; padding: 15px 25px; font-size: 12px; font-weight: 700; letter-spacing: .35px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease; border: 1px solid transparent; text-align: center; }
.button:hover { transform: translateY(-3px); }
.button .icon { width: 18px; height: 18px; }
.button--gold { background: #ddba84; color: #142734; border-color: #ddba84; }
.button--gold:hover { background: #f1d5a8; box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.button--outline { border-color: rgba(225,204,171,.52); color: #f5f1e9; background: rgba(255,255,255,.02); gap: 11px; }
.button--outline:hover { background: rgba(225,204,171,.11); }
.hero-facts { display: flex; gap: 31px; align-items: center; margin-top: 49px; }
.fact { display: inline-flex; align-items: center; gap: 12px; }
.fact-number { color: var(--gold-light); font: 43px/.9 var(--serif); letter-spacing: -1.5px; }
.fact-label { font-size: 9px; letter-spacing: 1.6px; line-height: 1.65; font-weight: 700; color: #c1cfd2; }
.fact-divider { display: block; height: 41px; width: 1px; background: rgba(226,209,179,.28); }
.hero-art { position: relative; padding: 0 23px 0 0; }
.art-border { width: 100%; height: 546px; border: 1px solid rgba(224,186,129,.34); padding: 13px; position: relative; background: linear-gradient(150deg, rgba(255,255,255,.035), rgba(255,255,255,0)); box-shadow: inset 0 0 75px rgba(226,181,114,.04), 0 15px 70px rgba(0,0,0,.14); }
.art-corner { z-index: 3; position: absolute; width: 37px; height: 37px; border-color: #efd7a8; border-style: solid; }
.art-corner--top { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.art-corner--bottom { right: -2px; bottom: -2px; border-width: 0 2px 2px 0; }
.art-frame { position: relative; width: 100%; height: calc(100% - 40px); overflow: hidden; border: 1px solid rgba(199,163,106,.16); background: radial-gradient(circle at 55% 40%, #294251 0%, #152e40 48%, #0c2538 100%); }
.art-frame::before, .art-frame::after { content: ''; position: absolute; width: 1px; height: 100%; background: rgba(226,191,143,.09); z-index: 1; }
.art-frame::before { left: 16%; }.art-frame::after { right: 16%; }
.art-arch { position: absolute; left: 12%; top: 4%; height: 109%; width: 76%; border: 1px solid rgba(209,173,120,.25); border-radius: 220px 220px 0 0; box-shadow: 0 0 0 25px rgba(210,173,120,.024), 0 0 0 51px rgba(210,173,120,.02); }
.art-arch::before { content: ''; position: absolute; inset: 17px 17px 0; border: 1px solid rgba(208,170,114,.11); border-radius: 200px 200px 0 0; }
.art-orbit { border-radius: 50%; position: absolute; top: 17%; left: 50%; transform: translateX(-50%); }
.art-orbit-outer { width: 360px; height: 360px; border: 1px solid rgba(224,182,127,.09); }
.art-orbit-inner { width: 280px; height: 280px; border: 1px dashed rgba(224,182,127,.12); top: 24%; }
.justice-art { position: absolute; width: 140%; max-width: none; height: 100%; object-fit: contain; top: -2%; left: -20%; filter: drop-shadow(0 14px 12px rgba(0,0,0,.18)); }
.art-label { height: 40px; display: flex; justify-content: center; align-items: center; gap: 12px; color: rgba(238,213,176,.76); font-size: 9px; letter-spacing: 2.6px; white-space: nowrap; }
.art-label-line { background: rgba(231,207,177,.35); width: 20px; height: 1px; }
.vertical-caption { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 9px; letter-spacing: 3px; color: rgba(237,207,162,.64); }
.hero-bottom-line { position: absolute; bottom: 0; height: 2px; width: 100%; background: rgba(219,186,138,.2); }.hero-bottom-line span { display: block; height: 2px; width: 22%; background: var(--gold); }

/* Cross-section strip */
.practice-strip { background: #efebe3; border-bottom: 1px solid #e2dace; }
.strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 13px; min-height: 73px; }
.strip-inner span { color: #52606b; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; }
.strip-inner svg { color: #b7905d; width: 20px; height: 20px; }
.strip-inner i { display: block; width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); flex: none; }

/* Global sections */
.section { padding-block: 115px; }
.section-title { font: 400 clamp(37px,4vw,58px)/1.17 var(--serif); letter-spacing: -1.4px; margin: 19px 0 20px; text-wrap: balance; color: #182f3c; }
.section-title em, .experience-text h2 em { font-style: normal; color: #b28a53; }
.section-lead { font: 400 22px/1.45 var(--serif); color: #2b4654; }

/* Profile */
.profile-section { background: #fdfcf9; }
.profile-grid { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: clamp(75px, 10vw, 147px); }
.profile-visual { height: 515px; position: relative; padding: 20px 20px 0 0; }
.profile-outline { position: absolute; left: 45px; top: -18px; right: -19px; bottom: 39px; border: 1px solid #d6c6aa; pointer-events: none; }
.profile-panel { position: relative; height: 100%; background: linear-gradient(150deg, #18384c, #0c2437 80%); color: var(--gold-light); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 20px 26px 50px rgba(12,33,46,.12); overflow: hidden; }
.profile-panel::before { content: ''; position: absolute; width: 550px; height: 550px; top: -290px; right: -310px; border: 1px solid rgba(234,209,162,.18); border-radius: 50%; box-shadow: 0 0 0 35px rgba(234,209,162,.02),0 0 0 65px rgba(234,209,162,.02); }
.profile-panel::after { content: ''; position: absolute; left: 23px; right: 23px; top: 24px; bottom: 22px; border: 1px solid rgba(233,204,164,.20); pointer-events: none; }
.profile-small { font-size: 10px; line-height: 1.6; letter-spacing: 3.7px; text-align: center; z-index: 2; }
.profile-big { font: 400 clamp(150px, 16vw, 238px)/1.1 var(--serif); letter-spacing: -19px; padding-right: 17px; background: linear-gradient(150deg,#fcf0d1,#d8b77c 50%,#b98852); color: transparent; background-clip: text; -webkit-background-clip: text; z-index: 2; }
.profile-years { font-size: 11px; font-weight: 700; letter-spacing: 3.1px; z-index: 2; }
.profile-rule { width: 58px; height: 1px; background: rgba(218,184,134,.7); margin: 28px 0 22px; z-index: 2; }
.profile-bottom { font-size: 9px; letter-spacing: 2.2px; color: #c3c8c7; z-index: 2; }
.profile-bottom span { color: var(--gold); }
.profile-signet { position: absolute; bottom: -17px; right: -31px; width: 96px; height: 96px; background: #ead3ac; display: grid; place-items: center; border: 8px solid #fdfcf9; z-index: 3; }
.profile-signet .icon { width: 45px; height: 45px; color: #5e4b34; stroke-width: 1.3; }
.profile-copy { max-width: 550px; }
.profile-copy p:not(.section-lead) { color: #5b6972; margin: 0 0 16px; line-height: 1.9; font-size: 15px; }
.profile-copy p strong { color: #2e4250; font-weight: 700; }
.profile-notes { display: grid; gap: 11px; margin: 31px 0 26px; }
.profile-note { display: flex; align-items: center; gap: 15px; padding: 16px 17px; background: #f6f4ee; border: 1px solid #eee8dd; }
.note-icon { display: grid; place-items: center; width: 41px; height: 41px; background: #ebe0ce; color: #916e3f; }
.profile-note strong, .profile-note small { display: block; }.profile-note strong { font-size: 13px; font-weight: 700; }.profile-note small { color: #69757a; font-size: 12px; margin-top: 2px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: #936e3d; font-weight: 700; font-size: 12px; border-bottom: 1px solid #b58c58; padding-bottom: 9px; transition: gap .2s; }.text-link:hover { gap: 20px; }.text-link .icon { width: 16px; height: 16px; }

/* Area cards */
.areas-section { background: var(--paper); border-top: 1px solid #eee7db; border-bottom: 1px solid #ece5da; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 38px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { color: #768086; max-width: 250px; margin: 0 0 8px; text-align: right; font-size: 14px; }
.areas-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 17px; }
.area-card { position: relative; min-height: 401px; padding: 32px 32px 29px; background: #fff; border: 1px solid #e7ddd1; display: flex; flex-direction: column; overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; }
.area-card::after { content: ''; position: absolute; right: -48px; bottom: -88px; height: 185px; width: 185px; border: 1px solid #eadcc6; border-radius: 50%; box-shadow: 0 0 0 28px #fdfaf6, 0 0 0 29px #f4ede2; opacity: .65; pointer-events: none; }
.area-card:hover { transform: translateY(-8px); border-color: #c8aa7f; box-shadow: 0 22px 40px rgba(27,47,56,.07); }
.area-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 31px; }.area-number { color: #af925f; font: 16px var(--serif); }
.area-icon { display: grid; place-items: center; height: 56px; width: 56px; color: #b18753; border: 1px solid #e8d9c5; background: #faf7f1; }
.area-icon .icon { height: 28px; width: 28px; stroke-width: 1.3; }
.area-card h3 { font: 400 33px/1.2 var(--serif); margin: 0 0 15px; color: #162f3f; letter-spacing: -.5px; }
.area-card p { font-size: 13px; line-height: 1.85; color: #67737a; margin: 0 0 24px; max-width: 310px; }
.area-link { margin-top: auto; display: inline-flex; align-items: center; gap: 13px; color: #916c3d; font-size: 12px; font-weight: 700; z-index: 1; width: fit-content; }
.area-link .icon { width: 16px; height: 16px; transition: transform .25s; }.area-link:hover .icon { transform: translateX(5px); }
.area-card--navy { background: linear-gradient(135deg,#163548,#0b2234); border-color: #14394a; }
.area-card--navy::after { border-color: rgba(230,199,144,.13); box-shadow: 0 0 0 28px rgba(236,205,157,.026), 0 0 0 29px rgba(236,205,157,.1); }
.area-card--navy h3 { color: #fff; }.area-card--navy p { color: #c1cbd0; }.area-card--navy .area-icon { background: rgba(205,171,120,.12); border-color: rgba(225,191,144,.32); color: #e6bf82; }.area-card--navy .area-link,.area-card--navy .area-number { color: #e5c58e; }

/* Services */
.services-section { background: #fffdfa; }
.services-heading { text-align: center; max-width: 620px; margin: 0 auto 35px; }.services-heading .section-title { margin-bottom: 13px; }.services-heading p { margin: 0; color: #748086; font-size: 14px; }.services-heading .eyebrow { justify-content: center; }
.filter-bar { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 27px; margin-bottom: 28px; border-bottom: 1px solid #e9e2d9; }
.filter-button { display: inline-flex; gap: 11px; align-items: center; background: #f6f3ee; color: #55636b; border: 1px solid #eee7db; border-radius: 2px; font-size: 12px; font-weight: 650; padding: 11px 16px; cursor: pointer; transition: background .2s,color .2s,border-color .2s; }
.filter-button span { font-size: 10px; letter-spacing: .2px; opacity: .63; }
.filter-button:hover { border-color: #c3a475; color: #172f3d; }
.filter-button.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.service-card { min-height: 198px; background: #fbfaf7; border: 1px solid #e9e4db; padding: 23px 25px 20px; display: flex; flex-direction: column; position: relative; transition: background .25s,transform .25s,border-color .25s,box-shadow .25s; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--gold); transition: width .25s; }
.service-card:hover { background: #fff; transform: translateY(-4px); border-color: #dbc7a7; box-shadow: 0 15px 27px rgba(32,52,65,.05); }.service-card:hover::before { width: 100%; }
.service-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }.service-index { font: 16px var(--serif); color: #b69667; }.service-card-top .icon { width: 24px; height: 24px; color: #bb9565; stroke-width: 1.35; }
.service-card h3 { color: #253b49; font: 400 clamp(20px,2vw,25px)/1.32 var(--serif); letter-spacing: -.3px; margin: 0 0 21px; max-width: 325px; }
.service-tag { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; color: #8a8f91; font-size: 10px; letter-spacing: .85px; text-transform: uppercase; font-weight: 650; }.service-tag::before { content: ''; width: 13px; height: 1px; background: #bb9769; }
.service-card.is-hidden { display: none; }
.service-card--last { grid-column: span 3; min-height: 178px; background: #f3efe7; }
.service-card--last h3 { max-width: none; }
.services-grid.is-filtered .service-card--last { grid-column: auto; min-height: 198px; background: #fbfaf7; }

/* Dark interstitial */
.experience-band { background: #102b3f; color: #fff; position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid rgba(244,214,159,.22); border-bottom: 1px solid rgba(244,214,159,.22); }
.experience-band::before { content: ''; pointer-events: none; position: absolute; width: 440px; height: 440px; right: -130px; top: -140px; border: 1px solid rgba(232,199,149,.17); border-radius: 50%; box-shadow: 0 0 0 45px rgba(217,176,120,.035),0 0 0 100px rgba(217,176,120,.035),0 0 0 145px rgba(217,176,120,.02); }
.experience-content { min-height: 315px; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; z-index: 2; }
.experience-text { max-width: 740px; }.experience-text h2 { font: 400 clamp(34px,4vw,56px)/1.18 var(--serif); letter-spacing: -1.3px; margin: 18px 0 12px; }.experience-text h2 em { color: #e3bd83; }.experience-text p { color: #c3d0d4; margin: 0; font-size: 14px; }
.experience-emblem { height: 188px; width: 188px; border: 1px solid rgba(225,193,149,.44); border-radius: 50%; color: var(--gold-light); flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
.experience-emblem::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(225,193,149,.23); border-radius: 50%; }.experience-emblem span { font: 88px/.95 var(--serif); letter-spacing: -4px; }.experience-emblem small { font-size: 9px; font-weight: 700; letter-spacing: 5px; margin-top: 7px; }

/* Contact */
.contact-section { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: clamp(60px,9vw,130px); }
.contact-copy > p { color: #62717a; font-size: 16px; line-height: 1.85; margin: 0 0 32px; }
.contact-details { border-top: 1px solid #ded6c8; border-bottom: 1px solid #ded6c8; }
.contact-detail { display: flex; align-items: center; gap: 18px; padding: 22px 0; }.contact-detail + .contact-detail { border-top: 1px solid #ded6c8; }
.contact-detail-icon { display: grid; place-items: center; width: 51px; height: 51px; background: #eae0d0; color: #946f42; flex: none; }.contact-detail-icon .icon { width: 23px; height: 23px; }
.detail-label { display: block; font-weight: 750; letter-spacing: 1.8px; color: #ad8b5b; font-size: 9px; margin-bottom: 5px; }.contact-detail strong { font-size: 14px; font-weight: 650; }
.call-panel { color: #fff; background: radial-gradient(circle at 100% 0, #24475b 0, #102d40 55%, #0c2536 100%); min-height: 427px; padding: 43px clamp(25px,4vw,55px); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid rgba(226,193,139,.45); box-shadow: 17px 20px 0 #e1d5c2; }
.call-panel::before { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(230,193,131,.2); pointer-events: none; }
.call-panel-decor { font: 270px/.8 var(--serif); letter-spacing: -38px; position: absolute; right: 8px; bottom: -25px; color: rgba(215,184,140,.045); pointer-events: none; }
.call-overline { color: #e3be85; font-size: 10px; font-weight: 700; letter-spacing: 2.4px; margin-bottom: 25px; z-index: 1; }
.call-large-icon { width: 34px; height: 34px; color: var(--gold); margin-bottom: 18px; z-index: 1; }
.call-panel p { color: #bcc9cf; font-size: 14px; margin: 0 0 5px; z-index: 1; }
.call-number { color: #fff; font: 400 clamp(34px,4vw,52px)/1.2 var(--serif); letter-spacing: -1.4px; margin: 0 0 28px; white-space: nowrap; z-index: 1; }.call-number:hover { color: #f3d9aa; }
.call-button { z-index: 1; min-width: 188px; }
.call-location { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 1px; color: #c5cfd1; margin-top: 22px; z-index: 1; }.call-location .icon { width: 14px; height: 14px; }

/* Footer */
.site-footer { background: #071724; color: #f8f8f6; border-top: 2px solid #bc985f; }
.footer-top { min-height: 154px; display: flex; align-items: center; justify-content: space-between; gap: 23px; border-bottom: 1px solid rgba(222,207,179,.18); }
.footer-summary { color: #d6dada; font-size: 13px; line-height: 1.9; text-align: center; }.footer-summary span { color: var(--gold); }.footer-summary small { font-size: 11px; color: #9eaeb5; }
.footer-phone { display: inline-flex; gap: 9px; align-items: center; color: #e8c795; white-space: nowrap; font-size: 15px; font-weight: 650; }.footer-phone .icon { width: 18px; height: 18px; }
.footer-bottom { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #879aa4; font-size: 11px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }.footer-bottom a:hover { color: var(--gold-light); }

/* Floating actions */
.mobile-call { display: none; }
.back-to-top { position: fixed; right: 23px; bottom: 22px; z-index: 80; width: 43px; height: 43px; display: grid; place-items: center; background: #e6c18a; color: var(--navy); border: 0; box-shadow: 0 8px 25px rgba(12,32,44,.2); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s,visibility .25s,transform .25s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }.back-to-top .icon { width: 18px; height: 18px; }
.back-to-top:hover { background: #f3d6a6; }

/* Animación progresiva sin ocultar contenido mientras carga la página.
   Incluso si falla JavaScript, todo el texto permanece visible. */
.reveal.is-visible { animation: reveal-in .68s ease-out both; }
.areas-grid .reveal.is-visible:nth-child(2) { animation-delay: .07s; }
.areas-grid .reveal.is-visible:nth-child(3) { animation-delay: .13s; }
@keyframes reveal-in {
  from { opacity: .82; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1160px) {
  .container { width: min(calc(100% - 60px), var(--container)); }
  .brand-text strong { font-size: 14px; }.brand-text small { font-size: 8px; }
  .brand-mark { width: 48px; height: 48px; }
  .header-inner { gap: 20px; }.nav { gap: 17px; }
  .header-call { padding: 11px; }
  .hero h1 { font-size: clamp(48px,5vw,69px); }
  .art-border { height: 505px; }
  .profile-grid { gap: 65px; }.contact-grid { gap: 65px; }
}
@media (max-width: 960px) {
  :root { --header-height: 77px; }
  .nav { gap: 14px; }.header-call { display: none; }
  .hero-grid { min-height: 625px; gap: 26px; }
  .hero h1 { font-size: clamp(43px,5.5vw,62px); }.hero-description { font-size: 15px; }
  .art-border { height: 447px; }.hero-art { padding-right: 16px; }
  .strip-inner span { font-size: 8.5px; letter-spacing: 1px; }
  .profile-visual { height: 462px; }.profile-grid,.contact-grid { gap: 50px; }
  .section { padding-block: 90px; }
  .area-card { padding: 25px 22px; min-height: 427px; }.area-card h3 { font-size: 30px; }.area-card p { font-size: 12.5px; }
  .footer-summary { display: none; }
}
@media (max-width: 760px) {
  :root { --header-height: 75px; }
  html { scroll-padding-top: 81px; }
  .container { width: min(calc(100% - 40px), 580px); }
  .site-header { height: var(--header-height); }
  .brand-mark { width: 48px; height: 48px; }
  .brand-text strong { font-size: 14px; }.brand-text small { font-size: 7.5px; letter-spacing: 1.9px; }
  .menu-toggle { display: grid; place-items: center; flex: none; width: 43px; height: 43px; margin-left: auto; border: 1px solid rgba(230,196,140,.4); background: transparent; color: #edc995; cursor: pointer; }.menu-toggle .icon { width: 22px; height: 22px; }.menu-toggle .menu-close { display: none; }.menu-toggle[aria-expanded="true"] .menu-open { display: none; }.menu-toggle[aria-expanded="true"] .menu-close { display: block; }
  .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: var(--header-height); left: 0; width: 100%; padding: 10px 20px 22px; margin: 0; background: #091c2a; border-top: 1px solid rgba(238,207,156,.17); border-bottom: 1px solid #c8a16c; box-shadow: 0 20px 32px rgba(0,0,0,.2); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: visibility .22s,opacity .22s,transform .22s; }
  .nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-link { width: 100%; font-size: 13px; padding: 14px 10px; border-bottom: 1px solid rgba(255,255,255,.075); }.nav-link::after { display: none; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 36px; padding: 61px 0 63px; min-height: unset; }
  .hero-copy { padding: 0; }.hero-kicker { margin: 27px 0 12px; font-size: 12px; }
  .hero h1 { font-size: clamp(49px,9vw,72px); max-width: 620px; }
  .hero-description { margin-bottom: 27px; }
  .hero-facts { margin-top: 32px; }
  .hero-art { width: min(100%,515px); margin-inline: auto; padding: 0 18px 0 0; }.art-border { height: 415px; }.art-label { font-size: 7.5px; letter-spacing: 2px; }.vertical-caption { font-size: 8px; }
  .practice-strip { overflow: auto; scrollbar-width: none; }.practice-strip::-webkit-scrollbar { display: none; }.strip-inner { min-width: max-content; width: max-content; gap: 23px; padding-inline: 20px; min-height: 58px; }.strip-inner span { font-size: 10px; }
  .section { padding-block: 79px; }
  .section-title { font-size: clamp(37px,7vw,49px); }
  .profile-grid,.contact-grid { grid-template-columns: 1fr; gap: 45px; }
  .profile-visual { width: min(100% - 25px, 480px); height: 435px; margin: 0 auto 10px; }.profile-big { font-size: clamp(160px,29vw,215px); }
  .profile-copy { max-width: 620px; }.profile-outline { right: -12px; }
  .section-heading { align-items: start; }.section-heading > p { max-width: 155px; font-size: 12px; }
  .areas-grid { grid-template-columns: 1fr; gap: 13px; }.area-card { min-height: 0; padding: 26px 26px 28px; }.area-top { margin-bottom: 21px; }.area-card h3 { font-size: 33px; }.area-card p { font-size: 13px; }.area-link { margin-top: 9px; }
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.service-card--last { grid-column: span 2; min-height: 180px; }
  .experience-content { min-height: 322px; gap: 18px; }.experience-text h2 { font-size: clamp(35px,6vw,48px); }.experience-emblem { width: 130px; height: 130px; }.experience-emblem span { font-size: 64px; }.experience-emblem small { font-size: 7px; }
  .contact-grid { gap: 44px; }.call-panel { min-height: 390px; }.call-number { font-size: clamp(32px,7vw,52px); }
  .footer-top { min-height: unset; padding-block: 38px; }.footer-phone { font-size: 13px; }
  .mobile-call { display: inline-flex; align-items: center; justify-content: center; gap: 11px; position: fixed; left: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; background: #d8ad71; color: #102839; min-height: 50px; border: 1px solid #f2d8ac; padding: 10px 22px; box-shadow: 0 9px 25px rgba(0,0,0,.27); font-size: 13px; font-weight: 800; }
  .mobile-call .icon { height: 18px; width: 18px; }.back-to-top { bottom: calc(20px + env(safe-area-inset-bottom)); right: 20px; width: 50px; height: 50px; }
  .footer-bottom { padding-bottom: 85px; }
}
@media (max-width: 500px) {
  .container { width: calc(100% - 34px); }
  .brand { gap: 10px; }.brand-mark { width: 44px; height: 44px; font-size: 23px; }.brand-text strong { font-size: 12.6px; letter-spacing: .7px; }.brand-text small { font-size: 7px; letter-spacing: 1.3px; }
  .hero-grid { padding-top: 47px; padding-bottom: 53px; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; gap: 10px; }.eyebrow-line { width: 21px; }
  .hero-kicker { font-size: 11px; letter-spacing: 1.7px; }
  .hero h1 { font-size: clamp(43px, 10.5vw, 60px); letter-spacing: -1.8px; margin-bottom: 18px; }
  .hero-description { font-size: 14px; }.button { padding: 13px 17px; min-height: 50px; gap: 12px; font-size: 11px; }.hero-buttons { gap: 9px; }
  .hero-facts { gap: 21px; }.fact-number { font-size: 35px; }.fact-label { font-size: 8px; letter-spacing: 1px; }
  .art-border { height: 360px; padding: 9px; }.art-frame { height: calc(100% - 32px); }.art-label { height: 32px; font-size: 7px; letter-spacing: 1px; gap: 7px; }.art-label-line { width: 12px; }.art-arch { width: 84%; left: 8%; }.vertical-caption { right: -3px; font-size: 6.8px; letter-spacing: 2px; }
  .section { padding-block: 68px; }.profile-visual { height: 350px; width: calc(100% - 28px); }.profile-big { font-size: clamp(145px,34vw,181px); letter-spacing: -13px; }.profile-signet { height: 80px; width: 80px; right: -22px; }.profile-signet .icon { height: 38px; width: 38px; }.profile-small { font-size: 9px; }.profile-years { font-size: 9px; letter-spacing: 2px; }.profile-rule { margin: 19px 0 15px; }
  .section-heading { display: block; }.section-heading > p { text-align: left; max-width: none; margin-top: 16px; }
  .filter-bar { justify-content: flex-start; gap: 6px; }.filter-button { font-size: 10px; padding: 9px 10px; gap: 5px; }
  .services-grid { grid-template-columns: 1fr; gap: 10px; }.service-card { min-height: 162px; padding: 18px 21px; }.service-card-top { margin-bottom: 17px; }.service-card h3 { font-size: 23px; margin-bottom: 16px; }.service-card--last, .services-grid.is-filtered .service-card--last { grid-column: auto; min-height: 162px; }
  .experience-content { min-height: unset; padding-block: 60px; }.experience-emblem { display: none; }.experience-text h2 { font-size: 40px; }
  .call-panel { box-shadow: 9px 12px 0 #e1d5c2; min-height: 375px; padding: 35px 28px; }.call-number { font-size: clamp(34px,9vw,48px); }
  .footer-top { flex-wrap: wrap; gap: 26px; }.footer-phone { width: 100%; margin-left: 0; }.footer-bottom { display: flex; flex-direction: column-reverse; align-items: start; justify-content: center; gap: 13px; padding-block: 24px 90px; }.footer-bottom nav { gap: 15px; }
  .mobile-call { left: 17px; bottom: calc(16px + env(safe-area-inset-bottom)); }.back-to-top { right: 17px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .reveal.is-visible { animation: none!important; }
}
