*{box-sizing:border-box}
body{padding:20px;color:#070707;}
body.lb-open,body.menu-open{overflow:hidden}

/* Top bar */
.mast{
  position:fixed;top:0;left:0;width:100%;
  z-index:13000;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));background:transparent;pointer-events:none
}
.brand,.ig{pointer-events:auto}
.brand{border:0;background:transparent;padding-left: .3%;margin:0;cursor:pointer}
.brand img{width:30px;display:block;}
.ig{display:flex;align-items:center;justify-content:center}
.ig img{width:38px;height:38px;display:block}

/* Side menu */
.backdrop{
  position:fixed;inset:0;z-index:12000;
  background:rgba(255,255,255,0);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease
}
.backdrop.show{opacity:1;visibility:visible}

.side{
  position:fixed;top:0;left:0;height:100dvh;width:min(8.75%,26vw);
  z-index:12500;transform:translateX(-150%);transition:transform .25s ease;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-right:1px solid rgba(0,0,0,.5);
  padding:calc(13px + env(safe-area-inset-top)) 18px 18px
}
.side.open{transform:translateX(0)}
.side-nav{display:flex;flex-direction:column}
.side-nav a{
  color:#000;text-decoration:none;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:300;font-size:24px;letter-spacing:-1px;
  padding:0px 0 0px 24%;
}
.side-nav a:hover{opacity:.7}
.portada{ display:none; }

.intro{padding-top: 1%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.titulo{margin: 0; padding: 0; font-size: 38px; font-family: 'Times New Roman', Times, serif; font-weight: lighter; text-align: center;}
.cita{ font-style: italic;  word-spacing: normal; padding: 0; margin: 14px;font-family: 'Times New Roman', Times, serif; text-align: justify;}
p{font-size: 1rem;}
.autor{margin: 0px; text-align: left; }


.video-block{max-width:1200px;margin:0 auto;padding: 5vh 0 7vh 0;}

.mobile-iframe-wrap{position:relative;width:100%;aspect-ratio:16/9.7;border-radius:12px;overflow:hidden;background:#000;}

.mobile-iframe-wrap iframe{width:100%;height:100%;border:0;display:block;}

.mobile-overlay{display:none;}

@media (max-width: 991px){
  .mobile-overlay{display:block;position:absolute;inset:0;z-index:5;background:transparent;}
  .video-block{padding: 2vh 0 3vh 0;}
}


@media screen and (max-width: 768px) {
  
  body{ height: 99vh;}

       /* Fullscreen menu, pero dejando espacio visual para el header */
  .side{width: 100vw;height: 100dvh;transform: translateX(-100%);border-right: none;
    /* para que los links no queden debajo del header */
    padding-top: calc(var(--mast-h) + env(safe-area-inset-top));padding-left: 16px;padding-right: 16px;padding-bottom: 24px;display: flex;align-items: center;justify-content: center;}
  .side.open{ transform: translateX(0); }
  .side-nav{width: 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap: 1vh;text-align:center;transform: translateY(-260px);}
  .side-nav a{margin: 0;padding: 0;letter-spacing: 0;font-family: Helvetica, Arial, sans-serif;font-weight: 500;font-size: clamp(22px, 4.5vw, 40px);line-height: .8;border: none;}
  /* backdrop más marcado */
  /* opcional: cuando el menú esté abierto, da un fondo al header para que se vea siempre */

  .brand img{width: 25px;}
  .ig img{width:30px;height:30px;}

  .intro{padding-top: 6%;}
  .titulo{font-size: 13px;}
  h2{font-size: .9rem;}
    .portada.hidden {opacity: 0;visibility: hidden;pointer-events: none; /* no bloquea clics */}

    p{font-size: .5rem;}
    .cita{margin: 22px 0px 17px 0px;}
    .autor{margin: 0px; }

  }
  
  @media only screen and (min-width: 800px) and (max-width: 991px) {

    .side{ width: 24.5%;}
    .side-nav a{ padding-left: 23%; font-size: 22px;}
  }