/* =====================================================================
   Páginas interiores y toques de color por sección (noviembre de 2026).
   Se carga después de estilos.css y tema-oscuro.css en todas las páginas.
   Cada página interior lleva en el <body> la clase «pagina» y la de su
   sección, que fija --c: el dorado del club, el malva de Fabularium,
   el azul del Laboratorio…
   ===================================================================== */

.pagina--taller { --c: var(--c-taller); }
.pagina--club { --c: var(--c-club); }
.pagina--fabularium { --c: var(--c-fabularium); }
.pagina--laboratorio { --c: var(--c-laboratorio); }
.pagina--sobre-mi { --c: var(--c-sobre-mi); }

/* La cabecera lleva abajo una línea del color de la página en la que estás */
.pagina .cabecera { border-bottom: 2px solid var(--c); }

/* Navegación: dónde estás */
.nav__enlace[aria-current="page"]::after,
.nav__desplegable.actual > .nav__enlace::after { transform: scaleX(1); }
.submenu a[aria-current="page"] { color: var(--naranja); }
.mm-enlace[aria-current="page"],
.mm-grupo.actual > summary { color: var(--c); }
.mm-sub a[aria-current="page"] { color: var(--crema); }

/* ---------- Cabeza de página: título, lámina completa y texto ----------
   En el móvil: título, lámina y texto, uno debajo de otro.
   En el ordenador: la lámina a la izquierda y, a su derecha, el título y el texto,
   como un libro abierto con el grabado frente a la portadilla. */
.cabeza { padding-block: 2.25rem 4rem; }
.cabeza__rejilla { display: grid; gap: 2rem; grid-template-areas: "titular" "lamina" "texto"; }
.cabeza__titular { grid-area: titular; }
.cabeza__rejilla > .lamina { grid-area: lamina; }
.cabeza__texto { grid-area: texto; }
.cabeza__texto > .cabeza__entrada:first-child { margin-top: 0; }
@media (min-width: 56rem) {
  .cabeza { padding-block: 4.5rem 6rem; }
  .cabeza__rejilla {
    grid-template-columns: .85fr 1.15fr; grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "lamina ." "lamina titular" "lamina texto" "lamina .";
    column-gap: 4.5rem; row-gap: 0;
  }
  .cabeza__texto { padding-top: 1.4rem; }
}
.antetitulo {
  display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1.1rem;
  font-size: .875rem; font-weight: 700; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--c);
}
.antetitulo::before { content: ""; flex: none; width: 2rem; height: 2px; margin-top: .6em; border-radius: 2px; background: currentColor; }
.cabeza__titulo { font-size: clamp(3rem, 12.5vw, 5.2rem); line-height: .96; letter-spacing: -.01em; }
.cabeza__entrada { margin-top: 1.4rem; max-width: 34rem; font-size: 1.25rem; line-height: 1.55; color: var(--crema-suave); }
.cabeza__entrada + .cabeza__entrada { margin-top: 1rem; }
.cabeza__botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.cabeza__botones .boton { flex: 1 1 auto; }
@media (min-width: 30rem) { .cabeza__botones .boton { flex: 0 0 auto; } }

/* La lámina completa, enmarcada, con su pie como en un libro */
.lamina--completa {
  width: 100%; max-width: 17.5rem; justify-self: center;
  padding: .6rem .6rem 0;
  outline: 1px solid var(--linea-fuerte); outline-offset: 7px;
}
.pie-lamina { padding: .75rem .3rem .85rem; font-family: var(--display); font-size: 1.0625rem; line-height: 1.3; text-align: center; color: var(--tinta-suave); text-wrap: balance; }
.pie-lamina span { display: block; margin-bottom: .1rem; font-family: var(--texto); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }

/* El retrato, enmarcado igual que las láminas */
.lamina--retrato { width: 100%; max-width: 17.5rem; justify-self: center; outline: 1px solid var(--linea-fuerte); outline-offset: 7px; }
@media (min-width: 56rem) {
  .lamina--completa { max-width: 25rem; justify-self: start; }
  .lamina--retrato { max-width: 23rem; justify-self: start; }
}
.retrato { width: 100%; max-width: 17rem; }

/* ---------- Toques de color dentro de las páginas ---------- */
.pagina .seccion__titulo::before { content: ""; display: block; width: 2.75rem; height: 3px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--c); }
.pagina .antetitulo + .seccion__titulo::before,
.pagina .llamada .seccion__titulo::before { content: none; }
.pagina .paso__num { color: var(--c); }
.pagina .lista li::before {
  background: var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.6l3.8 3.8L16.2 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.6l3.8 3.8L16.2 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pagina .hora-local svg { color: var(--c); }
.pagina .enlace { text-decoration-color: var(--c); }

/* Texto corrido a dos columnas: título a un lado, texto al otro */
.dos-columnas { display: grid; gap: 1.75rem; }
@media (min-width: 60rem) { .dos-columnas { grid-template-columns: .85fr 1.15fr; gap: 5rem; align-items: start; } }
.texto { max-width: 38rem; }
.texto > p { font-size: 1.1875rem; line-height: 1.65; color: var(--crema-suave); }
.texto > p + p { margin-top: 1.1rem; }
.texto strong { color: var(--crema); font-weight: 700; }

/* Frase destacada */
.cita {
  margin: 2.25rem 0 0; max-width: 36rem; padding: .15rem 0 .15rem 1.35rem; border-left: 3px solid var(--c);
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 5.2vw, 2.1rem); line-height: 1.25; color: var(--crema);
}

/* Testimonio suelto, dentro de una sección */
.voz { margin: 2.5rem 0 0; max-width: 36rem; padding: 1.2rem 1.35rem 1.3rem; border-left: 3px solid var(--c); border-radius: 0 4px 4px 0; background: rgba(239, 228, 209, .045); }
.voz blockquote { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.45rem; line-height: 1.3; color: var(--crema); }
.voz figcaption { margin-top: .7rem; font-size: 1rem; color: var(--crema-suave); }
.voz figcaption strong { color: var(--crema); }

/* Pasos: variante de cuatro */
@media (min-width: 56rem) { .pasos--cuatro { grid-template-columns: repeat(4, 1fr); } }
.paso__num--palabra { font-size: 2.4rem; }

/* Dos maneras de seguir el taller */
.modos { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .modos { grid-template-columns: 1fr 1fr; } }
.modo {
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.6rem 1.5rem 1.75rem;
  border: 1px solid var(--linea); border-top: 3px solid var(--c); border-radius: 4px;
  background-color: var(--fondo-tarjeta); box-shadow: var(--sombra-2);
}
.modo__tipo { font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.modo h3 { font-size: 2.1rem; }
.modo p:not(.modo__tipo):not(.hora-local) { color: var(--crema-suave); }
.modo .hora-local { margin-top: .15rem; }

/* Géneros, como etiquetas */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.chips li { padding: .45rem .9rem; border: 1px solid var(--linea-fuerte); border-radius: 3px; background: rgba(239, 228, 209, .03); font-size: 1.0625rem; line-height: 1.3; color: var(--crema); }
.chips .chip--ahora { border-color: var(--c); background: rgba(210, 129, 79, .12); }
.chips small { margin-left: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.proximos { margin-top: 1.6rem; font-size: 1.125rem; color: var(--crema-suave); }
.proximos strong { color: var(--crema); }

/* Índice de autores */
.autores { display: grid; margin: 2.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 48rem) { .autores { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.autores li { display: grid; gap: .15rem; padding: 1.05rem 0 1.1rem; border-bottom: 1px solid var(--linea-fuerte); }
@media (min-width: 48rem) { .autores li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem; } }
.autor { font-family: var(--display); font-weight: 600; font-size: 1.85rem; line-height: 1.1; color: var(--crema); }
.obra { font-family: var(--display); font-style: italic; font-size: 1.25rem; line-height: 1.25; color: var(--crema-suave); }
.obra--pendiente { color: rgba(190, 178, 160, .42); }
.autores__nota { margin-top: 1.4rem; font-size: 1.125rem; color: var(--crema-suave); }

/* Bloques de la miniguía */
.guias { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .guias { grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: start; } }
.bloques { counter-reset: bloque; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
.bloques li { counter-increment: bloque; display: grid; grid-template-columns: 2.4rem 1fr; gap: .15rem 1rem; padding: 1.05rem 0 1.15rem; border-bottom: 1px solid var(--linea-fuerte); }
.bloques li::before { content: counter(bloque); grid-row: span 2; font-family: var(--display); font-weight: 600; font-size: 2.3rem; line-height: .9; color: var(--c); }
.bloques h3 { font-size: 1.6rem; line-height: 1.1; }
.bloques p { font-size: 1.0625rem; color: var(--crema-suave); }

/* Método del Laboratorio: cinco fases en vertical */
.metodo { display: grid; gap: 2.75rem; }
@media (min-width: 60rem) { .metodo { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.fases { counter-reset: fase; margin: 0; padding: 0; list-style: none; }
.fase { counter-increment: fase; position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: .1rem 1.1rem; padding-bottom: 1.6rem; }
.fase::before {
  content: counter(fase); grid-row: span 2; width: 3rem; height: 3rem; display: grid; place-items: center;
  border: 1.5px solid var(--c); border-radius: 50%;
  font-family: var(--display); font-weight: 600; font-size: 1.55rem; line-height: 1; color: var(--c);
}
.fase:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 3.35rem; bottom: .35rem; width: 1px; background: var(--c); opacity: .45; }
.fase h3 { padding-top: .2rem; font-size: 1.75rem; line-height: 1.1; }
.fase p { color: var(--crema-suave); }

/* Datos prácticos */
.datos { display: grid; margin: 2.5rem 0 0; border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 48rem) { .datos { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.dato { padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--linea-fuerte); }
.dato dt { font-size: .875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.dato dd { margin: .35rem 0 0; font-size: 1.1875rem; line-height: 1.5; color: var(--crema); }
.dato .hora-local, .dato .precio__local { margin-top: .6rem; }
.dato .precio__local { font-size: 1rem; color: var(--crema-suave); }
.dato .precio__local strong { color: var(--crema); }
.datos__nota { margin-top: 1.5rem; max-width: 40rem; font-size: 1.0625rem; color: var(--crema-suave); }

/* Libro dibujado (hasta tener la cubierta real) */
.proximo { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 48rem) { .proximo { grid-template-columns: auto 1fr; gap: 4rem; } }
.libro {
  position: relative; justify-self: center; width: 11.5rem; aspect-ratio: 2 / 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55rem;
  padding: 1.5rem 1.1rem 1.5rem 1.6rem; border-radius: 2px 5px 5px 2px; text-align: center;
  background-color: #2F2924;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .1) 6%, rgba(255, 255, 255, .07) 9%, rgba(255, 255, 255, 0) 15%);
  box-shadow: var(--sombra-3); color: var(--crema);
}
.libro::after { content: ""; position: absolute; inset: .7rem .6rem .7rem 1.15rem; border: 1px solid var(--c); opacity: .7; pointer-events: none; }
.libro__pre { font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--c); }
.libro__titulo { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.05; }
.libro__autor { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--crema-suave); }
.libro__nota { position: absolute; left: 0; right: 0; bottom: -2rem; font-size: .875rem; color: var(--crema-suave); text-align: center; }

/* Llamada final */
.llamada {
  display: grid; gap: 1.75rem; padding: 2rem 1.5rem 2.1rem;
  border: 1px solid var(--linea-fuerte); border-top: 3px solid var(--c); border-radius: 4px;
  background-color: var(--fondo-2); box-shadow: var(--sombra-2);
}
@media (min-width: 56rem) { .llamada { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3.5rem; padding: 3rem; } }
.llamada__titulo { font-size: clamp(2.3rem, 7vw, 3.3rem); }
.llamada__texto > p:not(.antetitulo) { margin-top: .9rem; max-width: 30rem; font-size: 1.1875rem; color: var(--crema-suave); }
.llamada .lista { margin-top: 0; }
.llamada .cabeza__botones { margin-top: 1.6rem; }

/* Sobre mí: lo que hago */
.proyectos { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .proyectos { grid-template-columns: 1fr 1fr; } }
.proyecto {
  position: relative; display: grid; align-content: start; gap: .4rem; padding: 1.35rem 1.4rem 1.45rem;
  border: 1px solid var(--linea); border-left: 3px solid var(--c); border-radius: 4px;
  background-color: var(--fondo-tarjeta); box-shadow: var(--sombra-2);
  color: var(--crema); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.proyecto--taller { --c: var(--c-taller); }
.proyecto--club { --c: var(--c-club); }
.proyecto--fabularium { --c: var(--c-fabularium); }
.proyecto--laboratorio { --c: var(--c-laboratorio); }
.proyecto h3 { font-size: 1.85rem; color: var(--c); }
.proyecto p { color: var(--crema-suave); }
.proyecto__ir { margin-top: .35rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (hover: hover) { .proyecto:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); } }

.contacto { display: grid; gap: .9rem; margin-top: 2rem; }
.contacto p { font-size: 1.125rem; color: var(--crema-suave); }
.contacto a { font-size: 1.375rem; font-weight: 700; color: var(--crema); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: .25em; overflow-wrap: anywhere; }

/* ---------- Portada: más presencia del color de cada tarjeta ---------- */
.extra { border-top-width: 4px; }
.extra__img { border-bottom: 2px solid var(--c); }
.extra__estado { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.extra__estado .etiqueta { margin-bottom: .15rem; padding: .15rem .45rem; font-size: .75rem; letter-spacing: .07em; }

/* Donde el navegador sabe mezclar colores, tintes suaves del color de cada sección */
@supports (background-color: color-mix(in srgb, red 10%, blue)) {
  .extra {
    border-color: color-mix(in srgb, var(--c) 32%, transparent); border-top-color: var(--c);
    background-color: color-mix(in srgb, var(--c) 7%, var(--fondo-tarjeta));
  }
  @media (hover: hover) { .extra:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); border-top-color: var(--c); } }
  .lamina--completa, .lamina--retrato { outline-color: color-mix(in srgb, var(--c) 70%, transparent); }
  .modo { border-color: color-mix(in srgb, var(--c) 26%, transparent); border-top-color: var(--c); background-color: color-mix(in srgb, var(--c) 5%, var(--fondo-tarjeta)); }
  .chips .chip--ahora { background: color-mix(in srgb, var(--c) 14%, transparent); }
  .libro { background-color: color-mix(in srgb, var(--c) 30%, #1D1915); }
  .llamada { border-color: color-mix(in srgb, var(--c) 38%, transparent); border-top-color: var(--c); background-color: color-mix(in srgb, var(--c) 7%, var(--fondo-2)); }
  .proyecto { border-color: color-mix(in srgb, var(--c) 26%, transparent); border-left-color: var(--c); background-color: color-mix(in srgb, var(--c) 6%, var(--fondo-tarjeta)); }
  .voz { background: color-mix(in srgb, var(--c) 7%, transparent); }
}
.texto--tras-pasos { margin-top: 2.5rem; }
.dato .hora-local { font-size: 1rem; }
.pie__correo { margin-top: .8rem; }

/* =====================================================================
   Segunda ronda (3 nov 2026)
   ===================================================================== */

/* ---------- El nombre del taller, todo con la misma letra ----------
   En el móvil va en dos líneas («Taller de» / «Análisis de Cuentos»), porque en una
   no cabe junto al botón y el menú; donde hay sitio, en una sola. */
.marca { gap: .08rem; }
.marca__pre { font-family: var(--display); font-style: normal; font-weight: 700; font-size: 1.375rem; color: var(--crema); }
@media (max-width: 23.5rem) { .marca__pre { font-size: 1.1875rem; } }
@media (min-width: 30rem) { .marca { flex-direction: row; gap: .28em; } }
.pie .marca { flex-direction: row; flex-wrap: wrap; gap: 0 .28em; }

/* ---------- Veladura: cada página toma un velo suave de su color ----------
   Como un papel de seda del color de la página sobre el fondo oscuro, más intenso
   detrás de la lámina y disolviéndose hacia abajo. Sobre mí lleva un velo crema. */
.pagina--taller { --velo: var(--c-taller); }
.pagina--club { --velo: var(--c-club); }
.pagina--fabularium { --velo: var(--c-fabularium); }
.pagina--laboratorio { --velo: var(--c-laboratorio); }
.pagina--sobre-mi { --velo: var(--crema); --velo-fondo: 9%; --velo-honda: 13%; --velo-cabeza: 16%; }
@supports (background-color: color-mix(in srgb, red 10%, blue)) {
  body.pagina { background-color: color-mix(in srgb, var(--velo) var(--velo-fondo, 7%), var(--fondo)); }
  .pagina .seccion--honda { background-color: color-mix(in srgb, var(--velo) var(--velo-honda, 12%), var(--fondo-2)); }
  .pagina .cabecera { background-color: color-mix(in srgb, color-mix(in srgb, var(--velo) var(--velo-fondo, 7%), var(--fondo)) 92%, transparent); }
  .pagina .menu-movil { background-color: color-mix(in srgb, var(--velo) var(--velo-fondo, 7%), var(--fondo)); }
  .pagina .cabeza { background-image: radial-gradient(ellipse 75% 55% at 50% 48%, color-mix(in srgb, var(--velo) var(--velo-cabeza, 22%), transparent), transparent 75%); }
  @media (min-width: 56rem) {
    .pagina .cabeza { background-image: radial-gradient(ellipse 50% 80% at 26% 50%, color-mix(in srgb, var(--velo) var(--velo-cabeza, 22%), transparent), transparent 78%); }
  }
}

/* ---------- Portada: el contador que crece cada jueves ---------- */
.contador { display: flex; align-items: center; gap: .65rem; margin-top: 1.6rem; font-size: 1.0625rem; line-height: 1.35; color: var(--crema-suave); }
.contador strong { color: var(--crema); }
.contador__punto { position: relative; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--naranja); }
.contador__punto::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--naranja); opacity: 0; animation: latido 2.6s ease-out infinite; }
@keyframes latido { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .contador__punto::after { animation: none; } }

/* ---------- Portada: fichero de cuentos analizados que van pasando ---------- */
.incluye--fichero { align-items: center; }
.fichero { width: 100%; max-width: 20rem; margin-inline: auto; }
.fichero__rotulo { margin-bottom: 1.9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--crema-suave); }
.fichero__pila { display: grid; padding-inline: .4rem; }
.fichero__pila::before, .fichero__pila::after { content: ""; grid-area: 1 / 1; border-radius: 3px; box-shadow: var(--sombra-2); }
.fichero__pila::before { background: #D8CBB4; transform: translate(-.55rem, -.6rem) rotate(-3.5deg); }
.fichero__pila::after { background: #E5DAC6; transform: translate(.5rem, -.3rem) rotate(2.5deg); }
.fichero__ficha {
  grid-area: 1 / 1; position: relative; z-index: 1; padding: 1.1rem 1.25rem 1.2rem; border-radius: 3px;
  background-color: var(--papel);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1.6rem, rgba(42, 34, 28, .06) 1.6rem, rgba(42, 34, 28, .06) calc(1.6rem + 1px));
  color: var(--tinta); box-shadow: var(--sombra-3);
  opacity: 0; visibility: hidden; transform: translateY(.35rem);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.fichero__ficha.activa { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fichero__tipo { padding-bottom: .45rem; border-bottom: 1.5px solid rgba(148, 72, 31, .6); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-oscuro); }
.fichero__titulo { margin-top: .75rem; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--tinta); }
.fichero__autor { margin-top: .2rem; font-size: 1rem; color: var(--tinta-suave); }
.fichero__vimos { margin-top: .8rem; padding-top: .55rem; border-top: 1px solid var(--linea-papel); font-size: .9375rem; line-height: 1.45; color: var(--tinta); }
.fichero__vimos span { display: block; margin-bottom: .1rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.fichero__puntos { display: flex; justify-content: center; gap: .15rem; margin-top: 1.1rem; }
.fichero__punto { position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.fichero__punto::before { content: ""; position: absolute; top: 50%; left: 50%; width: .45rem; height: .45rem; border-radius: 999px; background: rgba(239, 228, 209, .3); transform: translate(-50%, -50%); transition: width .25s ease, background-color .25s ease; }
.fichero__punto[aria-current="true"]::before { width: 1.2rem; background: var(--crema); }

/* ---------- Qué miramos en cada cuento, y los géneros ---------- */
.incluye__pie { display: grid; gap: 2.75rem; margin-top: 3.75rem; padding-top: 2.75rem; border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 60rem) { .incluye__pie { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.subtitulo { font-family: var(--display); font-weight: 600; font-size: 1.9rem; line-height: 1.1; color: var(--crema); }
.miramos { margin-top: 1rem; max-width: 34rem; font-family: var(--display); font-size: 1.5rem; line-height: 1.5; color: var(--crema); text-wrap: pretty; }
.miramos .sep { padding-inline: .2em; color: var(--naranja); }
.pagina .miramos .sep { color: var(--c); }
.miramos em { color: var(--crema-suave); }
.chips--pequenas { margin-top: 1.25rem; }
.chips--pequenas li { padding: .35rem .75rem; font-size: 1rem; }
.chips__grupo { margin-top: 1.4rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crema-suave); }
.chips__grupo + .chips { margin-top: .7rem; }

/* ---------- Taller: las guías, como cuadernos ---------- */
.guias__texto { margin-top: .9rem; max-width: 32rem; font-size: 1.1875rem; color: var(--crema-suave); }
.cuadernos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.6rem; max-width: 24rem; }
@media (min-width: 40rem) { .cuadernos { grid-template-columns: repeat(4, 1fr); max-width: 36rem; } }
.cuaderno {
  position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-start;
  padding: 1.75rem .85rem .95rem 1.15rem; border-radius: 2px 4px 4px 2px;
  background-color: var(--papel); background-image: linear-gradient(90deg, rgba(42, 34, 28, .16) 0, rgba(42, 34, 28, 0) 9%);
  color: var(--tinta); box-shadow: var(--sombra-2);
}
.cuaderno::before { content: ""; position: absolute; top: 1rem; left: 1.15rem; right: .85rem; height: 3px; background: var(--c, var(--naranja)); }
.cuaderno__tipo { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja-oscuro); }
.cuaderno__titulo { margin-top: .2rem; font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.05; color: var(--tinta); }

/* ---------- Sobre mí: la tarjeta de los retos ocupa todo el ancho ---------- */
.proyecto--retos { --c: var(--crema); }
@media (min-width: 48rem) { .proyecto--retos { grid-column: 1 / -1; } }
.cuaderno::after { content: "Taller de Análisis de Cuentos"; position: absolute; left: 1.15rem; right: .85rem; bottom: .75rem; font-family: var(--display); font-style: italic; font-size: .8125rem; line-height: 1.15; color: var(--tinta-suave); }
@media (max-width: 39.99rem) { .cuadernos { max-width: 19rem; } }

/* =====================================================================
   Tercera ronda (3 nov 2026, tarde)
   ===================================================================== */

/* Los saltos dentro de la página se hacen de golpe, sin arrastre */
html { scroll-behavior: auto; }

/* ---------- Portada: lo que incluye el taller, en rejilla ---------- */
.incluye__items { display: grid; margin: 3.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 40rem) { .incluye__items { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.incluye__item { padding: 1.35rem 0 1.45rem; border-bottom: 1px solid var(--linea-fuerte); }
.incluye__item h3 { font-size: 1.6rem; line-height: 1.1; }
.incluye__item h3::before { content: ""; display: block; width: 1.6rem; height: 2px; margin-bottom: .8rem; border-radius: 2px; background: var(--naranja); }
.incluye__item p { margin-top: .45rem; font-size: 1.0625rem; color: var(--crema-suave); }
.incluye__aparte { margin-top: 1.6rem; font-size: 1.0625rem; color: var(--crema-suave); }
.incluye__aparte strong { color: var(--crema); }

/* ---------- Portada: cuatro tarjetas ---------- */
.extra--taller { --c: var(--c-taller); }
@media (min-width: 48rem) { .extras--cuatro { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Tarjeta de suscripción, igual en todas las páginas ---------- */
.precio__marca { margin-bottom: .7rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja-oscuro); }
.precio__intro { max-width: 34rem; text-align: center; font-size: 1.1875rem; color: var(--crema-suave); }
.pagina .precio__titulo::before { margin-inline: auto; }
.pagina .precio__tarjeta .lista li::before { background: var(--naranja-oscuro); }
.pagina .precio__tarjeta .hora-local svg { color: var(--naranja-oscuro); }

/* ---------- Taller por dentro: seis pasos ---------- */
@media (min-width: 56rem) {
  .pasos--seis { grid-template-columns: repeat(3, 1fr); }
  .pasos--seis .paso:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .pasos--seis .paso:nth-child(n + 4) { border-top: 1px solid var(--linea-fuerte); }
}

/* ---------- Taller por dentro: la pirámide invertida del análisis ---------- */
.piramide { display: grid; justify-items: center; gap: .55rem; margin: 2.75rem 0 0; padding: 0; list-style: none; }
.capa { width: 100%; padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--linea-fuerte); border-radius: 4px; text-align: center; background: rgba(210, 129, 79, .06); }
.capa:nth-child(2) { width: 90%; background: rgba(210, 129, 79, .11); }
.capa:nth-child(3) { width: 80%; background: rgba(210, 129, 79, .17); }
@media (min-width: 48rem) { .capa:nth-child(2) { width: 82%; } .capa:nth-child(3) { width: 64%; } }
.capa__num { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--naranja)); }
.capa h3 { margin-top: .3rem; font-size: 1.9rem; }
.capa p:not(.capa__num) { max-width: 40rem; margin: .5rem auto 0; color: var(--crema-suave); }
.piramide__pie { margin-top: 2.25rem; text-align: center; font-size: 1.125rem; color: var(--crema-suave); }
.cita--centrada { margin: .9rem auto 0; padding: 0; border: 0; text-align: center; }

/* ---------- Taller por dentro: las guías como lomos en una estantería ---------- */
.estanteria {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .45rem .4rem;
  margin-top: 2.5rem; padding: 0 .6rem; border-bottom: 8px solid #3A2E26;
  box-shadow: 0 12px 14px -12px rgba(0, 0, 0, .8);
}
.lomo {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 2.75rem; height: var(--alto, 13rem); padding: 0 0 .9rem;
  border-radius: 2px 2px 0 0; background-color: var(--lomo, #5C4433);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .28) 100%);
}
.lomo::before, .lomo::after { content: ""; position: absolute; left: .4rem; right: .4rem; height: 2px; background: rgba(243, 233, 215, .5); }
.lomo::before { top: .7rem; }
.lomo::after { top: 1.05rem; }
.lomo span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1; white-space: nowrap; color: #F3E9D7; }
@media (min-width: 40rem) { .estanteria { gap: .4rem .5rem; } .lomo { width: 3.2rem; } .lomo span { font-size: 1.2rem; } }
.estanteria__pie { margin-top: 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crema-suave); }

/* ---------- Taller por dentro: los autores en collage, de fondo ---------- */
.autores-collage { position: relative; overflow: hidden; }
.collage {
  position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: .3rem 1.6rem; padding: 1.5rem; pointer-events: none; user-select: none;
}
.collage span { font-family: var(--display); line-height: 1.15; white-space: nowrap; color: var(--crema); }
.collage .t1 { font-size: clamp(2.2rem, 7vw, 4.2rem); font-weight: 600; }
.collage .t2 { font-size: clamp(1.8rem, 5vw, 3rem); font-style: italic; }
.collage .t3 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
.collage .t4 { font-size: clamp(1.25rem, 3vw, 1.7rem); font-style: italic; }
.collage .o1 { opacity: .16; }
.collage .o2 { opacity: .11; }
.collage .o3 { opacity: .07; }
.autores-collage .contenedor { position: relative; z-index: 1; display: grid; place-items: center; min-height: 24rem; }
.autores__caja { max-width: 32rem; padding: 2rem 1.75rem 2.1rem; border: 1px solid var(--linea-fuerte); border-radius: 4px; text-align: center; background: rgba(26, 23, 20, .82); box-shadow: var(--sombra-3); }
.autores__caja .seccion__titulo { max-width: none; }
.pagina .autores__caja .seccion__titulo::before { margin-inline: auto; }
.autores__caja p { margin-top: 1rem; font-size: 1.1875rem; color: var(--crema-suave); }

/* ---------- Club: tres maneras de leer ---------- */
@media (min-width: 60rem) { .modos--tres { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Fabularium: la convocatoria ---------- */
.convocatoria { display: grid; gap: 2rem; padding: 2rem 1.5rem; border: 1px solid var(--linea-fuerte); border-top: 3px solid var(--c); border-radius: 4px; background-color: var(--fondo-tarjeta); box-shadow: var(--sombra-2); }
@media (min-width: 60rem) { .convocatoria { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; padding: 2.75rem 3rem; align-items: start; } }
.sello { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; padding: .35rem .8rem; border: 1px solid var(--c); border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.sello::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.convocatoria .seccion__titulo { max-width: 18ch; }
.convocatoria__texto { margin-top: 1rem; max-width: 36rem; font-size: 1.1875rem; color: var(--crema-suave); }
.datos--una { margin-top: 0; }
@media (min-width: 48rem) { .datos--una { grid-template-columns: 1fr; } }

/* ---------- Laboratorio: cómo entrar ---------- */
.llamada__aparte { padding: 1.4rem 1.4rem 1.5rem; border: 1px dashed var(--linea-fuerte); border-radius: 4px; }
.llamada__aparte-titulo { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: var(--crema); }
.llamada__aparte p:not(.llamada__aparte-titulo) { margin: .5rem 0 1.1rem; color: var(--crema-suave); }

@supports (background-color: color-mix(in srgb, red 10%, blue)) {
  .convocatoria { border-color: color-mix(in srgb, var(--c) 30%, transparent); border-top-color: var(--c); background-color: color-mix(in srgb, var(--c) 7%, var(--fondo-tarjeta)); }
  .autores__caja { background: color-mix(in srgb, color-mix(in srgb, var(--velo, var(--fondo)) 7%, var(--fondo)) 84%, transparent); }
}
.precio__permanencia { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linea-papel); font-size: 1.0625rem; color: var(--tinta); }
/* Cabecera del ordenador: con «El taller por dentro», el menú sigue cabiendo en una línea */
@media (min-width: 72rem) {
  .marca { flex: none; }
  .marca__pre { white-space: nowrap; }
  .nav__lista { gap: 1.15rem; }
  .nav__enlace { font-size: 1rem; white-space: nowrap; }
}

/* Menú: «El taller por dentro» es un enlace, y la flecha de al lado abre sus secciones */
.nav__desplegable { display: flex; align-items: center; gap: .2rem; }
.nav__abrir { display: inline-flex; align-items: center; padding: .45rem .1rem; border: 0; background: none; color: var(--crema); cursor: pointer; }
.mm-fila { display: flex; align-items: center; border-bottom: 1px solid var(--linea); }
.mm-fila .mm-enlace { flex: 1; border-bottom: 0; }
.mm-abrir { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 3rem; min-height: 3rem; padding: 0; border: 0; background: none; color: var(--crema); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mm-abrir .chevron { transition: transform .2s ease; }
.mm-abrir[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.mm-sub[hidden] { display: none; }
.mm-grupo.actual .mm-enlace { color: var(--c); }
.pie__redes a { overflow-wrap: anywhere; }

/* Enlace de texto al final de «Todo lo que incluye el taller» */
.incluye__enlace { margin-top: 2.25rem; }
.enlace-raya { font-size: 1.1875rem; font-weight: 700; color: var(--crema); text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: .25em; transition: color .15s ease; }
.enlace-raya:hover { color: var(--naranja); }
.precio__tarjeta .lista { margin-top: 1.4rem; }

/* Laboratorio: el correo escrito en el texto, que no se salga en el móvil */
.llamada__texto p a { overflow-wrap: anywhere; }
.llamada__aparte .boton { margin-top: 1rem; }

/* Fabularium: el lema bajo el título y la portada de la antología */
.cabeza__lema { margin-top: .7rem; font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.15; color: var(--c); }
.portada-libro { width: 100%; max-width: 15rem; margin: 0 auto; }
.portada-libro img { display: block; width: 100%; height: auto; border-radius: 2px 4px 4px 2px; box-shadow: var(--sombra-3); outline: 1px solid var(--linea-fuerte); outline-offset: 7px; }
@supports (color: color-mix(in srgb, red, blue)) { .portada-libro img { outline-color: color-mix(in srgb, var(--c) 70%, transparent); } }
@media (min-width: 48rem) { .portada-libro { width: 17rem; max-width: none; margin: 0; } }

/* Géneros con guía: etiquetas con borde de color, en los colores de la web */
.generos { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.25rem 0 0; padding: 0; border: 0; list-style: none; }
.generos li {
  --g: var(--c-taller);
  padding: .5rem .85rem; border: 1px solid var(--g); border-radius: 3px;
  background: rgba(239, 228, 209, .03);
  font-size: .9375rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--g);
}
@supports (color: color-mix(in srgb, red, blue)) { .generos li { background: color-mix(in srgb, var(--g) 9%, transparent); } }
.generos li:nth-child(4n+2) { --g: var(--c-club); }
.generos li:nth-child(4n+3) { --g: var(--c-fabularium); }
.generos li:nth-child(4n+4) { --g: var(--c-laboratorio); }
.generos + .estanteria__pie { margin-top: 1.1rem; }

/* Aviso de lo que pasa después de pagar, al pie de la tarjeta */
.precio__acceso { margin-top: .85rem; font-size: .9375rem; line-height: 1.45; text-align: center; color: var(--tinta-suave); }
.precio__acceso a { color: var(--tinta); overflow-wrap: anywhere; }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { border-top: 1px solid var(--linea-fuerte); }
.pregunta { border-bottom: 1px solid var(--linea-fuerte); }
.pregunta > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0;
  font-family: var(--display); font-size: 1.45rem; line-height: 1.2; color: var(--crema);
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary .chevron { flex: none; color: var(--c); transition: transform .2s ease; }
.pregunta[open] > summary .chevron { transform: rotate(180deg); }
@media (hover: hover) { .pregunta > summary:hover { color: var(--c); } }
.pregunta__respuesta { max-width: 40rem; padding: 0 0 1.4rem; color: var(--crema-suave); }
.pregunta__respuesta p + p, .pregunta__respuesta p + ul, .pregunta__respuesta ul + p { margin-top: .65rem; }
.pregunta__respuesta a { color: var(--crema); text-decoration-color: var(--c); overflow-wrap: anywhere; }
.pregunta__horas { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.pregunta__horas strong { font-weight: 700; color: var(--crema); }

/* Aviso legal y privacidad */
.pagina--legal { --c: var(--c-taller); --velo: var(--c-taller); }
.texto--legal > h3 { margin-top: 2.25rem; font-size: 1.375rem; line-height: 1.2; }
.texto--legal > h3 + p { margin-top: .6rem; }
.texto--legal > .legal__fecha { font-size: 1rem; font-style: italic; }
.texto--legal a { font-weight: 700; color: var(--crema); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: .25em; overflow-wrap: anywhere; }

/* Página de «no existe» */
.pagina--404 { --c: var(--c-taller); --velo: var(--c-taller); }
.no-existe__botones { margin-top: 2rem; }