/* Tema B (en evaluación): capa sobre styles.css. Toma de 3co.com.au lo que Harry señaló
   (fotos a lo ancho con el título encima, proyectos en tarjeta con nombre grande, mosaicos,
   columnas de color y aparición al hacer scroll) con la tipografía, colores y detalle de A. */
.theme-b{--teal-1:#087c86;--teal-2:#076f79;--teal-3:#075e66;--teal-4:#06535a;--bar:96px;scroll-padding-top:calc(var(--bar) + 16px)}

/* Aparición al hacer scroll: más corta y suave que el fade-up de 3co (40 px, 0.9 s, una vez). */
.reveal-ready [data-reveal]{opacity:0;transform:translate3d(0,40px,0);transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1)}
.reveal-ready [data-reveal].is-revealed{opacity:1;transform:none}

/* Barra fija translúcida sobre las fotos (3co) con el menú visible en escritorio (A). */
.theme-b .site-header{position:fixed;top:0;left:0;right:0;z-index:40;width:auto;max-width:none;min-height:var(--bar);margin:0;padding-inline:max(var(--gutter),calc((100% - 1472px)/2));border-bottom:1px solid rgba(203,208,209,.55);background:rgba(245,246,245,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.theme-b .site-header .brand-logo{width:92px}
.theme-b .site-footer{position:relative}

/* Encabezado de página sobre foto */
.page-banner{position:relative;display:flex;align-items:flex-end;min-height:clamp(460px,64vh,660px);overflow:hidden;background:#2b3133;color:#fff}
.page-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,24,.18) 0%,rgba(15,23,24,.22) 40%,rgba(15,23,24,.74) 100%)}
.page-banner-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:end;padding:calc(var(--bar) + 60px) 0 56px}
.page-banner .location-label{color:#dbe3e4}
.page-banner h1{font-size:clamp(46px,6vw,96px);color:#fff}
.page-banner-intro{font-size:14px;line-height:1.7;color:#e7eded}
.page-banner-intro .line-link{margin-top:14px;color:#fff}
.page-banner .hero-note{color:#c9d3d4}

/* Inicio: carrusel con fundido lento y pie de foto que lleva al proyecto */
.hero-slides{position:relative;height:92vh;min-height:560px;overflow:hidden;background:#2b3133;color:#fff}
/* La foto nueva aparece encima de la anterior (que sigue visible debajo) para que no se oscurezca. */
.hero-slides .slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 0s linear 1.4s}
.hero-slides .slide.is-active{z-index:2;opacity:1;visibility:visible;transition:opacity 1.4s ease}
.hero-slides .slide.is-leaving{z-index:1;opacity:1;visibility:visible;transition:none}
.hero-slides figcaption{opacity:0;transition:opacity .4s ease}
.hero-slides .is-active figcaption{opacity:1;transition:opacity .9s ease .7s}
.hero-slides img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 7s ease-out}
.hero-slides .is-active img{transform:none}
.hero-slides figcaption{position:absolute;left:0;right:0;bottom:0;padding:120px 0 64px;background:linear-gradient(transparent,rgba(15,23,24,.72))}
.hero-slides figcaption a{display:block}
.slide-title{display:block;font:clamp(24px,2.4vw,34px)/1.25 var(--display);letter-spacing:-.02em}
.slide-text{display:block;margin-top:6px;font-size:13px;color:#e3e9ea}
.hero-slides .project-link{display:inline-flex;gap:30px;margin-top:16px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.65);font-size:13px}
.hero-slides a:hover .project-link{border-color:var(--blue)}
.hero-slides small{display:block;margin-top:14px;font-size:10px;color:#d6dedf}
.slide-dots{position:absolute;z-index:2;right:max(var(--gutter),calc((100% - 1472px)/2));bottom:68px;display:flex;gap:14px}
.slide-dots button{width:12px;height:12px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent}
.slide-dots button[aria-current=true]{background:#fff}

/* Frase central (bloque de bienvenida de 3co, en serif) */
.statement{max-width:1020px;text-align:center}
.statement h1{margin-top:20px;font-size:clamp(46px,6.4vw,104px)}
.statement-copy{max-width:660px;margin:36px auto 0;color:var(--muted);font-size:15px;line-height:1.9}
.statement .line-link{margin-top:30px}

/* Mosaicos de especialidades */
.specialities .section-heading{margin-bottom:40px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tile{position:relative;display:block;aspect-ratio:4/3.2;overflow:hidden;background:var(--teal-3);color:#fff}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.tile:not(.tile-solid)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,24,.08) 20%,rgba(15,23,24,.8));transition:background .5s ease}
.tile-copy{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(22px,2.4vw,36px)}
.tile-title{display:block;font:clamp(24px,2.2vw,34px)/1.15 var(--display);letter-spacing:-.03em}
.tile-lead{display:block;max-height:0;margin-top:0;overflow:hidden;opacity:0;font-size:13px;line-height:1.65;color:#e1e8e9;transition:max-height .5s ease,opacity .5s ease,margin .5s ease}
.tile-more{display:inline-flex;gap:14px;margin-top:14px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.6);font-size:12px}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05)}
.tile:hover .tile-lead,.tile:focus-visible .tile-lead,.tile-solid .tile-lead{max-height:130px;margin-top:12px;opacity:1}
.tile-solid .tile-copy{top:0;display:flex;flex-direction:column;justify-content:flex-end}
.tiles-more{padding-top:36px}

/* Cita */
.quote{padding-block:clamp(76px,8.5vw,136px);text-align:center}
.quote blockquote{max-width:940px;margin:0 auto}
.quote p{font:clamp(28px,3.4vw,50px)/1.25 var(--display);letter-spacing:-.03em}
.quote cite{display:block;margin-top:30px;font-size:13px;font-style:normal;color:var(--muted)}
.quote cite strong{display:block;margin-bottom:2px;font-size:15px;font-weight:400;color:var(--ink)}

/* Columnas de color (como "Our core values" de 3co), en turquesas de la marca */
.values-section{padding-top:clamp(76px,8.5vw,136px)}
.value-cols{display:grid}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.value{display:flex;flex-direction:column;min-height:clamp(260px,24vw,340px);padding:clamp(40px,4.4vw,72px) clamp(24px,2.6vw,44px);background:var(--teal-1);color:#fff}
.cols-4 .value:nth-child(4n+2),.cols-3 .value:nth-child(3n+2){background:var(--teal-2)}
.cols-4 .value:nth-child(4n+3),.cols-3 .value:nth-child(3n+3){background:var(--teal-3)}
.cols-4 .value:nth-child(4n+4){background:var(--teal-4)}
.cols-3 .value:nth-child(n+4){filter:brightness(.92)}
.value-num{padding-bottom:36px;font:44px/1 var(--display);opacity:.85}
.value h3{font:clamp(24px,2.1vw,32px)/1.15 var(--display);letter-spacing:-.03em}
.value p{margin-top:14px;font-size:14px;line-height:1.8;color:rgba(255,255,255,.88)}
.values-section+.contact,.values-section+.approach{margin-top:0}

/* Proyectos: nombre grande encima y tarjeta blanca con foto (3co), con listas legibles (A) */
.rb-list{display:grid;gap:clamp(64px,7vw,104px);margin:0;padding:clamp(56px,6vw,96px) 0 clamp(72px,8vw,128px);list-style:none}
.rb-item{scroll-margin-top:calc(var(--bar) + 20px)}
.rb-title{margin-bottom:22px;font-size:clamp(36px,4.4vw,66px);line-height:1.04;color:var(--teal-3)}
.rb-title a:hover{color:var(--ink)}
.rb-title>span{display:block;margin-top:12px;font:13px/1.5 var(--body);letter-spacing:.01em;color:var(--muted)}
.rb-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);background:#fff;box-shadow:0 34px 60px -40px rgba(41,45,47,.38),0 1px 3px rgba(41,45,47,.06)}
.rb-text{padding:clamp(28px,3vw,48px)}
.rb-text>.register-label:first-child{margin-top:0}
.rb-text .line-link{margin-top:26px}
.rb-media{position:relative;display:block;min-height:clamp(340px,34vw,520px);overflow:hidden;background:#e2e5e4}
.rb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.rb-media:hover img{transform:scale(1.03)}
.rb-card.no-media{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.no-media .register-works{columns:2;column-gap:32px}
.rb-value-col{border-left:1px solid var(--line)}

/* Página de proyecto: tarjeta blanca bajo la foto */
.theme-b .breadcrumb{padding-top:26px}
.theme-b .project-page .project-detail{margin-top:22px;border-top:0;background:#fff;box-shadow:0 34px 60px -40px rgba(41,45,47,.38),0 1px 3px rgba(41,45,47,.06)}
.theme-b .project-page .detail-gallery{padding:24px}
.theme-b .project-page .detail-side{top:calc(var(--bar) + 12px);padding:42px 36px 42px clamp(20px,3vw,48px)}
.theme-b .project-page .detail-head{padding-top:0}
.theme-b .project-page .detail-scope{margin-top:0;font:clamp(22px,2vw,28px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* Contacto: mapa */
.contact-map{margin-bottom:clamp(76px,8.5vw,136px)}
.contact-map iframe{display:block;width:100%;height:420px;border:0}

@media(max-width:1050px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-4,.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-4 .value:nth-child(n),.cols-3 .value:nth-child(n){filter:none;background:var(--teal-1)}
  .cols-4 .value:nth-child(4n+2),.cols-4 .value:nth-child(4n+3),.cols-3 .value:nth-child(4n+2),.cols-3 .value:nth-child(4n+3){background:var(--teal-3)}
  .page-banner-inner{grid-template-columns:1fr 240px}
}
@media(max-width:760px){
  .theme-b{--bar:76px}
  .theme-b .site-header{min-height:var(--bar)}
  .theme-b .site-header .brand-logo{width:70px}
  .page-banner{min-height:440px}
  .page-banner-inner{display:block;padding-bottom:36px}
  .page-banner h1{font-size:clamp(40px,11vw,60px)}
  .page-banner-intro{margin-top:20px;max-width:360px}
  .hero-slides{height:78vh;min-height:480px}
  .hero-slides figcaption{padding:100px 0 72px}
  .slide-dots{left:var(--gutter);right:auto;bottom:32px}
  .statement{text-align:left}
  .statement h1{font-size:clamp(40px,11vw,60px)}
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:auto;min-height:300px}
  .tile .tile-lead{max-height:130px;margin-top:12px;opacity:1}
  .cols-4,.cols-3{grid-template-columns:1fr}
  .cols-4 .value:nth-child(n),.cols-3 .value:nth-child(n){background:var(--teal-1)}
  .cols-4 .value:nth-child(even),.cols-3 .value:nth-child(even){background:var(--teal-3)}
  .value{min-height:0}
  .value-num{padding-bottom:28px}
  .rb-title{font-size:32px}
  .rb-card,.rb-card.no-media{grid-template-columns:1fr}
  .rb-media{order:-1;min-height:0;aspect-ratio:3/2}
  .no-media .register-works{columns:1}
  .rb-value-col{border-left:0;border-top:1px solid var(--line)}
  .theme-b .project-page .detail-gallery{padding:12px}
  .theme-b .project-page .detail-side{padding:12px 20px 24px}
  .theme-b .project-page .detail-head{padding-top:20px}
  .contact-map iframe{height:320px}
}

/* --- Pulido (oct 2026) --- */

/* La barra se compacta al bajar (clase is-scrolled la pone site.js). */
.theme-b .site-header{transition:min-height .35s ease,box-shadow .35s ease,background-color .35s ease}
.theme-b .site-header .brand-logo{transition:width .35s ease}
.theme-b.is-scrolled .site-header{min-height:72px;background:rgba(245,246,245,.93);box-shadow:0 12px 32px -24px rgba(41,45,47,.5)}
.theme-b.is-scrolled .site-header .brand-logo{width:70px}

/* Carrusel: las fotos 2 y 3 se muestran (y cargan) cuando la página ya cargó; botón de pausa. */
.hero-slides .slide:not(.is-ready){display:none}
.slide-controls{position:absolute;z-index:3;right:max(var(--gutter),calc((100% - 1472px)/2));bottom:60px;display:flex;align-items:center;gap:18px}
.slide-controls .slide-dots{position:static}
.slide-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(15,23,24,.25);color:#fff;cursor:pointer}
.slide-toggle:hover{background:rgba(15,23,24,.5)}
.slide-toggle .icon-play,.hero-slides.is-paused .slide-toggle .icon-pause{display:none}
.hero-slides.is-paused .slide-toggle .icon-play{display:block}

/* Mosaicos en damero: tonos de los mosaicos de color */
.tile-solid.tone-a{background:var(--teal-3)}
.tile-solid.tone-b{background:var(--teal-1)}
.tile-solid.tone-c{background:var(--teal-4)}

/* Foco visible sobre fotos oscuras */
.page-banner a:focus-visible,.hero-slides a:focus-visible,.hero-slides button:focus-visible{outline-color:#fff}
.tile:focus-visible{outline:2px solid #fff;outline-offset:-8px}

/* Las cuadrículas aparecen escalonadas */
.reveal-ready .tiles .tile:nth-child(3n+2),.reveal-ready .cols-3 .value:nth-child(3n+2),.reveal-ready .cols-4 .value:nth-child(4n+2),.reveal-ready .project-grid .project-card:nth-child(even){transition-delay:.1s}
.reveal-ready .tiles .tile:nth-child(3n+3),.reveal-ready .cols-3 .value:nth-child(3n+3),.reveal-ready .cols-4 .value:nth-child(4n+3){transition-delay:.2s}
.reveal-ready .cols-4 .value:nth-child(4n+4){transition-delay:.3s}

/* Títulos repartidos en líneas parejas y párrafos sin palabras sueltas al final */
.theme-b h1,.theme-b h2,.theme-b h3,.theme-b .slide-title,.theme-b .tile-title{text-wrap:balance}
.theme-b p,.theme-b li{text-wrap:pretty}

@media(max-width:1050px) and (min-width:761px){
  /* En dos columnas el damero necesita intercambiar el 3.º y 4.º mosaico (orden explícito para todos). */
  .tiles .tile:nth-child(1){order:1}
  .tiles .tile:nth-child(2){order:2}
  .tiles .tile:nth-child(3){order:4}
  .tiles .tile:nth-child(4){order:3}
  .tiles .tile:nth-child(5){order:5}
  .tiles .tile:nth-child(6){order:6}
}
@media(max-width:760px){
  .theme-b.is-scrolled .site-header{min-height:60px}
  .theme-b.is-scrolled .site-header .brand-logo{width:54px}
  .slide-controls{right:var(--gutter);bottom:26px}
  .reveal-ready [data-reveal]{transition-delay:0s!important}
}