/* Estilos propios de la página inicio (van después de comun.css y antes de temas.css). */
/* Portada: el proceso que se ordena y el título que se corrige */
.escena{height:170vh;position:relative}
.fijo{position:sticky;top:var(--alto-cab,56px);height:calc(100vh - var(--alto-cab,56px));height:calc(100svh - var(--alto-cab,56px));display:flex;flex-direction:column;overflow:hidden;
  background-image:linear-gradient(var(--cuadricula) 1px,transparent 1px),linear-gradient(90deg,var(--cuadricula) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.fijo>.contenedor{width:100%}
.titular{padding-top:28px}
.titular .etiqueta{background:var(--papel);display:inline-block;padding:2px 4px;margin-left:-4px}
.titular h1{font-size:clamp(32px,6vw,72px);line-height:1.04;letter-spacing:-.035em;font-weight:600;margin:0;max-width:15ch}
.tachado{position:relative;white-space:nowrap;transition:color .4s}
.tachado::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:.08em;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.2,1)}
.nuevo{display:inline-block;color:var(--acento);opacity:0;transform:translateY(.15em);transition:opacity .5s .45s,transform .5s .45s}
.corregido .tachado{color:var(--tachado)}
.corregido .tachado::after{transform:scaleX(1)}
.corregido .nuevo{opacity:1;transform:none}
.para{margin:14px 0 0;font-size:17px;color:var(--gris);max-width:48ch;background:var(--papel)}
.para a{color:var(--tinta);text-decoration-color:var(--acento);text-underline-offset:3px;font-weight:500}
.lienzo{position:relative;flex:1;margin:8px auto;width:100%}
.lienzo svg{position:absolute;inset:0;width:100%;height:100%}
.lienzo path.l{stroke:var(--gris)}.ordenada .lienzo path.l{stroke:var(--tinta)}.lienzo path.x{stroke:var(--acento)}
.nodo{position:absolute;left:0;top:0;transform:translate(-50%,-50%);background:var(--blanco);border:1px dashed var(--gris);padding:8px 12px;white-space:nowrap;will-change:transform}
.nodo.orden{border:1px solid var(--borde);box-shadow:var(--sombra-chica);width:var(--ancho-orden)}
.nodo .antes,.nodo .despues{display:block;transition:opacity .25s}
.nodo .antes{font:400 13px/1.3 var(--mono);color:var(--gris)}
.nodo .despues{position:absolute;inset:0;padding:8px 12px;font-weight:600;font-size:15px;opacity:0}
.nodo .despues i{font:500 13px var(--mono);color:var(--acento);font-style:normal;margin-right:8px}
.nodo.orden .antes{opacity:0}.nodo.orden .despues{opacity:1}
.pie-escena{display:flex;justify-content:space-between;align-items:end;gap:16px;padding-bottom:20px}
.estado{position:relative;flex:1;max-width:620px;min-height:56px;font-size:15px}
.estado p{margin:0;position:absolute;left:0;right:0;bottom:0;background:var(--papel);transition:opacity .3s,visibility .3s}
.estado .e2{opacity:0;visibility:hidden}
.estado .e2 a{color:var(--acento);font-weight:600;white-space:nowrap}
.ordenada .estado .e1{opacity:0;visibility:hidden}.ordenada .estado .e2{opacity:1;visibility:visible}
.estado .e1 i{font:13px var(--mono);font-style:normal;color:var(--acento);white-space:nowrap}
.pista{font:13px var(--mono);color:var(--gris);white-space:nowrap}
.barra{height:3px;background:var(--linea)}
.barra div{height:100%;width:0;background:var(--acento)}
@media (max-width:760px){.titular{padding-top:20px}.para{font-size:15px;margin-top:10px}.estado{min-height:72px;font-size:14px}.pista{display:none}}
@media (max-width:860px) and (max-height:700px){.titular{padding-top:12px}.titular .etiqueta{margin-bottom:6px}.titular h1{font-size:28px}.para{font-size:14px;margin-top:6px}.estado{min-height:60px;font-size:13px}.pie-escena{padding-bottom:12px}}
@media (prefers-reduced-motion:reduce){.escena{height:auto}.fijo{position:relative;top:0;height:680px}}
.sin-js .escena{height:auto}.sin-js .fijo{position:relative;top:0;height:auto}
.sin-js .lienzo{display:grid;gap:10px;justify-items:start;padding:16px}
.sin-js .nodo{position:static;transform:none}.sin-js .nodo .antes{display:none}.sin-js .nodo .despues{position:static;opacity:1}
.sin-js .estado .e1{display:none}.sin-js .estado .e2{position:static;opacity:1;visibility:visible}

/* Qué hacemos */
.catalogo{border-top:1px solid var(--borde)}
.fila{display:grid;grid-template-columns:56px 1.1fr 1.4fr 1fr 64px;gap:20px;align-items:baseline;padding:24px 8px;border-bottom:1px solid var(--borde);text-decoration:none}
a.fila{transition:background .2s}
a.fila:hover{background:var(--blanco)}
a.fila:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
.fila .n{font:500 13px var(--mono);color:var(--acento)}
.fila h3{margin:0;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;line-height:1.2}
.fila p{margin:0;color:var(--gris);font-size:15px}
.fila .ej{font:13px/1.6 var(--mono);color:var(--gris)}
.fila .flecha{font-size:20px;justify-self:end;transition:transform .2s}
.fila .pronto{justify-self:end;color:var(--gris);font-size:11px;border-color:var(--linea)}
.fila .ej b{color:var(--acento-osc);font-weight:600}
a.fila:hover .flecha{transform:translateX(4px);color:var(--acento)}
.fila.destacada{background:var(--oscuro);color:var(--papel)}
.fila.destacada p,.fila.destacada .ej{color:var(--suave-osc)}
.fila.destacada .n{color:var(--acento-osc)}
a.fila.destacada:hover{background:var(--oscuro-hover)}
@media (max-width:860px){.fila{grid-template-columns:36px 1fr auto;gap:6px 12px;padding:20px 4px}.fila h3{grid-column:2}.fila .flecha,.fila .pronto{grid-column:3;grid-row:1}.fila p,.fila .ej{grid-column:2/4}}

/* Proyectos propios */
.proyectos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px}
.proy{display:flex;flex-direction:column;gap:4px;background:var(--blanco);border:1px solid var(--borde);padding:18px 20px;text-decoration:none;transition:transform .2s,box-shadow .2s}
@media (hover:hover){.proy:hover{transform:translate(-3px,-3px);box-shadow:var(--sombra-media)}}
.proy:focus-visible{box-shadow:var(--sombra-media)}
.proy b{font-size:20px;letter-spacing:-.02em}
.proy span{color:var(--gris);font-size:15px}
.proy small{font:500 13px var(--mono);color:var(--acento);margin-top:6px}
@media (max-width:760px){.proyectos{grid-template-columns:1fr}}

/* Nosotros */
.somos{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center}
.personas{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.persona{margin:0}
.persona .foto{aspect-ratio:4/5;box-shadow:var(--sombra-media)}
.persona figcaption{padding-top:14px}
.linea-contacto{margin:20px 0 0;color:var(--suave-osc);font-size:15px}
.persona h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em;line-height:1.25}
.persona .rol{font:500 13px/1.5 var(--mono);color:var(--acento);margin:0 0 6px}
.persona p{margin:0;color:var(--gris);font-size:15px}
@media (max-width:760px){.somos{grid-template-columns:1fr;gap:32px}.personas{gap:14px}.persona .foto{box-shadow:var(--sombra-chica)}.persona h3{font-size:17px}}