/* Estudios de materia y diagramas de lectura. Todo el contenido existe sin JS. */
.visual-chapter,.project-visual{--vc-bean:#001410;--vc-echo:#eae9e7;--vc-orange:#e34525;--vc-steel:#b2b3b6;container-type:inline-size;min-width:0;color:var(--vc-bean);background:var(--vc-echo);overflow:hidden}
.visual-chapter{margin:0 clamp(20px,3vw,48px) 72px}.project-visual{margin:30px 0 0;border:1px solid #b2b3b680;isolation:isolate}
.visual-chapter__media,.project-visual__media{position:relative;overflow:hidden;min-width:0;background:var(--vc-bean)}
.visual-chapter picture,.project-visual picture{display:block;position:relative;width:100%;overflow:hidden;aspect-ratio:2.7/1;max-height:420px;min-height:160px}
.project-visual picture{aspect-ratio:16/9;max-height:320px}
.visual-chapter__image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--vc-position,50% 50%);transform-origin:center;will-change:auto}
.visual-chapter__media::after,.project-visual__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #00141012;pointer-events:none}
.project-visual__identity{position:absolute;left:0;bottom:0;z-index:2;background:var(--vc-bean);padding:15px 22px;max-width:72%}
.project-visual__identity img{display:block;width:190px;height:auto;max-width:100%}
.project-visual figcaption,.visual-chapter figcaption{padding:26px 28px 24px;min-width:0}
.visual-chapter figcaption{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;align-items:center;border-bottom:1px solid var(--vc-steel)}
.project-visual__state,.visual-chapter__label{display:block;margin:0 0 9px;font-size:.64rem;font-weight:400;line-height:1.55;letter-spacing:.14em;text-transform:uppercase;color:var(--vc-bean)}
.project-visual__name{display:block;font-size:1.1rem;line-height:1.35;letter-spacing:-.025em;font-weight:400}
.project-visual__meaning,.visual-chapter__meaning{margin:10px 0 22px;font-size:.84rem;line-height:1.55;color:var(--vc-bean);max-width:58ch;overflow-wrap:anywhere}
.visual-chapter__meaning{font-size:clamp(1.1rem,1.8vw,1.65rem);font-weight:300;letter-spacing:-.025em;line-height:1.25;margin:0}
.visual-chapter__flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;min-width:0}
.visual-chapter__flow::before{content:"";position:absolute;top:9px;left:10px;right:18%;height:1px;background:var(--vc-orange);transform-origin:left center}
.visual-chapter__flow li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;font-size:.76rem;line-height:1.45;color:var(--vc-bean);overflow-wrap:anywhere}
.visual-chapter__flow li>span:first-child{display:block;position:relative;z-index:1;padding-right:10px;background:var(--vc-echo);font-size:.64rem;line-height:18px;letter-spacing:.08em}
.visual-chapter__flow li>span:last-child{max-width:100%}
.visual-chapter--compact{margin:0 0 24px;border:1px solid #b2b3b680}
.visual-chapter--compact picture{height:144px;min-height:0;max-height:144px;aspect-ratio:auto}
.visual-chapter--compact figcaption{display:block;padding:18px 20px;border-bottom:0}
.visual-chapter--compact .visual-chapter__meaning{font-size:1.2rem}
.project-visual--trace{--vc-position:52% 54%}.project-visual--scope{--vc-position:78% 25%}.project-visual--flow{--vc-position:65% 50%}.project-visual--bridge{--vc-position:56% 48%}.project-visual--assist{--vc-position:36% 55%}.project-visual--signal{--vc-position:20% 80%}
.project-visual--factu{--vc-position:52% 54%}.project-visual--point{--vc-position:65% 40%}.project-visual--factu .project-visual__identity{background:var(--vc-orange)}
.section:has(.project-visual){align-items:start}.section:has(.project-visual)>div{min-width:0}.section:has(.project-visual) h2{overflow-wrap:anywhere}
.project-detail{border-top:1px solid #b2b3b6;margin:0;padding:0;min-width:0}
.project-detail summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:20px;list-style:none;padding:21px 0;min-height:64px;font-size:1.1rem;font-weight:400;line-height:1.4;letter-spacing:-.025em;color:#001410;cursor:pointer;overflow-wrap:anywhere}
.project-detail summary::-webkit-details-marker{display:none}.project-detail summary::after{content:"+";justify-self:end;font-size:1.5rem;font-weight:300;line-height:1}.project-detail[open] summary::after{content:"−"}
.project-detail summary:focus-visible{outline:2px solid #001410;outline-offset:5px}
.project-detail>div{padding:0 34px 24px 0;color:#555b58;font-size:1rem;line-height:1.6}.project-detail>div>p:first-child{margin-top:0}.project-detail>div>p:last-child{margin-bottom:0}
/* Three readable phases, 1.4 s each. Text never fades or moves. */
.visual-chapter__flow::before,.visual-chapter__flow::after{top:17px;left:17px;right:calc(33.333% - 6px);height:2px;background:var(--vc-steel)}
.visual-chapter__flow::after{content:"";position:absolute;background:var(--vc-orange);transform-origin:left center}
.visual-chapter__flow li>span:first-child{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--vc-bean);border-radius:50%;font-size:.65rem;line-height:1;letter-spacing:0;background:var(--vc-echo)}
[data-motion="complete"] .visual-chapter__flow li>span:first-child{background:var(--vc-bean);color:var(--vc-echo)}
.visual-chapter__replay{display:inline-flex;align-items:center;gap:9px;justify-self:start;grid-column:2;margin:22px 0 0;padding:8px 0;min-height:44px;border:0;border-bottom:1px solid var(--vc-steel);background:none;color:var(--vc-bean);font:inherit;font-size:.76rem;line-height:1.4;text-align:left;cursor:pointer}
.visual-chapter__replay[hidden]{display:none}.visual-chapter__replay svg{flex-shrink:0}.visual-chapter__replay:hover{border-color:var(--vc-orange)}.visual-chapter__replay:focus-visible{outline:2px solid var(--vc-bean);outline-offset:5px}
.visual-chapter__phase{position:absolute;right:22px;top:22px;z-index:3;display:grid;gap:9px;padding:12px 14px;border-left:3px solid var(--vc-orange);background:var(--vc-bean);color:var(--vc-echo);pointer-events:none;width:148px;max-width:48%}
.visual-chapter__phase-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;height:4px}
.visual-chapter__phase-track>span{position:relative;background:var(--vc-steel);overflow:hidden}
.visual-chapter__phase-track>span::after{content:"";position:absolute;inset:0;background:var(--vc-orange);transform-origin:left center;transform:scaleX(0)}
[data-motion="complete"] .visual-chapter__phase-track>span::after{transform:scaleX(1)}
.visual-chapter__phase-name{font-size:.7rem;line-height:1.4;overflow-wrap:anywhere}
/* Three material planes open once on entry, including touch-only screens. */
.visual-chapter__shutters{display:none;position:absolute;inset:0;z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;pointer-events:none}
.visual-chapter__shutters>span{background:var(--vc-bean);border-bottom:4px solid var(--vc-orange);transform-origin:center top}
.prosa .visual-chapter{margin:32px 0 40px}
.prosa .visual-chapter__flow{padding:0}.prosa .visual-chapter__flow li{color:var(--vc-bean);line-height:1.45}.prosa .visual-chapter__meaning{color:var(--vc-bean);line-height:1.25}
[data-visual-chapter].is-entering .visual-chapter__image{animation:vc-image-in 1700ms cubic-bezier(.2,.7,.15,1) both}
[data-visual-chapter].is-entering .visual-chapter__shutters{display:grid}
[data-visual-chapter].is-entering .visual-chapter__shutters>span{animation:vc-plane-open 1000ms cubic-bezier(.18,.7,.2,1) both}
[data-visual-chapter].is-entering .visual-chapter__shutters>span:nth-child(2){animation-delay:160ms}
[data-visual-chapter].is-entering .visual-chapter__shutters>span:nth-child(3){animation-delay:320ms}
[data-visual-chapter].is-entering .visual-chapter__phase-track>span::after{animation:vc-phase-fill 1400ms linear both}
[data-visual-chapter].is-entering .visual-chapter__phase-track>span:nth-child(2)::after{animation-delay:1400ms}
[data-visual-chapter].is-entering .visual-chapter__phase-track>span:nth-child(3)::after{animation-delay:2800ms}
[data-visual-chapter].is-entering .visual-chapter__flow::after{animation:vc-route-in 4200ms linear both}
[data-visual-chapter].is-entering .visual-chapter__flow li>span:first-child{animation:vc-node-stage 1400ms linear both}
[data-visual-chapter].is-entering .visual-chapter__flow li:nth-child(2)>span:first-child{animation-delay:1400ms}
[data-visual-chapter].is-entering .visual-chapter__flow li:nth-child(3)>span:first-child{animation-delay:2800ms}
[data-visual-chapter][data-motion="paused"] .visual-chapter__image,[data-visual-chapter][data-motion="paused"] .visual-chapter__flow::after,[data-visual-chapter][data-motion="paused"] .visual-chapter__flow li>span:first-child{animation-play-state:paused}
[data-visual-chapter][data-motion="paused"] .visual-chapter__shutters>span,[data-visual-chapter][data-motion="paused"] .visual-chapter__phase-track>span::after{animation-play-state:paused}
@keyframes vc-plane-open{from{transform:translateY(0)}to{transform:translateY(-102%)}}
@keyframes vc-phase-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vc-image-in{from{transform:scale(1.045) translateY(1%);opacity:.68}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes vc-route-in{0%,23%{transform:scaleX(0)}33%,56%{transform:scaleX(.5)}66%,100%{transform:scaleX(1)}}
@keyframes vc-route-down{0%,23%{transform:scaleY(0)}33%,56%{transform:scaleY(.5)}66%,100%{transform:scaleY(1)}}
@keyframes vc-node-stage{0%{background:var(--vc-echo);color:var(--vc-bean);box-shadow:0 0 0 0 #e3452500;border-color:var(--vc-bean)}12%,85%{background:var(--vc-orange);color:var(--vc-bean);box-shadow:0 0 0 8px #e3452526;border-color:var(--vc-orange)}100%{background:var(--vc-orange);color:var(--vc-bean);box-shadow:0 0 0 0 #e3452500;border-color:var(--vc-orange)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .visual-chapter picture,.project-visual picture{transition:transform 350ms cubic-bezier(.2,.7,.15,1);transform-origin:center}
 .has-depth picture{transform:perspective(900px) rotateX(var(--vc-tilt-x,0deg)) rotateY(var(--vc-tilt-y,0deg)) scale(1.035)}
 .project-visual__identity{transition:transform 350ms ease,box-shadow 350ms ease}.has-depth .project-visual__identity{transform:translateY(-4px);box-shadow:6px 8px 0 #00141030}
}
@container(max-width:520px){
 .visual-chapter figcaption{grid-template-columns:1fr;gap:24px}
 .project-visual figcaption,.visual-chapter figcaption{padding:22px 20px}
 .visual-chapter__flow{grid-template-columns:1fr;gap:12px}
 .visual-chapter__flow::before,.visual-chapter__flow::after{left:17px;top:17px;bottom:17px;right:auto;width:2px;height:auto;transform-origin:center top}
 .visual-chapter__flow li{flex-direction:row;align-items:center;gap:18px}
 .visual-chapter__flow li>span:first-child{min-width:34px;flex-shrink:0;padding:0}
 .visual-chapter__flow li>span:last-child{padding-top:3px}
 [data-visual-chapter].is-entering .visual-chapter__flow::after{animation-name:vc-route-down}
 .visual-chapter__replay{grid-column:1;margin-top:16px}.visual-chapter__phase{right:12px;top:12px;padding:10px 12px;width:132px;max-width:46%}.visual-chapter__phase-name{font-size:.68rem}
 .project-visual__identity{padding:12px 16px}.project-visual__identity img{width:158px}
}
@media(max-width:800px){.visual-chapter{margin-bottom:44px}.visual-chapter picture{aspect-ratio:1.9/1;max-height:280px}.project-visual picture{max-height:260px}.visual-chapter--compact picture{max-height:144px}.visual-chapter--compact{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){[data-visual-chapter] *,[data-visual-chapter] *::before,[data-visual-chapter] *::after{animation:none!important;transition:none!important}.visual-chapter__image{transform:none!important;opacity:1!important}.visual-chapter__shutters{display:none!important}}