/*
 * The Law Office of Edersy Suarez — suarezlawoffice.com
 * Founder-centric editorial: deep navy, silver, engraved details, Cormorant.
 * Same brand language as the approved digital card.
 */

@font-face{font-family:"Edersy Serif";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/cormorant-regular.woff2") format("woff2")}
@font-face{font-family:"Edersy Serif";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/cormorant-italic.woff2") format("woff2")}
@font-face{font-family:"Edersy Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url("/assets/fonts/montserrat-300.woff2") format("woff2")}
@font-face{font-family:"Edersy Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Edersy Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/montserrat-500.woff2") format("woff2")}

:root{
  --navy:#081a33; --navy-hi:#16345c; --navy-deep:#050f1f;
  --blue:#245ea8; --blue-2:#3d7fd0;
  --silver:#b8c2d2; --silver-2:#dfe6f0; --ivory:#f4f6f9; --card:#ffffff;
  --ink:#122036; --mut:#5f6c85;
  --line:rgba(18,32,54,.12); --line-nav:rgba(184,194,210,.18);
  --serif:"Edersy Serif",Georgia,serif;
  --sans:"Edersy Sans","Segoe UI",system-ui,Arial,sans-serif;
  --pad:clamp(22px,6vw,84px);
}

*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy-deep);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.eyebrow{font-size:11px;letter-spacing:.32em;color:var(--blue);text-transform:uppercase}
.eyebrow.silver{color:var(--silver)}

.cta{display:inline-block;text-align:center;text-transform:uppercase}
.cta.solid{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;border-radius:5px;
  font-size:13px;font-weight:600;letter-spacing:.12em;padding:18px 38px;
  box-shadow:0 14px 30px rgba(36,94,168,.4)}
.cta.solid:hover{filter:brightness(1.08)}
.cta.ghost{border:1px solid rgba(184,194,210,.45);border-radius:5px;color:#e2e8f2;font-size:12px;
  font-weight:500;letter-spacing:.16em;padding:17px 32px}
.cta.ghost:hover{border-color:rgba(184,194,210,.9);color:#fff}

.rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto;width:170px}
.rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(184,194,210,.6))}
.rule i:last-child{background:linear-gradient(90deg,rgba(184,194,210,.6),transparent)}
.rule b{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--silver);flex:0 0 auto}

/* Revelado sutil al entrar en pantalla */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- UTILITY BAR ---------- */
.util{background:var(--navy-deep);border-bottom:1px solid rgba(184,194,210,.08)}
.utIn{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  padding:10px var(--pad);color:var(--silver);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.utSep{width:4px;height:4px;transform:rotate(45deg);border:1px solid rgba(184,194,210,.4)}
.utPhone{margin-left:auto;color:var(--silver-2);font-weight:500;letter-spacing:.1em}
.utPhone:hover{color:#fff}

/* ---------- HEADER ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(8,26,51,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-nav)}
.top{display:flex;align-items:center;gap:30px;padding:15px var(--pad)}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brandOf{font-size:9.5px;letter-spacing:.36em;color:var(--silver);text-transform:uppercase}
.brandName{font-family:var(--serif);font-size:25px;font-weight:600;color:#eef2f8;margin-top:4px}
.brandName i{font-style:italic;font-weight:400;color:var(--silver)}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{color:var(--silver-2);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:#fff;border-color:rgba(184,194,210,.55)}
.topActs{display:flex;align-items:center;gap:12px}
.lang{border:1px solid rgba(184,194,210,.4);border-radius:30px;color:var(--silver);
  font-size:10.5px;letter-spacing:.14em;padding:8px 14px}
.lang:hover{color:#fff;border-color:rgba(184,194,210,.7)}
.callPill{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 22px;border-radius:5px;box-shadow:0 8px 20px rgba(36,94,168,.4);white-space:nowrap}
.callPill:hover{filter:brightness(1.08)}

/* ---------- HERO ---------- */
.hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(130% 90% at 78% 0%,var(--navy-hi),var(--navy) 55%,var(--navy-deep) 118%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 82%,rgba(5,15,31,.55))}
.heroIn{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.heroCopy{max-width:54%;padding:clamp(64px,9vw,128px) 0 clamp(64px,8vw,110px)}
.heroCopy .eyebrow{color:var(--silver)}
.heroCopy h1{margin-top:26px;font-family:var(--serif);font-weight:500;
  font-size:clamp(46px,6.6vw,88px);line-height:1.02;letter-spacing:.005em;color:#f2f5fa}
.heroCopy h1 em{font-style:italic;color:var(--silver-2)}
.heroSub{margin-top:28px;max-width:440px;color:#c3ccdb;font-size:16px;line-height:1.8}
.heroActs{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.heroNote{margin-top:26px;color:var(--silver);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
/* Panel editorial a sangre: la foto en duotono navy ocupa el borde derecho
   del hero, con la costura izquierda fundida al lienzo. Sin recortes. */
.heroPortrait{position:absolute;top:0;right:0;bottom:0;margin:0;
  width:min(46vw,660px);overflow:hidden}
.heroPortrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.heroPortrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--navy) 0%,rgba(8,26,51,.82) 12%,rgba(8,26,51,.38) 32%,rgba(8,26,51,.1) 52%,transparent 68%),
    linear-gradient(180deg,rgba(8,26,51,.5) 0%,transparent 26%),
    linear-gradient(180deg,transparent 72%,rgba(5,15,31,.72) 100%)}

/* ---------- TRUST BAR ---------- */
.trust{background:var(--navy-deep);border-top:1px solid rgba(184,194,210,.1);
  border-bottom:1px solid rgba(184,194,210,.1)}
.trustIn{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  padding:0 var(--pad)}
.tItem{padding:30px 26px;border-left:1px solid rgba(184,194,210,.12);display:flex;flex-direction:column;gap:7px}
.tItem:first-child{border-left:0;padding-left:0}
.tLabel{color:var(--blue-2);font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.tValue{color:var(--silver-2);font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.25}

/* ---------- PRACTICE AREAS ---------- */
.areas{background:var(--ivory);padding:clamp(80px,10vw,130px) var(--pad)}
.areasHead{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:40px;align-items:end}
.areasHead h2{margin-top:16px;font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,5vw,62px);line-height:1.05;color:var(--ink)}
.areasHead h2 em{font-style:italic;color:var(--blue)}
.areasIntro{color:var(--mut);font-size:15px;line-height:1.8;padding-bottom:8px}
.areaList{max-width:1280px;margin:clamp(44px,6vw,72px) auto 0}
.areaRow{display:grid;grid-template-columns:90px minmax(0,.9fr) minmax(0,1.1fr);gap:28px;
  align-items:baseline;padding:34px 0;border-top:1px solid var(--line)}
.areaRow:last-child{border-bottom:1px solid var(--line)}
.aNum{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--blue);opacity:.75}
.areaRow h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,38px);
  line-height:1.1;color:var(--ink)}
.areaRow p{color:var(--mut);font-size:14.5px;line-height:1.8;max-width:520px}

/* ---------- STATEMENT ---------- */
.statement{position:relative;overflow:hidden;text-align:center;color:#fff;
  padding:clamp(90px,11vw,150px) var(--pad);
  background:radial-gradient(120% 90% at 50% 0%,var(--navy-hi),var(--navy) 66%)}
.stMark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,92%);opacity:.05;pointer-events:none}
.stLine{position:relative;font-family:var(--serif);font-weight:500;
  font-size:clamp(30px,4.4vw,54px);line-height:1.22;color:#eef2f8}
.stLine em{font-style:italic;color:var(--silver-2)}
.statement .rule{position:relative;margin-top:34px}

/* ---------- ATTORNEY ---------- */
.attorney{background:var(--card);padding:clamp(80px,10vw,130px) var(--pad)}
.attIn{max-width:1120px;margin:0 auto;display:grid;
  grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
.attCreds{background:var(--navy);color:#fff;padding:clamp(30px,4vw,48px);position:relative}
.attCreds::before{content:"";position:absolute;inset:12px;border:1px solid rgba(184,194,210,.2);pointer-events:none}
.attCreds dl{position:relative;margin-top:26px;display:flex;flex-direction:column;gap:24px}
.attCreds dt{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--blue-2)}
.attCreds dd{margin-top:7px;font-family:var(--serif);font-size:19px;font-weight:500;
  color:var(--silver-2);line-height:1.4}
.attCopy h2{margin-top:16px;font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,4.6vw,58px);line-height:1.05;color:var(--ink)}
.attCopy h2 em{font-style:italic;color:var(--blue)}
.attCopy p{margin-top:22px;color:var(--mut);font-size:15.5px;line-height:1.85;max-width:560px}
.attCopy .cta{margin-top:34px}

/* ---------- PROCESS ---------- */
.process{background:var(--ivory);padding:clamp(80px,10vw,130px) var(--pad);text-align:center}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,54px);
  line-height:1.06;margin-top:14px;color:var(--ink)}
.steps{margin:clamp(48px,6vw,68px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1120px;text-align:left}
.step{padding:10px 44px;border-left:1px solid var(--line)}
.step:first-child{border-left:0;padding-left:0}
.step:last-child{padding-right:0}
.step .num{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:64px;line-height:1;color:var(--blue);opacity:.8}
.step h3{margin-top:16px;font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink)}
.step p{margin-top:10px;font-size:14px;color:var(--mut);line-height:1.8}

/* ---------- AFTER AN ACCIDENT ---------- */
.accident{position:relative;color:#fff;padding:clamp(80px,10vw,130px) var(--pad);
  background:radial-gradient(120% 80% at 50% 0%,var(--navy-hi),var(--navy) 68%)}
.accIn{position:relative;max-width:1120px;margin:0 auto;text-align:center}
.accIn h2{margin-top:16px;font-family:var(--serif);font-weight:500;
  font-size:clamp(36px,4.8vw,56px);line-height:1.08;color:#eef2f8}
.accIn h2 em{font-style:italic;color:var(--silver-2)}
.accGrid{margin:clamp(44px,6vw,64px) auto 0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:rgba(184,194,210,.16);border:1px solid rgba(184,194,210,.16)}
.accItem{background:var(--navy);padding:clamp(28px,4vw,44px);text-align:left}
.accNum{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:44px;line-height:1;color:var(--blue-2)}
.accItem h3{margin-top:14px;font-family:var(--serif);font-size:23px;font-weight:600;color:#eef2f8}
.accItem p{margin-top:10px;font-size:14px;color:#c3ccdb;line-height:1.8}
.accIn > .cta{margin-top:clamp(36px,5vw,52px)}

/* ---------- CONTACT ---------- */
.contact{background:var(--ivory);padding:clamp(80px,10vw,130px) var(--pad)}
.coHead{max-width:1120px;margin:0 auto}
.coHead h2{margin-top:16px;font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,5vw,60px);line-height:1.05;color:var(--ink)}
.coHead h2 em{font-style:italic;color:var(--blue)}
.coGrid{max-width:1120px;margin:clamp(40px,5vw,60px) auto 0;display:grid;
  grid-template-columns:minmax(320px,460px) minmax(0,1fr);gap:clamp(40px,5vw,64px);align-items:stretch}
.rows{display:flex;flex-direction:column}
.r{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  color:var(--ink);padding:19px 2px;border-bottom:1px solid var(--line)}
.r:first-child{border-top:1px solid var(--line)}
.r:not(.static):hover b{color:var(--blue)}
.r .ic{width:46px;height:46px;flex:0 0 46px;border:1px solid var(--line);
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue);background:#fff}
.r .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.r .m{display:flex;flex-direction:column}
.r .m b{font-size:15.5px;font-weight:600;transition:color .2s}
.r .m span{font-size:12.5px;color:var(--mut);margin-top:2px}
.r.static{cursor:default}
.mapBox{display:flex;flex-direction:column;border:1px solid rgba(184,194,210,.2);
  overflow:hidden;box-shadow:0 20px 48px rgba(12,28,52,.22);background:#0a1e3c}
.mapArt{display:block;width:100%;height:auto;flex:1}
.mapActs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(184,194,210,.18)}
.mapBtn{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 12px;color:var(--silver-2);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.mapBtn:first-child{border-right:1px solid rgba(184,194,210,.18)}
.mapBtn:hover{background:rgba(61,127,208,.14);color:#fff}
.mapBtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- FINAL CTA ---------- */
.finalCta{text-align:center;color:#fff;padding:clamp(80px,10vw,120px) var(--pad);
  background:radial-gradient(120% 90% at 50% 0%,var(--navy-hi),var(--navy) 70%)}
.fcPhone{display:inline-block;margin-top:22px;font-family:var(--serif);font-weight:500;
  font-size:clamp(44px,7vw,84px);line-height:1;color:#f2f5fa;
  border-bottom:1px solid rgba(184,194,210,.35);padding-bottom:12px}
.fcPhone:hover{color:#fff;border-color:rgba(184,194,210,.7)}
.fcNote{margin-top:26px;color:var(--silver);font-size:11px;letter-spacing:.24em;text-transform:uppercase}

/* ---------- FOOTER ---------- */
footer{position:relative;text-align:center;padding:clamp(60px,8vw,84px) var(--pad) 46px;color:#fff;
  background:var(--navy-deep);border-top:1px solid rgba(184,194,210,.1)}
footer .mark{width:270px;max-width:70%;margin:0 auto}
footer .fn{margin-top:28px;font-family:var(--serif);font-size:19px;color:#eef2f8}
footer .meta{margin-top:10px;color:var(--silver);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.footRule{margin-top:30px}
footer .legal{margin:24px auto 0;max-width:620px;color:var(--silver);
  font-size:10.5px;line-height:1.7;letter-spacing:.02em}
footer .copyright{margin-top:26px;color:rgba(184,194,210,.55);font-size:11px;letter-spacing:.06em}
footer .copyright a{color:rgba(184,194,210,.75);border-bottom:1px solid rgba(184,194,210,.3)}
footer .copyright a:hover{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .heroPortrait{width:40vw}
  .heroCopy{max-width:58%}
}
@media (max-width:1060px){
  .heroCopy h1{font-size:clamp(42px,7vw,68px)}
  .trustIn{grid-template-columns:1fr 1fr}
  .tItem{border-left:0;padding-left:0;border-top:1px solid rgba(184,194,210,.1)}
  .tItem:nth-child(-n+2){border-top:0}
  .tItem:nth-child(even){padding-left:26px;border-left:1px solid rgba(184,194,210,.12)}
}
@media (max-width:920px){
  .heroCopy{max-width:100%;padding-bottom:40px;text-align:center}
  .heroSub{margin-left:auto;margin-right:auto}
  .heroActs{justify-content:center}
  .heroPortrait{position:static;width:auto;height:440px;
    margin:0 calc(-1 * var(--pad))}
  .heroPortrait img{object-position:50% 8%}
  .heroPortrait::after{background:
    linear-gradient(180deg,var(--navy) 0%,rgba(8,26,51,.25) 26%,transparent 48%),
    linear-gradient(180deg,transparent 74%,rgba(5,15,31,.7) 100%)}
  .areasHead{grid-template-columns:1fr;gap:18px}
  .areaRow{grid-template-columns:56px 1fr;grid-template-rows:auto auto}
  .areaRow p{grid-column:2}
  .attIn{grid-template-columns:1fr;gap:44px}
  .attCreds{max-width:560px}
  .steps{grid-template-columns:1fr;max-width:540px;gap:40px;margin-left:auto;margin-right:auto}
  .step{border-left:0;padding:0}
  .accGrid{grid-template-columns:1fr}
  .coGrid{grid-template-columns:1fr}
}
@media (max-width:800px){
  .nav{display:none}
  .top{gap:12px}
  .topActs{margin-left:auto}
}
@media (max-width:560px){
  .utIn{gap:9px;font-size:9px;padding-top:8px;padding-bottom:8px;justify-content:center}
  .utIn span:nth-of-type(3){display:none}
  .utIn .utSep{display:none}
  .utPhone{margin-left:0;flex-basis:100%;text-align:center;display:none}
  .brandName{font-size:21px}
  .callPill{display:none}
  .heroActs .cta{width:100%}
  .trustIn{grid-template-columns:1fr}
  .tItem{padding-left:0!important;border-left:0!important;border-top:1px solid rgba(184,194,210,.1)}
  .tItem:first-child{border-top:0}
  .areaRow{gap:14px;padding:28px 0}
  .fcPhone{font-size:clamp(36px,11vw,54px)}
}