:root{--mast-h: 56px;}

*{box-sizing: border-box;}

body{margin: 0;background: #fff;color: #000;font-family: ui-monospace, "Courier New", monospace;}

/* Banner: oculto por default en desktop */
.portada{display: none;}

/* Header */
.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;margin: 0;padding-left: 0.3%;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;}

/* Backdrop */
.backdrop{position: fixed;inset: 0;z-index: 12000;background: rgba(255,255,255,0);opacity: 0;visibility: hidden;transition: opacity 0.22s ease, visibility 0.22s ease;}

.backdrop.show{opacity: 1;visibility: visible;}

/* Menú lateral desktop */
.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: 0.7;}

/* Layout */
.wrap{width: min(1100px, 100%);margin: 0 auto;padding: 7vh 12px;}

.list{display: flex;flex-direction: column;gap: 1.3vh;padding-bottom: 8vh;text-align: center;}

.card{display: block;color: inherit;text-decoration: none;}

.thumb{width: 100%;aspect-ratio: 3 / 2;object-fit: cover;border-radius: 2px;display: block;opacity: 0;transform: translateY(8px);transition: opacity 0.35s ease, transform 0.35s ease;}

.thumb.loaded{opacity: 1;transform: translateY(0);}

.caption{position: relative;margin: 4px 2px 0;min-height: 1.2em;font-size: clamp(18px, 4vw, 24px);font-weight: 300;letter-spacing: 0.02em;}

.caption.typing::after{content: "▍";position: absolute;margin-left: 6px;opacity: 0.9;animation: blink 0.9s steps(2, end) infinite;}

.name{text-align: center; margin: 0; padding-top: 1.5%; text-decoration: underline;}

@keyframes blink{50%{ opacity: 0; }}

@media (hover:hover){
  .card:hover .thumb{filter: brightness(1.05);}
  .card:hover .caption{opacity: 0.8;}}

@media (prefers-reduced-motion: reduce){
  .thumb{opacity: 1;transform: none;transition: none;}

  .caption.typing::after{display: none;}
}

/* Mobile */
@media (max-width: 768px){
  

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

  /* Menú fullscreen mobile */
  .side{width: 100vw;height: 100dvh;transform: translateX(-100%);border-right: none;display: flex;align-items: center;justify-content: center;
    padding-top: calc(var(--mast-h) + env(safe-area-inset-top));padding-left: 16px;padding-right: 16px;padding-bottom: 24px;}

  .side.open{transform: translateX(0);}

  .side-nav{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 1.1vh;text-align: center;transform: translateY(-220px);}

  .side-nav a{margin: 0;padding: 0;border: none;font-family: Helvetica, Arial, sans-serif;font-weight: 500;font-size: clamp(22px, 4.5vw, 40px);line-height: 1;letter-spacing: 0;}

  .name{padding-top: 6%; font-size: .85rem;}
  .wrap{ padding-top: 7vh;}

}

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

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

  }