/*
 * Listado de sectores (`web/sectores.twig`) — maqueta `F-sectores.dc.html`.
 * Prefijo `f-sec-`. Sólo tokens de `f.css`; sólo se animan transform,
 * opacity, clip-path y stroke-dashoffset (trazos SVG pequeños). Todas las
 * animaciones leen `var(--f-dl, 0s)` y se pausan fuera de pantalla con el
 * `[data-f-anim]` de su contenedor (`f-motion.js`). Estado base = legible.
 */

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */
.f-sec-lhero {
  padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--f-line);
}
.f-sec-lhero__grid { align-items: end; }

/* ------------------------------------------------------------------ */
/* Buscador + filtro                                                   */
/* ------------------------------------------------------------------ */
.f-sec-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.f-sec-filter__q { flex: 1 1 min(360px, 100%); }
.f-sec-filter__m { flex: 0 1 260px; min-width: min(220px, 100%); }
.f-sec-filter .f-input { width: 100%; height: 50px; font-size: 16px; }
.f-sec-filter .f-select { height: 50px; font-size: 16px; }
.f-sec-filter__go { min-height: 50px; }
/* Con JS el filtro es instantáneo: el botón sólo hace falta sin JS. */
.f-js .f-sec-filter__go { display: none; }
.f-sec-count { padding-bottom: 16px; }

/* ------------------------------------------------------------------ */
/* Rejilla de los 24 sectores                                          */
/* ------------------------------------------------------------------ */
.f-sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  border-top: 1px solid var(--f-line2);
  border-left: 1px solid var(--f-line2);
}
.f-sec-cell { display: flex; border-right: 1px solid var(--f-line2); border-bottom: 1px solid var(--f-line2); min-width: 0; }
.f-sec-cell[hidden] { display: none; }

.f-sec-card {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  min-height: 210px; padding: 22px;
  transition: background-color 0.2s ease;
}
.f-sec-card:hover, .f-sec-card:focus-visible { background: var(--f-stone); }
.f-sec-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.f-sec-card__arr { transition: transform 0.25s ease, color 0.25s ease; }
.f-sec-card:hover .f-sec-card__arr, .f-sec-card:focus-visible .f-sec-card__arr { transform: translateX(4px); color: var(--f-sig); }
.f-sec-card__t { font-size: 22px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; }
.f-sec-card__d { font-size: 14.5px; line-height: 1.5; color: var(--f-ink2); }
.f-sec-card__m {
  margin-top: auto;
  font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 9.5px; color: var(--f-sig);
}

/* Icono de línea: se redibuja y da un saltito al pasar el ratón. */
.f-sec-ico {
  width: 34px; height: 34px; flex: none;
  padding: 6px; margin: -6px; border-radius: 50%;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  color: var(--f-ink2);
  transition: color 0.25s ease, background-color 0.3s ease;
}
.f-sec-ico [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.f-sec-card:hover .f-sec-ico, .f-sec-card:focus-visible .f-sec-ico {
  color: var(--f-sig);
  background: color-mix(in oklab, var(--f-sig) 12%, transparent);
  animation: f-sec-wig 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
.f-sec-card:hover .f-sec-ico [pathLength], .f-sec-card:focus-visible .f-sec-ico [pathLength] {
  animation: f-sec-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes f-sec-wig {
  0% { transform: none; }
  30% { transform: translateY(-5px) rotate(-8deg) scale(1.12); }
  60% { transform: translateY(-3px) rotate(5deg) scale(1.08); }
  100% { transform: translateY(-3px) scale(1.08); }
}
@keyframes f-sec-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.f-sec-empty { font-size: 16px; color: var(--f-ink2); }
.f-sec-empty[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* Tres circuitos                                                      */
/* ------------------------------------------------------------------ */
.f-sec-circs { padding-bottom: 0; }
.f-sec-circ--c2 { background: var(--f-stone); }
.f-sec-circ__side { align-self: end; }

.f-sec-circ__box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  border: 1px solid var(--f-line2);
  background: var(--f-bg);
}
.f-sec-circ__box > * + * { border-top: 1px solid var(--f-line2); }

.f-sec-circ__canvas {
  position: relative; overflow-x: auto; overflow-y: hidden;
  background-color: var(--f-stone);
  background-image: radial-gradient(var(--f-dot) 1px, transparent 1px);
  background-size: 16px 16px;
}
.f-sec-circ--c2 .f-sec-circ__canvas { background-color: var(--f-bg); }
.f-sec-circ__stage { position: relative; height: 300px; min-width: 560px; }
.f-sec-circ__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.f-sec-n { position: absolute; font-size: 13px; }
.f-sec-n .f-node__k { padding: 6px 9px; font-size: 9.5px; }
.f-sec-n .f-node__v { padding: 8px 9px; font-size: 13px; }

.f-sec-circ--c1 .f-sec-n1 { left: 3%;  top: 44px;  width: 22%; }
.f-sec-circ--c1 .f-sec-n2 { left: 38%; top: 44px;  width: 24%; }
.f-sec-circ--c1 .f-sec-n3 { left: 75%; top: 44px;  width: 22%; }
.f-sec-circ--c1 .f-sec-n4 { left: 38%; top: 200px; width: 24%; }
.f-sec-circ--c1 .f-sec-n5 { left: 75%; top: 200px; width: 22%; }
.f-sec-circ--c2 .f-sec-n1 { left: 3%;  top: 124px; width: 20%; }
.f-sec-circ--c2 .f-sec-n2 { left: 34%; top: 124px; width: 21%; }
.f-sec-circ--c2 .f-sec-n3 { left: 70%; top: 44px;  width: 27%; }
.f-sec-circ--c2 .f-sec-n4 { left: 70%; top: 204px; width: 27%; }
.f-sec-circ--c3 .f-sec-n1 { left: 3%;  top: 36px;  width: 23%; }
.f-sec-circ--c3 .f-sec-n2 { left: 3%;  top: 126px; width: 23%; }
.f-sec-circ--c3 .f-sec-n3 { left: 3%;  top: 216px; width: 23%; }
.f-sec-circ--c3 .f-sec-n4 { left: 41%; top: 124px; width: 22%; }
.f-sec-circ--c3 .f-sec-n5 { left: 73%; top: 124px; width: 24%; }

/* Cometa que recorre cada cable (sólo durante la animación). */
.f-sec-comet {
  fill: none; stroke: var(--f-sig); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 24 600; stroke-dashoffset: 24;
  animation: f-sec-comet var(--f-cycle, 5.7s) linear var(--f-dl, 0s) infinite;
}
@keyframes f-sec-comet { 0% { stroke-dashoffset: 24; } 40%, 100% { stroke-dashoffset: -300; } }

/* Chat del circuito: pregunta, puntos y respuesta por recorte. */
.f-sec-circ__chat { border: 0; }
.f-sec-q { animation: f-sec-q var(--f-cycle, 9s) cubic-bezier(0.2, 0.7, 0.2, 1) var(--f-dl, 0s) infinite both; }
@keyframes f-sec-q { 0% { opacity: 0; transform: translateY(8px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.f-sec-dots { display: flex; gap: 4px; height: 8px; animation: f-sec-dots var(--f-cycle, 9s) steps(1) var(--f-dl, 0s) infinite; }
.f-sec-dots > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; animation: f-sec-bounce 0.9s ease-in-out infinite; }
.f-sec-dots > span:nth-child(2) { animation-delay: 0.15s; }
.f-sec-dots > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes f-sec-dots { 0%, 8% { opacity: 0; } 10%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes f-sec-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.f-sec-r { animation: f-sec-r var(--f-cycle, 9s) steps(8) var(--f-dl, 0s) infinite both; }
@keyframes f-sec-r {
  0%, 30% { clip-path: inset(0 0 100% 0); }
  55%, 92% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* Fila «Combina» con enlace a cada módulo. */
.f-sec-combina {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--f-line);
  font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px;
}
.f-sec-combina > * { display: flex; align-items: center; min-height: 44px; padding: 0 16px; }
.f-sec-combina > :first-child { padding-left: 0; }
.f-sec-combina > a { border-left: 1px solid var(--f-line); transition: color 0.2s ease; }
.f-sec-combina > a:hover { color: var(--f-sig); }

/* Cierre */
.f-sec-otros { align-items: end; }

@media (min-width: 888px) {
  .f-sec-circ__box > * + * { border-top: 0; border-left: 1px solid var(--f-line2); }
}