/* ============================================================== */
/* InfoVis! — La Casita Tiembla — Stylesheet */
/* ============================================================== */
:root {
--cream: #f4ece0;
--paper: #ebe2d2;
--ink: #1a1a1a;
--brick: #c8442a;
--wood: #a86a3d;
--ochre: #d9a441;
--ink10: rgba(26,26,26,0.1);
--ink20: rgba(26,26,26,0.2);
--ink50: rgba(26,26,26,0.5);
/* Aprueba / reprueba — azul y naranja quemado. Par azul-naranja:
el estándar legible con daltonismo rojo-verde, y ambos con buen
contraste como texto (el naranja oscuro, no un amarillo claro). */
--ok: #4059AD;
--bad: #c75e1e;
--ff-disp: 'Fraunces', serif;
--ff-body: 'Archivo', sans-serif;
--ff-mono: 'JetBrains Mono', monospace;
--sidebar-w: 272px;
--header-h: 52px; /* alto del header fixed → offset de scroll-padding y anclas */
--max-content: 840px;
/* Light-orange accent for dark slide backgrounds (hero / moraleja /
quote / audio / video). The main `--brick` (#c8442a) is too dark
against #1a1a1a and degrades reading legibility — this peachy
variant matches the audio label colour already in use. */
--slide-accent: #ffb38a;
/* Reading area scale (driven by the AAA toggle in the tool-rail):
step 1 = current, step 2 = +8 %, step 3 = +18 %. Affects body
text font-size and the max-width of the capsule column (which in
turn lets images grow because they're sized at 100 % of column).
Persisted to localStorage by site.js. */
--reading-fs: 1rem;
}
body.text-size-2 {
--max-content: 960px;
--reading-fs: 1.08rem;
}
body.text-size-3 {
--max-content: 1080px;
--reading-fs: 1.18rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: var(--header-h); }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--ff-body);
font-size: 15px;
line-height: 1.65;
}
a { color: var(--brick); text-decoration: underline; text-underline-offset: 3px; }
a:hover { opacity: 0.8; }
/* ── HEADER ──────────────────────────────────────────────────── */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
height: 52px;
background: var(--ink);
color: var(--cream);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
border-bottom: 2px solid var(--brick);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.28s ease;
will-change: transform;
}
/* Auto-hide (driven by site.js): the bar tucks away while reading down
and slides back on scroll-up. The soft shadow only appears once it's
detached from the very top, so at rest it sits flush against the page. */
.site-header--hidden {
transform: translateY(-100%);
}
.site-header--floating {
box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
}
.brand {
display: flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
color: var(--cream);
}
.brand:hover { opacity: 1; }
.brand-icon {
display: inline-flex;
width: 26px; height: 26px;
color: var(--cream); /* drives the roof's currentColor */
flex-shrink: 0;
}
.casita-icon { width: 100%; height: 100%; display: block; overflow: visible; }
.casita-icon-body {
transform-origin: 16px 22px;
animation: tremor-icon 1.6s ease-in-out infinite;
}
/* The roof rattles loose: hops up off the wall twice per tremor cycle,
so the two pieces of the flat single-colour silhouette stay legible. */
.casita-icon .ci-roof {
animation: casita-roof-hop 1.6s ease-in-out infinite;
}
@keyframes tremor-icon {
0%, 100% { transform: rotate(-2.5deg); }
50% { transform: rotate(3deg); }
}
@keyframes casita-roof-hop {
0%, 50%, 100% { transform: translateY(0); }
25%, 75% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
.casita-icon-body,
.casita-icon .ci-roof { animation: none; }
.site-header,
.mnav, .mbar { transition: none; }
}
.brand-name {
font-family: var(--ff-disp);
font-weight: 900;
font-size: 1.45rem;
letter-spacing: -0.03em;
line-height: 1;
color: var(--cream);
}
.brand-bang { color: var(--slide-accent); }
.brand-tagline {
font-family: var(--ff-mono);
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(244,236,224,0.55);
border-left: 1px solid rgba(244,236,224,0.25);
padding-left: 0.7rem;
margin-left: 0.3rem;
white-space: nowrap;
}
@media (max-width: 980px) {
.brand-tagline { display: none; }
}
.site-nav { display: flex; align-items: center; gap: 0.25rem; }
.nav-link {
font-family: var(--ff-mono);
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cream);
text-decoration: none;
padding: 6px 10px;
opacity: 0.65;
transition: opacity 0.15s, border-color 0.15s;
border-bottom: 2px solid transparent;
}
.nav-link:hover { opacity: 1; color: var(--cream); }
.nav-link.active { opacity: 1; border-bottom-color: var(--slide-accent); }
.page-body { padding-top: var(--header-h); }
/* Bare pages (e.g. programa.html when opened as standalone) have no
fixed site-header, so the header-offset becomes wasted dead space.
Use a small, calm top padding instead. */
.page-body.page-bare { padding-top: 1.5rem; padding-bottom: 2rem; }
/* ============================================================== */
/* HOME HERO — storytelling intro */
/* ============================================================== */
/* The hero is now an editorial longform: a stack of independent
blocks (intro, scenes, quote band, closing). */
.home-hero {
background:
radial-gradient(ellipse at 50% -10%, rgba(200,68,42,0.08), transparent 55%),
var(--paper);
border-bottom: 1px solid var(--ink20);
position: relative;
overflow: hidden;
}
/* ── Hero intro ──────────────────────────────────────────────── */
.hero-intro {
max-width: 980px;
margin: 0 auto;
padding: 5.5rem 3rem 2.5rem;
text-align: center;
}
.hero-tag {
font-family: var(--ff-mono);
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brick);
margin-bottom: 1.5rem;
}
.hero-title {
font-family: var(--ff-disp);
font-weight: 900;
font-size: clamp(3.5rem, 10vw, 7.5rem);
line-height: 0.84;
letter-spacing: -0.045em;
margin-bottom: 1.5rem;
}
.hero-title em { font-style: italic; color: var(--brick); }
.hero-lead {
font-family: var(--ff-disp);
font-style: italic;
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
line-height: 1.45;
color: var(--ink50);
max-width: 580px;
margin: 0 auto;
}
/* ── Hero scene (two-column alternating) ─────────────────────── */
.hero-scene {
max-width: 1080px;
margin: 0 auto;
padding: 4rem 3rem;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 3.5rem;
align-items: center;
}
.hero-scene.scene-textleft { grid-template-areas: "text art"; }
.hero-scene.scene-textright { grid-template-areas: "art text"; }
.hero-scene .scene-text { grid-area: text; }
.hero-scene .scene-art { grid-area: art; display: flex; justify-content: center; }
.scene-label {
font-family: var(--ff-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brick);
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.scene-label::before {
content: "";
display: inline-block;
width: 28px; height: 1px;
background: var(--brick);
}
.scene-text p {
font-family: var(--ff-disp);
font-size: 1.18rem;
line-height: 1.55;
margin-bottom: 0.9rem;
}
.scene-text p strong { font-weight: 700; color: var(--brick); }
.scene-text .scene-tail {
font-style: italic;
color: var(--ink50);
font-size: 1.05rem;
}
/* The "still" casita art (calm scene) */
.casita-still {
width: 100%;
max-width: 320px;
height: auto;
overflow: visible;
opacity: 0.9;
}
/* ── Quote band ──────────────────────────────────────────────── */
.hero-quote {
margin: 2rem 0 0;
padding: 4rem 2rem 4.5rem;
text-align: center;
border-top: 1px solid var(--ink20);
border-bottom: 1px solid var(--ink20);
background:
repeating-linear-gradient(135deg,
transparent 0, transparent 14px,
rgba(200,68,42,0.025) 14px, rgba(200,68,42,0.025) 15px),
var(--paper);
position: relative;
}
.hero-quote::before,
.hero-quote::after {
position: absolute;
font-family: var(--ff-disp);
font-style: italic;
font-size: 8rem;
line-height: 1;
color: var(--brick);
opacity: 0.18;
pointer-events: none;
}
.hero-quote::before { content: "“"; top: 1rem; left: 1.5rem; }
.hero-quote::after { content: "”"; bottom: -1rem; right: 1.5rem; }
.quote-text {
font-family: var(--ff-disp);
font-style: italic;
font-weight: 400;
font-size: clamp(1.7rem, 4vw, 3rem);
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--brick);
max-width: 880px;
margin: 0 auto 1.3rem;
}
.quote-attr {
font-family: var(--ff-mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink50);
}
/* ── Hero closing ────────────────────────────────────────────── */
.hero-closing {
max-width: 820px;
margin: 0 auto;
padding: 4rem 3rem 5.5rem;
text-align: center;
}
.closing-kicker {
font-family: var(--ff-mono);
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brick);
margin-bottom: 1.2rem;
}
.closing-line {
font-family: var(--ff-disp);
font-weight: 700;
font-size: clamp(1.35rem, 2.6vw, 2rem);
line-height: 1.28;
letter-spacing: -0.015em;
color: var(--ink);
margin-bottom: 2.2rem;
}
.closing-line .cl-ve,
.closing-line .cl-oye,
.closing-line .cl-siente {
font-style: italic;
color: var(--brick);
position: relative;
white-space: nowrap;
}
.closing-line .cl-ve::after,
.closing-line .cl-oye::after,
.closing-line .cl-siente::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--brick);
opacity: 0.4;
}
.hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.btn-primary {
font-family: var(--ff-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--ink);
color: var(--cream);
padding: 11px 22px;
text-decoration: none;
border: none;
cursor: pointer;
transition: background 0.12s, transform 0.12s;
display: inline-block;
}
.btn-primary:hover { background: var(--brick); color: var(--cream); transform: translateY(-1px); }
.btn-secondary {
font-family: var(--ff-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: transparent;
color: var(--ink);
padding: 10px 22px;
text-decoration: none;
border: 1px solid var(--ink);
cursor: pointer;
transition: all 0.12s;
display: inline-block;
}
.btn-secondary:hover { background: var(--ink); color: var(--cream); }
/* ── Casita illustration ─────────────────────────────────────── */
.casita-large {
width: 100%;
max-width: 460px;
height: auto;
overflow: visible;
}
/* Subtle continuous tremor */
.casita-large .casita-body {
transform-origin: 100px 160px;
animation: tremor 1.8s ease-in-out infinite;
}
.casita-large .shake-waves {
animation: pulse 3s ease-in-out infinite;
transform-origin: 100px 100px;
}
@keyframes tremor {
0%, 100% { transform: rotate(-3.2deg) translate(0,0); }
20% { transform: rotate(-2.6deg) translate(1px,0); }
40% { transform: rotate(-3.4deg) translate(-1px,1px); }
60% { transform: rotate(-2.8deg) translate(0px,-1px); }
80% { transform: rotate(-3.2deg) translate(1px,1px); }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.04); }
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
.casita-large .casita-body,
.casita-large .shake-waves { animation: none; }
}
/* ============================================================== */
/* CAPSULES INTRO — separator between hero and capsule grid */
/* ============================================================== */
.capsulas-intro,
.curso-intro {
background: var(--ink);
color: var(--cream);
padding: 4rem 3rem;
border-bottom: 2px solid var(--brick);
/* No scroll-margin-top: `html { scroll-padding-top }` already offsets
anchor jumps by the header height — adding it here doubled the gap,
leaving a strip of the previous section above the black band. */
text-align: center;
}
.ci-inner { max-width: 760px; margin: 0 auto; }
.ci-kicker {
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--slide-accent);
margin-bottom: 1.1rem;
}
.ci-title {
font-family: var(--ff-disp);
font-weight: 900;
font-size: clamp(2rem, 4vw, 3.1rem);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--cream);
margin-bottom: 1rem;
}
.ci-subtitle {
font-family: var(--ff-disp);
font-style: italic;
font-size: 1.1rem;
color: rgba(244,236,224,0.72);
max-width: 580px;
margin: 0 auto;
}
/* El TOC dentro de la banda oscura "El curso" — texto claro sobre fondo ink. */
/* "el curso" en el título de la banda oscura — acento melocotón claro. */
.curso-intro .ci-title em { font-style: italic; color: var(--slide-accent); }
.curso-intro .cu-hero-toc { margin: 1.5rem 0 0; }
.curso-intro .cu-hero-toc a { color: var(--cream); }
.curso-intro .cu-hero-toc a:hover { color: var(--slide-accent); }
.curso-intro .cu-hero-toc b { color: var(--slide-accent); }
/* ============================================================== */
/* CAPSULES LAYOUT — sticky sidebar + page-flow main column */
/* ============================================================== */
.capsulas-layout {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
align-items: start;
}
/* Sidebar — sticks once we scroll past hero */
.sidebar {
position: sticky;
top: var(--header-h);
align-self: start;
height: calc(100vh - var(--header-h));
background: var(--cream);
border-right: 1px solid var(--ink20);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--ink20) transparent;
transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-inner { padding: 0 0 2rem; }
/* When the smart header tucks away on scroll-down, the sidebar reclaims
the freed strip and grows to the full viewport height. */
body.chrome-hidden .sidebar {
top: 0;
height: 100vh;
}
/* ── Resizable sidebar handle (drag logic in site.js) ──────────────── */
.sidebar-resizer {
position: fixed;
top: var(--header-h);
left: calc(var(--sidebar-w) - 3px);
width: 8px;
height: calc(100vh - var(--header-h));
z-index: 30;
cursor: col-resize;
display: none;
transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
body.chrome-hidden .sidebar-resizer {
top: 0;
height: 100vh;
}
body.in-capsules .sidebar-resizer { display: block; }
body.activities-mode .sidebar-resizer,
.sidebar-resizer.is-off { display: none !important; }
.sidebar-resizer::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 2px;
width: 3px;
background: var(--brick);
opacity: 0;
transition: opacity 0.12s ease;
}
.sidebar-resizer:hover::before,
.sidebar-resizer.dragging::before { opacity: 1; }
body.sidebar-resizing { user-select: none; }
body.sidebar-resizing * { cursor: col-resize !important; }
@media (max-width: 560px) {
.sidebar-resizer { display: none !important; }
}
.sidebar-section-label {
font-family: var(--ff-mono);
font-size: 0.58rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink50);
padding: 1rem 1.25rem 0.4rem;
}
/* ── Filter bar above the sidebar list ───────────────────────────── */
/* Pinned to the top of the sidebar's scroll area so it stays reachable
while the capsule list scrolls underneath it. */
.sidebar-filter {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1rem 0.55rem 1.25rem;
border-bottom: 1px solid rgba(26,26,26,0.08);
margin-bottom: 0.25rem;
position: sticky;
top: 0;
z-index: 5;
background: var(--cream);
}
.sidebar-filter .sidebar-section-label {
padding: 0;
flex: 0 0 auto;
}
.sidebar-filter-select {
flex: 1 1 auto;
font-family: inherit;
font-size: 0.78rem;
padding: 0.3rem 1.6rem 0.3rem 0.55rem;
border: 1px solid rgba(26,26,26,0.18);
border-radius: 4px;
background-color: #ffffff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 10px;
color: var(--ink);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.sidebar-filter-select:hover { border-color: var(--brick); }
.sidebar-filter-select:focus { outline: none; border-color: var(--brick); box-shadow: 0 0 0 2px rgba(200,68,42,0.15); }
/* When filter active, hide BOTH the sidebar items AND the capsule sections
in the reading area that don't match the current type. Scoped via a
data-filter attribute on the body. */
body[data-filter="teorica"] .sidebar-item.tecnica,
body[data-filter="teorica"] .sidebar-subitem.tecnica,
body[data-filter="teorica"] .cap-section.tecnica { display: none; }
body[data-filter="tecnica"] .sidebar-item.teorica,
body[data-filter="tecnica"] .sidebar-subitem.teorica,
body[data-filter="tecnica"] .cap-section.teorica { display: none; }
/* Evaluation milestones belong to the full sequence — show only in "Todas". */
body[data-filter="teorica"] .sidebar-eval,
body[data-filter="tecnica"] .sidebar-eval { display: none; }
/* ── Sidebar indent ladder ───────────────────────────────────────────
Capsule items sit at the OUTERMOST level (closest to the left edge);
h2 sub-items are indented further in; h3 sub-items deeper still.
This visually reads as: cápsula (lowest level) → sección (h2) → sub-sección (h3).
All entries reserve a 5 px border-left strip; that strip stays
transparent normally and turns orange (brick / wood) when active.
─────────────────────────────────────────────────────────────────── */
.sidebar-item {
display: flex;
align-items: flex-start; /* títulos largos pueden tener 2-3 líneas */
gap: 0.3rem;
padding: 0.55rem 0.85rem 0.55rem 0.4rem;
cursor: pointer;
text-decoration: none;
color: var(--ink);
/* NOTE: transitioning color OR border-left-color caused the active orange
accent to get "stuck" at the inactive value in chromium / webkit —
getComputedStyle would keep returning the start value even after the
duration had elapsed. Keep the transition only on `background`. */
transition: background 0.12s;
line-height: 1.3;
border-left: 5px solid transparent;
}
.sidebar-item:hover { background: rgba(26,26,26,0.05); color: var(--ink); }
/* ── ACTIVE state — orange left accent + orange bold text, no dark bg ── */
.sidebar-item.active {
background: transparent;
border-left-color: var(--brick);
}
.sidebar-item.active:hover { background: rgba(200,68,42,0.06); }
.sidebar-item.active .si-num,
.sidebar-item.active .si-title { color: var(--brick); font-weight: 700; }
.sidebar-item.active .si-icon { color: var(--brick); opacity: 1; }
/* ── Technical capsules — subtle wood tint, never dark when active ── */
.sidebar-item.tecnica {
background: rgba(168,106,61,0.10);
}
.sidebar-item.tecnica:hover { background: rgba(168,106,61,0.18); }
.sidebar-item.tecnica.active {
background: rgba(168,106,61,0.10);
border-left-color: var(--wood);
}
.sidebar-item.tecnica.active .si-num,
.sidebar-item.tecnica.active .si-title { color: var(--wood); font-weight: 700; }
.si-num {
font-family: var(--ff-mono);
font-size: 0.6rem;
letter-spacing: 0.02em; /* tighter to take less horizontal room */
color: var(--brick);
min-width: 16px; /* was 24 — leaves more space for the title */
flex-shrink: 0;
padding-top: 3px;
}
.sidebar-item.tecnica .si-num { color: var(--wood); font-weight: 700; }
.sidebar-item.tecnica .si-title { color: #6f4524; }
/* ── Evaluation milestones — interrogaciones + project entregas woven
into the sidebar at their point in the course sequence. Not capsules:
no special fill, just the label in bold brick red — visible because of
colour and weight contrast against the regular capsule rows. The link
opens the pauta in a new tab. */
.sidebar-eval {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.55rem 0 0.3rem;
padding: 0.45rem 0.85rem 0.35rem;
text-decoration: none;
background: transparent;
color: var(--brick);
transition: background 0.12s;
}
.sidebar-eval:hover {
background: rgba(200, 68, 42, 0.07);
}
.se-ico { flex-shrink: 0; font-size: 0.95rem; line-height: 1; color: var(--brick); }
.se-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.se-label {
font-family: var(--ff-mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 900;
line-height: 1.2;
color: var(--brick);
}
.se-date {
font-family: var(--ff-mono);
font-size: 0.6rem;
letter-spacing: 0.05em;
color: var(--wood);
opacity: 0.8;
}
.se-ext { flex-shrink: 0; font-size: 0.9rem; color: var(--brick); opacity: 0.55; }
.sidebar-eval:hover .se-ext { opacity: 1; }
/* ── Sub-section anchors (one per /) ────────────────────────── */
.sidebar-subitem {
display: block;
padding: 0.28rem 0.9rem 0.28rem 1.95rem; /* indented further than capsule title */
font-size: 0.78rem;
line-height: 1.3;
color: var(--ink70, #555);
text-decoration: none;
border-left: 5px solid transparent;
/* Same lesson as above — transitioning color / border-left-color silently
breaks the orange-accent active state. */
transition: background 0.12s;
}
/* Section number prefix shown in the sidebar (matches the CSS counter in
the body, e.g. "1.1") — small monospace orange tag. */
.sidebar-subitem .si-num {
display: inline-block;
min-width: auto;
margin-right: 0.4em;
font-family: var(--ff-mono);
font-size: 0.66rem;
color: var(--brick);
font-weight: 600;
letter-spacing: 0;
padding-top: 0;
}
.sidebar-subitem.tecnica .si-num { color: var(--wood); }
.sidebar-subitem.active .si-num { color: var(--brick); }
.sidebar-subitem.tecnica.active .si-num { color: var(--wood); }
.sidebar-subitem .ss-title {
/* Title text follows the number; allowed to wrap below. */
}
.sidebar-subitem.level-3 {
padding-left: 3.0rem; /* deeper indent for h3's */
font-size: 0.74rem;
color: var(--ink50, #777);
}
.sidebar-subitem:hover {
background: rgba(26,26,26,0.04);
color: var(--ink);
}
.sidebar-subitem.active {
background: transparent;
color: var(--brick);
font-weight: 700;
border-left-color: var(--brick);
}
.sidebar-subitem.tecnica.active {
color: var(--wood);
border-left-color: var(--wood);
}
/* ── CAP-ACTIVE — extend the orange left border to every item belonging
to the capsule that the user is currently reading. This makes the
"you are inside capsule N" context visible at a glance: a tall
orange ribbon spans the capsule header AND all its h2/h3 subitems,
while the .active state (bold orange text) still pinpoints the exact
reading position. ──────────────────────────────────────────────── */
.sidebar-item.cap-active,
.sidebar-subitem.cap-active { border-left-color: var(--brick); }
.sidebar-item.tecnica.cap-active,
.sidebar-subitem.tecnica.cap-active { border-left-color: var(--wood); }
/* ── Titles: wrap freely, no truncation, no ellipsis ── */
.si-title {
font-size: 0.82rem;
line-height: 1.32;
flex: 1; /* prende tutta la larghezza disponibile */
min-width: 0; /* abilita il wrap dentro flex */
word-break: break-word;
hyphens: auto;
}
.si-icon { font-size: 0.65rem; margin-left: auto; opacity: 0.5; flex-shrink: 0; padding-top: 3px; }
.si-tag {
margin-left: auto;
flex-shrink: 0;
font-family: var(--ff-mono);
font-size: 0.5rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--wood);
color: var(--cream);
padding: 2px 6px;
border-radius: 2px;
line-height: 1.3;
align-self: center;
}
/* Main scroll area — flows in the page now (no internal scroll) */
.capsulas-main { min-width: 0; }
/* Individual capsule section — centered inside the main column.
Capsules are separated by whitespace alone (no divider rule): a big
padding-bottom here + the next hero's generous padding-top open a
clear, calm gap between one cápsula and the next. */
.cap-section {
max-width: var(--max-content);
margin: 0 auto;
padding-bottom: 10rem;
}
.cap-section.tecnica { background: rgba(168,106,61,0.04); }
/* ── Capsule HERO ───────────────────────────────────────────────────
The first thing you see when arriving at a capsule. Lots of top
air, a small "CÁPSULA NN" kicker label, the big title, the optional
subtitle, and the audio player. scroll-margin-top makes anchor
clicks (#cap-{slug}) land the kicker just below the sticky header. */
.cap-hero {
padding: 11rem 3rem 2.5rem;
margin-bottom: 2rem;
background: linear-gradient(180deg, rgba(245,233,208,0.35), transparent);
/* html has `scroll-padding-top: var(--header-h)`, so the browser will
already park the hero just below the sticky header on anchor clicks.
Adding scroll-margin-top here would double the gap. */
}
.cap-section.tecnica .cap-hero {
background: linear-gradient(180deg, rgba(168,106,61,0.10), transparent);
}
/* Hero head: capsule-number badge on the left, title block on the right. */
.hero-head {
display: flex;
align-items: flex-start;
gap: 1.4rem;
}
.hero-head-main { flex: 1; min-width: 0; }
.cap-numbadge {
flex: 0 0 auto;
margin-top: 0.35rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--brick);
color: var(--cream);
border-radius: 9px;
padding: 0.5rem 0.8rem 0.62rem;
line-height: 1;
}
.cap-numbadge-tec { background: var(--wood); }
.cnb-label {
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
opacity: 0.85;
}
.cnb-num {
font-family: var(--ff-disp);
font-weight: 900;
font-size: 2rem;
letter-spacing: -0.02em;
margin-top: 0.15rem;
}
/* Body wrapper: keeps reading content centered without the hero's
over-generous top padding. The end-of-capsule space lives on
.cap-section's padding-bottom, so no bottom padding here. */
.cap-body { padding: 0 3rem; }
/* Anchor-click targets for h2/h3 inside a capsule — small ADDITIONAL
breathing room on top of the global scroll-padding so the heading
sits just below the sticky header with a visible gap. (12 px of
margin + the 52 px scroll-padding-top → heading appears ~12 px down
from the bottom edge of the header.) */
.cap-section :is(h2, h3)[id^="sec-"] {
scroll-margin-top: 12px;
}
/* Capsule header bar (technical tag pills row) */
.cap-bar {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.cap-badge {
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(200,68,42,0.1);
color: var(--brick);
border: 1px solid rgba(200,68,42,0.25);
padding: 3px 8px;
}
.cap-badge.tecnica {
background: rgba(168,106,61,0.1);
color: var(--wood);
border-color: rgba(168,106,61,0.25);
}
.cap-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cap-tag {
font-family: var(--ff-mono);
font-size: 0.58rem;
letter-spacing: 0.06em;
background: var(--ink);
color: var(--cream);
padding: 2px 7px;
}
.present-btn {
margin-left: auto;
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: transparent;
color: var(--ink);
border: 1px solid var(--ink20);
padding: 4px 10px;
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.present-btn:hover, .present-btn.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* Capsule title */
.cap-title-row { margin-bottom: 1.25rem; }
.cap-h1 {
font-family: var(--ff-disp);
font-weight: 900;
font-size: clamp(1.9rem, 3.5vw, 2.75rem);
line-height: 0.95;
letter-spacing: -0.025em;
}
/* Bigger, more "hero" feeling when sitting inside .cap-hero. */
.cap-hero .cap-h1 {
font-size: clamp(2.3rem, 4.5vw, 3.4rem);
line-height: 1.0;
}
.cap-subtitle {
font-family: var(--ff-disp);
font-style: italic;
font-size: 1.1rem;
color: var(--wood);
margin-top: 0.4rem;
}
.cap-hero .cap-subtitle { font-size: 1.25rem; }
/* Capsule song row — the rich .pl-row used to sit here; it's now the
.cap-video-wrap (16:9 iframe + compact info subrow). The hero gives
it a top margin so it doesn't touch the title row. */
.cap-hero .cap-video-wrap {
margin-top: 1.75rem;
margin-bottom: 0;
}
/* ── Capsule music-video block ──────────────────────────────────────
Each teorica cápsula hero embeds an iframe of the song's videoclip
(see capsules.render_video_row + canciones/video.html). The
iframe owns the audio; the site shell mirrors playback state into
the sticky mini-player via postMessage.
Layout: full hero width (≤ 920px content column), 16:9 letterbox
via aspect-ratio, dark frame so the orange/red interior reads as a
"screen". Compact meta strip below: number badge + title + author +
external-link icon to open the video standalone in a new tab. */
.cap-video-wrap {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.cap-video-wrap.is-placeholder { opacity: 0.85; }
.cap-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--ink);
border: 2px solid var(--ink);
box-shadow:
0 10px 30px rgba(26,26,26,0.30),
0 3px 6px rgba(26,26,26,0.18);
overflow: hidden;
}
.cap-video-frame.is-empty {
display: grid;
place-items: center;
}
.cv-empty {
font-family: var(--ff-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cream);
opacity: 0.55;
}
iframe.cap-video {
display: block;
width: 100%;
height: 100%;
border: 0;
background: var(--ink);
}
/* ── Video slot + placeholder ────────────────────────────────────────
Each capsule hero (and the playlist central player) has a SLOT —
a positioned container that hosts the single #main-video iframe
when it lands here. While the iframe is parked elsewhere the slot
shows a placeholder (cover thumbnail + big play button); CSS
:has() detects iframe presence and hides the placeholder. */
.cap-video-slot {
position: relative;
width: 100%;
height: 100%;
background: var(--ink);
overflow: hidden;
}
.cap-video-slot > iframe.cap-video {
position: absolute;
inset: 0;
}
/* Hide placeholder only when the slot's iframe has been promoted
(data-src → src happens on first play) AND it's not currently
lifted out as the playlist overlay. While the iframe is overlayed
the placeholder stays visible to fill the slot's normal spot. */
.cap-video-slot:has(> iframe.cap-video[src]:not(.floats-over))
.cv-placeholder {
display: none;
}
/* Floating-over class — set in playlist mode to lift the playing
iframe out of its capsule slot visually. position:fixed with inline
top/left/width/height set by JS measureAndApplyOverlay. */
iframe.cap-video.floats-over {
position: fixed;
z-index: 50;
pointer-events: auto;
background: var(--ink);
}
.cv-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--ink);
overflow: hidden;
}
.cv-cover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
transition: opacity 0.2s;
}
.cv-placeholder:hover .cv-cover { opacity: 0.78; }
.cv-play-btn {
position: relative;
z-index: 2;
all: unset;
cursor: pointer;
width: 88px;
height: 88px;
border-radius: 50%;
background: var(--slide-accent, #ffb38a);
color: var(--ink);
display: grid;
place-items: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.50);
transition: transform 0.2s, background 0.2s;
padding-left: 6px; /* visual centre for the triangle */
}
.cv-placeholder:hover .cv-play-btn,
.cv-play-btn:hover {
transform: scale(1.08);
background: var(--ochre, #d9a441);
}
@media (max-width: 720px) {
.cv-play-btn { width: 64px; height: 64px; }
.cv-play-btn svg { width: 30px; height: 30px; }
}
.cv-empty-hint {
position: relative;
z-index: 2;
font-family: var(--ff-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cream);
opacity: 0.7;
padding: 0.6em 1em;
background: rgba(0,0,0,0.45);
border-radius: 4px;
}
/* The hidden parking spot for #main-video when no song is loaded. */
#video-stash {
position: fixed;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
pointer-events: none;
}
#video-stash[hidden] { display: none; }
.cap-video-meta {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0 0.25rem;
}
.cvm-num {
font-family: var(--ff-mono);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brick);
min-width: 2.6ch;
text-align: right;
padding-top: 2px;
}
.cvm-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.cvm-kicker {
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink70);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cvm-title {
font-family: var(--ff-disp);
font-style: italic;
font-weight: 900;
font-size: 1.4rem;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.cvm-author {
font-family: var(--ff-body);
font-size: 0.78rem;
color: var(--ink70);
font-style: italic;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
/* Avatar generico dell'autore (silhouette di una persona). L'autore è un
personaggio inventato — il pittogramma rinforza il fatto che la canzone
"ha un autore". 20×20, colore esplicito (no var, non era definito). */
.cvm-avatar {
width: 20px; height: 20px;
flex: 0 0 auto;
fill: none;
stroke: #555;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.85;
}
.cvm-badge-ph {
display: inline-block;
font-family: var(--ff-mono);
font-size: 0.55rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 2px 7px;
margin-left: 0.6rem;
vertical-align: middle;
background: var(--ink20);
color: var(--ink);
border-radius: 999px;
}
.cvm-standalone {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: var(--ink);
background: transparent;
border: 1.5px solid var(--ink20);
transition: background 0.12s, color 0.12s, border-color 0.12s;
text-decoration: none;
}
.cvm-standalone:hover {
background: var(--brick);
color: var(--cream);
border-color: var(--brick);
}
@media (max-width: 720px) {
.cap-video-wrap { gap: 0.55rem; }
.cvm-title { font-size: 1.15rem; }
.cvm-kicker { font-size: 0.58rem; letter-spacing: 0.14em; }
.cvm-author { font-size: 0.72rem; }
.cvm-standalone { width: 28px; height: 28px; }
}
/* Tech links */
.cap-tech-links {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 3.5rem;
padding: 0 3rem;
}
.cap-link-btn {
font-family: var(--ff-mono);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cream);
background: var(--wood);
padding: 7px 14px;
text-decoration: none;
transition: opacity 0.12s;
}
.cap-link-btn:hover { opacity: 0.82; color: var(--cream); }
/* ── DEMO NOTE (inline, sits right under each demo image) ────── */
/* Used inside .cap-body markdown via
…
*/
.cap-body .demo-note {
display: block;
width: fit-content;
max-width: 100%;
margin: -0.85rem auto 1.5rem; /* slight negative top — sticks to image bottom */
padding: 0.45rem 0.85rem;
font-family: var(--ff-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.45;
text-align: center;
}
.cap-body .demo-note.didactica {
background: rgba(26,26,26,0.06);
color: var(--ink50);
border-left: 3px solid var(--ink20);
border-right: 3px solid var(--ink20);
}
.cap-body .demo-note.esperada {
background: rgba(200,68,42,0.1);
color: var(--brick);
border-left: 3px solid var(--brick);
border-right: 3px solid var(--brick);
font-weight: 600;
}
.cap-body .demo-note b { font-weight: 700; }
/* ── DEMO RESOURCE (secondary code link under physical-demo videos) ───── */
/* Used inside .cap-body markdown via 💻 …
Pattern: under a {{YTV::}} block of a student physical project, this
row holds the link to the source code + sensor metadata. */
.cap-body .demo-resource {
display: block;
margin: -0.85rem auto 1.6rem;
padding: 0.5rem 0.9rem;
font-family: var(--ff-mono);
font-size: 0.72rem;
line-height: 1.55;
color: var(--ink50);
background: rgba(26,26,26,0.035);
border-left: 2px dashed var(--ink20);
max-width: 100%;
}
.cap-body .demo-resource a {
color: var(--brick);
text-decoration: underline;
text-underline-offset: 2px;
}
.cap-body .demo-resource a:hover { opacity: 0.78; }
.cap-body .demo-resource code {
font-size: 0.92em;
padding: 1px 5px;
background: rgba(168,106,61,0.08);
border-radius: 3px;
color: var(--wood);
}
/* ── LEVELS CALLOUT (deprecated — kept for backwards compat) ─── */
.cap-levels-callout {
margin: 0 0 1.75rem;
padding: 0.85rem 1rem;
background: rgba(168,106,61,0.05);
border-left: 3px solid var(--wood);
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.cap-levels-callout .lc-row {
display: flex;
align-items: baseline;
gap: 0.7rem;
flex-wrap: wrap;
}
.cap-levels-callout .lc-tag {
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
white-space: nowrap;
flex-shrink: 0;
}
.cap-levels-callout .lc-tag.didactica {
background: rgba(26,26,26,0.08);
color: var(--ink50);
border: 1px solid var(--ink20);
}
.cap-levels-callout .lc-tag.esperada {
background: var(--brick);
color: var(--cream);
}
.cap-levels-callout .lc-text {
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink);
flex: 1;
min-width: 200px;
}
/* ── DEMO CARDS (didactic vs expected groups) ─────────────────── */
.cap-demos {
margin-top: 3rem;
}
.cap-demos:first-of-type { margin-top: 3.5rem; }
.cap-demos-head {
display: flex;
align-items: baseline;
gap: 0.85rem;
flex-wrap: wrap;
margin-bottom: 0.85rem;
}
.cd-kicker {
font-family: var(--ff-mono);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brick);
font-weight: 700;
}
.cd-desc {
font-family: var(--ff-disp);
font-style: italic;
font-size: 0.92rem;
color: var(--ink50);
flex: 1;
min-width: 200px;
}
.cap-demos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.6rem;
}
.demo-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.7rem 0.95rem;
text-decoration: none;
transition: transform 0.12s, box-shadow 0.12s;
border-left: 3px solid transparent;
}
.demo-card:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
opacity: 1;
}
.demo-card.didactica {
background: rgba(26,26,26,0.04);
border-left-color: var(--ink20);
color: var(--ink);
}
.demo-card.didactica:hover { background: rgba(26,26,26,0.08); }
.demo-card.esperada {
background: rgba(200,68,42,0.07);
border-left-color: var(--brick);
color: var(--ink);
}
.demo-card.esperada:hover { background: rgba(200,68,42,0.13); }
.dc-kind {
font-family: var(--ff-mono);
font-size: 0.6rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.demo-card.didactica .dc-kind { color: var(--ink50); }
.demo-card.esperada .dc-kind { color: var(--brick); font-weight: 700; }
.dc-label {
font-size: 0.92rem;
line-height: 1.35;
color: var(--ink);
}
/* ── Aprendizaje activo — capsule footer section ────────────────────
Material per clase: links to Google Slides + Docs. Compact card
grid with the official-looking Slides (yellow) and Docs (blue)
icons rendered as inline SVG. Hover lifts the card slightly. */
/* Materials block — same 3rem horizontal inset as .cap-body so it lines
up with the reading column; separated by whitespace, no divider rule. */
.cap-activities {
margin: 4.5rem 0 0;
padding: 0 3rem;
}
.cap-act-head { margin-bottom: 1.25rem; }
/* Header on a single line: "Material para clase" (ink) · "CÁPSULA 04"
(brick) — title and capsule tag, hierarchised by colour and font. */
.cap-act-title {
font-family: var(--ff-disp);
font-weight: 800;
font-size: 1.4rem;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.cap-act-title .cap-act-sep {
color: var(--ink20);
font-weight: 400;
margin: 0 0.12em;
}
.cap-act-title .cap-act-cap {
font-family: var(--ff-mono);
font-weight: 700;
font-size: 0.72em;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brick);
}
.cap-section.tecnica .cap-act-title .cap-act-cap { color: var(--wood); }
.cap-act-sub {
margin: 0.5rem 0 0;
font-size: 0.88rem;
color: var(--ink50);
font-style: italic;
}
.cap-act-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 0.85rem;
}
.act-card {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background: #ffffff;
border: 1px solid var(--ink10);
border-radius: 6px;
text-decoration: none;
color: inherit;
transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.act-card:hover {
transform: translateY(-1px);
border-color: rgba(26,26,26,0.22);
box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.act-icon {
display: flex;
align-items: center;
justify-content: center;
}
.act-svg {
width: 30px;
height: 38px;
display: block;
}
.act-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.act-kind {
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink50);
font-weight: 600;
}
.act-title {
font-family: var(--ff-disp);
font-weight: 700;
font-size: 0.98rem;
color: var(--ink);
line-height: 1.25;
}
.act-purpose {
margin-top: 2px;
font-size: 0.82rem;
color: var(--ink70, #555);
font-style: italic;
line-height: 1.4;
}
.act-arrow {
font-family: var(--ff-mono);
font-size: 1rem;
color: var(--ink50);
align-self: start;
margin-top: 4px;
transition: transform 0.12s, color 0.12s;
}
.act-card:hover .act-arrow {
color: var(--brick);
transform: translate(2px, -2px);
}
.act-card.legacy {
background: rgba(168,106,61,0.06);
border-color: rgba(168,106,61,0.18);
}
/* ── ACTIVITIES VIEW — full-width tile grid toggled by the Activ.
button in the tool rail. Body class `activities-mode` switches:
- hides sidebar, the regular capsules column, the home hero
and the capsules-intro band
- hides the Presentar + Texto buttons (only the Activ. button
stays so the user can toggle the view off)
- shows the activities-view section (a tile per capsule with
Aprendizaje activo material). ─────────────────────────────── */
.activities-view {
display: none;
max-width: 1400px;
margin: 0 auto;
padding: 3rem 2rem 5rem;
}
body.activities-mode .activities-view { display: block; }
body.activities-mode .home-hero,
body.activities-mode .curso-hero,
body.activities-mode .capsulas-intro,
body.activities-mode .capsulas-layout,
body.ejemplos-mode .home-hero,
body.ejemplos-mode .curso-hero,
body.ejemplos-mode .capsulas-intro,
body.ejemplos-mode .capsulas-layout { display: none; }
/* In activities-mode tanto «Presentar» como «Texto» se quedan visibles
pero deshabilitados —no aplican sobre la vista de actividades—.
Se rehabilitan al salir del modo actividades. */
body.activities-mode .tools-rail #mode-toggle,
body.activities-mode .tools-rail #text-size-toggle,
body.ejemplos-mode .tools-rail #mode-toggle,
body.ejemplos-mode .tools-rail #text-size-toggle {
opacity: 0.32;
pointer-events: none;
}
/* Activ. button active state: brick fill so it reads as ON. */
body.activities-mode #activities-toggle {
background: var(--brick);
border-color: var(--brick);
}
body.activities-mode #activities-toggle:hover { background: #b53a23; }
/* View header — kicker + big title + sub-paragraph. */
.aview-header {
margin-bottom: 2.5rem;
max-width: 800px;
}
.aview-kicker {
display: inline-block;
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brick);
font-weight: 700;
margin-bottom: 0.6rem;
}
.aview-title {
font-family: var(--ff-disp);
font-weight: 900;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 0.8rem;
}
.aview-sub {
font-family: var(--ff-disp);
font-style: italic;
font-size: 1.05rem;
color: var(--ink70, #555);
line-height: 1.5;
}
/* Tile grid — one tile per capsule, auto-fill responsive columns. */
.aview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 1.5rem;
}
.aview-tile {
background: rgba(255,255,255,0.55);
border: 1px solid var(--ink10);
border-radius: 6px;
padding: 1.25rem 1.25rem 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Flash applied (via JS) when the user opens the activities view from
inside a cápsula: the tile of the NEXT cápsula with material pulses
for ~2.4 s so the eye knows where the view jumped. */
.aview-tile.tile-highlight {
animation: tile-pulse 0.7s ease-in-out 3 alternate;
}
@keyframes tile-pulse {
from {
border-color: var(--brick);
background: rgba(199, 68, 42, 0.10);
box-shadow: 0 0 0 0 rgba(199, 68, 42, 0);
}
to {
border-color: var(--brick);
background: rgba(199, 68, 42, 0.22);
box-shadow: 0 0 0 6px rgba(199, 68, 42, 0.18);
}
}
.atile-head {
border-bottom: 1px solid var(--ink10);
padding-bottom: 0.85rem;
}
.atile-cap-link {
display: block;
text-decoration: none;
color: inherit;
}
.atile-cap-link:hover .atile-cap-title { color: var(--brick); }
.atile-num {
display: inline-block;
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brick);
font-weight: 700;
margin-bottom: 0.35rem;
}
.atile-cap-title {
font-family: var(--ff-disp);
font-weight: 800;
font-size: 1.1rem;
line-height: 1.2;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0;
transition: color 0.15s;
}
.atile-acts {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* Smaller, denser act-cards inside the tile. */
.atile-acts .act-card {
padding: 10px 12px;
grid-template-columns: 28px 1fr auto;
gap: 10px;
}
.atile-acts .act-svg { width: 22px; height: 28px; }
.atile-acts .act-title { font-size: 0.92rem; }
.atile-acts .act-purpose { font-size: 0.78rem; margin-top: 1px; }
.atile-acts .act-kind { font-size: 0.58rem; }
.atile-acts .act-arrow { font-size: 0.85rem; }
/* ── EJEMPLOS VIEW — example gallery, toggled by the "Ejemplos" nav link
(body.ejemplos-mode). One bare video per row, in capsule order — a true
filter over every {{EJEMPLO}} tagged across the course's capsules. */
.ejemplos-view {
display: none;
max-width: 760px;
margin: 0 auto;
padding: 3rem 2rem 5rem;
}
body.ejemplos-mode .ejemplos-view { display: block; }
.ev-header { margin-bottom: 2.5rem; }
.ev-kicker {
display: inline-block;
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brick);
font-weight: 700;
margin-bottom: 0.6rem;
}
.ev-title {
font-family: var(--ff-disp);
font-weight: 900;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 0.8rem;
}
.ev-sub {
font-family: var(--ff-disp);
font-style: italic;
font-size: 1.05rem;
color: var(--ink70, #555);
line-height: 1.5;
}
.ev-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Each card reuses the .demo-embed.video chrome (dark bar + frame), so it
looks identical to the inline {{EJEMPLO}} block in the capsules. */
.ej-card { margin: 0; }
.ej-card .video-embed {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.ej-card .video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.ej-code {
padding: 0.5rem 0.85rem;
background: #f3efe8;
border-top: 1px solid var(--ink15, rgba(0, 0, 0, 0.08));
font-family: var(--ff-mono);
font-size: 0.72rem;
color: var(--ink50);
}
.ej-code a {
color: var(--brick);
text-decoration: underline;
text-underline-offset: 2px;
}
.ej-code a:hover { opacity: 0.78; }
/* Student credits — shown inside the card, both in the inline {{EJEMPLO}}
block and the Ejemplos view. */
.ej-credits {
padding: 0.7rem 0.9rem;
font-family: var(--ff-disp);
font-size: 0.84rem;
line-height: 1.55;
color: var(--ink70, #555);
}
.ej-credits b { color: var(--ink); font-weight: 700; }
/* ── PLAYLIST VIEW — full-width song list toggled by the Playlist tool
button (body.playlist-mode). Same hide-everything-else trick as the
activities view; the row layout below is an attempt at "music-app"
ergonomics: number + spinning vinyl + meta + controls, with an
expandable lyrics panel per row. */
.playlist-view {
display: none;
max-width: 1400px;
margin: 0 auto;
padding: 2.5rem 1.5rem 5rem;
}
body.playlist-mode .playlist-view { display: block; }
body.playlist-mode .home-hero,
body.playlist-mode .curso-hero,
body.playlist-mode .capsulas-intro,
body.playlist-mode .activities-view,
body.playlist-mode .ejemplos-view { display: none; }
/* Capsulas-layout in playlist mode: park it off-screen but KEEP it
rendering so the iframes inside each capsule (with .floats-over
position:fixed) remain visible. We can NOT use display:none here
(it cascades to position:fixed children too) and we can NOT use
z-index:-1 (it creates a stacking context that traps the iframe
even when the iframe has z-index:50 itself).
Solution: position:absolute moves the layout off-flow without
creating a stacking context, left:-200vw moves it visually off-
screen, visibility:hidden hides every descendant. We then bring
back the active iframe explicitly with visibility:visible. */
body.playlist-mode .capsulas-layout {
position: absolute;
left: -200vw;
top: 0;
width: 100vw;
visibility: hidden;
pointer-events: none;
}
body.playlist-mode iframe.cap-video.floats-over {
visibility: visible;
pointer-events: auto;
}
/* In playlist mode the slideshow + text-size buttons dim (they don't
apply here). Activ. stays clickable so the user can jump straight to
activities mode without first closing the playlist. */
body.playlist-mode .tools-rail #mode-toggle,
body.playlist-mode .tools-rail #text-size-toggle {
opacity: 0.32;
pointer-events: none;
}
/* When the playlist toggle is on, fill it brick so it reads as ACTIVE. */
body.playlist-mode #playlist-toggle {
background: var(--brick);
border-color: var(--brick);
}
body.playlist-mode #playlist-toggle:hover { background: #b53a23; }
/* ── Playlist body — 2-col grid: central iframe + scrollable side list.
Mobile: stacks vertically (iframe on top, list below). The side-list
is a flex column with overflow-y auto so it scrolls independently of
the iframe on desktop. */
.plv-body {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 360px);
gap: 1.5rem;
margin-top: 1.5rem;
align-items: start;
}
.plv-player-col {
/* Wrapper della colonna sinistra: player video + intro testuale sotto.
L'intro cambia automaticamente quando si seleziona un'altra canzone
(vedi site.js, promoteToCurrentSong). */
display: flex;
flex-direction: column;
gap: 1.4rem;
min-width: 0;
}
.plv-player {
/* Inherits .cap-video-wrap layout (16:9 frame). The wrap class adds
the gap+meta below, but in playlist mode we hide the meta — the
side list already shows the title. */
width: 100%;
}
.plv-player .cap-video-meta { display: none; }
/* Intro testuale della cápsula, sotto al video. Stesso contenuto del
blockquote di apertura della pagina della cápsula. Solo l'articolo
.is-active è visibile (gli altri 26 sono display:none — toggle via
site.js quando cambia la canzone). */
.plv-intros {
width: 100%;
font-family: var(--ff-disp), Georgia, serif;
font-size: 1.05rem;
line-height: 1.55;
color: var(--ink, #1a1a1a);
border-left: 3px solid var(--brick, #c8442a);
padding: 0.4rem 0 0.4rem 1rem;
}
.plv-intro { display: none; }
.plv-intro.is-active { display: block; }
.plv-intro p { margin: 0; }
.plv-intro strong { color: var(--brick, #c8442a); font-weight: 700; }
.plv-intro em { color: var(--wood, #a86a3d); font-style: italic; }
.plv-player .cap-video-frame {
/* Slightly thicker frame to feel like a "main screen". */
box-shadow:
0 18px 50px rgba(26,26,26,0.32),
0 6px 12px rgba(26,26,26,0.20);
}
.plv-sidelist {
display: flex;
flex-direction: column;
gap: 0.4rem;
/* On desktop the list scrolls independently of the iframe so the
player stays put. Height roughly matches the iframe (16:9 of a
960px column ≈ 540px) + a bit more breathing room. */
max-height: min(78vh, 720px);
overflow-y: auto;
padding-right: 6px;
/* Custom scrollbar — narrow, brick on hover. */
scrollbar-width: thin;
scrollbar-color: var(--ink20) transparent;
}
.plv-sidelist::-webkit-scrollbar { width: 8px; }
.plv-sidelist::-webkit-scrollbar-track { background: transparent; }
.plv-sidelist::-webkit-scrollbar-thumb {
background: var(--ink20);
border-radius: 4px;
}
.plv-sidelist::-webkit-scrollbar-thumb:hover { background: var(--brick); }
.plv-side-row {
all: unset;
box-sizing: border-box;
display: grid;
grid-template-columns: 96px 1fr;
gap: 0.7rem;
padding: 0.5rem;
background: rgba(255,255,255,0.45);
border: 1px solid var(--ink10);
border-radius: 6px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, transform 0.08s;
font-family: var(--ff-body);
}
.plv-side-row:hover {
background: rgba(255,255,255,0.85);
border-color: var(--ink20);
}
.plv-side-row:active { transform: scale(0.995); }
.plv-side-row.is-selected {
background: rgba(199, 68, 42, 0.10);
border-color: var(--brick);
box-shadow: inset 3px 0 0 var(--brick);
}
.plv-side-row.is-placeholder { opacity: 0.55; }
.plv-thumb-wrap {
position: relative;
width: 96px;
height: 54px; /* 16:9 */
border-radius: 4px;
overflow: hidden;
background: var(--ink);
display: grid;
place-items: center;
flex-shrink: 0;
}
.plv-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.plv-thumb-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--cream);
font-size: 1.5rem;
background: rgba(0, 0, 0, 0.30);
opacity: 0;
transition: opacity 0.15s;
}
.plv-thumb-empty .plv-thumb-play {
opacity: 1;
background: var(--ink);
color: var(--ink40);
}
.plv-side-row:hover .plv-thumb-play { opacity: 1; }
.plv-side-row.is-selected .plv-thumb-play {
opacity: 1;
background: rgba(199, 68, 42, 0.55);
}
.plv-side-meta {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: 0.1rem;
}
.plv-side-num {
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brick);
font-weight: 700;
}
.plv-side-title {
font-family: var(--ff-disp);
font-style: italic;
font-weight: 800;
font-size: 0.98rem;
line-height: 1.15;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plv-side-cap {
font-family: var(--ff-mono);
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink70);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mobile: stack iframe over sidelist; sidelist no longer scrolls
independently (gets the page scroll). */
@media (max-width: 900px) {
.plv-body {
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.plv-sidelist {
max-height: none;
overflow-y: visible;
padding-right: 0;
}
}
/* ── Hide every legacy lyrics affordance ──────────────────────────────
The lyrics modal and its toggle button are gone now — subtitles live
inside the video. If any markup straggles in from older HTML cache,
suppress it visually instead of breaking layout. */
.pl-lyrics, .pl-lyrics-toggle, .pl-lyr-ico, .pl-lyr-label { display: none !important; }
/* Header — kicker + big title + sub-paragraph + author + stats. */
.plv-header { margin-bottom: 0.75rem; max-width: 720px; }
.plv-kicker {
display: inline-block;
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brick);
font-weight: 700;
margin-bottom: 0.6rem;
}
.plv-title {
font-family: var(--ff-disp);
font-weight: 900;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 0.8rem;
}
.plv-sub {
font-family: var(--ff-disp);
font-style: italic;
font-size: 1.05rem;
color: var(--ink70, #555);
line-height: 1.5;
margin: 0 0 0.85rem;
}
.plv-sub strong { color: var(--brick); font-style: normal; font-weight: 700; }
.plv-sub em { color: var(--wood); font-style: italic; }
.plv-author-line {
font-family: var(--ff-mono);
font-size: 0.78rem;
color: var(--ink70, #555);
margin: 0 0 0.6rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.plv-author-avatar {
width: 22px; height: 22px;
flex: 0 0 auto;
fill: none;
stroke: var(--brick, #c8442a);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.plv-author-label {
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--ink50);
font-size: 0.66rem;
margin-right: 0.35rem;
}
.plv-author-name {
color: var(--brick);
font-weight: 700;
letter-spacing: 0.01em;
}
.plv-stats {
font-family: var(--ff-mono);
font-size: 0.72rem;
color: var(--ink50);
margin: 0;
display: inline-flex;
gap: 0.55rem;
align-items: baseline;
flex-wrap: wrap;
}
.plv-stat b {
color: var(--ink);
font-weight: 700;
margin-right: 0.2rem;
}
.plv-stat-sep { opacity: 0.45; }
/* List = stack of rows. The vinyl decoration + spin animation make the
currently-playing row obvious without screaming for attention. */
.pl-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
border-top: 1px solid var(--ink10);
}
.pl-row {
position: relative;
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--ink10);
border-radius: 6px;
padding: 0;
transition: background 0.15s, border-color 0.15s;
overflow: hidden;
}
.pl-row:hover { background: rgba(255, 255, 255, 0.85); }
.pl-row.is-playing {
background: rgba(199, 68, 42, 0.06);
border-color: var(--brick);
}
.pl-row.is-disabled {
opacity: 0.55;
}
.pl-row.is-disabled:hover { background: rgba(255, 255, 255, 0.55); }
.pl-row-main {
display: grid;
/* num | meta | controls — vinyl column was removed (visual noise that
looked like a clickable button). The number badge keeps the cápsula
position front and centre. */
grid-template-columns: auto 1fr auto;
gap: 0.85rem;
align-items: center;
padding: 0.85rem 1rem;
}
.pl-num {
font-family: var(--ff-mono);
font-size: 1.1rem;
font-weight: 700;
color: var(--ink50);
width: 2ch;
text-align: right;
}
.pl-row.is-playing .pl-num { color: var(--brick); }
/* Vinyl decoration removed entirely from the rows + mini-player —
visual noise that read as an unrelated clickable button. */
/* Meta block — capsule kicker + song title + author */
.pl-meta { min-width: 0; }
.pl-cap-link {
display: block; /* fill .pl-meta so ellipsis has a width */
max-width: 100%;
min-width: 0;
text-decoration: none;
color: inherit;
margin-bottom: 0.18rem;
}
.pl-cap-kicker {
display: block;
max-width: 100%;
white-space: nowrap; /* never wrap the kicker */
overflow: hidden;
text-overflow: ellipsis; /* … when the capsule title doesn't fit */
font-family: var(--ff-mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink50);
font-weight: 700;
transition: color 0.15s;
}
.pl-cap-link:hover .pl-cap-kicker { color: var(--brick); }
.pl-song-title {
font-family: var(--ff-disp);
font-weight: 800;
font-size: 1.05rem;
line-height: 1.18;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 0.1rem;
/* Truncate when very long so the row stays single-line on desktop. */
overflow: hidden;
text-overflow: ellipsis;
}
.pl-row.is-playing .pl-song-title { color: var(--brick); }
/* "placeholder" badge appended inline to the song title for rows whose
audio is a temporary stand-in (real recording not yet uploaded). */
.pl-badge-ph {
display: inline-block;
margin-left: 0.45rem;
padding: 1px 6px 2px;
font-family: var(--ff-mono);
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.12em;
vertical-align: middle;
background: rgba(168, 106, 61, 0.18);
color: var(--wood);
border: 1px solid rgba(168, 106, 61, 0.42);
border-radius: 3px;
font-weight: 700;
}
/* Placeholder badge: dim number + brick outline so the badge alone
carries the "not yet recorded" signal (vinyl was the previous tell). */
.pl-row.is-placeholder .pl-num { opacity: 0.6; }
.pl-author {
display: inline-block;
font-family: var(--ff-mono);
font-size: 0.66rem;
color: var(--wood);
letter-spacing: 0.02em;
font-style: italic;
opacity: 0.85;
}
/* Controls (right side) — time + lyrics-toggle + play */
.pl-controls {
display: inline-flex;
align-items: center;
gap: 0.55rem;
flex-shrink: 0;
}
.pl-time {
font-family: var(--ff-mono);
font-size: 0.7rem;
color: var(--ink50);
font-variant-numeric: tabular-nums;
min-width: 4.2ch;
text-align: right;
}
.pl-row.is-playing .pl-time { color: var(--brick); }
.pl-lyrics-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 1px solid rgba(168, 106, 61, 0.35);
color: var(--wood);
font-family: var(--ff-mono);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 9px 5px 7px;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pl-lyrics-toggle:hover {
background: rgba(168, 106, 61, 0.1);
color: var(--brick);
border-color: var(--brick);
}
.pl-lyrics-toggle.is-open {
background: var(--wood);
color: var(--cream);
border-color: var(--wood);
}
.pl-lyrics-toggle.is-off {
border-color: var(--ink15, rgba(0, 0, 0, 0.1));
color: var(--ink50);
cursor: not-allowed;
}
.pl-lyr-ico { width: 14px; height: 14px; display: block; flex-shrink: 0; }
.pl-lyr-label { line-height: 1; }
.pl-play {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brick);
color: var(--cream);
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 6px rgba(199, 68, 42, 0.3);
transition: background 0.15s, transform 0.12s;
}
.pl-play:hover { background: #b53a23; transform: scale(1.05); }
.pl-play:active { transform: scale(0.97); }
.pl-play.is-off {
background: transparent;
color: var(--ink50);
box-shadow: none;
border: 1px dashed var(--ink15, rgba(0, 0, 0, 0.18));
cursor: not-allowed;
}
.pl-play.is-off:hover { transform: none; }
/* While fetching the mp3 as a Blob (so seek works on servers without
Range support), spin the play button instead of showing play/pause. */
.pl-row.is-loading .pl-play {
background: var(--wood);
cursor: progress;
}
.pl-row.is-loading .pl-play .pl-play-ico {
animation: pl-spin 0.8s linear infinite;
border: 2px solid var(--cream);
border-top-color: transparent;
border-radius: 50%;
}
.pl-row.is-loading .pl-play .pl-ico-play,
.pl-row.is-loading .pl-play .pl-ico-pause { display: none; }
@keyframes pl-spin {
to { transform: rotate(360deg); }
}
.pl-play-ico { width: 18px; height: 18px; display: block; }
.pl-play-ico .pl-ico-pause { display: none; fill: currentColor; }
.pl-play-ico .pl-ico-play { display: block; fill: currentColor; }
.pl-row.is-playing .pl-play .pl-ico-play { display: none; }
.pl-row.is-playing .pl-play .pl-ico-pause { display: block; }
/* Progress bar — runs across the bottom edge of the row.
Click or drag to seek inside the currently-playing song. Grows taller
on hover so the click target feels obvious without being intrusive
when idle. */
.pl-progress {
position: relative;
height: 6px;
background: rgba(0, 0, 0, 0.06);
cursor: pointer;
transition: height 0.12s, background 0.12s;
outline: none;
/* Senza questo, su touch il browser intercetta il drag verticale come
scroll della pagina e il pointermove non arriva mai → la barra del
mini-player non si trascina su mobile. */
touch-action: none;
}
.pl-progress:hover,
.pl-progress:focus-visible,
.pl-row.is-playing .pl-progress {
height: 9px;
background: rgba(0, 0, 0, 0.10);
}
.pl-progress:focus-visible {
box-shadow: inset 0 0 0 1px var(--brick);
}
.pl-progress-fill {
display: block;
height: 100%;
width: 0%;
background: var(--brick);
transition: width 0.18s linear;
pointer-events: none;
}
/* Thumb — small circle that sits at the end of the fill while playing,
reinforcing that the bar is draggable. Hidden when no song is loaded. */
.pl-progress-thumb {
position: absolute;
top: 50%;
left: 0%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: var(--brick);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.12s, transform 0.12s;
pointer-events: none;
}
.pl-row.is-playing .pl-progress-thumb,
.pl-progress:hover .pl-progress-thumb {
opacity: 1;
}
.pl-progress:hover .pl-progress-thumb {
transform: scale(1.15);
}
/* Lyrics panel — collapsed by default, expands inline below the row. */
.pl-lyrics {
background: var(--paper);
border-top: 1px solid var(--ink10);
}
.pl-lyrics-body {
padding: 1.2rem 1.4rem 1.4rem;
max-height: 360px;
overflow-y: auto;
font-family: var(--ff-disp);
font-size: 0.94rem;
line-height: 1.55;
color: var(--ink);
}
.pl-lyrics-body h1 { display: none; } /* title shown above already */
.pl-lyrics-body p { margin: 0 0 0.7rem; }
.pl-lyrics-body strong { color: var(--brick); font-weight: 700; }
.pl-lyrics-body em { color: var(--wood); font-style: italic; }
.pl-lyrics-loading {
font-family: var(--ff-mono);
font-size: 0.78rem;
color: var(--ink50);
text-align: center;
padding: 0.6rem 0;
}
.pl-lyrics-error {
font-family: var(--ff-mono);
font-size: 0.78rem;
color: var(--brick);
text-align: center;
padding: 0.6rem 0;
}
/* Mobile bar — Playlist pill mirrors the Activ. pill behaviour. */
.mbar-playlist { /* inherits .mbar-btn */ }
body.playlist-mode .mbar-playlist {
background: var(--brick);
color: var(--cream);
}
/* ── Mini-player (sticky bottom band) ─────────────────────────────────
A persistent SoundCloud-style player surface that mirrors the audio
engine state. Always at the bottom of the viewport regardless of
which mode is active. It IS a .pl-row (so the engine drives play /
pause / scrub for free) but with mini-player-specific tweaks: dark
background, no row borders, compact spacing, slide-up entrance.
⚠ Specificity matters here: .pl-row.is-playing has bg
rgba(199, 68, 42, 0.06) at specificity (0,0,2,0). All the mini-player
rules below use .mini-player.pl-row (also 0,0,2,0) so they win in
source order, and .mini-player.pl-row.is-playing (0,0,3,0) for the
playing state — otherwise the bottom band turns transparent the
second a song actually starts playing. */
.mini-player.pl-row {
position: fixed;
left: 0;
right: 0;
bottom: 0;
/* Above EVERYTHING (mbar at 350, fullscreen overlays, etc.). The
seek bar at the bottom of the band must always be tappable — if
the mbar covers it, the user can't drag to seek. */
z-index: 9999;
margin: 0;
border: none;
border-top: 1px solid rgba(244, 236, 224, 0.12);
border-radius: 0;
background: var(--ink);
color: var(--cream);
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
overflow: hidden;
transform: translateY(0);
transition: transform 0.22s ease-out;
}
.mini-player.pl-row:hover {
/* The base .pl-row:hover lightens the bg — kill that here, the band
stays solid dark whether you're hovering it or not. */
background: var(--ink);
}
.mini-player.pl-row.is-playing {
background: var(--ink);
border-color: rgba(244, 236, 224, 0.12);
}
.mini-player[hidden] {
display: none;
}
.mini-player .pl-row-main {
/* prev | play | next | meta | controls — transport on the left, then
song info, then time + close on the right. */
grid-template-columns: auto auto auto 1fr auto;
padding: 0.55rem 1rem;
gap: 0.55rem;
}
/* Prev / Next transport buttons (mini-player only). Subtle, mute on the
dark band, glow brick on hover so they read as live controls. */
.mp-prev, .mp-next {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
color: rgba(244, 236, 224, 0.7);
border: none;
border-radius: 50%;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.mp-prev:hover, .mp-next:hover {
background: rgba(244, 236, 224, 0.08);
color: var(--cream);
}
/* Play button in the mini-player is a bit smaller than in the rows so
the transport trio sits comfortably. */
.mini-player .pl-play {
width: 38px;
height: 38px;
box-shadow: 0 1px 4px rgba(199, 68, 42, 0.45);
}
.mini-player .pl-play-ico { width: 16px; height: 16px; }
/* Light-on-dark colour shifts for all sub-elements. */
.mini-player .pl-cap-kicker {
color: rgba(244, 236, 224, 0.55);
font-size: 0.58rem;
letter-spacing: 0.16em;
}
.mini-player .pl-cap-link:hover .pl-cap-kicker { color: var(--brick); }
.mini-player .pl-song-title {
color: var(--cream);
font-size: 0.95rem;
margin: 0.05rem 0 0;
}
.mini-player.is-playing .pl-song-title { color: var(--cream); }
.mini-player.is-playing .pl-num,
.mini-player.is-playing .pl-time { color: var(--brick); }
.mini-player .pl-time {
color: rgba(244, 236, 224, 0.6);
font-size: 0.7rem;
}
.mini-player .pl-progress {
background: rgba(244, 236, 224, 0.08);
}
.mini-player .pl-progress:hover,
.mini-player.is-playing .pl-progress {
background: rgba(244, 236, 224, 0.14);
}
/* Close button (X) at the right end of the controls. */
.mp-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
color: rgba(244, 236, 224, 0.55);
border: none;
border-radius: 50%;
cursor: pointer;
margin-left: 0.35rem;
transition: background 0.12s, color 0.12s;
}
.mp-close:hover {
background: rgba(244, 236, 224, 0.1);
color: var(--cream);
}
/* Push everything up so the fixed band never covers the last line of
page content. Only when the mini-player is actually visible. */
body.has-mini-player {
padding-bottom: 76px;
}
/* On mobile both the mini-player AND the bottom .mbar are pinned to
the screen. The mini-player sits at bottom: 0, the mbar lifts ABOVE
it (bottom: ) so they stack cleanly. */
@media (max-width: 720px) {
body.has-mini-player {
padding-bottom: 116px; /* mini ~60 + mbar ~52 + air */
}
/* Lift the mbar a few px ABOVE the mini-player's top edge so the two
surfaces aren't glued together — gives the eye some breathing room
and the seek bar room to be tapped. */
body.has-mini-player .mbar { bottom: 66px; }
/* Single-row flex layout on mobile — much cleaner than the previous
2-row grid. Transport on the left, song title takes the remaining
space, time + close pinned right. The "Reproduciendo · …" kicker
is hidden on phones — the song title alone carries the message. */
.mini-player .pl-row-main {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.6rem;
}
.mini-player .mp-prev,
.mini-player .mp-next { width: 28px; height: 28px; }
.mini-player .mp-prev svg,
.mini-player .mp-next svg { width: 16px; height: 16px; }
.mini-player .pl-play { width: 36px; height: 36px; flex-shrink: 0; }
.mini-player .pl-play-ico { width: 14px; height: 14px; }
.mini-player .pl-meta { flex: 1; min-width: 0; }
.mini-player .pl-cap-kicker { display: none; }
.mini-player .pl-song-title { font-size: 0.85rem; line-height: 1.15; }
.mini-player .pl-controls { gap: 0.3rem; flex-shrink: 0; }
.mini-player .pl-time { font-size: 0.65rem; min-width: 0; }
.mini-player .mp-close { width: 26px; height: 26px; margin-left: 0; }
}
@media (max-width: 720px) {
.playlist-view { padding: 1.75rem 0.9rem 0.9rem; }
.pl-row-main {
grid-template-columns: auto 1fr;
grid-template-areas:
"num meta"
"time controls";
row-gap: 0.5rem;
}
.pl-num { grid-area: num; }
.pl-meta { grid-area: meta; }
.pl-time { grid-area: time; text-align: left; }
.pl-controls {
grid-area: controls;
justify-content: flex-end;
}
.pl-author { font-size: 0.6rem; }
.pl-song-title { font-size: 0.98rem; }
}
/* "Ejemplos" is a toggle, not a scroll destination — so it reads as a
pill button: outlined when off, solid orange when the mode is on. */
.nav-link[href$="#ejemplos"] {
border: 1px solid rgba(244, 236, 224, 0.32);
border-radius: 999px;
padding: 5px 13px;
opacity: 0.85;
transition: opacity 0.15s, border-color 0.15s, background-color 0.15s;
}
.nav-link[href$="#ejemplos"]:hover {
opacity: 1;
border-color: rgba(244, 236, 224, 0.6);
}
body.ejemplos-mode .nav-link[href$="#ejemplos"] {
background: var(--brick);
border-color: var(--brick);
color: var(--cream);
opacity: 1;
}
/* ── BODY CONTENT (markdown rendered) ────────────────────────── */
/* Auto-numbering: every .cap-body counts its own h2/h3/h4 (CSS counters)
so headings render as "1. Title", "1.1 Sub-title", "1.1.1 Sub-sub" —
the same numbering scheme is computed Python-side and injected into the
sidebar sub-items so the two views stay in sync. */
.cap-body {
line-height: 1.7;
counter-reset: h2-cnt 0;
/* Drives text size for paragraph-level reading content. Inherits to
,
, captions, blockquotes via natural CSS cascade. Heading
sizes stay in rem (capsule titles shouldn't grow with reading-fs
since they're already large). */
font-size: var(--reading-fs);
}
.cap-body h2 { counter-reset: h3-cnt 0; counter-increment: h2-cnt; }
.cap-body h3 { counter-reset: h4-cnt 0; counter-increment: h3-cnt; }
.cap-body h4 { counter-increment: h4-cnt; }
/* Gallery titles () are NOT auto-numbered: they
appear in the sidebar but without the "X.Y.Z" prefix. We also opt them
out of the h4-cnt counter so they don't shift the numbering of any
subsequent real h4 sections. */
.cap-body h4.gal-title { counter-increment: none; }
.cap-body h2[id^="sec-"]:not(.gal-title)::before {
content: counter(h2-cnt) ". ";
color: var(--brick); font-weight: 700;
margin-right: 0.25em;
}
.cap-body h3[id^="sec-"]:not(.gal-title)::before {
content: counter(h2-cnt) "." counter(h3-cnt) "\00a0 ";
color: var(--brick); font-weight: 700;
margin-right: 0.25em;
}
.cap-body h4[id^="sec-"]:not(.gal-title)::before {
content: counter(h2-cnt) "." counter(h3-cnt) "." counter(h4-cnt) "\00a0 ";
color: var(--brick); font-weight: 700;
margin-right: 0.25em;
}
.cap-body h1 {
font-family: var(--ff-disp); font-weight: 900;
font-size: 1.7rem; margin: 2.5rem 0 0.6rem;
letter-spacing: -0.02em;
}
.cap-body h2 {
font-family: var(--ff-disp); font-weight: 700;
font-size: 1.35rem; margin: 2.75rem 0 0.7rem;
letter-spacing: -0.015em;
}
.cap-body h3 {
font-family: var(--ff-disp); font-weight: 700;
font-size: 1.05rem; margin: 1.75rem 0 0.45rem;
color: var(--wood);
}
.cap-body h4 {
font-family: var(--ff-mono);
font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase;
margin: 1.5rem 0 0.4rem;
color: var(--ink50);
}
.cap-body p { margin-bottom: 0.9rem; }
.cap-body ul, .cap-body ol { margin: 0.4rem 0 1rem 1.6rem; }
.cap-body li { margin-bottom: 0.3rem; }
.cap-body blockquote {
border-left: 3px solid var(--brick);
margin: 1.5rem 0;
padding: 0.75rem 1.25rem;
background: rgba(200,68,42,0.05);
font-family: var(--ff-disp);
font-style: italic;
font-size: 1.05rem;
}
.cap-body blockquote p { margin-bottom: 0; }
.cap-body blockquote strong { font-style: normal; }
/* First blockquote of a capsule = its editorial premise. Louder than the
ordinary pull-quotes: big icon, kicker label, larger italic body. */
.cap-body blockquote.cap-tagline {
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 20px;
align-items: center;
margin: 1.25rem 0 2.75rem;
padding: 22px 26px;
background: linear-gradient(to right,
rgba(200,68,42,0.14) 0%, rgba(200,68,42,0.04) 100%);
border-left: 5px solid var(--brick);
border-radius: 4px;
font-size: 1rem;
font-style: normal;
}
.cap-body blockquote.cap-tagline::before {
content: "💡";
grid-column: 1;
grid-row: 1 / -1;
align-self: center;
font-size: 44px;
line-height: 1;
text-align: center;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.cap-body blockquote.cap-tagline > p {
grid-column: 2;
margin: 0;
font-family: var(--ff-disp);
font-style: italic;
font-size: 1.3rem;
line-height: 1.5;
color: var(--ink);
}
.cap-body blockquote.cap-tagline > p:first-of-type::before {
content: "En pocas palabras";
display: block;
font-family: var(--ff-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
font-style: normal;
color: var(--brick);
margin-bottom: 0.5rem;
}
.cap-body blockquote.cap-tagline strong {
font-style: normal;
color: var(--brick);
}
/* Horizontal rules in capsule content: whitespace only, never a line. */
.cap-body hr {
border: 0;
height: 0;
margin: 2.5rem 0;
}
.cap-body img {
max-width: 100%;
max-height: 460px;
width: auto;
height: auto;
display: block;
margin: 1.5rem auto;
border: 1px solid var(--ink10);
object-fit: contain;
}
.cap-body .caption {
font-size: 0.82rem;
color: var(--ink50);
text-align: center;
margin-top: -1rem;
margin-bottom: 1.5rem;
font-family: var(--ff-disp);
font-style: italic;
}
.table-scroll { overflow-x: auto; }
.cap-body table {
width: 100%; border-collapse: separate; border-spacing: 0;
margin: 1.5rem 0; font-size: 0.92rem;
table-layout: fixed;
}
.cap-body th {
background: rgba(200, 68, 42, 0.10); color: var(--brick);
font-family: var(--ff-disp); font-size: 0.86rem;
letter-spacing: 0.02em; text-transform: none;
padding: 12px 14px; text-align: left;
font-weight: 700;
border-bottom: 2px solid var(--brick);
}
.cap-body th:not(:last-child) { border-right: 1px solid rgba(200, 68, 42, 0.20); }
.cap-body td {
padding: 12px 14px;
border-bottom: 1px solid var(--ink10);
vertical-align: top;
line-height: 1.55;
}
.cap-body td:not(:last-child) { border-right: 1px solid var(--ink10); }
.cap-body tr:nth-child(even) td { background: rgba(26,26,26,0.025); }
.cap-body td strong { color: var(--brick); }
/* When a table has no header row content (legacy "| | |"), hide the
thead so we don't show a bare black/empty stripe at the top. */
.cap-body thead:empty,
.cap-body thead tr:empty,
.cap-body thead th:empty:first-child:last-child { display: none; }
.cap-body pre {
background: var(--ink); color: #e8dcc8;
padding: 1.25rem; overflow-x: auto;
font-family: var(--ff-mono); font-size: 0.8rem;
line-height: 1.6; margin: 1.25rem 0;
}
.cap-body code {
font-family: var(--ff-mono); font-size: 0.82em;
background: rgba(26,26,26,0.08); padding: 2px 5px;
}
.cap-body pre code { background: none; padding: 0; font-size: 0.8rem; }
.cap-body .video-embed {
position: relative; width: 100%; padding-top: 56.25%; margin: 1.5rem 0;
}
.cap-body .video-embed iframe {
position: absolute; inset: 0; width: 100%; height: 100%;
border: none;
}
.cap-body .audio-inline {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(26,26,26,0.06);
margin: 0.75rem 0;
}
.cap-body .audio-inline audio { flex: 1; height: 30px; }
.cap-body .audio-inline span {
font-family: var(--ff-mono); font-size: 0.65rem;
color: var(--ink50); letter-spacing: 0.06em;
}
/* ── GALLERY (3-column grid + click-to-zoom modal with prev/next) ───── */
.cap-body .gallery {
margin: 1.5rem 0;
background: rgba(168,106,61,0.04);
border-left: 3px solid var(--wood);
padding: 0.6rem 0 0.6rem;
}
.cap-body .gallery-head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 0 1rem 0.7rem;
}
.cap-body .gallery-head h4 {
margin: 0; font-size: 0.9rem; font-weight: 700;
color: var(--wood); font-family: var(--ff-mono);
text-transform: uppercase; letter-spacing: 0.06em;
}
.cap-body .gallery-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 0 1rem;
}
@media (max-width: 800px) {
.cap-body .gallery-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.cap-body .gallery-strip { grid-template-columns: 1fr; }
}
.cap-body .gal-item {
margin: 0;
display: flex; flex-direction: column;
cursor: zoom-in;
background: #fff;
border: 1px solid rgba(168,106,61,0.2);
transition: transform 0.12s, box-shadow 0.12s;
}
.cap-body .gal-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.cap-body .gal-item img {
width: 100%; height: 180px;
object-fit: contain;
background: #fff;
display: block;
padding: 8px;
box-sizing: border-box;
}
.cap-body .gal-item figcaption {
font-family: var(--ff-mono);
font-size: 0.7rem;
color: var(--ink50);
padding: 0.5rem 0.7rem 0.6rem;
line-height: 1.4;
border-top: 1px solid rgba(168,106,61,0.12);
}
/* Click-to-zoom modal (handled by site.js) — with prev/next nav */
.gallery-modal {
position: fixed; inset: 0;
background: rgba(0,0,0,0.9);
z-index: 9999;
display: none;
flex-direction: column;
align-items: center; justify-content: center;
padding: 2rem 4rem;
}
.gallery-modal.open { display: flex; }
.gm-stage {
position: relative;
flex: 1; min-height: 0;
display: flex; align-items: center; justify-content: center;
width: 100%;
}
.gm-stage img {
max-width: 100%; max-height: 100%;
object-fit: contain;
background: #fff;
cursor: zoom-out;
}
.gm-cap {
margin-top: 1rem;
color: #fff; font-family: var(--ff-mono);
font-size: 0.85rem; max-width: 80%;
text-align: center; line-height: 1.4;
}
.gm-counter {
position: absolute; top: 1rem; right: 1.5rem;
color: rgba(255,255,255,0.65);
font-family: var(--ff-mono); font-size: 0.75rem;
}
.gm-close {
position: absolute; top: 1rem; left: 1.5rem;
background: none; border: none;
color: rgba(255,255,255,0.7);
font-size: 1.4rem; cursor: pointer;
padding: 0.3rem 0.6rem;
}
.gm-close:hover { color: #fff; }
.gm-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.1);
border: none;
color: #fff;
width: 48px; height: 80px;
font-size: 2rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.12s;
}
.gm-nav:hover { background: rgba(255,255,255,0.25); }
.gm-nav:disabled { opacity: 0.2; cursor: default; background: none; }
.gm-prev { left: 0.5rem; }
.gm-next { right: 0.5rem; }
/* ── AUDIO / VIDEO BLOCK (nuovo: figure + figcaption + media) ───────── */
.cap-body .audio-block,
.cap-body .video-block {
margin: 1.1rem 0;
padding: 0;
background: rgba(168,106,61,0.06);
border: 1px solid rgba(168,106,61,0.25);
border-left: 3px solid var(--wood);
border-radius: 4px;
}
.cap-body .audio-block figcaption,
.cap-body .video-block figcaption {
font-family: var(--ff-mono);
font-size: 0.72rem;
color: var(--ink50);
padding: 0.5rem 0.85rem 0.35rem;
text-transform: none;
letter-spacing: 0.02em;
line-height: 1.4;
}
.cap-body .audio-block audio {
display: block;
width: calc(100% - 1.7rem);
margin: 0 0.85rem 0.6rem;
height: 32px;
}
.cap-body .video-block video {
display: block;
width: calc(100% - 1.7rem);
margin: 0 0.85rem 0.6rem;
max-height: 480px;
background: #000;
}
/* ── TOOL RAIL (floating buttons, fixed top-right) ───────────── */
/* Designed to grow: stack more .tool-btn vertically as needed. */
.tools-rail {
position: fixed;
top: calc(52px + 0.85rem);
right: 0.85rem;
z-index: 250;
display: flex;
flex-direction: column;
gap: 0.5rem;
opacity: 1;
pointer-events: auto;
transform: translateX(0);
transition: opacity 0.25s, transform 0.25s,
top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When the smart header tucks away on scroll-down, the rail rises with
it so the gap above stays constant whether the bar is there or not. */
body.chrome-hidden .tools-rail { top: 0.85rem; }
/* Hide the text-size cycler at the very top — only the Presentar
button needs to be reachable from the hero (where the intro
slideshow lives). The AAA toggle reveals itself when the user
enters the capsules reading area. */
.tools-rail #text-size-toggle { display: none; }
body.in-capsules .tools-rail #text-size-toggle { display: flex; }
.tool-btn {
width: 64px;
height: 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 4px 7px;
background: var(--ink);
color: var(--cream);
border: 1px solid rgba(244,236,224,0.10);
border-radius: 6px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
transition: background 0.15s, transform 0.12s, border-color 0.15s;
font-family: var(--ff-mono);
}
.tool-btn:hover {
background: var(--brick);
border-color: var(--brick);
transform: translateY(-1px);
}
.tool-btn:active { transform: translateY(0); }
.tool-icon-wrap {
display: inline-flex;
width: 26px; height: 26px;
}
.tool-icon { width: 100%; height: 100%; display: block; }
.tool-label {
font-size: 0.52rem;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
}
/* ── AAA text-size toggle inside the tool rail.
Three As stacked from large → small. Only the one matching the
current `body.text-size-N` is brick-orange; the other two are
cream so the active state is obvious at a glance. */
.tool-btn.text-size-toggle .ts-icon {
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 1px;
width: 26px;
height: 26px;
}
.tool-btn.text-size-toggle .ts-a {
font-family: var(--ff-disp);
font-weight: 900;
color: var(--cream);
line-height: 1;
display: inline-block;
}
.tool-btn.text-size-toggle .ts-a3 { font-size: 20px; }
.tool-btn.text-size-toggle .ts-a2 { font-size: 14px; }
.tool-btn.text-size-toggle .ts-a1 { font-size: 9px; }
/* Highlight the A that corresponds to the current size. */
body.text-size-2 .tool-btn.text-size-toggle .ts-a1,
body.text-size-2 .tool-btn.text-size-toggle .ts-a3 { color: var(--cream); }
body.text-size-2 .tool-btn.text-size-toggle .ts-a2 { color: #ffb38a; }
body.text-size-3 .tool-btn.text-size-toggle .ts-a1,
body.text-size-3 .tool-btn.text-size-toggle .ts-a2 { color: var(--cream); }
body.text-size-3 .tool-btn.text-size-toggle .ts-a3 { color: #ffb38a; }
/* Default state (no `text-size-N` class on body, or `text-size-1`) →
smallest A glows. */
.tool-btn.text-size-toggle .ts-a1 { color: #ffb38a; }
body.text-size-2 .tool-btn.text-size-toggle .ts-a1,
body.text-size-3 .tool-btn.text-size-toggle .ts-a1 { color: var(--cream); }
/* ── Sidebar SECTIONS toggle (icon-only, inside the filter row) ───────
Two states, controlled by `body.sections-hidden`:
• default (sections visible) → expanded icon shown (three bullets),
tooltip "Ocultar secciones"
• toggled (sections hidden) → collapsed icon shown (one bullet),
tooltip "Mostrar secciones"
When `sections-hidden`, every `.sidebar-subitem` is hidden via CSS.
───────────────────────────────────────────────────────────────────── */
.sections-toggle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: 1px solid rgba(26,26,26,0.18);
border-radius: 4px;
color: var(--ink50);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sections-toggle:hover {
color: var(--brick);
border-color: var(--brick);
background: rgba(200,68,42,0.06);
}
.sections-toggle .st-icon {
width: 16px;
height: 16px;
display: block;
}
/* Hide collapsed-icon by default; swap when body has .sections-hidden. */
.sections-toggle .st-icon-collapsed { display: none; }
body.sections-hidden .sections-toggle .st-icon-expanded { display: none; }
body.sections-hidden .sections-toggle .st-icon-collapsed { display: block; }
body.sections-hidden .sections-toggle {
color: var(--brick);
border-color: var(--brick);
background: rgba(200,68,42,0.06);
}
/* The actual section-hiding rule */
body.sections-hidden .sidebar-subitem { display: none !important; }
/* ── PRESENTATION MODE (slideshow overlay) ───────────────────────────
Activated by clicking the Presentar tool-btn. A full-viewport overlay
takes over: top breadcrumb (capsule + section), large stage with the
current slide content cloned from the page, prev/next arrows, counter
and a bottom hint strip. ESC / ← / → all work; clicking the close X
exits and scrolls the page back to wherever the slide came from. */
.present-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: #1a1a1a;
color: #f4ecdf;
display: none;
flex-direction: column;
font-family: var(--ff-body);
/* Hide the mouse cursor when idle (same trigger as the side arrows:
`.mouse-active` is added on mousemove and stripped after 1.8s).
This gives a clean "cinema" feel during presentations where the
pointer doesn't sit on top of the slide. */
cursor: none;
}
.present-overlay.mouse-active { cursor: auto; }
.present-overlay.open { display: flex; }
body.presenting { overflow: hidden; }
/* TOP bar — small, fixed height; capsule name + section + counter + close */
.present-top {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0.8rem;
align-items: center;
padding: 12px 18px;
background: #0e0e0e;
border-bottom: 1px solid rgba(244,236,224,0.10);
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
}
.po-breadcrumb {
min-width: 0; /* allow ellipsis */
display: flex;
align-items: center;
gap: 0.6rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.po-cap {
text-transform: uppercase;
color: var(--brick);
font-weight: 700;
letter-spacing: 0.18em;
flex: 0 0 auto;
}
.po-cap-title {
color: #f4ecdf;
font-family: var(--ff-disp);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0;
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
}
.po-sep {
color: rgba(244,236,224,0.30);
flex: 0 0 auto;
}
.po-section {
color: rgba(244,236,224,0.65);
text-transform: none;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.78rem;
letter-spacing: 0.04em;
}
.po-counter {
flex: 0 0 auto;
color: rgba(244,236,224,0.55);
font-variant-numeric: tabular-nums;
font-size: 0.72rem;
}
.po-close {
flex: 0 0 auto;
background: transparent;
border: none;
color: rgba(244,236,224,0.55);
padding: 0 4px;
margin-left: 6px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition: color 0.15s, transform 0.12s;
}
.po-close:hover { color: #f4ecdf; transform: scale(1.15); }
.po-close:active { transform: scale(0.96); }
/* On hero / intro slides the breadcrumb (chip + capsule title +
section) would be redundant — the slide IS the capsule splash, the
title is already rendered huge below. Hide the breadcrumb chunks
and make the top bar TRANSPARENT (no dark strip across the top)
so the splash extends edge-to-edge. Counter and close button stay
visible — they're floating text on the slide bg, contrast is fine. */
.present-overlay[data-slide-kind="hero"] .po-breadcrumb,
.present-overlay[data-slide-kind="intro"] .po-breadcrumb { visibility: hidden; }
.present-overlay[data-slide-kind="hero"] .present-top,
.present-overlay[data-slide-kind="intro"] .present-top {
background: transparent;
border-bottom: none;
}
/* STAGE — center area where the current slide is rendered.
No horizontal padding: the image uses the FULL viewport width
(capped only by its own aspect ratio via object-fit:contain).
Side arrows live as absolute overlays on top of the image — they
only appear on mousemove anyway, so they never interfere.
Background is driven by `data-slide-kind` on the overlay so that
fig/video slides get pure WHITE while hero/moraleja stay DARK.
The transition is synchronised with the slide fade-in (same 0.25s
ease-in-out) so the image doesn't pop in before the bg changes. */
.present-stage {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 8px 0;
min-height: 0;
background: #1a1a1a;
/* Phase 1 of the slide change: bg colour fades over the FIRST 0.15s
of the transition. The slide content (see .po-slide animation) stays
invisible during this phase, then fades in over the next 0.1s. */
transition: background 0.15s ease-out;
}
.present-overlay[data-slide-kind="fig"] .present-stage { background: #ffffff; }
/* Videos (YouTube / Vimeo /