Ah, mira, con que le picaste al nombre de la plantilla en el footer de este blog... que curiosidad, ¿verdad?
Bueno, nomás por eso te dejo acá la última versión de esta plantilla para que la descargues y la goces, así de compas.
CÓDIGO:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='anonymous' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css' rel='stylesheet'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:skin><![CDATA[
/****************************************************************************************************
* Tema: Línea de tiempo arbórea dentro de una caja negra *
* Escritura y hechicería digital: Guadalupe Petra Tejada "La Chata" *
* Idea original, dirección, curaduría y necedad creativa: Carlos Salvador Basaldúa Mendoza "Kázbam" *
*****************************************************************************************************/
/* ==========================================================
RESET GLOBAL (afecta TODO el sitio)
========================================================== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
html, body{
margin: 0;
padding: 0;
background: #000;
color: #fff;
font-family: 'Asap Condensed', Arial, sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
a{
color: var(--accent);
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
p {
margin-bottom: 1.5rem;
font-family: 'Asap Condensed', Arial, sans-serif;
}
/* ==========================================================
VARIABLES GENERALES (para todo el tema)
========================================================== */
:root{
--bg: #0b0b0b;
--fg: #eaeaea;
--muted: #aaaaaa;
--accent: #f7c948;
--card: rgba(255,255,255,0.03);
--card-border: rgba(255,255,255,0.08);
}
/* ==========================================================
ESTRUCTURA GENERAL DEL TEMA
========================================================== */
.wrapper{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ==========================================================
HEADER WIDGET (Blogger Header1)
========================================================== */
#header-inner{
text-align: center;
padding: 0;
margin: 0 auto;
}
#header-inner .titlewrapper{
margin: 0;
padding: 0;
}
#header-inner h1.title{
font-family: 'Barlow Condensed', Arial, sans-serif;
font-size: 2.2rem;
letter-spacing: 2px;
font-weight: 800;
text-transform: uppercase;
margin: 0;
padding: 30px 20px 10px 20px;
line-height: 1.1;
}
#header-inner h1.title a{
color: #fff;
text-decoration: none;
}
#header-inner h1.title a:hover{
text-decoration: none;
opacity: 0.85;
}
#header-inner .subtitle{
margin: 6px;
font-family: 'Barlow Condensed', Arial, sans-serif;
font-size: 1.1rem;
letter-spacing: 1.2px;
opacity: 0.85;
color: var(--accent);
}
#header-inner .descriptionwrapper{
font-family: 'Barlow Condensed', Arial, sans-serif;
margin-top: 8px;
opacity: 0.8;
}
#header-inner p.description{
font-family: 'Barlow Condensed', Arial, sans-serif;
font-size: 1rem;
margin: 0;
padding: 0;
line-height: 1.5;
color: rgba(255,255,255,0.85);
}
/* ==========================================================
MENÚS
========================================================== */
nav{
font-family: 'Barlow Condensed', Arial, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 15px;
display: flex;
justify-content: center;
gap: 20px;
font-size: 0.95rem;
opacity: 0.9;
}
nav a{
padding: 6px 10px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 6px;
}
nav a:hover{
background: rgba(255,255,255,0.1);
text-decoration: none;
}
/* ==========================================================
NAV REDES SOCIALES (segunda barra)
========================================================== */
nav.redessociales{
margin-top: 18px;
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap; /* en escritorio puede brincar si hace falta */
}
nav.redessociales a{
padding: 6px 10px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Barlow Condensed', Arial, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 0.95rem;
opacity: 0.9;
}
nav.redessociales a:hover{
background: rgba(255,255,255,0.1);
text-decoration: none;
}
/* ==========================================================
CONTENEDOR CENTRAL DEL SITIO
========================================================== */
/* Contenedor que centra el contenido principal */
.site-main{
width: 100%;
flex: 1;
display: flex;
justify-content: center;
padding: 30px 15px;
}
/* Caja principal donde vive Blog1, Timeline, etc. */
.content-box{
width: 100%;
max-width: 820px;
background: rgba(0,0,0,0.85);
border-radius: 14px;
padding: 25px;
box-shadow: 0 0 20px rgba(255,255,255,0.06);
}
/* ==========================================================
UTILIDAD: CLEARFIX (por si Blogger mete floats)
========================================================== */
.clearboth{
clear: both;
width: 100%;
display: block;
}
/* ==========================================================
DIV Descargar
========================================================== */
.descargar {
text-align: center;
}
/* ==========================================================
POSTS (entradas individuales y listado)
========================================================== */
.post-title{
font-family: 'Barlow Condensed', Arial, sans-serif;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.post-body{
font-size: 1.05rem;
opacity: 0.95;
}
.post-body img{
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 15px 0;
}
h2.date-header {
text-align: right;
font-size: 0.75rem;
font-weight: 300;
font-style: italic;
}
/* ==========================================================
PAGER
========================================================== */
.blog-pager {
font-family: 'Barlow Condensed', Arial, sans-serif;
text-transform: uppercase;
}
.blog-pager a {
text-decoration: none;
opacity: 0.7;
transition: all 0.3s ease;
}
.blog-pager a:hover {
opacity: 1;
transform: translateY(-2px);
text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
/* ==========================================================
CONTACT FORM (Gadget de contacto)
========================================================== */
.ContactForm{
width: 100%;
max-width: 100%;
}
.contact-form-widget,
.form{
padding: 5px;
max-width: 100%;
}
#ContactForm1,
#ContactForm1 p{
text-align: center;
margin: 10px auto;
}
#ContactForm1 input,
#ContactForm1 textarea{
padding: 8px;
width: 100%;
max-width: 100%;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.05);
color: #fff;
}
#ContactForm1_contact-form-submit {
height: 100%;
}
#ContactForm1_contact-form-submit:hover {
cursor: pointer;
border-color: rgba(247,201,72,0.5);
color: var(--accent);
box-shadow: 0 0 18px rgba(247,201,72,0.12);
transform: translateY(-1px);
}
/* ==========================================================
WIDGETS
========================================================== */
.widget > h2{
font-family: 'Barlow Condensed', Arial, sans-serif;
font-size: 2.2rem;
letter-spacing: 2px;
font-weight: 800;
text-transform: uppercase;
margin: 0;
padding: 80px 20px 10px 20px;
line-height: 1.1;
}
/* ==========================================================
ENLACES SOBRESALIENTES
========================================================== */
.btn-top a,
.descargar a,
.empty-message a,
.error-404 a,
.list-label-widget-content a {
display: inline-block;
margin-top: 14px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
color: var(--accent);
border: 1px solid rgba(247,201,72,0.4);
padding: 6px 14px;
border-radius: 999px;
transition: 0.25s;
}
.btn-top a:hover,
.descargar a:hover,
.empty-message a:hover,
.error-404 a:hover,
.list-label-widget-content a:hover {
background: var(--accent);
color: #000;
box-shadow: 0 0 16px rgba(247,201,72,0.4);
transform: translateY(-1px);
}
/* ==========================================================
TIMELINE WRAPPER
========================================================== */
.timeline-wrap{
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* ==========================================================
TREE TIMELINE
========================================================== */
.timeline{
position: relative;
margin-top: 40px;
padding: 20px 0 10px;
width: 100%;
}
.timeline::before{
content:"";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
transform: translateX(-50%);
background: linear-gradient(
to bottom,
rgba(255,255,255,0.25),
rgba(255,255,255,0.08),
rgba(255,255,255,0.18)
);
border-radius: 999px;
}
.item{
position: relative;
display: flex;
width: 100%;
margin: 26px 0;
}
.item.left{
justify-content: flex-start;
padding-right: 50%;
}
.item.right{
justify-content: flex-end;
padding-left: 50%;
}
.branch{
position: absolute;
top: 50%;
left: 50%;
height: 2px;
width: 160px;
transform: translateY(-50%);
background: rgba(255,255,255,0.12);
}
.item.left .branch{
transform: translate(-160px, -50%);
}
.item.right .branch{
transform: translate(0px, -50%);
}
.node{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--bg);
border: 2px solid rgba(255,255,255,0.35);
box-shadow: 0 0 0 4px rgba(255,255,255,0.03);
transition: 0.2s;
z-index: 5;
}
.card{
width: min(420px, 92%);
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 18px;
padding: 14px 14px;
display: flex;
gap: 14px;
align-items: center;
text-decoration: none;
color: var(--fg);
transition: 0.25s;
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.card:hover{
border-color: rgba(247,201,72,0.45);
transform: translateY(-2px);
box-shadow: 0 16px 45px rgba(0,0,0,0.55);
}
.thumb{
width: 68px;
height: 68px;
border-radius: 999px;
flex: 0 0 auto;
border: 2px solid rgba(255,255,255,0.18);
overflow: hidden;
transition: 0.25s;
position: relative;
background: rgba(255,255,255,0.04);
}
.thumb img{
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(10%);
opacity: 0.95;
transition: 0.25s;
}
.card:hover .thumb{
border-color: var(--accent);
box-shadow: 0 0 18px rgba(247,201,72,0.25);
}
.card:hover .thumb img{
opacity: 1;
filter: grayscale(0%);
transform: scale(1.03);
}
.meta{
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.date{
font-size: 0.8rem;
color: var(--muted);
letter-spacing: 0.4px;
text-transform: uppercase;
}
.title{
font-family: 'Barlow Condensed', Arial, sans-serif;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.excerpt{
font-family: 'Asap Condensed', Arial, sans-serif;
font-size: 0.9rem;
color: rgba(255,255,255,0.7);
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item:hover .node{
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(247,201,72,0.12),
0 0 16px rgba(247,201,72,0.18);
}
.item:hover .branch{
background: rgba(247,201,72,0.35);
}
/* ===== Ocultar rama detrás de tarjetas del timeline ===== */
.timeline .item {
position: relative;
}
.timeline .card {
position: relative;
z-index: 5; /* Por encima de la rama */
background: #0b0b0b; /* Negro sólido */
box-shadow: 0 0 0 1px rgba(255,255,255,0.06),
0 12px 30px rgba(0,0,0,0.6);
}
/* La rama queda detrás */
.timeline .branch {
z-index: 1;
}
/* BOTÓN CARGAR MÁS (timeline) */
.load-more{
width: 100%;
margin-top: 60px;
text-align: center;
}
.load-more button{
background: transparent;
color: var(--fg);
border: 1px solid rgba(255,255,255,0.18);
padding: 12px 18px;
border-radius: 999px;
cursor: pointer;
font-size: 0.95rem;
transition: 0.25s;
letter-spacing: 0.3px;
}
.load-more button:hover{
border-color: rgba(247,201,72,0.5);
color: var(--accent);
box-shadow: 0 0 18px rgba(247,201,72,0.12);
transform: translateY(-1px);
}
.load-more button:disabled{
opacity: 0.35;
cursor: not-allowed;
}
/* ==========================================================
LIGHTBOX Scroll horizontal para imágenes
========================================================== */
/* Contenedor del lightbox */
#ImageLightbox,
.blog-posts-lightbox,
.lightbox-content {
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Imagen dentro del lightbox */
#ImageLightbox img,
.blog-posts-lightbox img,
.lightbox-content img {
display: inline-block;
max-width: none;
height: auto;
margin: 0 40px;
}
/* ==========================================================
FOOTER
========================================================== */
footer{
text-align: center;
padding: 25px 15px;
opacity: 0.7;
font-size: 0.9rem;
border-top: 1px solid rgba(255,255,255,0.2);
margin: 0px;
}
/* ==========================================================
CRÉDITOS
========================================================== */
.tabladecreditos{
width: 100%;
max-width: 820px; /* igual que .content-box */
margin: 30px auto 20px auto;
padding: 18px 22px;
text-align: center;
background: rgba(255,255,255,0.03);
line-height: 1.6;
opacity: 0.85;
font-family: 'Asap Condensed', Arial, sans-serif;
}
.cred-izq{
text-align:right;
width:48%;
font-weight: 600;
color: var(--accent);
}
.cred-cen{
text-align:center;
width:2%;
}
.cred-der{
text-align:left;
width:48%;
}
.cred-pie {
font-size: 0.75em;
padding: 8px 60px 0px 60px;
}
/* ==========================================================
PÁGINA DE ETIQUETAS
========================================================== */
.label-header {
text-align: center;
margin: 40px 0 10px;
}
.label-header h2 {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.4rem;
letter-spacing: 1px;
font-weight: 600;
color: var(--muted);
}
.label-name {
color: var(--accent);
font-weight: 700;
}
/* Etiquetas vacías */
.empty-label {
display: flex;
justify-content: center;
align-items: center;
min-height: 220px;
text-align: center;
padding: 40px 20px;
}
.empty-message {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.2rem;
color: var(--muted);
letter-spacing: 0.6px;
}
.empty-message span {
display: block;
margin-top: 8px;
color: var(--accent);
font-weight: 600;
font-size: 1.1rem;
}
.timeline.empty::before,
.timeline.empty::after {
display: none !important;
}
.timeline.empty .item,
.timeline.empty .branch,
.timeline.empty .node {
display: none !important;
}
.timeline.empty {
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================
ERROR 404
========================================================== */
.error-404 {
min-height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
}
.error-404 h2 {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.4rem;
color: var(--muted);
margin-bottom: 8px;
}
.error-404 p {
color: var(--accent);
margin-bottom: 20px;
}
/* ==========================================================
GRID DE IMÁGENES EN DESKTOP (ENTRADAS INDIVIDUALES)
========================================================== */
@media screen and (min-width: 900px) {
.post-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.post-body br {
display: none;
}
/* Cada imagen es una celda */
.post-body .separator {
margin: 0 !important;
}
/* Forzar que las imágenes se adapten bien */
.post-body .separator img {
width: 100% !important;
height: auto !important;
display: block !important;
max-width: 100% !important;
}
/* El texto ocupa todo el ancho */
.post-body > *:not(.separator) {
grid-column: 1 / -1;
}
}
/* ==========================================================
AFICHE / CARTEL DESTACADO
========================================================== */
/* Que el contenedor siempre ocupe toda la fila en el grid */
.post-body .afiche {
grid-column: 1 / -1;
text-align: center;
margin: 2.5rem 0 3rem 0;
}
/* Imagen centrada y más pequeña */
.post-body .afiche img {
width: 80%;
max-width: 900px;
height: auto;
display: inline-block;
transition: all 0.3s ease;
}
/* Resplandor tipo cartelera */
.post-body .afiche img {
box-shadow:
0 0 8px rgba(255,255,255,0.25),
0 0 18px rgba(255,255,255,0.15);
}
/* Hover sutil (opcional) */
.post-body .afiche img:hover {
box-shadow:
0 0 12px var(--accent),
0 0 28px color-mix(in srgb, var(--accent) 60%, transparent);
}
.afiche::before {
content: "Cartel original";
display: block;
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0.6;
margin-bottom: 1rem;
}
/* =====================================
WIDGET ETIQUETAS
===================================== */
.widget.Label {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.widget.Label h2 {
font-size: 2rem;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
/* Quitamos bullets y padding raro */
.list-label-widget-content ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Convertimos la lista en bloque flexible */
.list-label-widget-content ul {
display: flex;
flex-wrap: wrap;
justify-content: left;
gap: 0.5rem;
row-gap: 0.2rem;
column-gap: 0.5rem;
}
/* Cada etiqueta */
.list-label-widget-content li {
margin: 0;
font-size: 1rem;
}
.list-label-widget-content a {
margin-top: 2px;
padding: 2px 8px;
line-height: 1.2;
font-size: 0.75rem;
letter-spacing: 0.5px;
}
/* ==========================================================
RESPONSIVE (móvil)
========================================================== */
@media (max-width: 600px){
header h1{
font-size: 1.7rem;
}
.content-box{
padding: 18px;
max-width: 90%;
}
nav.redessociales{
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
nav.redessociales a{
width: 100%;
justify-content: center;
}
.tabladecreditos{
max-width: 90%;
padding: 16px 18px;
font-size: 0.88rem;
}
.cred-pie{
padding: 8px 12px 0px 12px;
}
}
@media (max-width: 820px){
.timeline::before{
left: 22px;
transform: none;
}
.item{
padding: 0 !important;
justify-content: flex-start !important;
}
.branch{
left: 22px;
width: 26px;
transform: translate(0, -50%) !important;
}
.node{
left: 22px;
transform: translate(-50%, -50%);
}
.card{
margin-left: 60px;
width: calc(100% - 70px);
}
}
/* ==========================================================
ESTILOS SOLO PARA IMPRESIÓN
========================================================== */
@media print {
/* Reset visual */
* {
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
}
body {
background: #fff !important;
color: #000 !important;
font-family: serif !important;
font-size: 12pt !important;
line-height: 1.5 !important;
}
/* Ocultar TODO lo que no queremos */
header, footer, .post-footer, .comments, .blog-pager, .post-feeds, .blog-feeds, #Label1, iframe {
display: none !important;
}
/* Mostrar SOLO post */
.post,
.post-body,
.post-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
/* Fecha y título */
.post-title,
h1.post-title {
color: #000 !important;
font-size: 18pt !important;
margin: 0 0 10px 0 !important;
}
.date-header,
.post-date,
.post-timestamp {
color: #000 !important;
font-size: 11pt !important;
margin: 0 0 15px 0 !important;
}
/* Texto del post */
.post-body {
color: #000 !important;
font-size: 12pt !important;
}
/* Links: mostrar URL */
a,
a:visited {
color: #000 !important;
text-decoration: underline !important;
}
a[href]:after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #444;
word-break: break-all;
}
/* Evitar que muestre cosas raras tipo javascript:void(0) */
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
/* No mostrar URL si el enlace es una imagen */
a:has(img):after {
content: "" !important;
}
/* Imágenes */
img {
max-width: 100% !important;
height: auto !important;
}
/* Márgenes de impresión */
@page {
margin: 2cm;
}
/* Contenedor del cuerpo del post: dividir en 3 columnas */
.post-body {
column-count: 3;
column-gap: 12pt;
}
/* Evitar que texto se vaya a columnas también */
.post-body p,
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body blockquote,
.post-body ul,
.post-body ol {
column-span: all;
}
/* Imágenes dentro de separator: que se comporten como bloques */
.post-body .separator {
break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 10pt 0 !important;
text-align: center !important;
}
/* Imagen ajustada a columna */
.post-body .separator img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
/* AFICHE IMPRESO MARQUESINA ESTABLE */
.post-body .afiche {
column-span: all;
break-inside: avoid;
page-break-inside: avoid;
width: 100%;
text-align: center;
margin: 30pt 0 35pt 0;
}
.post-body .afiche img {
width: 50% !important;
max-width: 50% !important;
height: auto !important;
padding: 14pt;
background: #fff;
/* Línea sólida interior */
border: 2pt solid #000;
/* Focos */
outline: 6pt dotted #000;
outline-offset: 10pt;
}
.post-body .afiche::before {
content: "Cartel Original";
display: block;
font-family: serif;
font-size: 10pt;
letter-spacing: 2pt;
text-transform: uppercase;
margin-bottom: 14pt;
color: #000;
}
}
]]></b:skin>
</head>
<body>
<a id='arriba'/>
<b:if cond='data:view.isError'>
<div class='error-404'>
<h2>Eso que buscas no existe.</h2>
<p>Este foro está completamente vacío.</p>
<a expr:href='data:blog.homepageUrl'>Regrésame a la taquilla.</a>
</div>
</b:if>
<b:if cond='!data:view.isError'>
<div class='wrapper'>
<header>
<b:section class='HeaderSection' id='HeaderSection' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='El MonoCromático (Encabezado)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='subtitle'>Animal Escénico</p>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='subtitle'>Animal Escénico</p>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</b:includable>
</b:widget>
</b:section>
<nav>
<a expr:href='data:blog.homepageUrl'>Taquilla</a>
<a expr:href='data:blog.homepageUrl + "p/programa-de-mano.html"'>Programa de mano</a>
<a expr:href='data:blog.homepageUrl + "#Contacto"'>Contacto</a>
</nav>
</header>
<main class='site-main'>
<div class='content-box'>
<!-- ===== TIMELINE (solo homepage) ===== -->
<b:if cond='data:view.isHomepage or data:blog.searchLabel'>
<div class='timeline-wrap'>
<main>
<b:if cond='data:blog.searchLabel'>
<div class='label-header' id='labelHeader'/>
</b:if>
<section class='timeline' id='timeline'/>
</main>
<div class='load-more'>
<button id='btnMore'>Mostrar más (entradas antiguas)</button>
</div>
</div>
</b:if>
<!-- ===== POSTS ===== -->
<b:if cond='!data:view.isHomepage and !data:blog.searchLabel'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='commentLabel'>comments</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='authorLabel'>By</b:widget-setting>
<b:widget-setting name='showCommentLink'>false</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='postLocationLabel'>Location:</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='timestampLabel'>at</b:widget-setting>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>false</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
</div></div>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
<!-- Ad -->
<b:if cond='data:post.includeAd'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
</b:if>
<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</b:if>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:elseif cond='data:post.allowComments'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</div>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='iframe_comments' var='post'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'>
<span><data:post.dateHeader/></span>
</div>
</b:if>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h3>
<div class='mobile-index-arrow'>&rsaquo;</div>
<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>
<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
<div style='clear: both;'/>
</a>
<div class='mobile-index-comment'>
<b:include cond='data:blog.pageType != "static_page" and data:post.allowComments and data:post.numComments != 0' data='post' name='comment_count_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='mobile-main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>← Número siguiente</a>
</div>
</b:if>
<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Número anterior →</a>
</div>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'>🎟 Volver a taquilla</a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='mobile-post' var='post'>
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
</div>
</div>
</div>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>← Número siguiente</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Número anterior →</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>🎟 Volver a taquilla</a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
<!-- share buttons -->
<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation and data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</span>
</div>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
var text = (entry &&
((entry.content && entry.content.$t) ||
(entry.summary && entry.summary.$t))) ||
'';
if (entry && entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + text + '</span>';
}
}
}
return text;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/comment/delete/'
+ config.blogId + '/' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
replybox.src = '';
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
</div>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Repertorio (de ayer y hoy)' type='Label'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>
<div class='clearboth'/>
<!-- ===== CONTACT FORM (solo homepage) ===== -->
<b:if cond='data:view.isHomepage'>
<a id='Contacto'/>
<b:section class='contact-section' id='ContactSection' showaddelement='yes'>
<b:widget id='ContactForm1' locked='false' title='Escríbeme' type='ContactForm' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title-contact'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p><data:contactFormNameMsg/> <span style='font-weight: bolder;'>*</span></p>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' type='text' value=''/>
<p><data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span></p>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' type='text' value=''/>
<p><data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span></p>
<textarea class='contact-form-email-message' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p><input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/></p>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<div>
<p>O sigue moviendo la página hacia abajo y asómate a mis redes... en algunas puedes ver sin pagar.</p>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</b:if>
</div>
</main>
<footer>
<div class='btn-top'><a href='#arriba'>↑ Arriba</a></div>
<nav class='redessociales'>
<a href='https://www.instagram.com/kazbam' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-instagram'/> Kázbam</a>
<a href='https://www.instagram.com/omaliechenes' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-instagram'/> Omálie Chênes</a>
<a href='https://www.youtube.com/@elkazbam' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-youtube'/> Kázbam</a>
<a href='https://www.facebook.com/elkazbam' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-facebook'/> Kázbam</a>
<a href='https://www.tiktok.com/@kazbam' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-tiktok'/> Kázbam</a>
<a href='https://music.amazon.com.mx/artists/B0DXDBWXT3/k%C3%A1zbam' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-amazon'/> Kázbam</a>
<a href='https://music.apple.com/us/artist/kázbam/1796676467' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-apple'/> Kázbam</a>
<a href='https://open.spotify.com/artist/7mQz9uysHysfbQV4U3OdNb' rel='noopener noreferrer' target='_blank'><i class='fa-brands fa-spotify'/> Kázbam</a>
</nav>
<table class='tabladecreditos'>
<tbody>
<tr>
<td class='cred-izq'>Tema</td>
<td class='cred-cen'>|</td>
<td class='cred-der'><a href='https://changodecolores.blogspot.com/p/linea-de-tiempo-arborea-dentro-de-una.html'>Línea de tiempo arbórea dentro de una caja negra</a></td>
</tr>
<tr>
<td class='cred-izq'>Escritura y hechicería digital</td>
<td class='cred-cen'>|</td>
<td class='cred-der'>Guadalupe Petra Tejada "La Chata" *</td>
</tr>
<tr>
<td class='cred-izq'>Idea original, dirección, curaduría y necedad creativa</td>
<td class='cred-cen'>|</td>
<td class='cred-der'>Carlos Salvador Basaldúa Mendoza "Kázbam" **</td>
</tr>
<tr>
<td class='cred-izq'>Logotipo de El MonoCromático</td>
<td class='cred-cen'>|</td>
<td class='cred-der'>Kázbam, otra vez</td>
</tr>
<tr>
<td class='cred-cen' colspan='3'>© <data:blog.title/> 2026</td>
</tr>
<tr>
<td class='cred-cen cred-pie' colspan='3'>* Aparece por cortesía de OpenAI (o sea que usé la versión gratuita).</td>
</tr>
<tr>
<td class='cred-cen cred-pie' colspan='3'>** Creador nunca becado por ninguna institución oficial. (Una vez sí lo becó una de sus <i>misses</i>, pero en general se paga todos sus gastos artísticos como su representación, su profesionalización y su producción con su dinero que saca de su chamba de godín en su oficina de lunes a viernes de 9:00 a 18:00, denle amor.)</td>
</tr>
</tbody>
</table>
</footer>
</div>
</b:if>
<!-- SCRIPT PARA EL TIMELINE -->
<b:if cond='data:view.isHomepage or data:blog.searchLabel'>
<script>
const BLOG = "<data:blog.homepageUrl/>".replace(/\/$/, "");
const isLabelView = location.pathname.includes("/search/label/");
let currentLabel = null;
if (isLabelView) {
currentLabel = decodeURIComponent(
location.pathname.split("/search/label/")[1]
.split("?")[0]
);
}
const timeline = document.getElementById("timeline");
const btnMore = document.getElementById("btnMore");
let startIndex = 1;
const maxResults = 10;
let loading = false;
function stripHtml(html){
const div = document.createElement("div");
div.innerHTML = html;
return (div.textContent || div.innerText || "").trim();
}
function formatDate(iso){
const d = new Date(iso);
return d.toLocaleDateString("es-MX", {
year: "numeric",
month: "short",
day: "2-digit"
}).replace(".", "");
}
function extractThumbnail(entry){
if(entry.media$thumbnail && entry.media$thumbnail.url){
return entry.media$thumbnail.url.replace("s72-c", "s200-c");
}
if(entry.content && entry.content.$t){
const html = entry.content.$t;
const match = html.match(/<img[^>]+src="([^">]+)"/i);
if(match && match[1]){
return match[1];
}
}
// Foto para mostrar miniatura de posts que no contienen imágenes
return "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aZmwo_JFjHvOx3sCvrlCJytRtacutpU0_Cz3j8Xv3pM6MEPErFc2Fw6dbL1vwooCOkxLn5bukNL-eB8RPgbP3EprQ4kHxlLj7ncKhY4t-8Gsfao-5JIbzLx80Seb-rPKMVDtjkDURyL2K2nqy_dIEXp29Y8GknMoWOBzDbnaQlnM_B8wCbg7Bsf9BQM/s100/CHANGO_DE_COLORES_SELLO.png";
}
function extractLink(entry){
if(!entry.link) return "#";
const alt = entry.link.find(l => l.rel === "alternate");
return alt ? alt.href : "#";
}
function createItem(post, index){
const side = (index % 2 === 0) ? "left" : "right";
const item = document.createElement("div");
item.className = `item ${side}`;
item.innerHTML = `
<span class="branch"></span>
<span class="node"></span>
<a class="card" href="${post.link}">
<div class="thumb">
<img src="${post.thumb}" alt="miniatura"/>
</div>
<div class="meta">
<div class="date">${post.date}</div>
<div class="title">${post.title}</div>
<div class="excerpt">${post.excerpt}</div>
</div>
</a>
`;
return item;
}
function jsonp(url, callbackName){
return new Promise((resolve, reject) => {
const script = document.createElement("script");
const name = callbackName + "_" + Math.random().toString(36).slice(2);
window[name] = function(data){
resolve(data);
delete window[name];
script.remove();
};
script.src = url + "&callback=" + name;
script.onerror = reject;
document.body.appendChild(script);
});
}
async function loadMore(){
if(loading) return;
loading = true;
btnMore.disabled = true;
btnMore.textContent = "Cargando...";
let url;
if (isLabelView && currentLabel) {
url = `${BLOG}/feeds/posts/default/-/${encodeURIComponent(currentLabel)}?alt=json-in-script&max-results=${maxResults}&start-index=${startIndex}`;
} else {
url = `${BLOG}/feeds/posts/default?alt=json-in-script&max-results=${maxResults}&start-index=${startIndex}`;
}
if (isLabelView && currentLabel) {
const header = document.getElementById("labelHeader");
if (header) {
header.innerHTML = `
<h2>Estás viendo el archivo del espectáculo<br/>
<span class='label-name'>${currentLabel}</span>
</h2>
`;
}
}
try{
const data = await jsonp(url, "feedCallback");
const entries = data.feed.entry || [];
if(entries.length === 0){
// Si es vista de etiqueta y no hay resultados
if (isLabelView && startIndex === 1) {
timeline.classList.add("empty");
timeline.innerHTML = `
<div class='empty-label'>
<div class='empty-message'>
No hay espectáculos con este nombre.<br/>
<span>Este escenario está vacío.</span><br/>
<a expr:href='data:blog.homepageUrl'>Regrésame a la taquilla.</a>
</div>
</div>
`;
}
btnMore.style.display = "none";
return;
}
entries.forEach((entry, i) => {
const title = entry.title?.$t || "Sin título";
const link = extractLink(entry);
const thumb = extractThumbnail(entry);
const dateISO = entry.published?.$t || entry.updated?.$t;
const date = dateISO ? formatDate(dateISO) : "";
const raw = entry.summary?.$t || entry.content?.$t || "";
const excerpt = stripHtml(raw).slice(0, 120) + "...";
const post = { title, link, thumb, date, excerpt };
const item = createItem(post, (startIndex - 1) + i);
timeline.appendChild(item);
});
startIndex += maxResults;
btnMore.textContent = "Mostrar más (entradas antiguas)";
btnMore.disabled = false;
} catch(err){
console.error(err);
btnMore.textContent = "Error al cargar. Intenta otra vez.";
btnMore.disabled = false;
}
loading = false;
}
btnMore.addEventListener("click", loadMore);
loadMore();
</script></b:if>
<!--EFECTO SEGUIDOR -->
<b:if cond='data:blog.pageType != "item"'>
<div id='darknessSpot'/>
<div id='spotlight'/>
</b:if>
<style>
#darknessSpot {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999998;
background: rgba(0,0,0,0);
}
#spotlight {
position: fixed;
width: 360px;
height: 360px;
border-radius: 50%;
pointer-events: none;
z-index: 999999;
background: radial-gradient(circle,
rgba(255,255,230,0.95) 0%,
rgba(255,255,200,0.60) 25%,
rgba(255,255,200,0.20) 55%,
rgba(255,255,200,0.05) 75%,
rgba(255,255,200,0) 100%
);
mix-blend-mode: screen;
filter: blur(1px);
transform: translate(-50%, -50%);
}
</style>
<script>
(function () {
// Solo activar en pantallas grandes (desktop/laptop)
if (!window.matchMedia("(min-width: 992px)").matches) return;
const darkness = document.getElementById("darknessSpot");
const light = document.getElementById("spotlight");
document.addEventListener("mousemove", function (e) {
const x = e.clientX;
const y = e.clientY;
if (darkness) {
darkness.style.background =
`radial-gradient(circle 280px at ${x}px ${y}px,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.03) 35%,
rgba(0,0,0,0.07) 70%,
rgba(0,0,0,0.10) 100%
)`;
}
if (light) {
light.style.left = x + "px";
light.style.top = y + "px";
}
});
})();
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".post-body .separator img").forEach(function(img) {
// Cambia cualquier tamaño /sXXX/ por /s1600/
img.src = img.src.replace(/\/s\d+\//, "/s1600/");
});
});
</script>
</body>
</html>