/* ============================================
   Clínica Blumm — Carteles de talleres
   --------------------------------------------
   Sección "Talleres" de la home, planteada como la cartelera de un
   cine: fondo oscuro con focos y, sobre él, un cartel por taller.

   CÓMO ESTÁ ORGANIZADO
   --------------------
   1. `.cine`   → la sala: fondo, focos y rejilla. Común a todos.
   2. `.cartel` → el chasis: proporción 2:3, sombra, hover, foco de
                  teclado. Común a todos. NO define colores ni
                  tipografía.
   3. `.cartel--<taller>` → la identidad de ESE taller: paleta, fuente,
                  composición. Cada uno es libre de verse distinto, como
                  los carteles de películas distintas en una cartelera.

   Para añadir un taller nuevo: se copia el marcado del cartel, se le
   pone otro modificador y se escribe su bloque al final. No hay que
   tocar nada de lo anterior.
   ============================================ */

/* ============================================
   1. LA SALA
   ============================================ */
.cine {
  position: relative;
  padding: 110px 0 120px;
  background:
    radial-gradient(70% 55% at 50% -5%, rgba(255, 255, 255, 0.10), transparent 72%),
    linear-gradient(180deg, #1d232e 0%, #141922 55%, #0f131a 100%);
  overflow: hidden;
}

/* Dos focos cruzados que caen sobre la cartelera. */
.cine::before,
.cine::after {
  content: '';
  position: absolute;
  top: -12%;
  width: 46%;
  height: 130%;
  pointer-events: none;
  opacity: 0.5;
}
.cine::before {
  left: 4%;
  background: radial-gradient(50% 42% at 50% 0%, rgba(47, 173, 214, 0.30), transparent 68%);
  transform: rotate(9deg);
}
.cine::after {
  right: 4%;
  background: radial-gradient(50% 42% at 50% 0%, rgba(255, 168, 120, 0.22), transparent 68%);
  transform: rotate(-9deg);
}

.cine .container {
  position: relative;
  z-index: 1;
}

.cine .section-title,
.cine .section-title span {
  color: var(--white);
}
.cine .section-subtitle {
  color: rgba(255, 255, 255, 0.72);
}

/* Rótulo tipo marquesina sobre el título */
.cine-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}
.cine-rotulo i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffcf5c;
  box-shadow: 0 0 10px 2px rgba(255, 207, 92, 0.7);
  animation: cine-bombilla 2.4s ease-in-out infinite;
}
@keyframes cine-bombilla {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* La cartelera. Con un solo cartel queda centrado bajo el foco; con
   varios se ordenan en fila sin tocar nada. El máximo (336px) es el
   que deja tres carteles por fila en el .container de 1140px
   (1092px útiles - 2 huecos de 40px = 3 × 337px). */
.cartelera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 336px));
  justify-content: center;
  gap: 40px;
  margin-top: 52px;
}

/* ============================================
   2. EL CHASIS DEL CARTEL
   ============================================ */
.cartel {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.14) inset,
    0 26px 60px rgba(0, 0, 0, 0.55);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cartel:hover {
  transform: translateY(-12px) scale(1.015);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 40px 80px rgba(0, 0, 0, 0.65);
}

.cartel:focus-visible {
  outline: 3px solid #ffcf5c;
  outline-offset: 5px;
}

/* Brillo de cristal que barre el cartel al pasar por encima. */
.cartel-brillo {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.16) 47%,
    rgba(255, 255, 255, 0.05) 52%,
    transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.cartel:hover .cartel-brillo { transform: translateX(100%); }

/* Chapa inferior "Ver el taller" */
.cartel-entrada {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 6;
  transform: translate(-50%, 130%);
  padding: 11px 26px;
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
}
.cartel:hover .cartel-entrada,
.cartel:focus-visible .cartel-entrada {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* La ilustración de fondo, común a cualquier cartel. */
.cartel-arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.cartel:hover .cartel-arte { transform: scale(1.05); }

/* Capa de contenido: siempre por encima del arte. */
.cartel-cuerpo {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 24px 30px;
}

/* ============================================
   3. IDENTIDAD — "Bailar para vivir mejor" (Danza-Teatro)
   --------------------------------------------
   Paleta y tipografía del cartel original de Aina Martín, las mismas
   que manda en talleres/danza-teatro.html: rojo #af0d02, crema
   #f8ecbc, coral #e86f44. El rojo de la foto es prácticamente ese
   mismo rojo, así que el velo inferior funde con ella sin costura.
   ============================================ */
.cartel--danza {
  /* Un único mando: hasta dónde llega la foto. El velo se funde justo
     ahí, así que al cambiarlo (p. ej. en móvil, donde el bloque de
     texto ocupa más proporción) no hay que retocar nada más. */
  --arte: 56%;
  background: #af0d02;
  font-family: 'Poppins', 'Nunito', sans-serif;
}

/* El arte ocupa la franja superior. Así la proporción del recuadro se
   acerca a la de la foto original y cabe el gesto entero (la mano
   alzada y la cara), en vez de recortar un primer plano cualquiera.
   La mitad inferior queda de rojo liso para la tipografía. */
.cartel--danza .cartel-arte {
  inset: 0 0 auto 0;
  height: var(--arte);
  object-position: 50% 44%;
}

/* Funde el borde inferior de la foto con el rojo del cartel: el fondo
   de la imagen ya es ese mismo #af0d02, así que no se ve la costura. */
.cartel--danza .cartel-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(175, 13, 2, 0.42) 0%,
    rgba(175, 13, 2, 0) 16%,
    rgba(175, 13, 2, 0) calc(var(--arte) - 18%),
    rgba(175, 13, 2, 0.9) calc(var(--arte) - 5%),
    #af0d02 var(--arte));
}

/* Puntos del cartel original */
.cartel--danza .cartel-puntos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cartel--danza .cartel-puntos span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #e86f44;
}
.cartel--danza .cartel-puntos span:nth-child(2) {
  background: none;
  border: 2px solid rgba(232, 111, 68, 0.85);
}
.cartel--danza .cartel-puntos span:nth-child(4) { background: #e1d46e; }

/* Franja de "género", como la etiqueta de una cartelera */
.cartel--danza .cartel-genero {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 4;
  padding: 6px 14px 6px 22px;
  background: #e86f44;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- Bloque tipográfico inferior --- */
.cartel--danza .cartel-cuerpo {
  padding: 24px 22px 24px;
}

/* Lema encima del título, como el claim de un cartel */
.cartel--danza .cartel-lema {
  display: block;
  font-size: 0.68rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #e1d46e;
  margin-bottom: 10px;
}

.cartel--danza .cartel-titulo {
  display: block;
  font-size: clamp(1.9rem, 2.4vw + 0.7rem, 2.35rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #f8ecbc;
  margin-bottom: 8px;
}

.cartel--danza .cartel-firma {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(248, 236, 188, 0.72);
  margin-bottom: 14px;
}
.cartel--danza .cartel-firma b {
  color: #f8ecbc;
  font-weight: 700;
}

/* Ficha técnica, en plan bloque de créditos */
.cartel--danza .cartel-ficha {
  display: block;
  padding-top: 12px;
  border-top: 1px solid rgba(248, 236, 188, 0.3);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(248, 236, 188, 0.6);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cartel--danza .cartel-ficha b {
  color: #e1d46e;
  font-weight: 800;
}
/* Al hacer hover la ficha se aparta y deja sitio a la chapa. */
.cartel--danza:hover .cartel-ficha {
  opacity: 0;
  transform: translateY(8px);
}

.cartel--danza .cartel-entrada {
  background: #f8ecbc;
  color: #af0d02;
}

/* ============================================
   4. IDENTIDAD — "Danzad niños, danzad" (Danza-Teatro infantil)
   --------------------------------------------
   Mismo taller, otro público y otra piel: verde #2d5147, crema #f3ebbd
   y el mismo coral. La foto ya viene sobre ese verde (está recortada
   del propio cartel), así que el velo funde sin costura igual que en
   el de adultos.
   ============================================ */
.cartel--ninos {
  --arte: 58%;
  background: #2d5147;
  font-family: 'Poppins', 'Nunito', sans-serif;
}

.cartel--ninos .cartel-arte {
  inset: 0 0 auto 0;
  height: var(--arte);
  object-position: 50% 34%;
}

.cartel--ninos .cartel-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(45, 81, 71, 0.40) 0%,
    rgba(45, 81, 71, 0) 16%,
    rgba(45, 81, 71, 0) calc(var(--arte) - 18%),
    rgba(45, 81, 71, 0.9) calc(var(--arte) - 5%),
    #2d5147 var(--arte));
}

.cartel--ninos .cartel-puntos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cartel--ninos .cartel-puntos span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #e76d43;
}
.cartel--ninos .cartel-puntos span:nth-child(2) {
  background: none;
  border: 2px solid rgba(231, 109, 67, 0.85);
}
.cartel--ninos .cartel-puntos span:nth-child(4) { background: #dbcb5a; }

.cartel--ninos .cartel-genero {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 4;
  padding: 6px 14px 6px 22px;
  background: #e76d43;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cartel--ninos .cartel-cuerpo {
  padding: 24px 22px 24px;
}

.cartel--ninos .cartel-lema {
  display: block;
  font-size: 0.68rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
  color: #dbcb5a;
  margin-bottom: 10px;
}

.cartel--ninos .cartel-titulo {
  display: block;
  font-size: clamp(1.9rem, 2.4vw + 0.7rem, 2.35rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #f3ebbd;
  margin-bottom: 8px;
}

.cartel--ninos .cartel-firma {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(243, 235, 189, 0.72);
  margin-bottom: 14px;
}
.cartel--ninos .cartel-firma b { color: #f3ebbd; font-weight: 700; }

.cartel--ninos .cartel-ficha {
  display: block;
  padding-top: 12px;
  border-top: 1px solid rgba(243, 235, 189, 0.3);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(243, 235, 189, 0.62);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cartel--ninos .cartel-ficha b { color: #dbcb5a; font-weight: 800; }
.cartel--ninos:hover .cartel-ficha { opacity: 0; transform: translateY(8px); }

.cartel--ninos .cartel-entrada {
  background: #f3ebbd;
  color: #2d5147;
}

/* ============================================
   5. IDENTIDAD — "¡Para un momento!" (Mindfulness, Noelia Faus)
   --------------------------------------------
   Nada de foto ni velo: el cartel original es papel azul #bfd7ea y
   rotulador negro. La figura en postura de árbol está recortada del
   propio cartel (PNG transparente) y asoma por la derecha, cortada por
   el borde como en el papel. Tipografías: Passion One (titular) y
   Sniglet (resto), las mismas que manda talleres/mindfulness.html.
   ============================================ */
.cartel--mindfulness {
  background: #bfd7ea;
  color: #111;
  font-family: 'Sniglet', 'Nunito', sans-serif;
  /* Halo del titular: donde la figura pasa por detrás, la letra la
     "muerde", igual que en el cartel. */
  --halo:
    2px 0 0 #bfd7ea, -2px 0 0 #bfd7ea, 0 2px 0 #bfd7ea, 0 -2px 0 #bfd7ea,
    2px 2px 0 #bfd7ea, -2px -2px 0 #bfd7ea, 2px -2px 0 #bfd7ea, -2px 2px 0 #bfd7ea,
    4px 0 0 #bfd7ea, -4px 0 0 #bfd7ea, 0 4px 0 #bfd7ea, 0 -4px 0 #bfd7ea;
}

/* Misma posición que en el papel: pegada al borde derecho (la imagen
   ya viene cortada por ahí) y del 4 % al 96 % del alto. */
.cartel--mindfulness .cartel-arte {
  inset: auto 0 4% auto;
  width: auto;
  height: 92%;
  object-fit: contain;
  transform-origin: 50% 100%;
}

.cartel--mindfulness .cartel-genero {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 4;
  padding: 6px 14px 6px 22px;
  background: #111;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.cartel--mindfulness .cartel-cuerpo {
  justify-content: flex-start;
  padding: 62px 22px 24px;
}

.cartel--mindfulness .cartel-titulo {
  display: block;
  font-family: 'Passion One', 'Nunito', sans-serif;
  font-size: clamp(2.7rem, 3vw + 1.3rem, 3.4rem);
  font-weight: 700;
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: var(--halo);
  margin-bottom: 12px;
}

.cartel--mindfulness .cartel-lema {
  display: block;
  max-width: 46%;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.15;
  text-shadow: var(--halo);
  margin-bottom: 10px;
}

.cartel--mindfulness .cartel-firma {
  display: block;
  font-size: 0.8rem;
  color: #3b4550;
  text-shadow: var(--halo);
}
.cartel--mindfulness .cartel-firma b { color: #111; font-weight: 400; }

/* Ficha abajo, con los mismos emojis que el cartel */
.cartel--mindfulness .cartel-ficha {
  display: block;
  margin-top: auto;
  max-width: 64%;
  font-size: 0.8rem;
  line-height: 1.7;
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cartel--mindfulness .cartel-ficha span {
  display: inline-block;
  background: rgba(191, 215, 234, 0.9);
  padding-right: 4px;
}
.cartel--mindfulness:hover .cartel-ficha { opacity: 0; transform: translateY(8px); }

.cartel--mindfulness .cartel-entrada {
  background: #111;
  color: #fff;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .cine { padding: 80px 0 90px; }
  .cartelera {
    grid-template-columns: minmax(0, 340px);
    gap: 32px;
    margin-top: 40px;
  }
  /* En táctil no hay hover: la chapa se queda siempre visible, así que
     el cuerpo le reserva sitio y la ficha ya no se aparta. */
  .cartel-entrada { transform: translate(-50%, 0); opacity: 1; }
  .cartel .cartel-cuerpo { padding-bottom: 76px; }
  .cartel--danza { --arte: 44%; }
  .cartel--ninos { --arte: 44%; }
  .cartel--danza:hover .cartel-ficha,
  .cartel--ninos:hover .cartel-ficha,
  .cartel--mindfulness:hover .cartel-ficha { opacity: 1; transform: none; }
}

@media (hover: none) {
  .cartel-entrada { transform: translate(-50%, 0); opacity: 1; }
  .cartel .cartel-cuerpo { padding-bottom: 76px; }
  .cartel--danza:hover .cartel-ficha,
  .cartel--ninos:hover .cartel-ficha,
  .cartel--mindfulness:hover .cartel-ficha { opacity: 1; transform: none; }
}

/* Con la chapa siempre visible el texto necesita más rojo debajo. */
@media (hover: none) and (min-width: 769px) {
  .cartel--danza,
  .cartel--ninos { --arte: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cartel,
  .cartel-arte,
  .cartel-brillo,
  .cartel-entrada,
  .cartel--danza .cartel-ficha,
  .cartel--ninos .cartel-ficha,
  .cartel--mindfulness .cartel-ficha {
    transition-duration: 0.001ms;
  }
  .cartel:hover { transform: none; }
  .cartel:hover .cartel-arte { transform: none; }
  .cine-rotulo i { animation: none; }
}

/* ============================================
   6. VARIANTE MINI — carteles fuera de la cartelera
   --------------------------------------------
   La ficha de un profesional (profesionales/aina-martin.html) también
   presenta sus talleres, y ahí queremos el mismo cartel que en la home,
   no un botón: misma identidad, tamaño de bolsillo y sobre fondo claro.

   `.cartelera--mini` toca solo la ESCALA, nunca la piel: los bloques
   `.cartel--<taller>` de arriba siguen mandando en color, tipografía y
   composición, así que un taller nuevo entra aquí sin escribir nada.

   En móvil el cartel se TUMBA (miniatura + texto al lado) para que dos
   talleres no se conviertan en dos pantallas de scroll.
   ============================================ */
.cartelera--mini {
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: start;
  gap: 22px;
  margin-top: 0;
}

/* Más pequeño = menos sombra y menos salto al pasar por encima. */
.cartelera--mini .cartel {
  border-radius: 5px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.14) inset,
    0 14px 34px rgba(0, 0, 0, 0.28);
}
.cartelera--mini .cartel:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.2) inset,
    0 22px 48px rgba(0, 0, 0, 0.34);
}

/* Aquí el cartel va sin lema ni firma (en la página de la propia
   profesional sobran), así que la foto puede quedarse con más sitio. */
.cartelera--mini .cartel--danza,
.cartelera--mini .cartel--ninos { --arte: 62%; }

.cartelera--mini .cartel-cuerpo { padding: 18px 16px 20px; }
.cartelera--mini .cartel-titulo { font-size: 1.45rem; }
.cartelera--mini .cartel-ficha {
  padding-top: 9px;
  font-size: 0.52rem;
  line-height: 1.7;
}
/* Mindfulness lleva el texto arriba, bajo la etiqueta, y su ficha no
   va en versalitas: necesita su propia escala. */
.cartelera--mini .cartel--mindfulness .cartel-cuerpo { padding-top: 46px; }
.cartelera--mini .cartel--mindfulness .cartel-titulo { font-size: 2.1rem; }
.cartelera--mini .cartel--mindfulness .cartel-ficha { font-size: 0.72rem; line-height: 1.6; }
.cartelera--mini .cartel-genero {
  top: 14px;
  padding: 5px 10px 5px 16px;
  font-size: 0.52rem;
}
.cartelera--mini .cartel-entrada {
  bottom: 14px;
  padding: 8px 18px;
  font-size: 0.66rem;
}

/* En táctil la chapa está siempre puesta: el cuerpo le deja hueco,
   menos que en la home porque aquí la chapa es más pequeña. */
@media (hover: none) {
  .cartelera--mini .cartel .cartel-cuerpo { padding-bottom: 56px; }
}

/* --- Móvil: el cartel se tumba --- */
@media (max-width: 700px) {
  .cartelera--mini {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .cartelera--mini .cartel {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 132px;
  }
  .cartelera--mini .cartel:hover { transform: none; }

  /* La foto deja de ser fondo y pasa a ser la primera columna. */
  .cartelera--mini .cartel-arte {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
  }

  /* Lo que solo tiene sentido sobre el cartel entero. */
  .cartelera--mini .cartel-velo,
  .cartelera--mini .cartel-puntos,
  .cartelera--mini .cartel-genero,
  .cartelera--mini .cartel-entrada { display: none; }

  .cartelera--mini .cartel .cartel-cuerpo {
    position: relative;
    inset: auto;
    justify-content: center;
    padding: 14px 16px;
  }
  .cartelera--mini .cartel-titulo {
    font-size: 1.25rem;
    line-height: 0.95;
  }
  .cartelera--mini .cartel-ficha { font-size: 0.5rem; }

  /* La figura de Mindfulness, en miniatura: manos y cabeza. */
  .cartelera--mini .cartel--mindfulness .cartel-arte {
    object-fit: cover;
    object-position: 20% 0;
  }
  .cartelera--mini .cartel--mindfulness .cartel-titulo { font-size: 1.6rem; }
  .cartelera--mini .cartel--mindfulness .cartel-ficha { max-width: none; font-size: 0.66rem; }
}