@font-face{font-family:"Amen Sans";src:url("./fonts/LiberationSans-Regular.ttf") format("truetype");font-weight:400 500;font-display:swap}
@font-face{font-family:"Amen Sans";src:url("./fonts/LiberationSans-Bold.ttf") format("truetype");font-weight:600 900;font-display:swap}
@font-face{font-family:"Amen Sans";src:url("./fonts/LiberationSans-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}

:root{
  --cream:#f6f1e8;
  --paper:#fffcf6;
  --pistachio:#c7d86d;
  --lilac:#a79ae8;
  --ink:#302844;
  --olive:#667052;
  --line:#30284435;
  --serif:Georgia,"Times New Roman",serif;
  color:var(--ink);
  background:var(--cream);
  font-family:"Amen Sans",Arial,sans-serif;
  scroll-behavior:smooth;
}
*,*::before,*::after{box-sizing:border-box}
body,figure,p,h1,h2,h3{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--ink);color:var(--cream);padding:1rem;z-index:2}
.skip:focus{top:1rem}
.wrap{width:min(100% - 10vw,1280px);margin-inline:auto}
.header{min-height:94px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;flex:none}
.brand img{display:block;object-fit:contain}
nav{display:flex;gap:clamp(14px,3.6vw,48px);align-items:center;font-size:.92rem;font-weight:700}
nav a:hover,.footer a:hover{text-decoration:underline;text-underline-offset:.32em}
.nav-contact{border:1px solid var(--ink);border-radius:50px;padding:.76rem 1.08rem;display:inline-flex;gap:.65rem;align-items:center}
.nav-contact:hover{background:var(--pistachio);text-decoration:none}

.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(16px,3vw,44px);align-items:center;padding-block:clamp(37px,5.8vw,85px) clamp(65px,8vw,118px)}
.hero-copy{position:relative;z-index:1;min-width:0}
h1{font-size:clamp(4rem,9.4vw,9.4rem);line-height:.79;letter-spacing:-.09em;font-weight:700}
h1 span,h1 em{display:block;white-space:nowrap;animation:headline .72s cubic-bezier(.18,.72,.23,1) both}
h1 span:nth-child(2){animation-delay:.09s}
h1 em{animation-delay:.18s;font-family:var(--serif);font-weight:400;letter-spacing:-.092em;font-size:1.15em;line-height:.9;margin-left:-.025em}
@keyframes headline{from{opacity:0;transform:translateY(.27em)}to{opacity:1;transform:none}}
.hero-art{position:relative;margin:0 12px 0 0;min-width:0}
.hero-photo{position:relative;isolation:isolate;aspect-ratio:1.22;overflow:hidden;background:#dfd3f0;border-radius:48% 48% 7px 7px / 24% 24% 7px 7px}
.hero-photo img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.045) translate(var(--photo-x,0px),var(--photo-y,0px));transition:transform .35s ease-out}
.hero-cta{display:inline-flex;align-items:center;gap:.65rem;margin-top:clamp(26px,3vw,45px);padding:.78rem 1.15rem;background:var(--pistachio);border:1px solid var(--ink);border-radius:6px;font-weight:700;font-size:.95rem;transition:background .2s}
.hero-cta:hover{background:var(--paper)}
.hero-cta span{font-size:1.12em}


.services{background:#e8e0f5;padding-block:clamp(40px,7vw,102px);scroll-margin-top:0}
.service-stage{display:grid;grid-template-columns:.74fr 1.26fr;gap:clamp(28px,6vw,85px);align-items:start}
.service-picker{min-width:0}
.service-picker h2{font-weight:700;font-size:clamp(2.55rem,5.1vw,5.5rem);line-height:.87;letter-spacing:-.075em;margin-bottom:clamp(24px,3.1vw,41px);max-width:10ch}
.service-picker h2 em{display:block;font-family:var(--serif);font-weight:400;font-size:1.15em}
.selector{display:grid;border-top:1px solid var(--line)}
.selector button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;cursor:pointer;background:transparent;border:0;border-bottom:1px solid var(--line);min-height:54px;padding:.65rem .65rem .65rem .15rem;font-size:clamp(.9rem,1.35vw,1.13rem);font-weight:700;transition:background .24s,padding .24s}
.selector button:hover{background:#f6f1e8a0;padding-left:.65rem}
.selector button[aria-selected=true]{background:var(--pistachio);padding-left:.65rem}
.panels{--panel:#fffcf6;min-width:0;background:var(--panel);border-radius:5px 5px 42px 5px;transition:background .32s}
.panels[data-service=tab-redes]{--panel:#faf4fd}
.panels[data-service=tab-contenido]{--panel:#f3f5dc}
.panels[data-service=tab-web]{--panel:#f4eefb}
.panels[data-service=tab-alcance]{--panel:#edf1d5}
.panel{padding:clamp(25px,4.5vw,61px) clamp(25px,4.5vw,61px) 12px;min-height:clamp(350px,33vw,465px)}
.panel.enter{animation:appear .38s cubic-bezier(.18,.72,.23,1)}
@keyframes appear{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel .service-name{text-transform:uppercase;letter-spacing:.105em;font-size:.72rem;font-weight:700;margin-bottom:.9rem}
.panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,4.25rem);line-height:.96;letter-spacing:-.061em;max-width:19ch;margin-bottom:clamp(18px,2.4vw,31px)}
.panel p,.about p{font-size:clamp(.94rem,1.22vw,1.06rem);line-height:1.65}
.panel-body p+p,.about p+p{margin-top:.85rem}
.panel a{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;margin-top:1.3rem;text-decoration:underline;text-underline-offset:.3em}
.service-controls{display:flex;justify-content:flex-end;gap:7px;padding:0 clamp(25px,4.5vw,61px) clamp(18px,2.8vw,34px)}
.nav-contact span,.selector button span,.panel a span{display:inline-block;width:12px;height:12px;position:relative;font-size:0;flex:none}
.nav-contact span::before,.selector button span::before,.panel a span::before{content:"";position:absolute;right:0;top:0;width:65%;height:65%;border-top:1.5px solid;border-right:1.5px solid}
.nav-contact span::after,.selector button span::after,.panel a span::after{content:"";position:absolute;right:0;top:0;width:115%;height:1.5px;background:currentColor;transform-origin:100% 50%;transform:rotate(-45deg)}
.selector button:not([aria-selected=true]) span{opacity:.72}

.about-section{background:var(--paper)}
.about{padding-block:clamp(47px,7vw,98px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,8vw,115px);align-items:start}
.about h2,.contact h2{font-size:clamp(3rem,6.2vw,6rem);line-height:.88;letter-spacing:-.078em}
.about h2{margin-bottom:1.15rem}
.about h2 em,.contact h2 em{font-family:var(--serif);font-weight:400}
.about .intro{font-size:clamp(1.18rem,2vw,1.55rem);font-weight:700;line-height:1.28}
.about .portrait{width:min(100%,460px);align-self:center;justify-self:center}
.photo-frame{aspect-ratio:1;overflow:hidden;border-radius:50%;background:#e5dcf5}
.photo{display:block;width:100%;height:100%;object-fit:cover;object-position:31% center;transform:scale(1.47);transform-origin:50% 74%}
figcaption{display:flex;justify-content:space-between;gap:8px;padding-top:1rem;font-size:.88rem;font-weight:700}
figcaption span{font-weight:400}
.contact{background:var(--pistachio)}
.contact-inner{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-block:clamp(43px,6vw,85px)}
.contact h2 em{display:block}
.contact-links{display:grid;justify-items:start;gap:.9rem;flex:none}
.contact-whatsapp{display:inline-flex;align-items:center;gap:.75rem;padding:.78rem 1.15rem;background:var(--paper);border:1px solid var(--ink);border-radius:6px;font-size:.95rem;font-weight:700;transition:background .2s}
.contact-whatsapp:hover{background:#e8e0f5}
.contact-email{font-size:.91rem;text-decoration:underline;text-underline-offset:.3em;overflow-wrap:anywhere}
@media(max-width:900px){.contact-inner{display:grid}}
.footer{display:flex;align-items:center;justify-content:space-between;padding-block:22px;font-size:.85rem}

@media(max-width:820px){.wrap{width:calc(100% - 48px)}.hero{gap:18px}h1{font-size:clamp(3.7rem,9.5vw,6rem)}.service-stage,.about{gap:28px}}
@media(max-width:640px){
  .wrap{width:calc(100% - 36px)}
  .header{min-height:70px}
  .header img{width:80px;height:38px}
  nav{gap:12px;font-size:.76rem}
  .nav-contact{padding:.55rem .65rem;gap:.35rem}
  .nav-contact span{width:9px;height:9px}
  .hero{grid-template-columns:1fr;gap:26px;padding-block:35px 56px}
  h1{font-size:clamp(3.75rem,15vw,6.1rem)}
  .hero-art{width:91%;justify-self:end;margin-right:8px}
  .hero-photo{aspect-ratio:1.37}
  .service-stage,.about{grid-template-columns:1fr}
  .service-stage{gap:18px}
  .service-picker h2{max-width:none}
  .service-picker h2 em{display:inline}
  .panel{min-height:0}
  .contact-inner{display:grid}
}
@media(max-width:355px){.header img{width:67px}nav{gap:8px}.nav-contact{padding:.48rem}.nav-contact span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.panels{overflow:hidden}
.panel{padding:0 0 12px;min-height:0}
.panel-lead{display:grid;grid-template-columns:1.13fr .87fr;align-items:center;column-gap:clamp(14px,2vw,32px);padding:clamp(22px,3.2vw,44px);border-bottom:1px solid var(--line)}
.panel-lead .service-name{grid-column:1;margin-bottom:.6rem;align-self:end;font-size:.73rem;font-weight:700}
.panel-lead h3{grid-column:1;margin:0;align-self:start;font-size:clamp(1.85rem,3.35vw,3.65rem)}
.service-photo{display:block;width:100%;height:auto;aspect-ratio:1.15;object-fit:cover;grid-column:2;grid-row:1 / 3;border-radius:3px 32px 3px 3px;transition:filter .3s,transform .3s}
.service-photo:hover{transform:scale(1.035);filter:saturate(1.17)}
.panel-body{padding:clamp(22px,3.2vw,44px) clamp(22px,3.2vw,44px) 0}
.panel-body strong,.about p strong{font-weight:700}
.panel-body p:first-child strong,.about .intro{font-weight:600}
.about p em{font-family:var(--serif);font-size:1.13em;font-weight:400}
.service-controls{padding-inline:clamp(22px,3.2vw,44px)}
@media(max-width:880px) and (min-width:641px){.panel-lead{grid-template-columns:1fr}.service-photo{grid-column:1;grid-row:auto;margin-top:18px;aspect-ratio:1.8}}
@media(max-width:640px){.panel-lead{column-gap:14px}.panel-lead h3{font-size:clamp(1.5rem,6vw,2.3rem)}.panel-lead .service-name{font-size:.64rem}.service-photo{aspect-ratio:.9}.panel-body{padding-top:19px}}

/* Photography-led entry points into the service explorer. */
.hero{padding-bottom:clamp(26px,4vw,58px)}
.hero-copy h1 em{position:relative;isolation:isolate;width:max-content}
.hero-copy h1 em::after{content:"";position:absolute;z-index:-1;left:3%;right:-4%;bottom:3%;height:.11em;background:var(--pistachio);transform-origin:left;animation:underline-in .65s .48s cubic-bezier(.2,.75,.2,1) both}
@keyframes underline-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.service-index{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:clamp(34px,5.5vw,74px)}
.service-index a{position:relative;isolation:isolate;display:flex;align-items:end;justify-content:space-between;gap:7px;min-height:104px;padding:14px;overflow:hidden;color:var(--paper);background:var(--ink);border-radius:3px;font-weight:700;text-decoration:none}
.service-index a img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.service-index a::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#231a36ee 0%,#30284450 72%);transition:opacity .3s}
.service-index a:hover img,.service-index a:focus-visible img{transform:scale(1.13)}
.service-index a:hover::after,.service-index a:focus-visible::after{opacity:.78}
.service-index a span:last-of-type{display:grid;place-items:center;width:1.6rem;height:1.6rem;flex:none;border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .24s,background .24s}
.service-index a:hover span:last-of-type,.service-index a:focus-visible span:last-of-type{background:var(--pistachio);transform:translate(2px,-2px)}
.service-stage{grid-template-columns:.68fr 1.32fr}
.services{background:linear-gradient(125deg,#e8e0f5,#f1eaf7)}
.panel-lead{grid-template-columns:1fr .83fr}
.service-photo{aspect-ratio:1}
.panel.enter .service-photo{animation:service-image-in .55s cubic-bezier(.2,.75,.2,1) both}
@keyframes service-image-in{from{clip-path:inset(0 100% 0 0);transform:scale(1.04)}to{clip-path:inset(0);transform:scale(1)}}
.about{width:min(100% - 10vw,1050px);grid-template-columns:clamp(125px,19vw,238px) minmax(0,1fr);column-gap:clamp(24px,6vw,82px);row-gap:clamp(15px,2vw,25px);align-items:start}
.about h2{grid-column:2;grid-row:1;margin:0;align-self:end}
.about .portrait{grid-column:1;grid-row:1 / 3;width:100%;align-self:start;margin-top:.25rem}
.about-copy{grid-column:2;grid-row:2}
@media(max-width:820px){
  .service-index a{min-height:94px;padding:9px;font-size:.77rem}
  .service-index a span:last-of-type{width:1.2rem;height:1.2rem}
  .panel-lead{grid-template-columns:1fr}
}
@media(max-width:640px){
  .service-index{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:5px 2px 11px;scrollbar-width:thin}
  .service-index a{flex:0 0 38%;min-height:78px;scroll-snap-align:start}
  .service-stage{grid-template-columns:1fr}
  .panel-lead{grid-template-columns:1fr .77fr}
  .about{width:calc(100% - 36px);grid-template-columns:clamp(75px,24vw,116px) minmax(0,1fr);gap:18px}
  .about h2{align-self:center;font-size:clamp(2.65rem,12vw,4.1rem)}
  .about .portrait{grid-row:1;margin:0}
  .about-copy{grid-column:1 / -1}
}

.main-nav{gap:clamp(3px,.6vw,9px);padding:5px;background:#fffaf1;border:1px solid var(--line);border-radius:40px}
.main-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:.5rem clamp(.63rem,1.35vw,1.18rem);border-radius:30px;white-space:nowrap;transition:background .22s,transform .22s}
.main-nav a:hover,.main-nav a:focus-visible{background:#e8e0f5;transform:translateY(-2px);text-decoration:none}
.main-nav .nav-contact{background:var(--pistachio);border:1px solid transparent}
.main-nav .nav-contact:hover,.main-nav .nav-contact:focus-visible{background:var(--pistachio);border-color:var(--olive)}
.service-controls{gap:8px}
.service-controls button{display:inline-flex;align-items:center;justify-content:center;gap:.48rem;min-height:42px;padding:.55rem .8rem;border:1px solid var(--line);border-radius:7px;background:var(--paper);font-size:.83rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.service-controls button[data-step="1"]{background:var(--pistachio)}
.service-controls button:hover,.service-controls button:focus-visible{border-color:var(--ink)}
.service-controls svg{flex:none;transition:transform .2s}
.service-controls button[data-step="-1"] svg{transform:rotate(180deg)}
.service-controls button[data-step="-1"]:hover svg{transform:translateX(-3px) rotate(180deg)}
.service-controls button[data-step="1"]:hover svg{transform:translateX(3px)}
.contact-links a svg{flex:none}
.contact-email{display:inline-flex;align-items:center;gap:.75rem}
.contact-email svg{box-sizing:content-box;padding:4px;background:var(--paper);border-radius:4px}
@media(max-width:640px){.main-nav{gap:2px;padding:3px}.main-nav a{min-height:36px;padding:.4rem .48rem}.main-nav .nav-contact{gap:.32rem}}
@media(max-width:355px){.main-nav a{padding-inline:.36rem}}

.clients{background:var(--cream);padding-block:clamp(36px,5vw,72px);color:var(--ink)}
.clients-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(18px,2.5vw,30px)}
.clients-heading h2{font-size:clamp(1.8rem,4.1vw,3.75rem);line-height:1;letter-spacing:-.06em}
.clients-heading h2 em{font-family:var(--serif);font-weight:400}
.clients-rail{overflow:clip;border-block:1px solid var(--line)}
.clients-track{display:flex;width:max-content;color:var(--ink);animation:client-logo-loop 18s linear infinite!important}
@keyframes client-logo-loop{to{transform:translateX(-50%)}}
.clients-list{display:flex;flex:0 0 auto;justify-content:space-around;align-items:center;min-width:100vw;list-style:none;margin:0;padding:0}
.clients-list li{display:grid;place-items:center;width:clamp(160px,19vw,260px);min-height:clamp(92px,10vw,138px);padding:16px 20px}
.clients-list img{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(36px,5vw,65px)}
@media(max-width:640px){.clients-track{animation-duration:12s!important}}

/* Final publication polish */
.hero-description{max-width:37ch;font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.5;margin-top:28px}
.hero-cta{margin-top:22px}
.service-index a span:last-of-type svg{width:13px;height:13px;display:block}
.contact-email span{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){.hero-description{margin-top:22px;max-width:34ch}}