:root{--crema:#f7f4ef;--westar:#dfd7cd;--linea:#d8cfc4;--suave:#6e6660;--tinta:#4f4844;--tinta2:#3a3532}
html{font-size:17px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Quicksand,system-ui,sans-serif;font-weight:400;color:var(--tinta);background:var(--crema);-webkit-font-smoothing:antialiased;line-height:1.75;font-size:1rem}
img{max-width:100%;display:block}
a{color:inherit}
.barra{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:1.5rem clamp(1.5rem,5vw,4rem);background:rgba(247,244,239,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra.sobre{background:transparent;backdrop-filter:none;border-bottom:0}
.barra a{text-decoration:none;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.barra.sobre a{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.marca{font-size:1rem;letter-spacing:.36em}
nav{display:flex;gap:clamp(.9rem,2.2vw,2.1rem)}
nav a{color:var(--suave);transition:color .2s}
nav a:hover,nav a[aria-current]{color:var(--tinta2)}
.barra.sobre nav a{color:rgba(255,255,255,.86)}
.barra.sobre nav a:hover{color:#fff}
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end}
.hero video,.hero .respaldo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .respaldo{background:#9a9088}
.hero .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,23,.4) 0%,rgba(30,26,23,.15) 40%,rgba(30,26,23,.72) 100%)}
.hero .frase{position:relative;z-index:2;color:#fff;padding:0 clamp(1.5rem,5vw,4rem) clamp(4rem,10vh,8rem);max-width:min(88vw,780px)}
.hero h1{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:400;line-height:1.22;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.cabecera{padding:clamp(9rem,18vh,13rem) clamp(1.5rem,5vw,4rem) clamp(3rem,7vh,5rem);border-bottom:1px solid var(--linea)}
.cabecera h1{font-size:clamp(2rem,4vw,3.1rem);font-weight:400;line-height:1.2;max-width:min(90vw,700px);color:var(--tinta2)}
.cabecera p{margin-top:1.6rem;max-width:min(90vw,620px);color:var(--suave);font-size:1.05rem}
section{padding:clamp(4.5rem,12vh,9rem) clamp(1.5rem,5vw,4rem)}
.centro{max-width:1180px;margin:0 auto}
.destacado{max-width:min(90vw,640px);font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.5;font-weight:400;color:var(--tinta2)}
.cuerpo{max-width:min(90vw,660px)}
.cuerpo p{margin-top:1.5rem}
.cuerpo p:first-child{margin-top:0}
.pilares{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4.5vw,4rem);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:2.4rem 0;margin-top:clamp(3.5rem,8vh,6rem)}
.pilares span{font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--suave);font-weight:500}
.rotulo{font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--suave);margin-bottom:2.4rem;font-weight:500}
.rotulo a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linea);padding-bottom:.3rem}
.rotulo a:hover{border-color:var(--suave)}
.obras{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.6rem,3.2vw,3rem)}
.obra{text-decoration:none;display:block}
.obra .lienzo{aspect-ratio:4/5;background:var(--westar);position:relative;overflow:hidden}
.obra:nth-child(3n+2) .lienzo{aspect-ratio:1/1;background:#e6ddd2}
.obra:nth-child(3n) .lienzo{background:#d6ccc0}
.obra .lienzo img{width:100%;height:100%;object-fit:cover}
.obra .lienzo span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#7d7268;white-space:nowrap}
.obra h3{margin-top:1.1rem;font-size:1.1rem;font-weight:500;color:var(--tinta2)}
.obra p{font-size:.95rem;color:var(--suave);margin-top:.15rem}
.tono{background:#efe9e1}
.etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(2rem,4vw,4rem)}
.etapa em{font-style:normal;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--suave);display:block;margin-bottom:.9rem;font-weight:500}
.etapa h4{font-size:1.32rem;font-weight:500;margin-bottom:.7rem;color:var(--tinta2)}
.etapa p{font-size:1rem;color:var(--tinta)}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,6vw,5rem);align-items:center}
.dos img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center}
.cita{font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.55;max-width:min(90vw,470px);color:var(--tinta2)}
.cita+p{margin-top:1.5rem;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);font-weight:500}
.enlace{font-size:inherit;color:var(--suave);text-decoration:none;border-bottom:1px solid var(--linea);padding-bottom:.3rem;font-weight:500}
.enlace:hover{color:var(--tinta2)}
.lista{border-top:1px solid var(--linea)}
.lista a{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:baseline;padding:1.6rem 0;border-bottom:1px solid var(--linea);text-decoration:none}
.lista h3{font-size:1.24rem;font-weight:500;color:var(--tinta2)}
.lista span{font-size:.9rem;color:var(--suave)}
.lista p{grid-column:1/-1;font-size:1rem;color:var(--suave);margin-top:.3rem}
footer{background:#2b2624;color:#efe8df;padding:clamp(4rem,10vh,7rem) clamp(1.5rem,5vw,4rem)}
.pieg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.6rem;max-width:1180px;margin:0 auto}
footer h5{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#a2978c;font-weight:500;margin-bottom:1rem}
footer a{text-decoration:none;border-bottom:1px solid rgba(239,232,223,.3)}
footer p{font-size:1rem;line-height:1.7}
.rev{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.rev.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}
@media(max-width:760px){nav{gap:.85rem}nav a{font-size:.72rem}.marca{font-size:.9rem;letter-spacing:.28em}}
.marca img{height:clamp(22px,2.4vw,32px);width:auto;display:block}
.barra.sobre .marca img{filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.45))}
.hero .bajaX{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.85);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.5);animation:flota 2.8s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.boton{display:inline-block;padding:.95rem 2.1rem;border:1px solid var(--tinta);text-decoration:none;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--tinta2);transition:background .25s,color .25s}
.boton:hover{background:var(--tinta2);color:var(--crema)}
.llamada{text-align:center}
.llamada p{font-size:clamp(1.2rem,2.2vw,1.7rem);max-width:min(90vw,620px);margin:0 auto 2.2rem;color:var(--tinta2);line-height:1.45}
.wa{position:fixed;right:1.5rem;bottom:1.5rem;z-index:40;display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:#3a3532;border-radius:50%;text-decoration:none;box-shadow:0 3px 16px rgba(59,52,48,.28);transition:transform .2s,background .2s}
.wa:hover{transform:translateY(-3px);background:#59524e}
.wa svg{width:25px;height:25px;fill:#f7f4ef}
.wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1.6rem,3vw,2.8rem)}
.ficha{text-decoration:none;display:block}
.ficha .cubierta{aspect-ratio:3/2;overflow:hidden;background:var(--westar)}
.ficha .cubierta img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.ficha:hover .cubierta img{transform:scale(1.04)}
.ficha em{font-style:normal;display:block;margin-top:1rem;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--suave);font-weight:500}
.ficha h3{font-size:1.28rem;font-weight:500;margin-top:.35rem;color:var(--tinta2)}
.ficha p{font-size:1rem;color:var(--suave);margin-top:.4rem}
.nota{margin-top:clamp(3rem,6vh,5rem);padding-top:1.6rem;border-top:1px solid var(--linea);font-size:.9rem;color:var(--suave);max-width:min(90vw,680px)}
.invita{position:relative;background:#2b2624;color:#efe8df;overflow:hidden;padding:clamp(5rem,14vh,9rem) clamp(1.5rem,5vw,4rem)}
.invita .dentro{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.invita h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:400;line-height:1.2;max-width:min(90vw,640px)}
.invita p{margin-top:1.5rem;max-width:min(90vw,560px);color:#d8cfc4;font-size:1.06rem}
.invita .apunte{margin-top:2.4rem;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:#a2978c;font-weight:500}
.humo{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.humo svg{position:absolute;right:2%;bottom:-14%;height:132%;width:auto;max-width:none}
.humo .cinta{fill:none;stroke:#f0e8dc;stroke-linecap:round;transform-origin:50% 100%}
.humo .c1{stroke-width:34;opacity:.34;animation:onda1 11s ease-in-out infinite}
.humo .c2{stroke-width:20;opacity:.3;animation:onda2 14s ease-in-out infinite}
.humo .c3{stroke-width:58;opacity:.16;animation:onda3 17s ease-in-out infinite}
.humo .c4{stroke-width:11;opacity:.4;animation:onda2 9s ease-in-out infinite reverse}
@keyframes onda1{0%,100%{transform:translate(0,0) scaleX(1)}25%{transform:translate(9px,-16px) scaleX(1.14)}50%{transform:translate(-11px,-30px) scaleX(.88)}75%{transform:translate(6px,-18px) scaleX(1.08)}}
@keyframes onda2{0%,100%{transform:translate(0,0) scaleX(1)}30%{transform:translate(-13px,-22px) scaleX(1.2)}60%{transform:translate(10px,-38px) scaleX(.84)}}
@keyframes onda3{0%,100%{transform:translate(0,0) scaleX(1)}40%{transform:translate(14px,-26px) scaleX(.9)}70%{transform:translate(-9px,-42px) scaleX(1.16)}}
@media(prefers-reduced-motion:reduce){.humo .cinta{animation:none}}
.form{display:grid;gap:1.4rem;max-width:min(92vw,560px)}
.form label{display:block;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--suave);font-weight:500;margin-bottom:.55rem}
.form input,.form textarea,.form select{width:100%;font:inherit;font-size:1rem;color:var(--tinta);background:transparent;border:0;border-bottom:1px solid var(--linea);padding:.6rem 0;border-radius:0}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-bottom-color:var(--tinta2)}
.form button{justify-self:start;margin-top:.6rem;cursor:pointer;background:transparent;font:inherit}
.doble{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.galeria figure{margin:0}
.galeria .marco{aspect-ratio:3/4;background:var(--westar);position:relative;overflow:hidden}
.galeria .marco img{width:100%;height:100%;object-fit:cover}
.galeria .marco span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#7d7268;white-space:nowrap}
.galeria figcaption{margin-top:.8rem;font-size:.92rem;color:var(--suave)}
.banda{position:relative;width:100%;aspect-ratio:16/7;min-height:280px;overflow:hidden;background:#2b2624}
.banda video{width:100%;height:100%;object-fit:cover;display:block}
.banda .tinte{position:absolute;inset:0;background:rgba(30,26,23,.12);pointer-events:none}
.retratos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1.2rem,2.5vw,2rem)}
.retratos img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center}
.wadirecto{display:inline-flex;align-items:center;gap:.6rem}
.wadirecto svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
footer .tel,footer a[href^="tel:"]{font-variant-numeric:normal;letter-spacing:.01em}
.marca{position:relative;display:block}
.marca .imagotipo{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .45s ease}
.marca .palabra{opacity:1;transition:opacity .45s ease}
.marca:hover .palabra{opacity:0}
.marca:hover .imagotipo{opacity:1}
.marca .imagotipo{height:clamp(26px,2.8vw,38px)}
.logokatium{display:inline-block;vertical-align:baseline;text-decoration:none;border:0;white-space:nowrap}
.logokatium:hover img{opacity:.62}
footer footer .logokatium:hover img{opacity:.65}
.articulo{max-width:min(92vw,660px);margin:0 auto}
.articulo p{margin-top:1.6rem;font-size:1.08rem;line-height:1.8}
.articulo p:first-child{margin-top:0;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.5;color:var(--tinta2)}
.articulo .rubro{font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--suave);font-weight:500;margin-bottom:1rem}
.portadaart{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.masart{border-top:1px solid var(--linea);margin-top:clamp(4rem,9vh,7rem);padding-top:2.4rem}
.cadena{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.tramo{border-top:1px solid var(--linea);padding-top:1.8rem}
.tramo.nuestro{border-top:2px solid var(--tinta2)}
.tramo .quien{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.4rem}
.tramo .quien strong{font-size:1.18rem;font-weight:500;color:var(--tinta2);line-height:1}
.tramo .quien .tramo .quien span{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--suave);font-weight:500}
.tramo>p{color:var(--suave);margin-bottom:1.8rem;max-width:min(90vw,560px)}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.8rem}
.paso h5{font-size:.98rem;font-weight:500;color:var(--tinta2);margin-bottom:.6rem}
.paso ul{list-style:none;padding:0;margin:0}
.paso li{font-size:.95rem;color:var(--suave);padding-left:.9rem;position:relative;margin-bottom:.35rem;line-height:1.6}
.paso li:before{content:"";position:absolute;left:0;top:.62em;width:4px;height:1px;background:var(--medio,#aba299)}
.figart{margin:clamp(2.6rem,6vh,4rem) 0}
.figart img{width:100%;height:auto}
.figart figcaption{margin-top:.8rem;font-size:.92rem;color:var(--suave)}
.anchoart{--aw:min(92vw,880px);width:var(--aw);position:relative;left:50%;margin-left:calc(var(--aw) / -2);margin-right:calc(var(--aw) / -2)}
@media(max-width:820px){.anchoart{width:100%;left:0;margin-left:0;margin-right:0}}
.logoonoa{height:1.15rem;width:auto;max-width:none;display:inline-block;vertical-align:-.05em}
.tramo .quien strong{display:inline-flex;align-items:center}
.hero .frase{text-align:left;left:0;right:0;padding-bottom:clamp(3.2rem,7.5vh,5.5rem);max-width:none;padding-left:clamp(1.5rem,5vw,4rem);padding-right:clamp(1.5rem,5vw,4rem)}


.palabras{position:relative;height:1.25em;font-family:"Bodoni Moda",Prata,Georgia,serif;font-weight:400;font-size:clamp(2.2rem,6.5vw,5.6rem);line-height:1.25;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.palabras span{position:absolute;left:0;right:0;top:0;opacity:0;letter-spacing:.22em;text-indent:.22em;white-space:nowrap;animation:turno 21s linear infinite}
.palabras span:nth-child(1){animation-delay:0s}
.palabras span:nth-child(2){animation-delay:3s}
.palabras span:nth-child(3){animation-delay:6s}
.palabras span:nth-child(4){animation-delay:9s}
.palabras span:nth-child(5){animation-delay:12s}
.palabras span:nth-child(6){animation-delay:15s}
.palabras span:nth-child(7){animation-delay:18s}
@keyframes turno{0%{opacity:0;letter-spacing:.30em}3%{opacity:1;letter-spacing:.22em}11%{opacity:1;letter-spacing:.22em}14.28%{opacity:0;letter-spacing:.17em}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.palabras span{animation:none}.palabras span:nth-child(1){opacity:1}}
.recorte{width:100%;max-width:460px;height:auto;aspect-ratio:auto;object-fit:contain;display:block;margin:0 auto}
.dos{align-items:center}
.etapa figure{margin:1.7rem 0 0}
.etapa figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.etapa figcaption{margin-top:.6rem;font-size:.86rem;color:var(--medio,#8d837a)}
.invita{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(2rem,5vw,4.5rem);align-items:center}
.invita .dentro{max-width:min(90vw,560px)}
.fotocafe{width:100%;height:auto;display:block;border-radius:2px}
@media(max-width:760px){.fotocafe{order:-1}}
@media(max-width:760px){.galeria{grid-template-columns:1fr}}
.katiumtxt{font-family:"Bodoni Moda",Georgia,serif;letter-spacing:.1em;font-weight:400;text-decoration:none;border-bottom:1px solid var(--linea);padding-bottom:.08em;white-space:nowrap;transition:border-color .25s}
.katiumtxt:hover{border-bottom-color:var(--tinta2)}
.trayecto{border-top:1px solid var(--linea);max-width:min(92vw,760px)}
.trayecto .fila{display:grid;grid-template-columns:1fr auto minmax(0,300px);column-gap:2.4rem;align-items:start;padding:2.2rem 0;border-top:1px solid #e4ded5}
.trayecto h4{font-size:1.12rem;font-weight:500;color:var(--tinta2)}
.trayecto .casa{font-size:.95rem;color:var(--suave);margin-top:.15rem}
.trayecto .anios{font-size:.88rem;letter-spacing:.12em;color:var(--suave);white-space:nowrap;font-weight:500}
.trayecto .obras{grid-column:1/-1;font-size:.98rem;color:var(--tinta);margin-top:.6rem}
.aptitudes{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.6rem;max-width:min(92vw,760px)}
.aptitudes span{font-size:.86rem;letter-spacing:.06em;color:var(--suave);border:1px solid var(--linea);padding:.35rem .8rem}
.recorte.chica{max-width:270px}
@media(max-width:760px){.recorte.chica{max-width:200px}}

@media(max-width:760px){.trayecto .fila{grid-template-columns:1fr auto}.trayecto .mini{display:none}}
.etapa{display:flex;flex-direction:column}
.etapa > p{min-height:14.2em}
@media(max-width:760px){.etapa > p{min-height:0}}
.etapa figure{margin-top:0}

.logokatium img{height:.95em;width:auto;vertical-align:baseline;display:inline-block;position:relative;top:.08em}

footer .logokatium img,.pieg .logokatium img{filter:brightness(0) invert(1);opacity:.9}
footer .logokatium:hover img,.pieg .logokatium:hover img{opacity:1}

.obras a.obra p.estado{display:inline-block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#7a716a;border:1px solid #ddd5cb;padding:.22rem .55rem;margin:.1rem 0 .7rem;line-height:1}
.obras a.obra p.donde{margin:.15rem 0 .5rem}

.trayecto .fila > div{grid-column:1;grid-row:1}
.trayecto .fila > .anios{grid-column:2;grid-row:1;white-space:nowrap}
.trayecto .fila > p:not(.anios){grid-column:1/3;grid-row:2;margin:.7rem 0 0}
.trayecto .mini{grid-column:3;grid-row:1/3;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;align-self:start;display:block}
@media(max-width:820px){
 .trayecto .fila{grid-template-columns:1fr auto;row-gap:1rem}
 .trayecto .fila > p:not(.anios){grid-column:1/3;grid-row:3}
 .trayecto .mini{grid-column:1/3;grid-row:2;max-width:360px}
}