/*
 * Home de la web pública — sistema F «Retícula» (maqueta `F.dc.html`).
 * Plantillas: `templates/web/home.twig` + `web/partials/home/_f-*.twig`.
 *
 * Reglas (las de `f/f.css`, resumidas):
 *  - Prefijo `f-home-*`. Nada de redefinir clases `f-*` del sistema
 *    salvo ajustes de contexto (`.f-home-x .f-kpi`).
 *  - Tokens, nunca colores sueltos. Excepción documentada: el TELÉFONO
 *    de «a viva voz» es un objeto físico y va oscuro en los dos temas.
 *  - Sólo se animan transform, opacity, clip-path y (en trazos SVG
 *    pequeños) stroke-dashoffset. Cada animación lee `var(--f-dl, 0s)`
 *    en el shorthand y su estado BASE es el final legible; el bloque
 *    `prefers-reduced-motion` de `f.css` las anula todas.
 *  - Todo artefacto animado vive dentro de un `[data-f-anim]`: fuera de
 *    pantalla, `f-motion.js` lo pausa.
 */

/* Encabezados de ítem: el reset de F no toca el peso de h3. */
.f-home :is(.f-t, .f-item__t, .f-cell__t, .f-row__t) { font-weight: 400; margin: 0; }

/* ==========================================================================
   1 · Cabecera + retícula de fragmentos
   ========================================================================== */
.f-home-hero { border-bottom: 1px solid var(--f-line); }
.f-home-hero__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
}
.f-home-hero__copy {
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: clamp(48px, 9vw, 80px) 0;
  position: relative; z-index: 2;
}
@media (min-width: 960px) {
  .f-home-hero__in { min-height: 720px; }
  .f-home-hero__copy { gap: 34px; padding-inline-end: 40px; }
}

.f-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(112px, auto);
  border-top: 1px solid var(--f-line);
  border-inline-start: 1px solid var(--f-line);
  margin-bottom: clamp(40px, 8vw, 64px);
}
.f-home-grid__c { border-inline-end: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); min-width: 0; position: relative; }
.f-home-grid__c--void { display: none; }
.f-home-grid__c--w2, .f-home-grid__c--chat { grid-column: span 2; }
@media (min-width: 960px) {
  .f-home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 144px;
    border-top: 0;
    margin-bottom: 0;
  }
  .f-home-grid__c--void { display: block; }
  .f-home-grid__c--chat { grid-row: span 2; }
}
.f-home-grid__c--deco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-home-deco {
  fill: none; stroke: var(--f-line2); stroke-width: 0.6; vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 6;
  animation: f-dash 6s linear var(--f-dl, 0s) infinite;
}

.f-home-grid__c--tile {
  background: var(--f-tile);
  padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.f-home-grid__c--w2 { padding: 16px; }
.f-home-grid__k { display: flex; align-items: center; gap: 8px; }
.f-home-grid__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.f-home-grid__v { font-size: 14px; line-height: 1.35; }
.f-home-grid__c--w2 .f-home-grid__v { font-size: 15px; }
.f-home-grid__n { font-size: 26px; letter-spacing: -0.04em; line-height: 1; }
.f-home-clock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.f-home-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--f-ok); animation: f-blink 1.4s steps(2) var(--f-dl, 0s) infinite; }
.f-home-tick { display: inline-block; color: var(--f-ok); animation: f-home-tick 4s var(--f-ease) var(--f-dl, 0s) infinite; }
@keyframes f-home-tick {
  0%, 8% { transform: scale(0.4); opacity: 0; }
  16%, 100% { transform: none; opacity: 1; }
}
/* La línea crece de izquierda a derecha con un clip-path (compuesto),
   no con stroke-dashoffset, que repinta en cada fotograma del bucle. */
.f-home-spark { width: 100%; height: 40px; overflow: visible; animation: f-home-draw 6s var(--f-ease) var(--f-dl, 0s) infinite; }
.f-home-spark path { fill: none; stroke: var(--f-sig); stroke-width: 1.6; }
@keyframes f-home-draw {
  0%, 4% { clip-path: inset(-4px 100% -4px -4px); }
  34%, 100% { clip-path: inset(-4px -4px -4px -4px); }
}

/* Fragmento del chat: la superficie invertida de `.f-chat`. */
.f-home-grid__c--chat {
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 14px; line-height: 1.45;
  color: var(--f-invink);
  background-color: var(--f-inv);
  background-image:
    radial-gradient(900px 480px at 85% 0%, color-mix(in oklab, var(--f-sig) 38%, transparent), transparent 70%),
    radial-gradient(700px 420px at 0% 100%, color-mix(in oklab, var(--f-aqua) 26%, transparent), transparent 70%);
}
.f-home-chat__head { display: flex; align-items: center; gap: 8px; opacity: 0.65; }
.f-home-chat__me { align-self: flex-end; max-width: 86%; padding: 9px 12px; border: 1px solid rgba(127, 127, 127, 0.4); }
.f-home-chat__ai { opacity: 0.85; }
.f-home-chat__foot { margin-top: auto; opacity: 0.55; }

/* ==========================================================================
   2 · Desde el móvil · a viva voz — biblioteca de procesos + teléfono
   El teléfono es el componente compartido `web/f/_telefono.twig`
   (estilos en `f/f-telefono.css`, motor en `f/f-telefono.js`).
   ========================================================================== */
.f-home-voz { overflow: hidden; }
.f-home-voz__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "phone" "lib";
  gap: clamp(36px, 5vw, 64px) clamp(40px, 6vw, 96px);
}
@media (min-width: 960px) {
  .f-home-voz__grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
    grid-template-areas: "intro phone" "lib phone";
    grid-template-rows: auto 1fr;
  }
}
.f-home-voz__intro { grid-area: intro; }
.f-home-voz__grid > .f-home-phone { grid-area: phone; }
.f-home-voz__body { max-width: 540px; opacity: 0.9; color: inherit; }
.f-home-voz__nota { opacity: 0.62; max-width: 540px; line-height: 1.7; }

/* Biblioteca */
.f-home-voz {
  --f-home-i-azar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5'/%3E%3C/svg%3E");
}
.f-home-lib { grid-area: lib; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.f-home-lib__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.f-home-lib__title { margin: 0; font-size: 11px; font-weight: 400; opacity: 0.75; }
.f-home-lib__azar {
  min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--f-night-line); background: transparent; color: inherit;
  font-family: var(--f-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.f-home-lib__azar::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--f-home-i-azar) center / contain no-repeat; mask: var(--f-home-i-azar) center / contain no-repeat;
}
.f-home-lib__azar:hover, .f-home-lib__azar:focus-visible { border-color: var(--f-sig); }
.f-home-lib__azar:hover::before { animation: f-home-spin 0.7s var(--f-ease) both; }
.f-home-lib__hint { margin: 0; color: inherit; opacity: 0.68; }
.f-home-lib__filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) { .f-home-lib__filtros { grid-template-columns: minmax(0, 1fr) 210px; } }
.f-home-lib .f-input, .f-home-lib .f-select { height: 48px; min-height: 48px; font-size: 14px; }
.f-home-lib__list {
  position: relative; list-style: none; margin: 0; padding: 0;
  max-height: 336px; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--f-night-line);
  scrollbar-width: thin; scrollbar-color: var(--f-night-line) transparent;
}
.f-home-lib__li { border-bottom: 1px solid var(--f-night-line); }
.f-home-lib__li[hidden] { display: none; }
.f-home-lib__item {
  width: 100%; min-height: 48px; padding: 12px 8px 12px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; border: 0; color: inherit; text-align: start; font: inherit; cursor: pointer;
  transition: padding 0.25s var(--f-ease), color 0.2s ease;
}
.f-home-lib__n { font-size: 15px; letter-spacing: -0.01em; position: relative; }
.f-home-lib__mod { flex: none; font-size: 9.5px; opacity: 0.55; }
.f-home-lib__item:hover, .f-home-lib__item:focus-visible { padding-inline-start: 10px; }
.f-home-lib__item:hover .f-home-lib__n, .f-home-lib__item:focus-visible .f-home-lib__n { color: var(--f-sig); }
.f-home-lib__item.is-play { padding-inline-start: 18px; }
@media (prefers-reduced-motion: reduce) { .f-home-lib__item { transition: none; } }
.f-home-lib__item.is-play .f-home-lib__n::before {
  content: ""; position: absolute; inset-inline-start: -16px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--f-sig); animation: f-blink 1.1s steps(2) infinite;
}
.f-home-lib__vacio { margin: 0; opacity: 0.7; }


/* ==========================================================================
   3 · KPI
   ========================================================================== */
.f-home-kpis .f-kpi { padding-inline-start: 0; }
@media (min-width: 600px) {
  .f-home-kpis .f-kpi:nth-child(even) { padding-inline-start: clamp(20px, 2.4vw, 28px); }
}
@media (min-width: 1100px) {
  .f-home-kpis .f-kpi + .f-kpi { padding-inline-start: clamp(20px, 2.4vw, 28px); }
}

/* ==========================================================================
   4 · Plataforma: las siete losas
   ========================================================================== */
.f-home-self-start { align-self: flex-start; }
.f-home-items { max-width: 520px; }
.f-home-stack { position: relative; width: 100%; max-width: 600px; justify-self: center; }
.f-home-stack__svg { width: 100%; height: auto; overflow: visible; }
.f-home-orbit { fill: none; stroke: var(--f-line2); stroke-dasharray: 2 5; }
.f-home-orbit--2 { stroke: var(--f-line); stroke-dasharray: 1 7; }
.f-home-wire { stroke: var(--f-sig); stroke-width: 1.4; }
.f-home-core {
  fill: var(--f-sig);
  transform-box: fill-box; transform-origin: center; transform: rotate(45deg);
  animation: f-home-core 3.15s ease-in-out var(--f-dl, 0s) infinite;
}
@keyframes f-home-core {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(0.82); }
}
.f-home-halo { fill: none; stroke: var(--f-sig); }

.f-home-slab {
  transform-box: view-box;
  animation: f-home-split 7s var(--f-ease-io) var(--f-dl, 0s) infinite;
}
@keyframes f-home-split {
  0%, 12%, 88%, 100% { transform: translateY(0); }
  38%, 62% { transform: translateY(calc(var(--f-home-i, 0) * 9px)); }
}
.f-home-slab__base { fill: var(--f-bg); stroke: var(--f-line2); }
.f-home-lit {
  fill: var(--f-sig); stroke: var(--f-sig); opacity: 0;
  animation: f-home-lit 3.15s ease-in-out var(--f-dl, 0s) infinite;
}
@keyframes f-home-lit { 0%, 100% { opacity: 0; } 12% { opacity: 0.85; } 30% { opacity: 0; } }
.f-home-slab--1 { --f-home-i: 1; }
.f-home-slab--2 { --f-home-i: 2; }
.f-home-slab--3 { --f-home-i: 3; }
.f-home-slab--4 { --f-home-i: 4; }
.f-home-slab--5 { --f-home-i: 5; }
.f-home-slab--6 { --f-home-i: 6; }
/* El retardo del destello va en la losa interior y en su rótulo: van juntos. */
.f-home-lit--1, .f-home-lab--1 { --f-dl: 0.45s; }
.f-home-lit--2, .f-home-lab--2 { --f-dl: 0.9s; }
.f-home-lit--3, .f-home-lab--3 { --f-dl: 1.35s; }
.f-home-lit--4, .f-home-lab--4 { --f-dl: 1.8s; }
.f-home-lit--5, .f-home-lab--5 { --f-dl: 2.25s; }
.f-home-lit--6, .f-home-lab--6 { --f-dl: 2.7s; }

.f-home-pkt {
  fill: var(--f-sig); opacity: 0;
  transform-box: view-box;
  animation: f-home-pkt 2.8s cubic-bezier(0.4, 0, 0.2, 1) var(--f-dl, 0s) infinite;
}
.f-home-pkt--1 { --f-dl: 0.7s; }
.f-home-pkt--2 { --f-dl: 1.4s; }
.f-home-pkt--3 { --f-dl: 2.1s; }
@keyframes f-home-pkt {
  0% { transform: translateY(0); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateY(-110px); opacity: 0; }
}

.f-home-stack__me, .f-home-stack__mcp { position: absolute; top: 5%; }
.f-home-stack__me { left: 58%; color: var(--f-ink); }
.f-home-stack__mcp { left: 0; }
.f-home-stack__labs { display: none; }
@media (min-width: 960px) {
  .f-home-stack__labs { display: block; }
}
.f-home-lab { position: absolute; right: 0; color: var(--f-grey); }
/* El rótulo «se enciende» con una copia en acento encima que sólo cambia
   de opacidad (sin animar `color`). */
.f-home-lab::after {
  content: attr(data-l);
  position: absolute; inset: 0;
  color: var(--f-sig);
  opacity: 0;
  animation: f-home-lab 3.15s ease-in-out var(--f-dl, 0s) infinite;
}
@keyframes f-home-lab { 0%, 100% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: 0; } }
.f-home-lab--0 { top: 37%; }
.f-home-lab--1 { top: 44.3%; }
.f-home-lab--2 { top: 51.7%; }
.f-home-lab--3 { top: 59.1%; }
.f-home-lab--4 { top: 66.5%; }
.f-home-lab--5 { top: 73.9%; }
.f-home-lab--6 { top: 81.3%; }

/* ==========================================================================
   6 · Administración pública: la sala de candidaturas en cuatro pasos
   ========================================================================== */
.f-home-ap__body { max-width: 600px; color: inherit; opacity: 0.85; }
.f-home-ap__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  overflow: hidden;
}
.f-home-ap__steps > .f-cell {
  border-inline-end: 1px solid var(--f-line2);
  border-bottom: 1px solid var(--f-line2);
  margin: 0 -1px -1px 0;
}
.f-home-ap__x { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.f-home-ap__x--rows { gap: 0; }
.f-home-ap__sample { padding: 12px clamp(22px, 3vw, 30px); }

.f-home-pages {
  position: relative; display: block; height: 46px; overflow: hidden;
  border: 1px solid var(--f-line2); background-color: var(--f-bg);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, var(--f-line) 7px 8px);
}
.f-home-pages__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 25%;
  background: var(--f-sigsoft); border-bottom: 1px solid var(--f-sig);
}
.f-home-req {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--f-line2); font-size: 13.5px;
}
.f-home-req .f-chip { white-space: normal; text-align: end; }
.f-home-lines { display: flex; flex-direction: column; gap: 6px; }
.f-home-lines > span { display: block; height: 4px; background: color-mix(in oklab, var(--f-sig) 45%, var(--f-line2)); }
.f-home-lines > span:nth-child(2) { width: 82%; }
.f-home-lines > span:nth-child(3) { width: 58%; }
.f-home-envs { display: flex; gap: 6px; }
.f-home-env {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 36px; border: 1px solid var(--f-line2); background: var(--f-bg);
  font-family: var(--f-font-mono); font-size: 10.5px;
}
.f-home-score { display: block; height: 4px; background: var(--f-line2); }
.f-home-score__bar { display: block; height: 100%; width: 82%; background: var(--f-sig); }

/* ==========================================================================
   7 · Sectores
   ========================================================================== */
.f-home-sectores { padding-top: clamp(64px, 8vw, 120px); }
.f-home-sectores__side { max-width: 380px; }
.f-home-scell {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 128px; height: 100%; padding: 18px;
  transition: background-color 0.25s ease;
}
.f-home-scell:hover, .f-home-scell:focus-visible { background: var(--f-stone); }
.f-home-scell__top { display: flex; justify-content: space-between; align-items: center; }
.f-home-scell__t { font-size: 19px; letter-spacing: -0.035em; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
.f-home-scell__m { margin-top: auto; }
.f-home-sq { animation: f-home-sq 4.2s ease-in-out var(--f-dl, 0s) infinite; }
@keyframes f-home-sq { 0%, 100% { opacity: 0.15; } 12% { opacity: 1; } 30% { opacity: 0.15; } }
.f-home-scell:hover .f-home-sq, .f-home-scell:focus-visible .f-home-sq { animation: none; opacity: 1; }
.f-home-sq--1 { --f-dl: 0.3s; }
.f-home-sq--2 { --f-dl: 0.7s; }
.f-home-sq--3 { --f-dl: 1s; }
.f-home-sq--4 { --f-dl: 1.4s; }
.f-home-sq--5 { --f-dl: 1.8s; }
.f-home-sq--6 { --f-dl: 0.5s; }
.f-home-sq--7 { --f-dl: 2.2s; }

/* ==========================================================================
   8 · Conectarlo lleva dos minutos (ciclo común de 9 s)
   ========================================================================== */
.f-home-step { gap: 16px; }
.f-home-addr { display: flex; border: 1px solid var(--f-line2); font-size: 13px; }
.f-home-addr__url {
  flex: 1; min-width: 0; padding: 11px 12px; background: var(--f-stone);
  font-family: var(--f-font-mono); font-size: 13px; overflow-wrap: anywhere;
}
.f-home-url { display: inline-block; animation: f-home-url 9s steps(28) var(--f-dl, 0s) infinite both; }
@keyframes f-home-url {
  0%, 2% { clip-path: inset(0 100% 0 0); }
  16%, 100% { clip-path: inset(0 0 0 0); }
}
.f-home-addr__btn {
  flex: none; display: block; height: 40px; min-width: 90px; padding: 0 12px;
  overflow: hidden; border-inline-start: 1px solid var(--f-line2);
}
.f-home-copy { display: block; animation: f-home-copy 9s steps(1) var(--f-dl, 0s) infinite; }
.f-home-copy__l { display: block; height: 40px; line-height: 40px; white-space: nowrap; }
@keyframes f-home-copy {
  0%, 20% { transform: translateY(0); }
  22%, 94% { transform: translateY(-40px); }
  100% { transform: translateY(0); }
}
.f-home-perms { border: 1px solid var(--f-line2); font-size: 13.5px; }
.f-home-perms > li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; }
.f-home-perms > li + li { border-top: 1px solid var(--f-line); }
.f-home-perm { display: inline-block; animation: f-home-perm 9s var(--f-ease) var(--f-dl, 0s) infinite both; }
.f-home-perm--1 { --f-dl: 1.6s; }
.f-home-perm--2 { --f-dl: 2.2s; }
.f-home-perm--3 { --f-dl: 2.8s; }
@keyframes f-home-perm {
  0%, 22% { opacity: 0; transform: translateX(8px); }
  28%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
.f-home-q { font-size: 20px; line-height: 1.35; letter-spacing: -0.02em; animation: f-home-q 9s steps(6) var(--f-dl, 0s) infinite both; }
@keyframes f-home-q {
  0%, 48% { clip-path: inset(0 0 100% 0); }
  62%, 100% { clip-path: inset(0 0 0 0); }
}
.f-home-ans { display: flex; flex-direction: column; gap: 4px; opacity: 0.8; animation: f-home-ans 9s ease var(--f-dl, 0s) infinite both; }
@keyframes f-home-ans {
  0%, 66% { opacity: 0; transform: translateY(6px); }
  72%, 94% { opacity: 0.8; transform: none; }
  100% { opacity: 0; }
}
.f-home-step__inv-d { color: inherit; opacity: 0.75; }
.f-home-step__inv-s { color: inherit; opacity: 0.55; margin-top: auto; }

/* ==========================================================================
   9 · Adelanto de precios
   ========================================================================== */
.f-home-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-home-price { gap: 10px; }
.f-home-price__n { font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); font-weight: 300; letter-spacing: -0.06em; line-height: 0.9; }

/* ==========================================================================
   11 · Cierre
   ========================================================================== */
.f-home-cierre__t { max-width: 1000px; }