:root{
  --bg:#efebe4;
  --paper:#f7f3ea;
  --paper-dark:#ece5d9;
  --green:#8b9985;
  --green-soft:#dfe5da;
  --text:#292826;
  --line:#d9d1c4;
  --tape:#d8c8b8;
  --shadow:rgba(0,0,0,.08);
}

/* ========================= BASE ========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  font-family:"Courier New", monospace;
  font-size:.95em;
  line-height:1.4;
  min-height:100vh;
  overflow-x:hidden;
  background-image:url(../images/hip-square2.jpg);
  background-size: cover;
}

#global-tooltip{
  position:fixed;
  z-index:9999;
  max-width:250px;
  padding:8px 11px 4px;
  background:#f7f3ea;
  border:1px solid #d9d1c4;
  border-radius:6px;
  font-size:.8em;
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  word-wrap:break-word;
  box-sizing:border-box;
  max-width:min(280px, calc(100vw - 20px));
  pointer-events:none;
}
#global-tooltip.show{
  opacity:1;
}
.info-img{
  cursor:help;
}

.weather-widget{
  position: absolute;
  top: 0px;
  right:25px;
  z-index: 5;
  display:flex;
  align-items:center;
  gap:14px;
  width:fit-content;
  padding:8px 20px;
  border-radius:12px;
  color:white;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:.5s;
}
.weather-widget img{
  width:40px;
  height:40px;
  object-fit:contain;
}
.weather-hour{
  margin:0;
  font-size:1em;
  font-weight:bold;
}
/* amanecer */
.sky-dawn{
  background:
    linear-gradient(
      180deg,
      #50a6df 0%,
      #8ed7ff 30%,
      #ffc65c 100%
    );
}
/* día */
.sky-day{
  background:
    linear-gradient(
      180deg,
      #62bdfa 0%,
      #8ed7ff 45%,
      #dff6ff 100%
    );
}
/* atardecer */
.sky-sunset{
  background:
    linear-gradient(
      180deg,
      #1e293b 0%,
      #ac72b1 60%,
      #ffb36b 100%
    );
}
/* noche */
.sky-night{
  background:
    linear-gradient(
      180deg,
      #0f172a 0%,
      #1e293b 45%,
      #334155 100%
    );
}
/* cartel luminoso */
.led-box{
  width:260px;
  overflow:hidden;
  padding:10px 14px;
  border-radius:10px;
  background:#000216;
  border:2px solid #2b2b2b;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.15);
}
.led-track{
  width:max-content;
  animation:ledScroll 18s linear infinite;
}
.led-track span{
  display:inline-block;
  white-space:nowrap;
  font-family:"Courier New", monospace;
  font-size:.9em;
  letter-spacing:.08em;
  color:#ff8c42;
  text-shadow:
    0 0 4px rgba(255,140,66,.8),
    0 0 8px rgba(255,140,66,.5);
}
@keyframes ledScroll{
  from{
    transform:translateX(30%);
  }
  to{
    transform:translateX(-100%);
  }
}

.mobile-sections-nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  gap:10px;
  overflow-x:auto;
  background-color: var(--paper);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  flex-wrap: wrap;
  justify-content: center;
}

.mobile-sections-nav::-webkit-scrollbar{
  display:none;
}

.back-top{
  position:fixed;
  right:38px;
  bottom:18px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text);
  font-size:1.2em;
  border-radius:50%;
  z-index:200;
  background-image:url(../images/seccion-musica/fondos/textura-papel.jpg);
  background-size:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  transition:.2s;
}
.back-top:hover{
  transform:translateY(-2px);
}

.music-button{
  position:fixed;
  left:20px;
  top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:100px;
  padding: 6px 20px;
  cursor:pointer;
  font-size: 0.9em;
  z-index:999;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition:.25s;
}
.music-button:hover{
  transform:scale(1.05);
}
.music-button img{
  width:34px;
  height:34px;
  object-fit:contain;
}

img, iframe, video{
  max-width:100%;
}
img{
  user-select:none;
}
a{
  transition:.2s;
}
a.blog:hover{
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
::selection{
  background:#d8d0c4;
}

/* grain */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:url("https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png");
}

/* ========================= navbar ========================= */
.mobile-sections-nav{
  margin: 40px auto 0px;
}

/* ========================= LAYOUT ========================= */
.layout{
  width:min(1320px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(39%,.8fr) minmax(28%,.8fr) minmax(28%,.8fr);
  gap:30px;
  padding:45px 0 0;
  align-items:start;
}
.main,
.sidebar{
  min-width:0;
}

/* ========================= HERO ========================= */
.hero-card{
  position:relative;
  width:100%;
  height: 100%;
  overflow:hidden;
  padding:20px;
}
.hero-card::before{
  content:"";
  position:absolute;
  top:20px;
  left:50%;
  width:140px;
  height:28px;
  background:rgba(220,205,185,.55);
  transform:translateX(-50%) rotate(-3deg);
}
.hero-image{
  width:100%;
  height:470px;
  display:block;
  object-fit:cover;
  transform:rotate(-2deg);
  border:12px solid #f4efe6;
  box-shadow:0 15px 35px var(--shadow);
}

.paper{
  position:absolute;
  z-index:3;
  padding:16px 22px;
}
.paper-title{
  top:0;
  left:50%;
  width:min(100%,420px);
  transform:translateX(-50%) rotate(-2deg);
}
.paper-text{
  bottom:30px;
  left:50%;
  width:min(60%,100%);
  text-align:center;
  transform:translateX(-50%) rotate(1deg);
}

/* ========================= STICKERS ========================= */
.sticker,
.paper-sticker,
.video-sticker,
.video-sticker1,
.video-sticker2,
.video-sticker3,
.video-sticker4,
.video-sticker5,
.video-sticker6,
.video-sticker7,
.video-sticker8,
.video-sticker9,
.img-sticker{
  position:absolute;
  pointer-events:none;
}

.sticker{
  opacity:.9;
}

.butterfly{
  width:200px;
  top:20px;
  left:40px;
}

.flower-left{
  width:90px;
  bottom:10%;
  left:0px;
}

/* ========================= TITLES ========================= */

.section-title{
  margin:40px 0 20px;
  font-size:1.2em;
  font-weight:normal;
  opacity:.8;
}

/* ========================= POSTS ========================= */

.posts{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.post-card{
  position:relative;
  overflow:hidden;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(220px,250px) minmax(0,1fr);
  gap:30px;
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line);
}

.post-card::before{
  content:"";
  position:absolute;
  top:28px;
  left:40px;
  width:90px;
  height:22px;
  background:rgba(220,205,185,.55);
  transform:rotate(-7deg);
}

/* ========================= POLAROID ========================= */

.polaroid{
  width:100%;
  padding:14px 14px 58px;
  background:#fff;
  border:1px solid #9e9e9e2d;
  border-radius:4px;
  box-shadow:0 8px 8px var(--shadow);
}

.polaroid img{
  width:100%;
  height:280px;
  display:block;
  object-fit:cover;
  border-radius:4px;
  filter:saturate(.82) contrast(.94);
}

/* ========================= POST CONTENT ========================= */

.date{
  font-size:.8em;
  opacity:.5;
  letter-spacing:.06em;
}

.post-content{
  min-width:0;
}

.post-content h3{
  margin:12px 0 16px;
  font-size:clamp(1.5em,4vw,2.1em);
  font-weight:normal;
}

.post-content p{
  max-width:520px;
}

.post-content a{
  color:var(--green);
  text-decoration:none;
}

.post-content a:hover{
  opacity:.6;
}

/* ========================= SIDEBAR ========================= */

.sidebar{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.side-card{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:24px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  background-image:url(../images/seccion-musica/fondos/song3.png);
}

.side-card.song{
  background-image:url(../images/seccion-musica/fondos/song.jpg);
}

.side-card h3{
  margin-top:0;
  font-weight:600;
  opacity:.9;
}

.side-card ul{
  padding-left:18px;
}

.side-card li{
  margin-bottom:12px;
}

/* ========================= MUSIC ========================= */

.music-card{
  padding:24px 32px 18px;
}

.music-section,
.favorites-section{
  margin-bottom:0;
}

.music-title,
.music-title-info,
.poem-tab,
.video-tab{
  background-size:cover;
  background-position:center;
  box-shadow:0 8px 25px var(--shadow);
}

.music-title{
  padding:8px 20px;
  margin:0 0 -6px;
  text-align:center;
  font-size:1em;
  font-weight:600;
  z-index:3;
  transform:translateX(0%) rotate(1deg);
  background-image:url(../images/seccion-musica/fondos/textura-papel.jpg);
}

.music-label{
  position: absolute;
  top: -32%;
  left: 5%;
  padding:0px 10px;
  font-size:0.9em;
  transform:rotate(0deg);
}

.book-label{
  position: absolute;
  top: -20%;
  left: 5%;
  padding:0px 10px;
  font-size:0.9em;
  transform:rotate(0deg);
}

.albums-row .music-title.music-label {
  top: -30px;
}
.albums-row.albums-row2 .music-title.music-label {
  top: -18px;
}
.books-row .music-title.book-label {
  top: -20px;
}
.books-row.books-row2 .music-title.book-label {
  top: -5px;
}

.title-shelf{
  margin:20px 0 -8px;
  color:#0a0a0a;
  background-image:url(../images/seccion-musica/fondos/textura-papel-2.png);
}

.music-title-info{
  width:50%;
  min-height:100px;
  height:100%;
  padding:16px 20px;
  margin:0 0 6px 20px;
  text-align:center;
  line-height:1em;
  font-size:.85em;
  font-weight:normal;
  color:#e6e6e6;
  z-index:3;
  background-image:url(../images/seccion-musica/fondos/textura-papel.jpg);
}

.info-label{
  margin-right:2px;
  opacity:.8;
}

/* ========================= AUDIO NOTA ========================= */
.audio-note{
  padding:8px;
  max-width:420px;
  border-radius:8px;
  background-image:url(../images/papel-maquina.jpg);
}
.audio-btn{
  border:none;
  padding:8px;
  cursor:pointer;
  font-family:"Courier New", monospace;
  font-size: .8em;
  text-align: left;
  background:none;
}

/* ========================= PHOTO FRAME ========================= */
.photo-frame{
  position:relative;
  display:inline-block;
  max-width:100%;
  padding:14px;
  border:3px solid #5a341c;
  background:linear-gradient(
    135deg,
    #7a4d2c 0%,
    #9b6a42 18%,
    #5f3920 35%,
    #b07a4b 52%,
    #6b4125 70%,
    #9b6d46 100%
  );
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 12px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.22);
}

.photo-frame::before,
.photo-frame::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.photo-frame::before{
  inset:8px;
  border:2px solid rgba(255,220,170,.22);
}

.photo-frame::after{
  inset:12px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.28);
}

.photo-frame img{
  display:block;
  width:100%;
  height:auto;
  border:2px solid #3f2412;
  box-shadow:0 0 8px rgba(0,0,0,.18);
}

/* ========================= SPOTIFY ========================= */

.spotify-player{
  width:100%;
  border:none;
  overflow:hidden;
}

/* ========================= SHELF ========================= */

.shelf,
.book-shelf{
  position:relative;
  width:100%;
  height:416px;
  padding:14px;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:4px;
  background-image:url(../images/shelf-3.png);
  background-size:cover;
  background-position:center;
  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 10px 30px rgba(0,0,0,.08);
}

.shelf{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2px;
}

.shelf::-webkit-scrollbar,
.book-shelf::-webkit-scrollbar{
  display:none;
}

.shelf,
.book-shelf{
  scrollbar-width:none;
}

.shelf::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    to right,
    rgba(255,255,255,.05),
    transparent 25%,
    rgba(255,255,255,.03)
  );
}

/* ========================= BITÁCORA ========================= */
.bitacora-scroll{
  max-height:240px;
  overflow-y:auto;
  padding: 8px;
  display:flex;
  flex-direction:column;
  gap:18px;
  background-color: var(--paper);
}
/* scrollbar */
.bitacora-scroll::-webkit-scrollbar{
  width:8px;
}
.bitacora-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.bitacora-scroll::-webkit-scrollbar-thumb{
  background:#d9d1c4;
  border-radius:20px;
}

/* ========================= ALBUMS ========================= */
.album,
.book{
  position:relative;
  flex-shrink:0;
  perspective:1400px;
  transition:width .45s ease;
}

.album{
  width:12px;
  height:102px;
}

.book{
  width:25px;
  height:115px;
}

.album:hover{
  width:114px;
  z-index:20;
  cursor:grab;
}

.book:hover{
  width:85px;
  z-index:20;
}

.album-inner,
.book-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .7s ease;
}

.album:hover .album-inner,
.book:hover .book-inner{
  transform:rotateY(180deg);
}

.album-front,
.album-back,
.book-front,
.book-back{
  position:absolute;
  inset:0;
  overflow:hidden;
  backface-visibility:hidden;
}

/* ========================= ALBUM FRONT ========================= */

.album-front{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 0;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.1em;
  letter-spacing:.03em;
  color:#e6e6e6;
  border-radius:1px;
  overflow:hidden;
  background-image:url(../images/seccion-musica/img/borde-cd.png);
  background-size:2px 100%;
  border-left:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(0,0,0,.6);
}

.album-front::before,
.album-front::after{
  content:"";
  position:absolute;
  top:0;
  height:100%;
}

.album-front::before{
  right:0;
  width:4px;
  background:linear-gradient(to left,rgba(255,255,255,.28),transparent);
}

.album-front::after{
  right:0;
  width:2px;
  background:rgba(255,255,255,.16);
}

/* ========================= ALBUM BACK ========================= */

.album-back{
  padding-left:10px;
  overflow:hidden;
  border-radius:1px;
  transform:rotateY(180deg);
  background-image:url(../images/seccion-musica/img/borde-cd.png);
  backdrop-filter:blur(2px);
  border:1px solid rgba(110,110,110,.253);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

.album-back img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:1px solid rgba(139,139,139,.582);
  border-radius:1px;
}

.album-back::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.22),transparent 35%);
}

/* ========================= BOOKS ========================= */

.book-front{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:0.67em;
  line-height: .03em;
  letter-spacing:.03em;
  color:#f2eee8;
  border-radius:2px;
  background:linear-gradient(
    to right,
    #5f4634 0%,
    #7b5b43 18%,
    #9a7453 48%,
    #6d4f39 100%
  );
  border-left:1px solid rgba(255,255,255,.12);
  border-right:2px solid rgba(0,0,0,.28);
  box-shadow:
    inset -2px 0 4px rgba(255,255,255,.08),
    inset 2px 0 6px rgba(0,0,0,.18);
}

.book-front::before,
.book-front::after{
  content:"";
  position:absolute;
}

.book-front::before{
  top:4px;
  bottom:4px;
  left:2px;
  width:2px;
  background:rgba(255,255,255,.18);
}

.book-front::after{
  top:0;
  right:0;
  width:3px;
  height:100%;
  background:rgba(0,0,0,.14);
}

.book-back{
  border-radius:2px;
  transform:rotateY(180deg);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

.book-back img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* ========================= DECOS ========================= */

.albums-row,
.radio-side,
.books-row,
.books-side{
  position:absolute;
}

.albums-row{
  top:10%;
  left:4%;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
}

.albums-row.albums-row2{
  top:40%;
}

.radio-side{
  top:22%;
  right:2%;
  display:flex;
  align-items:flex-end;
}

.books-row{
  top:7%;
  left:5%;
  display:flex;
  align-items:flex-end;
  gap:1px;
}
.books-row2{
  top: 37%
}
.books-side{
  top:8.6%;
  right:10px;
  width: 60px;
}

.radio-gif,
.books-gif{
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));
}

.radio-gif{
  width:120px;
}

.books-gif{
  width:150px;
}

.bottom-shelf,
.book-bottom-shelf{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  z-index:5;
}

.bottom-deco{
  display:flex;
  align-items:flex-end;
}

.decoracion{
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* ========================= POETRY ========================= */

.poetry-journal{
  margin-top:20px;
}

.poetry-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}

.video-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
  justify-content: center;
}

.poem-tab{
  border:none;
  padding:10px 16px;
  font-family:"Courier New", monospace;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  opacity:.8;
  transition:.2s;
  background-image:url(../images/seccion-musica/fondos/textura-papel.jpg);
}

.poem-tab{
  margin-bottom:-8px;
  transform:rotate(-2deg);
}

.video-tab{
  border:none;
  font-family:"Courier New", monospace;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  opacity:.8;
  transition:.2s;
  background-image:url(../images/seccion-musica/fondos/textura-papel.jpg);
  transform:rotate(0deg);
}

.poem-tab:hover,
.poem-tab.active,
.video-tab:hover,
.video-tab.active{
  opacity:1;
  background-image:url(../images/seccion-musica/fondos/textura-papel-2.png);
}

/* ========================= POETRY PAPER ========================= */

.poetry-paper{
  position:relative;
  min-height:500px;
  background:url("images/textures/paper.png");
  background-size:cover;
}

.paper-sticker{
  top:0%;
  right:0%;
  width: 150px;
}

/* ========================= POEMS ========================= */

.poem,
.video-item{
  display:none;
  animation:fade .35s ease;
}

.poem.active,
.video-item.active{
  display:block;
}

@keyframes fade{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* ========================= POEM TEXT ========================= */

.poem-sheet{
  background-image:url(../images/papel-maquina.jpg);
  background-position:center;
}
.poem-sheet{
  width:100%;
  margin:30px 0px;
  padding:32px 32px;
  border-radius:12px;
  background-size:contain;
}
.poem-wrapper{
  text-align:center;
}
.poem-text{
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size:1.2em;
  display:inline-block;
  width:auto;
  text-align:left;
  line-height:1.7;
  white-space:pre-line;
}
.poem-wrapper .poem-text h2{
  margin:0;
  font-size:1.5em;
  font-weight:700;
  text-decoration:underline;
}
.poem-wrapper .poem-text h4{
  margin:0;
  opacity:.7;
  font-size:1em;
  font-style:italic;
  font-weight:600;
}

.poem-date{
  margin:40px 20px 0;
  opacity:.8;
}
.poem-photo{
  width:48%;
  margin:2px;
  height: 100%;
}
.photo-1{
  width:100%;
}
.photo-scroll{
  max-height:1700px;
  overflow-y:auto;
  padding-bottom: 20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
/* scrollbar */
.photo-scroll::-webkit-scrollbar{
  width:8px;
}
.photo-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.photo-scroll::-webkit-scrollbar-thumb{
  background:#d9d1c4;
  border-radius:20px;
}
.photo-grid{
  columns:2;
  column-gap:6px;
}

.notes-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  align-items:start;
}
.notes-grid img{
  width:100%;
  display:block;
}
.notes-grid blockquote{
  margin:0;
}
.note-entry{
  padding:12px;
  background-image:url(../images/papel-maquina.jpg);
  border-radius:12px;
}
.wimg{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
}
.note-entry img{
  width:120px;
  height:126px;
  object-fit:cover;
}
.note-date{
  font-size:1em;
}
.open-note{
  border:none;
  background:none;
  cursor:pointer;
  font-family:inherit;
}
.note-popup{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  z-index:9999;
}
.note-popup-content{
  position:relative;
  width:min(700px, 100%);
  max-height:90vh;
  overflow:auto;
  padding:40px;
  border-radius:18px;
  background-image:url(../images/papel-maquina.jpg);
}
.note-popup-content img{
  width:100%;
  margin:12px 0;
}
.close-popup{
  position:fixed;
  top:16px;
  right:16px;
  border:none;
  background:none;
  font-size:1.2em;
  cursor:pointer;
}

blockquote{
  width:100%;
  max-width:650px;
  margin:30px 0;
  padding: 8px 8px 8px 18px;
  border-left:2px solid #969084;
  background:var(--paper);
}
.iframe-section-poem{
  width:100%;
  max-width:650px;
}
.pdt{
  font-weight:bolder;
  color:#4a5ab6c4;
}

/* ========================= VIDEO ========================= */

.video-journal{
  width:100%;
  max-width:1320px;
  min-height:550px;
  margin:50px auto;
}
.video-paper{
  position:relative;
  min-height:520px;
  padding:50px 0;
}
.video-frame{
  width:100%;
  margin: 0 auto;
  max-width:980px;
  height:520px;
  padding:24px;
  border-radius:12px;
  background-size:contain;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.video-frame iframe{
  width:100%;
  height:100%;
  border:none;
  border-radius:12px;
}
/* ========================= VIDEO STICKERS ========================= */
.video-sticker{
  top:1%;
  left:45%;
  z-index:4;
}
.video-sticker1{
  top:0;
  right: 10%;
  width:100px;
  z-index:4;
  transform:rotate(8deg);
}
.video-sticker2{
  bottom:5%;
  left:10%;
  width:100px;
  z-index:6;
  transform:rotate(-8deg);
}
.video-sticker3{
  right: 8%;
  bottom: 15%;
  width: 120px;
  z-index:5;
}
.video-sticker4{
  top: 43%;
  right: 2%;
  width:150px;
  z-index:4;
}
.video-sticker5{
  top: 20%;
  right: 6%;
  width:150px;
  z-index:4;
}
.video-sticker6{
  left: 30%;
  bottom:0%;
  width:40%;
  z-index:4;
}
.video-sticker7{
  top: 5%;
  left: 10%;
  width: 70px;
  z-index: 4;
}
.video-sticker8{
  bottom:35%;
  left:2%;
  width:150px;
  z-index:5;
}
.video-sticker9{
  bottom: 53%;
  left: 0%;
  width:150px;
  z-index:4;
}
.img-sticker{
  bottom: 15%;
  left: 7%;
  width:90px;
  z-index:4;
  transform:rotate(8deg);
}
.img-sticker1{
  position: absolute;
  top: 12%;
  left: 3%;
  width:150px;
  z-index:2;
  transform:rotate(3deg);
}

/* ========================= EXTRA ========================= */

.small-photo{
  width:100%;
  display:block;
  margin-bottom:12px;
}
.caption{
  margin:0;
  opacity:.7;
}
.note{
  background:var(--green-soft);
  transform:rotate(-1deg);
}

/* ========================= FOOTER ========================= */
.footer{
  padding:28px 4vw;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9em;
  background:rgba(255,255,255,.15);
  border-top:1px solid var(--line);
}

.welcome-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:99999;
}
.welcome-popup-content{
  position:relative;
  max-width:650px;
  width:90%;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:url("../images/papel-maquina.jpg");
  padding:20px 20px 30px;
  border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,.25);
  text-align:center;
}
.welcome-popup .close-popup{
  position:sticky;
  top:0;
  float:right;
  z-index:2;
}
.new-badge{
  display:inline-block;
  padding:4px 10px;
  background:#e9dcc0;
  border-radius:20px;
  font-size:.8rem;
  letter-spacing:.08em;
}
.countdown-day{
  position:relative;
  margin:20px 0;
  padding:16px;
  background:rgba(255,255,255,.45);
  border:1px dashed rgba(0,0,0,.25);
  border-radius:10px;
  text-align:center;
}
.countdown-number{
  display:inline-block;
  margin-bottom:8px;
  padding:4px 10px 1px;
  background:#d8c8a5;
  border-radius:999px;
  color:#4d3a25;
  font-size:.75rem;
  font-weight:bold;
  letter-spacing:.12em;
}
.countdown-day p{
  margin:0;
  font-size:1rem;
  line-height:1.5;
}
.popup-link{
  display:inline-block;
  font-weight:bold;
  font-size:1rem;
}
@media(max-width:768px){
  .welcome-popup{
    align-items:flex-start;
    padding:20px 0;
  }

  .welcome-popup-content{
    width:95%;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:18px 18px 28px;
  }

  .welcome-popup-content img{
    width:100% !important;
    max-width:320px;
    height:auto;
  }

  .welcome-popup .close-popup{
    top:10px;
  }
}

/* ========================= TABLET ========================= */

@media(max-width:1350px){

  .layout{
    grid-template-columns:minmax(0,1fr) minmax(320px,340px);
  }

  .main,
  .sidebar{
    grid-column:1 / -1;
    max-width:650px;
    width:100%;
    margin:auto;
  }
  .weather-widget{
    top: 0px;
    right:0px;}

  .video-frame{
    transform:none;
    margin:auto;
  }

  .video-paper{
    padding:30px 0;
  }

  .video-sticker1,
  .video-sticker2,
  .video-sticker3,
  .video-sticker4,
  .video-sticker5,
  .video-sticker6,
  .video-sticker7,
  .video-sticker8,
  .video-sticker9,
  .img-sticker{
    display:none;
  }
}

/* ========================= MOBILE ========================= */

@media(max-width:700px){

  .topbar{
    justify-content:center;
    text-align:center;
  }

  .topnav{
    justify-content:center;
    gap:16px;
  }

  .music-button{
    position:absolute;
    left:5%;
    top:22px;
  }

  .post-card{
    grid-template-columns:1fr;
    padding:22px;
  }

  .hero-card,
  .poetry-journal,
  .video-journal,
  .poem-sheet,
  .photo-1,
  .iframe-mobile,
  blockquote{
    width:100%;
  }

  .hero-card{
    min-height:340px;
    margin: 20px auto;
    padding:14px;
  }

  .hero-image{
    height:100%;
    margin:auto;
  }

  .paper{
    padding:10px 14px;
  }

  .paper-text{
    bottom:0;
    width:90%;
  }

  .flower-left{
    bottom: 16%;
    left:auto;
    right:0px;
    width:90px;
  }

  .music-card{
    padding:24px 16px 16px;
  }

  .music-title{
    transform:none;
  }

  .music-title-info{
    margin:0 0 10px;
  }

  .music-label{
    position: absolute;
    top: -50%;
    text-align:center;
    font-size:.9em;
    z-index:3;
    transform:translateX(6%) rotate(1deg);
    background-image:url(../images/seccion-musica/fondos/textura-papel.jpg);
  }

  .shelf{
    min-height:160px;
    padding:10px;
  }

  .shelf, .book-shelf{
    height:550px;
  }

  .album:hover{
    width:114px;
  }
  .albums-row{
    top: 16.5%;
    left: 2%;
  }
  .albums-row.albums-row2{
    top:46%;
    left: 2%;
  }

  .radio-side{
    top:25%;
    right:1%;
  }
  .radio-gif{
    width:120px;
  }

  .books-row{
    top: 14%;
    left:4%;
  }
  .books-row2{
    top: 43%
  }
  .books-side{
    top:15.5%;
  }
  .books-gif{
    width:110px;
  }
  .albums-row .music-title.music-label {
    top: -40px;
  }
  .albums-row.albums-row2 .music-title.music-label {
    top: -45px;
  }
  .books-row .music-title.book-label {
    top: -30px;
  }
  .books-row.books-row2 .music-title.book-label {
    top: -30px;
  }
  .note-popup-content{
    padding: 20px;
  }

  .photo-grid{
    columns:2;
    column-gap:4px;
  }

  .poetry-journal{
    margin:0px auto;
  }
  .poetry-paper{
    padding:0;
  }
  .poetry-tabs{
    justify-content:center;
    gap:14px;
  }
  .paper-sticker{
    top:0%;
    right:0%;
    width:120px;
  }
  .poem-sheet{
    padding:22px;
  }
  .poem-text{
    font-size:1.1em;
    line-height:1.8;
  }
  .poem-photo{
    width:47%;
    margin:2px;
    height: 100%;
  }
  .poem-date,
  blockquote{
    font-size:.75em;
  }

  .video-journal{
    margin:50px auto 100px;
    min-height:auto;
  }
  .video-paper{
    min-height:100px;
    padding:0;
  }
  .video-frame{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    padding:12px;
    margin-top:50px;
    transform:none;
  }
  .video-frame iframe{
    height:100%;
  }
  .video-sticker{
    top:90%;
    left:50%;
  }
  .video-sticker1{
    top: -12%;
    right: 0%;
    width: 60px;
    z-index:5;
    display:block;
  }
  .video-sticker2{
    top: -17%;
    left: 75%;
    width: 60px;
    display:block;
  }
  .video-sticker3{
    top:160px;
    left:-10px;
    width:50px;
    z-index:3;
    transform:rotate(8deg);
    display:block;
  }
  .video-sticker4{
    top:220px;
    left:40px;
    width:50px;
    transform:rotate(8deg);
    display:block;
  }
  .video-sticker5{
    top:190px;
    left:0;
    width:50px;
    transform:rotate(8deg);
    display:block;
  }
  .video-sticker6{
    top:-10px;
    left:-5px;
    width:310px;
    display:block;
  }
  .video-sticker7{
    top:0;
    left:-5px;
    width:40px;
    transform:rotate(8deg);
    display:block;
  }
  .video-sticker8{
    bottom: 0%;
    left: 76%;
    width:100px;
    transform:rotate(8deg);
    display:block;
  }
  .video-sticker9{
    bottom: -11%;
    left: 80%;
    width: 60px;
    transform:rotate(8deg);
    display:block;
  }
  .img-sticker{
    bottom:-15%;
    left:40%;
    width:50px;
    display:block;
  }
  .img-sticker1{
    top: 90%;
    left: 22%;
    width: 70px;
    display:block;
  }

  .footer{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }
}