/* Tanda 12 · AH v4. Layered on the published case CSS (caso-carrusel-3d.css); the scene only takes over once
   tunel.js has a WebGL renderer (.tn-ready). Without it the page is the published case with the shared bar. */
.tn-stage,.tn-overview,.tn-chapter-nav,.tn-badge,.tn-reading-h1{display:none}
.tn-ready .tn-stage{display:block;position:fixed;inset:0;z-index:0;pointer-events:none}
.tn-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tn-ascii{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.tn-ascii[hidden]{display:none}
/* Guard screen: while three.js and the scene load, only a quiet dark screen shows (the entrance animation covers the
   rest of the loading). If anything fails, tn-off restores the published page. Without JS this never applies. */
html.tn-js:not(.tn-ready):not(.tn-off):not(.tn-early) body>*{visibility:hidden}
html.tn-js:not(.tn-ready):not(.tn-off):not(.tn-early) body::before{content:'PROJECT: BETTER';position:fixed;left:0;right:0;top:50%;text-align:center;font:400 11px/1 var(--mono);letter-spacing:.3em;color:var(--muted);opacity:0;animation:tn-guard .6s .5s forwards}
@keyframes tn-guard{to{opacity:.8}}
/* v6 · cover without waiting: if the scene is not ready after a moment (slow connections), the inline script in the
   head shows the cover, its index and a still picture of the plates (tn-early) placed where the live plates will be;
   tunel.js then fades the plates in over it without the entrance. With tn-off (the plain page) none of this applies. */
.tn-still{display:none}
.tn-early:not(.tn-off) .tn-still{display:block;position:fixed;z-index:0;object-fit:contain;pointer-events:none;opacity:0;transition:opacity .5s}
.tn-early:not(.tn-off) .tn-still.is-loaded{opacity:1}
.tn-early:not(.tn-off) body{overflow:hidden}
/* Until the scene is ready (guard and cover) the case content is not laid out at all: hidden with visibility it still
   fetched and decoded its pictures, which took bandwidth from three.js and, in WebKit, held the main thread ~3.5 s
   (measured 2026-10-13). tn-ready and tn-off bring it back. */
html.tn-js:not(.tn-ready):not(.tn-off) main,html.tn-js:not(.tn-ready):not(.tn-off) footer{display:none}
.tn-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Shared case bar (D-013): the Home's language — small mono signature, one row, language pill on the right —
   plus an unambiguous way back and a single entry to the parts of this case. */
.tn-bar{display:flex;align-items:center;gap:18px;padding:16px 30px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px;color:var(--muted);position:relative;z-index:5}
.tn-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 11px/1 var(--mono);letter-spacing:.22em;color:var(--muted);text-decoration:none;white-space:nowrap}
.tn-brand:hover{color:var(--ink)}
.tn-where{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-left:18px;border-left:1px solid var(--line)}
.tn-bar-end{margin-left:auto;display:flex;align-items:center;gap:18px}
.tn-legacy{display:flex;gap:22px}
.tn-legacy a,.tn-header-parts{text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.tn-legacy a:hover,.tn-header-parts:hover{color:var(--ink)}
.tn-header-parts{display:none}
.tn-bar #lang{font:400 11px/1 var(--mono);letter-spacing:.1em;background:none;border:1px solid rgba(255,255,255,.14);color:var(--muted);border-radius:100px;padding:9px 16px;cursor:pointer;min-height:34px;position:relative}
.tn-bar #lang::after{content:'';position:absolute;inset:-5px 0}
.tn-bar #lang:hover{border-color:var(--accent);color:var(--accent-soft)}
:is(.tn-ready,.tn-early:not(.tn-off)) .tn-bar{position:fixed;top:0;left:0;right:0;backdrop-filter:blur(14px);background:rgba(8,8,10,.42)}
:is(.tn-ready,.tn-early:not(.tn-off)) .tn-legacy{display:none}
.tn-mode-chapter .tn-header-parts,.tn-mode-linear .tn-header-parts{display:inline-flex}
/* The bar waits for the plates to compile, then fades in. */
.tn-mode-intro:not(.tn-intro-ui) .tn-bar{opacity:0;visibility:hidden}
.tn-intro-ui .tn-bar{transition:opacity .9s,visibility .9s}

/* Intro and plate overview: the stage is the page; the case cover and its index live here (D-014/D-016). */
.tn-mode-intro body,.tn-mode-overview body{overflow:hidden}
.tn-mode-intro main,.tn-mode-intro footer,.tn-mode-overview main,.tn-mode-overview footer{display:none}
.tn-mode-overview .tn-stage{pointer-events:auto}
:is(.tn-ready,.tn-early:not(.tn-off)) .tn-overview:not([hidden]){display:grid;position:fixed;inset:0;z-index:2;pointer-events:none;
  grid-template-rows:1fr auto;padding:calc(var(--tn-header,68px) + 34px) max(50px,calc((100% - 1240px)/2)) 26px;gap:16px}
.tn-overview>*{pointer-events:auto}
/* The cover block lets the pointer through to the plates; only the index and links take clicks. */
.tn-overview>.tn-overview-left{pointer-events:none}
.tn-overview-left .tn-parts{pointer-events:auto}
.tn-overview-left{align-self:start;max-width:560px;display:grid;gap:30px}
.tn-overview-copy{max-width:470px}
.tn-overview-title{font-size:clamp(40px,4vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin:14px 0 16px}
.tn-overview-title em{font-style:normal}
.tn-overview-lead{font-size:17px;line-height:1.6;color:var(--ink);max-width:42ch}
.tn-overview-note{margin-top:10px;font-size:13px;color:var(--muted)}
.tn-mode-intro:not(.tn-intro-cover) .tn-overview-left{opacity:0;visibility:hidden}
.tn-overview-left{transition:opacity .5s}
.tn-mode-intro:not(.tn-intro-ui) .tn-parts{opacity:0;visibility:hidden}
.tn-parts{transition:opacity .6s,visibility .6s}
/* Editorial index: a table of contents with the plate colour, the part's name and what it holds. */
.tn-toc-title{margin:0 0 10px;font:400 11px/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tn-parts ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:2px 22px}
.tn-part{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;text-decoration:none;padding:9px 12px 9px 14px;min-height:44px;
  border-left:2px solid rgba(255,255,255,.08);border-radius:0 10px 10px 0;transition:border-color .25s,background-color .25s}
.tn-num{display:inline-flex;align-items:center;gap:7px;font:400 11px/1.7 var(--mono);letter-spacing:.09em;color:var(--muted);grid-row:span 2}
.tn-chip{width:8px;height:8px;border-radius:50%;background:var(--disc);flex:none}
.tn-name{font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.tn-sub{grid-column:2;font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px}
/* Lit together with its plate (aura colour = plate colour, never the violet accent). */
.tn-part.is-hot,.tn-part:hover{border-left-color:var(--disc);background:rgba(255,255,255,.035)}
.tn-part.is-hot .tn-num{color:var(--disc)}
.tn-part:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
/* Secondary actions as quiet links; the skip control during the intro as a pill. */
.tn-overview-actions{display:flex;gap:26px;justify-content:flex-start;align-items:center}
.tn-overview-actions .tn-linear,.tn-overview-actions .tn-replay{background:none;border:0;padding:12px 0;min-height:44px;color:var(--muted);font:400 13px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.2)}
.tn-overview-actions .tn-linear::after{content:' ↓'}
.tn-overview-actions .tn-replay::after{content:' ↺'}
.tn-overview-actions .tn-linear:hover,.tn-overview-actions .tn-replay:hover{color:var(--ink);text-decoration-color:currentColor}
.tn-overview-actions .tn-skip{margin-left:auto;background:none;color:var(--ink);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:10px 20px;min-height:44px;font:500 14px var(--sans);cursor:pointer}
.tn-overview-actions .tn-skip:hover{border-color:var(--accent);color:var(--accent-soft)}
.tn-overview button[hidden]{display:none}

/* Reading a part: plate on the left (30 %, 34 % on medium screens), the published section on the right; the plate stays still (D-016). */
.tn-mode-chapter [data-part]:not(.tn-on){display:none}
/* The browser's own jump to #part (with the published scroll padding) must land at the top of the part, not 47 px down. */
.tn-mode-chapter [data-part]{scroll-margin-top:100vh}
.tn-mode-chapter footer{display:none}
.tn-mode-chapter .tn-reading-h1,.tn-mode-linear .tn-reading-h1{display:block}
.tn-mode-chapter main{position:relative;z-index:1;margin-left:var(--tn-col,30vw);min-height:100svh;background:var(--bg);padding-top:var(--tn-header,68px);padding-bottom:110px;transition:opacity .35s;border-left:1px solid var(--line)}
.tn-mode-chapter main .wrap{width:min(1240px,calc(100% - 72px))}
/* The published layout was drawn for the full width; inside the reading column some blocks need to stack. */
.tn-mode-chapter .paired-chapters{grid-template-columns:1fr}
.tn-mode-chapter .section-heading{flex-direction:column;align-items:flex-start;gap:20px}
/* v5 reading layout: the published blocks were drawn for the full page. In the column they start right under the bar,
   keep a comfortable measure, and the paired chapters put text and screenshots side by side instead of stacked. */
.tn-mode-chapter main [data-part].tn-on{padding-top:32px}
.tn-mode-chapter .paired-chapters.tn-on{padding-top:0}
.tn-mode-chapter .paired-chapters article.tn-on{padding-top:32px}
.tn-mode-chapter main p{max-width:68ch}
@media(max-width:1199px){.tn-mode-chapter .evidence-columns{grid-template-columns:1fr;gap:32px}}
@media(min-width:1200px){
  .tn-mode-chapter .paired-chapters article[data-part].tn-on{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:56px;align-items:start}
  .tn-mode-chapter .paired-chapters article[data-part]>*{grid-column:1}
  .tn-mode-chapter .paired-chapters article[data-part]>.card-carousel{grid-column:2;grid-row:1 / span 6;margin-top:0}
  .tn-mode-chapter .paired-chapters article[data-part] h2{font-size:clamp(40px,3.4vw,56px)}
}
/* Evidence carousels (parts 03–06) read whole on arrival: the phone is sized to the window so phone, arrows, step
   title and description fit above the capsule; the 3D stage hugs the phone, the carousel starts at the top of the
   part and its controls sit right under the phone. Card width and depth scale with the phone height. */
.tn-mode-chapter .card-carousel,.tn-mode-chapter #recorrido .card-carousel{margin-top:0}
.tn-mode-chapter .card-carousel{--card-img-h:clamp(330px,calc(100svh - var(--tn-header,68px) - 330px),560px);--card-w:calc(var(--card-img-h) * .45);--depth-step:calc(var(--card-img-h) * .37)}
.tn-mode-chapter.js .card-carousel .card-carousel-stage{min-height:calc(var(--card-img-h) + 40px)}
.tn-mode-chapter .card-carousel-controls{margin-top:8px;gap:6px}
.tn-mode-chapter .card-desc{min-height:3.2em;margin-top:0}
/* Content fades out under the floating capsule instead of being cut by it. */
.tn-mode-chapter body::after{content:'';position:fixed;left:var(--tn-col,30vw);right:0;bottom:0;height:96px;z-index:3;pointer-events:none;background:linear-gradient(rgba(8,8,10,0),var(--bg) 78%)}
/* Part 01 is Context (D-014): the cover text moved to the plates, the identity picture and the facts stay. */
.tn-context-head{display:none}
.tn-ready .tn-context-head{display:block}
.tn-ready .hero .hero-copy{display:none}
.tn-ready .hero{grid-template-columns:1fr;gap:28px}
.tn-ready .hero-art{max-width:420px}
.tn-context-head h2{font-size:clamp(34px,3.4vw,52px)}
/* Navigation capsule floating over the reading column: where you are (opens the parts), back, next. */
.tn-ready .tn-chapter-nav:not([hidden]){display:flex;position:fixed;bottom:18px;left:calc(var(--tn-col,30vw) + (100vw - var(--tn-col,30vw)) / 2);transform:translateX(-50%);z-index:4;align-items:center;gap:6px;padding:6px;
  border-radius:100px;background:rgba(18,17,22,.86);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 34px rgba(0,0,0,.45);max-width:calc(100vw - var(--tn-col,30vw) - 48px)}
.tn-chapter-nav button{border:0;border-radius:100px;min-height:44px;padding:8px 18px;background:none;color:var(--ink);font:500 14px var(--sans);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.tn-chapter-nav .tn-back:hover{background:rgba(255,255,255,.07)}
.tn-back-num{font:400 11px/1 var(--mono);letter-spacing:.09em;color:var(--muted)}
.tn-back-name{color:var(--ink)}
.tn-chapter-nav .tn-prev{border:1px solid rgba(255,255,255,.14)}
.tn-chapter-nav .tn-prev:hover:not(:disabled){border-color:var(--accent);color:var(--accent-soft)}
.tn-chapter-nav .tn-next{background:var(--accent);color:var(--bg)}
.tn-chapter-nav .tn-next:hover{background:var(--accent-soft)}
.tn-chapter-nav button:disabled{opacity:.35;cursor:default}
.tn-chapter-nav .tn-short{display:none}
/* Next-part card at the end of each part: an invitation, with the next plate, its name and what it holds. */
.tn-nextcard{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:22px;width:min(760px,calc(100% - 72px));margin:72px auto 24px;padding:20px 26px 20px 22px;
  border-radius:24px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:border-color .25s,transform .25s}
.tn-nextcard:hover,.tn-nextcard:focus-visible{border-color:var(--disc);transform:translateY(-2px)}
.tn-nextcard:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px}
.tn-nextdisc{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#dfe4e3 0 6px,#7f8b8a 6px 9px,var(--disc) 9.5px);box-shadow:inset 0 0 0 5px rgba(0,0,0,.14),inset 0 0 0 7px rgba(255,255,255,.08)}
.tn-nexttext{display:grid;gap:4px}
.tn-nextkicker{font:400 11px/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tn-nextname{font-size:26px;line-height:1.15;letter-spacing:-.02em}
.tn-nextsub{font-size:15px;line-height:1.45;color:var(--muted)}
.tn-nextarrow{font-size:26px;color:var(--disc);transition:transform .25s}
.tn-nextcard:hover .tn-nextarrow{transform:translateX(4px)}
/* Index of the eight plates under the plate: 44 px targets, colour plus the written name of the current part. */
.tn-ready .tn-dots:not([hidden]){display:block;position:fixed;left:0;width:var(--tn-col,30vw);bottom:84px;z-index:2;text-align:center}
.tn-dots ol{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.tn-dot{width:44px;height:44px;background:none;border:0;padding:0;display:grid;place-items:center;cursor:pointer}
.tn-dot span{width:10px;height:10px;border-radius:50%;background:var(--disc);opacity:.55;transition:transform .2s,opacity .2s}
.tn-dot:hover span,.tn-dot:focus-visible span{opacity:1;transform:scale(1.25)}
.tn-dot[aria-current] span{opacity:1;transform:scale(1.45);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--disc)}
.tn-dots-label{margin:2px 0 0;font:400 11px/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* While reading on a phone the plate is covered by the text; a small badge keeps the part in sight (D-015/D-016). */
.tn-collapsed.tn-mode-chapter .tn-badge{display:grid}
.tn-badge{width:44px;height:44px;flex:none;border-radius:50%;place-items:center;background:var(--disc);color:#101012;font:500 12px/1 var(--mono);border:0;cursor:pointer}

/* Read it all: the published layout with a way back to the plates. */
.tn-mode-linear .tn-stage{display:none}
.tn-mode-linear main{padding-top:var(--tn-header,68px)}
.tn-mode-linear .tn-chapter-nav>:not(.tn-back){display:none}
.tn-mode-linear .tn-chapter-nav{left:auto!important;right:18px;transform:none!important}

@media(max-height:820px) and (min-width:901px){
  .tn-sub{display:none}
  .tn-overview-title{font-size:clamp(36px,3.4vw,50px)}
  .tn-overview-left{gap:20px}
}
@media(max-width:900px){
  .tn-bar{padding:12px 16px;gap:4px 12px;flex-wrap:wrap}
  .tn-legacy{order:3;flex-basis:100%;gap:18px;overflow-x:auto;scrollbar-width:none}
  .tn-legacy a{min-height:40px}
  :is(.tn-ready,.tn-early:not(.tn-off)) .tn-bar{flex-wrap:nowrap}
  .tn-brand-name,.tn-where{display:none}
  .tn-legacy{gap:14px;font-size:12px}
  :is(.tn-ready,.tn-early:not(.tn-off)) .tn-overview:not([hidden]){padding:calc(var(--tn-header,68px) + 16px) 20px 14px;gap:8px}
  .tn-overview-left{gap:0;max-width:none;height:100%;grid-template-rows:auto 1fr auto}
  .tn-overview-title{font-size:clamp(32px,9vw,44px);margin:8px 0 8px}
  .tn-overview-lead{font-size:15px}
  .tn-overview-note,.tn-sub{display:none}
  .tn-parts{align-self:end}
  .tn-parts ol{gap:0 10px}
  .tn-part{padding:6px 8px 6px 10px;column-gap:8px}
  .tn-name{font-size:15px}
  .tn-mode-chapter body::after{left:0;height:84px}
  .tn-mode-chapter main{margin-left:0;margin-top:calc(var(--tn-header,68px) + 38svh);padding-top:0;border-left:0;border-top:1px solid var(--line)}
  .tn-mode-chapter main .wrap{width:calc(100% - 40px)}
  .tn-ready .tn-chapter-nav:not([hidden]){left:12px;right:12px;bottom:12px;transform:none;max-width:none}
  .tn-chapter-nav button{padding:8px 13px;font-size:13px}
  .tn-chapter-nav .tn-long,.tn-back-name{display:none}
  .tn-chapter-nav .tn-short{display:inline}
  .tn-chapter-nav .tn-next{margin-left:auto}
  .tn-nextcard{width:calc(100% - 40px);grid-template-columns:52px 1fr auto;gap:14px;padding:16px;margin-top:56px}
  .tn-nextdisc{width:52px;height:52px}
  .tn-nextname{font-size:21px}
  .tn-ready .tn-dots:not([hidden]){position:absolute;width:auto;left:0;right:0;bottom:auto;top:calc(var(--tn-header,68px) + 38svh - 66px)}
  .tn-dot{width:36px}
}
/* Narrow phones: once the badge takes its place in the bar, the capsule below already opens the parts. */
@media(max-width:480px){.tn-collapsed.tn-mode-chapter .tn-header-parts{display:none}.tn-bar-end{gap:12px}}
/* Part headings receive focus on arrival (for assistive tech and keyboard); they are not controls, so no ring. */
main h2[tabindex="-1"]:focus{outline:none}
@media(prefers-reduced-motion:reduce){.tn-mode-chapter main,.tn-overview-left,.tn-intro-ui .tn-bar,.tn-nextcard,.tn-nextarrow,.tn-still{transition:none}}
/* v6 · closing contact (audit 2026-10-12): mail, LinkedIn and the way back, stacked beside the closing note. */
.cierre-acciones{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.cierre-acciones .button{justify-content:flex-start;gap:12px}
.cierre-acciones .primary{margin-top:0}
@media print{.tn-stage,.tn-overview,.tn-chapter-nav,.tn-dots,.tn-badge,.tn-nextcard{display:none!important}.tn-bar{position:static!important}.tn-mode-intro main,.tn-mode-overview main,.tn-mode-chapter main,[data-part]{display:block!important;margin:0!important}}