:root{
  --bg:#020817;
  --bg2:#04132c;
  --panel:#071b3b;
  --panel2:#06152f;
  --white:#f6f8ff;
  --muted:#bac6da;
  --blue:#178cff;
  --cyan:#68d5ff;
  --violet:#7846ff;
  --violet2:#b63dff;
  --gold:#d2ae78;
  --radius:16px;
  --shadow:0 22px 58px rgba(0,0,0,.26);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--white);background:var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.11;
  background-image:radial-gradient(rgba(255,255,255,.20) .4px,transparent .4px);
  background-size:8px 8px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

/* HEADER */
.site-header{
  position:absolute;z-index:60;top:0;left:0;right:0;height:78px;
  padding:0 4.25vw 0 3.65vw;
  display:grid;grid-template-columns:1.08fr 1.62fr .62fr;align-items:center;
  background:linear-gradient(180deg,rgba(0,5,17,.90),rgba(0,5,17,.34) 70%,rgba(0,5,17,.06));
  border-bottom:1px solid rgba(90,171,255,.08);backdrop-filter:blur(9px)
}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:55px;filter:drop-shadow(0 0 10px rgba(0,126,255,.34))}
.brand span{display:flex;flex-direction:column}
.brand strong{font:600 18px Georgia,serif;letter-spacing:.35px}
.brand small{font-size:11px;color:#e2e9f5}
.desktop-nav{display:flex;justify-content:center;gap:30px;font-size:14px}
.desktop-nav a{position:relative;padding:29px 0 24px}
.desktop-nav a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:14px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));
  box-shadow:0 0 9px rgba(44,157,255,.65);transition:.24s ease
}
.desktop-nav a:hover::after,.desktop-nav a.active::after{left:0;right:0}
.header-cta{
  justify-self:end;padding:11px 20px;border-radius:999px;font-size:13px;font-weight:700;
  background:linear-gradient(105deg,#138dff 0%,#395eff 52%,#8e43ff 100%);
  border:1px solid rgba(138,207,255,.84);
  box-shadow:0 0 20px rgba(55,100,255,.30);transition:.22s
}
.header-cta:hover{transform:translateY(-1px);box-shadow:0 0 29px rgba(111,63,255,.40)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:23px}

/* HERO */
.hero{
  position:relative;min-height:720px;overflow:hidden;display:flex;align-items:center;
  padding:116px 4.7vw 62px;background:#020817
}
.hero-photo{
  position:absolute;inset:0;
  background-color:#020817;
  background-image:
    linear-gradient(90deg,rgba(1,7,23,.97) 0%,rgba(1,8,25,.83) 31%,rgba(1,8,25,.37) 51%,rgba(0,4,15,.05) 100%),
    url("assets/hero-final.webp");
  background-position:left center,right center;
  background-repeat:no-repeat,no-repeat;
  background-size:100% 100%,auto 100%;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:95px;
  background:linear-gradient(180deg,transparent,#020817)
}
.hero-copy{position:relative;z-index:5;width:min(610px,42vw)}
.eyebrow{margin:0 0 17px;letter-spacing:4.4px;font-size:11px;color:#e2edf9}
.hero h1{font:700 clamp(40px,4.2vw,65px)/.99 Georgia,serif;margin:0 0 5px}
.subbrand{margin:0 0 29px;font-size:clamp(17px,1.75vw,28px);letter-spacing:5.8px}
.hero h2{font:400 clamp(34px,3.6vw,53px)/1.08 Georgia,serif;margin:0 0 24px}
.hero h2 span{
  background:linear-gradient(90deg,#62d6ff 0%,#2188ff 48%,#9c46ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(34,111,255,.10)
}
.hero-actions{display:flex;align-items:center;gap:15px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:23px;min-height:45px;
  padding:11px 19px;border-radius:999px;border:1px solid transparent;font-size:12px;transition:.22s
}
.cosmic-btn{
  color:#fff;font-weight:750;
  background:linear-gradient(105deg,#0e9bff 0%,#2d6fff 43%,#694dff 72%,#a03dff 100%);
  border-color:rgba(132,218,255,.78);
  box-shadow:0 0 19px rgba(34,114,255,.28),inset 0 1px rgba(255,255,255,.18)
}
.cosmic-btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(98,72,255,.40),0 0 14px rgba(52,194,255,.30)}
.btn-outline{
  color:#e9f3ff;border-color:rgba(82,177,255,.63);background:rgba(3,16,40,.30)
}
.btn-outline:hover{border-color:#8d74ff;box-shadow:0 0 18px rgba(87,91,255,.26)}
.hero-logo-float{
  position:absolute;z-index:5;left:43.5%;top:41%;
  width:145px;height:145px;display:grid;place-items:center
}
.hero-logo-float img{width:100%;filter:drop-shadow(0 0 18px rgba(0,119,255,.33))}
.logo-halo{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,rgba(0,126,255,.14),transparent 67%);filter:blur(7px)}
.hero-quote{position:absolute;z-index:5;right:4.8vw;top:28%;width:168px}
.hero-quote p{margin:0;font:italic 15px/1.55 Georgia,serif}
.hero-quote span{display:block;width:48px;height:2px;margin-top:13px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.hero-audience{position:absolute;z-index:5;right:4.8vw;bottom:17%;display:grid;gap:8px;border-left:2px solid #5dbdff;padding-left:14px;font-size:10px;letter-spacing:1px}

/* SERVICE STRIP */
.service-strip{
  position:relative;z-index:8;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;padding:16px 4.4vw 23px;background:linear-gradient(180deg,#020817,#031027)
}
.service-card{
  position:relative;overflow:hidden;min-height:126px;border:1px solid rgba(42,150,236,.62);border-radius:14px;
  background:radial-gradient(circle at 50% 0%,rgba(32,122,218,.11),transparent 43%),linear-gradient(180deg,rgba(7,31,69,.84),rgba(3,14,34,.97));
  color:#fff;display:grid;place-items:center;text-align:center;padding:13px;cursor:pointer;
  box-shadow:inset 0 0 22px rgba(0,105,255,.09);transition:.22s
}
.service-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(115deg,transparent 12%,rgba(100,218,255,.19) 37%,rgba(126,69,255,.24) 54%,transparent 76%);
  transform:translateX(-130%);transition:transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none
}
.service-card::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;opacity:0;
  background:radial-gradient(circle at 50% 20%,rgba(79,198,255,.15),transparent 45%),radial-gradient(circle at 75% 85%,rgba(151,64,255,.15),transparent 42%);
  transition:opacity .22s
}
.service-card:hover,.service-card.is-active,.service-card.touch-glow{
  transform:translateY(-3px);border-color:#87d9ff;
  box-shadow:0 0 25px rgba(14,153,255,.39),0 0 35px rgba(111,57,255,.18),inset 0 0 28px rgba(48,124,255,.15)
}
.service-card:hover::before,.service-card.is-active::before,.service-card.touch-glow::before{transform:translateX(130%)}
.service-card:hover::after,.service-card.is-active::after,.service-card.touch-glow::after{opacity:1}
.service-card img{width:50px;height:50px;margin-bottom:6px;filter:drop-shadow(0 0 8px rgba(24,149,255,.72));transition:.22s}
.service-card:hover img,.service-card.is-active img,.service-card.touch-glow img{
  transform:scale(1.04);
  filter:drop-shadow(0 0 8px #76deff) drop-shadow(0 0 17px rgba(111,64,255,.68))
}
.service-card span:last-child{font:500 15px/1.16 Inter,system-ui,sans-serif;position:relative;z-index:2}
.service-symbol{
  font:600 40px/1 Georgia,serif;color:#d5efff;margin-bottom:6px;
  filter:drop-shadow(0 0 8px rgba(24,149,255,.68));position:relative;z-index:2
}
.service-detail{
  margin:0 4.4vw;padding:21px 27px;min-height:145px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;
  border:1px solid rgba(43,136,222,.40);border-radius:15px;background:linear-gradient(90deg,rgba(5,25,58,.92),rgba(4,14,34,.76))
}
.section-kicker{font-size:10.5px;letter-spacing:3.2px;color:#dce7f7}
.service-detail h2,.section-heading h2,.firm h2,.contact h2{
  font:600 clamp(30px,3.45vw,49px)/1.04 Georgia,serif;margin:5px 0 7px
}
.service-detail p,.section-heading p,.firm p,.contact-intro>p{margin:0;color:var(--muted);line-height:1.56}

/* AREAS */
.section-shell{padding:68px 4.4vw}
.areas{background:radial-gradient(circle at 100% 55%,rgba(113,35,241,.08),transparent 28%),linear-gradient(180deg,#030817,#041129)}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}
.section-heading h2 em{color:var(--gold);font-style:normal}
.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.practice-card{
  position:relative;display:grid;grid-template-columns:41% 59%;min-height:365px;overflow:hidden;
  border:1px solid rgba(37,133,237,.50);border-radius:14px;background:linear-gradient(180deg,rgba(5,21,49,.93),rgba(2,10,26,.98));
  box-shadow:var(--shadow);transition:.24s
}
.practice-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(130deg,rgba(51,187,255,.22),transparent 30%,transparent 58%,rgba(135,65,255,.24));
  transition:.25s
}
.practice-card:hover,.practice-card.touch-glow{
  transform:translateY(-4px);
  border-color:#71d3ff;
  box-shadow:0 0 28px rgba(18,151,255,.28),0 0 34px rgba(118,59,255,.16),var(--shadow)
}
.practice-card:hover::before,.practice-card.touch-glow::before{opacity:1}
.practice-img{background-size:cover;background-position:center}
.practice-img.penal{background-image:url("assets/practice-penal-final.webp")}
.practice-img.civil{background-image:url("assets/practice-civil-final.webp")}
.practice-img.laboral{background-image:url("assets/practice-laboral-final.webp")}
.practice-copy{padding:24px 22px;display:flex;flex-direction:column}
.area-mark{
  width:34px;height:34px;display:grid;place-items:center;margin-bottom:9px;border:1px solid rgba(210,174,120,.58);
  border-radius:10px;color:#f0ce95;font:600 19px Georgia,serif;background:rgba(210,174,120,.04)
}
.practice-copy h3{font:500 21px/1.08 Georgia,serif;margin:0 0 12px}
.practice-copy h3 span{color:var(--gold)}
.practice-copy ul{margin:0 0 14px;padding-left:18px;line-height:1.56;font-size:12.8px;color:#e2e9f6}
.practice-copy li::marker{color:#55bfff}
.more{margin-top:auto;font-size:12px;color:#c9e8ff;display:inline-flex;gap:14px;align-items:center}
.more:hover{color:#fff}

/* FIRM */
.firm{
  min-height:460px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;
  background:radial-gradient(circle at 77% 50%,rgba(28,93,215,.08),transparent 28%),linear-gradient(180deg,#041129,#020817)
}
.firm-copy{max-width:700px}
.firm h2 em{
  font-style:normal;
  background:linear-gradient(90deg,#64d8ff 0%,#278cff 44%,#8d48ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.firm-copy p{font-size:16px}
.values{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.value-chip{
  color:#eef5ff;background:linear-gradient(90deg,rgba(9,54,100,.46),rgba(34,22,91,.34));
  border:1px solid rgba(83,175,255,.38);border-radius:8px;padding:8px 13px;cursor:pointer;transition:.22s
}
.value-chip:hover,.value-chip.touch-glow{
  border-color:#8a78ff;box-shadow:0 0 17px rgba(74,122,255,.24),0 0 22px rgba(126,64,255,.16)
}
.firm-brand{position:relative;min-height:360px;display:grid;place-items:center;overflow:visible}
.firm-energy{position:absolute;width:min(660px,100%);height:auto;z-index:1;pointer-events:none}
.firm-shield{position:relative;z-index:2;width:min(300px,53%);filter:drop-shadow(0 0 22px rgba(0,124,255,.33))}

/* CONTACT */
.contact{
  display:grid;grid-template-columns:.68fr 1.27fr .74fr;gap:25px;
  background:radial-gradient(circle at 88% 50%,rgba(89,33,255,.08),transparent 28%),linear-gradient(180deg,#020817,#041129)
}
.contact-intro{padding:23px 0}
.trust-list{display:grid;gap:18px;margin-top:27px}
.trust-item{display:flex;align-items:center;gap:12px}
.trust-item img{width:39px;height:39px;filter:drop-shadow(0 0 9px rgba(30,149,255,.58))}
.trust-item p{margin:0}.trust-item strong{display:block;font-size:14px;margin-bottom:3px}.trust-item span{display:block;color:#b4c5d9;font-size:12px}
.contact-mantra{margin-top:31px}
.contact-mantra>span{display:block;width:58px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));margin-bottom:20px}
.contact-mantra p{margin:0;font:italic 20px/1.5 Georgia,serif;background:linear-gradient(90deg,#69d5ff,#738bff,#b255ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-mantra small{display:block;margin-top:15px;letter-spacing:4px;color:#94a9c1}
.contact-form{
  padding:27px;border:1px solid rgba(48,140,228,.44);border-radius:16px;background:rgba(5,20,47,.79);box-shadow:var(--shadow)
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;margin-bottom:11px}
label span{display:block;margin-bottom:6px;font-size:12px;color:#cad7e8}
input,select,textarea{width:100%;padding:11px 12px;color:#fff;background:#0b2343;border:1px solid #416991;border-radius:7px;outline:none}
textarea{min-height:124px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#43c5ff;box-shadow:0 0 0 3px rgba(38,143,255,.10),0 0 15px rgba(104,64,255,.08)}
.privacy{display:flex;gap:8px;align-items:center}.privacy input{width:auto}.privacy span{margin:0}
.submit{width:100%;border-radius:11px;cursor:pointer}
.contact-poster{
  position:relative;min-height:470px;overflow:hidden;border:1px solid rgba(73,146,231,.38);border-radius:16px;background:#041127;box-shadow:var(--shadow)
}
.contact-poster::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#06152f 0%,rgba(6,21,47,.86) 30%,rgba(6,21,47,.14) 52%,rgba(4,17,39,.06) 100%)
}
.contact-poster img{position:absolute;left:0;right:0;bottom:0;width:100%;height:79%;object-fit:cover;object-position:center top}
.poster-copy{position:relative;z-index:3;padding:23px 22px}
.poster-quote{margin:9px 0 0;font:italic 20px/1.25 Georgia,serif}
.poster-quote em{font-style:normal;background:linear-gradient(90deg,#66d8ff,#398cff,#9c48ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.poster-rule{display:block;width:48px;height:2px;margin:15px 0;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.poster-note{max-width:270px;margin:0;color:#c1cfe0;font-size:11.5px;line-height:1.5}

/* COSMIC LOWER WAVE + FOOTER */
.cosmic-lower-divider{
  position:relative;height:125px;overflow:hidden;
  background:linear-gradient(180deg,#041129 0%,rgba(3,12,30,.58) 36%,#020613 100%),url("assets/cosmic-footer-wave.webp") center 58%/cover no-repeat
}
.cosmic-lower-divider::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,17,41,.79),rgba(2,6,19,.50))}
.cosmic-lower-divider span{
  position:absolute;width:74vw;height:150px;left:13vw;top:15px;border:2px solid rgba(45,158,255,.22);border-radius:50%;
  transform:rotate(-4deg);filter:drop-shadow(0 0 8px rgba(20,130,255,.37))
}
.cosmic-lower-divider span+span{width:61vw;height:116px;left:24vw;top:36px;border-color:rgba(130,66,255,.18);transform:rotate(5deg)}
.footer{
  position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:34px;padding:34px 4.4vw 29px;
  background:radial-gradient(circle at 82% 12%,rgba(36,99,181,.07),transparent 28%),linear-gradient(90deg,#020613,#031126 58%,#020817);
  border-top:1px solid rgba(43,140,255,.28)
}
.footer>div+div{border-left:1px solid rgba(76,149,220,.18);padding-left:28px}
.footer-brand img{max-width:300px;width:82%}
.footer p{color:#c7d2e2;line-height:1.55;font-size:14px}
.footer h3{font:600 16px Georgia,serif;color:#f0d19b;margin:0 0 5px}
.footer-subtitle{display:block;margin-bottom:14px;color:#91a8c3;font-size:9.8px;letter-spacing:2px;text-transform:uppercase}
.footer-map iframe{width:100%;height:155px;border:0;border-radius:10px}
.footer-map .btn{margin-top:10px}
.legalbar{padding:14px 4.4vw 20px;display:flex;justify-content:space-between;background:#020613;border-top:1px solid rgba(255,255,255,.05);color:#8794a8;font-size:10.8px}
.mobile-menu{display:none}

/* ANIMATION */
@keyframes breathe{
  0%,100%{filter:drop-shadow(0 0 14px rgba(0,119,255,.25))}
  50%{filter:drop-shadow(0 0 24px rgba(97,74,255,.42))}
}
.hero-logo-float img,.firm-shield{animation:breathe 5.5s ease-in-out infinite}
.touch-glow{box-shadow:0 0 22px rgba(35,157,255,.38),0 0 27px rgba(117,65,255,.22)!important}

/* TABLET */
@media(max-width:1280px){
  .service-strip{grid-template-columns:repeat(4,1fr)}
  .service-card:nth-child(n+5){min-height:120px}
}
@media(max-width:1080px){
  .desktop-nav{display:none}.site-header{grid-template-columns:1fr auto auto}.menu-toggle{display:block}
  .hero-quote,.hero-audience{display:none}
  .hero-logo-float{left:43%;top:43%}
  .practice-card{grid-template-columns:1fr}.practice-img{min-height:180px}
  .contact{grid-template-columns:1fr 1fr}.contact-poster{display:none}
}

/* MOBILE */
@media(max-width:760px){
  .site-header{height:68px;padding:0 16px}.brand img{width:42px}.brand strong{font-size:13px}.brand small{font-size:9px}
  .header-cta{font-size:0;width:42px;height:42px;padding:0}.header-cta::after{content:"WA";font-size:10px;display:grid;place-items:center;height:100%}
  .hero{min-height:785px;padding:92px 18px 28px;align-items:flex-start}
  .hero-photo{
    background-color:#020817;
    background-image:
      linear-gradient(180deg,rgba(1,7,23,.74),rgba(1,7,23,.32) 46%,rgba(1,7,23,.12) 68%,#020817 100%),
      url("assets/hero-final.webp");
    background-position:center,75% top;
    background-size:100% 100%,auto 100%;
  }
  .hero-copy{width:86%;max-width:450px}.eyebrow{font-size:9.5px;letter-spacing:3px}
  .hero h1{font-size:35px;max-width:285px}.subbrand{font-size:14px;letter-spacing:3.5px;margin-bottom:19px;max-width:300px}
  .hero h2{font-size:33px;max-width:315px}.hero-actions{flex-direction:column;align-items:flex-start;gap:9px}
  .hero-logo-float{width:90px;height:90px;left:auto;right:15px;top:336px}
  .service-strip{grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
  .service-card{min-height:116px}.service-card:last-child{grid-column:1/-1}.service-card img{width:42px;height:42px}.service-symbol{font-size:35px}
  .service-detail{display:block;margin:0 14px;padding:18px}.service-detail h2{font-size:29px}.service-detail .btn{margin-top:14px}
  .section-shell{padding:50px 18px}.section-heading{display:block}.section-heading h2{font-size:36px}.section-heading .btn{margin-top:16px}
  .practice-grid{grid-template-columns:1fr}.practice-card{grid-template-columns:39% 61%;min-height:320px}.practice-img{min-height:100%}.practice-copy{padding:17px 15px}.practice-copy h3{font-size:18px}.practice-copy ul{font-size:12px;line-height:1.47}
  .firm{grid-template-columns:1fr;min-height:auto}.firm h2{font-size:36px}.firm-brand{min-height:280px;margin-top:20px}.firm-energy{width:120%}.firm-shield{width:205px}
  .contact{grid-template-columns:1fr}.contact-intro{padding:0}.contact h2{font-size:36px}.contact-form{padding:19px}.form-grid{grid-template-columns:1fr}.contact-poster{display:block;min-height:490px}
  .cosmic-lower-divider{height:88px}.cosmic-lower-divider span{width:110vw;left:-5vw;height:115px;top:10px}.cosmic-lower-divider span+span{width:95vw;left:4vw;height:86px;top:28px}
  .footer{grid-template-columns:1fr;padding:27px 18px 23px}.footer>div+div{border-left:0;border-top:1px solid rgba(72,151,226,.18);padding-left:0;padding-top:22px}.footer-brand img{max-width:260px}
  .legalbar{padding:14px 18px;display:grid;gap:6px}
  .mobile-menu{display:none;position:fixed;z-index:120;top:68px;left:12px;right:12px;background:#06142d;border:1px solid #1b72bd;border-radius:14px;padding:13px;box-shadow:0 20px 55px rgba(0,0,0,.5)}
  .mobile-menu.open{display:grid}.mobile-menu a{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
}
@media(hover:none),(pointer:coarse){
  .service-card:hover,.practice-card:hover,.header-cta:hover,.cosmic-btn:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


/* ==========================================================
   LG BUSINESS GROUP — V7 INTERGALACTIC PREMIUM
   Second screen-by-screen revision
   ========================================================== */

/* HEADER: brand removed; navigation centered, WhatsApp right */
.site-header{
  grid-template-columns:1fr auto 1fr;
  padding-left:4.4vw;
  padding-right:4.4vw;
  height:78px;
}
.desktop-nav{
  grid-column:2;
  gap:31px;
  font-size:14.5px;
}
.header-cta{
  grid-column:3;
  justify-self:end;
}
.menu-toggle{
  grid-column:1;
  justify-self:start;
}

/* HERO: shield integrated with brand name; no central floating logo */
.hero{
  min-height:720px;
  padding-left:4.35vw;
  padding-right:4.35vw;
}
.hero-photo{
  background-color:#020817;
  background-image:
    linear-gradient(90deg,rgba(1,7,23,.975) 0%,rgba(1,8,25,.82) 30%,rgba(1,8,25,.33) 51%,rgba(0,4,15,.05) 100%),
    url("assets/hero-final.webp");
  background-position:left center,right center;
  background-repeat:no-repeat,no-repeat;
  background-size:100% 100%,auto 100%;
}
.hero-copy{
  width:min(700px,46vw);
}
.hero-identity{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  align-items:center;
  gap:18px;
  margin-bottom:25px;
}
.hero-identity-shield{
  width:118px;
  height:118px;
  object-fit:contain;
  filter:drop-shadow(0 0 15px rgba(28,139,255,.34));
}
.hero-title-stack h1{
  margin:0 0 7px;
  font:700 clamp(40px,4vw,64px)/.96 Georgia,serif;
  letter-spacing:.1px;
}
.hero-title-stack .subbrand{
  margin:0;
  font-size:clamp(16px,1.55vw,25px);
  letter-spacing:5px;
}
.hero h2{
  margin-top:0;
}
.hero-logo-float{display:none!important}

/* Improve quote readability on shoulder without making it look boxed */
.hero-quote{
  right:4.5vw;
  top:28.5%;
  width:184px;
  padding:13px 14px;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(1,8,25,.48),rgba(1,8,25,.26));
  backdrop-filter:blur(4px);
  box-shadow:0 10px 32px rgba(0,0,0,.13);
}
.hero-quote p{
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}
.hero-quote span{
  width:52px;
}

/* SERVICES: exact 7-card single line on desktop; preserve height and icon size */
.service-strip{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:9px!important;
  padding-left:2.7vw!important;
  padding-right:2.7vw!important;
}
.service-card{
  min-height:126px!important;
  padding-left:8px!important;
  padding-right:8px!important;
}
.service-card img{
  width:50px!important;
  height:50px!important;
}
.service-symbol{
  font-size:40px!important;
}

/* FIRM: static full-width cosmic vortex background */
.firm{
  position:relative;
  min-height:500px;
  grid-template-columns:1.03fr .97fr;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,8,23,.96) 0%,rgba(2,8,23,.88) 36%,rgba(2,8,23,.52) 57%,rgba(2,8,23,.18) 100%),
    url("assets/firm-cosmic-static.webp") center center/cover no-repeat!important;
}
.firm::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,8,23,.08),rgba(2,8,23,.17));
}
.firm-copy,.firm-brand{
  position:relative;
  z-index:2;
}
.firm-brand{
  min-height:370px;
}
.firm-energy{display:none!important}
.firm-shield{
  width:min(310px,54%);
  animation:none!important;
  filter:
    drop-shadow(0 0 15px rgba(40,145,255,.30))
    drop-shadow(0 0 28px rgba(111,63,255,.16));
}

/* FOOTER: modern shield + HTML typography, no social icons */
.footer-lockup{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:22px;
}
.footer-lockup img{
  width:78px;
  height:78px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(27,134,255,.28));
}
.footer-lockup>div{
  display:flex;
  flex-direction:column;
}
.footer-lockup strong{
  font:600 24px/1 Georgia,serif;
  letter-spacing:.25px;
  color:#f7f9ff;
}
.footer-lockup span{
  margin-top:5px;
  font-size:13px;
  color:#e3eaf5;
}
.footer-brand>p{
  max-width:390px;
}

/* Sound interaction visual cue */
.nav-sound:active,
.service-card:active,
.practice-card:active,
.value-chip:active{
  filter:brightness(1.08);
}

/* DESKTOP / LAPTOP: retain one service row */
@media(min-width:1081px){
  .service-strip{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }
}

/* TABLET */
@media(max-width:1080px){
  .site-header{
    grid-template-columns:1fr auto;
  }
  .menu-toggle{
    display:block;
    grid-column:1;
  }
  .header-cta{
    grid-column:2;
  }
  .hero-identity{
    grid-template-columns:96px minmax(0,1fr);
  }
  .hero-identity-shield{
    width:96px;height:96px;
  }
  .service-strip{
    grid-template-columns:repeat(4,1fr)!important;
  }
}

/* MOBILE: dedicated composition, full head/orbit retained */
@media(max-width:760px){
  .site-header{
    grid-template-columns:1fr auto;
    padding-left:16px;
    padding-right:16px;
  }
  .hero{
    min-height:830px;
    padding:92px 18px 28px;
    align-items:flex-start;
  }
  .hero-photo{
    background-color:#020817;
    background-image:
      linear-gradient(180deg,rgba(1,7,23,.77) 0%,rgba(1,7,23,.43) 42%,rgba(1,7,23,.18) 67%,#020817 100%),
      url("assets/hero-final.webp");
    background-position:center,77% 72px;
    background-repeat:no-repeat,no-repeat;
    background-size:100% 100%,auto 84%;
  }
  .hero-copy{
    width:100%;
    max-width:465px;
  }
  .hero-identity{
    grid-template-columns:76px minmax(0,1fr);
    gap:12px;
    margin-bottom:22px;
    max-width:345px;
  }
  .hero-identity-shield{
    width:76px;height:76px;
  }
  .hero-title-stack h1{
    font-size:33px;
    line-height:.98;
  }
  .hero-title-stack .subbrand{
    font-size:12px;
    letter-spacing:2.6px;
  }
  .hero h2{
    font-size:31px;
    max-width:320px;
  }
  .hero-quote,.hero-audience{display:none}
  .service-strip{
    grid-template-columns:repeat(2,1fr)!important;
    padding-left:14px!important;
    padding-right:14px!important;
    gap:10px!important;
  }
  .service-card{
    min-height:116px!important;
    padding:12px!important;
  }
  .service-card:last-child{
    grid-column:1/-1;
  }
  .firm{
    min-height:auto;
    grid-template-columns:1fr;
    padding-top:58px;
    padding-bottom:58px;
    background:
      linear-gradient(180deg,rgba(2,8,23,.94) 0%,rgba(2,8,23,.76) 44%,rgba(2,8,23,.35) 100%),
      url("assets/firm-cosmic-static.webp") center center/cover no-repeat!important;
  }
  .firm-brand{
    min-height:260px;
    margin-top:22px;
  }
  .firm-shield{
    width:205px;
  }
  .footer-lockup img{
    width:68px;height:68px;
  }
  .footer-lockup strong{
    font-size:21px;
  }
  .footer-lockup span{
    font-size:12px;
  }
}


/* ==========================================================
   V8.2 — MOBILE HERO RECOMPOSITION ONLY
   Desktop presentation is intentionally untouched.
   Goal: keep the woman's face free of text/logo overlays.
   ========================================================== */
@media(max-width:760px){
  .hero{
    min-height:1060px!important;
    padding:0 18px 52px!important;
    align-items:flex-end!important;
  }

  /* Full-height portrait crop. Face remains in the clean upper zone. */
  .hero-photo{
    background-color:#020817!important;
    background-image:
      linear-gradient(
        180deg,
        rgba(1,7,23,.18) 0%,
        rgba(1,7,23,.08) 30%,
        rgba(1,7,23,.10) 43%,
        rgba(1,7,23,.38) 57%,
        rgba(1,7,23,.80) 76%,
        #020817 100%
      ),
      url("assets/hero-final.webp")!important;
    background-position:center,76% top!important;
    background-repeat:no-repeat,no-repeat!important;
    background-size:100% 100%,auto 100%!important;
  }

  /* Extra lower fade gives the relocated copy premium legibility
     without darkening or covering the face. */
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 43%,
        rgba(2,8,23,.10) 51%,
        rgba(2,8,23,.58) 68%,
        rgba(2,8,23,.92) 88%,
        #020817 100%
      );
  }

  .hero-copy{
    position:relative!important;
    z-index:5!important;
    width:100%!important;
    max-width:440px!important;
    margin:0 auto!important;
  }

  .eyebrow{
    margin:0 0 15px!important;
    font-size:9px!important;
    letter-spacing:2.8px!important;
  }

  .hero-identity{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px!important;
    margin-bottom:18px!important;
    max-width:350px!important;
  }

  .hero-identity-shield{
    width:72px!important;
    height:72px!important;
  }

  .hero-title-stack h1{
    font-size:31px!important;
    line-height:.96!important;
  }

  .hero-title-stack .subbrand{
    font-size:11px!important;
    letter-spacing:2.35px!important;
  }

  .hero h2{
    margin:0 0 22px!important;
    max-width:340px!important;
    font-size:31px!important;
    line-height:1.06!important;
  }

  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:min(100%,340px)!important;
  }

  .hero-actions .btn{
    width:100%!important;
    min-height:50px!important;
  }
}

/* Shorter phones: preserve the same facial clearance while allowing
   the hero to grow naturally instead of covering the face. */
@media(max-width:390px){
  .hero{
    min-height:1010px!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .hero-title-stack h1{font-size:29px!important}
  .hero h2{font-size:29px!important}
}


/* ==========================================================
   V8.3 — MOBILE HERO COLLAR COMPOSITION
   SOLO CELULAR. Desktop/tablet permanecen intactos.
   Objetivo:
   - Rostro completamente libre.
   - Textos desde la altura del collar hacia abajo.
   - Todo el contenido principal visible en una sola pantalla.
   - Fondo oscuro progresivo solo detrás de la información.
   ========================================================== */

@media(max-width:760px){

  .hero{
    position:relative!important;
    min-height:100svh!important;
    height:100svh!important;
    padding:
      0
      18px
      calc(18px + env(safe-area-inset-bottom, 0px))!important;
    align-items:flex-start!important;
    overflow:hidden!important;
  }

  /* La imagen conserva protagonismo. El rostro queda totalmente limpio. */
  .hero-photo{
    background-color:#020817!important;
    background-image:
      linear-gradient(
        180deg,
        rgba(1,7,23,.08) 0%,
        rgba(1,7,23,.03) 22%,
        rgba(1,7,23,.02) 40%,
        rgba(1,7,23,.12) 50%,
        rgba(1,7,23,.38) 60%,
        rgba(1,7,23,.74) 73%,
        rgba(2,8,23,.94) 88%,
        #020817 100%
      ),
      url("assets/hero-final.webp")!important;
    background-position:center,76% top!important;
    background-repeat:no-repeat,no-repeat!important;
    background-size:100% 100%,auto 100%!important;
  }

  /* Fondeo oscuro independiente: comienza apenas debajo del rostro,
     aproximadamente a la altura del collar. */
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 46%,
        rgba(2,8,23,.05) 50%,
        rgba(2,8,23,.28) 56%,
        rgba(2,8,23,.62) 66%,
        rgba(2,8,23,.88) 79%,
        rgba(2,8,23,.97) 92%,
        #020817 100%
      );
  }

  /* El bloque arranca en zona collar/pecho y no invade el rostro. */
  .hero-copy{
    position:absolute!important;
    z-index:5!important;
    left:18px!important;
    right:18px!important;
    top:51svh!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
  }

  .eyebrow{
    margin:0 0 8px!important;
    font-size:8.8px!important;
    line-height:1.2!important;
    letter-spacing:2.55px!important;
    white-space:nowrap!important;
    text-shadow:0 2px 12px rgba(0,0,0,.62)!important;
  }

  .hero-identity{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    max-width:355px!important;
    margin:0 0 9px!important;
  }

  .hero-identity-shield{
    width:64px!important;
    height:64px!important;
    filter:
      drop-shadow(0 0 10px rgba(42,145,255,.34))
      drop-shadow(0 0 15px rgba(110,63,255,.14))!important;
  }

  .hero-title-stack h1{
    margin:0 0 4px!important;
    font-size:28px!important;
    line-height:.94!important;
    letter-spacing:0!important;
    text-shadow:0 2px 15px rgba(0,0,0,.72)!important;
  }

  .hero-title-stack .subbrand{
    margin:0!important;
    font-size:10.6px!important;
    line-height:1.15!important;
    letter-spacing:2.15px!important;
    white-space:nowrap!important;
    text-shadow:0 2px 10px rgba(0,0,0,.68)!important;
  }

  .hero h2{
    margin:0 0 11px!important;
    max-width:355px!important;
    font-size:28px!important;
    line-height:1.00!important;
    text-shadow:0 3px 18px rgba(0,0,0,.82)!important;
  }

  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:min(100%,340px)!important;
    margin:0!important;
  }

  .hero-actions .btn{
    width:100%!important;
    min-height:44px!important;
    padding:9px 15px!important;
    font-size:11.4px!important;
  }

  /* En móvil estas piezas continúan ocultas para no saturar. */
  .hero-quote,
  .hero-audience{
    display:none!important;
  }
}

/* iPhone / móviles más estrechos */
@media(max-width:390px){
  .hero{
    padding-left:15px!important;
    padding-right:15px!important;
  }

  .hero-copy{
    left:15px!important;
    right:15px!important;
    top:50.5svh!important;
  }

  .eyebrow{
    font-size:8.2px!important;
    letter-spacing:2.25px!important;
  }

  .hero-identity{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:9px!important;
  }

  .hero-identity-shield{
    width:58px!important;
    height:58px!important;
  }

  .hero-title-stack h1{
    font-size:26px!important;
  }

  .hero-title-stack .subbrand{
    font-size:10px!important;
    letter-spacing:1.9px!important;
  }

  .hero h2{
    font-size:26px!important;
    max-width:325px!important;
  }

  .hero-actions{
    width:min(100%,320px)!important;
  }
}

/* Pantallas móviles bajas: sube ligeramente el bloque para mantener
   ambos botones dentro de la misma vista sin tocar el rostro. */
@media(max-width:760px) and (max-height:760px){
  .hero-copy{
    top:48.5svh!important;
  }

  .hero-title-stack h1{
    font-size:26px!important;
  }

  .hero h2{
    font-size:26px!important;
    margin-bottom:9px!important;
  }

  .hero-actions .btn{
    min-height:42px!important;
  }
}


/* ==========================================================
   V8.5 — MOBILE HERO SPACING REFINEMENT
   SOLO CELULAR. Desktop/tablet no se modifican.
   - El rostro permanece libre.
   - El bloque inicia a la altura del collar.
   - Los botones bajan para ocupar el vacío inferior.
   - Se respeta el safe area del navegador.
   ========================================================== */

@media(max-width:760px){

  .hero-copy{
    top:49.5svh!important;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px))!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }

  .eyebrow{
    margin:0 0 11px!important;
  }

  .hero-identity{
    margin:0 0 15px!important;
  }

  .hero h2{
    margin:0!important;
  }

  /* Empuja la zona de acción hacia la parte baja del hero.
     Así se elimina el gran vacío que quedaba debajo del segundo botón. */
  .hero-actions{
    margin-top:auto!important;
    padding-top:18px!important;
    gap:10px!important;
  }

  .hero-actions .btn{
    min-height:48px!important;
  }
}

/* iPhone estrecho */
@media(max-width:390px){
  .hero-copy{
    top:49svh!important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px))!important;
  }

  .hero-actions{
    padding-top:14px!important;
    gap:9px!important;
  }
}

/* Móviles de poca altura: compacta solo lo indispensable
   para conservar ambos botones dentro de la misma pantalla. */
@media(max-width:760px) and (max-height:760px){
  .hero-copy{
    top:47.5svh!important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px))!important;
  }

  .hero-actions{
    padding-top:10px!important;
    gap:7px!important;
  }

  .hero-actions .btn{
    min-height:42px!important;
  }
}