/* ==========================================================================
   avalos.sv · capa visual sobre Blocksy
   1. Tokens (claro / oscuro) y paleta de Blocksy
   2. Tipografía
   3. Sitio completo (header, posts, archivos, footer)
   4. Botón de modo
   5. Home (patrón "Home avalos.sv")
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------
   :root:root gana a la paleta que Blocksy imprime en :root desde el Customizer. */
:root:root{
	--av-bg:#f8f7f3;
	--av-surface:#ffffff;
	--av-surface-2:#f1efe9;
	--av-text:#1b1d21;
	--av-body:#2b2f35;
	--av-muted:#5d626b;
	--av-border:#e3e0d8;
	--av-acc:#3f6b55;
	--av-acc-hover:#2f5442;
	--av-acc-ink:#ffffff;
	--av-acc-soft:#e3ece6;
	--av-code-bg:#1b1d21;
	--av-code-text:#e8e6e1;
	--av-r:14px;

	--av-fh:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
	--av-fb:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
	--av-fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

	/* Paleta de Blocksy: 1 acento · 2 acento hover · 3 texto · 4 títulos · 5 bordes · 6 fondo suave · 7 fondo del sitio · 8 superficies */
	--theme-palette-color-1:var(--av-acc);
	--theme-palette-color-2:var(--av-acc-hover);
	--theme-palette-color-3:var(--av-body);
	--theme-palette-color-4:var(--av-text);
	--theme-palette-color-5:var(--av-border);
	--theme-palette-color-6:var(--av-surface-2);
	--theme-palette-color-7:var(--av-bg);
	--theme-palette-color-8:var(--av-surface);

	/* Variables globales de Blocksy, por si el Customizer tiene colores fijos en vez de la paleta */
	--theme-text-color:var(--av-body);
	--theme-headings-color:var(--av-text);
	--theme-link-initial-color:var(--av-acc);
	--theme-link-hover-color:var(--av-acc-hover);
	--theme-border-color:var(--av-border);
	--theme-selection-text-color:var(--av-acc-ink);
	--theme-selection-background-color:var(--av-acc);
	--theme-button-text-initial-color:var(--av-acc-ink);
	--theme-button-text-hover-color:var(--av-acc-ink);
	--theme-button-background-initial-color:var(--av-acc);
	--theme-button-background-hover-color:var(--av-acc-hover);
	--theme-form-field-border-initial-color:var(--av-border);
	--theme-form-field-border-focus-color:var(--av-acc);
	--theme-font-family:var(--av-fb);
	color-scheme:light;
}

/* Oscuro elegido con el botón */
:root:root[data-modo="dark"]{
	--av-bg:#0f1114;
	--av-surface:#161a1f;
	--av-surface-2:#1c2127;
	--av-text:#eceae5;
	--av-body:#c9cdd2;
	--av-muted:#9aa0a8;
	--av-border:#262c34;
	--av-acc:#8fc2a5;
	--av-acc-hover:#a9d4bb;
	--av-acc-ink:#0f1114;
	--av-acc-soft:#1a2a22;
	--av-code-bg:#0b0d10;
	color-scheme:dark;
}
/* Oscuro por preferencia del sistema, salvo que el visitante haya elegido claro */
@media (prefers-color-scheme:dark){
	:root:root:not([data-modo="light"]){
		--av-bg:#0f1114;
		--av-surface:#161a1f;
		--av-surface-2:#1c2127;
		--av-text:#eceae5;
		--av-body:#c9cdd2;
		--av-muted:#9aa0a8;
		--av-border:#262c34;
		--av-acc:#8fc2a5;
		--av-acc-hover:#a9d4bb;
		--av-acc-ink:#0f1114;
		--av-acc-soft:#1a2a22;
		--av-code-bg:#0b0d10;
		color-scheme:dark;
	}
}

/* 2. Tipografía --------------------------------------------------------- */
html body{
	background-color:var(--av-bg);
	color:var(--av-body);
	font-family:var(--av-fb);
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.entry-title,.page-title,.site-title,.ct-header .site-title a{
	--theme-font-family:var(--av-fh);
	font-family:var(--av-fh);
	font-weight:700;
	letter-spacing:-.01em;
	color:var(--av-text);
}
h5,h6{font-weight:600}
code,kbd,pre,samp{font-family:var(--av-fm)}
::selection{background:var(--av-acc);color:var(--av-acc-ink)}

/* 3. Sitio completo ----------------------------------------------------- */

/* Header */
.ct-header [data-row],
.ct-header [data-row] > div{
	background-color:color-mix(in srgb,var(--av-bg) 90%,transparent);
}
.ct-header [data-row="middle"]{border-bottom:1px solid var(--av-border)}
.ct-header .site-title a{color:var(--av-text)}
.ct-header .ct-menu-link{color:var(--av-muted);font-weight:600}
.ct-header .ct-menu-link:hover,
.ct-header .current-menu-item > .ct-menu-link{color:var(--av-text)}
.ct-header .ct-button,
.ct-header .ct-header-cta .ct-button{border-radius:999px}
#offcanvas .ct-panel-inner{background-color:var(--av-bg)}

/* Botones y campos */
.ct-button,.wp-element-button,.wp-block-button__link,button[type="submit"],input[type="submit"]{
	border-radius:999px;
	font-family:var(--av-fb);
	font-weight:700;
}
input,textarea,select{
	background-color:var(--av-surface);
	color:var(--av-text);
	border-color:var(--av-border);
}

/* Cabecera de archivos (Blog, Podcast, Cursos): sin imagen gris de fondo */
.hero-section[data-type="type-2"]{background-color:var(--av-surface-2)}
.hero-section[data-type="type-2"] figure{opacity:.18}
.hero-section .page-title,.hero-section .entry-title{color:var(--av-text)}

/* Tarjetas de archivo */
.entries .entry-card{
	background-color:var(--av-surface);
	border:1px solid var(--av-border);
	border-radius:var(--av-r);
	box-shadow:none;
	overflow:hidden;
	transition:border-color .15s ease,transform .15s ease;
}
.entries .entry-card:hover{border-color:var(--av-acc);transform:translateY(-2px)}
.entries .entry-card .ct-media-container{background-color:var(--av-acc-soft)}
.entries .entry-card .entry-title a{color:var(--av-text);text-decoration:none}
.entry-meta a{text-decoration:none}
.entries .entry-card .entry-title a:hover{color:var(--av-acc)}
.entry-excerpt{color:var(--av-muted)}

/* Metadatos y categorías */
.entry-meta{color:var(--av-muted)}
.entry-meta .meta-categories a,
.entry-meta [data-type="pill"] a,
.entry-meta [data-type="simple"] a{
	color:var(--av-acc);
}
.entry-meta [data-type="pill"] a{
	background-color:var(--av-acc-soft);
	color:var(--av-acc);
	font-family:var(--av-fm);
	border-radius:999px;
}

/* Contenido de posts y páginas */
.entry-content :where(a:not(.wp-element-button,.wp-block-button__link)){
	color:var(--av-acc);
	text-decoration-thickness:1px;
	text-underline-offset:.18em;
}
.entry-content blockquote,
.entry-content .wp-block-quote{
	border-left:3px solid var(--av-acc);
	padding:.2em 0 .2em 1.2em;
	font-family:var(--av-fh);
	font-size:1.2em;
	line-height:1.45;
	color:var(--av-text);
}
.entry-content pre,
.entry-content .wp-block-code{
	background-color:var(--av-code-bg);
	color:var(--av-code-text);
	border:0;
	border-radius:var(--av-r);
	padding:1.1em 1.25em;
	font-size:.88em;
	line-height:1.6;
	overflow-x:auto;
}
.entry-content pre code{background:none;color:inherit;padding:0}
.entry-content :not(pre) > code{
	background-color:var(--av-surface-2);
	padding:.12em .4em;
	border-radius:5px;
	font-size:.88em;
}
.entry-content li::marker{color:var(--av-acc)}
.entry-content hr{border-color:var(--av-border)}
.entry-content table{border-color:var(--av-border)}
.entry-content th,.entry-content td{border-color:var(--av-border)}
.entry-content img{border-radius:calc(var(--av-r) - 4px)}

/* Caja de autor, navegación y comentarios */
.author-box,.ct-related-posts-container,.post-navigation,.comments-area{border-color:var(--av-border)}
.author-box[data-type="type-1"]{background-color:var(--av-surface);border:1px solid var(--av-border);border-radius:var(--av-r);box-shadow:none}
.ct-pagination a,.ct-pagination span{border-radius:999px}

/* Footer */
.ct-footer [data-row],
.ct-footer [data-row] > div{background-color:var(--av-bg)}
.ct-footer{border-top:1px solid var(--av-border);color:var(--av-muted)}
.ct-footer a{color:var(--av-muted)}
.ct-footer a:hover{color:var(--av-acc)}

/* Imágenes en modo oscuro: un poco menos de brillo para no deslumbrar */
:root[data-modo="dark"] .entry-content img:not(.avalos-foto img){filter:brightness(.92)}
@media (prefers-color-scheme:dark){
	:root:not([data-modo="light"]) .entry-content img:not(.avalos-foto img){filter:brightness(.92)}
}

/* 4. Botón de modo ------------------------------------------------------ */
.avalos-modo{
	all:unset;
	box-sizing:border-box;
	cursor:pointer;
	width:38px;height:38px;
	border-radius:50%;
	display:inline-grid;place-items:center;
	border:1px solid var(--av-border);
	color:var(--av-text);
	transition:border-color .15s ease;
}
.avalos-modo:hover{border-color:var(--av-acc)}
.avalos-modo:focus-visible{outline:2px solid var(--av-acc);outline-offset:2px}
.avalos-modo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avalos-modo .avalos-modo__sol{display:none}
.avalos-modo[aria-pressed="true"] .avalos-modo__sol{display:block}
.avalos-modo[aria-pressed="true"] .avalos-modo__luna{display:none}

/* 5. Home ---------------------------------------------------------------- */
.avalos-home{
	--av-gap:clamp(56px,8vw,96px);
	font-size:17px;
	line-height:1.65;
}
.avalos-home > *{margin-block:0}
.avalos-home .avalos-wrap{
	max-width:1120px;
	margin-inline:auto;
	padding-inline:20px;
}
.avalos-home p{margin-block:0 1em}
.avalos-home h1,.avalos-home h2,.avalos-home h3{line-height:1.15;margin-block:0 .5em}

.avalos-home .avalos-eyebrow{
	font-family:var(--av-fm);
	font-size:.8rem;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--av-acc);
	margin-bottom:1em;
}
.avalos-home .avalos-intro{color:var(--av-muted);max-width:40em;margin-bottom:36px}

/* Botones de la home */
.avalos-home .wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.avalos-home .wp-block-button{margin:0}
.avalos-home .wp-block-button__link{display:inline-block}
.avalos-home .wp-block-button__link{
	background-color:var(--av-acc);
	color:var(--av-acc-ink);
	border:1px solid var(--av-acc);
	border-radius:999px;
	padding:.65em 1.2em;
	font-size:.95rem;
	text-decoration:none;
}
.avalos-home .wp-block-button__link:hover{background-color:var(--av-acc-hover);border-color:var(--av-acc-hover)}
.avalos-home .is-style-outline .wp-block-button__link{background:transparent;color:var(--av-text);border-color:var(--av-border)}
.avalos-home .is-style-outline .wp-block-button__link:hover{border-color:var(--av-acc);background:transparent}

/* Hero */
.avalos-home .avalos-hero{padding-block:var(--av-gap) calc(var(--av-gap) * .8)}
.avalos-home .avalos-hero .wp-block-columns{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;margin-block:0}
.avalos-home .avalos-hero .wp-block-column{margin:0}
.avalos-home .avalos-hero h1{font-size:clamp(2.4rem,6vw,4rem)}
.avalos-home .avalos-hero h1 mark{background:none;color:var(--av-acc)}
.avalos-home .avalos-lead{font-size:1.2rem;color:var(--av-muted);max-width:36em}
.avalos-home .avalos-foto{margin:0}
.avalos-home .avalos-foto img{
	display:block;
	width:100%;height:auto;
	aspect-ratio:1;
	object-fit:cover;
	border-radius:28px;
	border:1px solid var(--av-border);
}

/* Secciones */
.avalos-home .avalos-seccion{padding-block:var(--av-gap);border-top:1px solid var(--av-border)}
.avalos-home .avalos-seccion h2{font-size:clamp(1.7rem,3.5vw,2.3rem)}

/* Línea de tiempo */
.avalos-home .avalos-tl{position:relative;max-width:760px}
.avalos-home .avalos-tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--av-border)}
.avalos-home .avalos-tl-item{position:relative;padding:0 0 28px 40px;margin:0}
.avalos-home .avalos-tl-item::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--av-bg);border:3px solid var(--av-acc);box-sizing:border-box}
.avalos-home .avalos-tl-item.is-ahora::before{background:var(--av-acc)}
.avalos-home .avalos-tl-item h3{font-size:1.2rem;margin-bottom:.25em}
.avalos-home .avalos-tl-item p{color:var(--av-muted);margin:0}

/* Tarjetas (toda la tarjeta es clicable gracias al enlace del título) */
.avalos-home .avalos-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0}
.avalos-home .avalos-cards.is-cuatro{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.avalos-home .avalos-card{
	position:relative;
	background-color:var(--av-surface);
	border:1px solid var(--av-border);
	border-radius:var(--av-r);
	padding:24px;
	margin:0;
	display:flex;flex-direction:column;gap:8px;
	transition:border-color .15s ease,transform .15s ease;
}
.avalos-home .avalos-card:hover{border-color:var(--av-acc);transform:translateY(-2px)}
.avalos-home .avalos-card > *{margin:0}
.avalos-home .avalos-card .avalos-tag{font-family:var(--av-fm);font-size:.75rem;color:var(--av-acc)}
.avalos-home .avalos-card h3{font-size:1.25rem}
.avalos-home .avalos-card h3 a{color:var(--av-text);text-decoration:none}
.avalos-home .avalos-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.avalos-home .avalos-card p{color:var(--av-muted);font-size:.97rem}
.avalos-home .avalos-card .avalos-ir{margin-top:auto;padding-top:8px;font-weight:700;color:var(--av-acc);font-size:.92rem}

/* Contacto */
.avalos-home .avalos-contacto{
	background-color:var(--av-surface);
	border:1px solid var(--av-border);
	border-radius:calc(var(--av-r) + 8px);
	padding:48px;
	display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
}
.avalos-home .avalos-contacto > *{margin:0}
.avalos-home .avalos-contacto h2{margin:0}
.avalos-home .avalos-contacto p{margin:.4em 0 0;color:var(--av-muted)}
.avalos-home .avalos-contacto .wp-block-buttons{margin:0}

@media (max-width:781px){
	.avalos-home .avalos-hero .wp-block-columns{grid-template-columns:1fr;gap:32px}
	.avalos-home .avalos-foto{max-width:240px}
	.avalos-home .avalos-cards{grid-template-columns:1fr}
	.avalos-home .avalos-contacto{padding:28px}
}

/* Sin animaciones para quien las desactivó */
@media (prefers-reduced-motion:reduce){
	.entries .entry-card,.avalos-home .avalos-card{transition:none}
	.entries .entry-card:hover,.avalos-home .avalos-card:hover{transform:none}
}