/*
 * Ficha de sector (`web/sector.twig`) — maqueta `F-sector.dc.html`.
 * Prefijo `f-sec-`. Sólo tokens de `f.css`. Sólo se animan transform,
 * opacity y clip-path; los halos y destellos son pseudo-elementos
 * pre-pintados que sólo cambian de opacidad. Todas las animaciones leen
 * `var(--f-dl, 0s)` (retardos por `data-f-vars`) y `var(--f-cycle)`, y
 * se pausan fuera de pantalla con su `[data-f-anim]`. Estado base =
 * estado final legible (sin animación se lee todo).
 */

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */
.f-sec-hero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 4vw, 48px); }
.f-sec-h1 { font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem); hyphens: auto; }
/* «Telecomunicaciones» no cabe a 375 px: guion en vez de partir la palabra a pelo. */
.f-sec-h1 .f-g { display: block; }
.f-sec-hero__side { padding-top: 8px; }
.f-sec-narrow { max-width: 480px; }

/* ------------------------------------------------------------------ */
/* Circuito de nueve estaciones                                        */
/* ------------------------------------------------------------------ */
.f-sec-flow__body { display: flex; flex-direction: column; gap: 22px; padding: clamp(16px, 3vw, 32px); }
.f-sec-flow__foot { align-self: flex-end; text-align: right; }

.f-sec-railrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.f-sec-rail {
  position: relative; flex: 1; min-width: min(260px, 100%); height: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.f-sec-rail__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--f-line2); }
.f-sec-rail__fill {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--f-sig); transform-origin: left;
  animation: f-sec-rfill var(--f-cycle, 11.7s) linear infinite;
}
@keyframes f-sec-rfill { 0% { transform: scaleX(0); } 92%, 100% { transform: scaleX(1); } }
.f-sec-rail__dot {
  position: relative; width: 10px; height: 10px;
  border: 1px solid var(--f-line2); background: var(--f-bg);
  animation: f-sec-rdot var(--f-cycle, 11.7s) ease var(--f-dl, 0s) infinite;
}
.f-sec-rail__dot::after {
  content: ''; position: absolute; inset: -1px; background: var(--f-sig); opacity: 0;
  animation: f-sec-flash var(--f-cycle, 11.7s) ease var(--f-dl, 0s) infinite;
}
@keyframes f-sec-rdot { 0% { transform: scale(1.5); } 11.1%, 100% { transform: none; } }
@keyframes f-sec-flash { 0% { opacity: 1; } 11.1%, 100% { opacity: 0; } }

.f-sec-stations {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.f-sec-st {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  min-height: 200px; padding: 16px;
  border: 1px solid var(--f-line2); background: var(--f-bg);
  animation: f-sec-st var(--f-cycle, 11.7s) ease var(--f-dl, 0s) infinite;
}
.f-sec-st::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px var(--f-sig), 0 0 0 4px var(--f-sigsoft),
    0 18px 40px -18px color-mix(in oklab, var(--f-sig) 60%, transparent);
  animation: f-sec-flash var(--f-cycle, 11.7s) ease var(--f-dl, 0s) infinite;
}
@keyframes f-sec-st { 0% { transform: translateY(-4px); } 11.1%, 100% { transform: none; } }
.f-sec-st__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.f-sec-st__arw { color: var(--f-grey); animation: f-sec-arw var(--f-cycle, 11.7s) ease var(--f-dl, 0s) infinite; }
@keyframes f-sec-arw { 0%, 5.6% { transform: none; } 7.8% { transform: translateX(6px); } 10.6%, 100% { transform: none; } }
.f-sec-st__t { font-size: 19px; letter-spacing: -0.03em; line-height: 1.15; }
.f-sec-st__io { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.f-sec-st__in, .f-sec-st__out { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.35; }
.f-sec-st__in { color: var(--f-ink2); }
.f-sec-st__in .f-mono, .f-sec-st__out .f-mono { flex: none; min-width: 44px; padding-top: 2px; font-size: 9.5px; color: var(--f-grey); }
.f-sec-st__out {
  position: relative; isolation: isolate; padding: 7px 9px; border: 1px solid var(--f-line2);
  animation: f-sec-out var(--f-cycle, 11.7s) ease var(--f-dl, 0s) infinite;
}
.f-sec-st__out::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; opacity: 0;
  background: var(--f-sigsoft); box-shadow: inset 0 0 0 1px var(--f-sig);
  animation: f-sec-flash var(--f-cycle, 11.7s) ease var(--f-dl, 0s) infinite;
}
@keyframes f-sec-out { 0% { transform: none; } 4.4% { transform: translateX(10px); } 10%, 100% { transform: none; } }

/* ------------------------------------------------------------------ */
/* 01 · Chat del asistente                                             */
/* ------------------------------------------------------------------ */
.f-sec-dots { display: flex; gap: 4px; height: 8px; animation: f-sec-dots 10s steps(1) var(--f-dl, 0s) infinite; }
.f-sec-dots > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; 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%, 6% { opacity: 0; } 8%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes f-sec-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.f-sec-type { animation: f-sec-type 10s steps(6) var(--f-dl, 0s) infinite both; }
@keyframes f-sec-type {
  0%, 34% { clip-path: inset(0 0 100% 0); }
  50%, 92% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

.f-sec-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.f-sec-acts > span {
  display: inline-block; padding: 8px 12px;
  font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px;
}
.f-sec-acts__yes { background: var(--f-invink); color: var(--f-inv); animation: f-sec-press 10s ease var(--f-dl, 0s) infinite; }
.f-sec-acts__no { border: 1px solid rgba(127, 127, 127, 0.4); }
@keyframes f-sec-press { 0%, 14% { transform: none; } 16% { transform: scale(0.94); } 19%, 100% { transform: none; } }

.f-sec-toast {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--f-sig);
  font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px;
  animation: f-sec-toast 10s cubic-bezier(0.2, 0.7, 0.2, 1) var(--f-dl, 0s) infinite;
}
@keyframes f-sec-toast { 0%, 63% { opacity: 0; transform: translateY(8px); } 68%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ */
/* 02 · Módulos que usa                                                */
/* ------------------------------------------------------------------ */
.f-sec-mods { border-top: 1px solid var(--f-ink); }
.f-sec-mods > li { border-bottom: 1px solid var(--f-line); }
.f-sec-mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 8px 16px; align-items: center;
  min-height: 44px; padding: 22px 0;
  transition: background-color 0.25s ease;
}
.f-sec-mrow:hover, .f-sec-mrow:focus-visible { background: var(--f-stone); }
.f-sec-mrow__n { display: flex; align-items: center; gap: 12px; }
.f-sec-mrow__t { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; }
.f-sec-mrow__d { grid-column: 1; font-size: 16px; color: var(--f-ink2); }
.f-sec-mrow__k { grid-column: 1; font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; color: var(--f-grey); }
.f-sec-mrow__a { grid-column: 2; grid-row: 1; justify-self: end; transition: transform 0.25s ease; }
.f-sec-mrow:hover .f-sec-mrow__a { transform: translate(3px, -3px); }
.f-sec-lit { animation: f-sec-lit 2.4s ease-in-out var(--f-dl, 0s) infinite both; }
.f-sec-lit--dim { background: var(--f-line2); }
@keyframes f-sec-lit { 0%, 100% { transform: scale(1); opacity: 0.45; } 15% { transform: scale(1.9); opacity: 1; } 35% { transform: scale(1); opacity: 0.45; } }

@media (min-width: 900px) {
  .f-sec-mrow {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1.4fr) 28px;
    gap: 24px; padding: 26px 12px 26px 0;
  }
  .f-sec-mrow__d, .f-sec-mrow__k { grid-column: auto; }
  .f-sec-mrow__a { grid-column: 4; }
}

/* ------------------------------------------------------------------ */
/* 03 · La semana en una rejilla                                       */
/* ------------------------------------------------------------------ */
.f-sec-board { margin: 0; border: 1px solid var(--f-line2); background: var(--f-bg); min-width: 0; }
.f-sec-board__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--f-line); font-size: 13px;
}
.f-sec-board__scroll { overflow-x: auto; }
.f-sec-board__grid {
  display: grid; grid-template-columns: 150px repeat(5, minmax(56px, 1fr));
  min-width: 480px; font-size: 13px;
}
.f-sec-board__h { padding: 9px 6px; border-bottom: 1px solid var(--f-line); color: var(--f-grey); font-size: 10px; text-align: center; }
.f-sec-board__h:first-child { padding-left: 14px; text-align: left; font-size: 13px; }
.f-sec-board__p { padding: 10px 14px; border-bottom: 1px solid var(--f-line); }
.f-sec-cell {
  margin: 6px 3px; background: var(--f-sigsoft); border: 1px solid var(--f-sig);
  transform-origin: left;
  animation: f-sec-cell 7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--f-dl, 0s) infinite both;
}
.f-sec-cell--off { background: var(--f-stone2); border-color: transparent; animation: none; }
.f-sec-cell--gap { background: transparent; border: 1px dashed var(--f-warn); animation: f-sec-gap 1.2s steps(2) infinite; }
@keyframes f-sec-cell { 0% { transform: scaleX(0); opacity: 0; } 6%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes f-sec-gap { 50% { opacity: 0.25; } }

.f-sec-board__kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  border-top: 1px solid var(--f-line); clip-path: inset(0 1px 1px 0);
}
.f-sec-bk { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); }
.f-sec-bk__v { display: inline-block; font-size: 24px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.f-sec-bk__v--ok { color: var(--f-ok); }
.f-sec-bk__v--warn { color: var(--f-warn); }
.f-sec-board__foot { padding: 10px 14px; border-top: 1px solid var(--f-line); text-align: right; }

.f-sec-up { display: inline-block; animation: f-sec-up 7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--f-dl, 0s) infinite both; }
@keyframes f-sec-up { 0%, 2% { opacity: 0; transform: translateY(10px); } 9%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* ------------------------------------------------------------------ */
/* 04 · Precio orientativo                                             */
/* ------------------------------------------------------------------ */
.f-sec-price {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  border: 1px solid var(--f-line2); background: var(--f-bg);
}
.f-sec-price > * + * { border-top: 1px solid var(--f-line2); }
.f-sec-price__lines { display: flex; flex-direction: column; }
.f-sec-pl {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px clamp(16px, 2vw, 22px); border-bottom: 1px solid var(--f-line); font-size: 15px;
}
.f-sec-pl:last-child { border-bottom: 0; }
.f-sec-pl__n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.f-sec-pl__v { flex: none; font-size: 10.5px; color: var(--f-grey); white-space: nowrap; }
.f-sec-pl__v--ok { color: var(--f-ok); }
.f-sec-tick { display: inline-block; animation: f-sec-tick 7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--f-dl, 0s) infinite both; }
@keyframes f-sec-tick { 0%, 2% { opacity: 0; transform: translateX(10px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

.f-sec-price__total { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(22px, 3vw, 32px); }
.f-sec-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.f-sec-big__n {
  font-size: clamp(4rem, 2rem + 6vw, 7.75rem); font-weight: 300;
  letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Cierre                                                              */
/* ------------------------------------------------------------------ */
.f-sec-close { max-width: 1000px; }
.f-sec-solid { background: var(--f-bg); }

/* En el móvil las nueve estaciones van apiladas: sin alto mínimo. */
@media (max-width: 639px) {
  .f-sec-st { min-height: 0; }
}

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