/* Tu Potencial Femenino · páginas de episodios
   Complementa estilos.css de la maqueta. Usa solo sus colores, tipografías y componentes. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- listado de episodios ---------- */
.lista-episodios { padding-bottom: clamp(64px, 8vw, 112px); }
.buscador { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.buscador input {
  flex: 1 1 280px; padding: 14px 20px; border: 1.5px solid var(--negro); border-radius: 999px;
  background: var(--blanco); font: inherit; font-size: 16px; color: var(--negro);
}
.buscador input:focus { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.buscador .contador { color: var(--gris); }
.filtros--episodios { align-items: center; }
.filtros .separador { width: 1px; height: 22px; background: var(--linea); margin: 0 6px; flex: none; }
.grilla-episodios { margin-top: clamp(32px, 4vw, 48px); row-gap: 48px; }
.ep-item > .tarjeta { height: 100%; }
.sin-resultados { color: var(--gris); padding: 32px 0; }

/* ---------- página de episodio ---------- */
.ep-cabeza { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); }
.ep-volver { display: inline-block; margin-bottom: clamp(24px, 3vw, 36px); text-decoration: none; }
.ep-volver:hover { text-decoration: underline; }
.ep-cabeza h1 { font-size: clamp(32px, 4vw, 54px); margin: 14px 0 10px; }
.ep-invitada { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.8vw, 23px); margin: 0 0 4px; }
.ep-descripcion { border-top: 1px solid var(--linea); }
.ep-descripcion .art-cuerpo { padding-top: clamp(32px, 5vw, 56px); font-size: 18px; }
.ep-descripcion .etiqueta { margin-bottom: 20px; }
.ep-descripcion .art-cuerpo { overflow-wrap: anywhere; }

/* ---------- revisión de categorías ---------- */
.revision { padding-bottom: 96px; }
.rev-barra { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 16px 0; border-top: 1.5px solid var(--negro); position: sticky; top: 72px; background: var(--paper); z-index: 10; }
.rev-check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.rev-check input { width: 18px; height: 18px; accent-color: var(--negro); }
.rev-estado { color: var(--gris); text-transform: none; letter-spacing: 0; }
#cambios { width: 100%; min-height: 120px; font-family: var(--f-mono); font-size: 13px; padding: 12px; border: 1.5px solid var(--negro); border-radius: 12px; margin-bottom: 16px; }
.rev-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.rev-tabla th { text-align: left; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 10px 8px; border-bottom: 1.5px solid var(--negro); }
.rev-tabla td { padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.rev-tabla td:first-child { white-space: nowrap; color: var(--gris); }
.rev-tabla td a { font-weight: 600; text-decoration: none; }
.rev-tabla td a:hover { text-decoration: underline; }
.rev-inv { color: var(--gris); font-size: 14px; }
.rev-tabla select { font: inherit; font-size: 15px; padding: 7px 10px; border: 1.5px solid var(--negro); border-radius: 10px; background: var(--blanco); }
.rev-tabla tr.duda td { background: rgba(251, 230, 155, .55); }
.rev-tabla tr.cambiada td { background: rgba(105, 189, 163, .3); }

@media (max-width: 720px) {
  .filtros .separador { display: none; }
  .ep-cabeza h1 { font-size: 24px; line-height: 1.1; margin: 8px 0 16px; }
  .rev-tabla td:first-child { white-space: normal; }
  .rev-tabla select { max-width: 130px; }
}
@media (max-width: 720px) {
  .rev-tabla { table-layout: fixed; }
  .rev-tabla th:first-child { width: 58px; }
  .rev-tabla th:last-child { width: 132px; }
  .rev-tabla td { overflow-wrap: anywhere; }
}

/* ---------- Book Club: libros recomendados por la comunidad (queleemos.html) ---------- */
.libros-cabeza { padding-bottom: 8px; }
.libros-cabeza h1 { margin: 14px 0 18px; max-width: 14em; }
.libros-cabeza .bajada { max-width: 38em; margin-bottom: 28px; }
.libros-lista { padding-top: 32px; }
.libros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.libro { display: flex; flex-direction: column; gap: 8px; }
.libro img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.libro img.tapa-entera { object-fit: contain; background: #ebe7df; padding: 18px; }
.libro, .cine { scroll-margin-top: 110px; }   /* el enlace del correo de aviso no queda tapado por el menú */
.libro-sin-tapa { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 24px; margin-bottom: 8px; border-radius: 4px; background: var(--amarillo); font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1.05; text-align: center; }
.libro h3 { margin: 0; font-size: 22px; line-height: 1.15; }
.libro-autora { margin: 0; font-weight: 600; }
.libro p:not(.libro-autora) { margin: 4px 0 0; color: var(--gris); font-size: 15px; line-height: 1.55; }
.libro-quien { color: var(--gris); font-size: 11px; }
.libro-quien a { color: var(--negro); }
.libro-comprar { margin-top: auto; align-self: flex-start; }
.libros-aviso { margin: 48px 0 0; font-size: 13px; color: var(--gris); max-width: 46em; }
.contacto .opcional { text-transform: none; letter-spacing: 0; font-family: var(--f-texto); color: #a9a59d; }
.contacto input[type=file] { padding: 10px; font-size: 14px; }
@media (max-width: 960px) { .libros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .libros { grid-template-columns: 1fr; gap: 40px; } .libro img { aspect-ratio: 4/3; } }
.libro-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.libro-acciones button, .libro-acciones a { font: inherit; font-size: 13px; line-height: 1; padding: 9px 12px; border: 1.5px solid var(--negro); border-radius: 999px; background: transparent; color: var(--negro); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s; }
.libro-acciones button:hover, .libro-acciones a:hover { background: var(--blanco); }
.libro-acciones button[aria-pressed="true"] { background: var(--amarillo); }
.libro-acciones [data-accion="quiero"][aria-pressed="true"] { background: var(--celeste); }
.libro-n { font-family: var(--f-mono); font-size: 12px; }
.libro-n:empty { display: none; }

/* ---------- Cinéfilas (quevemos.html): sala de cine, fondo negro y cartelera que se desliza ---------- */
.cine-sala { background: var(--negro); color: var(--paper); padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.cine-sala .etiqueta { color: #d9d6cf; }
.cine-sala h1 { color: var(--blanco); margin: 14px 0 18px; }
.cine-punto { color: var(--amarillo); }
.cine-sala h1 .marca { --acento: var(--verde); }   /* misma franja angosta que «Qué leemos», en verde agua */
.cine-sala .bajada { color: #d9d6cf; max-width: 38em; margin-bottom: 28px; }
.cine-cartelera {   /* grilla de 3 columnas (como «Qué leemos»); de a 9 por bloque, con flechas si hay más */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px;
  max-width: 1200px; margin: clamp(40px, 6vw, 64px) auto 0; padding: 0 var(--gutter);
}
.cine[hidden] { display: none; }
.cine-cartelera:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 4px; }
.cine { display: flex; flex-direction: column; gap: 10px; }
.cine-poster {
  position: relative; aspect-ratio: 2 / 3; border-radius: 14px; padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--negro);
  box-shadow: 0 0 0 1.5px var(--negro), 0 18px 40px rgba(0, 0, 0, .45);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.cine-poster::before, .cine-poster::after {   /* perforaciones de rollo de película */
  content: ""; position: absolute; top: 14px; bottom: 14px; width: 6px;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .55) 0 8px, transparent 8px 18px); border-radius: 2px;
}
.cine-poster::before { left: 7px; }
.cine-poster::after { right: 7px; }
.cine:hover .cine-poster { transform: rotate(-1.2deg) translateY(-4px); }
.cine-poster--foto { padding: 0; overflow: hidden; background: #111; }
.cine-poster--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-poster--foto::before, .cine-poster--foto::after {   /* la cinta: franjas negras con perforaciones sobre la portada */
  z-index: 1; top: 0; bottom: 0; width: 18px; border-radius: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 6px, var(--negro) 6px 14px, transparent 14px 22px) center / 6px 100% no-repeat, var(--acento, var(--amarillo));
}
.cine-poster--foto::before { left: 0; }
.cine-poster--foto::after { right: 0; }
.cine-poster--foto { aspect-ratio: 2 / 3 !important; box-shadow: 0 0 0 1.5px var(--negro), 0 0 0 5px var(--acento, var(--amarillo)), 0 18px 40px rgba(0, 0, 0, .45); }
.cine-poster--foto .cine-tipo { position: absolute; z-index: 2; top: 14px; left: 26px; margin: 0; background: var(--acento, var(--amarillo)); }
.cine-acento--amarillo { --acento: var(--amarillo); }
.cine-acento--naranja { --acento: var(--naranja); }
.cine-acento--verde { --acento: var(--verde); }
.cine-acento--celeste { --acento: var(--celeste); }
.cine > .cine-datos { color: #a9a59d; margin: 6px 0 0; }
.cine-titulo { margin: 0; color: var(--blanco); font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.12; }
.cine-titulo .cine-sub { color: #a9a59d; font-size: 13px; margin-top: 4px; }
.cine-poster--amarillo { background: var(--amarillo); }
.cine-poster--naranja { background: var(--naranja); }
.cine-poster--verde { background: var(--verde); }
.cine-poster--celeste { background: var(--celeste); }
.cine-poster h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(30px, 3vw, 38px); line-height: .98; letter-spacing: -.02em; margin: 0; padding: 0 6px; }
.cine-sub { display: block; margin-top: 10px; font-family: var(--f-texto); font-weight: 500; font-size: 14px; line-height: 1.3; letter-spacing: 0; }
.cine-tipo { align-self: flex-start; margin-left: 6px; padding: 5px 10px; border: 1.5px solid var(--negro); border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .35); }
.cine-datos { margin-left: 6px; font-size: 11px; }
.cine-quien { color: #a9a59d; font-size: 11px; margin-top: 6px; }
.cine-quien a { color: var(--blanco); }
.cine p { margin: 0; color: #d9d6cf; font-size: 15px; line-height: 1.55; }
.cine-acciones { margin-top: auto; padding-top: 6px; }
.cine-acciones button, .cine-acciones a { color: var(--paper); border-color: rgba(255, 255, 255, .55); }
.cine-acciones button:hover, .cine-acciones a:hover { background: rgba(255, 255, 255, .12); }
.cine-acciones button[aria-pressed="true"] { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); }
.cine-acciones [data-accion="quiero"][aria-pressed="true"] { background: var(--celeste); border-color: var(--celeste); }
@media (max-width: 960px) { .cine-cartelera { grid-template-columns: repeat(2, 1fr); } }
.cine-form { border-top: 1px solid rgba(255, 255, 255, .18); }
/* Flechas entre bloques de 9 (aparecen solo si hay más de 9 títulos) */
.cine-paginas { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 48px; }
.cine-paginas[hidden] { display: none; }
.cine-pagina { color: #d9d6cf; font-size: 13px; letter-spacing: .06em; min-width: 4em; text-align: center; }
.cine-flecha { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); background: transparent; color: var(--blanco); font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.cine-flecha:hover:not(:disabled) { background: var(--verde); border-color: var(--verde); color: var(--negro); }
.cine-flecha:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.cine-flecha:disabled { opacity: .25; cursor: default; }
@media (max-width: 720px) {
  .cine-cartelera { grid-template-columns: 1fr; gap: 48px; }
  .cine-poster { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) { .cine-poster { transition: none; } .cine:hover .cine-poster { transform: none; } }
.cine-trailer { align-self: flex-start; margin: 4px 0 14px; }
.libros-paginas .cine-pagina { color: var(--gris); }
.libros-paginas .cine-flecha { border-color: var(--negro); color: var(--negro); }
.libros-paginas .cine-flecha:hover:not(:disabled) { background: var(--amarillo); border-color: var(--negro); color: var(--negro); }
.libros-paginas .cine-flecha:focus-visible { outline-color: var(--negro); }
.libro[hidden] { display: none; }