/* Charlas y workshops — Alf Álvarez. Se apoya en sistema.css y home.css. */

[hidden] { display: none !important; }
.barra__nav a[aria-current="page"] { color: var(--amarillo); }

/* Encabezado */
.ch-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  min-height: min(100svh, 980px);
  padding: clamp(104px, 15svh, 140px) var(--margen) clamp(48px, 6vw, 80px);
  max-width: var(--contenido-max); margin-inline: auto;
}
.ch-hero__texto { position: relative; z-index: 2; display: grid; gap: clamp(16px, 2.6svh, 28px); justify-items: start; min-width: 0; }
.ch-hero__titulo {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(52px, min(7.4vw, 11svh), 120px); line-height: .9; text-wrap: balance;
}
.ch-hero__lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; max-width: 40ch; }
.ch-hero__foto { position: relative; min-width: 0; }
.ch-hero__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 30%; }
.ch-hero__foto::after {
  content: ""; position: absolute; left: -16px; bottom: -16px; width: 38%; height: 12px; background: var(--amarillo);
}

.atajos { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.atajo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16px; color: var(--blanco); text-decoration: none;
  border: 2px solid var(--borde); border-radius: var(--radius-pill); padding: 10px 18px 10px 10px;
  transition: border-color .2s, background-color .2s, color .2s;
}
.atajo__n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blanco); color: var(--negro); font-family: var(--font-display); font-weight: 900; font-size: 18px;
}
.atajo--show .atajo__n { background: var(--magenta); color: var(--sobre-magenta); }
.atajo--ws .atajo__n { background: var(--azul); color: var(--sobre-azul); }
.atajo:hover { border-color: var(--amarillo); color: var(--amarillo); }
.atajo:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.ch-hero__ficha { font-size: 16px; }

/* Bloques de catálogo */
.bloque { position: relative; z-index: 1; }
.bloque__cabeza { display: grid; gap: var(--space-3); justify-items: start; margin-bottom: clamp(40px, 5vw, 72px); max-width: 900px; }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-3); }

.ficha {
  position: relative; display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--carbon); border-top: 3px solid var(--blanco);
  padding: var(--space-4) var(--space-3) var(--space-3);
  min-height: 300px; min-width: 0;
  transition: border-color .25s, background-color .25s;
}
.ficha--ws { border-top-color: var(--azul); }
.ficha__titulo {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(32px, 2.8vw, 44px); line-height: .95; margin-top: auto; text-wrap: balance;
}
.ficha__sub { color: var(--gris); font-size: 17px; line-height: 1.45; }
.ficha__mas { display: grid; gap: var(--space-2); justify-items: start; color: var(--blanco); font-size: 16px; line-height: 1.5; }
.ficha__mas .alf-link { font-size: 16px; }

/* Con cursor: la descripción se abre al pasar o al enfocar. En pantallas táctiles queda siempre visible. */
@media (hover: hover) and (min-width: 861px) {
  .ficha { min-height: var(--alto-ficha, 430px); }
  .ficha__mas { opacity: 0; transition: grid-template-rows .45s var(--curva), opacity .3s, margin .45s var(--curva); margin-top: 0; }
  .ficha__mas > * { overflow: hidden; min-height: 0; }
  .ficha__mas { display: grid; grid-template-rows: 0fr 0fr; }
  .ficha:hover .ficha__mas, .ficha:focus-within .ficha__mas { grid-template-rows: 1fr 1fr; opacity: 1; margin-top: var(--space-2); }
  .ficha:hover, .ficha:focus-within { border-top-color: var(--amarillo); background: #1d1d21; }
  .ficha__mas .alf-link { padding-bottom: 6px; }
}
@media (hover: none), (max-width: 860px) {
  .ficha__mas { margin-top: var(--space-2); }
}

/* Fichas que son enlaces completos */
a.ficha { text-decoration: none; color: inherit; }
.ficha--show { background: var(--magenta); border-top-color: var(--magenta); color: var(--sobre-magenta); }
.ficha--show .alf-label, .ficha--show .ficha__sub { color: var(--sobre-magenta); }
.ficha--elige { background: transparent; border: 2px dashed var(--amarillo); border-top: 3px solid var(--amarillo); }
.ficha__ir { margin-top: var(--space-2); font-weight: 600; font-size: 16px; text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ficha--show .ficha__ir { text-decoration-color: var(--negro); }
a.ficha:hover .ficha__ir { color: var(--amarillo); }
a.ficha.ficha--show:hover { background: #ff4aa2; }
a.ficha.ficha--show:hover .ficha__ir { color: var(--negro); }
a.ficha:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

@media (min-width: 861px) {
  .catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalogo--ws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Medición de la altura de las fichas abiertas (lo hace charlas.js) */
.catalogo.midiendo .ficha { min-height: 0 !important; transition: none !important; }
.catalogo.midiendo .ficha__mas { grid-template-rows: 1fr 1fr !important; margin-top: var(--space-2) !important; transition: none !important; }

/* Pantallas medianas: el bloque de texto del encabezado debe caber en pantalla */
@media (min-width: 861px) and (max-width: 1200px) {
  .ch-hero__titulo { font-size: clamp(48px, min(6.6vw, 10svh), 96px); }
  .ch-hero__lead { font-size: 18px; }
  .atajo { font-size: 14px; gap: 8px; padding: 6px 14px 6px 6px; }
  .atajo__n { width: 26px; height: 26px; font-size: 16px; }
}
.ch-hero__foto { align-self: center; }

/* El Show de Tendencias */
.show { position: relative; z-index: 2; background: var(--magenta); color: var(--sobre-magenta); }
.show__dentro {
  max-width: var(--contenido-max); margin-inline: auto;
  padding: clamp(80px, 10vw, 140px) var(--margen);
  display: grid; gap: var(--space-3); justify-items: start;
}
.show .alf-label { color: var(--sobre-magenta); }
.show__titulo {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(56px, 11vw, 176px); line-height: .85; max-width: 10ch;
}
.show__frase { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); line-height: 1; }
.show__texto { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 52ch; }
.show__boton { background: var(--negro); color: var(--blanco); margin-top: var(--space-2); }
.show__boton:hover { background: var(--blanco); color: var(--negro); }

/* Workshop destacado */
.destacado {
  border: 3px solid var(--amarillo); padding: clamp(24px, 4vw, 56px); margin-bottom: var(--space-3);
  display: grid; position: relative; overflow: hidden;
}
.destacado__texto { display: grid; gap: var(--space-2); justify-items: start; max-width: 760px; }
.destacado__texto > p:not(.alf-label):not(.destacado__sub) { color: var(--gris); max-width: 58ch; }
.destacado__titulo { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 6vw, 96px); line-height: .9; }
.destacado__sub { font-size: clamp(19px, 1.6vw, 22px); color: var(--amarillo); font-weight: 600; }
.destacado__cita p { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1; margin: var(--space-2) 0; }

/* Subrayados que se encienden al entrar */
html.js .ch-hero__titulo .alf-resaltado, html.js .destacado__cita .alf-resaltado { background-size: 0% .32em; }
html.js .ch-hero__titulo .alf-resaltado.encendido, html.js .destacado__cita .alf-resaltado.encendido { background-size: 100% .32em; }

/* Confianza y cierre */
.confianza__aula { padding-inline: var(--margen); margin-top: var(--space-3); color: var(--gris); }
.cierre .acciones .alf-link { font-size: 16px; }

@media (max-width: 860px) {
  .ch-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ch-hero__foto { order: -1; }
  .ch-hero__foto::after { left: 0; bottom: -10px; height: 8px; }
  .ficha { min-height: 0; }
  .ficha__titulo { margin-top: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .ficha, .ficha__mas, .atajo { transition: none; }
}