html:has(.about-story){scroll-behavior:smooth;scroll-padding-top:76px}
.about-story{background:var(--charcoal);color:var(--plaster);overflow:hidden}
body:has(.about-story) .site-header{background:var(--charcoal);box-shadow:0 1px 0 rgba(237,230,217,.1)}
.about-hero{position:relative;min-height:calc(100svh - 76px);display:flex;align-items:flex-end;padding:clamp(90px,14vh,150px) 6vw 10vh;isolation:isolate}
.about-hero-bg,.about-hero-shade{position:absolute;inset:0}
.about-hero-bg{z-index:-2;background:url('../images/Inspiración/Proyecto-06/Estudio-JL.jpg') center/cover no-repeat;transform:scale(1.035);transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
html[data-about-time="night"] .about-hero-bg{background-image:url('../images/nosotros/hero-nosotros-noche.jpeg')}
.about-hero.is-visible .about-hero-bg{transform:scale(1)}
.about-hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(9,9,9,.9) 0%,rgba(9,9,9,.48) 54%,rgba(9,9,9,.2)),linear-gradient(0deg,rgba(9,9,9,.66),transparent 60%)}
.about-hero-content{max-width:890px}
.about-kicker{font:500 11px/1.3 'Space Grotesk',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin:0 0 22px}
.about-hero h1,.about-panel h2,.about-services h2,.about-cta h2{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.035em}
.about-hero h1{font-size:clamp(54px,7.2vw,112px);line-height:.9;margin:0;max-width:13ch;text-wrap:balance}
.about-hero em,.about-services em{color:var(--brick);font-weight:300}
.about-intro{max-width:46ch;margin:34px 0 0;font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:rgba(237,230,217,.78)}
.about-hero-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-width:min(100%,360px);margin-top:clamp(34px,4vw,54px);padding:16px 0;border-bottom:1px solid rgba(237,230,217,.65);font:500 11px/1 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:gap .3s ease,border-color .3s ease}
.about-hero-cta:hover{gap:62px;border-color:var(--brick)}
.about-scroll-cue{position:absolute;right:6vw;bottom:9vh;display:flex;align-items:center;gap:14px;font:500 10px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl}
.about-scroll-cue i{width:1px;height:56px;background:linear-gradient(var(--plaster),transparent);animation:about-pulse 2s ease-in-out infinite}
@keyframes about-pulse{50%{transform:scaleY(.55);transform-origin:top;opacity:.45}}
.about-panel{min-height:calc(100svh - 76px);padding:clamp(64px,6.5vw,96px) 6vw;display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:clamp(50px,8vw,140px);align-items:start}
.about-panel-reverse .about-copy{order:2}.about-panel-reverse .about-visual{order:1}
.about-copy{max-width:650px}
.about-index{display:block;font:500 10px/1 'Space Grotesk',sans-serif;letter-spacing:.18em;color:rgba(237,230,217,.42);margin-bottom:42px}
.about-panel h2{font-size:clamp(42px,5vw,75px);line-height:.98;margin:0 0 clamp(24px,3vw,40px);text-wrap:balance}
.about-panel h2::after,.about-services-head h2::after{content:"";display:block;width:100%;height:12px;margin-top:clamp(20px,2.2vw,32px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cpath d='M1 11 C155 5 315 16 492 9 S805 5 999 11' fill='none' stroke='%23ede6d9' stroke-opacity='.52' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 1.35s cubic-bezier(.4,0,.2,1) .22s}
.about-panel.is-visible h2::after,.about-services.is-visible .about-services-head h2::after{clip-path:inset(0)}
.about-copy>p:not(.about-kicker){font-size:clamp(15px,1.25vw,18px);line-height:1.75;color:rgba(237,230,217,.72);margin:0 0 18px}
.about-copy strong{color:var(--plaster);font-weight:500}
.about-copy .about-lead{font-family:'Fraunces',serif;font-size:clamp(20px,2vw,29px);line-height:1.55;color:rgba(237,230,217,.86)}
.about-stat{display:flex;align-items:center;gap:18px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(237,230,217,.18)}
.about-stat strong{font:300 clamp(52px,5vw,74px)/.8 'Fraunces',serif;color:var(--brick)}
.about-stat span{font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--sand)}
.about-visual{margin:0;width:100%;max-width:740px;justify-self:end}
.about-panel-reverse .about-visual{justify-self:start}
.about-image-wrap{overflow:hidden;background:#191715}
.about-visual .about-image-wrap{height:min(72svh,780px)}
.about-image-wrap img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.about-panel:not(.about-panel-reverse) .about-image-wrap img{object-position:right center}
.about-panel-reverse .about-image-wrap img{object-position:left center}
.is-visible .about-image-wrap img{transform:scale(1.035)}
.about-visual figcaption,.about-wide-visual figcaption{max-width:68ch;margin-top:14px;padding-top:12px;border-top:1px solid rgba(237,230,217,.18);font-size:11px;line-height:1.55;color:rgba(237,230,217,.48)}
figcaption span{display:block;margin-bottom:5px;font:600 9px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brick)}
.about-line{display:none}
.about-line svg{display:block;width:100%;height:100%;overflow:visible}
.about-line path{fill:none;stroke:rgba(237,230,217,.55);stroke-width:.8;stroke-linecap:round;stroke-dasharray:1020;stroke-dashoffset:1020}
.about-line.is-drawn{opacity:1;transition:opacity .5s ease}
.about-line.is-drawn path{animation:about-draw 1.55s cubic-bezier(.4,0,.2,1) forwards}
@keyframes about-draw{to{stroke-dashoffset:0}}
.about-services{padding:clamp(150px,14vw,210px) 6vw clamp(60px,6vw,90px);scroll-margin-top:90px}
.about-services-head{position:static;inset:auto;z-index:auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);column-gap:clamp(50px,8vw,140px);row-gap:clamp(36px,4vw,58px);align-items:end;margin-bottom:clamp(70px,8vw,120px);padding:0}
.about-services-head>div:first-child{grid-column:1/-1;display:flex;align-items:center;gap:20px;align-self:start;padding:0}
.about-services-head>div:first-child .about-index,.about-services-head>div:first-child .about-kicker{margin:0}
.about-services-head>div:first-child .about-index{padding-right:20px;border-right:1px solid rgba(237,230,217,.2)}
.about-services-head h2{font-size:clamp(50px,6.2vw,92px);line-height:.92;margin:0;max-width:12ch}
.about-services-head>p{font-size:clamp(15px,1.25vw,18px);line-height:1.7;color:rgba(237,230,217,.63);max-width:31ch;padding-bottom:6px}
.about-pillars{list-style:none;margin:0 0 90px;padding:0;border-top:1px solid rgba(237,230,217,.22)}
.about-pillars li{display:grid;grid-template-columns:90px minmax(0,1fr);padding:27px 0;border-bottom:1px solid rgba(237,230,217,.18);transition:background .3s ease,padding .3s ease}
.about-pillars li:hover{background:rgba(237,230,217,.025);padding-left:18px;padding-right:18px}
.about-pillars li>span{font:500 10px/1 'Space Grotesk',sans-serif;color:var(--brick);padding-top:7px}
.about-pillars li>div{display:grid;grid-template-columns:minmax(260px,.7fr) 1fr;gap:5vw}
.about-pillars h3{font:400 clamp(20px,2vw,30px)/1.2 'Fraunces',serif}
.about-pillars p{max-width:72ch;font-size:14px;line-height:1.65;color:rgba(237,230,217,.61)}
.about-wide-visual{width:min(100%,1200px);margin:0 auto}.about-wide-visual .about-image-wrap{aspect-ratio:2400/621}.about-wide-visual .about-image-wrap img{object-position:center}
.about-cta{min-height:0;padding:clamp(58px,5vw,76px) 6vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--terracotta-ingles)}
.about-cta .about-kicker{color:rgba(237,230,217,.68)}
.about-cta h2{font-size:clamp(40px,4.4vw,68px);line-height:.96;margin:0 0 28px;max-width:15ch}
.about-cta a{display:inline-flex;align-items:center;gap:35px;padding:16px 0;border-bottom:1px solid rgba(237,230,217,.7);font:500 11px/1 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:gap .3s ease}
.about-cta a:hover{gap:48px}
.about-reveal .about-copy,.about-reveal .about-services-head,.about-reveal .about-pillars,.about-reveal.about-cta>*{opacity:0;transform:translateY(38px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
.about-reveal.is-visible .about-copy,.about-reveal.is-visible .about-services-head,.about-reveal.is-visible .about-pillars,.about-reveal.about-cta.is-visible>*{opacity:1;transform:none}
.about-visual,.about-wide-visual{opacity:0;transition:opacity .85s ease,transform 1.05s cubic-bezier(.16,1,.3,1)}
.about-slide-right{transform:translateX(90px)}.about-slide-left{transform:translateX(-90px)}.about-slide-up{transform:translateY(70px)}
.is-visible .about-visual,.is-visible .about-wide-visual{opacity:1;transform:none;transition-delay:.14s}
@media(max-width:900px){.about-panel{grid-template-columns:1fr;min-height:auto;padding-top:80px;padding-bottom:80px}.about-panel-reverse .about-copy,.about-panel-reverse .about-visual{order:initial}.about-visual{max-width:none}.about-visual .about-image-wrap{height:auto;aspect-ratio:4/3}.about-services-head{grid-template-columns:1fr;row-gap:30px}.about-services-head>div:first-child{grid-column:1;justify-self:start}.about-services-head>p{max-width:52ch;padding-bottom:0}}
@media(max-width:620px){.about-hero{min-height:calc(100svh - 62px);padding-left:6vw;padding-right:12vw}.about-hero h1{font-size:clamp(46px,13vw,66px);line-height:.94}.about-hero-cta{min-width:0;width:100%;gap:20px}.about-scroll-cue{right:4vw}.about-panel{padding:80px 6vw;gap:42px}.about-panel h2{font-size:42px}.about-index{margin-bottom:30px}.about-visual .about-image-wrap,.about-wide-visual .about-image-wrap{aspect-ratio:4/5}.about-pillars li{grid-template-columns:42px 1fr}.about-pillars li>div{grid-template-columns:1fr;gap:8px}.about-pillars h3{font-size:24px}.about-services{padding:125px 6vw 60px;scroll-margin-top:72px}.about-services-head{margin-bottom:60px}.about-wide-visual{margin-top:55px}}
@media(max-width:620px){html:has(.about-story){scroll-padding-top:62px}}

/* Móvil horizontal: conserva la composición editorial lado a lado. El
   breakpoint de tableta apila las columnas, pero en esta orientación sobra
   anchura y falta altura, por lo que esa estructura pierde la jerarquía. */
@media(max-width:950px) and (max-height:600px) and (orientation:landscape){
  .about-hero{
    min-height:calc(100svh - 76px);
    align-items:center;
    padding:24px 7vw;
  }
  .about-hero-content{ max-width:68vw; }
  .about-hero h1{ font-size:clamp(34px,8vh,48px); line-height:.92; }
  .about-hero-cta{ margin-top:18px; padding:11px 0; font-size:8px; }
  .about-scroll-cue{ display:none; }

  .about-panel{
    min-height:calc(100svh - 76px);
    padding:20px 6vw;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:4vw;
    align-items:center;
    overflow:hidden;
  }
  .about-panel-reverse .about-copy{ order:2; }
  .about-panel-reverse .about-visual{ order:1; }
  .about-copy{ width:100%; max-width:460px; align-self:center; }
  .about-index{ margin-bottom:12px; font-size:8px; }
  .about-kicker{ margin-bottom:10px; font-size:8px; }
  .about-panel h2{
    max-width:15ch;
    margin-bottom:12px;
    font-size:clamp(26px,7vh,38px);
    line-height:.96;
  }
  .about-panel h2::after{ height:7px; margin-top:10px; }
  .about-copy>p:not(.about-kicker){
    margin-bottom:7px;
    font-size:clamp(9px,2.3vh,12px);
    line-height:1.4;
  }
  .about-copy .about-lead{
    font-size:clamp(11px,2.8vh,15px);
    line-height:1.38;
  }
  .about-stat{ gap:10px; margin-top:10px; padding-top:10px; }
  .about-stat strong{ font-size:32px; }
  .about-stat span{ font-size:7px; line-height:1.35; }
  .about-visual{
    width:min(100%,620px);
    max-width:620px;
    margin:0;
    justify-self:end;
    align-self:center;
  }
  .about-panel-reverse .about-visual{ justify-self:start; }
  .about-visual .about-image-wrap{
    width:100%;
    height:min(61svh,255px);
    aspect-ratio:16/9;
  }
  .about-panel:not(.about-panel-reverse) .about-image-wrap img{ object-position:right center; }
  .about-panel-reverse .about-image-wrap img{ object-position:left center; }
  .about-visual figcaption,
  .about-wide-visual figcaption{
    margin-top:5px;
    padding-top:5px;
    font-size:7px;
    line-height:1.3;
  }
  figcaption span{ margin-bottom:2px; font-size:6px; }

  .about-services{ padding:28px 5vw 34px; }
  .about-services-head{
    grid-template-columns:1.25fr .75fr;
    gap:18px 4vw;
    margin-bottom:22px;
  }
  .about-services-head>div:first-child{ grid-column:1/-1; gap:12px; }
  .about-services-head h2{ font-size:clamp(30px,8vh,44px); }
  .about-services-head>p{ font-size:10px; line-height:1.4; }
  .about-services-head h2::after{ height:7px; margin-top:10px; }
  .about-pillars{ margin-bottom:28px; }
  .about-pillars li{ grid-template-columns:38px 1fr; padding:10px 0; }
  .about-pillars li>div{ grid-template-columns:minmax(170px,.65fr) 1fr; gap:3vw; }
  .about-pillars h3{ font-size:15px; }
  .about-pillars p{ font-size:9px; line-height:1.35; }
  .about-wide-visual{ width:min(78%,960px); margin-inline:auto; }
  .about-wide-visual .about-image-wrap{ aspect-ratio:2400/621; }
}

/* Móvil vertical: cada bloque es una pantalla completa. El snap nativo con
   parada obligatoria permite que un gesto táctil avance solo una sección. */
@media(max-width:620px) and (orientation:portrait){
  html:has(.about-story){
    scroll-snap-type:y proximity;
    scroll-padding-top:62px;
    overscroll-behavior-y:auto;
  }
  .about-story>section,
  body:has(.about-story)>.site-footer{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .about-line{ display:none; }
  .about-hero{
    min-height:calc(100svh - 62px);
    height:calc(100svh - 62px);
    padding:34px 7vw;
    align-items:center;
  }
  .about-hero h1{ font-size:clamp(38px,11vw,54px); }
  .about-hero-cta{ margin-top:24px; padding:12px 0; font-size:9px; }
  .about-scroll-cue{ bottom:5vh; }

  .about-panel{
    min-height:calc(100svh - 62px);
    height:calc(100svh - 62px);
    padding:16px 5.5vw 14px;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(145px,1fr);
    gap:11px;
    align-content:center;
    overflow:hidden;
  }
  .about-panel-reverse .about-copy,
  .about-panel-reverse .about-visual{ order:initial; }
  .about-copy{ width:100%; max-width:none; }
  .about-index{ margin-bottom:8px; font-size:7px; }
  .about-kicker{ margin-bottom:7px; font-size:7.5px; }
  .about-panel h2{
    max-width:17ch;
    margin-bottom:8px;
    font-size:clamp(26px,8.4vw,34px);
    line-height:.96;
  }
  .about-panel h2::after{ height:6px; margin-top:8px; }
  .about-copy>p:not(.about-kicker){
    margin-bottom:6px;
    font-size:clamp(9.5px,2.75vw,11px);
    line-height:1.38;
  }
  .about-copy .about-lead{
    font-size:clamp(11px,3.2vw,13px);
    line-height:1.38;
  }
  .about-stat{ gap:9px; margin-top:7px; padding-top:7px; }
  .about-stat strong{ font-size:30px; }
  .about-stat span{ font-size:6.5px; line-height:1.3; }
  .about-visual{
    width:92%;
    max-width:none;
    margin:0;
    justify-self:end;
    align-self:stretch;
  }
  .about-panel-reverse .about-visual{ justify-self:start; }
  .about-visual .about-image-wrap{
    width:100%;
    height:100%;
    min-height:145px;
    aspect-ratio:auto;
  }
  .about-panel:not(.about-panel-reverse) .about-image-wrap img{ object-position:right center; }
  .about-panel-reverse .about-image-wrap img{ object-position:left center; }
  .about-visual figcaption,
  .about-wide-visual figcaption{
    display:none;
  }

  .about-services{
    min-height:calc(100svh - 62px);
    height:calc(100svh - 62px);
    padding:15px 5vw 13px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    scroll-margin-top:62px;
  }
  .about-services-head{
    grid-template-columns:1fr;
    gap:6px;
    margin-bottom:10px;
  }
  .about-services-head>div:first-child{ grid-column:1; gap:9px; }
  .about-services-head>div:first-child .about-index{ padding-right:9px; }
  .about-services-head h2{ max-width:none; font-size:29px; line-height:.94; }
  .about-services-head h2::after{ height:5px; margin-top:6px; }
  .about-services-head>p{ max-width:none; font-size:8.5px; line-height:1.3; }
  .about-pillars{ margin-bottom:10px; }
  .about-pillars li{ grid-template-columns:25px 1fr; padding:5px 0; }
  .about-pillars li>span{ padding-top:2px; font-size:6px; }
  .about-pillars li>div{ grid-template-columns:minmax(115px,.65fr) 1fr; gap:10px; }
  .about-pillars h3{ font-size:11px; line-height:1.15; }
  .about-pillars p{ font-size:6.8px; line-height:1.25; }
  .about-wide-visual{
    width:88%;
    min-height:0;
    flex:0 0 auto;
    margin:4px auto 0;
  }
  .about-wide-visual .about-image-wrap{ width:100%; height:auto; aspect-ratio:2400/621; }
  .about-cta{
    min-height:calc(100svh - 62px);
    height:calc(100svh - 62px);
    padding:30px 7vw;
  }
}
@media(prefers-reduced-motion:reduce){html:has(.about-story){scroll-behavior:auto}.about-story *{animation:none!important;transition:none!important}.about-reveal .about-copy,.about-reveal .about-services-head,.about-reveal .about-pillars,.about-reveal.about-cta>*,.about-visual,.about-wide-visual{opacity:1;transform:none}.about-line{opacity:1}.about-line path{stroke-dashoffset:0}}