/* ==========================================================================
   MediaLab — /futuros
   Curso «Diseño de Futuros con IA». Usa el sistema de ../iacomunicacion/curso.css
   y sólo agrega las piezas propias: el cono de futuros interactivo, y la rueda
   de futuros. La cinta de palabras, la
   tarjeta de proyecto final y «A tu medida» sobre fondo claro viven en
   curso.css (las usan todos los cursos).
   Prefijo «f-» para las piezas nuevas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   02 · Rueda de futuros (caso paso a paso, sobre tinta)
   -------------------------------------------------------------------------- */
.f-rueda { margin: 0; }
.f-rueda svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.f-rueda-anillos circle { stroke: var(--linea-tinta); stroke-width: 1; stroke-dasharray: 3 5; }
.f-rueda-lineas path { stroke: rgba(255, 49, 49, .55); stroke-width: 1.2; fill: none; }
.f-rueda-ext circle { fill: var(--tinta); stroke: rgba(255, 255, 255, .5); stroke-width: 1.2; }
.f-rueda-med circle { fill: var(--tinta); stroke: var(--naranja); stroke-width: 2; }
.f-rueda-centro { fill: var(--naranja); }
.f-rueda-texto {
  fill: var(--tinta);
  font-family: Anton, sans-serif;
  font-size: 17px;
  letter-spacing: .04em;
}
.f-rueda figcaption {
  color: var(--sobre-tinta);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  margin-top: var(--e4);
  text-align: center;
}

/* --------------------------------------------------------------------------
   03 · Cono de futuros interactivo
   -------------------------------------------------------------------------- */
.f-cono {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--e7);
  align-items: center;
  margin: var(--e8) 0 var(--e9);
  padding: var(--e7);
  background: var(--tinta);
  color: var(--blanco);
}
.f-cono-grafico svg { display: block; width: 100%; height: auto; }

.f-capa path {
  fill: rgba(255, 255, 255, .04);
  stroke: rgba(255, 255, 255, .28);
  stroke-width: 1;
  transition: fill var(--lento) var(--curva), stroke var(--lento) var(--curva);
}
.f-capa text {
  fill: rgba(255, 255, 255, .45);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  transition: fill var(--lento) var(--curva);
}
.f-capa.activa path { fill: rgba(255, 49, 49, .28); stroke: var(--naranja); stroke-width: 2; }
.f-capa.activa text { fill: var(--naranja); }
.f-capa--preferible path { stroke-dasharray: 4 4; }
.f-hoy { fill: var(--naranja); }
.f-hoy-texto {
  fill: var(--blanco);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
}

.f-capas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
  margin-bottom: var(--e5);
}
.c-capa-btn {
  min-height: 48px;
  border: 1px solid var(--linea-tinta);
  background: transparent;
  color: var(--blanco);
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--t-mayor);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--medio) var(--curva), border-color var(--medio) var(--curva), color var(--medio) var(--curva);
}
.c-capa-btn:hover { border-color: var(--naranja); }
.c-capa-btn[aria-pressed="true"] { background: var(--naranja-boton); border-color: var(--naranja-boton); }
.c-capa-btn:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }

.f-cono-texto {
  margin: 0;
  min-height: 7.5em;
  padding-top: var(--e5);
  border-top: 2px solid var(--naranja);
  color: var(--sobre-tinta);
  font-size: var(--t-base);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   06 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .f-cono { grid-template-columns: 1fr; gap: var(--e6); }
}
@media (max-width: 699px) {
  .f-cono { padding: var(--e5); margin-inline: calc(var(--pad) * -1); }
  .f-capas { grid-template-columns: 1fr 1fr; }
  /* Escalados al ancho del teléfono quedarían en ~7 px: los botones ya los nombran */
  .f-capa text { display: none; }
  .c-capa-btn { font-size: var(--t-base); }
}