@font-face{
  font-family:Montserrat;
  src:url('../fonts/Montserrat-ExtraBold.woff2') format('woff2');
  font-style:normal;
  font-weight:800;
  font-display:swap
}
@font-face{
  font-family:Montserrat;
  src:url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-style:normal;
  font-weight:600 700;
  font-display:swap
}
@font-face{
  font-family:Carlito;
  src:url('../fonts/Carlito-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:Carlito;
  src:url('../fonts/Carlito-Bold.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:swap
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:164px
}
body{
  margin:0;
  background:var(--fw-paper);
  color:var(--fw-ink);
  font:25px/1.5 var(--fw-font-body);
  -webkit-font-smoothing:antialiased
}
button,input,textarea{
  font:inherit
}
button,a,input,textarea,summary{
  touch-action:manipulation
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:disabled,button[aria-disabled=true]{
  cursor:wait;
  opacity:.7
}
a{
  color:inherit;
  text-underline-offset:4px
}
img{
  display:block;
  max-width:100%;
  height:auto
}
figure,p{
  margin:0
}
h1,h2,h3{
  margin:0;
  font-family:var(--fw-font-heading);
  font-weight:600;
  line-height:1.13;
  letter-spacing:-.042em
}
h2{
  font-size:clamp(43px,3.05vw,61px)
}
h3{
  font-size:34px
}
p{
  overflow-wrap:break-word
}
::selection{
  background:var(--fw-brand-light);
  color:var(--fw-ink)
}
:focus-visible{
  outline:3px solid var(--fw-brand-dark);
  outline-offset:5px
}
.container{
  width:min(calc(100% - 64px),1440px);
  margin-inline:auto
}
.section{
  padding:64px 0
}
.arrow{
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
[hidden]{
  display:none!important
}
.skip-link{
  position:fixed;
  top:12px;
  left:16px;
  z-index:1000;
  padding:14px 22px;
  background:var(--fw-paper);
  color:var(--fw-ink);
  transform:translateY(-200%)
}
.skip-link:focus{
  transform:none
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  font:700 18px/1.5 var(--fw-font-body);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--fw-brand-dark);
  margin-bottom:18px
}
.section-rule{
  width:26px;
  height:1px;
  background:currentColor;
  flex-shrink:0
}
.brand-rule{
  width:32px;
  height:3px;
  background:var(--fw-brand);
  flex-shrink:0
}
.heading-row{
  display:flex;
  justify-content:space-between;
  gap:48px;
  align-items:flex-end;
  margin-bottom:32px
}
.heading-row>p{
  max-width:430px;
  color:var(--fw-muted);
  font-size:26px;
  line-height:1.5
}
.button{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:14px 24px;
  border:1px solid var(--fw-brand-dark);
  background:var(--fw-brand-dark);
  color:var(--fw-paper);
  border-radius:var(--fw-radius);
  font-size:25px;
  font-weight:700;
  line-height:1.3;
  text-decoration:none;
  transition:background 160ms,border-color 160ms
}
.button:hover{
  background:var(--fw-ink);
  border-color:var(--fw-ink)
}
.button .arrow{
  transition:transform 160ms
}
.button:hover .arrow{
  transform:translateX(3px)
}
.button-secondary{
  background:transparent;
  color:var(--fw-brand-dark)
}
.button-secondary:hover{
  background:var(--fw-surface);
  color:var(--fw-brand-dark);
  border-color:var(--fw-brand-dark)
}
.text-link{
  display:inline-flex;
  gap:20px;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  color:var(--fw-brand-dark);
  font-weight:700
}
.text-link:hover{
  text-decoration:underline
}
.text-link .arrow{
  width:20px;
  height:20px
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--fw-paper);
  border-bottom:1px solid var(--fw-line)
}
.header-inner{
  min-height:154px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:44px
}
.brand{
  display:block;
  flex-shrink:0
}
.brand .logo-full{
  width:460px;
  height:auto
}
.logo-compact{
  display:none
}
.main-nav{
  display:flex;
  align-items:center;
  gap:28px
}
.main-nav>a{
  font-size:clamp(22px,1.35vw,26px);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  white-space:nowrap
}
.main-nav>a:hover{
  color:var(--fw-brand-dark)
}
.main-nav .nav-cta{
  color:var(--fw-brand-dark);
  font-weight:700;
  border-left:1px solid var(--fw-line);
  padding-left:28px;
  gap:14px
}
.nav-cta .arrow{
  width:20px
}
.menu-toggle{
  display:none
}
.hero{
  background:var(--fw-editorial);
  padding:48px 0 0
}
.hero-grid{
  display:grid;
  grid-template-columns:1.06fr 1fr;
  gap:54px;
  align-items:center
}
.hero-eyebrow{
  font-size:16px;
  letter-spacing:.1em;
  margin-bottom:28px;
  gap:12px
}
.hero h1{
  font-size:clamp(55px,4.45vw,88px);
  font-weight:800;
  line-height:1.07;
  letter-spacing:-.05em
}
.hero h1 span{
  display:block
}
.hero-intro{
  font-size:34px;
  line-height:1.35;
  max-width:470px;
  margin-top:28px
}
.hero-description{
  font-size:25px;
  color:var(--fw-muted);
  line-height:1.55;
  max-width:465px;
  margin:18px 0 28px
}
.hero .button{
  min-width:240px
}
.hero-microcopy{
  max-width:390px;
  color:var(--fw-muted);
  font-size:21px;
  margin-top:14px
}
.hero-secondary{
  font-size:21px;
  margin-top:14px;
  gap:12px
}
.hero-figure{
  position:relative;
  aspect-ratio:4/4.8;
  background:var(--fw-ink);
  overflow:hidden
}
.hero-image{
  width:100%;
  height:100%;
  object-fit:cover
}
.photo-label{
  position:absolute;
  top:22px;
  left:22px;
  display:inline-flex;
  gap:9px;
  align-items:center;
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  background:var(--fw-ink);
  color:var(--fw-paper);
  padding:10px 13px
}
.photo-label>span{
  width:5px;
  height:5px;
  background:var(--fw-brand-light)
}
.hero-figure figcaption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--fw-ink);
  color:var(--fw-paper);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:21px 26px;
  font-size:24px;
  line-height:1.35
}
.hero-figure figcaption strong{
  font-weight:700
}
.hero-figure figcaption .arrow{
  width:32px;
  height:32px;
  color:var(--fw-brand-light)
}
.proof-strip{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr;
  margin-top:48px;
  border-top:1px solid var(--fw-line);
  padding:29px 0;
  gap:32px
}
.proof-strip>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:32px;
  border-left:1px solid var(--fw-line)
}
.proof-strip>div:first-child{
  border:0;
  padding-left:0
}
.proof-strip strong{
  font-family:var(--fw-font-heading);
  font-size:24px;
  font-weight:600;
  letter-spacing:-.03em
}
.proof-strip p{
  font-size:21px;
  color:var(--fw-muted);
  margin-top:6px
}
.proof-strip .proof-experience{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:20px
}
.proof-experience>strong{
  font-size:53px;
  color:var(--fw-brand-dark);
  line-height:1.05;
  font-weight:800
}
.proof-experience>strong>span{
  font-size:20px;
  display:block;
  letter-spacing:0;
  margin-top:4px
}
.proof-experience p{
  margin:0
}
.needs-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--fw-line);
  border-bottom:1px solid var(--fw-line)
}
.need-card{
  padding:26px 26px 22px;
  text-decoration:none;
  border-left:1px solid var(--fw-line);
  display:flex;
  flex-direction:column;
  transition:background 160ms
}
.need-card:first-child{
  border-left:0;
  padding-left:0
}
.need-card:last-child{
  padding-right:0
}
.need-card:hover{
  background:var(--fw-surface)
}
.need-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.need-top>span{
  font-size:18px;
  color:var(--fw-muted);
  font-variant-numeric:tabular-nums
}
.need-card h3{
  font-size:28px;
  line-height:1.25;
  letter-spacing:-.025em;
  max-width:280px;
  margin-bottom:14px
}
.need-card p{
  font-size:24px;
  color:var(--fw-muted);
  line-height:1.45
}
.card-arrow{
  display:flex;
  justify-content:flex-end;
  margin-top:auto;
  padding-top:24px;
  color:var(--fw-brand-dark)
}
.card-arrow svg{
  width:22px;
  height:22px
}
.capability-section{
  background:var(--fw-surface)
}
.capability-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--fw-line);
  padding:24px 0 38px;
  gap:30px
}
.capability h3{
  font-size:25px;
  letter-spacing:-.025em;
  margin-bottom:9px
}
.capability p{
  font-size:24px;
  color:var(--fw-muted);
  line-height:1.5;
  max-width:320px
}
.sequence-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.sequence-photo{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  background:var(--fw-paper)
}
.sequence-photo img{
  width:100%;
  height:100%;
  object-fit:cover
}
.model-photo img{
  object-fit:contain;
  padding:14px
}
.stage-badge{
  position:absolute;
  bottom:0;
  left:0;
  max-width:100%;
  background:var(--fw-ink);
  color:var(--fw-paper);
  padding:9px 12px;
  font-size:17px;
  font-weight:700;
  letter-spacing:.075em
}
.sequence-stage figcaption{
  display:flex;
  gap:17px;
  align-items:flex-start;
  padding-top:23px
}
.stage-number{
  font-size:18px;
  color:var(--fw-brand-dark);
  line-height:1.9;
  font-variant-numeric:tabular-nums
}
.sequence-stage h3{
  font-size:29px;
  margin-bottom:7px
}
.sequence-stage figcaption p{
  font-size:23px;
  color:var(--fw-muted)
}
.sequence-stage figcaption .arrow{
  margin-left:auto;
  color:var(--fw-brand-dark);
  width:20px
}
.sequence-note{
  font-size:21px;
  color:var(--fw-muted);
  margin-top:27px
}
.project-case{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
  align-items:center
}
.project-photo{
  position:relative;
  aspect-ratio:4/3;
  background:var(--fw-surface)
}
.project-photo img{
  width:100%;
  height:100%;
  object-fit:cover
}
/* Al pasar el cursor, enfocar o tocar la fotografía de un proyecto aparece una capa con la descripción del trabajo. */
.project-photo{
  overflow:hidden;
  cursor:pointer
}
.sequence-photo{
  cursor:pointer
}
.sequence-photo .photo-about{
  gap:8px;
  padding:22px 22px 66px;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.4
}
.sequence-photo .photo-about .photo-about-title{
  font-size:clamp(21px,1.6vw,26px);
  color:var(--fw-brand-light)
}
.photo-about{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:safe center;
  gap:12px;
  padding:clamp(22px,3.2vw,44px) clamp(22px,3.2vw,44px) calc(clamp(22px,3.2vw,44px) + 50px);
  background:rgb(27 32 35 / 88%);
  color:var(--fw-paper);
  font-size:clamp(18px,1.25vw,21px);
  line-height:1.45;
  opacity:0;
  transition:opacity 200ms
}
.photo-about p{
  margin:0;
  max-width:34em;
  color:inherit
}
.photo-about .photo-about-sector{
  font-size:14px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--fw-brand-light)
}
.photo-about .photo-about-title{
  font:600 clamp(24px,2vw,32px)/1.15 var(--fw-font-heading);
  letter-spacing:-.03em
}
/* Datos del trabajo (content/site.json → sequence[].facts y cases). */
.photo-about .photo-about-facts{
  font-weight:700;
  color:var(--fw-brand-light)
}
/* Escape cierra la capa (site.js pone .sin-capa hasta que salen el cursor o el foco). */
.sin-capa .photo-about{
  opacity:0!important
}
.project-photo:hover .photo-about,.project-photo:focus .photo-about,.project-photo:focus-within .photo-about,.sequence-photo:hover .photo-about,.sequence-photo:focus .photo-about{
  opacity:1
}
/* Con ratón, un clic deja el foco en la foto: sin esto la capa quedaría pegada al retirar el cursor. Con teclado sigue visible. */
@media (hover:hover){
  .project-photo:focus:not(:focus-visible):not(:hover) .photo-about,.sequence-photo:focus:not(:focus-visible):not(:hover) .photo-about{
    opacity:0
  }
}
/* En teléfonos la foto es baja: texto más chico y sin la frase que ya está al lado. */
@media (max-width:760px){
  .photo-about{
    gap:5px;
    padding:8px 16px 76px;
    font-size:16px;
    line-height:1.35
  }
  .photo-about .photo-about-sector{
    font-size:12px
  }
  .photo-about .photo-about-title{
    font-size:20px
  }
  .photo-about .photo-about-alt,.photo-about .photo-about-sector{
    display:none
  }
}
/* Las fotos de la secuencia son chicas en tabletas y teléfonos: ahí la capa lleva solo la descripción. */
@media (max-width:1100px){
  .sequence-photo .photo-about{
    padding:12px 14px 50px;
    font-size:15px;
    line-height:1.32
  }
  .sequence-photo .photo-about .photo-about-title{
    display:none
  }
}
/* Entre 761 y 960 px las fotos de la secuencia miden unos 215 px: letra menor y el texto arriba, para que los datos no
   queden bajo el rótulo. */
@media (min-width:761px) and (max-width:960px){
  .sequence-photo .photo-about{
    justify-content:flex-start;
    gap:4px;
    padding:8px 12px 0;
    font-size:13px;
    line-height:1.24
  }
}
@media (prefers-reduced-motion:reduce){
  .photo-about{
    transition:none
  }
}
@media print{
  .photo-about{
    display:none
  }
}
.project-photo figcaption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--fw-ink);
  color:var(--fw-paper);
  font-size:15px;
  letter-spacing:.09em;
  font-weight:700;
  padding:15px 19px
}
.case-copy .eyebrow{
  font-size:16px;
  letter-spacing:.1em;
  margin-bottom:21px
}
.case-copy h3{
  font-size:45px;
  line-height:1.16
}
.case-copy dl{
  margin:27px 0 18px
}
.case-copy dl>div{
  margin-top:20px
}
.case-copy dt{
  font-weight:700;
  font-size:20px;
  margin-bottom:5px;
  color:var(--fw-brand-dark)
}
.case-copy dd{
  margin:0;
  font-size:24px;
  color:var(--fw-muted);
  line-height:1.45
}
.case-copy .text-link{
  font-size:23px
}
.golden-section{
  background:var(--fw-ink);
  color:var(--fw-paper);
  padding:60px 0
}
.project-golden{
  grid-template-columns:1.1fr 1fr;
  gap:92px
}
.golden-section .case-copy{
  max-width:475px
}
.golden-section .eyebrow,.golden-section dt,.golden-section .text-link{
  color:var(--fw-brand-light)
}
.golden-section dd{
  color:var(--fw-line)
}
.golden-section .project-photo{
  aspect-ratio:1/1.05
}
.golden-section h3{
  font-size:clamp(43px,3.1vw,58px)
}
/* Golden Omega es h3 como Penco: sin esto .case-copy h3 lo bajaba a 38-39 px entre 761 y 1100 px. */
@media(min-width:761px){
  .golden-section .case-copy h3{
    font-size:clamp(43px,3.1vw,58px)
  }
}
.golden-section .project-photo img{
  object-position:center 42%!important
}
.golden-section figcaption{
  background:var(--fw-brand-dark)
}
.golden-section :focus-visible,.contact-section :focus-visible,.site-footer :focus-visible{
  outline-color:var(--fw-brand-light)
}
.technical-section{
  background:var(--fw-editorial);
  /* Los criterios esperan su entrada corridos a la derecha: sin el recorte, la página queda más ancha que la pantalla. */
  overflow-x:clip
}
.technical-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:88px;
  align-items:start
}
.technical-copy h2{
  font-size:clamp(43px,3vw,58px)
}
.technical-copy>p:not(.eyebrow){
  max-width:365px;
  color:var(--fw-muted);
  margin:24px 0 22px
}
.technical-copy .text-link{
  font-size:23px;
  gap:12px
}
.technical-accordion{
  border-top:1px solid var(--fw-line);
  margin-top:6px
}
.technical-accordion details{
  border-bottom:1px solid var(--fw-line)
}
.technical-accordion summary{
  min-height:87px;
  list-style:none;
  display:flex;
  gap:20px;
  align-items:center;
  cursor:pointer;
  font-size:26px;
  font-weight:700;
  padding:22px 0
}
.technical-accordion summary::-webkit-details-marker{
  display:none
}
.accordion-index{
  color:var(--fw-brand-dark);
  font-size:18px;
  font-variant-numeric:tabular-nums;
  font-weight:400
}
.plus{
  width:16px;
  height:16px;
  position:relative;
  margin-left:auto;
  flex-shrink:0
}
.plus:before,.plus:after{
  content:'';
  position:absolute;
  background:var(--fw-brand-dark);
  left:0;
  top:7px;
  width:16px;
  height:1px
}
.plus:after{
  transform:rotate(90deg);
  transition:transform 160ms
}
.technical-accordion details[open] .plus:after{
  transform:rotate(0)
}
/* Con mouse o teclado, la fila invita a abrirse: título en color de marca, leve corrimiento, círculo tras el «+» y filete de color. */
.technical-accordion summary>span:first-child{
  transition:color 160ms,transform 160ms
}
.technical-accordion .plus{
  border-radius:50%;
  margin-right:10px;
  transition:box-shadow 160ms,background-color 160ms
}
.technical-accordion details{
  transition:border-color 160ms
}
.technical-accordion summary:focus-visible>span:first-child{
  color:var(--fw-brand-dark);
  transform:translateX(8px)
}
.technical-accordion summary:focus-visible .plus{
  background:rgba(7,135,152,.12);
  box-shadow:0 0 0 10px rgba(7,135,152,.12)
}
@media (hover:hover){
  .technical-accordion summary:hover>span:first-child{
    color:var(--fw-brand-dark);
    transform:translateX(8px)
  }
  .technical-accordion summary:hover .plus{
    background:rgba(7,135,152,.12);
    box-shadow:0 0 0 10px rgba(7,135,152,.12)
  }
  .technical-accordion details:has(>summary:hover){
    border-bottom-color:var(--fw-brand)
  }
}
@media (prefers-reduced-motion:reduce){
  .technical-accordion summary:hover>span:first-child,.technical-accordion summary:focus-visible>span:first-child{
    transform:none
  }
}
.accordion-body{
  padding:0 34px 26px 0
}
.accordion-body p{
  color:var(--fw-muted);
  font-size:24px;
  line-height:1.5
}
.process-timeline{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin:50px 0 0
}
.process-timeline li{
  position:relative;
  padding:32px 20px 0 0;
  border-top:1px solid var(--fw-line)
}
.process-number{
  position:absolute;
  top:-16px;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:var(--fw-paper);
  border:1px solid var(--fw-brand-dark);
  color:var(--fw-brand-dark);
  font-size:18px
}
/* Entrada escalonada de los hijos de [data-entrada] (tarjetas, capacidades, fotos de la secuencia, casos) cuando el
   contenedor entra en pantalla. site.js lo arma (.is-armed) y lo revela (.is-visible); sin eso todo se ve desde el inicio.
   La animación no deja nada puesto al terminar, así que no interfiere con los efectos al pasar el cursor. */
[data-entrada].is-armed:not(.is-visible)>*{
  opacity:0
}
[data-entrada].is-armed.is-visible>*{
  animation:fw-entrada 480ms ease backwards;
  animation-delay:calc(var(--paso,0) * var(--ritmo,130ms))
}
[data-entrada]>:nth-child(2){
  --paso:1
}
[data-entrada]>:nth-child(3){
  --paso:2
}
[data-entrada]>:nth-child(4){
  --paso:3
}
.sequence-grid{
  --ritmo:260ms
}
@keyframes fw-entrada{
  from{
    opacity:0;
    transform:translateY(20px)
  }
}
/* Si se llega desde abajo, lo que asoma primero es el final de la lista: nadie espera su turno. */
.sin-secuencia>*,.sin-secuencia li,.sin-secuencia li:after,.sin-secuencia details{
  animation-delay:0s!important;
  transition-delay:0s!important
}
@media (prefers-reduced-motion:reduce){
  [data-entrada].is-armed:not(.is-visible)>*{
    opacity:1
  }
  [data-entrada].is-armed.is-visible>*{
    animation:none
  }
}
@media print{
  [data-entrada].is-armed:not(.is-visible)>*{
    opacity:1
  }
}
/* Los cuatro criterios técnicos entran desde la derecha, uno tras otro, cuando la lista entra en pantalla. */
.technical-accordion.is-armed details{
  opacity:0;
  transform:translateX(34px)
}
.technical-accordion.is-armed.is-visible details{
  opacity:1;
  transform:none;
  transition:opacity 480ms ease,transform 480ms ease;
  transition-delay:calc(var(--paso,0) * 170ms)
}
@media (prefers-reduced-motion:reduce){
  .technical-accordion.is-armed details,.technical-accordion.is-armed.is-visible details{
    opacity:1;
    transform:none;
    transition:none
  }
}
@media print{
  .technical-accordion.is-armed details{
    opacity:1;
    transform:none
  }
}
/* Los pasos del proceso aparecen uno tras otro cuando la sección entra en pantalla (site.js pone .is-visible).
   Sin JavaScript, con movimiento reducido o al imprimir se ven todos desde el inicio. */
.process-number{
  z-index:1
}
.process-timeline li:after{
  content:'';
  position:absolute;
  top:-2px;
  left:0;
  width:100%;
  height:3px;
  background:var(--fw-brand);
  transform:scaleX(0);
  transform-origin:left
}
.process-timeline.is-armed li{
  opacity:0;
  transform:translateY(18px)
}
.process-timeline.is-armed.is-visible li{
  opacity:1;
  transform:none;
  transition:opacity 520ms ease,transform 520ms ease;
  transition-delay:calc(var(--paso,0) * 260ms)
}
.process-timeline.is-armed.is-visible li:after{
  transform:scaleX(1);
  transition:transform 520ms ease;
  transition-delay:calc(var(--paso,0) * 260ms + 120ms)
}
@media (prefers-reduced-motion:reduce){
  .process-timeline.is-armed li,.process-timeline.is-armed.is-visible li{
    opacity:1;
    transform:none;
    transition:none
  }
  .process-timeline li:after{
    display:none
  }
}
@media print{
  .process-timeline.is-armed li{
    opacity:1;
    transform:none
  }
  .process-timeline li:after{
    display:none
  }
}
.process-timeline h3{
  font-size:24px;
  line-height:1.3;
  margin:11px 0 13px;
  max-width:155px;
  letter-spacing:-.02em
}
.process-timeline p{
  font-size:23px;
  color:var(--fw-muted);
  max-width:150px;
  line-height:1.45
}
.magazines-section{
  background:var(--fw-editorial)
}
.magazines-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.magazine-card{
  display:flex;
  flex-direction:column;
  padding:32px;
  background:var(--fw-paper);
  border:1px solid var(--fw-line);
  border-top:3px solid var(--fw-line)
}
.magazine-available{
  border-top-color:var(--fw-brand-dark)
}
.magazine-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:32px
}
.magazine-number{
  color:var(--fw-brand-dark);
  font-size:20px;
  font-variant-numeric:tabular-nums
}
.magazine-status{
  padding:4px 10px;
  background:var(--fw-surface);
  color:var(--fw-muted);
  font-size:18px
}
.magazine-available .magazine-status{
  color:var(--fw-brand-dark)
}
.magazine-card h3{
  font-size:clamp(28px,2.1vw,34px);
  line-height:1.2;
  margin-bottom:20px
}
.magazine-description{
  color:var(--fw-muted);
  font-size:23px;
  line-height:1.5;
  margin-bottom:30px
}
.magazine-bottom{
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid var(--fw-line)
}
.magazine-meta,.magazine-pending{
  font-size:19px;
  color:var(--fw-muted)
}
.magazine-download{
  width:100%;
  margin-top:14px;
  padding:14px 18px;
  gap:12px;
  font-size:23px
}
@media(max-width:1100px) and (min-width:761px){
  .magazines-grid{gap:16px}
  .magazine-card{padding:22px}
  .magazine-description{font-size:21px}
  .magazine-download{font-size:21px;padding:12px}
}
@media(max-width:760px){
  .magazines-grid{grid-template-columns:1fr;gap:20px}
  .magazine-card{padding:26px}
  .magazine-top{margin-bottom:24px}
}
.contact-section{
  padding:64px 0;
  background:var(--fw-ink);
  color:var(--fw-paper)
}
.contact-grid{
  display:grid;
  grid-template-columns:.98fr 1.02fr;
  gap:90px;
  align-items:start
}
.contact-copy{
  position:sticky;
  top:170px
}
.contact-copy .eyebrow{
  color:var(--fw-brand-light)
}
.contact-copy h2{
  font-size:clamp(50px,3.7vw,73px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.045em
}
.contact-lead{
  font-size:29px;
  line-height:1.45;
  color:var(--fw-line);
  margin-top:30px;
  max-width:390px
}
.contact-direct{
  border-top:1px solid var(--fw-muted);
  margin-top:42px;
  padding-top:24px
}
.contact-direct>span{
  font-size:16px;
  letter-spacing:.12em;
  color:var(--fw-brand-light);
  display:block;
  margin-bottom:18px
}
.contact-direct>a{
  font-size:33px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:7px;
  min-height:44px;
  max-width:395px
}
.contact-direct>a:hover{
  text-decoration:underline
}
.contact-direct .arrow{
  width:20px;
  color:var(--fw-brand-light)
}
.contact-direct p{
  font-size:21px;
  color:var(--fw-line);
  margin-top:17px
}
.contact-note{
  margin-top:38px;
  font-size:21px;
  color:var(--fw-line);
  line-height:1.6
}
.form-panel{
  background:var(--fw-paper);
  color:var(--fw-ink);
  padding:38px;
  border-top:4px solid var(--fw-brand)
}
.form-panel h3{
  font-size:35px;
  letter-spacing:-.035em;
  line-height:1.2
}
.form-intro{
  font-size:23px;
  color:var(--fw-muted);
  margin:12px 0 28px
}
.field{
  margin-bottom:19px
}
.field label{
  font-weight:700;
  font-size:23px;
  display:block;
  margin-bottom:7px
}
.field label>span:not(.optional){
  color:var(--fw-brand-dark)
}
.field input,.field textarea{
  display:block;
  width:100%;
  border:1px solid var(--fw-muted);
  border-radius:var(--fw-radius);
  padding:11px 13px;
  background:var(--fw-paper);
  color:var(--fw-ink);
  line-height:1.4;
  min-height:48px;
  font-size:24px
}
.field textarea{
  resize:vertical
}
.field input::placeholder,.field textarea::placeholder{
  color:var(--fw-muted);
  opacity:1
}
.form-panel :focus-visible{
  outline-color:var(--fw-brand-dark)
}
.field-help{
  font-size:19px;
  color:var(--fw-muted);
  margin-top:5px
}
.field-error{
  color:var(--fw-danger);
  font-size:20px;
  margin-top:5px
}
.field [aria-invalid=true]{
  border:2px solid var(--fw-danger)
}
.form-errors{
  border-left:3px solid var(--fw-danger);
  padding:12px 16px;
  background:var(--fw-surface);
  color:var(--fw-danger);
  font-size:21px;
  margin-bottom:20px
}
.form-errors ul{
  padding-left:20px;
  margin:5px 0 0
}
.form-errors a{
  display:inline-flex;
  padding:3px 0
}
.extra-details{
  margin:20px 0 24px;
  border-top:1px solid var(--fw-line);
  border-bottom:1px solid var(--fw-line)
}
.extra-details>summary{
  padding:18px 0;
  cursor:pointer;
  font-size:23px;
  font-weight:700;
  min-height:48px
}
.extra-details>summary>span{
  font-weight:400;
  font-size:19px;
  color:var(--fw-muted);
  margin-left:8px
}
.extra-details>div{
  padding-top:8px
}
.files-choice{
  border:0;
  padding:18px 0 4px;
  margin:20px 0 20px;
  border-top:1px solid var(--fw-line);
  min-width:0
}
.files-choice legend{
  float:left;
  width:100%;
  padding:0;
  margin-bottom:8px;
  font-weight:700;
  font-size:23px;
  line-height:1.3
}
.files-radio{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.files-option{
  clear:both;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:48px;
  font-size:23px;
  cursor:pointer
}
.files-option:before{
  content:'';
  flex:none;
  box-sizing:border-box;
  width:28px;
  height:28px;
  border:1.5px solid var(--fw-muted);
  border-radius:50%;
  background:var(--fw-paper)
}
.files-radio:checked+.files-option:before{
  border:9px solid var(--fw-brand-dark)
}
.files-radio:focus-visible+.files-option{
  outline:3px solid var(--fw-brand-dark);
  outline-offset:3px
}
.files-panel{
  display:none;
  padding-top:14px
}
#files-si:checked~.files-panel{
  display:block
}
.files-panel .attachment-note{
  margin-bottom:20px
}
.optional{
  font-weight:400;
  font-size:19px;
  color:var(--fw-muted)
}
.file-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  font-size:20px;
  overflow-wrap:anywhere
}
.file-list li{
  padding:3px 0
}
.file-list li span{
  color:var(--fw-muted)
}
.file-clear{
  margin-top:8px;
  min-height:48px;
  padding:8px 16px;
  border:1px solid var(--fw-muted);
  border-radius:var(--fw-radius);
  background:transparent;
  color:var(--fw-ink);
  font:inherit;
  font-size:20px
}
.attachment-note{
  display:flex;
  gap:11px;
  align-items:flex-start;
  color:var(--fw-muted);
  font-size:20px;
  line-height:1.4;
  margin-bottom:24px
}
.attachment-note>svg{
  flex-shrink:0
}
.attachment-note>span{
  min-width:0
}
.attachment-note a{
  overflow-wrap:anywhere
}
.form-submit{
  width:100%
}
.form-explainer{
  font-size:19px;
  color:var(--fw-muted);
  line-height:1.5;
  margin-top:13px
}
.form-explainer a{
  color:var(--fw-brand-dark)
}
.honeypot{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}
.selected-interest{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--fw-surface);
  border-left:3px solid var(--fw-brand);
  font-size:20px;
  margin-bottom:24px
}
.selected-interest button{
  border:0;
  background:transparent;
  color:var(--fw-brand-dark);
  width:36px;
  height:36px;
  font-size:34px;
  flex-shrink:0
}
.form-result{
  border-top:1px solid var(--fw-line);
  padding-top:24px;
  margin-top:24px
}
.form-result h4{
  font:600 33px/1.2 var(--fw-font-heading);
  margin:0 0 12px
}
.form-result p{
  font-size:23px;
  color:var(--fw-muted);
  margin-bottom:14px
}
.form-result textarea{
  width:100%;
  min-height:230px;
  font:21px/1.5 var(--fw-font-body);
  padding:12px;
  background:var(--fw-surface);
  border:1px solid var(--fw-line);
  resize:vertical;
  color:var(--fw-ink);
  margin-bottom:16px
}
.result-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.result-actions .button{
  font-size:23px;
  padding:12px 16px;
  gap:10px
}
.edit-button{
  margin-top:16px;
  background:transparent;
  border:0;
  color:var(--fw-brand-dark);
  padding:8px 0;
  font-size:21px;
  text-decoration:underline;
  min-height:44px
}
.site-footer{
  background:var(--fw-ink);
  color:var(--fw-paper);
  padding:48px 0 24px;
  border-top:1px solid var(--fw-muted)
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);
  gap:58px;
  align-items:start;
  padding-bottom:42px
}
.footer-brand img{
  width:420px;
  max-width:100%;
  height:auto
}
.footer-label{
  font-size:18px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--fw-brand-light);
  margin-bottom:16px
}
.footer-main p:not(.footer-label){
  font-size:20px;
  line-height:1.6;
  color:var(--fw-line);
  margin-bottom:7px
}
.footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px
}
.footer-links a{
  font-size:20px;
  text-decoration:none;
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px
}
.footer-links a:hover{
  text-decoration:underline
}
.footer-links .arrow{
  width:16px;
  height:16px
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--fw-muted);
  padding-top:21px;
  font-size:18px;
  color:var(--fw-line)
}
.footer-bottom a{
  color:var(--fw-paper);
  text-decoration:none
}
.mobile-contact{
  display:none
}
.privacy-main{
  padding:80px 0 100px;
  background:var(--fw-editorial)
}
.prose{
  max-width:800px
}
.prose h1{
  font-size:clamp(50px,4vw,73px);
  font-weight:800;
  margin-bottom:30px
}
.prose .prose-lead{
  font-size:33px;
  line-height:1.45
}
.prose h2{
  font-size:35px;
  margin:40px 0 16px
}
.prose p{
  color:var(--fw-muted);
  margin-bottom:20px
}
.prose a:not(.button){
  color:var(--fw-brand-dark)
}
.privacy-date{
  font-size:20px;
  margin-top:36px
}
@media(min-width:1600px){
  .hero{
    padding-top:58px
  }
  .hero-grid{
    gap:70px
  }
  .hero h1{
    font-size:93px
  }
}
@media(max-width:1280px) and (min-width:1101px){
  .header-inner{
    gap:36px
  }
  .brand .logo-full{
    width:400px
  }
  .main-nav{
    gap:24px
  }
  .main-nav>a{
    font-size:20px
  }
  .main-nav .nav-cta{
    padding-left:20px;
    gap:10px
  }
}
@media(max-width:1100px){
  .header-inner{
    gap:28px;
    min-height:130px
  }
  .brand .logo-full{
    width:360px
  }
  .main-nav{
    gap:20px
  }
  .main-nav>a{
    font-size:21px
  }
  .main-nav .nav-cta{
    border-left:0;
    padding-left:0;
    gap:8px
  }
  .main-nav>a:not(.nav-cta){
    display:none
  }
  .hero-grid{
    gap:36px
  }
  .hero-intro{
    font-size:30px
  }
  .hero-description{
    font-size:24px
  }
  .hero-figure{
    aspect-ratio:4/5.2
  }
  .hero-eyebrow{
    font-size:15px;
    gap:8px
  }
  .hero-eyebrow .brand-rule{
    width:20px
  }
  .need-card{
    padding-inline:20px
  }
  .project-case{
    gap:40px
  }
  .technical-grid{
    gap:48px
  }
  .contact-grid{
    gap:46px
  }
  .form-panel{
    padding:30px
  }
  .footer-main{
    gap:30px
  }
  .footer-brand img{
    width:340px
  }
  .proof-strip{
    gap:22px
  }
  .proof-strip>div{
    padding-left:22px
  }
  .proof-strip strong{
    font-size:21px
  }
  .proof-experience>strong{
    font-size:43px
  }
  .contact-direct>a{
    font-size:29px
  }
  .case-copy h3{
    font-size:39px
  }
  .process-timeline h3{
    font-size:21px
  }
  /* Seis columnas no caben bajo 1100 px: el texto desbordaba la página a 768 px. */
  .process-timeline{
    grid-template-columns:repeat(3,1fr);
    row-gap:44px
  }
}
@media(min-width:761px) and (max-width:960px){
  .main-nav>a:not(.nav-cta){
    display:none
  }
  .main-nav .nav-cta{
    border-left:0;
    padding-left:0
  }
}
@media(max-width:900px){
  .main-nav>a:not(.nav-cta){
    display:none
  }
  .main-nav .nav-cta{
    border-left:0;
    padding-left:0
  }
  .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:26px
  }
  .hero h1{
    font-size:clamp(50px,4.9vw,61px)
  }
  .hero-intro{
    font-size:28px
  }
  .hero-figure{
    min-height:550px;
    aspect-ratio:auto;
    height:100%
  }
  .hero-copy{
    padding:12px 0
  }
  .hero-eyebrow{
    letter-spacing:.07em
  }
  .hero-eyebrow .brand-rule{
    display:none
  }
  .hero .button{
    min-width:0
  }
  .need-card h3{
    font-size:25px
  }
  .need-card p{
    font-size:23px
  }
  .proof-strip{
    grid-template-columns:1fr 1fr
  }
  .proof-strip>div:last-child{
    display:none
  }
  .heading-row{
    gap:32px
  }
  .heading-row>p{
    font-size:24px;
    max-width:300px
  }
  .capability-list{
    gap:22px
  }
  .capability h3{
    font-size:23px
  }
  .capability p{
    font-size:20px
  }
  .project-case{
    grid-template-columns:1.1fr 1fr;
    gap:32px
  }
  .project-photo{
    aspect-ratio:3/4
  }
  .case-copy h3{
    font-size:38px
  }
  .case-copy dd{
    font-size:23px
  }
  .project-golden{
    grid-template-columns:1fr 1fr
  }
  .golden-section .project-photo{
    aspect-ratio:3/4
  }
  .technical-grid{
    grid-template-columns:1fr 1fr;
    gap:36px
  }
  .technical-accordion summary{
    font-size:24px;
    gap:13px
  }
  .technical-copy .text-link{
    font-size:21px
  }
  .contact-grid{
    gap:32px
  }
  .contact-copy h2{
    font-size:51px
  }
  .contact-lead{
    font-size:26px
  }
  .contact-direct>a{
    font-size:25px
  }
  .contact-direct p{
    font-size:19px
  }
  .contact-note{
    font-size:20px
  }
  .form-panel{
    padding:25px
  }
  .form-panel h3{
    font-size:30px
  }
  .footer-main{
    grid-template-columns:1fr 1fr
  }
  .footer-links{
    grid-column:2
  }
  .footer-brand{
    grid-row:span 2
  }
  .footer-brand img{
    width:350px
  }
}
/* Entre 761 y 1100 px los enlaces no caben junto al logo: van en un menú desplegable y queda a la vista «Evaluar proyecto».
   Antes desaparecían sin botón que los reemplazara. Sin JavaScript se muestran todos, en dos filas. */
@media(min-width:761px) and (max-width:1100px){
  html:not(.js) .header-inner{
    flex-wrap:wrap
  }
  html:not(.js) .main-nav>a:not(.nav-cta){
    display:inline-flex
  }
  .js .menu-toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:44px;
    height:44px;
    margin-left:auto;
    border:1px solid var(--fw-line);
    background:transparent;
    padding:10px
  }
  .menu-toggle>span{
    display:block;
    width:20px;
    height:1px;
    background:var(--fw-ink);
    transition:transform 160ms
  }
  .menu-toggle[aria-expanded=true]>span:first-child{
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true]>span:last-child{
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .js .main-nav.is-open{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 32px 22px;
    background:var(--fw-paper);
    border-bottom:1px solid var(--fw-line);
    box-shadow:0 10px 16px #1b20230a
  }
  .js .main-nav.is-open>a:not(.nav-cta){
    display:inline-flex;
    min-height:48px;
    font-size:25px
  }
  .js .main-nav.is-open .nav-cta{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--fw-line);
    font-size:25px;
    gap:12px
  }
}
@media(max-width:760px){
  html{
    scroll-padding-top:124px
  }
  .container{
    width:calc(100% - 32px)
  }
  .section{
    padding:48px 0
  }
  .header-inner{
    min-height:114px;
    gap:16px;
    position:relative
  }
  .brand .logo-full{
    display:none
  }
  .brand .logo-compact{
    display:block;
    width:min(270px,calc(100vw - 108px));
    height:auto
  }
  .menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:1px solid var(--fw-line);
    background:transparent;
    padding:10px
  }
  .js .menu-toggle{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px
  }
  .menu-toggle>span{
    display:block;
    width:20px;
    height:1px;
    background:var(--fw-ink);
    transition:transform 160ms
  }
  .menu-toggle[aria-expanded=true]>span:first-child{
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true]>span:last-child{
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .main-nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    padding:12px 0
  }
  .main-nav>a:not(.nav-cta){
    display:inline-flex
  }
  .header-inner:has(.main-nav){
    flex-wrap:wrap
  }
  .js .main-nav{
    position:absolute;
    left:-16px;
    right:-16px;
    top:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 24px 22px;
    background:var(--fw-paper);
    border-bottom:1px solid var(--fw-line);
    box-shadow:0 10px 16px #1b20230a
  }
  .js .main-nav.is-open{
    display:flex
  }
  .main-nav>a{
    min-height:48px;
    font-size:25px
  }
  .main-nav .nav-cta{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--fw-line);
    gap:12px
  }
  .eyebrow{
    font-size:16px;
    margin-bottom:22px;
    gap:12px
  }
  .hero{
    padding-top:31px
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap:32px
  }
  .hero-copy{
    padding:0
  }
  .hero-eyebrow{
    font-size:15px;
    letter-spacing:.1em;
    margin-bottom:25px
  }
  .hero-eyebrow .brand-rule{
    display:block;
    width:24px
  }
  .hero h1{
    font-size:clamp(53px,10.7vw,80px);
    line-height:1.08;
    letter-spacing:-.048em
  }
  .hero-intro{
    font-size:30px;
    margin-top:24px;
    max-width:430px
  }
  .hero-description{
    font-size:24px;
    max-width:450px;
    margin:15px 0 23px
  }
  .hero .button{
    min-width:237px
  }
  .hero-microcopy{
    max-width:330px;
    font-size:20px;
    margin-top:12px
  }
  .hero-secondary{
    margin-top:10px;
    font-size:20px
  }
  .hero-figure{
    height:auto;
    min-height:0;
    aspect-ratio:4/4.1;
    max-height:530px
  }
  .hero-image{
    height:100%
  }
  .hero-figure figcaption{
    padding:17px 20px;
    font-size:23px
  }
  .photo-label{
    left:17px;
    top:17px;
    font-size:14px
  }
  .proof-strip{
    margin-top:27px;
    gap:24px;
    padding:25px 0;
    grid-template-columns:1.1fr 1fr
  }
  .proof-strip>div{
    padding-left:20px
  }
  .proof-strip .proof-experience{
    gap:12px
  }
  .proof-experience>strong{
    font-size:45px
  }
  .proof-experience>strong>span{
    font-size:18px
  }
  .proof-strip p{
    font-size:18px;
    line-height:1.4
  }
  .proof-strip strong{
    font-size:20px;
    line-height:1.35
  }
  .proof-strip .proof-experience>strong{
    font-size:45px;
    line-height:1
  }
  .proof-strip>div:last-child{
    display:none
  }
  .heading-row{
    display:block;
    margin-bottom:32px
  }
  .heading-row h2{
    font-size:45px;
    line-height:1.15
  }
  .heading-row>p{
    font-size:24px;
    margin-top:20px;
    max-width:470px
  }
  .needs-grid{
    grid-template-columns:1fr 1fr;
    border-bottom:0
  }
  .need-card,.need-card:first-child,.need-card:last-child{
    padding:23px 19px;
    border-bottom:1px solid var(--fw-line);
    border-left:0
  }
  .need-card:nth-child(even){
    border-left:1px solid var(--fw-line)
  }
  .need-card:nth-child(odd){
    padding-left:0
  }
  .need-card:nth-child(even){
    padding-right:0
  }
  .need-top{
    margin-bottom:24px
  }
  .need-top img{
    width:27px;
    height:27px
  }
  .need-card h3{
    font-size:25px;
    line-height:1.25
  }
  .need-card p{
    font-size:23px
  }
  .card-arrow{
    padding-top:18px
  }
  .capability-list{
    grid-template-columns:1fr;
    padding-top:23px;
    padding-bottom:28px;
    gap:24px
  }
  .capability h3{
    font-size:24px
  }
  .capability p{
    font-size:20px
  }
  .sequence-grid{
    grid-template-columns:1fr;
    gap:28px
  }
  .sequence-photo{
    aspect-ratio:4/3
  }
  .sequence-stage figcaption{
    padding-top:18px
  }
  .sequence-stage h3{
    font-size:30px
  }
  .sequence-stage figcaption .arrow{
    transform:rotate(90deg)
  }
  .sequence-note{
    font-size:18px;
    margin-top:22px
  }
  .project-case,.project-golden{
    grid-template-columns:1fr;
    gap:32px
  }
  .project-photo{
    aspect-ratio:4/3
  }
  .project-photo figcaption{
    font-size:14px;
    padding:12px 14px
  }
  .case-copy .eyebrow{
    font-size:15px;
    margin-bottom:15px
  }
  .case-copy h3{
    font-size:43px
  }
  .case-copy dl{
    margin:24px 0 14px
  }
  .case-copy dl>div{
    margin-top:18px
  }
  .case-copy dd{
    font-size:24px
  }
  .case-copy .text-link{
    font-size:23px
  }
  .golden-section{
    padding:48px 0
  }
  .golden-section .case-copy{
    max-width:none
  }
  .golden-section .project-photo{
    aspect-ratio:4/3
  }
  .golden-section h3{
    font-size:45px
  }
  .project-golden .case-copy{
    order:1
  }
  .project-golden .project-photo{
    order:0
  }
  .technical-grid{
    grid-template-columns:1fr;
    gap:30px
  }
  .technical-copy h2{
    font-size:45px
  }
  .technical-copy>p:not(.eyebrow){
    margin:20px 0 13px;
    max-width:460px
  }
  .technical-copy .text-link{
    font-size:23px
  }
  .technical-accordion summary{
    min-height:80px;
    font-size:25px;
    gap:16px
  }
  .accordion-body{
    padding-left:0;
    padding-right:24px
  }
  .process-timeline{
    grid-template-columns:1fr;
    margin-top:38px;
    padding-left:16px
  }
  .process-timeline li{
    border-top:0;
    border-left:1px solid var(--fw-line);
    padding:0 0 27px 33px;
    min-height:98px
  }
  /* Aquí el riel es vertical: la línea de avance baja por él en vez de cruzar cada paso. */
  .process-timeline li:after{
    top:0;
    left:-2px;
    width:3px;
    height:100%;
    transform:scaleY(0);
    transform-origin:top
  }
  .process-timeline.is-armed.is-visible li:after{
    transform:scaleY(1)
  }
  .process-timeline li:last-child:after{
    display:none
  }
  .process-number{
    left:-16px;
    top:0
  }
  .process-timeline h3{
    font-size:26px;
    max-width:none;
    margin:1px 0 7px
  }
  .process-timeline p{
    max-width:320px;
    font-size:24px
  }
  .process-timeline li:last-child{
    padding-bottom:0;
    border-left-color:transparent;
    min-height:0
  }
  .contact-section{
    padding:48px 0
  }
  .contact-grid{
    grid-template-columns:1fr;
    gap:38px
  }
  .contact-copy{
    position:static
  }
  .contact-copy h2{
    font-size:55px
  }
  .contact-lead{
    font-size:28px;
    max-width:430px;
    margin-top:23px
  }
  .contact-direct{
    margin-top:30px;
    padding-top:21px
  }
  .contact-direct>span{
    font-size:15px;
    margin-bottom:11px
  }
  .contact-direct>a{
    font-size:33px;
    max-width:425px
  }
  .contact-direct p{
    font-size:20px
  }
  .contact-note{
    display:none
  }
  .form-panel{
    padding:27px 23px
  }
  .form-panel h3{
    font-size:35px
  }
  .form-intro{
    font-size:23px;
    margin-bottom:25px
  }
  .field{
    margin-bottom:19px
  }
  .form-result textarea{
    min-height:260px
  }
  .result-actions{
    flex-direction:column
  }
  .site-footer{
    padding-top:38px;
    padding-bottom:84px
  }
  .footer-main{
    display:block;
    padding-bottom:24px
  }
  .footer-brand{
    display:block;
    width:350px;
    max-width:100%;
    margin-bottom:28px
  }
  .footer-brand img{
    width:350px
  }
  .footer-main>div{
    margin-top:25px
  }
  .footer-label{
    margin-bottom:10px
  }
  .footer-main p:not(.footer-label){
    font-size:20px
  }
  .footer-links{
    gap:0
  }
  .footer-links a{
    min-height:40px
  }
  .footer-bottom{
    flex-wrap:wrap;
    gap:12px 20px;
    font-size:18px
  }
  .footer-bottom>span:nth-child(2){
    display:none
  }
  .footer-bottom>a{
    margin-left:auto;
    min-height:28px
  }
  .mobile-contact{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:40;
    display:flex;
    background:var(--fw-brand-dark);
    color:var(--fw-paper);
    padding-bottom:env(safe-area-inset-bottom);
    transition:transform 160ms
  }
  .mobile-contact>a:first-child{
    flex:1;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    text-decoration:none;
    font-size:24px;
    font-weight:700
  }
  .mobile-contact>a:last-child{
    width:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:1px solid var(--fw-brand-light)
  }
  .mobile-contact.is-hidden{
    transform:translateY(110%);
    visibility:hidden
  }
  .mobile-contact :focus-visible{
    outline-color:var(--fw-paper);
    outline-offset:-5px
  }
  .privacy-main{
    padding:48px 0 64px
  }
  .prose h1{
    font-size:50px
  }
  .prose .prose-lead{
    font-size:29px
  }
  .prose h2{
    font-size:34px
  }
}
@media(max-width:600px){
  .needs-grid{
    grid-template-columns:1fr
  }
  .need-card,.need-card:first-child,.need-card:last-child,.need-card:nth-child(even),.need-card:nth-child(odd){
    padding:22px 0;
    border-left:0
  }
  .need-card h3{
    max-width:none
  }
}
@media(max-width:360px){
  .brand .logo-compact{
    width:calc(100vw - 108px)
  }
  .hero-eyebrow{
    font-size:14px;
    letter-spacing:.065em;
    gap:8px
  }
  .hero h1{
    font-size:50px
  }
  .hero-intro{
    font-size:28px
  }
  .proof-strip{
    gap:12px
  }
  .proof-strip>div{
    padding-left:12px
  }
  .proof-strip .proof-experience{
    gap:8px
  }
  .need-card h3{
    font-size:24px
  }
  .need-card p{
    font-size:21px
  }
  .form-panel{
    padding:23px 17px
  }
  .contact-copy h2{
    font-size:50px
  }
  .contact-direct>a{
    font-size:28px
  }
  .mobile-contact>a:first-child{
    gap:16px
  }
  .heading-row h2,.technical-copy h2{
    font-size:40px
  }
  .technical-copy .text-link{
    font-size:21px;
    gap:8px
  }
}
/* Con el espaciado de texto de WCAG 1.4.12 (letras y palabras más separadas) estas rejillas se ensanchaban hasta su palabra
   más larga y la página desbordaba: las columnas pueden encogerse y una palabra que no cabe en su línea se parte.
   break-word y no anywhere: anywhere también achica el ancho mínimo y partía «+20 años» letra a letra. */
.proof-strip>*,.contact-grid>*{
  min-width:0;
  overflow-wrap:break-word
}
/* Entre 761 y 960 px las cuatro tarjetas de «¿Qué necesita resolver?» medían unos 160 px: en dos columnas, como en el
   teléfono, caben sus palabras también con el espaciado de texto ampliado. */
@media(min-width:761px) and (max-width:960px){
  .needs-grid{
    grid-template-columns:1fr 1fr;
    border-bottom:0
  }
  .need-card,.need-card:first-child,.need-card:last-child{
    border-bottom:1px solid var(--fw-line);
    border-left:0;
    padding-left:0
  }
  .need-card:nth-child(even){
    border-left:1px solid var(--fw-line);
    padding-left:26px
  }
}
/* Tarjetas y capacidades: solo en el teléfono (una o dos columnas anchas). En tableta las columnas son angostas y,
   con el espaciado normal, «Integración» o «Metalmecánica» se partían; ahí cada columna se ensancha hasta su palabra. */
@media(max-width:760px){
  .needs-grid>*,.capability-list>*{
    min-width:0;
    overflow-wrap:break-word
  }
}
/* El correo del contacto directo es una sola «palabra» larga: con el espaciado ampliado puede partirse en vez de desbordar. */
.contact-direct>a{
  overflow-wrap:anywhere
}
/* Teléfono: los datos de la banda «+20 años» se apilan a ancho completo (en dos columnas el texto quedaba en ~85 px). */
@media(max-width:600px){
  .proof-strip{
    grid-template-columns:1fr;
    gap:18px
  }
  .proof-strip>div{
    padding-left:0;
    border-left:0
  }
  .proof-strip>div+div{
    border-top:1px solid var(--fw-line);
    padding-top:18px
  }
  .proof-strip .proof-experience>strong{
    font-size:36px
  }
}
/* Solo h1 y h2: en los h3 de las columnas del proceso «Levantamiento» no cabe entero y se partía sin espaciado extra. */
h1,h2{
  overflow-wrap:break-word
}
/* El bloque de contacto acompaña al bajar solo si cabe entero: en pantallas más bajas sus enlaces quedaban fuera de la
   vista al recibir el foco. */
@media(max-height:999px){
  .contact-copy{
    position:static
  }
}
/* Teléfono: la barra inferior (58 px) no debe tapar un enlace que recibe el foco, tampoco los del pie. */
@media(max-width:760px){
  html{
    scroll-padding-bottom:74px
  }
  /* Titulares de sección por debajo del h1 del hero (clamp(32px,9.9vw,44px)). */
  h2,.heading-row h2,.technical-copy h2,.golden-section h3,.contact-copy h2,.case-copy h3,.form-panel h3,.form-result h4{
    font-size:clamp(28px,8.6vw,34px)
  }
  /* Barra de la portada: Evaluar, WhatsApp y Llamar; el texto en una línea aun a 320 px. */
  .mobile-contact>a:nth-child(2):not(:last-child){
    width:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:1px solid var(--fw-brand-light)
  }
  .mobile-contact>a:first-child:not(:nth-last-child(2)){
    padding-inline:12px
  }
  .mobile-contact>a:first-child:nth-last-child(3){
    gap:14px;
    font-size:clamp(18px,5.6vw,22px);
    white-space:nowrap
  }
  .immersive-home .footer-bottom{
    margin-bottom:58px
  }
}
/* Datos bajo las fotos de la secuencia: siempre a la vista (la capa solo aparece al pasar el cursor o enfocar). */
.sequence-stage .stage-facts{
  margin-top:8px;
  font-size:18px;
  line-height:1.4;
  font-weight:700;
  color:var(--fw-brand-dark)
}
/* Bloque «Respaldo»: misma lista que Capacidades, sobre fondo blanco. */
.backing-section{
  background:var(--fw-paper)
}
/* Formulario enviado: queda solo la confirmación (site.js pone .is-sent cuando el proveedor acepta la solicitud). */
.form-panel.is-sent>h3,.is-sent .form-intro,.is-sent .selected-interest{
  display:none
}
.is-sent .form-result{
  border-top:0;
  margin-top:0;
  padding-top:0
}
.form-result a{
  color:var(--fw-brand-dark);
  font-weight:700
}
.form-result a[href^="tel:"]{
  white-space:nowrap
}
/* Con poca altura (zoom de 200 % o más, teléfono apaisado) la cabecera fija y la barra inferior tapaban buena parte de
   la pantalla: la cabecera se va con la página y, si la altura es mínima, la barra inferior no aparece. */
@media(max-height:600px){
  html{
    scroll-padding-top:16px
  }
  .site-header{
    position:relative
  }
}
@media(max-height:420px){
  .mobile-contact{
    display:none!important
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    transition:none!important;
    animation:none!important
  }
}
@media print{
  .site-header,.mobile-contact,.menu-toggle,.form-panel,.hero .button,.hero-secondary,.site-footer{
    display:none
  }
  .container{
    width:100%
  }
  .section,.contact-section,.golden-section{
    padding:24px 0
  }
  .hero{
    padding-top:0
  }
  .hero-grid{
    grid-template-columns:1fr 1fr
  }
  .hero h1{
    font-size:30pt
  }
  .hero-figure{
    max-height:330px;
    min-height:0
  }
  .contact-copy{
    position:static
  }
  .hero-microcopy{
    display:none
  }
  .proof-strip{
    padding:16px 0
  }
  .golden-section,.contact-section{
    background:white;
    color:var(--fw-ink)
  }
  .case-copy dd,.contact-lead,.contact-direct p{
    color:var(--fw-ink)
  }
  .project-case,.sequence-stage,.need-card{
    break-inside:avoid
  }
  body{
    font-size:11pt
  }
  .heading-row h2{
    font-size:24pt
  }
  .site-footer{
    padding-bottom:0
  }
}
/* Controles con contraste propio, también en fondos oscuros. */
.field input,.field textarea{
  border-color:var(--fw-muted)
}
input[type=file]{
  font-size:21px;
  padding:8px;
  max-width:100%
}
input[type=file]::file-selector-button{
  font:700 21px/1.3 var(--fw-font-body);
  padding:10px 12px;
  border:0;
  background:var(--fw-surface);
  color:var(--fw-ink);
  margin-right:10px;
  cursor:pointer
}
.golden-section :focus-visible,.contact-copy :focus-visible,.site-footer :focus-visible{
  outline-color:var(--fw-brand-light)
}