@import url('./06e3b170ad60-remote-style.css');
@import url('./07ee2eaae4b5-remote-style.css');

:root {
  --about-red: #f9002b;
  --about-black: #020202;
  --about-panel: #080808;
  --about-line: rgba(255,255,255,.14);
  --about-white: #fff;
  --about-muted: #aaa;
  --about-shell: min(1180px,88%);
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--about-black); color: var(--about-white); font-family: "Open Sans",Arial,sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 100%; overflow: clip; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; top: 0; left: 16px; z-index: 1000; padding: 10px 15px; background: #fff; color: #000; transform: translateY(-120%); }
.skip-link:focus { transform: none; }
.about-shell { width: var(--about-shell); max-width: 100%; margin-inline: auto; }
.about-eyebrow { margin: 0 0 14px; color: var(--about-red); font-family: Montserrat,Arial,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; }

/* Cabecera compartida con el resto de la web. */
.cn-header { position: relative; z-index: 50; height: 107px; background: #000; }
.cn-header__inner { display: flex; align-items: center; justify-content: space-between; width: 80%; max-width: 1080px; height: 100%; margin: auto; }
.cn-header__brand img { display: block; width: 232px; height: auto; }
.cn-header__nav { display: flex; align-items: center; gap: 27px; font-family: Montserrat,Arial,sans-serif; font-size: 14px; font-weight: 500; line-height: 23px; }
.cn-header__nav > a,.cn-header__projects > a { padding: 14px 0; transition: color .2s ease; }
.cn-header__nav > a:hover,.cn-header__nav > a:focus-visible,.cn-header__projects > a:hover,.cn-header__projects > a:focus-visible { color: var(--about-red); }
.cn-header__nav .is-current { color: #fff; }
.cn-header__projects { position: relative; }
.cn-header__projects > a::after { content: "⌄"; margin-left: 8px; }
.cn-header__projects ul { position: absolute; top: 46px; left: -20px; min-width: 275px; margin: 0; padding: 12px 0; border-top: 3px solid var(--about-red); background: #080808; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease,transform .2s ease,visibility .2s ease; }
.cn-header__projects:focus-within ul,.cn-header__projects:hover ul { opacity: 1; visibility: visible; transform: none; }
.cn-header__projects li a { display: block; padding: 11px 20px; color: #ddd; font-size: 13px; }
.cn-header__projects li a:hover,.cn-header__projects li a:focus-visible { background: #151515; color: #fff; }
.cn-header__mobile { display: none; }
.cn-header__mobile summary { list-style: none; }
.cn-header__mobile summary::-webkit-details-marker { display: none; }

/* Hero compacto: deja ver el siguiente capítulo sin perder impacto. */
.about-hero { position: relative; display: grid; min-height: clamp(505px,63vh,650px); overflow: hidden; background: #030303; place-items: end start; }
.about-hero__media { position: absolute; inset: -5% 0; background: url("about-hero-red.jpg") center 48%/cover no-repeat; filter: brightness(.96) saturate(.88); opacity: .88; transform: translate3d(0,var(--about-hero-shift,0),0) scale(1.05); will-change: transform; }
.about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.42) 49%,rgba(0,0,0,.08) 100%),linear-gradient(0deg,rgba(2,2,2,.82) 0%,rgba(2,2,2,.12) 32%,rgba(2,2,2,.02) 70%); }
.about-hero__content { position: relative; z-index: 2; padding-bottom: clamp(70px,9vh,96px); }
.about-hero h1 { max-width: 900px; margin: 0; color: #fff; font-family: Montserrat,Arial,sans-serif; font-size: clamp(43px,5.4vw,72px); font-weight: 700; letter-spacing: -.052em; line-height: 1.02; text-wrap: balance; }
.about-hero h1 span { display: block; opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(28px); animation: aboutHeroLine .78s cubic-bezier(.2,.75,.25,1) forwards; }
.about-hero h1 span:nth-child(2) { animation-delay: .12s; }
.about-hero__eyebrow { opacity: 0; animation: aboutHeroFade .6s .02s ease forwards; }
.about-hero__intro { max-width: 585px; margin: 22px 0 0; color: #d2d2d2; font-size: clamp(15px,1.25vw,18px); line-height: 1.65; opacity: 0; transform: translateY(14px); animation: aboutHeroIntro .7s .27s ease forwards; }
.about-hero__scroll { position: absolute; right: 6%; bottom: 30px; z-index: 2; display: flex; align-items: center; gap: 12px; color: #ddd; font-family: Montserrat,Arial,sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; transition: color .2s ease; }
.about-hero__scroll span { color: var(--about-red); font-size: 18px; transition: transform .2s ease; }
.about-hero__scroll:hover,.about-hero__scroll:focus-visible { color: #fff; }
.about-hero__scroll:hover span { transform: translateY(4px); }
.about-hero__scroll:focus-visible,.about-button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@keyframes aboutHeroLine { to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes aboutHeroFade { to { opacity: 1; } }
@keyframes aboutHeroIntro { to { opacity: 1; transform: none; } }

/* Relato e imagen forman una única composición editorial. */
.about-story { padding: clamp(76px,8vw,112px) 0 clamp(36px,4vw,56px); background: #020202; }
.about-story__grid { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr); column-gap: clamp(58px,7vw,105px); align-items: center; }
.about-story__content { position: relative; z-index: 2; }
.about-story__heading { max-width: 630px; }
.about-story h2,.about-method h2,.about-cta h2 { margin: 0; color: #fff; font-family: Montserrat,Arial,sans-serif; font-size: clamp(34px,4vw,54px); font-weight: 700; letter-spacing: -.043em; line-height: 1.08; text-wrap: balance; }
.about-story__copy { padding-top: 24px; border-top: 1px solid var(--about-line); }
.about-story__copy p { margin: 0 0 17px; color: var(--about-muted); font-size: 15px; line-height: 1.72; }
.about-story__copy p:last-child { margin-bottom: 0; }
.about-story__lead { max-width: 760px; margin: 22px 0 0; color: #fff; font-family: Montserrat,Arial,sans-serif; font-size: clamp(18px,1.65vw,22px); font-weight: 500; line-height: 1.48; }
.about-story__figure { position: relative; width: calc(100% + 5vw); margin: 0 0 0 -5vw; }
.about-story__frame { height: clamp(440px,47vw,590px); overflow: hidden; background: #0b0b0b; clip-path: polygon(0 0,100% 5%,100% 100%,7% 94%); }
.about-story__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(0,0,0,.7)); pointer-events: none; }
.about-story__frame img { display: block; width: 100%; height: calc(100% + 52px); object-fit: cover; object-position: center 50%; filter: brightness(.7) saturate(.78); transform: translate3d(0,var(--about-image-shift,-26px),0) scale(1.025); will-change: transform; }
.about-story figcaption { position: absolute; right: 0; bottom: 0; z-index: 2; width: min(450px,67%); padding: 20px 25px 20px 34px; border-right: 3px solid var(--about-red); background: linear-gradient(90deg,transparent 0%,rgba(2,2,2,.38) 18%,rgba(2,2,2,.84) 45%,rgba(2,2,2,.97) 100%); color: #ddd; font-size: 13px; line-height: 1.55; text-align: right; }
.about-story figcaption span { display: block; margin-bottom: 7px; color: var(--about-red); font-family: Montserrat,Arial,sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-align: right; text-transform: uppercase; }

/* Tres gestos de trabajo, planteados como filas editoriales. */
.about-method { padding: clamp(52px,5vw,70px) 0 0; background: #070707; }
.about-method__head { max-width: 850px; margin-bottom: clamp(42px,5vw,62px); }
.about-method__head > p:last-child { margin: 0 0 4px; color: var(--about-muted); font-size: 15px; line-height: 1.65; }
.about-method__list { margin: 0; padding: 0; border-top: 0; list-style: none !important; }
.about-method__list li { position: relative; display: grid; grid-template-columns: 115px minmax(0,1fr); gap: clamp(26px,4.5vw,70px); align-items: center; padding: 34px 0; list-style: none !important; transition: padding .3s ease,background-color .3s ease; }
.about-method__list li::marker { content: ""; }
.about-method__list li::before { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg,var(--about-red),rgba(255,255,255,.16) 18%,rgba(255,255,255,.1)); transform: scaleX(0); transform-origin: left; transition: transform .75s cubic-bezier(.2,.75,.2,1); }
.about-method__list li.is-visible::before { transform: scaleX(1); }
.about-method__list li:hover { padding-inline: 20px; background: rgba(255,255,255,.025); }
.about-method__number { display: block; color: rgba(255,255,255,.17); font-family: Montserrat,Arial,sans-serif; font-size: clamp(46px,4.5vw,62px); font-weight: 700; letter-spacing: -.06em; line-height: .9; transition: color .3s ease,transform .3s ease; }
.about-method__list li:hover .about-method__number { color: var(--about-red); transform: translateX(4px); }
.about-method__list li > div { display: grid; grid-template-columns: minmax(190px,.5fr) minmax(280px,1fr); gap: clamp(30px,6vw,90px); align-items: center; }
.about-method h3 { margin: 0; color: #fff; font-family: Montserrat,Arial,sans-serif; font-size: clamp(25px,2.5vw,34px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; transition: transform .3s ease; }
.about-method__list li:hover h3 { transform: translateX(7px); }
.about-method__list p { max-width: 535px; margin: 0; color: var(--about-muted); font-size: 14px; line-height: 1.7; }

/* Cierre compacto con línea de transición animada. */
.about-cta { position: relative; padding: clamp(64px,7vw,92px) 0; background: radial-gradient(circle at 92% 50%,rgba(249,0,43,.08),transparent 27%),#030303; }
.about-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.about-cta h2 { max-width: 690px; font-size: clamp(34px,3.8vw,51px); }
.about-cta__inner > div > p:last-child { max-width: 650px; margin: 18px 0 0; color: #fff; font-family: Montserrat,Arial,sans-serif; font-size: clamp(17px,1.45vw,20px); font-weight: 500; line-height: 1.5; }
.about-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex: none; min-height: 48px; padding: 14px 22px; border-radius: 3px; background: var(--about-red); box-shadow: 6px 6px 18px rgba(0,0,0,.3); color: #fff; font-family: Montserrat,Arial,sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; transition: background-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease; }
.about-button span { transition: color .25s ease,transform .25s ease; }
.about-button:hover,.about-button:focus-visible { background: #fff; color: #090909; box-shadow: inset 0 -3px 0 var(--about-red),0 12px 28px rgba(255,255,255,.15); transform: translateY(-3px); }
.about-button:hover span,.about-button:focus-visible span { color: var(--about-red); transform: translateX(4px); }

/* Apariciones variadas, sin convertir todos los bloques en el mismo fade. */
.about-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease,transform .72s cubic-bezier(.2,.7,.2,1); }
.about-reveal--left { transform: translateX(-30px); }
.about-reveal--right { transform: translateX(30px); }
.about-reveal.is-visible { opacity: 1; transform: none; }
.about-method__list li:nth-child(2) { transition-delay: .06s; }
.about-method__list li:nth-child(3) { transition-delay: .12s; }

@media (max-width: 980px) {
  .cn-header__nav { display: none; }
  .cn-header__mobile { position: relative; display: block; }
  .cn-header__mobile summary { display: grid; gap: 5px; padding: 15px; cursor: pointer; }
  .cn-header__mobile summary span { display: block; width: 28px; height: 2px; background: #fff; }
  .cn-header__mobile nav { position: absolute; top: 54px; right: 0; display: grid; min-width: 230px; padding: 12px; border-top: 3px solid var(--about-red); background: #090909; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
  .cn-header__mobile nav a { padding: 12px 14px; font-family: Montserrat,Arial,sans-serif; }
  .cn-header__mobile nav .is-current { color: var(--about-red); }
  .about-story__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); column-gap: 45px; }
  .about-story__figure { width: calc(100% + 4vw); margin: 0 0 0 -4vw; }
  .about-story figcaption { right: 0; width: 75%; }
  .about-method__head { grid-template-columns: 1fr; row-gap: 18px; }
  .about-method__list li { grid-template-columns: 90px minmax(0,1fr); }
  .about-method__list li > div { grid-template-columns: minmax(150px,.45fr) minmax(240px,1fr); gap: 28px; }
  .about-cta__inner { align-items: flex-start; flex-direction: column; gap: 30px; }
}

@media (max-width: 760px) {
  .about-story__grid { grid-template-columns: 1fr; gap: 34px; }
  .about-story__content { order: -1; max-width: 650px; }
  .about-story__heading { max-width: 650px; }
  .about-story__copy { max-width: 600px; }
  .about-story__figure { width: calc(100% + 6vw); margin: 0 0 0 -6vw; }
  .about-story__frame { height: 485px; }
  .about-method__list li > div { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 640px) {
  :root { --about-shell: min(100% - 40px,1180px); }
  .cn-header { height: 94px; }
  .cn-header__inner { width: calc(100% - 40px); }
  .cn-header__brand img { width: 170px; }
  .about-hero { min-height: 535px; }
  .about-hero__media { inset: -2% -24%; background-position: 35% center; transform: translate3d(0,var(--about-hero-shift,0),0) scale(1.04); }
  .about-hero__overlay { background: linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.34)),linear-gradient(0deg,rgba(2,2,2,.8),transparent 48%); }
  .about-hero__content { padding-bottom: 94px; }
  .about-hero h1 { font-size: clamp(39px,11.5vw,49px); line-height: 1.04; }
  .about-hero__intro { max-width: 94%; margin-top: 18px; font-size: 15px; line-height: 1.58; }
  .about-hero__scroll { right: auto; left: 20px; bottom: 27px; }
  .about-story { padding: 66px 0 42px; }
  .about-story h2,.about-method h2,.about-cta h2 { font-size: clamp(32px,9.5vw,42px); }
  .about-story__copy { padding-top: 21px; }
  .about-story__lead { margin-top: 18px; font-size: 18px; }
  .about-story__figure { width: calc(100% + 20px); margin: 0 0 0 -20px; }
  .about-story__frame { height: 410px; clip-path: polygon(0 0,100% 4%,100% 100%,5% 96%); }
  .about-story__frame img { object-position: 60% center; }
  .about-story figcaption { right: 0; bottom: 0; width: calc(100% - 44px); padding: 18px 20px 18px 26px; }
  .about-method { padding: 46px 0 0; }
  .about-method__head { margin-bottom: 35px; }
  .about-method__list li { grid-template-columns: 62px minmax(0,1fr); gap: 18px; padding: 28px 0; }
  .about-method__list li:hover { padding-inline: 0; background: transparent; }
  .about-method__number { font-size: 39px; }
  .about-method h3 { font-size: 25px; }
  .about-method__list p { font-size: 14px; }
  .about-cta { padding: 62px 0 68px; }
  .about-button { font-size: 12px; }
  .footer-main { padding-top: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .about-hero__media,.about-story__frame img { transform: none !important; will-change: auto; }
  .about-hero h1 span,.about-hero__eyebrow,.about-hero__intro,.about-reveal { opacity: 1; clip-path: none; transform: none; animation: none; transition: none; }
  .about-method__list li::before { transform: scaleX(1); transition: none; }
  .about-button,.about-button span,.about-method__list li,.about-method__number,.about-method h3,.about-hero__scroll span { transition: none; }
}