/* Ser Abogados — Minimal */
:root{
  color-scheme:light;
  --bg:#F7F5F1; --surface:#F1EEE8; --raise:transparent;
  --ink:#16161A; --dim:#7A766E;
  --accent:#A8192A; --accent-soft:rgba(168,25,42,.36);
  --line:rgba(22,22,26,.13); --line-soft:rgba(22,22,26,.07);
  --img:.24;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F0F11; --surface:#141417; --raise:transparent;
    --ink:#EDEBE6; --dim:#8B8780;
    --accent:#D9455A; --accent-soft:rgba(217,69,90,.4);
    --line:rgba(237,235,230,.14); --line-soft:rgba(237,235,230,.07);
    --img:.30;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F0F11; --surface:#141417; --raise:transparent;
  --ink:#EDEBE6; --dim:#8B8780;
  --accent:#D9455A; --accent-soft:rgba(217,69,90,.4);
  --line:rgba(237,235,230,.14); --line-soft:rgba(237,235,230,.07);
  --img:.30;
}

*{box-sizing:border-box;}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:15px; line-height:1.62; font-weight:300;
  -webkit-font-smoothing:antialiased; transition:background .5s ease, color .5s ease;}
img{display:block; max-width:100%; height:auto;}
a{color:inherit;}
::selection{background:var(--accent); color:var(--bg);}
:is(a,button):focus-visible{outline:1.5px solid var(--accent); outline-offset:4px;}
.skip{position:absolute; left:-9999px; background:var(--ink); color:var(--bg); padding:12px 18px; z-index:99;}
.skip:focus{left:14px; top:14px;}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-.025em; line-height:1.1; text-wrap:balance;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; margin:0;}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  margin:0; color:var(--accent);}
.wrap{width:100%; max-width:1920px; margin:0 auto; padding-inline:clamp(22px, 4.6vw, 92px);}

section{padding-block:104px; scroll-margin-top:90px;}
@media (max-width:760px){ section{padding-block:64px;} }
.section-alt{background:var(--surface);}

/* ---------- nav ---------- */
nav{position:sticky; top:0; z-index:60; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 84%, transparent); border-bottom:1px solid var(--line-soft);}
nav .row{display:flex; align-items:center; justify-content:space-between; gap:22px;
  width:100%; max-width:1920px; margin:0 auto; padding:22px clamp(22px, 4.6vw, 92px);}
@media (max-width:760px){ nav .row{padding:16px 22px;} }
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;
  font-size:15px; letter-spacing:.15em; text-transform:uppercase; font-weight:500; white-space:nowrap;}
.brand .seal{position:relative; width:20px; height:20px; flex:none; border-radius:50%;
  border:2.6px dotted var(--accent); background:none;}
.brand .seal::after{content:""; position:absolute; inset:5px; border-radius:50%; background:var(--accent);}
.brand .seal::before{display:none;}
.navlinks{display:flex; gap:32px; font-size:15px;}
.navlinks a{text-decoration:none; color:var(--dim); position:relative; padding-bottom:3px; border-radius:0; background:none;}
.navlinks a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink);
  transition:right .45s cubic-bezier(.2,.7,.2,1);}
.navlinks a:hover{color:var(--ink); background:none;}
.navlinks a:hover::after{right:0;}
.navlinks a.active{color:var(--ink); background:none;}
.navlinks a.active::after{right:0; background:var(--accent);}
@media (max-width:900px){ .navlinks{display:none;} }
.nav-tools{display:flex; align-items:center; gap:8px;}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; flex:none;
  border:1px solid var(--line); border-radius:50%; background:none; color:var(--dim); padding:0; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
  transition:color .3s ease, border-color .3s ease;}
.icon-btn:hover{color:var(--ink); border-color:var(--ink); background:none;}
.icon-btn svg{width:15px; height:15px;}
.menu-btn{display:none;}
@media (max-width:900px){ .menu-btn{display:inline-flex;} }
.icon-x{display:none;}
nav.menu-open .icon-menu{display:none;}
nav.menu-open .icon-x{display:block;}
.mobile-panel{display:none; flex-direction:column; padding:6px clamp(22px, 4.6vw, 92px) 22px;}
nav.menu-open .mobile-panel{display:flex;}
.mobile-panel a{text-decoration:none; color:var(--ink); font-size:17px; font-weight:400; background:none;
  padding:15px 2px; border-bottom:1px solid var(--line-soft); border-radius:0;}
.mobile-panel a.active{color:var(--accent); background:none;}

/* ---------- enlaces de acción (antes botones) ---------- */
.btn, .btn-ghost{display:inline-flex; align-items:center; gap:8px; background:none; border:0;
  border-bottom:1px solid var(--line); border-radius:0; padding:0 0 3px; box-shadow:none;
  font-family:inherit; font-size:14px; font-weight:400; color:var(--ink); text-decoration:none; cursor:pointer;
  transition:border-color .35s ease, color .35s ease;}
.btn{color:var(--accent); border-bottom-color:var(--accent-soft);}
.btn:hover{background:none; transform:none; box-shadow:none; border-bottom-color:var(--accent); color:var(--accent);}
.btn-ghost:hover{background:none; transform:none; border-bottom-color:var(--ink); color:var(--ink);}
.nav-cta{font-size:15px;}
@media (max-width:700px){ .btn.nav-cta{display:none;} }
.actions{display:flex; gap:28px; flex-wrap:wrap; margin-top:36px;}
.mobile-panel .btn{margin-top:18px; justify-content:flex-start;}

/* ---------- portada ---------- */
.hero{padding-block:110px 84px; border-bottom:0;}
@media (max-width:760px){ .hero{padding-block:64px 52px;} }
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) clamp(260px, 24vw, 420px); gap:clamp(40px, 5vw, 96px); align-items:end;}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:44px;} }
.hero h1{margin-top:26px; font-size:clamp(31px,3.6vw,62px); max-width:15ch;}
.hero h1 em{font-style:italic; font-weight:300; color:var(--dim); background:none; -webkit-text-fill-color:currentColor;}
.hero .lede{margin:24px 0 0; max-width:48ch; color:var(--dim); font-size:15.5px; line-height:1.76;}
.hero-figure{position:relative; margin:0;}
.hero-figure img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 18%;
  filter:grayscale(1) contrast(1.04); border-radius:0;}
.hero-figure figcaption{margin-top:11px; display:flex; justify-content:space-between; gap:12px; color:var(--dim);}
.facts{display:grid; grid-template-columns:repeat(3,1fr); margin-top:72px; border-top:1px solid var(--line);}
@media (max-width:760px){ .facts{grid-template-columns:1fr; margin-top:46px;} }
.facts div{padding:24px 0 24px 26px; border-left:1px solid var(--line);}
.facts div:first-child{padding-left:0; border-left:0;}
@media (max-width:760px){ .facts div{padding:16px 0; border-left:0; border-top:1px solid var(--line-soft);} .facts div:first-child{border-top:0;} }
.facts b{display:block; font-weight:400; font-size:16.5px; letter-spacing:-.02em;}
.facts span{color:var(--dim); font-size:12px;}
/* portadas interiores */
.hero-meta{display:flex; flex-direction:column; gap:0;}
.hero-meta div{background:none; box-shadow:none; border-radius:0; border-top:1px solid var(--line);
  padding:14px 0; font-size:13px; color:var(--dim);}
.hero-meta div b{display:block; color:var(--ink); font-weight:400; font-size:14px; margin-bottom:2px;}
@media (max-width:960px){ .hero-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:0 26px;} }
@media (max-width:620px){ .hero-meta{grid-template-columns:1fr;} }

/* ---------- índice de áreas ---------- */
.index-head{display:flex; justify-content:space-between; align-items:baseline; color:var(--dim); margin-bottom:22px;}
.index-list{display:block;}
.index-row{position:relative; display:grid; grid-template-columns:46px minmax(0,1fr) 38px; gap:26px; align-items:center;
  padding:30px 26px; border:0; border-top:1px solid var(--line); border-radius:0; background:none; box-shadow:none;
  overflow:hidden; isolation:isolate; text-decoration:none; transition:none;}
.index-list .index-row:last-of-type{border-bottom:1px solid var(--line);}
@media (max-width:760px){ .index-row{grid-template-columns:34px minmax(0,1fr); gap:14px; padding:22px 8px;} }
.index-row:hover{transform:none; box-shadow:none; background:none;}
.index-row .rowbg{position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center 32%;
  opacity:0; transform:scale(1.06); filter:grayscale(1);
  transition:opacity .55s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);}
.index-row:hover .rowbg{opacity:var(--img); transform:scale(1);}
.index-row .n{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--accent); letter-spacing:.14em;
  align-self:start; padding-top:7px;}
.index-row h3{font-size:clamp(18px,2.05vw,25px); font-weight:400; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.index-row:hover h3{transform:translateX(12px);}
.index-row p{margin:7px 0 0; font-size:13.5px; color:var(--dim); max-width:58ch; line-height:1.6;
  opacity:0; max-height:0; transform:translateX(12px);
  transition:opacity .4s ease, max-height .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);}
.index-row:hover p{opacity:1; max-height:70px;}
.index-row .go{justify-self:end; width:auto; height:auto; border-radius:0; background:none; color:var(--dim);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), color .3s;}
.index-row:hover .go{transform:translateX(6px); background:none; color:var(--ink);}
.index-row .go svg{width:16px; height:16px;}
@media (max-width:760px){ .index-row .go{display:none;} }
.thumb{display:none;}

/* ---------- detalle de áreas ---------- */
.area{display:grid; grid-template-columns:clamp(200px, 17vw, 300px) minmax(0,1fr); gap:clamp(34px, 4.4vw, 80px); padding:52px 0; margin:0;
  border:0; border-top:1px solid var(--line); border-radius:0; background:none;}
@media (max-width:900px){ .area{grid-template-columns:1fr; gap:22px; padding:38px 0;} }
.area-aside{position:sticky; top:104px; align-self:start;}
@media (max-width:900px){ .area-aside{position:static;} }
.area-figure{margin:16px 0 0; height:140px; border-radius:0; background:none; overflow:hidden;}
.area-figure img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04);
  mix-blend-mode:normal; opacity:.9;}
@media (max-width:900px){ .area-figure{height:120px; max-width:260px;} }
.area h2{font-size:clamp(23px,2.6vw,32px);}
.area .desc{margin:16px 0 0; font-size:15.5px; line-height:1.75; color:var(--dim); max-width:60ch;}
.area ul{list-style:none; margin:26px 0 0; padding:0; max-width:min(100%, 88ch);}
.area li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:14px; align-items:start;
  background:none; border:0; border-top:1px solid var(--line-soft); border-radius:0; padding:15px 0;
  font-size:14px; line-height:1.66; color:var(--dim);}
.area li svg{width:13px; height:13px; margin-top:4px; color:var(--accent);}
.area li b{color:var(--ink); font-weight:500;}

/* ---------- nota / enfoque ---------- */
.band{background:none; color:inherit; border-radius:0; margin-inline:0; padding-block:104px;
  border-top:1px solid var(--line);}
.band .eyebrow{background:none; color:var(--dim); padding:0;}
.band .eyebrow::before{display:none;}
.band blockquote{margin:20px 0 0; font-family:inherit; font-weight:300; letter-spacing:-.02em;
  font-size:clamp(21px,2.5vw,32px); line-height:1.34; max-width:26ch;}
.band blockquote em{font-style:italic; color:var(--accent);}
.band-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px, 3.4vw, 56px); margin-top:56px;}
@media (max-width:820px){ .band-cols{grid-template-columns:1fr; gap:0;} }
.band-cols div{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:18px 0 0;}
.band-cols h4{margin:0 0 8px; font-family:inherit; font-size:14px; font-weight:500; letter-spacing:0;}
.band-cols p{margin:0; font-size:13.5px; line-height:1.7; color:var(--dim);}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:clamp(260px, 24vw, 420px) minmax(0,1fr); gap:clamp(40px, 5vw, 96px); align-items:start;}
@media (max-width:880px){ .split{grid-template-columns:1fr; gap:30px;} }
.split.rev .split-figure{order:0;}
.split-figure{position:relative; margin:0;}
.split-figure img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:0;
  filter:grayscale(1) contrast(1.04);}
.split-figure::after{display:none;}
.split h2{font-size:clamp(24px,2.8vw,34px);}
.split .role{margin:14px 0 0; color:var(--accent); font-size:13.5px; font-weight:400;}
.split .bio{margin:18px 0 0; font-size:15.5px; line-height:1.78; color:var(--dim); max-width:56ch;}

/* ---------- encabezados ---------- */
.head{max-width:min(100%, 60ch); margin-bottom:42px;}
.head h2{margin-top:16px; font-size:clamp(24px,2.9vw,36px);}
.head p{margin:16px 0 0; font-size:15.5px; line-height:1.78; color:var(--dim);}
.head-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px, 5vw, 96px); align-items:start; margin-bottom:42px;}
@media (max-width:880px){ .head-split{grid-template-columns:1fr; gap:18px;} }
.head-split h2{margin-top:16px; font-size:clamp(24px,2.9vw,36px);}
.head-split p{margin:0; font-size:15px; line-height:1.78; color:var(--dim);}

/* ---------- tarjetas (sin caja) ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px, 3.4vw, 56px);}
@media (max-width:880px){ .cards{grid-template-columns:1fr; gap:0;} }
.cards-2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px, 3.4vw, 56px);}
@media (max-width:820px){ .cards-2{grid-template-columns:1fr; gap:0;} }
.card{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:20px 0 0;
  box-shadow:none; transition:none;}
.card:hover{transform:none; box-shadow:none;}
.card::before{display:none;}
.card .n{display:block; min-width:0; height:auto; padding:0; border-radius:0; background:none; color:var(--accent);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;}
.card h3{margin-top:12px; font-size:18px; font-weight:400;}
.card p{margin:11px 0 0; font-size:13.5px; line-height:1.72; color:var(--dim);}
.card .card-link{display:inline-block; margin-top:14px; font-size:13.5px; font-weight:400; color:var(--accent);
  text-decoration:none; border-bottom:1px solid var(--accent-soft); padding-bottom:2px;}
.card .card-link:hover{text-decoration:none; border-bottom-color:var(--accent);}

/* ---------- pasos y faq ---------- */
.steps{display:block; max-width:min(100%, 980px);}
.step{display:grid; grid-template-columns:52px minmax(0,1fr); gap:22px; align-items:start;
  background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:26px 0;}
.step .n{display:block; width:auto; height:auto; border-radius:0; background:none; color:var(--accent);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; padding-top:4px;}
.step h4{margin:0; font-family:inherit; font-size:16px; font-weight:400; letter-spacing:-.01em;}
.step p{margin:9px 0 0; font-size:13.5px; line-height:1.72; color:var(--dim); max-width:62ch;}
.faq-list{display:block; max-width:min(100%, 980px);}
.faq-item{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:26px 0;}
.faq-item h4{margin:0; font-family:inherit; font-size:16px; font-weight:400; letter-spacing:-.01em;}
.faq-item p{margin:10px 0 0; font-size:13.5px; line-height:1.72; color:var(--dim); max-width:min(100%, 70ch);}

/* ---------- cierre y pie ---------- */
.close{padding-block:104px 116px; text-align:left; border-top:1px solid var(--line);}
.close h2{margin:0; font-size:clamp(25px,3vw,40px); max-width:20ch;}
.close p{margin:18px 0 0; font-size:15.5px; line-height:1.7; color:var(--dim); max-width:48ch;}
.close .actions{justify-content:flex-start;}
.stamp{display:none;}
footer{border-top:1px solid var(--line); padding-block:22px; color:var(--dim); font-size:11.5px;}
footer .row{width:100%; max-width:1920px; margin:0 auto; padding-inline:clamp(22px, 4.6vw, 92px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}


/* ---------- whatsapp ---------- */
.whatsapp-float{position:fixed; bottom:24px; right:24px; z-index:50; width:44px; height:44px; border-radius:50%;
  background:none; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  box-shadow:none; transition:border-color .3s ease, transform .3s ease;}
.whatsapp-float:hover{transform:none; border-color:var(--ink);}
.whatsapp-float svg{width:17px; height:17px; fill:var(--ink) !important;}
@media (max-width:560px){ .whatsapp-float{bottom:16px; right:16px; width:40px; height:40px;} }

/* ---------- objeto que sigue el cursor ---------- */
.seal-cursor{position:fixed; top:0; left:0; width:54px; height:54px; z-index:70; pointer-events:none;
  transform:translate3d(-50%,-50%,0); opacity:0;
  transition:opacity .4s ease, width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1);}
.seal-cursor.on{opacity:1;}
.seal-cursor.big{width:100px; height:100px;}
.seal-cursor svg{width:100%; height:100%; display:block; color:var(--accent); opacity:.9;}
.seal-cursor svg circle:last-of-type{transition:opacity .3s ease;}
.seal-cursor.big svg circle:last-of-type{opacity:0;}
.seal-cursor .lbl{position:absolute; inset:0; display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); opacity:0; transition:opacity .3s ease;}
.seal-cursor.big .lbl{opacity:1;}
@media (hover:none){ .seal-cursor{display:none;} }

/* ---------- detalles heredados que se apagan ---------- */
.progress{position:fixed; top:0; left:0; height:1px; width:100%; z-index:65; transform-origin:left; transform:scaleX(0);
  background:var(--accent); pointer-events:none;}
.blob, .seal-mark, .hero-badge, .peek{display:none !important;}
.words span{opacity:1;}

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;}
  .rise.d1{animation-delay:.06s;} .rise.d2{animation-delay:.12s;} .rise.d3{animation-delay:.18s;}
  @keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1; transform:none;}
  .reveal-stagger > *{opacity:0; transform:translateY(14px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal-stagger.in > *{opacity:1; transform:none;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.07s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.14s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.21s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.28s;}
}

/* bloque "sobre la firma" en la portada, sin foto */
#sobre.section-alt .head-split{align-items:start; margin-bottom:0;}
#sobre .role{margin:14px 0 0; color:var(--accent); font-size:13.5px;}
#sobre .bio{margin:18px 0 0; font-size:15.5px; line-height:1.78; color:var(--dim); max-width:min(100%, 58ch);}
#sobre h2{font-size:clamp(24px,2.8vw,34px);}

/* foto de portada: proporción 4:5 y borde inferior fundido */
.hero-figure img{aspect-ratio:4/5; object-position:center 12%;
  -webkit-mask-image:linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 80%, transparent 100%);}
.hero-figure figcaption{margin-top:4px;}

/* legibilidad del texto sobre la foto revelada */
.index-row .rowbg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 42%,
    color-mix(in srgb, var(--bg) 40%, transparent) 78%,
    transparent 100%);}
.index-row:hover h3{color:var(--ink);}
.index-row:hover p{color:color-mix(in srgb, var(--ink) 80%, transparent);}
.index-row:hover .n{color:var(--accent);}

#perfil .split-figure img{aspect-ratio:4/5; object-position:center 20%;}

/* retrato del perfil: a color, con velo oscuro */
#perfil .split-figure{position:relative; isolation:isolate;}
#perfil .split-figure img{filter:saturate(.86) contrast(1.04);}
#perfil .split-figure::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,14,16,.10) 0%, rgba(14,14,16,.22) 62%, rgba(14,14,16,.34) 100%);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #perfil .split-figure::before{
    background:linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.22) 62%, rgba(10,10,12,.34) 100%);}
}
:root[data-theme="dark"] #perfil .split-figure::before{
  background:linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.22) 62%, rgba(10,10,12,.34) 100%);}

/* ===== Portada en banner (15-sep-2026) =====
   Solo la portada (.hero-banner). Servicios, Nosotros y Contacto reusan .hero
   y .hero-grid, asi que estas reglas NO pueden ir sueltas sobre .hero. */
.hero-banner{padding-block:0;}
.hero-banner > .wrap{padding-inline:0; max-width:none;}
.hero-banner .hero-grid{display:grid; grid-template-columns:1fr; grid-template-areas:"s"; gap:0;}
.hero-banner .hero-grid > div, .hero-banner .hero-grid > figure{grid-area:s;}
.hero-banner .hero-figure{width:100%; margin:0;}
.hero-banner .hero-figure img{width:100%; height:clamp(460px,52vw,700px); aspect-ratio:auto;
  object-fit:cover; object-position:center 40%;
  filter:saturate(.9) contrast(1.03);
  -webkit-mask-image:none; mask-image:none;}
.hero-banner .hero-figure::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--bg) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 34%,
    color-mix(in srgb, var(--bg) 28%, transparent) 68%,
    transparent 100%);}
.hero-banner .hero-grid > div{position:relative; z-index:2; align-self:center;
  width:100%; max-width:1920px; margin-inline:auto;
  padding-inline:clamp(22px, 4.6vw, 92px);}
.hero-banner .facts{max-width:1920px; margin:0 auto; padding-inline:clamp(22px, 4.6vw, 92px);}
@media (max-width:920px){
  .hero-banner{padding-block:56px 0;}
  .hero-banner .hero-grid{display:block;}
  .hero-banner .hero-figure{margin-top:40px;}
  .hero-banner .hero-figure img{height:clamp(240px,58vw,380px); object-position:center 42%;}
  .hero-banner .hero-figure::after{display:none;}
  .hero-banner .facts{margin-top:0;}
}