/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
*{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%;}
body{margin:0;}
main{display:block;}
h1{font-size:2em;margin:0.67em 0;}
hr{box-sizing:content-box;height:0;overflow:visible;}
pre{font-family:monospace, monospace;font-size:1em;}
a{background-color:transparent;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
b,strong{font-weight:bolder;}
code,kbd,samp{font-family:monospace, monospace;font-size:1em;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-0.25em;}
sup{top:-0.5em;}
img{border-style:none;}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}
button,input{overflow:visible;}
button,select{text-transform:none;}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}
fieldset{padding:0.35em 0.75em 0.625em;}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
progress{vertical-align:baseline;}
textarea{overflow:auto;}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
details{display:block;}
summary{display:list-item;}
template{display:none;}
[hidden]{display:none;}

/* ======================================================
		 🌙 VARIABLES — MODO OSCURO (default)
		 ====================================================== */
:root{
	--bg-body:#333;
	--bg-surface:#272727;
	--bg-surface-alt:#2b2b2b;
	--bg-card:#303030;
	--bg-header:rgba(29,29,31,.7);
	--bg-overlay:rgba(29,29,31,.9);
	--bg-selection:#EEE;

	--text-primary:#DDD;
	--text-heading:#FFF;
	--text-muted:#FFF7;
	--text-inverse:#222;
	--text-link:#FFF;
	--text-danger:#ff3b30;

	--border-default:#FFF2;
	--border-highlight:#FC0;

	--accent:#FC0;

	--shadow-text:0 1px 3px rgba(0,0,0,.5);
	--shadow-code:
		inset 0 1px 10px rgba(0,0,0,.3),
		0 1px 0 rgba(255,255,255,.1),
		0 -1px 0 rgba(0,0,0,.5);
	--shadow-inset:0 0 16px inset rgba(0,0,0,.6);
}

/* ======================================================
		 ☀️ MODO CLARO AUTOMÁTICO
		 ====================================================== */
@media (prefers-color-scheme: light){
	:root{
	--bg-body:#F5F5F5;
	--bg-surface:#FFFFFF;
	--bg-surface-alt:#F0F0F0;
	--bg-card:#FFFFFF;
	--bg-header:rgba(255,255,255,.8);
	--bg-overlay:rgba(255,255,255,.9);
	--bg-selection:#333;

	--text-primary:#222;
	--text-heading:#111;
	--text-muted:rgba(0,0,0,.5);
	--text-inverse:#FFF;
	--text-link:#111;
	--text-danger:#C00;

	--border-default:rgba(0,0,0,.15);
	--border-highlight:#C90;

	--accent:#C90;

	--shadow-text:none;
	--shadow-code:
		inset 0 1px 6px rgba(0,0,0,.1),
		0 1px 0 rgba(0,0,0,.05),
		0 -1px 0 rgba(0,0,0,.05);
	--shadow-inset:0 0 12px inset rgba(0,0,0,.15);
	}

}

/* ======================================================
	 BASE
	 ====================================================== */
html{font-size:16px;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'Apple Color Emoji', sans-serif;}

body{
	display: grid;
	grid-template-rows: min-content, auto, min-content;
	background-color:var(--bg-body);
	color:var(--text-primary);
	font-size: calc(16px + (22 - 16) * ((100vw - 300px)/ (3200 - 300)));
	text-shadow:var(--shadow-text);
	min-height:100vh;
}
img,video,iframe{max-width: 100%;height: auto;}

a,a:visited{
	color:var(--text-link);
	text-decoration:none;
	transition:.3s;
	border-bottom:1px dotted var(--border-default);
}

a:hover,a:focus,a:active{
	color:var(--accent);
	border-bottom-color:var(--accent);
}

::selection{
	background-color:var(--bg-selection);
	color:var(--text-inverse);
	text-shadow:none;
}
em, i{
	font-family: "Victor Mono", sans-serif;
	font-size:.8em;
}

h1{
	text-align: center;
}
h1,h2,h3,h4,h5,h6{
	color:var(--text-heading);
	font-family:Titulos, Helvetica, Arial, sans-serif;
}

/* HEADER */
body > header{
	background-color:var(--bg-header);
	backdrop-filter:blur(9px);
	position:sticky;
	top:0;
	left:0;
	z-index:9997;
	display: grid;
	grid-template-columns: max-content max-content 1fr;
	gap: 1em;
	align-items: baseline;
}
body > header :last-child{
	justify-self:end;
}
body > header p{
	line-height: 1;
}
body > header p:first-child {
	opacity: .92;
	font-size: 1.4rem;
	white-space: nowrap;
	line-height: 1;
	padding: 0;
}
body > header p svg {
	width: 1.1em;
	vertical-align: baseline;
	fill:var(--text-heading);;
	transition: .3s;
}
body > header,
main{
	padding: 0 calc(max((100% - 980px)/ 2,.6em));
}

/* ACERCA DE */
.entrada-acerca-de h1 em{
	display:none;
}
.entrada-acerca-de h1::after{
	content:"mi";
	display:inline;
}
article > section{
	margin: 2em 0;
	padding: 1em;
	border-radius: 12px;
	background-color: var(--bg-card);
	box-shadow: var(--shadow-inset);
}
.imagen-y-texto{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:2rem;
	align-items:center;
}
.imagen-derecha .texto-columna {
    order: 1;
}

.imagen-derecha .imagen-columna {
    order: 2;
}

.imagen-izquierda .texto-columna {
    order: 2;
}

.imagen-izquierda .imagen-columna {
    order: 1;
}

.contenedor-imagen {
	position: relative;
	display: inline-block;
	border-radius: 12px 12px 12px 0;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	display:flex;
	place-items: center;
}


.texto-columna {
	padding-bottom: 2em;
}

.texto-columna h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-family: system-ui, -apple-system, sans-serif;
	text-align:center;
}

.texto-columna p {
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.texto-columna p::first-letter {
	font-weight: 100;
	font-size:1.5em;
	line-height: 1;
	font-family: "Lavishly Yours", cursive;
}

.texto-columna ul {
    list-style-type: none;
    padding: 0;
	margin:1em auto;
}

.texto-columna li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.texto-columna li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #0066cc;
}

/* Estilos para el contenedor de la imagen */
.imagen-columna {
    width: 100%;
	margin:0;
	padding:2em;
}

.contenedor-imagen {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    cursor: pointer;
    background: var(--bg-body);
}

/* La imagen y el video comparten el mismo espacio */
.foto-estatica,
.live-video {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* La imagen estática se muestra por defecto */
.foto-estatica {
    opacity: 1;
	height:100%;
	object-fit: cover;
}

/* El video empieza oculto */
.live-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

/* En hover, intercambiamos las opacidades */
.contenedor-imagen:hover .live-video {
    opacity: 1;
}

.contenedor-imagen:hover .foto-estatica {
    opacity: 0;
}

/* Badge LIVE */
.live-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: #444;
    padding: 6px 14px 6px 10px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

/* Círculo animado del badge */
.live-badge::before {
    content: "◉";
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
    animation: livePulse 2s infinite;
}
.live-photo:hover .live-badge::before {
	color:var(--text-danger);
}

@keyframes livePulse {
    0% {
        opacity: 1;
        text-shadow: 0 0 0 rgba(255, 59, 48, 0);
    }
    50% {
        opacity: 0.8;
        text-shadow: 0 0 8px rgba(255, 59, 48, 0.5);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 0 rgba(255, 59, 48, 0);
    }
}

/* Efecto sutil al hacer hover en el badge */
.contenedor-imagen:hover .live-badge {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 1);
}

/* Estilos para el figcaption y details */
.imagen-columna figcaption {
    margin-top: .5em;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: system-ui, -apple-system, sans-serif;
	text-align: center;
}

.imagen-columna details {
    cursor: pointer;
}

.imagen-columna details summary {
    color: #0066cc;
    font-weight: 500;
    list-style: none;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.imagen-columna details summary:hover {
    background: rgba(0,102,204,0.1);
}

.imagen-columna details summary::before {
    content: "🔍 ";
    font-size: 12px;
}

.imagen-columna details[open] summary::before {
    content: "📝 ";
}


.columnas-texto{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	background: linear-gradient(90deg, transparent 0%, transparent 49.4%, var(--border-default) 49.42%, var(--border-default) 49.48%, transparent 49.5%, transparent 100%);
}


/* Responsive */
@media (max-width: 768px) {
    .imagen-y-texto {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .imagen-derecha .texto-columna,
    .imagen-derecha .imagen-columna,
    .imagen-izquierda .texto-columna,
    .imagen-izquierda .imagen-columna {
        order: 0;
    }

    .texto-columna {
        padding: 0;
    }

    .texto-columna h2 {
        font-size: 1.75rem;
    }

    .live-badge {
        bottom: 12px;
        right: 12px;
        padding: 4px 12px 4px 8px;
        font-size: 12px;
    }
}

/* Mejoras de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .live-video,
    .foto-estatica,
    .live-badge,
    .live-badge::before {
        transition: none;
        animation: none;
    }

    .contenedor-imagen:hover .live-video {
        opacity: 0;
    }

    .contenedor-imagen:hover .foto-estatica {
        opacity: 1;
    }
}

/* Estado de carga */
.contenedor-imagen.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: loading 1.5s infinite;
    z-index: 5;
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Efecto de zoom suave opcional */
.contenedor-imagen {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contenedor-imagen:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}




img {
	display: block;
}

.más-entradas {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding-top: 4em;
	gap: 1em;
	justify-content: center;
	align-items: flex-start;
	border-top: 1px solid var(--border-default);
	margin-top: .5em;
}

/* TARJETAS / BLOQUES */
.foto,
.video,
.diapositivas,
.estado,
.más-entradas article{
	background-color:var(--bg-surface);
	border:1px solid var(--border-default);
	border-radius:5px;
}

/* CÓDIGO */
code,pre{
	background-color:var(--bg-surface);
	color:var(--text-heading);
	border-radius:5px;
	box-shadow:var(--shadow-code);
}

/* OVERLAY VISOR */
.visor{
	backdrop-filter:blur(7px);
	background-color:var(--bg-overlay);
}

/* ESTADO */
.estado{
	background-color:var(--bg-card);
	box-shadow:var(--shadow-inset);
}

/* ARCHIVO */
#archivo details details{
	background-color:var(--bg-surface-alt);
}

/* FOOTER */
body > footer{
	text-align:center;
	font-size:x-small;
	text-shadow:none;
	padding:1em;
	cursor:default;
	border-top:1px solid var(--border-default);
	color:var(--text-muted);
}
body > footer > p{
	display:inline-block;
	margin:0.5em;
}

/* DESTACADO */
.actual{
	color:var(--accent);
	border-bottom:1px dotted var(--accent);
}

/* CERRAR MODAL */
.visor .cerrar{
	color:var(--text-danger);
}