/* =============================================================================
 * Talleres empresariales
 *
 * Rejilla de tarjetas, una por taller, cada una con su color. El color NO codifica
 * ningún dato —no hay "más" ni "menos" entre un taller y otro—: sirve para que las
 * cinco se distingan de un vistazo y para dar identidad a cada ilustración.
 *
 * SOBRE EL FONDO DE LA ILUSTRACIÓN. El primer intento tiñó el panel mezclando el color
 * con negro (`color-mix(... 11%, #000)`). Eso no da profundidad: da barro — el ámbar
 * salía marrón sucio y el aguamarina, verde apagado. Aquí el panel es casi negro y el
 * color entra solo como un halo radial detrás del dibujo. El negro hace de contraste y
 * el color queda saturado donde importa, que es en la propia ilustración.
 * ========================================================================== */

.talleres {
  --taller-superficie: #0d0d0d;
  --taller-borde: rgba(255, 255, 255, 0.07);
}

/* --- Tarjeta --------------------------------------------------------------- */

.taller-card {
  /* Cada tarjeta fija su propio `--taller-color`; aquí solo el valor de reserva. */
  --taller-color: var(--at-primary, #4988c4);

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px;
  background: var(--taller-superficie);
  border: 1px solid var(--taller-borde);
  border-radius: 18px;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Filo superior del color: aparece al acercarse, como un subrayado que se enciende. */
.taller-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--taller-color),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.taller-card:hover,
.taller-card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--taller-color) 42%, transparent);
  box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--taller-color) 62%, transparent);
}

.taller-card:hover::before,
.taller-card:focus-within::before {
  opacity: 1;
}

.taller-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.taller-card__num {
  color: var(--taller-color);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.taller-card__duracion {
  color: color-mix(in srgb, var(--taller-color) 88%, #fff);
  background: color-mix(in srgb, var(--taller-color) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--taller-color) 24%, transparent);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Panel de la ilustración ----------------------------------------------- */

.taller-card__arte {
  position: relative;
  /* Negro de base + halo del color arriba. Ver la nota de la cabecera. */
  background:
    radial-gradient(
      118% 88% at 50% 8%,
      color-mix(in srgb, var(--taller-color) 30%, transparent),
      transparent 60%
    ),
    #070707;
  border: 1px solid color-mix(in srgb, var(--taller-color) 16%, transparent);
  border-radius: 14px;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Retícula tenue: da sensación de plano técnico sin competir con el dibujo. */
.taller-card__arte::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 70% at 50% 50%, #000 35%, transparent 78%);
}

.taller-card__arte svg {
  position: relative;
  width: 80%;
  height: auto;
  max-height: 88%;
}

/* --- Texto ----------------------------------------------------------------- */

.taller-card__area {
  color: var(--taller-color);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.taller-card__titulo {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 10px;
}

.taller-card__desc {
  color: var(--at-neutral-400, #9a9a9a);
  font-size: 15px;
  line-height: 1.55;
  /* `auto` empuja el enlace al fondo: con descripciones de distinto largo, las
     cinco tarjetas alinean su llamada a la acción a la misma altura. */
  margin-bottom: auto;
}

.taller-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--taller-color);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.taller-card__link svg {
  transition: transform 0.25s ease;
}

.taller-card:hover .taller-card__link svg,
.taller-card__link:focus-visible svg {
  transform: translate(4px, -4px);
}

/* =============================================================================
 * Movimiento de las ilustraciones
 *
 * Todo con CSS y solo sobre `transform` y `opacity`, que el navegador compone en la
 * GPU: cinco dibujos animados a la vez no le cuestan trabajo al hilo principal.
 *
 * Son bucles lentos y de recorrido corto a propósito. La ilustración acompaña, no
 * pide atención: si se mueve tanto que hay que mirarla, compite con el titular.
 * ========================================================================== */

/* 01 · El reloj corre. La aguja larga da la vuelta; la corta apenas se desplaza. */
@keyframes taller-girar {
  to { transform: rotate(360deg); }
}
.arte-aguja-min,
.arte-aguja-hora {
  transform-origin: 120px 80px;
  animation: taller-girar linear infinite;
}
.arte-aguja-min { animation-duration: 8s; }
.arte-aguja-hora { animation-duration: 96s; }

/* 02 · Los cuatro estilos respiran, cada uno a su ritmo: nunca están del todo alineados. */
@keyframes taller-latir {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.06); }
}
.arte-circulo {
  transform-origin: center;
  transform-box: fill-box;
  animation: taller-latir 6s ease-in-out infinite;
}
.arte-circulo:nth-of-type(1) { --dx: -3px; --dy: -3px; animation-delay: 0s; }
.arte-circulo:nth-of-type(2) { --dx: 3px; --dy: -3px; animation-delay: 1.5s; }
.arte-circulo:nth-of-type(3) { --dx: -3px; --dy: 3px; animation-delay: 3s; }
.arte-circulo:nth-of-type(4) { --dx: 3px; --dy: 3px; animation-delay: 4.5s; }

/* 03 · El tablero se llena: las barras suben y el anillo se dibuja. */
@keyframes taller-barra {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}
.arte-barra {
  transform-origin: bottom;
  transform-box: fill-box;
  animation: taller-barra 3.4s ease-in-out infinite;
}
.arte-barra:nth-of-type(1) { animation-delay: 0s; }
.arte-barra:nth-of-type(2) { animation-delay: 0.18s; }
.arte-barra:nth-of-type(3) { animation-delay: 0.36s; }
.arte-barra:nth-of-type(4) { animation-delay: 0.54s; }
.arte-barra:nth-of-type(5) { animation-delay: 0.72s; }
.arte-barra:nth-of-type(6) { animation-delay: 0.9s; }

@keyframes taller-anillo {
  0% { stroke-dashoffset: 151; }
  55%, 100% { stroke-dashoffset: 45; }
}
.arte-anillo {
  animation: taller-anillo 3.4s ease-out infinite;
}

@keyframes taller-trazo {
  0% { stroke-dashoffset: 200; }
  60%, 100% { stroke-dashoffset: 0; }
}
.arte-linea {
  stroke-dasharray: 200;
  animation: taller-trazo 3.4s ease-out infinite;
}

/* 04 · El flujo avanza: la línea discontinua corre de una caja a la siguiente. */
@keyframes taller-fluir {
  to { stroke-dashoffset: -32; }
}
.arte-flujo {
  stroke-dasharray: 4 4;
  animation: taller-fluir 1.6s linear infinite;
}

@keyframes taller-encender {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.arte-nodo { animation: taller-encender 4.2s ease-in-out infinite; }
.arte-nodo:nth-of-type(2) { animation-delay: 1.4s; }
.arte-nodo:nth-of-type(3) { animation-delay: 2.8s; }

/* 05 · El ciclo no para: los dos arcos giran, que es justo lo que dice el taller. */
.arte-ciclo {
  transform-origin: 120px 80px;
  animation: taller-girar 14s linear infinite;
}
@keyframes taller-orbita {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.28); opacity: 0.75; }
}
.arte-hito {
  transform-origin: center;
  transform-box: fill-box;
  animation: taller-orbita 3s ease-in-out infinite;
}
.arte-hito:nth-of-type(2) { animation-delay: 1s; }
.arte-hito:nth-of-type(3) { animation-delay: 2s; }

/* --- Diálogo del detalle --------------------------------------------------- */

/*
 * OJO CON LOS COLORES AQUÍ. El diálogo se monta en el <body>, fuera del contenedor del
 * sitio, y su fondo es oscuro SIEMPRE. Los tokens `--at-neutral-*` se invierten con el
 * tema, así que usarlos aquí pintaba el titular oscuro sobre oscuro. Dentro del diálogo
 * los colores van literales, que es la regla que ya seguía el resto del proyecto para
 * los fondos fijos.
 */
.taller-dialogo {
  /* El diálogo vive en el <body>, fuera de `.talleres-pag`: repite aquí el azul. */
  --p50-azul: #4988c4;
  --p50-azul-claro: #6ba4dc;

  /* `margin: auto` es lo que centra un <dialog> modal; sin esto se queda arriba a la
     izquierda en cuanto se le fija un ancho. */
  margin: auto;
  width: min(920px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--taller-color, #4988c4) 30%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(
      90% 40% at 50% 0%,
      color-mix(in srgb, var(--taller-color, #4988c4) 15%, transparent),
      transparent 70%
    ),
    #0d0d0d;
  color: #f4f4f4;
  overflow: hidden;
}

/* El titular y los textos del diálogo, con color propio: las clases del sitio
   (`.h3`, `.neutral-500`…) resuelven contra el tema y aquí no aplican. */
.taller-dialogo :is(h2, h3) {
  color: #ffffff;
}

.taller-dialogo p {
  color: #b9b9b9;
}

.taller-dialogo__destacado {
  color: #f4f4f4;
}

.taller-dialogo::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}

/* Entra desde abajo, corto y rápido: un modal que tarda molesta a la segunda vez. */
@keyframes taller-entrar {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.taller-dialogo[open] {
  animation: taller-entrar 0.24s ease-out;
}

.taller-dialogo__scroll {
  max-height: min(86vh, 900px);
  overflow-y: auto;
  padding: 30px;
}

.taller-dialogo__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--taller-borde, rgba(255, 255, 255, 0.07));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.taller-dialogo__cerrar:hover {
  border-color: var(--taller-color);
  color: var(--taller-color);
}

.taller-dialogo__bloque + .taller-dialogo__bloque {
  margin-top: 22px;
}

.taller-dialogo__rotulo {
  color: var(--taller-color);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.taller-dialogo__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.7;
  color: #c9c9c9;
}

.taller-dialogo__lista li {
  padding-left: 18px;
  position: relative;
}

.taller-dialogo__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--taller-color);
}

@media (max-width: 575.98px) {
  .taller-dialogo__scroll { padding: 20px; }
  .taller-card { padding: 18px; }

  /*
   * En pantalla estrecha el botón de cerrar se sienta encima del rótulo de área, que
   * es la línea más larga del bloque ("Eficiencia operativa y mejora continua"): la
   * última palabra se perdía debajo del círculo. Se le reserva su hueco solo aquí,
   * porque en escritorio la caja es ancha de sobra y la sangría se notaría.
   */
  .taller-dialogo__scroll > .taller-card__area {
    padding-right: 44px;
  }
}

/* =============================================================================
 * Quien haya pedido menos movimiento al sistema recibe la misma página, quieta.
 * No se esconde nada: los dibujos se ven en su posición de reposo.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .taller-card,
  .taller-card__link svg,
  .taller-card::before,
  .taller-dialogo__cerrar {
    transition: none;
  }
  .taller-card:hover,
  .taller-card:focus-within {
    transform: none;
  }
  .arte-aguja-min,
  .arte-aguja-hora,
  .arte-circulo,
  .arte-barra,
  .arte-anillo,
  .arte-linea,
  .arte-flujo,
  .arte-nodo,
  .arte-ciclo,
  .arte-hito,
  .taller-dialogo[open] {
    animation: none;
  }
  .arte-linea { stroke-dasharray: none; }
  .arte-nodo { opacity: 1; }
}

/* =============================================================================
 * Cabecera y cierre de la página
 *
 * El `.at-btn` del sitio es una píldora oscura: sobre el negro de esta página
 * desaparecía. Aquí el botón se llena con el azul de marca, que es el único color
 * que puede repetirse sin competir con los cinco de las tarjetas.
 * ========================================================================== */

.talleres-pag {
  --p50-azul: #4988c4;
  --p50-azul-claro: #6ba4dc;
}

/* --- Botón de acción -------------------------------------------------------- */

.taller-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--p50-azul-claro), var(--p50-azul));
  color: #06121d;
  font-size: 15.5px;
  font-weight: 700;
  /* `none` a propósito: `.at-btn` del sitio capitaliza cada palabra y en español
     eso daba "Escribir Al Experto". */
  text-transform: none;
  text-decoration: none;
  box-shadow: 0 14px 34px -16px rgba(73, 136, 196, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.taller-btn:hover,
.taller-btn:focus-visible {
  color: #06121d;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 20px 42px -16px rgba(73, 136, 196, 1);
}

.taller-btn svg {
  transition: transform 0.25s ease;
}

.taller-btn:hover svg {
  transform: translateX(4px);
}

/* --- Cabecera --------------------------------------------------------------- */

.talleres-hero__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--p50-azul-claro);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.talleres-hero__rotulo::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}

/* Tres datos que responden lo que todo el mundo pregunta antes de escribir:
   cuántos son, cuánto duran y si van a la empresa. */
.talleres-hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

.talleres-hero__dato strong {
  display: block;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
}

.talleres-hero__dato span {
  color: #8f8f8f;
  font-size: 13.5px;
}

/* --- Cierre ----------------------------------------------------------------- */

.talleres-cierre {
  position: relative;
  padding: 52px 44px;
  border: 1px solid rgba(73, 136, 196, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(95% 130% at 12% 0%, rgba(73, 136, 196, 0.2), transparent 62%),
    #0d0d0d;
  overflow: hidden;
}

/* Halo apagado en el borde inferior derecho: da volumen sin robar atención. */
.talleres-cierre::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 136, 196, 0.16), transparent 68%);
  pointer-events: none;
}

.talleres-cierre > * {
  position: relative;
}

.talleres-cierre__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
  font-size: 14.5px;
  color: #9a9a9a;
}

.talleres-cierre__contacto a {
  color: #d7d7d7;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.talleres-cierre__contacto a:hover {
  color: var(--p50-azul-claro);
  border-bottom-color: currentColor;
}

@media (max-width: 767.98px) {
  .talleres-cierre { padding: 34px 24px; }
  .talleres-hero__dato strong { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .taller-btn,
  .taller-btn svg { transition: none; }
  .taller-btn:hover { transform: none; }
}