*{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; }

.nm{font-size: 1.1rem; margin:0; text-align:center; font-weight: 100; padding-top: 1%; padding-bottom: 0; text-decoration: underline; letter-spacing: .06rem; } 
.container{padding-top: 2%;}

.prologo{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;}

.borde{padding-top: 0rem;position: relative;}

.text1{padding: 2rem 0rem 10rem 0rem;color: rgb(37, 37, 37);width: 60%;}

.text1 p{font-size: 1.1rem;line-height: 96%;margin: 0% 11% 1.5% 9.5%;text-align: justify;letter-spacing: .05rem;}

.text1 p::first-letter{font-size: 4rem;color: rgb(37, 37, 37);float: left;margin: .5% 1.4% 3% 1%;}

.caratulas{align-items: center;justify-content: center;width: 28vw;aspect-ratio: 3/4;object-fit: cover;/* border: 2px solid firebrick; */}

:root{ --mast-h: 20px; } /* ajusta si tu header mide más/menos */

@media screen and (max-width: 800px) {

    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;}
  
  h2{font-size: .9rem;}
    .portada.hidden {opacity: 0;visibility: hidden;pointer-events: none; /* no bloquea clics */}
  

    .nm{font-size: .8rem; padding-top: 2%; letter-spacing: .06rem;}
    .caratulas{width: 99vw;}
    
    .prologo{padding-top: 3vh;display: flex;flex-direction: column;}
    .borde{padding-top: 1rem;}
    #pc{display: none;}
    .text2{ font-size: 2rem;top: -.2rem;}
    .text1{position: relative;width: 115%;padding: 0rem 0rem 4rem 0rem;}
    .text1 p{padding-top: 2%;color: rgb(27, 27, 27);font-size: .7rem;line-height: 95%;margin: 1.5% 8.5%; letter-spacing: .06rem;}
    .text1 p::first-letter{font-size: 4.5rem;padding: 6% 1% 0% 4%;color: rgb(0, 0, 0);float: left;}
}

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

    .side{ width: 24.5%;}
    .side-nav a{ padding-left: 23%; font-size: 22px;}
    .text1{position: relative;width: 105%;padding: 0rem 0rem 4rem 0rem;}
    .caratulas{width: 92vw;}
    #pc{display: none;}
    .prologo{padding-top: 0%;display: flex;flex-direction: column;}
  
  }