/* eg2027 · Este Gráfico. Una sola mesa de trabajo: papel claro, tinta y una barra naranja que es lo único que se mueve. */

@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }
/* Fuentes de reserva con las medidas de las nuestras (anchos medidos en el navegador sobre texto real): mientras llegan
   Fraunces y Figtree, el texto ocupa lo mismo y la página no salta al cambiar de fuente (CLS). */
@font-face { font-family: 'Fraunces Reserva'; src: local('Georgia'); size-adjust: 105.1%; ascent-override: 93.2%; descent-override: 24.7%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Reserva'; src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans'); size-adjust: 99.5%; ascent-override: 95.5%; descent-override: 25.1%; line-gap-override: 0%; }
@font-face { font-family: 'Mono Reserva'; src: local('Courier New'), local('Cousine'), local('Liberation Mono'); ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
	--mesa: #F3F2EE;
	--lienzo: #FFFFFF;
	--tinta: #141414;
	--lapiz: #57564F;
	--linea: #D6D4CD;
	--barra: #FF5A1F;
	--barra-txt: #B83700;
	--oscuro-txt: #CFCDC6;
	--display: 'Fraunces', 'Fraunces Reserva', Georgia, 'Times New Roman', serif;
	--texto: 'Figtree', 'Figtree Reserva', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'JetBrains Mono', 'Mono Reserva', ui-monospace, Consolas, monospace;
	--ease: cubic-bezier(.65, 0, .35, 1);
	--salto: cubic-bezier(.2, .8, .2, 1);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.site {
	margin: 0; background: var(--mesa); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.6;
	position: relative; overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
picture { display: contents; } /* las versiones WebP no cambian la maqueta: manda el <img> */
a { color: inherit; }
a:hover { color: var(--barra-txt); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--tinta); color: var(--mesa); border-radius: 6px; }
.saltar:focus { top: 12px; color: var(--mesa); }

.wrap {
	max-width: 1240px; margin: 0 auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }

.disp, h1, h2, .page-header h1, .page-header h2 { font-family: var(--display); font-weight: 500; font-variation-settings: 'SOFT' 100, 'WONK' 0; letter-spacing: -0.02em; text-wrap: balance; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em; color: var(--lapiz); }

/* Cabecera y menú (mod_menu) */
header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinta); }
.brand:hover { color: var(--tinta); }
.brand-mark { width: 62px; height: 40px; overflow: visible; }
.brand-mark .part { transition: transform .5s var(--ease); }
.brand:hover .le { transform: translateX(-260px); }
.brand:hover .lg { transform: translateX(260px); }
.brand .name { font-family: var(--display); font-weight: 500; font-variation-settings: 'SOFT' 100, 'WONK' 0; font-size: 23px; letter-spacing: -0.015em; white-space: nowrap; }
nav.main ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
nav.main a { text-decoration: none; display: inline-block; padding-block: 12px; position: relative; }
nav.main a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--barra); transform: scaleX(0) skewX(-18.4deg); transform-origin: left; transition: transform .35s var(--ease); }
nav.main a:hover::after, nav.main .current > a::after, nav.main .active > a::after { transform: scaleX(1) skewX(-18.4deg); }
nav.main li:last-child a { min-height: 46px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 999px; background: var(--tinta); color: var(--mesa); font-weight: 500; }
nav.main li:last-child a::after { display: none; }

.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--tinta); color: var(--mesa); text-decoration: none; font-weight: 500; border: 0; font: inherit; cursor: pointer; transition: transform .25s var(--ease); }
.pill:hover { transform: translateY(-2px); color: var(--mesa); }
.pill.naranja { background: var(--barra); color: var(--tinta); }

/* Portada: presentación */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 32px 56px; padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px); }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.status { display: inline-flex; align-items: center; gap: 10px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; animation: latido 2.4s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(30, 158, 90, .45); } 70% { box-shadow: 0 0 0 10px rgba(30, 158, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 158, 90, 0); } }
.hero h1 { margin: 22px 0 28px; font-size: clamp(42px, 6.4vw, 92px); line-height: 1.02; }
.mesa-line { font-size: clamp(21px, 2.4vw, 32px); color: var(--lapiz); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0; }
.mesa-line .word { font-family: var(--display); font-weight: 500; font-variation-settings: 'SOFT' 100, 'WONK' 0; color: var(--tinta); letter-spacing: -0.015em; padding: 0 3px; border-radius: 3px; transition: background .2s; }
.mesa-line .word.sel { background: rgba(255, 90, 31, .28); }
.mesa-line .caret { display: inline-block; width: 2px; height: .95em; background: var(--barra); vertical-align: -0.12em; margin-left: 2px; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.mark { position: relative; justify-self: center; width: min(460px, 100%); aspect-ratio: 3176 / 2052; color: var(--tinta); }
.mark-svg { width: 100%; height: 100%; overflow: visible; }
.mark .part { transition: transform .6s var(--salto), opacity .9s var(--ease); transform-box: fill-box; transform-origin: center; }
/* Los corchetes se colocan con su atributo transform (escalados sobre la barra): con fill-box y
   origen en el centro esa transformación se desplaza y </> no cuadra con la /. */
.mark .brk { opacity: 0; transform-box: view-box; transform-origin: 0 0; }
.mark.intro .brk { opacity: 1; }
.mark.intro .le, .mark.intro .lg { opacity: 0; }
.mark.intro .le { transform: translateX(-700px) scale(.8); }
.mark.intro .lg { transform: translateX(700px) scale(.8); }
.mark-caption { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; }

/* Secciones */
main section, .seccion { padding-block: clamp(56px, 8vw, 112px); }
.rule { border-top: 1px solid var(--linea); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-bottom: 32px; }
.sec-head h2, .sec-head h1 { margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.04; }
.reveal { transition: clip-path 1s var(--ease); clip-path: polygon(-40% 0, 140% 0, 120% 100%, -60% 100%); }
.reveal.armed { clip-path: polygon(-40% 0, -40% 0, -60% 100%, -60% 100%); }

/* Por ejemplo: trabajos */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
@media (max-width: 700px) { .works { grid-template-columns: minmax(0, 1fr); } }
.work { display: flex; flex-direction: column; gap: 14px; text-decoration: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.work .frame { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--tint, var(--lienzo)); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rz, 0deg)); transition: transform .5s var(--salto), box-shadow .4s; will-change: transform; cursor: grab; }
.work .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work.dragging .frame, .work.grabbed .frame { transition: transform .08s linear, box-shadow .3s; box-shadow: 0 26px 50px rgba(20, 20, 20, .18); cursor: grabbing; }
.work.grabbed .frame { --rz: 2.5deg; --tx: 14px; --ty: -12px; transition: transform .6s var(--salto), box-shadow .4s; }
.work .big { position: absolute; left: -2%; bottom: -14%; font-family: var(--display); font-weight: 600; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: clamp(90px, 12vw, 170px); line-height: 1; letter-spacing: -0.03em; color: rgba(20, 20, 20, .9); white-space: nowrap; transition: transform .7s var(--salto); }
.work .slash { position: absolute; width: 14px; height: 140%; top: -20%; left: 50%; background: var(--barra); border-radius: 8px; transform: translateX(-50%) rotate(18.43deg) translateY(110%); transition: transform .6s var(--salto); }
.work:hover .slash, .work:focus-visible .slash { transform: translateX(-50%) rotate(18.43deg) translateY(0); }
.work:hover .big { transform: translateX(-6%); }
.work .meta { display: flex; justify-content: space-between; gap: 12px; font-size: 19px; }
.work .eg { position: relative; display: inline-grid; text-align: right; }
.work .eg span { grid-area: 1 / 1; transition: transform .4s var(--ease), opacity .4s; }
.work .eg .b { opacity: 0; transform: translateY(10px); color: var(--barra-txt); }
.work:hover .eg .a { opacity: 0; transform: translateY(-10px); }
.work:hover .eg .b { opacity: 1; transform: none; }

/* Ficha de trabajo */
.ficha-cabecera { padding-block: clamp(40px, 7vw, 96px) 40px; display: flex; flex-direction: column; gap: 24px; }
.ficha-cabecera h1 { margin: 0; font-size: clamp(48px, 8vw, 116px); line-height: .98; }
.ficha-cabecera .entradilla { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; color: #3A3936; max-width: 34ch; }
.ficha-datos { margin: 0 0 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-block: 1px solid var(--linea); }
.ficha-datos div { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 20px 0; }
.ficha-datos dt { font: 12px var(--mono); color: var(--lapiz); }
.ficha-datos dd { margin: 0; font-size: 17px; line-height: 1.45; }
.ficha-imagen { margin: 0; border-radius: 8px; overflow: hidden; background: var(--lienzo); display: grid; justify-items: center; }
.ficha-imagen figcaption { padding: 10px 14px; justify-self: stretch; }
/* Sin estirar: las imágenes de la web antigua (600-1000 px) se ven a su tamaño, enmarcadas */
.ficha-imagen img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(86vh, 900px); object-fit: cover; object-position: top; cursor: zoom-in; }
.ficha-imagen.pequena { padding: clamp(20px, 5vw, 72px); background: var(--tint, #E6E3DC); }
.ficha-imagen.pequena img { border-radius: 4px; box-shadow: 0 2px 4px rgba(20, 20, 20, .08), 0 28px 60px rgba(20, 20, 20, .18); }
.ficha-video { margin: 0 0 8px; width: min(1144px, calc(100vw - 32px)); border-radius: 8px; overflow: hidden; background: #000; }
.ficha-video video { display: block; width: 100%; height: auto; }
.ficha-texto, .articulo-texto { max-width: 68ch; padding-block: clamp(24px, 3vw, 40px) clamp(48px, 7vw, 96px); font-size: 19px; line-height: 1.7; }
.ficha-texto h2, .articulo-texto h2 { font-size: 34px; line-height: 1.1; margin: 1.6em 0 .5em; }
.siguiente { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-block: 40px; border-top: 1px solid var(--linea); text-decoration: none; }
.siguiente .disp { font-size: clamp(32px, 4.4vw, 60px); }
.flecha { font-family: var(--texto); font-weight: 400; } /* Fraunces no trae «→» */

/* Blog y artículos */
.articulo-cabecera { padding-block: clamp(40px, 6vw, 88px) 24px; display: flex; flex-direction: column; gap: 18px; }
.articulo-cabecera h1 { margin: 0; max-width: 22ch; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; }
.blog-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px 40px; }
.blog-items h2 { font-size: 28px; line-height: 1.12; margin: 0 0 10px; }
.blog-items h2 a { text-decoration: none; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--linea); text-decoration: none; }

/* Servicios y opiniones (módulos de la posición «abajo») */
.services { list-style: none; margin: 0; padding: 0; }
.services li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px 32px; align-items: baseline; padding-block: 26px; border-bottom: 1px solid var(--linea); overflow: hidden; }
@media (max-width: 760px) { .services li { grid-template-columns: minmax(0, 1fr); } }
.services h3 { margin: 0; font-family: var(--display); font-weight: 500; font-variation-settings: 'SOFT' 100, 'WONK' 0; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.015em; transition: transform .5s var(--ease); }
.services p { margin: 0; color: var(--lapiz); }
.services .este { white-space: nowrap; opacity: 0; transform: translateX(-12px); transition: opacity .4s, transform .4s var(--ease); }
.services li::before { content: ""; position: absolute; top: -30%; bottom: -30%; width: 10px; left: -40px; background: var(--barra); border-radius: 6px; transform: rotate(18.43deg); transition: left .7s var(--ease); }
.services li:hover::before { left: calc(100% + 40px); }
.services li:hover h3 { transform: translateX(14px); }
.services li:hover .este { opacity: 1; transform: none; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 48px; }
.quotes figure { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.quotes blockquote { margin: 0; font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 0; font-size: 25px; line-height: 1.32; letter-spacing: -0.01em; transition: transform .5s var(--ease); }
.quotes figure:hover blockquote { transform: translateY(-4px); }

/* Contacto (posición «contacto») */
.contact { margin-bottom: 24px; padding: clamp(28px, 6vw, 80px); border-radius: 12px; background: var(--tinta); color: var(--mesa); }
.contact .rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px 64px; }
@media (max-width: 900px) { .contact .rejilla { grid-template-columns: minmax(0, 1fr); } }
.contact h2 { margin: 0 0 20px; font-size: clamp(44px, 6.4vw, 92px); line-height: 1; }
.contact h2 .who { display: inline-block; color: var(--barra); }
.contact p { color: var(--oscuro-txt); margin: 0; max-width: 40ch; }
.contact .mono { color: #A9A7A0; }
.contact a { color: var(--mesa); }
.contact .mail { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 0; font-size: clamp(22px, 2.6vw, 32px); }

/* Mensajes del sistema */
joomla-alert, .alert { display: block; margin-block: 16px; padding: 14px 18px; border-radius: 8px; background: var(--lienzo); border-left: 0; }

/* Pie */
footer.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 24px 48px; }
.foot-mark { width: 34px; height: 22px; vertical-align: -6px; margin-right: 6px; color: var(--lapiz); }
.measure-btn { border: 0; background: none; padding: 6px 0; font: 13px var(--mono); color: var(--lapiz); cursor: pointer; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--linea); border-radius: 4px; background: var(--lienzo); font: 12px var(--mono); color: var(--tinta); }

/* Error */
.error-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-block: 48px; }
.error-wrap h1 { margin: 0; font-size: clamp(44px, 7vw, 96px); line-height: 1; }

/* Cursores */
.cur { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; display: flex; align-items: flex-start; gap: 2px; will-change: transform; }
.cur svg { width: 22px; height: 26px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
.cur .tag { margin-top: 20px; padding: 3px 8px; border-radius: 4px; font: 500 12.5px var(--mono); white-space: nowrap; }
#eg-lj { transition: transform var(--d, 1s) var(--ease), opacity .5s; opacity: 0; }
#eg-lj.live { opacity: 1; }
#eg-lj .tag { background: var(--barra); color: var(--tinta); }
#eg-lj .bubble { position: absolute; left: 26px; top: 46px; padding: 6px 10px; border-radius: 10px 10px 10px 2px; background: var(--tinta); color: var(--mesa); font: 14px var(--texto); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
#eg-lj.hi .bubble { opacity: 1; transform: none; }
#eg-you { position: fixed; z-index: 41; transition: opacity .3s; opacity: 0; }
#eg-you.on { opacity: 1; }
#eg-you .tag { background: var(--tinta); color: var(--mesa); margin-left: 12px; margin-top: 18px; }
@media not ((hover: hover) and (pointer: fine)) { #eg-you { display: none; } }

/* Modo medidas (tecla /) */
body.medir [data-este] { outline: 1px dashed var(--barra); outline-offset: 2px; }
body.medir .hover-target { outline: 2px solid var(--barra) !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
	#eg-lj { display: none; }
}
.ver-todos { margin: 48px 0 0; }
.articulo-texto .entradilla { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.45; color: #3A3936; margin-bottom: 1.4em; }
.articulo-texto h2 a { text-decoration: none; }
.articulo-texto h2 a:hover { text-decoration: underline; text-decoration-color: var(--barra); text-underline-offset: 6px; }
.legales { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.legales a { color: var(--lapiz); text-underline-offset: 3px; }

/* Página de contacto */
.contacto-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px 80px; padding-block: clamp(40px, 7vw, 88px) clamp(56px, 8vw, 104px); }
@media (max-width: 900px) { .contacto-pagina { grid-template-columns: minmax(0, 1fr); } }
.contacto-intro { display: flex; flex-direction: column; gap: 24px; }
.contacto-intro h1 { margin: 0; font-size: clamp(48px, 7vw, 96px); line-height: .98; }
.contacto-intro h1 .who { color: var(--barra-txt); }
.contacto-intro p { margin: 0; font-size: 20px; line-height: 1.6; color: #3A3936; max-width: 36ch; }
.contacto-directo { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid var(--linea); }
.contacto-directo .mail { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 0; font-size: 28px; text-underline-offset: 5px; }
form.f { display: flex; flex-direction: column; gap: 24px; padding: clamp(22px, 3.4vw, 40px); background: var(--lienzo); border-radius: 10px; }
form.f .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
form.f label:not(.chip) { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; }
form.f input[type=text], form.f input[type=email], form.f textarea { font: inherit; font-size: 17px; font-weight: 400; min-height: 48px; padding: 10px 14px; border: 1px solid #C2C0B8; border-radius: 8px; background: var(--lienzo); color: var(--tinta); }
form.f textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
form.f input.invalid, form.f textarea.invalid { border-color: #A61B00; }
.fichas { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fichas legend { padding: 0 0 10px; font-size: 15px; font-weight: 500; }
.fichas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: 999px; border: 1px solid #C2C0B8; background: var(--lienzo); font-size: 15px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.chip:hover { transform: translateY(-1px); border-color: var(--tinta); }
.fichas input:checked + .chip { background: var(--tinta); color: var(--mesa); border-color: var(--tinta); }
.fichas input:focus-visible + .chip { outline: 2px solid var(--tinta); outline-offset: 3px; }
form.f .send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
form.f .aviso { font-size: 14px; color: var(--lapiz); }

/* Mensajes del sistema con la marca (joomla-alert trae sus propios colores) */
joomla-alert { margin-block: 24px 0 !important; padding: 18px 22px !important; border: 0 !important; border-radius: 10px !important; background: var(--tinta) !important; color: var(--mesa) !important; font-size: 17px; }
joomla-alert[type="danger"], joomla-alert[type="warning"] { background: #6E1B00 !important; }
joomla-alert .alert-heading { display: none; }
joomla-alert .joomla-alert--close, joomla-alert button { color: var(--mesa) !important; opacity: .7; }

/* Galería de la ficha: las imágenes del trabajo, a dos columnas, más anchas que el texto */
.ficha-texto .galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; width: min(1144px, calc(100vw - 32px)); margin-block: 56px 16px; }
@media (max-width: 700px) { .ficha-texto .galeria { grid-template-columns: minmax(0, 1fr); } }
.ficha-texto .galeria figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ficha-texto .galeria figure.pequena img { width: auto; max-width: 100%; align-self: center; }
.ficha-texto .galeria figure:only-child { grid-column: 1 / -1; }
.ficha-texto .galeria img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: cover; object-position: top; cursor: zoom-in; border-radius: 8px; background: var(--lienzo); box-shadow: 0 1px 0 var(--linea); transition: transform .5s var(--salto), box-shadow .4s; }
.ficha-texto .galeria figure:hover img { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 22px 44px rgba(20, 20, 20, .14); }
.ficha-texto .galeria figcaption { font: 13px var(--mono); color: var(--lapiz); }
.ficha-texto img { max-width: 100%; height: auto; border-radius: 6px; }
.eg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ficha-texto .galeria figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Visor: la imagen entera, a su tamaño, sobre la tinta */
.visor { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; }
.visor::backdrop { background: rgba(20, 20, 20, .92); }
.visor[open] { display: grid; place-items: center; overflow: auto; cursor: zoom-out; }
.visor img { max-width: min(96vw, 100%); height: auto; border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.visor.alta { place-items: start center; padding-block: 4vh; }
.visor .mono { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--mesa); font: 13px var(--mono); opacity: .8; text-align: center; }

/* ------------------------------------------------------------------------------------------
   Sobre mí: la foto que se vuelve código, el git log y el package.json
   ------------------------------------------------------------------------------------------ */
::selection { background: rgba(255, 90, 31, .32); }
.pill.claro { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.pill.claro:hover { color: var(--tinta); }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 4px; vertical-align: -.2em; background: var(--barra); animation: parpadeo 1s steps(1) infinite; }

.yo-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 48px clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(32px, 6vw, 88px) clamp(56px, 8vw, 112px); }
@media (max-width: 900px) { .yo-hero { grid-template-columns: minmax(0, 1fr); } }
.yo-prompt b { color: var(--tinta); font-weight: 500; }
.yo-hero h1 { margin: 18px 0 20px; font-size: clamp(64px, 10.5vw, 158px); line-height: .9; letter-spacing: -0.035em; }
.yo-apellido { display: inline-block; font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--barra-txt); transition: transform .6s var(--salto); }
.yo-hero h1:hover .yo-apellido { transform: rotate(-4deg) translateY(-6px); }
.yo-sub { margin: 0; font-size: clamp(21px, 2.3vw, 30px); line-height: 1.35; max-width: 26ch; color: #3A3936; }
.yo-cifras { margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
@media (max-width: 560px) { .yo-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yo-cifras div { padding: 18px 12px 0 0; }
.yo-cifras dt { font-size: 12px; }
.yo-cifras dd { margin: 4px 0 0; font-size: clamp(40px, 5vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.yo-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }

.yo-foto { position: relative; margin: 0; justify-self: center; width: min(440px, 100%); aspect-ratio: 480 / 539; border-radius: 12px; overflow: hidden; background: var(--tinta); transform: rotate(2.2deg); box-shadow: 0 40px 80px -30px rgba(20, 20, 20, .45); transition: transform .8s var(--salto); cursor: crosshair; touch-action: manipulation; }
.yo-foto:hover { transform: rotate(0deg) scale(1.01); }
.yo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.yo-foto canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.yo-barra { position: absolute; top: -20%; left: 74%; width: 16px; height: 140%; background: var(--barra); border-radius: 10px; transform: rotate(18.43deg); mix-blend-mode: multiply; transition: left 1.2s var(--salto); }
.yo-foto:hover .yo-barra { left: 104%; }
.yo-foto figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; }
.yo-foto figcaption span { display: inline-block; padding: 4px 8px; border-radius: 4px; background: rgba(20, 20, 20, .78); color: var(--mesa); font-size: 12px; transition: opacity .4s; }
.yo-foto.codigo figcaption span { opacity: 0; }

.yo-manifiesto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 24px 48px; border-top: 1px solid var(--linea); }
@media (max-width: 860px) { .yo-manifiesto { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .yo-manifiesto-texto ul { grid-template-columns: minmax(0, 1fr); } }
.yo-manifiesto-texto { font-size: 20px; line-height: 1.65; max-width: 62ch; }
.yo-manifiesto-texto .entradilla { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1em; }
.yo-manifiesto-texto h2 { font-size: 30px; margin: 1.6em 0 .4em; }
.yo-manifiesto-texto ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: m; }
.yo-manifiesto-texto li { counter-increment: m; position: relative; padding: 22px; border-radius: 10px; background: var(--lienzo); font-size: 17px; line-height: 1.5; transition: transform .5s var(--salto), box-shadow .4s; }
.yo-manifiesto-texto li::before { content: "0" counter(m); display: block; margin-bottom: 10px; font: 12px var(--mono); color: var(--barra-txt); }
.yo-manifiesto-texto li:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 20px 40px -20px rgba(20, 20, 20, .3); }
.yo-manifiesto-texto li strong { display: block; font-family: var(--display); font-weight: 500; font-size: 22px; margin-bottom: 4px; }

/* git log --graph */
.log { list-style: none; margin: 0; padding: 0; }
.commit { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; padding: 22px 16px 26px 0; border-radius: 10px; transition: background .3s, opacity .7s var(--ease), transform .7s var(--salto); }
.commit > :not(.grafo) { grid-column: 2; }
.commit.armado { opacity: 0; transform: translateY(28px); }
.commit:hover { background: var(--lienzo); }
.grafo { position: absolute; left: 0; top: 0; bottom: 0; width: 76px; }
.grafo::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: var(--tinta); }
.log .commit:first-child .grafo::before { top: 34px; }
.log .commit:last-child .grafo::before { bottom: calc(100% - 34px); }
.grafo i { position: absolute; top: 26px; left: 15px; width: 16px; height: 16px; border-radius: 50%; background: var(--mesa); border: 2px solid var(--tinta); z-index: 1; transition: transform .4s var(--salto), background .3s; }
.commit:hover .grafo i { transform: scale(1.3); background: var(--barra); }
.rama-1 .grafo { background: linear-gradient(var(--barra), var(--barra)) 50px 0 / 2px 100% no-repeat; }
.rama-1 .grafo i { left: 43px; border-color: var(--barra); }
.rama-0 + .rama-1 .grafo { background-position: 50px 34px; background-size: 2px calc(100% - 34px); }
.rama-0 + .rama-1 .grafo::after { content: ""; position: absolute; left: 23px; top: 8px; width: 28px; height: 26px; border: 2px solid var(--barra); border-left: 0; border-bottom: 0; border-radius: 0 16px 0 0; }
.rama-1:has(+ .rama-0) .grafo { background-size: 2px 34px; background-position: 50px 0; }
.rama-1:has(+ .rama-0) .grafo::after { content: ""; position: absolute; left: 23px; top: 34px; width: 28px; height: calc(100% - 34px); border: 2px solid var(--barra); border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }
.head .grafo i { background: var(--barra); border-color: var(--barra); animation: latido-naranja 2.4s infinite; }
@keyframes latido-naranja { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .5); } 70% { box-shadow: 0 0 0 12px rgba(255, 90, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0); } }
.commit-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.commit .hash { color: var(--barra-txt); }
.commit .etiqueta { padding: 2px 8px; border-radius: 999px; background: var(--tinta); color: var(--mesa); font-size: 11.5px; }
.commit .tipo { color: var(--lapiz); }
.commit h3 { flex-basis: 100%; margin: 4px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; }
.commit-meta { margin: 8px 0 0; }
.commit-texto { margin: 10px 0 0; max-width: 64ch; color: #3A3936; }
.escuchar { margin-left: 8px; padding: 4px 10px; border: 1px solid var(--tinta); border-radius: 999px; background: transparent; color: var(--tinta); cursor: pointer; }
.escuchar.sonando { background: var(--barra); border-color: var(--barra); }

/* package.json */
.paquete { border-radius: 14px; overflow: hidden; background: #141414; box-shadow: 0 50px 100px -40px rgba(20, 20, 20, .5); }
.paquete-cab { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #262522; color: #8C8980; }
.paquete-cab b { width: 11px; height: 11px; border-radius: 50%; background: #2B2A27; }
.paquete-cab b:first-child { background: var(--barra); }
.paquete-cab span { margin-left: 10px; }
.paquete pre { margin: 0; padding: clamp(18px, 3vw, 32px); overflow-x: auto; color: #CFCBC2; font-size: clamp(13px, 1.5vw, 16px); line-height: 1.75; }
.paquete .k { color: #FF8A5C; }
.paquete .s { color: #B5D98A; }
.paquete .dep { display: inline-block; padding: 0 8px; margin-left: -8px; border-radius: 4px; text-decoration: none; color: inherit; transition: background .2s; }
.paquete .dep .desde { color: #6E6B63; opacity: 0; transition: opacity .3s; }
.paquete .dep:hover { background: #24231F; color: inherit; }
.paquete .dep:hover .desde { opacity: 1; }
.paquete a.dep:hover::after { content: "  ↗"; color: var(--barra); }

.yo-cierre, .srv-cierre { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; border-top: 1px solid var(--linea); }
.yo-cierre .disp, .srv-cierre .disp { margin: 0; font-size: clamp(40px, 6vw, 88px); line-height: 1; max-width: 16ch; }
.srv-cierre .disp span { color: var(--lapiz); }
.cv { display: none; }

/* ------------------------------------------------------------------------------------------
   Servicios: el diagnóstico y la lista con abanico de trabajos
   ------------------------------------------------------------------------------------------ */
.srv-hero { padding-block: clamp(32px, 6vw, 88px) clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.srv-hero h1 { margin: 0; font-size: clamp(68px, 13vw, 200px); line-height: .88; letter-spacing: -0.04em; }
.servicio .srv-hero h1 { font-size: clamp(54px, 9vw, 140px); max-width: 12ch; }
.srv-hero .punto { color: var(--barra); }
.srv-entradilla { margin: 0; font-size: clamp(21px, 2.3vw, 30px); line-height: 1.35; max-width: 34ch; color: #3A3936; }
.srv-hero .mono a { text-underline-offset: 3px; }

.diagnostico { padding: clamp(22px, 3.4vw, 40px); margin-bottom: 40px; border-radius: 14px; background: var(--lienzo); }
.diagnostico h2 { margin: 0 0 16px; font-size: 14px; letter-spacing: .02em; color: var(--tinta); }
.diagnostico h2 span { color: var(--lapiz); }
.sintomas { display: flex; flex-wrap: wrap; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--mesa); border-color: var(--tinta); }
.sintoma[aria-pressed="true"]::before { content: "✓ "; color: var(--barra); white-space: pre; }
button.chip { font: inherit; font-size: 15px; color: var(--tinta); }
button.chip[aria-pressed="true"] { color: var(--mesa); }
.receta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 0; padding-top: 20px; border-top: 1px dashed var(--linea); font-size: 15px; color: var(--tinta); }
.receta[hidden] { display: none; }
.receta b { color: var(--barra-txt); font-weight: 500; }

.srv-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.srv { position: relative; border-bottom: 1px solid var(--linea); transition: opacity .5s var(--ease); }
.srv > a { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: clamp(22px, 3vw, 36px) 0; text-decoration: none; overflow: hidden; }
@media (max-width: 800px) { .srv > a { grid-template-columns: 44px minmax(0, 1fr); } .srv-resumen, .srv-ir { grid-column: 2; } }
.srv-num { color: var(--barra-txt); }
.srv-nombre { font-size: clamp(32px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.025em; transition: transform .6s var(--salto), color .3s; }
.srv-resumen { color: var(--lapiz); font-size: 17px; position: relative; z-index: 2; }
.srv-ir { opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--ease); white-space: nowrap; }
.srv > a:hover .srv-nombre { transform: translateX(16px); }
.srv > a:hover .srv-ir { opacity: 1; transform: none; color: var(--barra-txt); }
.srv > a::before { content: ""; position: absolute; top: -10%; bottom: -10%; width: 10px; left: -60px; background: var(--barra); border-radius: 6px; transform: rotate(18.43deg); transition: left .8s var(--ease); z-index: 3; pointer-events: none; }
.srv > a:hover::before { left: calc(100% + 60px); }
.abanico { position: fixed; left: 0; top: 0; width: 230px; height: 160px; pointer-events: none; z-index: 20; }
.abanico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 40px -14px rgba(20, 20, 20, .45); opacity: 0; transform: rotate(0deg) scale(.5); transition: transform .6s var(--salto), opacity .3s; transition-delay: calc(var(--k) * 45ms); }
.srv.mostrando .abanico img { opacity: 1; transform: translateX(calc((var(--k) - 1) * 64px)) rotate(calc((var(--k) - 1) * 9deg)) scale(1); }
@media (max-width: 800px), (hover: none) { .abanico { display: none; } }
.srv-lista.filtrando .srv { opacity: .22; }
.srv-lista.filtrando .srv.encendido { opacity: 1; }
.srv.encendido .srv-nombre { color: var(--barra-txt); }
.srv.encendido .srv-num::after { content: " ← esto"; color: var(--tinta); }

/* Página de un servicio */
.apartado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 16px 56px; padding-block: clamp(32px, 5vw, 64px); border-top: 1px solid var(--linea); }
@media (max-width: 860px) { .apartado { grid-template-columns: minmax(0, 1fr); } }
.apartado-titulo { align-self: start; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px; }
.apartado-titulo .mono { color: var(--barra-txt); }
.apartado-titulo h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; }
.apartado-cuerpo { font-size: 19px; line-height: 1.7; max-width: 62ch; }
.apartado-cuerpo > :first-child { margin-top: 0; }
.apartado-cuerpo h3 { margin: 1.4em 0 .3em; font-size: 21px; line-height: 1.3; font-weight: 600; }
.apartado-cuerpo h3 + p { margin-top: 0; color: #3A3936; }
.apartado-cuerpo ul { list-style: none; padding: 0; }
.apartado-cuerpo li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px dashed var(--linea); }
.apartado-cuerpo li::before { content: ""; position: absolute; left: 6px; top: 18px; width: 4px; height: 18px; border-radius: 3px; background: var(--barra); transform: rotate(18.43deg); }
.precios { padding-block: clamp(32px, 5vw, 64px); border-top: 1px solid var(--linea); }
.moneda { display: flex; gap: 6px; }
.moneda .chip { min-height: 38px; font-size: 14px; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 14px; background: var(--lienzo); transition: transform .5s var(--salto), box-shadow .4s; }
.plan:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 60px -30px rgba(20, 20, 20, .35); }
.plan.destacado { background: var(--tinta); color: var(--mesa); }
.plan.destacado .mono, .plan.destacado li { color: var(--oscuro-txt); }
.plan.destacado::after { content: ""; position: absolute; top: -10px; right: 34px; width: 12px; height: 64px; border-radius: 8px; background: var(--barra); transform: rotate(18.43deg); }
.importe { margin: 0; font-size: clamp(40px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.importe small { font: 16px var(--mono); margin-left: 6px; letter-spacing: 0; }
.plan h3 { margin: 6px 0 8px; font-size: 20px; font-weight: 600; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: var(--lapiz); }
.plan li::before { content: "/ "; color: var(--barra); font-weight: 700; }
.precios-nota { margin: 18px 0 0; }
.precios-nota[hidden], .importe[hidden] { display: none; }
.mini-trabajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 32px 28px; }
.mini { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.mini-img { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--lienzo); transition: transform .5s var(--salto), box-shadow .4s; }
.mini-img img { width: 100%; height: 100%; object-fit: cover; }
.mini .slash { position: absolute; width: 12px; height: 140%; top: -20%; left: 50%; background: var(--barra); border-radius: 8px; transform: translateX(-50%) rotate(18.43deg) translateY(110%); transition: transform .6s var(--salto); }
.mini:hover .slash { transform: translateX(-50%) rotate(18.43deg) translateY(0); }
.mini:hover .mini-img { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 26px 50px -20px rgba(20, 20, 20, .35); }
.mini-titulo { font-size: 18px; line-height: 1.3; }
.srv-llamada { display: flex; flex-direction: column; gap: 10px; margin-block: 24px; padding: clamp(28px, 5vw, 64px); border-radius: 14px; background: var(--barra); color: var(--tinta); text-decoration: none; transition: background .5s var(--ease), color .5s; }
.srv-llamada .disp { font-size: clamp(40px, 6.4vw, 96px); line-height: 1; }
.srv-llamada .mono { color: var(--tinta); }
.srv-llamada:hover { background: var(--tinta); color: var(--mesa); }
.srv-llamada:hover .mono { color: #A9A7A0; }
.mini-big { position: absolute; left: 6%; bottom: 4%; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.srv-llamada .flecha { display: inline-block; transition: transform .4s var(--salto); }
.srv-llamada:hover .flecha { transform: translateX(14px); }
.srv-otros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 24px 56px; }
.srv-otros a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.srv-otros a:hover { border-color: var(--tinta); transform: translateY(-2px); }

/* ------------------------------------------------------------------------------------------
   Blog: el cuaderno y la lectura
   ------------------------------------------------------------------------------------------ */
.cuaderno-cab { padding-block: clamp(32px, 6vw, 88px) clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.cuaderno-cab h1 { margin: 0; font-size: clamp(54px, 9vw, 140px); line-height: .92; letter-spacing: -0.035em; max-width: 13ch; }
.tachado { position: relative; color: var(--lapiz); white-space: nowrap; }
.tachado::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .09em; border-radius: 4px; background: var(--barra); transform: rotate(-4deg) scaleX(0); transform-origin: left; animation: tachar .7s .6s var(--ease) forwards; }
@keyframes tachar { to { transform: rotate(-4deg) scaleX(1); } }
.portada-entrada { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; margin-bottom: clamp(48px, 7vw, 88px); text-decoration: none; }
@media (max-width: 860px) { .portada-entrada { grid-template-columns: minmax(0, 1fr); } }
.pe-img { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--lienzo); }
.pe-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--salto); }
.pe-img .slash { position: absolute; width: 16px; height: 150%; top: -25%; left: 50%; background: var(--barra); border-radius: 10px; transform: translateX(-50%) rotate(18.43deg) translateY(110%); transition: transform .7s var(--salto); }
.portada-entrada:hover .pe-img .slash { transform: translateX(-50%) rotate(18.43deg) translateY(0); }
.portada-entrada:hover .pe-img img { transform: scale(1.04); }
.pe-texto { display: flex; flex-direction: column; gap: 14px; }
.pe-titulo { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.02em; }
.pe-resumen { color: var(--lapiz); font-size: 18px; }
.pe-leer { color: var(--barra-txt); }
.cuaderno-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 18px; border-top: 1px solid var(--tinta); position: sticky; top: 0; z-index: 5; background: var(--mesa); }
.buscar { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; }
.buscar .mono { color: var(--barra-txt); }
.buscar input { flex: 1; min-width: 0; min-height: 44px; border: 0; border-bottom: 1.5px solid var(--linea); background: transparent; font: 18px var(--mono); color: var(--tinta); outline: none; transition: border-color .2s; }
.buscar input:focus { border-color: var(--barra); }
.anios { display: flex; flex-wrap: wrap; gap: 6px; }
.anios .chip { min-height: 36px; padding: 0 12px; font-size: 14px; flex: none; }
@media (max-width: 700px) {
	.cuaderno-filtros { position: static; }
	.anios { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
}
.lineas { list-style: none; margin: 0; padding: 0; }
.lineas li { border-bottom: 1px solid var(--linea); }
.lineas li[hidden] { display: none; }
.lineas a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding: 20px 0; text-decoration: none; }
.linea-titulo { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.01em; transition: transform .5s var(--salto), color .2s; }
.lineas a:hover .linea-titulo { transform: translateX(14px); color: var(--barra-txt); }
.linea-mini { display: none; }
@media (max-width: 700px) {
	.lineas a { grid-template-columns: minmax(0, 1fr) 84px; }
	.lineas time, .linea-titulo, .linea-min { grid-column: 1; }
	.linea-mini { display: block; grid-column: 2; grid-row: 1 / span 3; width: 84px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; align-self: center; }
}
.vista-previa { position: fixed; left: 0; top: 0; z-index: 30; width: 340px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; box-shadow: 0 30px 60px -20px rgba(20, 20, 20, .5); transition: opacity .25s; will-change: transform; }
.vista-previa.on { opacity: 1; }
.vista-previa img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .vista-previa { display: none; } }
.sin-resultados { padding-block: 32px; }
.sin-resultados[hidden] { display: none; }

/* Leer una entrada */
.progreso { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 45; pointer-events: none; }
.progreso i { display: block; height: 100%; background: var(--barra); transform: scaleX(var(--p, 0)); transform-origin: left; }
.lectura { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 1100px) { .lectura { grid-template-columns: minmax(0, 1fr); } .indice { display: none !important; } }
.indice { position: sticky; top: 32px; order: 2; margin-top: 40px; padding-left: 18px; border-left: 1px solid var(--linea); font-size: 13px; }
.indice > span { display: block; margin-bottom: 10px; color: var(--lapiz); }
.indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.indice a { display: block; text-decoration: none; color: var(--lapiz); line-height: 1.4; transition: color .2s, transform .3s var(--ease); }
.indice a.activo { color: var(--tinta); transform: translateX(6px); }
.indice a.activo::before { content: "/ "; color: var(--barra); }
.articulo-texto h2, .articulo-texto h3 { position: relative; scroll-margin-top: 24px; }
.articulo-texto .ancla { position: absolute; left: -1.1em; opacity: 0; color: var(--barra); text-decoration: none; transition: opacity .2s; }
.articulo-texto h2:hover .ancla, .articulo-texto h3:hover .ancla { opacity: 1; }
.articulo-texto blockquote { margin: 1.6em 0; padding-left: 24px; border-left: 4px solid var(--barra); font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 0; font-size: 26px; line-height: 1.35; }
.articulo-texto :not(pre) > code { padding: 2px 6px; border-radius: 4px; background: #E7E4DC; font: .86em var(--mono); }
.articulo-texto pre { position: relative; margin: 1.6em 0; padding: 22px; border-radius: 12px; background: var(--tinta); color: #E6E2D9; overflow-x: auto; font: 14.5px/1.65 var(--mono); }
.articulo-texto pre code { background: none; padding: 0; font: inherit; color: inherit; }
.copiar { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border: 1px solid #3A3936; border-radius: 6px; background: #1E1E1D; color: #CFCDC6; font: 12px var(--mono); cursor: pointer; opacity: .6; transition: opacity .2s, background .2s; }
.articulo-texto pre:hover .copiar { opacity: 1; }
.copiar.hecho { background: var(--barra); color: var(--tinta); border-color: var(--barra); }
.articulo-texto img { border-radius: 8px; cursor: zoom-in; }
.articulo-texto a { text-decoration-color: var(--barra); text-underline-offset: 3px; }
.firma { display: flex; align-items: center; gap: 18px; max-width: 68ch; padding: 22px; margin-bottom: 24px; border-radius: 12px; background: var(--lienzo); }
.firma img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: grayscale(1); flex: none; }
.firma p { margin: 0; font-size: 16px; }
.relacionadas { padding-block: 32px 56px; border-top: 1px solid var(--linea); }
.relacionadas h2 { margin: 0 0 20px; font-size: 13px; color: var(--lapiz); }
.rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px; }
.rel a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.rel-img { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--lienzo); }
.rel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--salto); }
.rel a:hover .rel-img img { transform: scale(1.05); }
.rel .disp { font-size: 22px; line-height: 1.15; }

/* ------------------------------------------------------------------------------------------
   El CV: al imprimir (o «Guardar como PDF») la página Sobre mí es un currículum de una hoja
   ------------------------------------------------------------------------------------------ */
@media print {
	@page { size: A4; margin: 16mm 16mm 14mm; }
	body.site { background: #fff; font-size: 10.5pt; line-height: 1.45; }
	header.top, footer.foot, .contact, .saltar, #eg-lj, #eg-you, .progreso, .visor, .yo > :not(.cv) { display: none !important; }
	.cv { display: block !important; color: #141414; }
	.cv header { padding-bottom: 10pt; margin-bottom: 12pt; border-bottom: 2pt solid #FF5A1F; }
	.cv h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 28pt; letter-spacing: -0.02em; }
	.cv header p { margin: 2pt 0 0; color: #57564F; }
	.cv h3 { margin: 14pt 0 6pt; font: 600 9pt var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #B83700; }
	.cv-linea { display: grid; grid-template-columns: 26mm 1fr; gap: 6mm; margin-bottom: 7pt; break-inside: avoid; }
	.cv-linea > span { font: 9pt var(--mono); color: #57564F; }
	.cv p { margin: 0; }
}