/* Landing · De principiante a creador de contenido profesional (UEES)
   Los estilos de layout van inline en index.html; aquí van animaciones, estados y responsive. */
html{scroll-behavior:smooth}
body{margin:0;background:#0D0F0C}
a{color:inherit}a:hover{color:inherit}
@keyframes mqL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mqR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.mqL{animation:mqL 42s linear infinite}
.mqR{animation:mqR 50s linear infinite}
.tape:hover .mqL,.tape:hover .mqR{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.mqL,.mqR{animation:none}html{scroll-behavior:auto}}
.hl{background:#0D0F0C;color:#FFFFFF;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fadeL{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.plus{transition:transform .2s ease}
details[open] .plus{transform:rotate(45deg)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #FFD326;outline-offset:3px}
.pfoto{isolation:isolate}
.pfoto img{filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;transition:filter .3s ease}
.pfoto:hover img{filter:none;mix-blend-mode:normal}
.mbar{display:none}
@media (max-width: 860px){.navlinks{display:none !important}.mbar{display:flex !important}}
/* ---- Ritmo vertical: un solo token para todas las secciones ---- */
.lp section:not(#inicio){padding-top:var(--sp) !important;padding-bottom:var(--sp) !important}
.lp section#cintas{padding-top:clamp(56px,5vw,72px) !important;padding-bottom:clamp(64px,7vw,104px) !important}
/* La viñeta ya dice la facultad: el texto de arriba sobra */
.heroEyebrow{display:none}
/* ---- Tablet y laptop chica: columnas apiladas ---- */
@media (max-width: 1140px){
  .heroInner{padding-top:clamp(108px,16vw,132px) !important}
  .heroCol{min-height:0 !important;align-self:auto !important;display:flex;justify-content:center}
  .heroFig{position:relative !important;right:auto !important;bottom:auto !important;width:min(100%,520px) !important;margin:0 auto -56px !important}
  .tuCol{min-height:clamp(330px,66vw,520px) !important;margin-top:40px}
  .tuWord{font-size:clamp(190px,40vw,340px) !important;top:0 !important;left:-6px !important}
  .tuFig{width:min(100%,500px) !important;left:auto !important;right:0 !important;bottom:-8px !important}
  .ctaStar{width:72px !important;height:72px !important}
  .ses > div:last-child{flex-basis:100% !important;padding-left:120px}
  .tGrid > div{flex:1 1 calc(50% - 8px) !important;box-sizing:border-box}
  .lp section#temas.temas{padding-top:150px !important}
  .temasFig{width:320px !important;top:-190px !important;right:-20px !important}
}
/* ---- Celular ---- */
@media (max-width: 700px){
  .navTabSlot{width:88px !important}
  .navTab{padding:8px 10px 10px !important}
  .navTab img{width:68px !important}
  .ueesTab{padding:10px 14px 12px !important}
  .ueesTab img{width:200px !important}
  .lp section#temas.temas{padding-top:250px !important}
  .temasFig{width:260px !important;top:-300px !important;right:-20px !important}
  .heroFig{margin-bottom:-40px !important}
  .cdCard{align-self:stretch !important}
  .cdRow > div{min-width:0 !important;flex:1 1 0}
  .ctaStar{display:none}
  .ses > div:last-child{padding-left:0}
  .swipeHint{display:block !important}
  .pRow{flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 6px;gap:14px !important;scrollbar-width:none}
  .pRow::-webkit-scrollbar{display:none}
  .pRow > div{flex:0 0 76% !important;scroll-snap-align:start}
  .flinks{flex-direction:column;gap:14px !important}
}
@media (max-width: 860px){body{padding-bottom:72px}}