/* ============================================================
   ESPECIAL "MODO OCARINA" — ReConectados 1998.
   Todo cuelga de html[data-cancion="tiempo"]: con el atributo puesto la
   web entera se ve como la vieja web de RC (banner con el logo, barras
   verde y rosa, menú negro con botón rosa, contenido en blanco) pasada por
   un monitor de tubo de los 90: tipografía pixel, scanlines, sombras
   duras, fotos en 256 colores, cursor pixelado.

   La ocarina en sí (botón, menú de canciones, Link, el bosque de Saria y
   la puerta de la Nana) vive en ocarina-widget.css; este archivo es solo
   la piel retro. Para otro especial: copiar la carpeta y cambiar el valor
   del atributo.
   ============================================================ */

/* ---------- Variables del especial ---------- */
html[data-cancion="tiempo"]{
  --oca-bg:#0d0d0d;          /* fondo detrás del sitio */
  --oca-paper:#ffffff;       /* fondo del contenido (la vieja web era blanca) */
  --oca-ink:#111111;         /* texto sobre blanco */
  --oca-ink-soft:#555555;
  --oca-pink:#FF3399;
  --oca-green:#33FF99;
  --oca-black:#000000;
  --oca-line:#dcdcdc;
  --oca-font-pixel:'Press Start 2P', 'Courier New', monospace;
  --oca-font-body:Verdana, Tahoma, Geneva, sans-serif;
  --oca-steps:steps(4, end);
}

/* ---------- Base: el sitio entero ---------- */
html[data-cancion="tiempo"] *{border-radius:0 !important; box-shadow:none;}
html[data-cancion="tiempo"] body{
  background:var(--oca-bg) !important;
  color:var(--oca-ink);
  font-family:var(--oca-font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:none;
  cursor:url('/especiales/ocarina/assets/cursor.svg') 2 2, auto;
}
html[data-cancion="tiempo"] a, html[data-cancion="tiempo"] button, html[data-cancion="tiempo"] [role="button"], html[data-cancion="tiempo"] label, html[data-cancion="tiempo"] summary{
  cursor:url('/especiales/ocarina/assets/cursor-hand.svg') 6 2, pointer;
}
html[data-cancion="tiempo"] img, html[data-cancion="tiempo"] video, html[data-cancion="tiempo"] .thumb, html[data-cancion="tiempo"] .media-fill{
  image-rendering:pixelated; image-rendering:crisp-edges;
}
/* Scanlines de monitor sobre toda la pantalla: una capa fija translúcida,
   sin mix-blend-mode (barato, se apila arriba y listo). */
html[data-cancion="tiempo"] body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
/* Transiciones en pasos: nada se desliza suave, todo salta como a 15 fps. */
html[data-cancion="tiempo"] *, html[data-cancion="tiempo"] *::before, html[data-cancion="tiempo"] *::after{
  transition-timing-function:var(--oca-steps) !important;
}

/* ---------- Fondo poligonal (canvas que pinta ocarina.js) ---------- */
html[data-cancion="tiempo"] .oca-poly{
  position:fixed; inset:0; z-index:-1; width:100%; height:100%;
  display:block; pointer-events:none; image-rendering:pixelated;
}

/* ---------- El sitio centrado como la vieja web ---------- */
html[data-cancion="tiempo"] .brand-edge{display:none;}
html[data-cancion="tiempo"] .life-bar-track{top:auto; bottom:0; height:6px; background:#000; z-index:9100;}
html[data-cancion="tiempo"] .life-bar-fill{box-shadow:none; background:repeating-linear-gradient(90deg, var(--oca-green) 0 8px, #1a8a55 8px 10px);}
html[data-cancion="tiempo"] .life-bar-fill.low{background:repeating-linear-gradient(90deg, var(--oca-pink) 0 8px, #8a1a55 8px 10px);}

html[data-cancion="tiempo"] .ticker-bar, html[data-cancion="tiempo"] header.site, html[data-cancion="tiempo"] main, html[data-cancion="tiempo"] footer{
  max-width:1000px; margin-left:auto; margin-right:auto;
}
html[data-cancion="tiempo"] .wrap, html[data-cancion="tiempo"] .content-wrap{max-width:none; padding:0 18px;}

/* Ticker: marquee amarillo sobre negro, arriba del banner. */
html[data-cancion="tiempo"] .ticker-bar{background:#000; border:3px solid #000; border-bottom:0; margin-top:14px;}
html[data-cancion="tiempo"] .ticker-label{font-family:var(--oca-font-pixel); font-size:10px; color:#fff; background:var(--oca-pink); border-right:3px solid #000; padding:0 12px; height:30px;}
html[data-cancion="tiempo"] .live-dot{border-radius:0 !important; width:6px; height:6px; background:#fff; animation-timing-function:steps(1);}
html[data-cancion="tiempo"] .ticker-item{font-family:var(--oca-font-pixel); font-size:10px; color:#fff; padding:0 18px;}
html[data-cancion="tiempo"] .ticker-item .ticker-type{color:var(--oca-green) !important;}
html[data-cancion="tiempo"] .ticker-item + .ticker-item{border-left:2px solid #333;}
html[data-cancion="tiempo"] .type-dot{border-radius:0 !important; width:6px; height:6px;}

/* Header = banner de la vieja web + menú negro. */
html[data-cancion="tiempo"] header.site{
  position:static; background:#000; backdrop-filter:none; border:3px solid #000; border-top:0; border-bottom:0;
}
html[data-cancion="tiempo"] header.site > .wrap{padding:0;}
html[data-cancion="tiempo"] nav.main{
  display:block; padding:0;
}
/* El logo chico del header se convierte en el banner grande: se oculta la
   imagen y el link que la envuelve muestra el banner de fondo. */
html[data-cancion="tiempo"] nav.main > a:first-child{
  display:block; width:100%; aspect-ratio:1080/250; max-height:250px;
  background:#101018 url('/especiales/ocarina/assets/banner.jpg') center / cover no-repeat;
  image-rendering:pixelated; position:relative;
}
html[data-cancion="tiempo"] nav.main > a:first-child::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
html[data-cancion="tiempo"] .logo-img{display:none;}
/* Menú: barra negra, pixel, el activo en rosa como "Inicio" de la vieja web. */
html[data-cancion="tiempo"] .nav-links{
  display:flex; flex-wrap:wrap; background:#000; border-top:3px solid #000; border-bottom:4px solid var(--oca-pink);
}
html[data-cancion="tiempo"] .nav-links li{display:block;}
html[data-cancion="tiempo"] .nav-links a{
  display:block; font-family:var(--oca-font-pixel); font-size:11px; letter-spacing:0; text-transform:none;
  color:#fff; padding:17px 18px; border-right:2px solid #1c1c1c;
}
html[data-cancion="tiempo"] .nav-links a:hover{color:var(--oca-green); background:#111;}
html[data-cancion="tiempo"] .nav-links a.active{background:var(--oca-pink); color:#fff;}
html[data-cancion="tiempo"] .nav-links a.active::after{display:none;}
/* Buscar, redes y hamburguesa: botones biselados a la derecha del menú. */
html[data-cancion="tiempo"] .nav-right{
  position:absolute; right:0; bottom:0; height:46px; gap:6px; padding-right:8px; align-items:center;
}
html[data-cancion="tiempo"] nav.main{position:relative;}
html[data-cancion="tiempo"] .nav-socials{gap:6px;}
html[data-cancion="tiempo"] .nav-social-icon, html[data-cancion="tiempo"] .search-btn, html[data-cancion="tiempo"] .retro-toggle, html[data-cancion="tiempo"] .menu-toggle{
  width:30px; height:30px; background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff; justify-content:center;
}
html[data-cancion="tiempo"] .nav-social-icon svg{width:14px; height:14px;}
html[data-cancion="tiempo"] .search-btn{font-size:14px; transform:none !important;}
html[data-cancion="tiempo"] .search-btn:hover, html[data-cancion="tiempo"] .nav-social-icon:hover{color:var(--oca-pink); border-color:#404040 #fff #fff #404040;}
html[data-cancion="tiempo"] .retro-toggle{display:none !important;}
html[data-cancion="tiempo"] .menu-toggle span{background:#000;}
html[data-cancion="tiempo"] .search-panel{
  background:#c0c0c0; border:2px solid; border-color:#fff #404040 #404040 #fff; color:#000; padding:8px; top:calc(100% + 8px);
}
html[data-cancion="tiempo"] .search-panel input, html[data-cancion="tiempo"] .search-form input{
  background:#fff; color:#000; border:2px inset #808080; font-family:var(--oca-font-body);
}
html[data-cancion="tiempo"] .search-result-item:hover{background:var(--oca-pink); color:#fff;}
html[data-cancion="tiempo"] .search-result-type, html[data-cancion="tiempo"] .search-empty-msg{font-family:var(--oca-font-pixel); font-size:7px; color:#333;}
html[data-cancion="tiempo"] .search-result-item:hover .search-result-type{color:#fff;}
html[data-cancion="tiempo"] .mobile-menu{background:#000; border-top:4px solid var(--oca-pink);}
html[data-cancion="tiempo"] .mobile-menu-links a{font-family:var(--oca-font-pixel); font-size:12px; letter-spacing:0; text-transform:none; color:#fff; border-bottom:2px solid #1c1c1c; padding:16px 14px;}
html[data-cancion="tiempo"] .mobile-menu-links a.active{background:var(--oca-pink); color:#fff;}
html[data-cancion="tiempo"] .mobile-menu-socials{padding:14px;}

/* ---------- Contenido: papel blanco con borde negro ---------- */
html[data-cancion="tiempo"] main{
  background:var(--oca-paper); color:var(--oca-ink); border:3px solid #000; border-top:0;
  padding-top:18px; padding-bottom:18px;
}
html[data-cancion="tiempo"] main a{color:inherit;}
html[data-cancion="tiempo"] .eyebrow, html[data-cancion="tiempo"] .meta-line, html[data-cancion="tiempo"] .home-news-meta, html[data-cancion="tiempo"] .dest-card-date, html[data-cancion="tiempo"] .dest-card-type, html[data-cancion="tiempo"] .ent-label, html[data-cancion="tiempo"] .ent-meta, html[data-cancion="tiempo"] .et-date, html[data-cancion="tiempo"] .article-byline-row, html[data-cancion="tiempo"] .img-caption, html[data-cancion="tiempo"] .carousel-caption, html[data-cancion="tiempo"] .byline-foot-label{
  font-family:var(--oca-font-pixel); font-size:9.5px; letter-spacing:0; color:var(--oca-ink-soft);
}
html[data-cancion="tiempo"] .article-byline-row a{color:var(--oca-ink-soft);}

/* Títulos: pixel, con el desfasaje rosa estilo tubo. */
html[data-cancion="tiempo"] h1, html[data-cancion="tiempo"] h2, html[data-cancion="tiempo"] h3, html[data-cancion="tiempo"] h4, html[data-cancion="tiempo"] .section-title, html[data-cancion="tiempo"] .page-header h1, html[data-cancion="tiempo"] .article-head h1, html[data-cancion="tiempo"] .dest-card h3, html[data-cancion="tiempo"] .home-news-item h3, html[data-cancion="tiempo"] .news-item h3, html[data-cancion="tiempo"] .card h3, html[data-cancion="tiempo"] .et-title, html[data-cancion="tiempo"] .ent-guest, html[data-cancion="tiempo"] .most-read-title, html[data-cancion="tiempo"] .about-hero-text h1, html[data-cancion="tiempo"] .byline-foot-name, html[data-cancion="tiempo"] .go-glitch{
  font-family:var(--oca-font-pixel) !important; font-weight:400 !important; text-transform:none !important; letter-spacing:0 !important; line-height:1.55 !important;
}
html[data-cancion="tiempo"] .page-header h1, html[data-cancion="tiempo"] .article-head h1, html[data-cancion="tiempo"] .about-hero-text h1{font-size:clamp(16px, 2.6vw, 26px) !important; text-shadow:2px 2px 0 var(--oca-pink);}
html[data-cancion="tiempo"] .section-title{font-size:14px !important; color:#000;}
html[data-cancion="tiempo"] .section-head{border-bottom:3px solid #000; padding-bottom:10px; margin-bottom:18px;}
html[data-cancion="tiempo"] .section-mark{width:12px; height:12px; background:var(--oca-green); border:2px solid #000;}
html[data-cancion="tiempo"] .section-link{font-family:var(--oca-font-pixel); font-size:9.5px; color:var(--oca-pink); text-decoration:underline;}
html[data-cancion="tiempo"] .section{padding:22px 18px;}
html[data-cancion="tiempo"] .section-after-hero{border-top:0; margin-top:0;}
html[data-cancion="tiempo"] .page-header{padding:20px 0 16px; border-bottom:3px solid #000;}
html[data-cancion="tiempo"] .page-header p{color:var(--oca-ink-soft); font-size:15px;}

/* Pills y hashtags: etiquetas de cartucho. */
html[data-cancion="tiempo"] .pill, html[data-cancion="tiempo"] .hashtag, html[data-cancion="tiempo"] .home-news-type, html[data-cancion="tiempo"] .dest-card-type, html[data-cancion="tiempo"] .pubs-tab{
  font-family:var(--oca-font-pixel); font-size:9.5px; letter-spacing:0; text-transform:uppercase;
}
html[data-cancion="tiempo"] .pill{background:#000; color:#fff; padding:5px 8px; transform:none !important;}
html[data-cancion="tiempo"] .pill-on-image{background:#000; box-shadow:none;}
html[data-cancion="tiempo"] .hashtag, html[data-cancion="tiempo"] .tags-row .hashtag, html[data-cancion="tiempo"] .article-head .tags-row .hashtag{color:var(--oca-pink) !important; text-decoration:underline; transform:none !important;}
html[data-cancion="tiempo"] .pubs-tab{background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff; padding:8px 12px;}
html[data-cancion="tiempo"] .pubs-tab.active{background:var(--oca-pink); color:#fff; border-color:#404040 #fff #fff #404040;}

/* ---------- Portada: la foto grande con el recuadro de texto abajo ---------- */
html[data-cancion="tiempo"] .lead-wrap{padding:0 18px 8px !important;}
html[data-cancion="tiempo"] .lead-hero-link{
  border:3px solid #000; background:#000; animation:none !important; aspect-ratio:16/9;
}
html[data-cancion="tiempo"] .lead-hero-media{transition:none !important; transform:none !important; filter:contrast(1.1) saturate(1.2);}
html[data-cancion="tiempo"] .lead-hero-link:hover .lead-hero-media{transform:none !important;}
html[data-cancion="tiempo"] .lead-hero-texture{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
}
html[data-cancion="tiempo"] .lead-hero-overlay{
  background:rgba(0,0,0,.82) !important; padding:14px 18px; text-align:center;
}
html[data-cancion="tiempo"] .lead-hero-overlay h1{font-size:clamp(14px, 2.2vw, 21px) !important; color:#fff; margin:8px 0 6px; text-shadow:2px 2px 0 var(--oca-pink);}
html[data-cancion="tiempo"] .lead-hero-overlay .dek{color:#ddd; font-size:15px; margin:0 auto; max-width:70ch;}

/* ---------- Lo más destacado: la columna de miniaturas de la vieja web ---------- */
html[data-cancion="tiempo"] .dest-grid{gap:16px;}
html[data-cancion="tiempo"] .dest-card{background:#fff; border:3px solid #000; border-top-width:3px; border-top-color:#000 !important; box-shadow:6px 6px 0 var(--oca-green);}
html[data-cancion="tiempo"] .dest-card:nth-child(2){box-shadow:6px 6px 0 var(--oca-pink);}
html[data-cancion="tiempo"] .dest-card .thumb{border-bottom:3px solid #000; background:#000;}
html[data-cancion="tiempo"] .dest-card .thumb .media-fill{transition:none !important; transform:none !important;}
html[data-cancion="tiempo"] .dest-card-body{padding:14px; gap:8px;}
html[data-cancion="tiempo"] .dest-card h3{font-size:13px !important; color:#000;}
html[data-cancion="tiempo"] .dest-card:hover h3{color:var(--oca-pink);}
html[data-cancion="tiempo"] .dest-card-dek{font-size:14.5px; color:var(--oca-ink-soft);}
html[data-cancion="tiempo"] .dest-card-type{color:var(--oca-pink) !important;}

/* ---------- Cards genéricas, listados y últimas publicaciones ---------- */
html[data-cancion="tiempo"] .card{background:#fff; border:3px solid #000; border-top-color:#000 !important; box-shadow:5px 5px 0 var(--oca-green); transform:none !important;}
html[data-cancion="tiempo"] .card:hover{transform:none !important; box-shadow:5px 5px 0 var(--oca-pink);}
html[data-cancion="tiempo"] .card:hover .thumb{box-shadow:none;}
html[data-cancion="tiempo"] .card .thumb{border-bottom:3px solid #000;}
html[data-cancion="tiempo"] .card h3{font-size:12px !important; color:#000;}
html[data-cancion="tiempo"] .card .dek{color:var(--oca-ink-soft); max-height:none; opacity:1; margin-top:8px; font-size:14px;}
html[data-cancion="tiempo"] .news-item, html[data-cancion="tiempo"] .home-news-item{border-top:2px dashed #bbb; padding:18px 0;}
html[data-cancion="tiempo"] .news-item:last-child{border-bottom:2px dashed #bbb;}
html[data-cancion="tiempo"] .news-item .thumb, html[data-cancion="tiempo"] .home-news-item .thumb{border:3px solid #000; border-top-color:#000 !important; background:#000; box-shadow:4px 4px 0 var(--oca-green);}
html[data-cancion="tiempo"] .news-item:hover .thumb, html[data-cancion="tiempo"] .home-news-item:hover .thumb{box-shadow:4px 4px 0 var(--oca-pink);}
html[data-cancion="tiempo"] .news-item h3, html[data-cancion="tiempo"] .home-news-item h3{font-size:13px !important; color:#000;}
html[data-cancion="tiempo"] .news-item h3 a:hover, html[data-cancion="tiempo"] .home-news-item h3 a:hover{color:var(--oca-pink) !important; text-decoration:underline;}
html[data-cancion="tiempo"] .news-item p, html[data-cancion="tiempo"] .home-news-item p{color:var(--oca-ink-soft); font-size:14.5px;}
html[data-cancion="tiempo"] .home-news-type{color:var(--oca-pink) !important;}
html[data-cancion="tiempo"] .load-more button{font-family:var(--oca-font-pixel); font-size:10px; background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff; padding:12px 20px; box-shadow:3px 3px 0 #000;}
html[data-cancion="tiempo"] .load-more button:hover{background:var(--oca-green); color:#000; border-color:#404040 #fff #fff #404040;}
html[data-cancion="tiempo"] .feed-loader, html[data-cancion="tiempo"] .feed-end{font-family:var(--oca-font-pixel); font-size:7.5px; color:var(--oca-ink-soft);}
html[data-cancion="tiempo"] .feed-spinner{border-radius:0 !important; border-color:#000; border-top-color:var(--oca-pink); animation-timing-function:steps(8);}

/* Lo más leído y lanzamientos: cuadro gris estilo "sidebar" de los 90. */
html[data-cancion="tiempo"] .most-read{position:static; background:#f0f0f0; border:3px solid #000; padding:14px; box-shadow:5px 5px 0 #000;}
html[data-cancion="tiempo"] .most-read-title{font-size:11px !important; color:#000; border-bottom:3px solid #000;}
html[data-cancion="tiempo"] .most-read-list li, html[data-cancion="tiempo"] .launches-list li{border-bottom:2px dashed #bbb;}
html[data-cancion="tiempo"] .most-read-list a{color:#000; font-size:15px;}
html[data-cancion="tiempo"] .most-read-list a:hover{color:var(--oca-pink);}
html[data-cancion="tiempo"] .most-read-num{font-family:var(--oca-font-pixel); font-size:12px; transform:none;}
html[data-cancion="tiempo"] .launch-date{font-family:var(--oca-font-pixel); font-size:7.5px; color:var(--oca-pink); width:60px;}
html[data-cancion="tiempo"] .launch-name{color:#000; font-size:13px;}

/* Entrevistas (bloque de la home y /entrevistas). */
html[data-cancion="tiempo"] .et{background:#fff; color:#000; border:3px solid #000; box-shadow:6px 6px 0 var(--oca-pink); transform:none !important;}
html[data-cancion="tiempo"] .et:hover{border-color:#000;}
html[data-cancion="tiempo"] .et-media{border-bottom:3px solid #000; background:#000;}
html[data-cancion="tiempo"] .et-main .et-media{border-bottom:0; border-right:3px solid #000;}
html[data-cancion="tiempo"] .et .media-fill{transition:none !important; transform:none !important;}
html[data-cancion="tiempo"] .et-title{font-size:13px !important; color:#000;}
html[data-cancion="tiempo"] .et-main .et-title{font-size:16px !important;}
html[data-cancion="tiempo"] .et:hover .et-title{color:var(--oca-pink);}
html[data-cancion="tiempo"] .et-topic{color:var(--oca-ink-soft); font-size:12.5px;}
html[data-cancion="tiempo"] .et-cta{font-family:var(--oca-font-pixel); font-size:7.5px; color:var(--oca-pink); border-bottom:2px solid var(--oca-pink);}
html[data-cancion="tiempo"] .ent-card .ent-guest{font-size:13px !important; color:#000; margin:12px 0 4px;}
html[data-cancion="tiempo"] .ent-thumb{border:3px solid #000; background:#000; box-shadow:5px 5px 0 var(--oca-green);}
html[data-cancion="tiempo"] .ent-topic{color:var(--oca-ink-soft);}
html[data-cancion="tiempo"] .ent-play, html[data-cancion="tiempo"] .et-play{border-radius:0 !important; background:#000; border:2px solid #fff; color:#fff;}
html[data-cancion="tiempo"] .ent-duration, html[data-cancion="tiempo"] .et-duration{font-family:var(--oca-font-pixel); font-size:7px; background:#000; color:var(--oca-green);}
html[data-cancion="tiempo"] .section > .et-grid{border-bottom:3px solid #000;}

/* ---------- Nota ---------- */
html[data-cancion="tiempo"] .article-head{padding-top:20px;}
html[data-cancion="tiempo"] .article-head .dek{color:var(--oca-ink-soft); font-size:17px;}
html[data-cancion="tiempo"] .article-hero-wrap{width:100%; left:0; transform:none; margin:18px 0 22px;}
html[data-cancion="tiempo"] .article-hero-divider{height:4px; background:linear-gradient(90deg, var(--oca-pink) 50%, var(--oca-green) 50%) !important;}
html[data-cancion="tiempo"] .article-hero-img{border:3px solid #000; background:#000; outline:none !important;}
html[data-cancion="tiempo"] .article-hero-img::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px) !important;}
html[data-cancion="tiempo"] .article-body{font-family:var(--oca-font-body); font-size:17px; line-height:1.8; color:#1a1a1a;}
html[data-cancion="tiempo"] .article-body h2, html[data-cancion="tiempo"] .article-body h4{font-size:14px !important; color:#000; margin:28px 0 14px;}
html[data-cancion="tiempo"] .article-body .rich-text a, html[data-cancion="tiempo"] .article-body h4 a{color:#0000ee !important; text-decoration:underline; border:0;}
html[data-cancion="tiempo"] .article-body .rich-text a:visited{color:#551a8b !important;}
html[data-cancion="tiempo"] .article-body .rich-text b, html[data-cancion="tiempo"] .article-body .rich-text strong{color:#000 !important;}
html[data-cancion="tiempo"] .article-body img{border:3px solid #000;}
html[data-cancion="tiempo"] .pull-quote{border:3px solid #000; border-left:8px solid var(--oca-pink); background:#f5f5f5; color:#000; font-size:15px; padding:14px 18px; box-shadow:5px 5px 0 #000;}
html[data-cancion="tiempo"] .factbox-block{border:3px solid #000; background:#f0f0f0; box-shadow:5px 5px 0 var(--oca-green);}
html[data-cancion="tiempo"] .factbox-row{color:#000; font-size:13px;}
html[data-cancion="tiempo"] .conclusion-block{border:3px solid #000 !important; border-left:8px solid var(--oca-green) !important; background:#f5f5f5; box-shadow:5px 5px 0 #000;}
html[data-cancion="tiempo"] .conclusion-label{font-family:var(--oca-font-pixel); font-size:7.5px; color:#000 !important;}
html[data-cancion="tiempo"] .conclusion-block p{color:#000; font-size:15px;}
html[data-cancion="tiempo"] .embed-youtube, html[data-cancion="tiempo"] .carousel-block .carousel-viewport{border:3px solid #000;}
html[data-cancion="tiempo"] .carousel-arrow, html[data-cancion="tiempo"] .carousel-zoom{background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff;}
html[data-cancion="tiempo"] .carousel-dot{border:2px solid #000; background:#fff;}
html[data-cancion="tiempo"] .carousel-dot.active{background:var(--oca-pink); transform:none;}
html[data-cancion="tiempo"] .carousel-count{font-family:var(--oca-font-pixel); font-size:7px; background:#000;}
html[data-cancion="tiempo"] .byline-foot{border-top:3px solid #000; border-bottom:3px solid #000; padding:22px 0;}
html[data-cancion="tiempo"] .byline-foot-avatar, html[data-cancion="tiempo"] .author-hero-photo{border:3px solid #000; box-shadow:4px 4px 0 var(--oca-pink);}
html[data-cancion="tiempo"] .byline-foot-avatar-fallback, html[data-cancion="tiempo"] .author-hero-photo-fallback{background:#000; color:var(--oca-green); font-family:var(--oca-font-pixel); border:3px solid #000;}
html[data-cancion="tiempo"] .byline-foot-name{font-size:13px !important; color:#000;}
html[data-cancion="tiempo"] .byline-foot-name:hover{color:var(--oca-pink);}
html[data-cancion="tiempo"] .byline-foot-bio, html[data-cancion="tiempo"] .author-hero-bio{color:var(--oca-ink-soft); font-size:13px;}
html[data-cancion="tiempo"] .byline-foot-socials a, html[data-cancion="tiempo"] .share-row a, html[data-cancion="tiempo"] .share-row button, html[data-cancion="tiempo"] .team-social-icons a, html[data-cancion="tiempo"] .go-btn, html[data-cancion="tiempo"] .search-form button{
  font-family:var(--oca-font-pixel); font-size:9.5px; background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff; box-shadow:2px 2px 0 #000; text-transform:none;
}
html[data-cancion="tiempo"] .byline-foot-socials a:hover, html[data-cancion="tiempo"] .share-row a:hover, html[data-cancion="tiempo"] .share-row button:hover, html[data-cancion="tiempo"] .team-social-icons a:hover, html[data-cancion="tiempo"] .go-btn:hover, html[data-cancion="tiempo"] .search-form button:hover{
  background:var(--oca-pink); color:#fff; border-color:#404040 #fff #fff #404040;
}
html[data-cancion="tiempo"] .go-btn{font-size:9px; padding:14px 20px;}
html[data-cancion="tiempo"] .go-glitch{font-size:clamp(22px, 6vw, 48px) !important; color:#000; text-shadow:3px 3px 0 var(--oca-pink);}
html[data-cancion="tiempo"] .go-code{font-family:var(--oca-font-pixel); font-size:8px; color:var(--oca-ink-soft);}
html[data-cancion="tiempo"] .about-hero{border-bottom:3px solid #000;}

/* ---------- Footer: barra negra con el contador de visitas ---------- */
html[data-cancion="tiempo"] footer{
  background:#000; color:#aaa; border:3px solid #000; border-top:4px solid var(--oca-green); padding:16px 18px 22px; margin-bottom:28px;
}
html[data-cancion="tiempo"] footer .brand-edge{display:none;}
html[data-cancion="tiempo"] .foot-logo{height:32px; border:0; image-rendering:pixelated;}
html[data-cancion="tiempo"] .foot-contact, html[data-cancion="tiempo"] .foot-copyright{font-family:var(--oca-font-pixel); font-size:9px; color:#aaa; border-color:#333;}
html[data-cancion="tiempo"] .foot-socials .nav-social-icon{width:28px; height:28px; padding:0;}
html[data-cancion="tiempo"] .oca-counter{
  width:100%; text-align:center; font-family:var(--oca-font-pixel); font-size:9px; color:#aaa; padding-top:12px; border-top:2px solid #222; margin-top:4px;
}
html[data-cancion="tiempo"] .oca-counter b{display:inline-block; background:#000; color:var(--oca-green); border:2px solid #333; padding:3px 6px; font-family:'Courier New', monospace; font-size:14px; font-weight:700; letter-spacing:2px; margin-left:6px;}

/* Barra de administrador (solo quien tiene sesión): la dejamos legible. */
html[data-cancion="tiempo"] .admin-bar{font-family:var(--oca-font-pixel); font-size:8px; background:#000; border-top:3px solid var(--oca-green);}
html[data-cancion="tiempo"] .admin-bar-link{border:2px solid #333;}


/* (el widget de la ocarina, Link, el bosque y la puerta están en ocarina-widget.css) */

/* ---------- Celular y tablet ---------- */
@media (max-width:1024px){
  /* El menú de la vieja web se ve entero (sin hamburguesa): los links se
     acomodan en dos filas y los botones de buscar/redes van debajo. */
  html[data-cancion="tiempo"] .nav-links{display:flex !important; border-bottom:0;}
  html[data-cancion="tiempo"] .nav-links a{padding:14px 12px; font-size:10px;}
  html[data-cancion="tiempo"] .menu-toggle{display:none !important;}
  html[data-cancion="tiempo"] .nav-socials{display:flex !important;}
  html[data-cancion="tiempo"] .nav-right{
    position:static; height:auto; justify-content:flex-end; padding:6px 8px; background:#000; border-top:2px solid #1c1c1c; border-bottom:4px solid var(--oca-pink);
  }
  html[data-cancion="tiempo"] .search-btn, html[data-cancion="tiempo"] .nav-social-icon{width:34px; height:34px;}
  html[data-cancion="tiempo"] .ticker-bar{margin-top:0;}
  html[data-cancion="tiempo"] .search-panel{right:8px; width:calc(100vw - 24px);}
}
@media (max-width:640px){
  html[data-cancion="tiempo"] .lead-hero-link{aspect-ratio:4/5;}
  html[data-cancion="tiempo"] .lead-hero-overlay{padding:10px 12px;}
  html[data-cancion="tiempo"] .lead-hero-overlay h1{font-size:13px !important; margin:6px 0 4px;}
  html[data-cancion="tiempo"] .lead-hero-overlay .dek{font-size:13px;}
  html[data-cancion="tiempo"] .page-header h1, html[data-cancion="tiempo"] .article-head h1{font-size:15px !important;}
  html[data-cancion="tiempo"] .section{padding:18px 14px;}
  html[data-cancion="tiempo"] .wrap, html[data-cancion="tiempo"] .content-wrap{padding:0 14px;}
}