/* =====================================================================
   Framework Visual M3 — theme.css
   Curso: Técnicas de Investigación Administrativa y Preventiva (SGT)
   Deriva del framework IJ v5, re-tematizado a la línea gráfica M3:
   estética clara e institucional, acentos vino + dorado, Fraunces + Poppins.
   ===================================================================== */

:root {
  /* Institucionales */
  --marino-oj:#213653; --marino-700:#1a2a44; --azul-eej:#1862ab; --azul-600:#14528f;
  /* Acentos */
  --vino:#7a323d; --vino-700:#612833; --dorado:#cba14b; --dorado-200:#e7d3a3;
  /* Fondos claros */
  --blanco:#ffffff; --perla:#fbf9fa; --bruma:#f5f5f7; --marfil:#f8f6f7;
  /* Formas decorativas */
  --azul-velo:#e9eef4; --azul-niebla:#dbe1ed; --arena:#f8f1e5; --lino:#faf5ef;
  /* Texto */
  --texto:#213653; --texto-mid:#46556e; --texto-soft:#8a93a3; --linea:#e4e7ee;
  /* Tipografía */
  --font-display:'Fraunces','Playfair Display',Georgia,serif;
  --font-body:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-accent:'Poppins','Segoe UI',sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
}

/* RESET + BASE */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--bruma);color:var(--texto-mid);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}

/* READING PROGRESS BAR (top) */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--vino),var(--dorado));z-index:9999;width:0%;transition:width .15s linear;}

/* STICKY TOP BAR */
.sticky-topbar{position:fixed;top:0;left:0;right:0;height:54px;z-index:9998;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 18px;background:var(--marino-oj);box-shadow:0 2px 10px rgba(33,54,83,.18);}
.topbar-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#fff;font-size:1.1rem;cursor:pointer;transition:all .3s var(--ease);text-decoration:none;}
.topbar-btn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px);}
body{padding-top:54px;}

/* PARALLAX / REVEALS */
[data-parallax]{will-change:transform;transform:translate3d(0,0,0);}
.parallax-group{position:relative;overflow:hidden;}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .7s ease,transform .7s var(--ease);}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .7s ease,transform .7s var(--ease);}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1);}
.reveal-scale.visible{opacity:1;transform:scale(1);}
.delay-1{transition-delay:.1s!important;}.delay-2{transition-delay:.2s!important;}.delay-3{transition-delay:.35s!important;}.delay-4{transition-delay:.5s!important;}.delay-5{transition-delay:.65s!important;}

/* KEYFRAMES */
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes floatSlow{0%,100%{transform:translate3d(0,0,0) rotate(0);}33%{transform:translate3d(5px,-7px,0) rotate(.4deg);}66%{transform:translate3d(-3px,-12px,0) rotate(-.3deg);}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.08);opacity:.8;}}
@keyframes eqBar{0%{height:3px;}50%{height:20px;}100%{height:6px;}}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 6px rgba(24,98,171,.14),0 6px 20px rgba(33,54,83,.2);}50%{box-shadow:0 0 0 14px rgba(24,98,171,0),0 6px 24px rgba(33,54,83,.12);}}

/* =====================================================================
   S0 — UNIT HERO (carátula clara: texto + ilustración con play)
   ===================================================================== */
.unit-hero{position:relative;background:var(--bruma);padding:clamp(24px,4vw,48px) clamp(16px,4vw,48px) clamp(20px,3vw,32px);}
.hero-card{max-width:1040px;margin:0 auto;background:linear-gradient(135deg,var(--blanco),var(--azul-velo));border:1px solid var(--linea);border-radius:22px;box-shadow:0 18px 50px rgba(33,54,83,.10);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(28px,4vw,52px);overflow:hidden;position:relative;}
.hero-card::before{content:'';position:absolute;left:0;top:0;width:6px;height:100%;background:linear-gradient(180deg,var(--vino),var(--dorado));}
.hero-overline{font-family:var(--font-accent);font-weight:600;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--azul-eej);margin-bottom:14px;}
.hero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.02;color:var(--marino-oj);margin-bottom:14px;letter-spacing:-.01em;}
.hero-subtitle{font-family:var(--font-accent);font-weight:500;font-size:clamp(.82rem,1.3vw,1.05rem);letter-spacing:.04em;color:var(--texto-mid);text-transform:uppercase;margin-bottom:18px;}
.unit-pill{display:inline-flex;align-items:center;gap:8px;background:var(--vino);color:var(--blanco);font-family:var(--font-accent);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 18px;border-radius:8px;box-shadow:0 6px 16px rgba(122,50,61,.25);}

/* Hero media = ilustración con reproductor inline */
.hero-media{position:relative;}
.video-wrap{position:relative;width:100%;aspect-ratio:4/3;background:radial-gradient(circle at 60% 40%,var(--azul-velo),var(--azul-niebla));border-radius:18px;overflow:hidden;cursor:pointer;border:1px solid var(--linea);box-shadow:0 10px 30px rgba(33,54,83,.12);transition:transform .5s var(--ease),box-shadow .5s ease;}
.video-wrap:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(33,54,83,.18);}
.video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .5s ease;}
.video-wrap.playing video{opacity:1;}
.video-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity .5s ease;}
.video-wrap.playing .video-poster{opacity:0;pointer-events:none;}
.video-poster .bg-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;opacity:1;transition:transform 1s ease;}
.video-wrap:hover .video-poster .bg-icon{transform:scale(1.03);}
.play-btn{position:relative;z-index:3;width:70px;height:70px;border-radius:50%;background:var(--marino-oj);display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease);box-shadow:0 0 0 6px rgba(24,98,171,.14),0 8px 24px rgba(33,54,83,.3);}
.play-btn .play-icon{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:20px solid #fff;margin-left:5px;}
.play-btn .pause-icon{display:none;width:16px;height:20px;border-left:5px solid #fff;border-right:5px solid #fff;}
.video-wrap.playing .play-btn .play-icon{display:none;}
.video-wrap.playing .play-btn .pause-icon{display:block;}
.video-wrap:hover .play-btn{transform:scale(1.1);background:var(--azul-eej);}
.video-wrap.playing .play-btn{background:var(--azul-eej);animation:playPulse 2.5s ease-in-out infinite;}
.player-status{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-family:var(--font-accent);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(33,54,83,.45);z-index:5;}
.video-wrap.playing .player-status{color:rgba(255,255,255,.8);}
.audio-visualizer{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);display:flex;gap:4px;align-items:flex-end;height:24px;z-index:5;opacity:0;transition:opacity .5s ease;}
.video-wrap.playing .audio-visualizer{opacity:1;}
.audio-visualizer span{width:3px;border-radius:2px;background:linear-gradient(180deg,var(--dorado),var(--azul-eej));animation:eqBar 1.2s ease-in-out infinite alternate;}
.audio-visualizer span:nth-child(2){animation-delay:.12s;}.audio-visualizer span:nth-child(3){animation-delay:.24s;}.audio-visualizer span:nth-child(4){animation-delay:.36s;}.audio-visualizer span:nth-child(5){animation-delay:.08s;}.audio-visualizer span:nth-child(6){animation-delay:.2s;}.audio-visualizer span:nth-child(7){animation-delay:.32s;}
.video-progress-bar{position:absolute;bottom:34px;left:0;width:100%;height:4px;background:rgba(33,54,83,.12);z-index:11;cursor:pointer;}
.video-progress-fill{height:100%;background:linear-gradient(90deg,var(--azul-eej),var(--dorado));width:0%;transition:width .1s linear;}
.video-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:6px 12px;background:linear-gradient(0deg,rgba(26,42,68,.82) 0%,rgba(26,42,68,.3) 70%,transparent 100%);z-index:10;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
.video-wrap:hover .video-controls,.video-wrap.controls-visible .video-controls{opacity:1;transform:translateY(0);pointer-events:auto;}
.video-controls button{background:none;border:none;cursor:pointer;padding:4px;color:rgba(255,255,255,.85);display:flex;align-items:center;transition:color .2s ease,transform .2s ease;}
.video-controls button:hover{color:var(--dorado);transform:scale(1.15);}
.video-controls button svg{width:20px;height:20px;fill:currentColor;}
.vc-time{font-family:var(--font-accent);font-size:.7rem;font-weight:600;color:rgba(255,255,255,.75);white-space:nowrap;min-width:80px;}
.vc-spacer{flex:1;}
.vc-volume-group{display:flex;align-items:center;gap:4px;}
.vc-volume-slider{-webkit-appearance:none;appearance:none;width:56px;height:4px;background:rgba(255,255,255,.25);border-radius:2px;outline:none;cursor:pointer;}
.vc-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--dorado);cursor:pointer;}
.vc-volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--dorado);border:none;cursor:pointer;}
.vc-speed{font-family:var(--font-accent);font-size:.65rem;font-weight:700;min-width:28px;text-align:center;}
.vc-speed.active{color:var(--dorado);}
.video-wrap:fullscreen{width:100%;height:100%;border-radius:0;}
.video-wrap:fullscreen video{object-fit:contain;}

/* Hero action buttons */
.hero-actions{max-width:1040px;margin:18px auto 0;display:flex;gap:14px;flex-wrap:wrap;}
.btn-action{flex:1;min-width:220px;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 18px;font-family:var(--font-accent);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:none;border-radius:11px;cursor:pointer;transition:all .35s var(--ease);}
.btn-action--lesson{background:var(--marino-oj);color:#fff;box-shadow:0 6px 18px rgba(33,54,83,.22);}
.btn-action--lesson:hover{transform:translateY(-2px);background:var(--marino-700);box-shadow:0 10px 28px rgba(33,54,83,.32);}
.btn-action--download{background:var(--blanco);color:var(--marino-oj);border:1.5px solid var(--marino-oj);}
.btn-action--download:hover{transform:translateY(-2px);background:var(--azul-velo);}
.btn-action svg{width:17px;height:17px;fill:currentColor;flex-shrink:0;}

/* =====================================================================
   SECTION NUMBER BADGE + TITLES
   ===================================================================== */
.section-num{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:38px;padding:0 10px;background:var(--vino);color:#fff;font-family:var(--font-display);font-weight:900;font-size:1.05rem;border-radius:9px;box-shadow:0 5px 14px rgba(122,50,61,.22);flex-shrink:0;}
.section-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.section-head h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.3rem,2.6vw,2rem);color:var(--marino-oj);line-height:1.1;}
.section-overline{font-family:var(--font-accent);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-eej);margin-bottom:18px;}

/* TITLE SECTION (intro de la unidad) */
.section-title-hero{position:relative;background:var(--perla);padding:clamp(40px,7vw,84px) clamp(20px,5vw,80px) clamp(28px,4vw,48px);overflow:hidden;}
.title-content{max-width:900px;margin:0 auto;position:relative;}
.main-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,5vw,4rem);line-height:1;color:var(--marino-oj);margin:14px 0;}
.main-title span{color:var(--vino);}
.subtitle-line{width:min(380px,80%);height:3px;background:linear-gradient(90deg,var(--dorado),transparent);margin-bottom:16px;transform-origin:left;}
.section-subtitle{font-family:var(--font-accent);font-weight:500;font-size:clamp(.85rem,1.3vw,1.1rem);color:var(--texto-mid);max-width:640px;}
.section-subtitle strong{color:var(--marino-oj);font-weight:700;}

/* CONTENT SECTIONS */
.section-text{position:relative;padding:clamp(36px,5vw,68px) clamp(20px,5vw,60px);}
.content-wrap{max-width:860px;margin:0 auto;}
.section-text p,.context-inner p{font-size:clamp(.98rem,1.15vw,1.15rem);line-height:1.85;color:var(--texto-mid);margin-bottom:1.3em;}
.section-text p strong,.context-inner p strong{color:var(--marino-oj);font-weight:600;}
.section-text p em,.context-inner p em{font-style:italic;color:var(--vino);}
.bg-perla{background:var(--perla);}.bg-bruma{background:var(--bruma);}.bg-marfil{background:var(--marfil);}.bg-arena{background:var(--arena);}.bg-lino{background:var(--lino);}.bg-velo{background:var(--azul-velo);}
.float-img-right{float:right;width:clamp(120px,22vw,240px);margin:0 0 22px 30px;filter:drop-shadow(0 8px 20px rgba(33,54,83,.12));transition:transform .5s ease;shape-outside:margin-box;}
.float-img-right:hover{transform:scale(1.04) rotate(-1deg);}
.float-img-left{float:left;width:clamp(120px,22vw,240px);margin:0 30px 22px 0;filter:drop-shadow(0 8px 20px rgba(33,54,83,.12));}
.context-section{position:relative;padding:clamp(44px,7vw,88px) clamp(20px,5vw,60px);}
.context-inner{max-width:860px;margin:0 auto;}

/* SECTION AUDIO PILL (azul EEJ) */
.section-audio{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;background:var(--azul-eej);border-radius:24px;margin:10px 0;cursor:pointer;transition:all .35s var(--ease);box-shadow:0 4px 12px rgba(24,98,171,.22);border:none;}
.section-audio:hover{background:var(--azul-600);transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,98,171,.3);}
.section-audio .sa-icon{font-size:.72rem;color:#fff;}
.section-audio .sa-label{font-family:var(--font-accent);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;}
.section-audio.playing{background:var(--marino-oj);box-shadow:0 0 16px rgba(24,98,171,.3);}
.section-audio.playing .sa-icon{animation:pulse 1.5s ease-in-out infinite;}

/* CALLOUT / NOTE BOX (caja destacada con ilustración) */
.note-box{max-width:860px;margin:clamp(20px,3vw,40px) auto;background:var(--arena);border-radius:16px;padding:clamp(24px,4vw,40px);display:flex;gap:clamp(18px,3vw,32px);align-items:center;box-shadow:0 8px 24px rgba(122,50,61,.08);position:relative;overflow:hidden;}
.note-box::before{content:'';position:absolute;left:0;top:0;width:5px;height:100%;background:linear-gradient(180deg,var(--dorado),var(--vino));}
.note-box .note-img{flex-shrink:0;width:clamp(80px,12vw,130px);animation:float 6s ease-in-out infinite;}
.note-box .note-text p{font-size:clamp(.92rem,1.1vw,1.05rem);line-height:1.8;color:var(--texto-mid);}
.note-box .note-text p strong{color:var(--vino);font-weight:600;}

/* FLIP CARDS */
.treaties-section{position:relative;background:var(--azul-velo);padding:clamp(48px,7vw,88px) clamp(20px,5vw,60px);overflow:hidden;}
.treaties-inner{max-width:1000px;margin:0 auto;position:relative;z-index:2;}
.treaties-intro{text-align:center;margin-bottom:clamp(28px,4vw,52px);}
.treaties-intro .overline{font-family:var(--font-accent);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-eej);margin-bottom:8px;}
.treaties-intro h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.8rem);color:var(--marino-oj);line-height:1;}
.treaties-intro .divider{width:80px;height:3px;background:linear-gradient(90deg,var(--dorado),transparent);margin:14px auto 0;}
.treaties-intro p{font-size:clamp(.9rem,1.1vw,1.05rem);color:var(--texto-mid);max-width:600px;margin:14px auto 0;}
.treaties-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.5vw,28px);}
.treaty-card{text-align:center;perspective:900px;cursor:pointer;min-height:300px;}
.treaty-card .card-inner{position:relative;width:100%;height:100%;min-height:300px;transition:transform .6s var(--ease);transform-style:preserve-3d;}
.treaty-card.flipped .card-inner{transform:rotateY(180deg);}
.treaty-card .card-front,.treaty-card .card-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;border:1px solid var(--linea);overflow:hidden;background:var(--blanco);box-shadow:0 8px 24px rgba(33,54,83,.08);}
.treaty-card .card-front{padding:clamp(22px,3vw,36px) clamp(16px,2vw,22px);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .5s ease,transform .5s ease;}
.treaty-card .card-front::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;transition:height .4s ease;background:var(--vino);}
.treaty-card:nth-child(2) .card-front::after{background:var(--azul-eej);}
.treaty-card:nth-child(3) .card-front::after{background:var(--dorado);}
.treaty-card:nth-child(4) .card-front::after{background:var(--marino-oj);}
.treaty-card:hover .card-front{box-shadow:0 14px 36px rgba(33,54,83,.16);}
.treaty-card:hover .card-front::after{height:6px;}
.treaty-card .card-back{padding:clamp(22px,3vw,32px) clamp(16px,2vw,22px);transform:rotateY(180deg);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;background:var(--perla);}
.treaty-card .card-back p{font-size:clamp(.82rem,.95vw,.95rem);color:var(--texto-mid);line-height:1.7;margin-bottom:8px;}
.treaty-card .card-back .flip-hint{font-size:.7rem;color:var(--texto-soft);margin-top:6px;}
.treaty-card .treaty-icon{width:clamp(70px,12vw,120px);margin:0 auto 14px;filter:drop-shadow(0 6px 16px rgba(33,54,83,.14));transition:transform .6s cubic-bezier(.34,1.56,.64,1);}
.treaty-card:hover .treaty-icon{transform:scale(1.08) translateY(-4px);}
.treaty-card h3{font-family:var(--font-accent);font-weight:700;font-size:clamp(.72rem,1vw,.88rem);letter-spacing:.04em;color:var(--marino-oj);margin-bottom:4px;line-height:1.4;}
.treaty-card .flip-indicator{position:absolute;bottom:10px;right:12px;font-size:.65rem;color:var(--texto-soft);font-family:var(--font-accent);z-index:2;}

/* INTERACTIVE ICONS + INFO PANEL */
.interactive-section{position:relative;background:var(--marfil);padding:clamp(44px,7vw,84px) clamp(20px,5vw,60px);}
.interactive-inner{max-width:960px;margin:0 auto;text-align:center;}
.icons-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,40px);margin:clamp(24px,4vw,44px) 0;}
.icon-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(120px,16vw,160px);}
.icon-item .icon-img{width:clamp(70px,10vw,110px);filter:drop-shadow(0 6px 16px rgba(33,54,83,.12));}
.icon-item .icon-label{font-family:var(--font-accent);font-weight:600;font-size:.78rem;color:var(--marino-oj);line-height:1.3;}
.plus-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--vino);color:#fff;border:none;border-radius:20px;padding:6px 14px;font-family:var(--font-accent);font-weight:700;font-size:.7rem;cursor:pointer;transition:all .3s var(--ease);box-shadow:0 4px 12px rgba(122,50,61,.22);}
.plus-btn:hover,.plus-btn.active{background:var(--azul-eej);transform:translateY(-2px);}
.info-panel{max-width:680px;margin:0 auto;background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:clamp(22px,3vw,34px);box-shadow:0 12px 32px rgba(33,54,83,.1);text-align:left;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,padding .4s ease;padding-top:0;padding-bottom:0;}
.info-panel.open{max-height:600px;opacity:1;padding-top:clamp(22px,3vw,34px);padding-bottom:clamp(22px,3vw,34px);}
.info-panel .panel-content{display:flex;gap:16px;align-items:flex-start;}
.info-panel .panel-number{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--vino);color:#fff;font-family:var(--font-display);font-weight:900;display:flex;align-items:center;justify-content:center;}
.info-panel .info-panel-text{font-size:clamp(.9rem,1.05vw,1.02rem);line-height:1.75;color:var(--texto-mid);}
.info-panel .panel-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.info-panel .panel-nav button{width:34px;height:34px;border-radius:8px;border:1px solid var(--linea);background:var(--perla);color:var(--marino-oj);cursor:pointer;transition:all .25s ease;}
.info-panel .panel-nav button:hover{background:var(--azul-velo);}

/* QUOTE */
.quote-section{position:relative;background:var(--marino-oj);border-radius:16px;padding:clamp(30px,5vw,52px) clamp(24px,5vw,46px);margin:clamp(22px,4vw,44px) auto;max-width:860px;overflow:hidden;box-shadow:0 14px 40px rgba(33,54,83,.22);}
.quote-section::before{content:'';position:absolute;left:0;top:0;width:5px;height:100%;background:linear-gradient(180deg,var(--dorado),var(--vino));}
.quote-section .quote-mark{position:absolute;top:-6px;left:18px;font-family:var(--font-display);font-size:clamp(5rem,11vw,9rem);font-weight:900;color:#fff;opacity:.07;line-height:1;pointer-events:none;}
.quote-layout{display:flex;gap:clamp(18px,3vw,36px);align-items:flex-start;position:relative;z-index:1;}
.quote-img{flex-shrink:0;width:clamp(80px,13vw,150px);border-radius:12px;animation:float 6s ease-in-out infinite;}
.quote-text{flex:1;}
.quote-text p{font-size:clamp(.92rem,1.1vw,1.08rem);color:rgba(255,255,255,.86);line-height:1.8;margin-bottom:.9em;}
.quote-text p strong{color:var(--dorado-200);font-weight:600;}
.quote-attribution{margin-top:14px;font-family:var(--font-accent);font-weight:500;font-size:.76rem;color:var(--dorado);letter-spacing:.06em;display:flex;align-items:center;gap:8px;}
.quote-attribution::before{content:'';width:22px;height:2px;background:var(--dorado);}

/* CONCLUSION / PREMISES */
.conclusion-section{background:var(--azul-velo);padding:clamp(44px,7vw,84px) clamp(20px,5vw,60px);}
.conclusion-inner{max-width:880px;margin:0 auto;}
.premises-list{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.premise-item{display:flex;gap:16px;align-items:flex-start;background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:18px 22px;box-shadow:0 6px 18px rgba(33,54,83,.06);}
.premise-number{flex-shrink:0;width:38px;height:38px;border-radius:9px;background:var(--vino);color:#fff;font-family:var(--font-display);font-weight:900;display:flex;align-items:center;justify-content:center;}
.premise-item p{font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.7;color:var(--texto-mid);}

/* CONTINUE BAR + back */
.next-unit-bar{background:var(--perla);border-top:1px solid var(--linea);padding:clamp(28px,4vw,48px) clamp(20px,5vw,60px);}
.next-unit-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:18px;}
.nav-back{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--marino-oj);background:transparent;color:var(--marino-oj);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.1rem;transition:all .3s var(--ease);flex-shrink:0;}
.nav-back:hover{background:var(--marino-oj);color:#fff;}
.unit-progress{flex:1;height:6px;background:var(--azul-niebla);border-radius:3px;overflow:hidden;}
.unit-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--dorado),var(--vino));border-radius:3px;}
.btn-next-unit{display:inline-flex;align-items:center;gap:12px;padding:15px 38px;background:var(--marino-oj);color:#fff;font-family:var(--font-accent);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:11px;cursor:pointer;transition:all .35s var(--ease);box-shadow:0 6px 20px rgba(33,54,83,.25);flex-shrink:0;}
.btn-next-unit:hover{transform:translateY(-2px);background:var(--marino-700);}
.btn-next-unit::after{content:'\2192';font-size:1.1rem;transition:transform .3s ease;}
.btn-next-unit:hover::after{transform:translateX(5px);}

/* INSIGNIA (medalla de cierre de unidad) */
.insignia-section{background:linear-gradient(160deg,var(--marino-oj),var(--marino-700));padding:clamp(48px,8vw,96px) clamp(20px,5vw,60px);text-align:center;color:#fff;}
.insignia-medal{width:clamp(120px,18vw,180px);margin:0 auto 24px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.3));animation:float 5s ease-in-out infinite;}
.insignia-section h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.6rem);margin-bottom:12px;}
.insignia-section p{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 8px;}
.insignia-badge{display:inline-block;margin-top:18px;background:var(--dorado);color:var(--marino-700);font-family:var(--font-accent);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;padding:10px 24px;border-radius:24px;}

/* FOOTER */
.site-footer{background:var(--marino-700);padding:30px 24px;text-align:center;}
.site-footer p{font-family:var(--font-accent);font-size:.76rem;color:rgba(255,255,255,.45);letter-spacing:.06em;margin:2px 0;}
.site-footer p strong{color:rgba(255,255,255,.7);}

/* TOAST */
.m3-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--marino-oj);color:#fff;font-family:var(--font-accent);font-size:.8rem;font-weight:600;padding:12px 24px;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:all .4s var(--ease);z-index:10000;}
.m3-toast.show{opacity:1;transform:translate(-50%,0);}

/* RESPONSIVE */
@media (max-width:820px){
  .hero-card{grid-template-columns:1fr;text-align:center;}
  .hero-card::before{width:100%;height:6px;}
  .hero-media{max-width:360px;margin:0 auto;}
  .hero-overline,.hero-subtitle{text-align:center;}
}
@media (max-width:768px){
  .float-img-right,.float-img-left{float:none;margin:16px auto;width:180px;}
  .quote-layout{flex-direction:column;}
  .quote-img{align-self:center;}
  .treaties-grid{grid-template-columns:1fr;}
  .next-unit-inner{flex-wrap:wrap;}
  .unit-progress{order:3;width:100%;}
}
@media (max-width:480px){
  .main-title,.hero-title{font-size:1.7rem;}
  .hero-actions{flex-direction:column;}
  .btn-action{min-width:0;}
}

/* =====================================================================
   PORTADA DE CURSO + ORIENTACIÓN + CIERRE
   ===================================================================== */
/* Hero de bienvenida del curso */
.course-hero{position:relative;background:linear-gradient(160deg,var(--marino-oj),var(--marino-700));padding:clamp(40px,7vw,90px) clamp(20px,5vw,60px) clamp(32px,5vw,64px);color:#fff;text-align:center;overflow:hidden;}
.course-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(203,161,75,.16),transparent 45%),radial-gradient(circle at 10% 90%,rgba(24,98,171,.18),transparent 45%);pointer-events:none;}
.course-hero-inner{max-width:1000px;margin:0 auto;position:relative;z-index:1;}
.course-eyebrow{font-family:var(--font-accent);font-weight:600;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dorado);margin-bottom:18px;}
.course-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,5vw,4rem);line-height:1.02;margin-bottom:18px;}
.course-lead{font-family:var(--font-accent);font-weight:400;font-size:clamp(.95rem,1.4vw,1.2rem);color:rgba(255,255,255,.82);max-width:760px;margin:0 auto 26px;line-height:1.7;}
.course-hero .video-wrap{max-width:680px;margin:0 auto;aspect-ratio:16/9;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.08),rgba(255,255,255,.02));}
.course-hero .video-poster .bg-icon{filter:brightness(0) invert(1);opacity:.4;}
.course-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:26px;font-family:var(--font-accent);font-size:.74rem;letter-spacing:.04em;color:rgba(255,255,255,.6);}
.course-meta span{display:inline-flex;align-items:center;gap:8px;}
.course-meta span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dorado);}

/* Grid de 9 unidades */
.units-block{background:var(--bruma);padding:clamp(44px,7vw,88px) clamp(20px,5vw,60px);}
.units-inner{max-width:1100px;margin:0 auto;}
.units-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2.5vw,26px);margin-top:clamp(26px,4vw,44px);}
.unit-card{display:flex;flex-direction:column;gap:12px;background:var(--blanco);border:1px solid var(--linea);border-radius:18px;padding:clamp(20px,2.6vw,30px);text-decoration:none;box-shadow:0 8px 22px rgba(33,54,83,.07);transition:all .4s var(--ease);position:relative;overflow:hidden;}
.unit-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--vino),var(--dorado));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.unit-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(33,54,83,.16);border-color:var(--azul-niebla);}
.unit-card:hover::before{transform:scaleX(1);}
.unit-card-num{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;background:var(--vino);color:#fff;font-family:var(--font-display);font-weight:900;font-size:1.5rem;border-radius:12px;box-shadow:0 6px 16px rgba(122,50,61,.24);}
.unit-card-kicker{font-family:var(--font-accent);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-eej);}
.unit-card-title{font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.25;color:var(--marino-oj);}
.unit-card-go{margin-top:auto;font-family:var(--font-accent);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vino);display:inline-flex;align-items:center;gap:6px;}
.unit-card-go::after{content:'\2192';transition:transform .3s ease;}
.unit-card:hover .unit-card-go::after{transform:translateX(5px);}

/* Bloque normativo rector (orientación) */
.norm-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:clamp(22px,3vw,38px) 0;}
.norm-pillar{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:22px;text-align:center;box-shadow:0 6px 18px rgba(33,54,83,.06);transition:transform .35s var(--ease);}
.norm-pillar:hover{transform:translateY(-3px);}
.norm-pillar .np-sigla{font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--vino);margin-bottom:6px;}
.norm-pillar .np-name{font-family:var(--font-accent);font-size:.82rem;color:var(--texto-mid);line-height:1.4;}

/* Glosario de siglas (native details/summary) */
.glossary{max-width:860px;margin:clamp(20px,3vw,36px) auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;}
.gloss-item{background:var(--blanco);border:1px solid var(--linea);border-radius:12px;overflow:hidden;}
.gloss-item summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:var(--font-accent);font-weight:600;font-size:.86rem;color:var(--marino-oj);display:flex;align-items:center;justify-content:space-between;transition:background .25s ease;}
.gloss-item summary::-webkit-details-marker{display:none;}
.gloss-item summary::after{content:'+';color:var(--vino);font-weight:700;font-size:1.1rem;transition:transform .3s ease;}
.gloss-item[open] summary::after{transform:rotate(45deg);}
.gloss-item summary:hover{background:var(--azul-velo);}
.gloss-item .gloss-def{padding:0 18px 16px;font-size:.86rem;line-height:1.6;color:var(--texto-mid);}

/* Sección final (cierre/diploma) */
.final-section{background:linear-gradient(160deg,var(--marino-oj),var(--marino-700));padding:clamp(48px,8vw,100px) clamp(20px,5vw,60px);text-align:center;color:#fff;}
.final-inner{max-width:820px;margin:0 auto;}
.final-section .video-wrap{max-width:620px;margin:0 auto 30px;aspect-ratio:16/9;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.08),rgba(255,255,255,.02));}
.final-section h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,4vw,3rem);margin-bottom:14px;}
.final-section p{color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 10px;}
.final-downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px;}
.final-downloads .btn-action{flex:0 1 auto;min-width:200px;}
.final-downloads .btn-action--download{background:var(--dorado);color:var(--marino-700);border:none;}
.final-downloads .btn-action--lesson{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.4);}

@media (max-width:600px){.units-grid{grid-template-columns:1fr;}}