.agency-header {
  align-items:center;
  background:transparent;
  display:flex;
  height:76px;
  justify-content:space-between;
  left:0;
  padding:1rem 5vw;
  position:fixed;
  right:0;
  top:0;
  transition:background .5s,padding .5s;
  z-index:20
}
.agency-header.is-scrolled {
  background:#f4f0e9ee;
  border-bottom:1px solid var(--line);
  padding:1rem 5vw
}
.agency-logo {
  height:240px;
  left:50%;
  position:absolute;
  top:3rem;
  transform:translateX(-50%);
  transition:height .6s,top .6s;
  width:550px;
  z-index:2
}
.agency-logo img {
  object-fit:contain
}
.agency-header.is-scrolled .agency-logo {
  height:34px;
  left:auto;
  right:5vw;
  top:1.25rem;
  transform:none;
  width:130px
}
.agency-header-meta {
  display:flex;
  font:500 .62rem var(--mono);
  gap:2rem;
  text-transform:uppercase
}
.agency-header .main-nav {
  margin-left:auto
}
.agency-header:not(.is-scrolled) .main-nav {
  opacity:0;
  pointer-events:none
}
.agency-header.is-scrolled .main-nav {
  opacity:1;
  pointer-events:auto;
  transition:opacity .4s
}
.agency-editorial {
  overflow:hidden
}
.editorial-hero {
  background:var(--paper);
  min-height:100svh;
  padding:8rem 5vw 2rem;
  position:relative
}
.hero-brand-lockup {
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  left:50%;
  position:absolute;
  top:12%;
  transform:translateX(-50%);
  width:min(70vw,760px)
}
.hero-brand-lockup img {
  height:180px;
  object-fit:contain
}
.editorial-kicker,.hero-photo>span,.hero-scroll {
  font:500 .62rem var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase
}
.hero-photo {
  height:68vh;
  margin:17vh auto 0;
  max-width:900px;
  position:relative
}
.hero-photo:after {
  background:linear-gradient(180deg,#17171744,transparent 40%,#17171788);
  content:"";
  inset:0;
  position:absolute
}
.hero-photo img {
  object-position:center
}
.hero-photo>span {
  bottom:1rem;
  color:#fff;
  left:1rem;
  position:absolute;
  z-index:1
}
.hero-scroll {
  bottom:2rem;
  position:absolute;
  right:5vw
}
.hero-scroll span {
  font-size:1.2rem;
  margin-left:.8rem
}
.editorial-statement {
  background:var(--ink);
  color:var(--paper)
}
.statement-copy {
  display:grid;
  gap:10vw;
  grid-template-columns:1.2fr .8fr;
  margin-top:6rem
}
.statement-copy h1,.selfia-heading h2,.collaboration-intro h2,.editorial-contact h2 {
  font-size:clamp(3.8rem,8vw,8.5rem);
  letter-spacing:-.12em;
  line-height:.82;
  margin:0
}
.statement-copy>div {
  align-self:end;
  max-width:400px
}
.editorial-image-break {
  background:var(--ink);
  color:var(--paper);
  display:grid;
  grid-template-columns:3fr 1fr;
  min-height:70vh;
  padding:0 5vw 5vw
}
.break-image {
  height:72vh;
  position:relative
}
.break-image:after {
  background:linear-gradient(180deg,transparent 55%,#171717aa);
  content:"";
  inset:0;
  position:absolute
}
.break-image img {
  filter:saturate(.8);
  object-position:center
}
.break-image span {
  bottom:1.5rem;
  font-size:1.8rem;
  left:1.5rem;
  letter-spacing:-.06em;
  position:absolute;
  z-index:1
}
.break-note {
  align-self:end;
  font:500 .62rem var(--mono);
  padding:0 0 1.5rem 2rem
}
.selfia-editorial {
  background:var(--coral)
}
.selfia-heading {
  align-items:end;
  display:grid;
  gap:10vw;
  grid-template-columns:1fr .8fr;
  margin-top:6rem
}
.selfia-stage {
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  margin-top:6rem
}
.stage-original,.stage-result {
  align-items:flex-start;
  background:#b99a87;
  display:flex;
  flex-direction:column;
  height:60vh;
  justify-content:space-between;
  padding:1.5rem
}
.stage-result {
  background:linear-gradient(135deg,#35253f,#e36e58 50%,#f6c365);
}
.selfia-stage span {
  font:500 .62rem var(--mono);
  text-transform:uppercase
}
.selfia-stage strong {
  font-size:clamp(1.8rem,3vw,3rem);
  letter-spacing:-.09em;
  line-height:.85
}
.stage-transition {
  align-items:center;
  background:var(--ink);
  color:var(--lime);
  display:flex;
  font-size:2rem;
  justify-content:center
}
.stage-caption {
  font-size:1.1rem;
  margin:1rem 0 0
}
.collaboration {
  background:var(--paper)
}
.collaboration-intro {
  align-items:end;
  display:grid;
  gap:10vw;
  grid-template-columns:1fr .8fr;
  margin:6rem 0
}
.collaboration-intro p {
  max-width:320px
}
.collaboration-steps {
  border-top:1px solid var(--ink);
  display:grid;
  grid-template-columns:repeat(4,1fr)
}
.collaboration-steps>div {
  border-right:1px solid var(--ink);
  min-height:270px;
  padding:1.2rem
}
.collaboration-steps>div:last-child {
  border-right:0
}
.collaboration-steps span {
  font:500 .62rem var(--mono)
}
.collaboration-steps h3 {
  font-size:1.45rem;
  letter-spacing:-.08em;
  line-height:.9;
  margin-top:5rem
}
.collaboration-steps p {
  color:var(--muted);
  font-size:.88rem
}
.agency-benefits {
  background:var(--lime);
  padding-bottom:10rem;
  padding-top:10rem
}
.benefit-list {
  margin-top:5rem
}
.benefit-list p {
  border-bottom:1px solid var(--ink);
  font-size:clamp(2rem,4.5vw,5rem);
  letter-spacing:-.1em;
  line-height:.98;
  margin:0;
  padding:1rem 0
}
.benefit-list p:first-child {
  border-top:1px solid var(--ink)
}
.editorial-contact {
  background:var(--coral);
  display:grid;
  gap:10vw;
  grid-template-columns:1fr 1fr
}
.editorial-contact h2 {
  margin:5rem 0 2rem
}
.editorial-contact .contact-form {
  align-self:end
}
.editorial-contact .button {
  margin-top:2rem
}
@media(max-width:800px) {
  .agency-header {
    height:64px;
    padding:1rem 7vw
  }
  .agency-header-meta {
    display:none
  }
  .agency-logo {
    height:150px;
    top:4rem;
    width:78vw
  }
  .agency-header.is-scrolled .agency-logo {
    height:30px;
    right:7vw;
    top:1.1rem;
    width:110px
  }
  .agency-header .main-nav {
    top:64px
  }
  .agency-header.is-scrolled .main-nav {
    display:flex
  }
  .editorial-hero {
    padding:6rem 7vw 2rem
  }
  .hero-brand-lockup {
    top:12%;
    width:86vw
  }
  .hero-brand-lockup img {
    height:110px
  }
  .hero-photo {
    height:62vh;
    margin-top:24vh
  }
  .hero-scroll {
    bottom:1.5rem;
    right:7vw
  }
  .statement-copy,.selfia-heading,.collaboration-intro,.editorial-contact {
    grid-template-columns:1fr
  }
  .statement-copy,.selfia-heading,.collaboration-intro {
    margin-top:3rem
  }
  .statement-copy>div {
    margin-top:2rem
  }
  .editorial-image-break {
    display:block;
    padding:0 7vw 4rem
  }
  .break-image {
    height:58vh
  }
  .break-image span {
    font-size:1.3rem
  }
  .break-note {
    padding:1rem 0
  }
  .selfia-stage {
    grid-template-columns:1fr;
    margin-top:3rem
  }
  .stage-original,.stage-result {
    height:42vh
  }
  .stage-transition {
    height:50px
  }
  .collaboration-steps {
    grid-template-columns:1fr 1fr
  }
  .collaboration-steps>div {
    border-bottom:1px solid var(--ink);
    min-height:230px
  }
  .collaboration-steps>div:nth-child(2) {
    border-right:0
  }
  .collaboration-steps h3 {
    margin-top:3rem
  }
  .agency-benefits {
    padding-bottom:6rem;
    padding-top:6rem
  }
  .benefit-list {
    margin-top:3rem
  }
  .editorial-contact h2 {
    margin-top:3rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .agency-header,.agency-logo,.agency-header.is-scrolled .agency-logo {
    transition:none
  }
  .hero-brand-lockup,.hero-photo {
    animation:none
  }
}
.agency-header .main-nav.open {
  opacity:1;
  pointer-events:auto
}
.agency-header-meta {
  left:calc(5vw + 165px);
  position:absolute;
  top:1.6rem
}
.agency-header.is-scrolled .agency-logo {
  left:5vw;
  right:auto
}
.hero-brand-lockup img {
  display:none
}
.hero-brand-lockup {
  top:24%
}
.hero-brand-lockup .editorial-kicker {
  font-size:clamp(1.15rem,2.2vw,1.85rem);
  line-height:1.05;
  max-width:720px;
  text-align:center
}
.editorial-hero {
  padding-top:19rem
}
.hero-photo {
  margin-top:10rem
}
@media(max-width:800px) {
  .agency-header-meta {
    display:flex;
    left:7vw;
    top:1.35rem
  }
  .agency-header.is-scrolled .agency-header-meta {
    left:calc(7vw + 130px)
  }
}
@media(max-width:800px) {
  .editorial-hero {
    padding-top:14rem
  }
  .hero-brand-lockup {
    top:23%
  }
  .hero-brand-lockup .editorial-kicker {
    font-size:1.25rem;
    max-width:80vw
  }
  .hero-photo {
    margin-top:8rem
  }
}
.agency-editorial {
  --paper:#f7f3ed;
  --ink:#261614;
  --coral:#844d31;
  --lime:#b67040;
  --muted:#806c5f;
  --line:#d8c8bc;
  background:var(--paper);
  color:var(--ink)
}
.agency-editorial + .site-footer {
  background:#261614
}
.agency-editorial + .site-footer p {
  color:#af866d
}
.hero-carousel {
  margin:10rem auto 0;
  max-width:1280px
}
.hero-slide {
  display:grid;
  gap:4vw;
  grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr);
  margin:0
}
.hero-slide-image {
  height:62vh;
  min-height:460px;
  position:relative;
  overflow:hidden
}
.hero-slide-image:after {
  background:linear-gradient(180deg,#26161433,transparent 45%,#261614aa);
  content:"";
  inset:0;
  position:absolute
}
.hero-slide-image img {
  object-position:center
}
.hero-slide-image>span {
  bottom:1.2rem;
  color:#fff;
  font:500 .62rem var(--mono);
  left:1.2rem;
  position:absolute;
  z-index:1
}
.hero-slide figcaption {
  align-self:end;
  padding-bottom:1rem
}
.slide-eyebrow {
  font:500 .62rem var(--mono);
  text-transform:uppercase
}
.hero-slide h2 {
  font-size:clamp(2.55rem,4.5vw,4.9rem);
  letter-spacing:-.11em;
  line-height:.84;
  margin:2rem 0
}
.hero-slide h2 em {
  font-family:var(--serif);
  font-weight:400
}
.hero-slide figcaption p {
  font-size:1rem;
  max-width:310px
}
.carousel-controls {
  align-items:center;
  border-top:1px solid var(--ink);
  display:flex;
  font:500 .65rem var(--mono);
  justify-content:space-between;
  margin-top:3rem;
  padding-top:.8rem
}
.carousel-controls button {
  background:none;
  border:0;
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  padding:0
}
.carousel-controls button:disabled {
  cursor:default;
  opacity:.28
}
.editorial-statement,.agency-manifesto {
  background:#261614
}
.selfia-editorial {
  background:#b67040
}
.agency-benefits {
  background:#af866d
}
.editorial-contact {
  background:#844d31
}
.section-label,.eyebrow {
  color:var(--muted)
}
.editorial-statement .section-label,.agency-manifesto .eyebrow {
  color:#af866d
}
.agency-header.is-scrolled {
  background:#f7f3edee;
  border-color:#d8c8bc
}
.agency-header-meta {
  color:#4c2713
}
.agency-header .nav-cta {
  background:#261614;
  color:#f7f3ed
}
.button-lime {
  background:#b67040;
  color:#261614
}
@media(max-width:800px) {
  .hero-carousel {
    margin-top:8rem
  }
  .hero-slide {
    display:block
  }
  .hero-slide-image {
    height:54vh;
    min-height:330px
  }
  .hero-slide figcaption {
    padding:2rem 0 0
  }
  .hero-slide h2 {
    margin:1.5rem 0
  }
  .carousel-controls {
    margin-top:2rem
  }
}
.agency-header:not(.is-scrolled) .main-nav {
  opacity:1;
  pointer-events:auto
}
.agency-header .main-nav {
  transition:opacity .4s
}
.hero-slide {
  grid-template-columns:minmax(0,2.25fr) minmax(240px,.55fr)
}
.hero-slide figcaption {
  align-self:start;
  padding-top:2rem
}
@media(max-width:800px) {
  .hero-slide {
    display:block
  }
  .hero-slide figcaption {
    padding-top:2rem
  }
}
.carousel-footer {
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-top:1.5rem
}
.carousel-dots {
  align-items:center;
  display:flex;
  gap:.7rem
}
.carousel-dot {
  background:var(--muted);
  border:0;
  border-radius:50%;
  cursor:pointer;
  height:6px;
  padding:0;
  transition:background .3s,transform .3s;
  width:6px
}
.carousel-dot.is-active {
  background:var(--ink);
  transform:scale(1.5)
}
.carousel-next {
  background:none;
  border:0;
  color:var(--ink);
  cursor:pointer;
  font:500 1rem var(--font-sans);
  opacity:.55;
  padding:0
}
.carousel-progress {
  background:color-mix(in srgb,var(--ink) 15%,transparent);
  height:1px;
  margin-top:.7rem;
  overflow:hidden;
  width:100%
}
.carousel-progress span {
  background:var(--ink);
  display:block;
  height:100%;
  transform-origin:left;
  width:100%
}
@keyframes carousel-progress {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}
.hero-slide:not(.is-active) {
  display:none
}
@media(max-width:800px) {
  .carousel-footer {
    margin-top:1.25rem
  }
  .carousel-next {
    font-size:.95rem
  }
}
.hero-carousel {
  margin-top:3rem;
  position:relative
}
.hero-slide.is-active {
  animation:carousel-slide-in .55s cubic-bezier(.2,.7,.2,1) both
}
.carousel-footer {
  justify-content:center
}
.carousel-next {
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  border-radius:50%;
  height:36px;
  opacity:.7;
  padding:0;
  position:absolute;
  right:-18px;
  top:50%;
  transform:translateY(-50%);
  transition:opacity .25s,transform .25s;
  width:36px;
  z-index:3
}
.carousel-next:hover {
  opacity:1;
  transform:translateY(-50%) scale(1.05)
}
@keyframes carousel-slide-in {
  from {
    opacity:0;
    transform:translateX(32px)
  }
  to {
    opacity:1;
    transform:translateX(0)
  }
}
@media(max-width:800px) {
  .hero-carousel {
    margin-top:2rem
  }
  .carousel-next {
    right:-8px
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-slide.is-active {
    animation:none
  }
}
.hero-carousel {
  position:static
}
.carousel-next {
  right:10vw
}
@media(max-width:800px) {
  .carousel-next {
    right:7vw
  }
}
.hero-carousel {
  transform:translateY(-3vh)
}
.carousel-next {
  background:#844d31;
  border-color:#844d31;
  color:var(--paper);
  height:50px;
  opacity:.58;
  right:2vw;
  width:50px
}
.carousel-next:hover {
  opacity:.82
}
@media(max-width:800px) {
  .hero-carousel {
    transform:translateY(-3vh)
  }
  .carousel-next {
    height:44px;
    right:2vw;
    width:44px
  }
}
.carousel-next {
  position:fixed;
  right:1.5vw;
  top:50%;
  z-index:30
}
@media(max-width:800px) {
  .carousel-next {
    right:1rem
  }
}
.carousel-next {
  position:fixed!important;
  right:24px!important;
  top:50%!important
}
.agency-header .main-nav {
  font-size:.9rem;
  gap:2.2rem
}
.agency-header .nav-cta {
  font-size:.78rem
}
@media(max-width:800px) {
  .agency-header .main-nav {
    font-size:.85rem;
    gap:1.4rem
  }
}
.agency-header .main-nav {
  font-size:.98rem
}
.agency-header .nav-cta {
  font-size:.84rem
}
.agency-header .main-nav a[href="#selfia"] {
  order:2
}
.agency-header .main-nav a[href="#colaboracion"] {
  order:3
}
.hero-carousel {
  margin-top:calc(3rem - 3vh);
  transform:none
}
.carousel-next {
  position:fixed!important;
  right:15vw!important;
  top:50%!important
}
@media(max-width:800px) {
  .hero-carousel {
    margin-top:calc(2rem - 3vh);
    transform:none
  }
  .carousel-next {
    right:15vw!important
  }
}
.hero-carousel {
  padding-right:72px
}
.carousel-next {
  right:0!important
}
.stage-original,.stage-result {
  overflow:hidden;
  position:relative
}
.stage-original>img,.stage-result>img {
  inset:0;
  object-fit:cover;
  position:absolute;
  z-index:0
}
.stage-original:after,.stage-result:after {
  background:linear-gradient(180deg,#26161444,transparent 45%,#26161499);
  content:"";
  inset:0;
  position:absolute;
  z-index:0
}
.stage-original>span,.stage-original>strong,.stage-result>span,.stage-result>strong {
  position:relative;
  z-index:1
}
@media(max-width:800px) {
  .hero-carousel {
    padding-right:52px
  }
  .carousel-next {
    right:0!important
  }
}
.selfia-heading h2 {
  font-size:clamp(2rem,4vw,4.5rem);
  line-height:1;
  white-space:normal
}
.selfia-stage-carousel {
  margin:4rem auto 0;
  max-width:1200px
}
.selfia-stage-slide:not(.is-active) {
  display:none
}
.selfia-stage-slide.is-active {
  animation:carousel-slide-in .55s cubic-bezier(.2,.7,.2,1) both
}
.selfia-carousel-footer {
  align-items:center;
  display:flex;
  gap:1.5rem;
  justify-content:center;
  margin-top:1.25rem
}
.selfia-dots {
  display:flex;
  gap:.7rem
}
.selfia-dot {
  background:var(--muted);
  border:0;
  border-radius:50%;
  cursor:pointer;
  height:6px;
  padding:0;
  width:6px
}
.selfia-dot.is-active {
  background:var(--paper);
  transform:scale(1.5)
}
.selfia-counter {
  font:600 .65rem var(--font-sans);
  letter-spacing:.06em
}
.selfia-progress {
  background:#f7f3ed33;
  height:1px;
  margin-top:.7rem;
  overflow:hidden;
  width:100%
}
.selfia-progress span {
  background:var(--paper);
  display:block;
  height:100%;
  transform-origin:left;
  width:100%
}
@keyframes selfia-progress {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}
.selfia-stage-carousel {
  max-width:none;
  width:calc(100% + 12vw);
  margin-left:-6vw;
  margin-right:-6vw
}
.selfia-stage {
  width:100%
}
.selfia-carousel-footer {
  margin-top:1.5rem
}
@media(max-width:800px) {
  .selfia-stage-carousel {
    width:calc(100% + 8vw);
    margin-left:-4vw;
    margin-right:-4vw
  }
  .selfia-carousel-footer {
    margin-top:1rem
  }
}
.selfia-stage .stage-original>span,.selfia-stage .stage-result>span,.selfia-editorial>.stage-caption {
  display:none
}
.selfia-stage .stage-original>span,.selfia-stage .stage-result>span {
  color:#fff;
  display:block;
  font-size:0;
  text-shadow:0 1px 5px #261614aa
}
.selfia-stage .stage-original>span:after {
  content:"Captura";
  font:600 .7rem var(--font-sans);
  letter-spacing:.06em;
  text-transform:uppercase
}
.selfia-stage .stage-result>span:after {
  content:"Transformaci\00f3n";
  font:600 .7rem var(--font-sans);
  letter-spacing:.06em;
  text-transform:uppercase
}
.selfia-stage .stage-original>span,.selfia-stage .stage-result>span {
  display:none
}
.selfia-stage .stage-original>strong,.selfia-stage .stage-result>strong {
  text-shadow:0 1px 5px #261614aa
}
.agency-editorial>.selfia-editorial {
  order:1;
  padding-top:19rem
}
.agency-editorial>.editorial-hero {
  order:2;
  padding-top:8rem
}
@media(max-width:800px) {
  .agency-editorial>.selfia-editorial {
    padding-top:14rem
  }
  .agency-editorial>.editorial-hero {
    padding-top:5rem
  }
}
.agency-editorial>.selfia-editorial {
  background:#f7f3ed;
  color:#261614
}
.agency-editorial>.editorial-hero {
  border-top:1px solid #26161433
}
.agency-editorial>.selfia-editorial {
  background:#f7f3ed!important;
  color:#261614!important
}
.selfia-editorial .selfia-heading h2,.selfia-editorial .selfia-heading p {
  color:#261614!important
}
.agency-editorial>.editorial-hero {
  border-top:1px solid #26161433!important
}
.selfia-heading {
  text-align:center
}
.selfia-heading p {
  margin-left:auto;
  margin-right:auto
}
.selfia-stage-carousel {
  margin-top:2.5rem
}
.selfia-stage .stage-transition {
  background:#f7f3ed;
  color:#844d31
}
.selfia-heading {
  margin-left:-10vw;
  width:100vw
}
.selfia-stage-carousel {
  margin-top:1rem!important
}
@media(max-width:800px) {
  .selfia-heading {
    margin-left:-7vw;
    width:100vw
  }
  .selfia-stage-carousel {
    margin-top:.75rem!important
  }
}
.selfia-stage .stage-original>strong,.selfia-stage .stage-result>strong {
  bottom:1.25rem;
  left:1.25rem;
  position:absolute;
  z-index:2
}
.selfia-heading p {
  display:block!important;
  width:min(760px,90vw);
  margin:.8rem auto 0!important;
  text-align:center!important
}
.selfia-stage .stage-original>strong,.selfia-stage .stage-result>strong {
  color:#fff!important;
  text-shadow:0 1px 5px #261614aa
}
@media(max-width:800px) {
  .selfia-stage-carousel {
    margin-top:2rem
  }
  .selfia-stage {
    grid-template-columns:1fr
  }
  .selfia-carousel-footer {
    margin-top:1rem
  }
}
.selfia-stage-carousel {
  margin-top:2rem!important
}
@media(max-width:800px) {
  .selfia-stage-carousel {
    margin-top:.25rem!important
  }
}
.carousel-next {
  bottom:-25px!important;
  right:0!important;
  top:auto!important
}
@media(max-width:800px) {
  .carousel-next {
    bottom:-22px!important;
    right:0!important
  }
}
.carousel-footer {
  position:relative
}
.carousel-progress {
  margin-right:68px;
  width:calc(100% - 68px)
}
.carousel-next {
  bottom:auto!important;
  right:0!important;
  top:calc(100% + .7rem)!important;
  transform:translateY(-50%)
}
.carousel-next:hover {
  transform:translateY(-50%) scale(1.05)
}
@media(max-width:800px) {
  .carousel-progress {
    margin-right:54px;
    width:calc(100% - 54px)
  }
  .carousel-next {
    top:calc(100% + .7rem)!important
  }
}
.selfia-heading {
  display:block
}
.selfia-heading h2 {
  font-size:clamp(1.9rem,3.4vw,4rem);
  line-height:1.02
}
.selfia-heading p {
  margin:.8rem 0 0;
  max-width:760px
}
.selfia-stage {
  max-width:2000px;
  margin-left:auto;
  margin-right:auto
}
.stage-original,.stage-result {
  height:auto;
  aspect-ratio:1/1
}
@media(max-width:800px) {
  .selfia-stage {
    max-width:1040px
  }
  .stage-original,.stage-result {
    aspect-ratio:1/1
  }
}
.agency-header .main-nav a[href="#selfia"] {
  order:1
}
.agency-header .main-nav a[href="#propuesta-valor"] {
  order:2
}
.agency-header .main-nav a[href="#colaboracion"] {
  order:3
}
.agency-header .main-nav a[href="#contacto"] {
  order:4
}
.agency-editorial {
  display:flex;
  flex-direction:column
}
.agency-editorial>.editorial-hero {
  order:1
}
.agency-editorial>.selfia-editorial {
  order:2
}
.agency-editorial>.collaboration {
  order:3
}
.agency-editorial>.editorial-statement {
  order:4
}
.agency-editorial>.editorial-image-break {
  order:5
}
.agency-editorial>.agency-benefits {
  order:6
}
.agency-editorial>.editorial-contact {
  order:7
}
.agency-editorial>.flash-wrap {
  order:8
}
.agency-editorial>.selfia-editorial {
  background:#261614;
  color:#f7f3ed
}
.agency-editorial>.collaboration {
  background:#b67040;
  color:#261614
}
.agency-editorial>.selfia-editorial {
  order:1!important;
  padding-top:19rem
}
.agency-editorial>.editorial-hero {
  order:2!important;
  padding-top:8rem
}
@media(max-width:800px) {
  .agency-editorial>.selfia-editorial {
    padding-top:14rem
  }
  .agency-editorial>.editorial-hero {
    padding-top:5rem
  }
}
.hero-carousel {
  position:relative
}
.carousel-next {
  position:absolute!important;
  right:0!important;
  top:50%!important
}
@media(max-width:800px) {
  .carousel-next {
    right:0!important
  }
}
.selfia-editorial {
  padding-top:4rem
}
.selfia-heading {
  margin-top:1rem
}
.selfia-heading h2 {
  white-space:nowrap
}
@media(max-width:800px) {
  .selfia-editorial {
    padding-top:3.5rem
  }
  .selfia-heading h2 {
    white-space:normal
  }
}
.agency-editorial>.editorial-hero {
  background:#f7f3ed!important;
  color:#261614!important
}
.selfia-editorial .selfia-heading h2,.selfia-editorial .selfia-heading p {
  color:#261614!important
}
.selfia-editorial .selfia-heading {
  color:#261614!important
}
.agency-editorial>.selfia-editorial {
  background:#f7f3ed!important;
  color:#261614!important
}
.selfia-editorial .selfia-heading h2,.selfia-editorial .selfia-heading p {
  color:#261614!important
}
.selfia-stage-carousel {
  margin-top:-2rem!important
}
@media(max-width:800px) {
  .selfia-stage-carousel {
    margin-top:-1rem!important
  }
}
.selfia-carousel-footer {
  position:relative;
  z-index:4
}
.selfia-dot {
  position:relative;
  z-index:5
}
.selfia-progress {
  background:#26161433!important
}
.selfia-progress span {
  background:#261614!important
}
.selfia-dot {
  background:#806c5f!important
}
.selfia-dot.is-active {
  background:#261614!important
}
.selfia-next {
  background:none;
  border:0;
  color:#844d31;
  cursor:pointer;
  font:500 1.1rem var(--font-sans);
  line-height:1;
  padding:.25rem .5rem
}
.carousel-next,
.selfia-next {
  background:none!important;
  border:0!important;
  color:#844d31!important;
  font-size:1.8rem!important;
  font-weight:500;
}
.carousel-footer {
  align-items:center;
  display:flex;
  gap:1.5rem;
  justify-content:center
}
.carousel-next {
  height:auto!important;
  position:static!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  width:auto!important
}
.carousel-next:hover {
  transform:none!important
}
.hero-carousel .hero-slide {
  height:62vh
}
.hero-carousel .hero-slide[data-slide-index="1"] .hero-slide-image img {
  background:#e8dfd5;
  object-fit:contain
}
@media(max-width:800px) {
  .hero-carousel .hero-slide {
    height:calc(54vh + 14rem);
    overflow:hidden
  }
  .hero-carousel .hero-slide figcaption {
    min-height:14rem
  }
}
#selfia.selfia-editorial .selfia-heading,
#selfia.selfia-editorial .selfia-heading h2,
#selfia.selfia-editorial .selfia-heading p {
  color:rgb(38,22,20)!important;
  -webkit-text-fill-color:rgb(38,22,20)!important
}
.selfia-heading {
  margin-top:0!important;
  margin-bottom:0!important
}
.selfia-heading h2 {
  font-size:clamp(1.7rem,2.8vw,3.3rem)!important
}
.collaboration>.section-label {
  display:none!important
}
.collaboration-intro {
  align-items:start;
  margin-top:0!important;
  margin-bottom:4rem!important
}
.collaboration-intro h2 {
  font-size:clamp(2.6rem,4.5vw,5rem)!important;
  line-height:.9!important;
  letter-spacing:-.07em!important
}
.collaboration-steps h3 {
  letter-spacing:-.02em!important
}
.collaboration-steps p {
  color:#6a3c27!important
}
.collaboration-steps h3 {
  font-size:1.7rem!important
}
.collaboration-steps p {
  font-size:1rem!important;
  line-height:1.35!important
}
.collaboration-steps span {
  font-size:.8rem!important
}
.collaboration-steps h3 {
  font-size:2rem!important;
  min-height:3.6rem!important
}
.collaboration-steps p {
  font-size:1.12rem!important;
  line-height:1.35!important
}
.collaboration-cta {
  background:#261614;
  color:#f7f3ed;
  display:flex;
  font-size:1rem!important;
  justify-content:center;
  margin:3rem auto 0;
  width:max-content
}
.agency-editorial>.editorial-contact {
  background:#f7f3ed!important;
  color:#261614!important
}
.editorial-contact .section-label,
.editorial-contact h2,
.editorial-contact p {
  color:#261614!important
}
.editorial-contact .contact-form {
  align-self:center!important;
  border-top:1px solid #261614!important;
  display:flex!important;
  flex-direction:column;
  max-width:560px;
  width:100%
}
.editorial-contact .contact-form label {
  border-bottom:1px solid #261614!important;
  display:grid!important;
  gap:.55rem;
  padding:1rem 0!important;
  color:#261614!important
}
.editorial-contact .contact-form input,
.editorial-contact .contact-form textarea {
  background:#fff!important;
  border:0!important;
  border-bottom:0!important;
  display:block!important;
  padding:.45rem .75rem!important;
  color:#261614!important
}
.editorial-contact .contact-form input {
  min-height:2.2rem
}
.editorial-contact .contact-form textarea {
  min-height:7rem
}
.editorial-contact .contact-form .button {
  align-self:flex-start;
  width:auto
}
.editorial-contact h2 {
  font-size:clamp(3rem,6vw,6rem)!important;
  line-height:.9!important
}
.editorial-contact .contact-form .button {
  font-size:1rem!important
}
.editorial-statement .statement-copy {
  gap:7vw;
  margin-top:4rem
}
.editorial-statement .statement-copy h1 {
  font-size:clamp(2.8rem,5vw,5.2rem)!important;
  line-height:.88!important
}
.editorial-image-break {
  align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:70vh
}
.editorial-image-break .break-image {
  height:min(70vh,720px);
  margin:0 auto;
  max-width:560px;
  width:100%
}
.editorial-image-break .break-image img {
  object-fit:cover
}
.editorial-image-break .break-note {
  align-self:center;
  font-size:clamp(1rem,1.5vw,1.4rem);
  line-height:1.2;
  max-width:360px;
  padding:0 3vw
}
.editorial-statement {
  display:grid;
  gap:3rem 7vw;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:1fr;
  min-height:0;
  padding-bottom:0!important;
  padding-top:0!important
}
.editorial-statement>.section-label {
  display:none!important
}
.editorial-statement>.statement-copy {
  display:block;
  grid-column:1;
  grid-row:1;
  align-self:center;
  margin-top:0!important
}
.editorial-statement>.statement-copy>div {
  margin-top:3rem
}
.editorial-statement>.editorial-image-break {
  background:transparent;
  display:block;
  grid-column:2;
  grid-row:1;
  height:clamp(620px,85svh,900px);
  min-height:0;
  padding:0
}
.editorial-statement>.editorial-image-break .break-image {
  height:100%;
  max-width:none
}
.editorial-statement>.editorial-image-break .break-note {
  display:none
}
.editorial-statement>.editorial-image-break .break-image img {
  background:#261614;
  object-fit:contain
}
.editorial-statement>.editorial-image-break .break-image>span {
  display:none
}
@media(max-width:800px) {
  .editorial-statement .statement-copy {
    margin-top:3rem
  }
  .editorial-image-break {
    display:block;
  }
  .editorial-image-break .break-image {
    height:65vh
  }
  .editorial-image-break .break-note {
    padding:2rem 0 0
  }
  .editorial-statement {
    display:block;
    min-height:0;
    padding:5rem 7vw 0!important
  }
  .editorial-statement>.statement-copy>div {
    margin-top:3rem
  }
  .editorial-statement>.editorial-image-break {
    margin:3rem -7vw 0;
    width:calc(100% + 14vw)
  }
  .editorial-statement>.editorial-image-break .break-image {
    height:65vh
  }
}
@media(max-width:800px) {
  .collaboration-intro {
    margin-bottom:2.5rem!important
  }
}
.selfia-heading p {
  font-size:clamp(1.05rem,1.15vw,1.2rem)!important
}
.agency-editorial>.selfia-editorial {
  padding-top:19rem!important
}
.selfia-stage {
  width:85%!important;
  margin-top:4rem!important;
  margin-left:auto!important;
  margin-right:auto!important
}
.agency-header .main-nav a[href="#selfia"] {
  order:1
}
.agency-header .main-nav a[href="#inicio-hero"] {
  order:2
}
.agency-header .main-nav a[href="#colaboracion"] {
  order:3
}
.agency-header .main-nav a[href="#contacto"] {
  order:4
}
@media(max-width:800px) {
  .agency-editorial>.selfia-editorial {
    padding-top:15rem!important
  }
  .selfia-stage {
    margin-top:4.5rem!important
  }

  /* Center the SelfIA heading against the viewport, not its content column. */
  #selfia .selfia-heading {
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: 7vw;
    padding-right: 7vw;
    text-align: center;
  }

  #selfia .selfia-heading h2,
  #selfia .selfia-heading p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Mobile layout refinements: menu, Carousel Core and collaboration steps. */
@media (max-width: 800px) {
  /* Keep the agency navigation inside the menu until the toggle is opened. */
  .agency-header .main-nav,
  .agency-header.is-scrolled .main-nav {
    display: none !important;
    position: absolute !important;
    flex-direction: column !important;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 1.4rem 7vw 1.8rem;
    background: var(--paper);
    align-items: flex-start;
    gap: 1.1rem;
    z-index: 20;
    box-sizing: border-box;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 0.8rem 1.8rem rgba(38, 22, 20, 0.08);
  }

  .agency-header .main-nav.open,
  .agency-header.is-scrolled .main-nav.open {
    display: flex !important;
  }

  .agency-header .main-nav a {
    display: block;
    width: 100%;
  }

  .agency-header .main-nav .nav-cta {
    margin-top: 0.35rem;
  }

  .agency-header .menu-toggle {
    display: block !important;
    margin-left: auto;
    position: relative;
    z-index: 21;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.35rem 0;
    color: var(--ink);
    cursor: pointer;
  }

  .agency-header .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 0.32rem 0;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .agency-header .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(0.64rem) rotate(45deg);
  }

  .agency-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .agency-header .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-0.64rem) rotate(-45deg);
  }

  /* The arrow lives in the carousel footer, so the caption can use the full viewport. */
  .agency-editorial .hero-carousel {
    padding-right: 0 !important;
  }

  .agency-editorial .hero-slide figcaption {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
  }

  .agency-editorial .hero-slide figcaption h2,
  .agency-editorial .hero-slide figcaption p {
    margin-left: auto;
    margin-right: auto;
  }

  .agency-editorial .hero-slide figcaption h2 {
    font-size: clamp(2.15rem, 10.5vw, 3.45rem) !important;
  }

  /* Two stable columns: responsive type prevents narrow step cards from clipping. */
  .agency-editorial .collaboration-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1rem;
    row-gap: 2rem;
    width: 100%;
  }

  .agency-editorial .collaboration-steps > div {
    min-width: 0;
    min-height: 0 !important;
    padding: 0.9rem 0.55rem;
    overflow: visible;
  }

  .agency-editorial .collaboration-steps span {
    font-size: clamp(0.7rem, 2.8vw, 0.85rem) !important;
  }

  .agency-editorial .collaboration-steps h3 {
    margin-top: 1.8rem !important;
    min-height: 4.2rem !important;
    font-size: clamp(1.15rem, 5.2vw, 1.55rem) !important;
    line-height: 0.98 !important;
    overflow: visible;
  }

  .agency-editorial .collaboration-steps p {
    font-size: clamp(0.86rem, 3.35vw, 1rem) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }
}

/* Contact details are the focal point of the agency footer. */
.agency-editorial + .site-footer,
.site-footer {
  align-items: center;
  grid-template-columns: 1fr;
  justify-items: center;
  padding-top: 2.5rem;
  text-align: center;
}

.site-footer .brand-logo,
.site-footer > p,
.site-footer .footer-links,
.site-footer > small {
  margin-left: auto;
  margin-right: auto;
}

.site-footer .footer-links {
  justify-content: center;
}

.site-footer .footer-contact-label {
  color: var(--paper);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  margin-top: 0.5rem;
  text-transform: uppercase;
}

.site-footer .footer-contact {
  color: var(--paper);
  font-weight: 500;
}

.site-footer .footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.5rem;
  margin: 1.5rem auto 2rem;
  width: min(100%, 42rem);
}

.site-footer .footer-contact span,
.site-footer .footer-contact a {
  color: inherit;
  font-size: 0.9rem;
  text-decoration: none;
}

@media (max-width: 800px) {
  .site-footer .footer-contact {
    flex-direction: column;
    gap: 0.7rem;
  }
}

.contact-success {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 20rem;
  text-align: center;
}

.contact-success strong {
  color: var(--ink);
  font: 500 clamp(2.5rem, 6vw, 5.5rem) var(--font-sans);
  letter-spacing: -0.07em;
  line-height: 0.95;
}

.contact-success span {
  color: var(--brown, #844d31);
  font: 400 clamp(1.1rem, 2vw, 1.6rem) var(--font-serif);
  margin-top: 1.25rem;
}

.flash.success {
  display: none;
}

.contact-consent {
  align-items: flex-start;
  display: flex;
  gap: 0.55rem;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 1rem;
}

.contact-consent input {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.contact-consent input[type="checkbox"] {
  appearance: none;
  background: transparent;
  border: 1px solid var(--coral);
  border-radius: 2px;
  cursor: pointer;
  height: 0.9rem;
  margin: 0.12rem 0 0;
  position: relative;
  width: 0.9rem;
}

.contact-consent input[type="checkbox"]:checked {
  background: var(--coral);
}

.contact-consent input[type="checkbox"]:checked::after {
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  content: "";
  height: 0.45rem;
  left: 0.25rem;
  position: absolute;
  top: 0.1rem;
  transform: rotate(45deg);
  width: 0.2rem;
}

.editorial-contact .button:disabled {
  cursor: wait;
  opacity: 0.55;
}

/* Keep the consent control compact and independent from the field grid. */
.editorial-contact .contact-form label.contact-consent {
  align-items: flex-start;
  border: 0 !important;
  display: flex !important;
  gap: 0.55rem;
  padding: 1rem 0 0 !important;
}

.editorial-contact .contact-form label.contact-consent input[type="checkbox"] {
  accent-color: var(--coral);
  appearance: auto !important;
  background: var(--paper) !important;
  display: inline-block !important;
  flex: 0 0 0.9rem;
  height: 0.9rem !important;
  min-height: 0.9rem !important;
  padding: 0 !important;
  pointer-events: auto !important;
  width: 0.9rem !important;
}

.contact-consent a {
  color: inherit;
  text-decoration: underline;
}