/* Portal Jornada Cedro. Identidad del evento y firma institucional de Ejecutivos de Elite. */
:root {
  color-scheme: light;
  --blue: #0789d4;
  --navy: #073978;
  --magenta: #c300bd;
  --ink: #123b65;
  --muted: #50677d;
  --line: #dbe6ef;
  --paper: #f4f8fc;
  --sans: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --honeycomb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='312' viewBox='0 0 180 312'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='1.3'%3E%3Cpath d='M90 0 180 52v104l-90 52L0 156V52ZM0 156l90 52v104M90 208l90-52M90 0v-52'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1,h2,p { margin-top: 0; }
a { color: inherit; }
::selection { background: #c300bd; color: #fff; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 10; background: #fff; padding: 12px 20px; }
.skip-link:focus { top: 10px; }
.site-header { background: #101111; color: #E6E2DA; }
.header-inner { max-width: 1328px; min-height: 84px; margin: auto; padding: 8px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 20px; }
.brand-logo { display: block; width: 66px; height: auto; }
.brand-divider { width: 1px; height: 30px; background: #A6824A; opacity: .6; }
.brand-property { font-size: 16px; font-weight: 500; line-height: 1.5; }
.brand-property > span { display: block; font-size: 10px; font-weight: 300; color: #E6E2DA; opacity: .7; }
.header-note { color: #E6E2DA; font-size: 11px; }
.header-note > span { color: #A6824A; padding-right: 8px; }
.portal { width: 100%; }
.access-gate { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(40px,6vw,90px); max-width: 1328px; padding: 64px 48px 72px; margin: auto; align-items: center; }
body:has(.access-gate:not([hidden])) { background: var(--blue); }
.access-gate::before { content: ''; position: absolute; z-index: -1; inset: 0; background-image: var(--honeycomb); mask-image: linear-gradient(120deg,transparent 12%,#000 90%); pointer-events: none; }
.welcome { position: relative; color: #fff; }
.event-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 13px; color: #fff; border: 1px solid #ffffff66; border-radius: 5px; font: 500 11px/1.5 var(--mono); letter-spacing: .14em; }
.event-label > span { width: 8px; height: 8px; background: #fff; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.team-label { font: 400 10px/1.6 var(--mono); letter-spacing: .12em; margin-bottom: 24px; }
h1 { font: 800 clamp(46px,5.5vw,76px)/1.04 var(--sans); letter-spacing: -.055em; margin-bottom: 30px; }
.welcome h1 > span { display: inline-block; position: relative; isolation: isolate; padding: 0 10px 8px 0; }
.welcome h1 > span::before { content: ''; position: absolute; z-index: -1; background: var(--magenta); inset: 10px -16px -3px -14px; transform: rotate(-3deg); box-shadow: 5px 6px 0 #07397855; }
.welcome-copy { font-size: 16px; line-height: 1.8; margin: 34px 0 30px; max-width: 430px; }
.team-path { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; border-top: 1px solid #ffffff55; padding-top: 26px; max-width: 480px; }
.team-path > div { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.path-icon { display: grid; place-items: center; width: 37px; height: 42px; margin-bottom: 12px; color: var(--navy); background: #fff; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); font: 500 11px var(--mono); }
.team-path strong { font-size: 15px; font-weight: 700; }
.team-path div > span:last-child { font-size: 11px; color: #fff; margin-top: 3px; }
.welcome-signature { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: 30px 0 0; }
.welcome-signature > span { font-size: 24px; }
.gate-panel { min-width: 0; position: relative; background: #fff; border: 1px solid #fff; border-radius: 20px; box-shadow: 0 22px 50px #07397830; overflow: hidden; }
.panel-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; background: #f4f8fc; border-bottom: 1px solid var(--line); color: var(--navy); }
.eyebrow { font: 400 10px/1.6 var(--mono); letter-spacing: .09em; }
.panel-top > span:last-child { color: var(--magenta); font-size: 23px; line-height: 1; }
.access-form { padding: 28px 32px 20px; }
.gate-title { font: 700 32px/1.15 var(--sans); letter-spacing: -.035em; margin-bottom: 12px; color: var(--navy); }
.gate-description { color: var(--muted); font-size: 13px; line-height: 1.7; margin-bottom: 24px; max-width: 340px; }
.gate-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; font-size: 12px; font-weight: 500; }
.gate-field input { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #bdccda; border-radius: 7px; background: #fff; color: var(--ink); font: 400 16px var(--sans); transition: border-color .15s,box-shadow .15s; }
.gate-field input::placeholder { color: #64788a; opacity: 1; font-size: 13px; }
.gate-field input:hover { border-color: var(--blue); }
.gate-field input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gate-submit { display: block; width: 100%; min-height: 52px; margin-top: 6px; padding: 12px 24px; border: 0; border-radius: 8px; background: var(--magenta); color: #fff; font: 700 15px var(--sans); cursor: pointer; transition: background .15s; }
.gate-submit:hover:not(:disabled) { background: #a1009c; }
.gate-submit:disabled { opacity: .65; cursor: wait; }
.gate-hint { color: var(--muted); font-size: 10px; text-align: center; max-width: 260px; line-height: 1.6; margin: 14px auto 0; }
.gate-feedback { margin: 0; font-size: 12px; }
.gate-feedback:not(:empty) { margin-top: 12px; padding: 12px; border-left: 3px solid var(--magenta); background: #fff2fc; color: var(--navy); }
.panel-bottom { padding: 14px 24px; text-align: center; font-size: 11px; border-top: 1px solid var(--line); color: var(--muted); }
.panel-bottom > span { color: var(--blue); font-size: 9px; margin-right: 7px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px max(24px,calc((100% - 1232px)/2)); background: #fff; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.site-footer strong { color: var(--navy); font-weight: 500; }
.module-list { display: flex; flex-direction: column; gap: 28px; max-width: 1120px; padding: 40px 40px 64px; margin: auto; counter-reset: lesson; }
.library-header { position: relative; isolation: isolate; overflow: hidden; background: var(--blue); color: #fff; border-radius: 16px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.library-header::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--honeycomb); mask-image: linear-gradient(90deg,transparent,#000); }
.library-header h1 { font-size: clamp(30px,3.6vw,44px); margin-bottom: 18px; line-height: 1.12; }
.library-header h1 > span { font-weight: 400; }
.library-header p:last-child { margin: 0; font-size: 13px; }
.library-team { flex: 0 0 220px; border-left: 3px solid var(--magenta); padding: 10px 0 10px 24px; }
.library-team > span { display: block; font: 400 9px var(--mono); letter-spacing: .08em; }
.library-team strong { display: block; font-size: 20px; line-height: 1.4; margin: 16px 0; }
.learning-guide { border: 1px solid var(--line); background: #fff; border-radius: 10px; }
.learning-guide summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; cursor: pointer; font-weight: 500; font-size: 13px; }
.learning-guide summary::-webkit-details-marker { display: none; }
.learning-guide summary > span { color: var(--magenta); font-size: 22px; }
.learning-guide[open] summary > span { transform: rotate(45deg); }
.learning-guide ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; padding: 6px 24px 24px 44px; margin: 0; font-size: 12px; }
.learning-guide li { color: var(--magenta); }
.learning-guide strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.learning-guide li span { color: var(--muted); }
.library-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 12px; }
.library-bar h2 { margin: 0; font: 700 24px/1.3 var(--sans); letter-spacing: -.025em; }
.library-bar .eyebrow { color: var(--muted); font-size: 9px; }
.library-bar .eyebrow > span { color: var(--magenta); padding-left: 10px; }
.module-card { counter-increment: lesson; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.module-heading { display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.module-marker { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 40px; background: #eaf5fd; color: var(--navy); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); font: 500 12px var(--mono); }
.module-marker::before { content: counter(lesson,decimal-leading-zero); }
.module-title { margin: 0; font: 700 20px/1.4 var(--sans); letter-spacing: -.02em; }
.module-format { margin-left: auto; white-space: nowrap; color: var(--muted); font: 400 9px var(--mono); }
.video-embed { position: relative; aspect-ratio: 16/9; background: #101111; }
.video-embed iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.module-caption { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 16px 24px; color: var(--muted); font-size: 11px; }
.module-caption > span { color: var(--magenta); font-size: 18px; }

/* Clase todavía sin grabar: la tarjeta va sin reproductor. Se marca con borde
   punteado y en gris para que se lea como «viene después», y no como un video
   que no carga. */
.module-card--pendiente { border-style: dashed; background: #f7fbfe; }
.module-card--pendiente .module-marker { background: #eef2f5; color: var(--muted); }
.module-card--pendiente .module-title { color: var(--muted); }
.module-card--pendiente .module-caption { border-top: 1px solid var(--line); }
.noscript-note { padding: 24px; background: #fff; color: var(--navy); }
@media (max-width: 1050px) {
 .header-inner { padding-inline: 28px; }
 .access-gate { padding: 48px 28px; gap: 32px; grid-template-columns: 1fr 1fr; }
 h1 { font-size: 56px; }
 .panel-top { padding-inline: 24px; }
 .access-form { padding-inline: 24px; }
 .gate-title { font-size: 29px; }
 .field-row { grid-template-columns: 1fr; gap: 0; }
 .welcome-copy { font-size: 14px; }
 .team-path { gap: 8px; }
 .team-path div > span:last-child { max-width: 90px; }
 .library-team { flex-basis: 180px; }
}
@media (max-width: 760px) {
 .header-inner { min-height: 74px; padding: 8px 22px; }
 .brand-logo { width: 56px; }
 .brand { gap: 14px; }
 .brand-property { font-size: 14px; }
 .header-note { display: none; }
 .access-gate { grid-template-columns: 1fr; gap: 32px; padding: 34px 22px 40px; max-width: 560px; }
 .event-label { margin-bottom: 14px; font-size: 10px; }
 .team-label { font-size: 9px; margin-bottom: 18px; }
 h1 { font-size: clamp(42px,9vw,60px); }
 .welcome-copy { margin-top: 26px; margin-bottom: 22px; }
 .team-path { padding-top: 18px; }
 .team-path strong { font-size: 13px; }
 .path-icon { width: 28px; height: 32px; margin-bottom: 8px; font-size: 9px; }
 .welcome-signature { display: none; }
 .gate-title { font-size: 30px; }
 .field-row { grid-template-columns: 1fr 1fr; gap: 12px; }
 .site-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; }
 .module-list { padding: 24px 18px 40px; gap: 22px; }
 .library-header { padding: 26px; }
 .library-header h1 { font-size: 34px; }
 .library-team { display: none; }
 .learning-guide ol { grid-template-columns: 1fr; gap: 18px; }
 .library-bar { align-items: flex-start; flex-direction: column; gap: 10px; }
 .library-bar h2 { font-size: 22px; }
 .module-heading { padding: 18px; gap: 12px; flex-wrap: wrap; }
 .module-title { flex: 1; font-size: 18px; }
 .module-format { width: 100%; margin-left: 48px; }
 .module-caption { padding: 14px 18px; font-size: 10px; }
 .desktop-break { display: none; }
}
@media (max-width: 380px) { .field-row { grid-template-columns: 1fr; gap: 0; } .access-form,.panel-top { padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; } }

/* Navegación del espacio de preparación; los videos siguen renderizados por app.js. */
.module-list { position: relative; max-width: 1328px; padding-left: 280px; }
.portal-sidebar { position: absolute; top: 40px; bottom: 64px; left: 40px; width: 204px; }
.portal-sidebar nav { position: sticky; top: 24px; }
.sidebar-label { font: 500 9px var(--mono); letter-spacing: .1em; color: var(--muted); margin: 0 0 12px; }
.sidebar-label:not(:first-child) { margin-top: 30px; }
.portal-sidebar a { display: flex; gap: 12px; padding: 13px 12px; border-radius: 8px; text-decoration: none; font: 400 10px var(--mono); color: var(--blue); }
.portal-sidebar a span { font: 500 13px var(--sans); color: var(--ink); }
.portal-sidebar a:hover, .portal-sidebar a:focus-visible { background: #e3f0fb; }
.sidebar-note { margin-top: 30px; padding: 18px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
#bienvenida, #programa, .module-card { scroll-margin-top: 24px; }
.welcome-message { padding: 28px 8px 0; }
.welcome-message h2, .program-section h2 { font-size: 27px; letter-spacing: -.03em; margin-bottom: 12px; line-height: 1.3; }
.welcome-message p, .program-intro { font-size: 14px; color: var(--muted); max-width: 650px; }
.program-link { display: inline-flex; align-items: center; gap: 25px; color: var(--navy); text-decoration: none; font-size: 13px; font-weight: 700; padding-block: 8px; }
.program-link > span { color: var(--magenta); }
.program-section { padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.program-section > .eyebrow { color: var(--blue); }
.program-agenda { padding: 0; margin: 26px 0; list-style: none; }
.program-agenda li { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.agenda-number { color: var(--magenta); font: 500 12px var(--mono); padding-top: 5px; }
.program-agenda h3 { font-size: 16px; line-height: 1.5; margin: 0 0 6px; }
.program-agenda p { margin: 0; font-size: 13px; color: var(--muted); }
.speaker { display: inline-block; padding: 2px 9px; margin-left: 8px; border-radius: 5px; background: #eaf5fd; color: var(--navy); font-size: 11px; font-weight: 500; vertical-align: middle; }
.bring-note { background: var(--paper); padding: 18px; border-left: 3px solid var(--blue); border-radius: 4px; font-size: 13px; }
.bring-note p { margin: 6px 0 0; color: var(--muted); }
@media (max-width: 1050px) { .module-list { padding-left: 240px; padding-right: 28px; } .portal-sidebar { left: 28px; width: 180px; } .library-team { display: none; } }
@media (max-width: 760px) {
 .module-list { padding: 22px 18px 40px; }
 .portal-sidebar { position: static; width: auto; }
 .portal-sidebar nav { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
 .sidebar-label, .sidebar-note { display: none; }
 .portal-sidebar a { padding: 10px 6px; gap: 8px; }
 .portal-sidebar a span { font-size: 11px; }
 .program-section { padding: 22px 18px; }
 .welcome-message h2, .program-section h2 { font-size: 24px; }
 .speaker { margin-left: 4px; }
}