/* taller101 · manual de imagen del 9-oct-2026 (estilo de tarjetas del 10-oct): azul #0080C1, tinta #122733,
   Sansation en rótulos, Raleway en texto, Fira Sans en cifras. Cero Google Fonts. */
@font-face{font-family:"Sansation";src:url(fuentes/sansation-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Raleway";src:url(fuentes/raleway-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Raleway";src:url(fuentes/raleway-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Raleway";src:url(fuentes/raleway-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cifras";src:url(fuentes/fira-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0030-0039,U+00B0,U+00B1,U+00D7,U+0025}
@font-face{font-family:"Cifras";src:url(fuentes/fira-600.woff2) format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0030-0039,U+00B0,U+00B1,U+00D7,U+0025}
:root{--azul:#0080C1;--azul-texto:#0074AD;--tinta:#122733;--claro:#3AA3DC;--gris:#5B6B76;--nube:#F4F7F9;--linea:#DFE6EA;--en-oscuro:#A9C0CE;--lado:clamp(20px,5vw,80px);--salto:clamp(80px,11vw,176px);--orilla:clamp(8px,1vw,14px);--r:20px;--r-chico:14px;--sombra:0 10px 30px rgba(18,39,51,.12);--curva:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;overflow-x:clip;font-family:"Cifras","Raleway",system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:17px;line-height:1.5;color:var(--tinta);background:#fff}
body>*{max-width:1440px;margin-left:auto;margin-right:auto}
img{display:block;width:100%;height:auto;background:var(--nube)}
a{color:var(--azul-texto)}a:hover{color:var(--tinta)}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700}
h1{font-size:clamp(40px,5.6vw,76px);line-height:1.04;letter-spacing:-.022em}
h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.018em}
.lema{font-size:clamp(28px,3.3vw,44px);line-height:1.1;letter-spacing:-.015em}
.entrada{font-size:clamp(21px,1.9vw,27px);line-height:1.42;font-weight:600}
.gris{color:var(--gris)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rotulo{font-family:"Cifras","Sansation","Raleway",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--azul-texto);margin-bottom:12px}
.rotulo.gris{color:var(--gris)}
.boton{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;text-decoration:none;font-size:14px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:.14em;transition:background .15s,color .15s,transform .15s}
.boton:hover{transform:translateY(-1px)}
.boton.lleno{background:var(--azul-texto);color:#fff}.boton.lleno:hover{background:var(--tinta);color:#fff}
.boton.chico{min-height:44px;padding:0 20px}
.boton.contorno{border:1px solid var(--azul-texto);color:var(--azul-texto)}.boton.contorno:hover{background:var(--azul-texto);color:#fff}
.boton.blanco{min-height:56px;background:#fff;color:var(--tinta)}.boton.blanco:hover{background:var(--claro);color:var(--tinta)}
.liga{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.chapa{display:inline-flex;align-items:center;min-height:34px;padding:7px 14px;border:1px solid var(--linea);border-radius:999px;background:var(--nube);font-family:"Cifras","Sansation","Raleway",sans-serif;font-weight:700;font-size:12px;line-height:1.2;text-transform:uppercase;letter-spacing:.14em;color:var(--azul-texto)}

/* Entradas al bajar (movimiento.js pone .visto). Sin .js en <html>, nada se esconde. */
.js [data-entra]{opacity:0;transform:translateY(48px);transition:opacity .9s var(--curva),transform .9s var(--curva);transition-delay:calc(var(--i,0)*90ms)}
.js [data-entra].visto{opacity:1;transform:none}

/* Barra: tarjeta flotante que se queda arriba al bajar. */
.barra{position:sticky;top:var(--orilla);z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;width:calc(100% - 2*var(--orilla));max-width:calc(1440px - 2*var(--orilla));margin-top:var(--orilla);padding:10px 12px 10px 22px;background:rgba(255,255,255,.97);border-radius:var(--r);box-shadow:var(--sombra)}
.logo{display:inline-flex;padding:4px 0}.logo svg{height:44px;width:91px;fill:var(--azul)}
.barra nav{display:flex;flex-wrap:wrap;gap:0 4px;font-family:"Cifras","Sansation","Raleway",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em}
.barra nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;color:var(--tinta);transition:background .15s,color .15s}
.barra nav a:hover,.barra nav a:active{background:var(--nube);color:var(--azul-texto)}

/* Portada: titular enorme al centro y, debajo, la foto estelar que crece al bajar. */
.heroe{display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(40px,7vw,104px) var(--lado) 0;text-align:center}
.heroe h1{font-size:clamp(46px,9.4vw,136px);line-height:.98;letter-spacing:-.035em}
.heroe .entrada{max-width:640px}
.acciones{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;margin-top:6px}
.heroe-marco{position:relative;width:calc(100% + 2*var(--lado) - 2*var(--orilla));margin-top:clamp(28px,4vw,56px);border-radius:var(--r);overflow:hidden;transform-origin:50% 0;will-change:transform;background:var(--tinta)}
.heroe-marco .ciclo{aspect-ratio:16/9;max-height:86vh;width:100%;border-radius:0}
.heroe-pie{position:absolute;left:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);display:flex;flex-direction:column;gap:2px;padding:12px 18px;background:#fff;border-radius:var(--r-chico);box-shadow:var(--sombra);text-align:left}
.heroe-pie .rotulo{margin:0;font-size:11px}
.estelar-pie{font-size:17px;line-height:1.3;font-weight:700;color:var(--tinta)}

/* Frase */
.frase{padding:var(--salto) var(--lado);text-align:center}
.frase h2{font-size:clamp(40px,7.4vw,112px);line-height:1;letter-spacing:-.032em}
.frase span{color:var(--azul)}

/* La foto que se aleja mientras pasan las fichas. */
.zoom{height:320vh}
.zoom-fijo{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--tinta)}
.zoom-fijo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 55%;will-change:transform}
.zoom-fijo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,39,51,.55),rgba(18,39,51,0) 55%)}
.zoom-carril{position:absolute;z-index:1;left:0;bottom:clamp(24px,8vh,88px);display:flex;gap:clamp(12px,1.6vw,24px);margin:0;padding:0;list-style:none;will-change:transform}
.zoom-carril li{flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;width:clamp(230px,26vw,360px);height:clamp(230px,26vw,360px);padding:clamp(20px,2.2vw,32px);background:#fff;border-radius:var(--r);box-shadow:var(--sombra)}
.zoom-carril strong{font-size:clamp(26px,2.8vw,40px);line-height:1.05;letter-spacing:-.02em}
.zoom-carril i{display:block;width:64px;height:6px;border-radius:3px;background:var(--azul)}

.seccion{padding:var(--salto) var(--lado) 0}

/* Qué hacemos: la foto se queda fija y cambia con cada palabra. */
.pegado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:start}
.pegado-foto{position:sticky;top:120px;height:min(72vh,720px);border-radius:var(--r);overflow:hidden;background:var(--nube)}
.pegado-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 1.4s var(--curva)}
.pegado-foto img.ve{opacity:1;transform:none}
.pegado-lista{padding:6vh 0 18vh}
.pegado-lista article{padding:9vh 0;transition:opacity .4s}
.js .pegado-lista article:not(.activo){opacity:.28}
.pegado-lista .pn{display:block;font-size:19px;font-weight:600;color:var(--azul);margin-bottom:8px}
.pegado-lista h2{font-size:clamp(44px,6.6vw,104px);line-height:1;letter-spacing:-.032em}
.pegado-lista i{display:block;height:6px;border-radius:3px;margin:22px 0 18px;background:var(--azul);transform-origin:0 50%}
.js .pegado-lista i{transform:scaleX(0);transition:transform 1.1s var(--curva) .2s}
.js .pegado-lista .visto i{transform:scaleX(1)}
.pegado-lista p:not(.rotulo){font-size:clamp(19px,1.7vw,24px);font-weight:600}

/* Materiales: cifra y dos renglones de palabras que corren en sentidos opuestos. */
.materiales{margin-top:var(--salto);padding:clamp(72px,10vw,152px) 0;background:var(--tinta);color:#fff;overflow:hidden;max-width:none}
.materiales-cifra{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,36px);padding:0 var(--lado);margin-bottom:clamp(40px,6vw,88px)}
.materiales-cifra strong{font-size:clamp(120px,22vw,320px);line-height:.8;font-weight:600;color:var(--claro)}
.materiales-cifra span{font-size:clamp(26px,3.6vw,56px);line-height:1.05;font-weight:700;letter-spacing:-.02em}
.corre{display:flex;gap:.5em;width:max-content;font-size:clamp(52px,9vw,136px);line-height:1.12;font-weight:700;letter-spacing:-.03em;white-space:nowrap;will-change:transform}
.corre span::after{content:"·";margin-left:.5em;color:var(--claro)}
.corre.hueca{color:transparent;-webkit-text-stroke:2px var(--claro)}
.corre.hueca span::after{-webkit-text-stroke:0}

/* Sectores: dos fotos altas con parallax y una palabra. */
.sectores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--orilla);width:calc(100% - 2*var(--orilla));max-width:calc(1440px - 2*var(--orilla));margin:var(--orilla) auto 0}
.sectores article{position:relative;height:clamp(420px,72vh,700px);border-radius:var(--r);overflow:hidden;background:var(--tinta);color:#fff;display:flex;align-items:flex-end}
.sectores img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.sectores article::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,39,51,.9) 0%,rgba(18,39,51,.35) 45%,rgba(18,39,51,0) 70%)}
.sector-texto{position:relative;z-index:1;padding:clamp(20px,3.4vw,48px)}
.sector-texto .rotulo{color:#fff;margin-bottom:10px}
.sector-texto h2{font-size:clamp(44px,6.4vw,104px);line-height:1;letter-spacing:-.032em}

/* Proyectos */
figure{margin:0}
figcaption{margin-top:12px;font-weight:600}
.cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px;margin-bottom:clamp(32px,4vw,56px)}
.cabeza h2{font-size:clamp(44px,7.4vw,112px);line-height:1;letter-spacing:-.032em}
.cabeza .rotulo{margin:0 0 12px}
.destacado{margin-bottom:32px}
.destacado figcaption{font-size:clamp(21px,1.9vw,27px);line-height:1.42}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:32px 20px}
.ciclo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--nube);border-radius:var(--r)}
.destacado .ciclo{aspect-ratio:16/8}
.ciclo img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity .9s ease}
.ciclo img.ve{opacity:1}

/* Proceso: una línea que se dibuja y cuatro palabras. */
.proceso>h2{font-size:clamp(40px,7.4vw,112px);line-height:1;letter-spacing:-.032em;margin-bottom:clamp(40px,6vw,88px)}
.linea{height:6px;border-radius:3px;background:var(--linea);overflow:hidden}
.linea i{display:block;height:100%;background:var(--azul);transform-origin:0 50%}
.js .linea i{transform:scaleX(0)}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px 24px;margin:28px 0 0;padding:0;list-style:none}
.pasos .num{display:block;font-size:19px;font-weight:600;color:var(--azul);margin-bottom:6px}
.pasos h3{font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}
.pasos p{color:var(--gris)}

/* Contacto */
.contacto{width:calc(100% - 2*var(--orilla));max-width:calc(1440px - 2*var(--orilla));margin-top:var(--salto);margin-bottom:var(--orilla);padding:clamp(48px,8vw,128px) clamp(24px,4.5vw,64px) 32px;background:var(--tinta);border-radius:calc(var(--r) + 6px);color:#fff}
.contacto-fila{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px 64px}
.contacto-fila>div:first-child{flex:1 1 420px}
.contacto h2{font-size:clamp(46px,9.4vw,136px);line-height:.98;letter-spacing:-.035em;margin-bottom:24px}
.contacto .entrada{max-width:520px;color:var(--en-oscuro)}
.contacto-acciones{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.contacto a:not(.boton){color:var(--claro);display:inline-flex;align-items:center;min-height:44px}.contacto a:not(.boton):hover{color:#fff}
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(48px,6vw,96px);padding-top:28px;border-top:1px solid #2B4250;font-size:15px;line-height:1.45;color:var(--en-oscuro)}
footer svg{height:40px;width:82px;fill:var(--claro)}

/* Celular */
@media (max-width:820px){
.pegado{grid-template-columns:1fr;gap:0}
.pegado-foto{top:118px;height:36vh;z-index:1}
.pegado-lista{padding:2vh 0 4vh}
.pegado-lista article{padding:7vh 0}
.heroe-marco .ciclo{aspect-ratio:4/5;max-height:74vh}
.zoom{height:280vh}
.materiales-cifra{flex-direction:column;text-align:center}
}
@media (max-width:640px){
html{scroll-padding-top:120px}
.barra{padding:8px 8px 0 16px;gap:4px 12px}
.logo svg{height:38px;width:78px}
.barra nav{order:3;flex:0 0 calc(100% + 24px);margin:4px -8px 0 -16px;flex-wrap:nowrap;gap:0;border-top:1px solid var(--linea);font-size:clamp(10px,2.9vw,12px);letter-spacing:.08em}
.barra nav a{flex:1 1 auto;min-height:40px;padding:0 4px;border-radius:0;white-space:nowrap}
.barra nav a+a{border-left:1px solid var(--linea)}
.barra nav a:first-child{border-bottom-left-radius:var(--r)}.barra nav a:last-child{border-bottom-right-radius:var(--r)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.zoom{height:auto}.zoom-fijo{position:relative;height:auto;padding:var(--lado)}.zoom-fijo>img{position:absolute}.zoom-carril{position:relative;bottom:auto;flex-wrap:wrap}.zoom-carril li{height:auto;min-height:160px}.corre{flex-wrap:wrap;width:auto;padding:0 var(--lado);font-size:clamp(32px,5vw,64px)}.ciclo img,.boton{transition:none}}
/* Sin JavaScript: la escena de la foto no se fija; las fichas van en rejilla. */
html:not(.js) .zoom{height:auto}
html:not(.js) .zoom-fijo{position:relative;height:auto;padding:var(--lado)}
html:not(.js) .zoom-carril{position:relative;bottom:auto;flex-wrap:wrap}
html:not(.js) .zoom-carril li{height:auto;min-height:160px}
html:not(.js) .corre{flex-wrap:wrap;width:auto;padding:0 var(--lado);font-size:clamp(32px,5vw,64px)}

/* Telón de la primera carga: una línea cruza la pantalla, se vuelve el subrayado,
   dibuja el aro, suben la palabra y el 101, y el logotipo vuela a la barra.
   Las piezas son las del maestro; sólo se descubren. */
.telon{position:fixed;inset:0;z-index:100;max-width:none;display:flex;align-items:center;justify-content:center;pointer-events:none}
html:not(.js) .telon,.sin-telon .telon{display:none}
.cargando{overflow:hidden}
.cargando .barra .logo{visibility:hidden}
.telon-fondo{position:absolute;inset:0;background:#fff;transition:opacity .7s ease}
.telon-logo{position:relative;width:min(62vw,520px);height:auto;fill:var(--azul);overflow:visible;transform-origin:0 0;will-change:transform}
.t-linea{clip-path:inset(0 100% 0 0);animation:t-linea .8s cubic-bezier(.6,0,.2,1) .1s forwards,t-recoge .7s cubic-bezier(.6,0,.2,1) 1.15s forwards,t-va .01s linear 1.9s forwards}
.t-trazo{stroke-dasharray:100 200;stroke-dashoffset:-101;animation:t-aro .95s cubic-bezier(.5,0,.2,1) .8s forwards}
.t-palabra{transform:translateY(90px);animation:t-sube .75s cubic-bezier(.2,.7,.2,1) 1.25s forwards}
.t-ciento{transform:translateY(160px);animation:t-sube .8s cubic-bezier(.2,.7,.2,1) 1.45s forwards}
/* Al cerrar el dibujo queda el trazo del maestro entero, sin costuras. */
.t-entero{opacity:0;animation:t-ve .01s linear 1.9s forwards}
.t-mascara{animation:t-va .01s linear 1.9s forwards}
@keyframes t-ve{to{opacity:1}}
@keyframes t-va{to{opacity:0}}
@keyframes t-linea{to{clip-path:inset(0 0 0 0)}}
@keyframes t-recoge{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 94.853%)}}
@keyframes t-aro{to{stroke-dashoffset:0}}
@keyframes t-sube{to{transform:none}}
.telon.vuela .telon-fondo{opacity:0}
.telon.vuela .telon-logo{transition:transform .75s cubic-bezier(.6,0,.2,1)}