/* Guía de marca de Origen en formato de presentación: 1920×1080 escalada al hueco, panel con el porqué a la derecha (abajo en móvil). */
:root{
  --bg:#0D0A0A; --bg2:#120E0E; --card:#181313; --line:#2E2523; --line-red:#D92B35;
  --fg:#F2ECE4; --soft:#D3CAC3; --muted:#A39A93; --red:#FF4D55; --red-deep:#3A0A0E;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.5;overflow:hidden}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
#app{height:100%;display:grid;grid-template-rows:auto 1fr auto}

/* barra superior */
.top{display:flex;align-items:center;gap:12px;padding:10px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--bg2);min-width:0}
.brand{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.brand b{font-weight:800;letter-spacing:-.01em;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;flex:none}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--red);color:#1A0608}
.tbtn{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.tbtn[aria-pressed="true"]{border-color:var(--line-red);color:var(--red)}
@media (max-width:640px){.tbtn .lbl{display:none}.seg button{padding:6px 9px}}

/* zona principal */
.main{display:flex;min-height:0}
.stage-wrap{position:relative;flex:1;min-width:0;overflow:hidden;background:#050303}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.panel{width:430px;flex:none;border-left:1px solid var(--line);background:var(--bg2);overflow-y:auto;overscroll-behavior:contain}
.panel[hidden]{display:none}
@media (max-width:1099px){
  body{overflow:auto}
  #app{height:auto;min-height:100%}
  .main{flex-direction:column}
  .stage-wrap{flex:none;width:100%;aspect-ratio:16/9;max-height:62vh}
  .panel{width:auto;border-left:0;border-top:1px solid var(--line);overflow:visible}
}

/* diapositivas: equivalencias del formato de Slides */
.slide{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;isolation:isolate}
.slide [data-backdrop]{z-index:-1}
.slide:not(.on){display:none!important}
.slide *{box-sizing:border-box;margin:0}
.slide table{border-collapse:collapse}
.slide td,.slide th{padding:.35em .6em;border-bottom:1px solid #2B2524;text-align:left;vertical-align:top}
.slide th{font-weight:700}
.slide img{max-width:none}
@media (prefers-reduced-motion:no-preference){.slide.on{animation:fadein .35s ease}}
@keyframes fadein{from{opacity:.25}to{opacity:1}}

/* zonas que se despliegan */
.explica .slide .hot{cursor:pointer;outline:3px dashed rgba(255,59,66,.55);outline-offset:10px;border-radius:inherit}
.explica .slide .hot:not([style*="position:absolute"]){position:relative}
.explica .slide .hot::after{content:"+";position:absolute;top:-26px;right:-26px;width:52px;height:52px;border-radius:50%;background:var(--red);color:#1A0608;font:800 40px/52px var(--sans);text-align:center;box-shadow:0 0 0 6px rgba(255,59,66,.25),0 0 30px rgba(255,59,66,.6);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.explica .slide .hot::after{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(255,59,66,.08),0 0 40px rgba(255,59,66,.7)}}
.explica .slide .hot:hover{outline-color:var(--red)}

/* desplegable sobre la diapositiva */
.sheet{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(780px,calc(100% - 24px));max-height:min(64%,calc(100% - 24px));display:flex;flex-direction:column;background:rgba(18,13,13,.97);border:1px solid var(--line-red);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(255,40,48,.25)}
@media (prefers-reduced-motion:no-preference){.sheet:not([hidden]){animation:unfold .28s cubic-bezier(.2,.8,.2,1)}}
@keyframes unfold{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.sheet-head{display:flex;gap:12px;align-items:flex-start;padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.sheet-head div{flex:1;min-width:0}
.kick{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0}
.sheet h3{margin:2px 0 0;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:20px;line-height:1}
.sheet-body{padding:12px 18px 18px;overflow-y:auto;color:var(--soft)}
@media (max-width:1099px){.sheet{position:fixed;bottom:max(10px,env(safe-area-inset-bottom,0px));max-height:70vh;z-index:20}}

/* texto de las explicaciones */
.rich p,.rich ul,.rich ol{margin:0 0 10px}
.rich ul,.rich ol{padding-left:20px}
.rich li{margin-bottom:4px}
.rich b{color:var(--fg)}
.rich a{color:var(--red)}

/* panel */
.panel-in{padding:16px 16px 28px;display:flex;flex-direction:column;gap:12px}
.ph .kick{margin-bottom:4px}
.ph h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.ph p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
details.blk{border:1px solid var(--line);border-radius:14px;background:var(--card)}
details.blk>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;gap:10px;align-items:center;font-weight:700}
details.blk>summary::-webkit-details-marker{display:none}
details.blk>summary .t{flex:1;min-width:0}
details.blk>summary .t small{display:block;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
details.blk>summary::after{content:"+";color:var(--red);font-size:22px;line-height:1;transition:transform .2s}
details.blk[open]>summary::after{transform:rotate(45deg)}
details.blk .rich{padding:0 14px 12px;color:var(--soft)}
details.blk.key{border-color:var(--line-red);background:#1A0C0E}
.notes{white-space:pre-line}
.lbl-h{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:8px 2px 0}

/* barra inferior */
.bar{display:flex;align-items:center;gap:10px;padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));border-top:1px solid var(--line);background:var(--bg2)}
.nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:20px}
.nav:hover{border-color:var(--line-red);color:var(--red)}
.where{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.where .row{display:flex;gap:10px;align-items:baseline;min-width:0}
.where b{font-variant-numeric:tabular-nums;font-weight:800;flex:none}
.where span{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{display:flex;gap:3px;height:6px}
.prog i{flex:1;border-radius:3px;background:#2B2524;cursor:pointer}
.prog i.done{background:#6E1A1E}
.prog i.cur{background:var(--red)}

/* índice */
.index{position:fixed;inset:0;z-index:30;background:rgba(5,3,3,.94);overflow-y:auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.index-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:28px}
@media (max-width:900px){.index-in{grid-template-columns:1fr}}
.index h2{font-size:28px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em}
.index .sub{color:var(--muted);margin:0 0 16px}
.ihead{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.fase{margin-bottom:14px}
.fase h4{margin:0 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.slist{display:flex;flex-direction:column;gap:2px}
.slist button,.clist button{display:flex;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:10px;padding:7px 10px;cursor:pointer;color:var(--soft)}
.slist button:hover,.clist button:hover{background:var(--card);color:var(--fg)}
.slist button b{font-variant-numeric:tabular-nums;color:var(--muted);width:26px;flex:none}
.slist button[aria-current="true"]{background:var(--red-deep);color:var(--fg)}
.featured{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.featured button{text-align:left;border:1px solid var(--line-red);background:#1A0C0E;border-radius:14px;padding:14px;cursor:pointer;color:var(--fg)}
.featured button small{display:block;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.featured button b{font-size:16px}
.clist{display:grid;grid-template-columns:1fr 1fr;gap:2px}
@media (max-width:520px){.clist,.featured{grid-template-columns:1fr}}
.help{color:var(--muted);font-size:13px;margin-top:6px}
.help kbd{border:1px solid var(--line);border-radius:5px;padding:0 5px;font-family:inherit;color:var(--soft)}

.brand b i{font-style:normal;color:var(--red)}
.rich .tagp{color:var(--red);font-weight:700}


@font-face{font-family:"Archivo";src:url(../fonts/Archivo-Variable.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/InstrumentSerif-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* contenido de las diapositivas */
.slide{background:#0D0A0A;color:#F2ECE4;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;padding:92px 120px 128px;gap:34px;font-size:24px;line-height:1.4}
.slide .row{display:flex;flex-direction:row}
.slide .col{display:flex;flex-direction:column}
.slide .grow{flex:1;min-height:0}
.slide .eb{font-size:21px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#A39A93;display:flex;gap:18px;align-items:center}
.slide .eb b{color:#F2ECE4}
.slide .h{font-weight:800;font-stretch:84%;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;text-wrap:balance}
.slide .it{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:0;color:#D92B35;font-size:1.12em;line-height:.8}
.slide .dot{color:#D92B35}
.slide .lead{font-size:32px;line-height:1.45;color:#A39A93}
.slide .lead b{color:#F2ECE4;font-weight:600}
.slide .sm{font-size:22px;line-height:1.45;color:#A39A93}
.slide .sm b{color:#F2ECE4}
.slide .lbl{font-size:18px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#A39A93}
.slide .card{display:flex;flex-direction:column;background:#151010;border:1px solid #2E2523;border-radius:28px;padding:34px}
.slide .foot{position:absolute;left:120px;right:120px;bottom:50px;display:flex;justify-content:space-between;gap:40px;font-size:16px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#A39A93}
.slide .losa{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:36px 40px;border-radius:28px;overflow:hidden;background:#2a2624 url(../img/granito.jpg) center/cover;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px rgba(0,0,0,.6)}
.slide .losa::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,10,10,.35),rgba(13,10,10,.75));z-index:-1}
.slide .losa{isolation:isolate}
.slide .losa .big{font-size:76px;font-weight:800;font-stretch:84%;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
.slide .losa.no .big{color:#A39A93;text-decoration:line-through;text-decoration-thickness:4px;text-decoration-color:rgba(163,154,147,.6)}
.slide .tile{display:flex;flex-direction:column;border:1px solid #2E2523;border-radius:26px;overflow:hidden;min-height:0}
.slide .tile .face{flex:1;display:flex;align-items:center;justify-content:center;background:#0D0A0A;min-height:0}
.slide .tile .cap{padding:18px 24px;background:#151010;font-size:22px;color:#A39A93}
.slide .tile .cap b{color:#F2ECE4}
.slide .fr{display:flex;flex-direction:column;justify-content:space-between;padding:30px 26px;min-width:0}
.slide .par{display:flex;align-items:center;gap:18px;padding:8px 18px 8px 8px;border-radius:16px;background:#151010;border:1px solid #2A2222;font-size:22px;color:#D3CAC3}
.slide .par i{display:flex;align-items:center;justify-content:center;width:62px;height:50px;border-radius:10px;font-style:normal;font-weight:800;font-size:26px;flex:none;border:1px solid #3A2F2D}
.slide .par span{flex:1}
.slide .par b{font-size:26px;font-weight:800;color:#F2ECE4;font-variant-numeric:tabular-nums}
.slide .gh{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.slide .esc{display:flex;align-items:baseline;gap:40px;padding:14px 0;border-bottom:1px solid #2E2523}
.slide .esc span{width:170px;flex:none;font-size:18px;color:#A39A93;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.slide .pin{display:flex;align-items:center;gap:14px;padding:12px 22px 12px 12px;border-radius:999px;background:rgba(13,10,10,.85);border:1px solid rgba(242,236,228,.3);font-size:22px;font-weight:700;color:#F2ECE4;white-space:nowrap}
.slide .pin i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#F2ECE4;color:#0D0A0A;font-style:normal;font-weight:800;font-size:20px}
#app:not(.explica) .only-ex{visibility:hidden}
.slide .card.row{flex-direction:row}
.explica .slide .hot.in::after{top:16px;right:16px}
.explica .slide .hot.far::after{top:-60px;right:-60px}
.rich .src{font-size:12.5px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.rich .src i{font-style:italic}
.ph .lbl-h{margin-top:0}

a.tbtn{text-decoration:none}