/* FAVINCA · base y componentes v1.0. Depende de tokens.css. Prefijo de clases: .fv- */

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 var(--t-base)/var(--lh-texto) var(--f-texto);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--enlace); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--radio-s); }
h1, h2, h3, h4 {
  font-family: var(--f-titulo); font-stretch: var(--ancho-titulo); font-weight: 650;
  line-height: var(--lh-titulo); letter-spacing: var(--track-titulo); margin: 0 0 0.5em; text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 700; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
p { margin: 0 0 1em; max-width: var(--ancho-texto); text-wrap: pretty; }
.fv-entradilla { font-size: var(--t-lg); color: var(--texto-2); line-height: 1.5; }
.fv-rotulo {  /* sobretítulo de sección: mono, espaciado, con raya de plano */
  display: inline-flex; align-items: center; gap: var(--e-3);
  font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3);
  margin-bottom: var(--e-4);
}
.fv-rotulo::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.fv-dato { font-family: var(--f-dato); font-size: var(--t-sm); color: var(--texto-3); }
.fv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Retícula ─────────────────────────────────────────── */
.fv-contenedor { width: 100%; max-width: calc(var(--ancho-max) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.fv-seccion { padding-block: var(--seccion); }
.fv-grid { display: grid; gap: var(--canal); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fv-cols-2, .fv-cols-3, .fv-cols-4 { display: grid; gap: var(--canal); }
@media (min-width: 768px) { .fv-cols-2 { grid-template-columns: repeat(2, 1fr); } .fv-cols-3, .fv-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fv-cols-3 { grid-template-columns: repeat(3, 1fr); } .fv-cols-4 { grid-template-columns: repeat(4, 1fr); } }
/* Fondo de plano: retícula técnica tenue para secciones noche */
.fv-plano {
  background-image:
    linear-gradient(var(--borde) 1px, transparent 1px),
    linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}

/* ── Botones ──────────────────────────────────────────── */
.fv-btn {
  --b-fondo: var(--azul-600); --b-texto: #fff; --b-borde: var(--azul-600);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-5); border: 1px solid var(--b-borde); border-radius: var(--radio-m);
  background: var(--b-fondo); color: var(--b-texto); text-decoration: none; cursor: pointer;
  font: 600 var(--t-base)/1 var(--f-texto); letter-spacing: 0.005em;
  transition: background var(--m-rapido) var(--ease-salida), transform var(--m-rapido) var(--ease-salida), border-color var(--m-rapido);
}
.fv-btn:hover { --b-fondo: var(--azul-700); --b-borde: var(--azul-700); text-decoration: none; }
.fv-btn:active { transform: translateY(1px); }
.fv-btn .ico { width: 20px; height: 20px; }
.fv-btn--sec { --b-fondo: transparent; --b-texto: var(--texto); --b-borde: var(--borde-fuerte); }
.fv-btn--sec:hover { --b-fondo: var(--superficie); --b-borde: var(--texto); }
[data-tema="noche"] .fv-btn--sec:hover { --b-fondo: rgba(255,255,255,0.06); }
.fv-btn--energia { --b-fondo: var(--energia); --b-texto: var(--azul-950); --b-borde: var(--energia); }
.fv-btn--energia:hover { --b-fondo: #f0b45a; --b-borde: #f0b45a; }
.fv-btn--wa { --b-fondo: var(--superficie); --b-texto: var(--texto); --b-borde: var(--borde-fuerte); }
.fv-btn--wa .ico { color: #1fa855; }
.fv-btn--wa:hover { --b-fondo: var(--superficie); --b-borde: #1fa855; }
.fv-btn--s { min-height: 40px; padding: 0 var(--e-4); font-size: var(--t-sm); }
.fv-enlace-flecha { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; text-decoration: none; }
.fv-enlace-flecha .ico { width: 18px; height: 18px; transition: transform var(--m-base) var(--ease-salida); }
.fv-enlace-flecha:hover .ico { transform: translateX(4px); }
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }  /* el trazo vive aquí y no solo en el sprite: con <use> externo algunos navegadores no aplican su <style> y pintan el ícono negro */

/* ── Etiquetas y estados ──────────────────────────────── */
.fv-etiqueta {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radio-s);
  font: 500 var(--t-xs)/1.4 var(--f-dato); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--gris-100); color: var(--gris-700);
}
.fv-etiqueta--ok { background: var(--ok-fondo); color: var(--ok); }
.fv-etiqueta--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.fv-etiqueta--antes { background: var(--antes-fondo); color: var(--antes); }
.fv-etiqueta--obra { background: var(--azul-600); color: #fff; }
.fv-linea { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-xs)/1 var(--f-dato); text-transform: uppercase; letter-spacing: 0.06em; }
.fv-linea::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fv-linea--energia { --c: var(--energia); } .fv-linea--red { --c: var(--red); } .fv-linea--seguridad { --c: var(--seguridad); }

/* ── Foto de obra (real) vs imagen ilustrativa ────────── */
/* Real: siempre enmarcada, con ficha y referencia. Nunca a sangre, nunca con filtro de color. */
.fv-foto-obra { margin: 0; background: var(--superficie); border: var(--linea); border-radius: var(--radio-m); padding: var(--e-2); }
.fv-foto-obra__marco { position: relative; overflow: hidden; border-radius: var(--radio-s); background: var(--gris-100); }
.fv-foto-obra__marco img { width: 100%; height: 100%; object-fit: cover; }
.fv-foto-obra__marco .fv-etiqueta { position: absolute; top: var(--e-2); left: var(--e-2); }
.fv-foto-obra figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); padding: var(--e-2) var(--e-1) 0; font: 400 var(--t-xs)/1.5 var(--f-dato); color: var(--texto-3); }
.fv-foto-obra figcaption b { color: var(--texto); font-weight: 500; }
/* Ilustrativa: a sangre, gradación noche, etiqueta visible. */
.fv-ilustrativa { position: relative; overflow: hidden; margin: 0; }
.fv-ilustrativa img, .fv-ilustrativa video { width: 100%; height: 100%; object-fit: cover; }
.fv-ilustrativa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,20,40,0) 40%, rgba(11,20,40,0.75)); pointer-events: none; }

/* ── Cifra con fuente ─────────────────────────────────── */
.fv-cifra { border-top: 2px solid var(--texto); padding-top: var(--e-4); }
.fv-cifra__valor { font: 700 var(--t-cifra)/1 var(--f-titulo); font-stretch: var(--ancho-titulo); letter-spacing: -0.03em; }
.fv-cifra__valor small { font-size: 0.45em; font-weight: 600; letter-spacing: 0; margin-left: 0.1em; }
.fv-cifra__etiqueta { margin: var(--e-2) 0 var(--e-3); font-size: var(--t-base); color: var(--texto-2); max-width: 28ch; }
.fv-cifra__fuente { font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); }
.fv-cifra--energia { border-top-color: var(--energia); }

/* ── Ficha técnica (rótulo de plano) ──────────────────── */
.fv-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: var(--linea); border-radius: var(--radio-s); background: var(--superficie); }
.fv-ficha > div { padding: var(--e-3) var(--e-4); border-right: var(--linea); border-bottom: var(--linea); margin: 0 -1px -1px 0; }
.fv-ficha dt { font: 500 10.5px/1.2 var(--f-dato); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3); margin-bottom: 4px; }
.fv-ficha dd { margin: 0; font-weight: 600; font-size: var(--t-sm); }

/* ── Tarjeta de caso ──────────────────────────────────── */
.fv-caso { display: flex; flex-direction: column; background: var(--superficie); border: var(--linea); border-radius: var(--radio-m); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--m-base), box-shadow var(--m-base); }
.fv-caso:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); text-decoration: none; }
.fv-caso__foto { aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--gris-100); border-bottom: var(--linea); }
.fv-caso__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-lento) var(--ease-salida); }
.fv-caso:hover .fv-caso__foto img { transform: scale(1.03); }
.fv-caso__foto .fv-etiqueta { position: absolute; top: var(--e-3); left: var(--e-3); }
.fv-caso__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); flex: 1; }
.fv-caso__meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.05em; }
.fv-caso__titulo { font: 650 clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem)/1.15 var(--f-titulo); font-stretch: var(--ancho-titulo); margin: 0; }
.fv-caso__resultado { font-size: var(--t-sm); color: var(--texto-2); margin: 0; }
.fv-caso__resultado b { color: var(--texto); }
.fv-caso .fv-enlace-flecha { margin-top: auto; color: var(--enlace); }

/* ── Comparador antes / después ───────────────────────── */
.fv-comparador { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radio-s); background: var(--gris-100); user-select: none; touch-action: pan-y; --pos: 50%; }
.fv-comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-comparador__despues { clip-path: inset(0 0 0 var(--pos)); }
.fv-comparador__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); pointer-events: none; }
.fv-comparador__linea::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--azul-900); font: 600 16px/1 var(--f-texto); box-shadow: var(--sombra-2); }
.fv-comparador input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.fv-comparador input[type=range]:focus-visible + .fv-comparador__linea::after { outline: 2px solid var(--foco); outline-offset: 2px; }
.fv-comparador .fv-etiqueta { position: absolute; top: var(--e-3); z-index: 1; pointer-events: none; }
.fv-comparador .fv-etiqueta--antes { left: var(--e-3); }
.fv-comparador .fv-etiqueta--ok { right: var(--e-3); }

/* ── Marquesina de clientes ───────────────────────────── */
.fv-marquesina { overflow: hidden; position: relative; max-width: 100%; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fv-marquesina__pista { display: flex; width: max-content; animation: fv-desliza var(--marquesina) linear infinite; }
.fv-marquesina:hover .fv-marquesina__pista, .fv-marquesina:focus-within .fv-marquesina__pista { animation-play-state: paused; }
.fv-marquesina ul { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); list-style: none; margin: 0; padding: 0 clamp(20px, 2.5vw, 36px); }
.fv-marquesina li { flex: none; display: flex; align-items: center; height: 56px; color: var(--texto-3); opacity: 0.85; transition: opacity var(--m-base), color var(--m-base); }
.fv-marquesina li:hover { opacity: 1; color: var(--texto); }
.fv-marquesina li img { max-width: none; height: auto; filter: grayscale(1) contrast(1.15); opacity: 0.85; transition: filter var(--m-base), opacity var(--m-base); }  /* logo real en gris; el alto viene en el atributo height (área visual pareja) */
.fv-marquesina li:hover img { filter: none; opacity: 1; }
[data-tema="noche"] .fv-marquesina li img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.66; }
[data-tema="noche"] .fv-marquesina li:hover img { filter: grayscale(1) brightness(0) invert(1); opacity: 1; }
.fv-marquesina__nombre { font: 600 var(--t-lg)/1 var(--f-titulo); font-stretch: 105%; white-space: nowrap; letter-spacing: -0.01em; }
.fv-marquesina__nombre small { font: 400 var(--t-xs)/1 var(--f-dato); margin-left: 8px; opacity: 0.8; }
.fv-marquesina__pie { margin-top: var(--e-3); font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); text-align: center; }
@keyframes fv-desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .fv-marquesina { mask-image: none; }
  .fv-marquesina__pista { animation: none; width: auto; }
  .fv-marquesina ul { flex-wrap: wrap; justify-content: center; row-gap: var(--e-3); }
  .fv-marquesina ul[aria-hidden] { display: none; }
}

/* ── Objeción / respuesta ─────────────────────────────── */
.fv-objeciones { border-top: var(--linea); }
.fv-objecion { border-bottom: var(--linea); }
.fv-objecion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-5) 0; font: 600 var(--t-lg)/1.3 var(--f-titulo); }
.fv-objecion summary::-webkit-details-marker { display: none; }
.fv-objecion summary .ico { width: 20px; height: 20px; transition: transform var(--m-base) var(--ease-salida); color: var(--texto-3); }
.fv-objecion[open] summary .ico { transform: rotate(45deg); }
.fv-objecion__respuesta { padding: 0 0 var(--e-5); color: var(--texto-2); }
.fv-objecion__respuesta p:last-child { margin-bottom: 0; }

/* ── Tabla de credenciales ────────────────────────────── */
.fv-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--superficie); border: var(--linea); border-radius: var(--radio-m); overflow: hidden; }
.fv-tabla th { text-align: left; font: 500 var(--t-xs)/1.2 var(--f-dato); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3); padding: var(--e-3) var(--e-4); border-bottom: var(--linea); background: var(--gris-100); }
.fv-tabla td { padding: var(--e-4); border-bottom: var(--linea); vertical-align: top; }
.fv-tabla tr:last-child td { border-bottom: 0; }
.fv-tabla td:first-child { font-weight: 600; }
@media (max-width: 640px) {
  .fv-tabla thead { display: none; }
  .fv-tabla tr { display: block; border-bottom: var(--linea); padding: var(--e-3) 0; }
  .fv-tabla td { display: block; border: 0; padding: var(--e-1) var(--e-4); }
}

/* ── Formulario ───────────────────────────────────────── */
.fv-form { display: grid; gap: var(--e-5); }
.fv-campo { display: grid; gap: var(--e-2); }
.fv-campo label, .fv-campo legend { font-weight: 600; font-size: var(--t-sm); padding: 0; }
.fv-campo .fv-ayuda { font-size: var(--t-xs); color: var(--texto-3); }
.fv-campo input, .fv-campo select, .fv-campo textarea {
  width: 100%; min-height: 48px; padding: var(--e-3) var(--e-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--t-base);
  transition: border-color var(--m-rapido), box-shadow var(--m-rapido);
}
.fv-campo textarea { min-height: 112px; resize: vertical; }
.fv-campo input:focus, .fv-campo select:focus, .fv-campo textarea:focus { outline: none; border-color: var(--azul-600); box-shadow: 0 0 0 3px rgba(48, 69, 128, 0.18); }
fieldset.fv-campo { border: 0; margin: 0; padding: 0; }
.fv-opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.fv-opcion { position: relative; }
.fv-opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fv-opcion span { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m); background: var(--superficie); font-size: var(--t-sm); font-weight: 500; transition: all var(--m-rapido); }
.fv-opcion input:checked + span { border-color: var(--azul-600); background: var(--azul-50); color: var(--azul-700); box-shadow: inset 0 0 0 1px var(--azul-600); }
.fv-opcion input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.fv-opcion .ico { width: 18px; height: 18px; }

/* ── Línea de tiempo ──────────────────────────────────── */
.fv-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fv-tiempo li { display: grid; grid-template-columns: 72px 1fr; gap: var(--e-4); padding: var(--e-4) 0; border-top: var(--linea); }
.fv-tiempo time { font: 600 var(--t-lg)/1.2 var(--f-dato); color: var(--enlace); }
.fv-tiempo p { margin: 0; color: var(--texto-2); }

/* ── Compartir sector ─────────────────────────────────── */
.fv-compartir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-m); background: var(--superficie); }
.fv-compartir p { margin: 0 auto 0 0; font-size: var(--t-sm); color: var(--texto-2); }

/* ── Simulador de apagón (hero insignia) ──────────────── */
.fv-sim { --luz: 1; position: relative; display: grid; gap: var(--e-4); padding: var(--e-5); border: 1px solid var(--borde); border-radius: var(--radio-l); background: rgba(15, 26, 51, 0.72); backdrop-filter: blur(10px); color: var(--texto); }
.fv-sim__cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); }
.fv-sim__titulo { font: 500 var(--t-xs)/1.2 var(--f-dato); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3); }
.fv-interruptor { display: inline-flex; align-items: center; gap: var(--e-3); border: 0; background: none; color: var(--texto); cursor: pointer; font: 600 var(--t-sm)/1 var(--f-texto); padding: 6px 0; white-space: nowrap; }
/* Riel con la regla de estados: verde = hay luz, rojo = apagón (el ámbar queda solo para el llamado principal). */
.fv-interruptor__riel { width: 52px; height: 28px; border-radius: 14px; background: var(--encendido); position: relative; transition: background var(--m-base); }
.fv-interruptor__riel::after { content: ""; position: absolute; top: 3px; left: 27px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left var(--m-base) var(--ease-salida); }
.fv-interruptor[aria-pressed="true"] .fv-interruptor__riel { background: var(--apagado); }
.fv-interruptor[aria-pressed="true"] .fv-interruptor__riel::after { left: 3px; }
.fv-sim svg { width: 100%; height: auto; }
.fv-sim .s-red { transition: stroke var(--m-escena), opacity var(--m-escena); }
.fv-sim .s-ventana { transition: fill var(--m-escena); }
.fv-sim .s-respaldo { transition: fill var(--m-escena), stroke var(--m-escena); }
.fv-sim .s-pulso { stroke-dasharray: 4 10; animation: fv-pulso 1.6s linear infinite; }
@keyframes fv-pulso { to { stroke-dashoffset: -28; } }
@keyframes fv-parpadeo { 50% { opacity: 0.35; } }
.fv-sim .s-led { animation: fv-parpadeo 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fv-sim .s-pulso, .fv-sim .s-led { animation: none; } }
.fv-sim__estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-2) var(--e-4); margin: 0; padding: 0; list-style: none; font: 400 var(--t-xs)/1.4 var(--f-dato); }
.fv-sim__estado li { display: flex; align-items: center; gap: 8px; }
/* Regla (pedido 08-10-2026): el punto de cada estado es verde si está encendido u operando y rojo si está apagado, sin servicio o en espera. */
.fv-sim__estado li { --c: var(--encendido); }
.fv-sim__estado li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); flex: none; transition: background var(--m-base), box-shadow var(--m-base); }
.fv-sim__estado b { font-weight: 500; color: var(--texto); }
.fv-sim__dato { margin: 0; padding-top: var(--e-3); border-top: 1px solid var(--borde); font: 400 var(--t-xs)/1.5 var(--f-dato); color: var(--texto-3); }
.fv-sim__dato strong { color: var(--energia); font-weight: 500; }

/* Estados del simulador (escena isométrica generada por _gen/iso.py).
   Encendido: red pública ámbar, ventanas con luz, respaldo en espera.
   Apagón: red gris, ventanas oscuras salvo la sala de monitoreo, respaldo ámbar; CCTV, acceso y enlaces siguen activos. */
.fv-sim .s-red { stroke: var(--energia); }
.fv-sim .s-ventana { fill: rgba(232, 163, 61, 0.78); }
.fv-sim[data-apagon] .s-red { stroke: #39466a; opacity: 0.6; }
.fv-sim[data-apagon] .s-ventana { fill: #0f1830; }
.fv-sim[data-apagon] .s-ventana.s-critica { fill: rgba(232, 163, 61, 0.78); }
.fv-sim .s-respaldo polygon { transition: stroke var(--m-escena), fill var(--m-escena); }
.fv-sim .s-respaldo { transition: filter var(--m-escena); }
.fv-sim[data-apagon] .s-respaldo polygon { stroke: var(--energia); }
.fv-sim[data-apagon] .s-respaldo { filter: drop-shadow(0 0 10px rgba(232, 163, 61, 0.45)); }
.fv-sim .s-respaldo-luz { fill: #4b587d; transition: fill var(--m-escena); }
.fv-sim[data-apagon] .s-respaldo-luz { fill: var(--energia); }
.fv-sim .s-flujo-respaldo { opacity: 0; transition: opacity var(--m-escena); }
.fv-sim[data-apagon] .s-flujo-respaldo { opacity: 1; }
/* En móvil los rótulos del dibujo quedan ilegibles: la lista de estados ya los explica. */
@media (max-width: 600px) { .fv-sim .s-rotulos { display: none; } }

/* Escena renderizada (kie): dos capas del mismo render, con luz y en apagón; el interruptor cruza entre ellas. */
.fv-sim__escena { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio-m); background: #0d1124; }
.fv-sim__escena img, .fv-sim__escena video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-sim__escena .s-capa-off { opacity: 0; transition: opacity var(--m-escena) var(--ease-salida); }
.fv-sim[data-apagon] .fv-sim__escena .s-capa-off { opacity: 1; }

/* Capas interactivas sobre escenas en video (paso 2): marcas, sombra con huecos, rutas y coberturas.
   Coordenadas en % de la escena; el SVG usa viewBox 0 0 100 75 (4:3) para que los círculos no se deformen. */
.fv-sim__escena { aspect-ratio: 1112 / 834; }
.fv-sim__capa { position: absolute; inset: 0; pointer-events: none; }
.fv-sim__capa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fv-sim .s-sombra { fill: rgba(5, 10, 24, 0.62); opacity: 0; transition: opacity var(--m-escena) var(--ease-salida); }
.fv-sim[data-foco] .s-sombra { opacity: 1; }
.fv-sim .s-hueco { opacity: 0; transition: opacity var(--m-escena) var(--ease-salida); }
.fv-sim .s-hueco.is-on { opacity: 1; }
.fv-sim .s-marca { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-7px, -50%); opacity: 0; transition: opacity var(--m-base); --c: var(--energia); }
.fv-sim .s-marca.s-izq { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.fv-sim .s-marca.is-on { opacity: 1; }
.fv-sim .s-marca i { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--c); background: rgba(11, 20, 40, 0.5); animation: fv-latido 1.8s ease-out infinite; }
.fv-sim .s-marca span { font: 500 11px/1 var(--f-dato); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; padding: 5px 7px; border: 1px solid var(--c); border-radius: var(--radio-s); background: rgba(11, 20, 40, 0.86); white-space: nowrap; }
@keyframes fv-latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* Puntos que se tocan (banca): son botones; la ficha aparece debajo de la escena. */
.fv-sim .s-punto { pointer-events: auto; cursor: pointer; border: 0; padding: 4px; background: none; opacity: 1; }
.fv-sim .s-punto:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--radio-s); }
.fv-sim .s-punto[aria-pressed="true"] span { background: var(--c); color: #0b1428; }
.fv-sim__ficha { margin: 0; min-height: 4.6em; display: grid; gap: 4px; align-content: start; }
.fv-sim__ficha .s-cifra { font: 600 var(--t-2xl)/1 var(--f-titulo); font-stretch: var(--ancho-titulo); color: var(--c, var(--seguridad)); }
.fv-sim__ficha .s-texto { font-size: var(--t-sm); color: var(--texto-2); }
.fv-sim__ficha .s-fuente { font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); }
/* Trazos: rutas, enlaces y coberturas. */
.fv-sim .s-trazo { fill: none; stroke: var(--red); stroke-width: 0.55; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.2px var(--red)); }
.fv-sim .s-trazo--anim { stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); transition: stroke-dashoffset 2.4s var(--ease-salida); }
.fv-sim .s-trazo--anim.is-on { stroke-dashoffset: 0; }
.fv-sim .s-flujo { fill: none; stroke: #fff; stroke-width: 0.35; stroke-dasharray: 0.8 3.2; opacity: 0; animation: fv-flujo 1.4s linear infinite; transition: opacity var(--m-base); }
.fv-sim .s-flujo.is-on { opacity: 0.9; }
@keyframes fv-flujo { to { stroke-dashoffset: -8; } }
.fv-sim .s-empalme { fill: var(--red); stroke: #0b1428; stroke-width: 0.25; opacity: 0; transition: opacity var(--m-base); }
.fv-sim .s-empalme.is-on { opacity: 1; }
.fv-sim .s-cobertura { fill: color-mix(in srgb, var(--seguridad) 22%, transparent); stroke: var(--seguridad); stroke-width: 0.3; stroke-dasharray: 1 1; transition: r var(--m-lento) var(--ease-salida), opacity var(--m-base); }
@media (prefers-reduced-motion: reduce) { .fv-sim .s-marca i, .fv-sim .s-flujo { animation: none; } .fv-sim .s-trazo--anim { transition: none; } }
/* Controles del panel: segmento (capas, sitios) y deslizador (alcance). */
.fv-segmento { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--borde-fuerte); border-radius: 999px; }
.fv-segmento button { border: 0; background: none; color: var(--texto-2); cursor: pointer; font: 600 var(--t-xs)/1 var(--f-texto); padding: 8px 12px; border-radius: 999px; transition: background var(--m-base), color var(--m-base); }
.fv-segmento button[aria-pressed="true"] { background: var(--c, var(--azul-300)); color: #0b1428; }
.fv-segmento button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fv-rango { display: inline-flex; align-items: center; gap: var(--e-3); font: 600 var(--t-sm)/1 var(--f-texto); color: var(--texto); }
.fv-rango input { width: min(200px, 40vw); accent-color: var(--red); }
.fv-sim__estado li.is-off { opacity: 0.4; }
@media (max-width: 600px) { .fv-sim .s-marca span { display: none; } .fv-sim__cab { flex-wrap: wrap; } }

/* ══ Estructura del sitio (guía v1.1, 09-10-2026) ══════════════════════════════════════════════ */
/* ── Barra superior fija ─────────────────────────────── */
.fv-barra { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--borde); }
/* El desenfoque va en un pseudo-elemento: un backdrop-filter en la barra la vuelve el bloque contenedor de sus hijos fijos,
   y el menú móvil (position: fixed) quedaba encerrado en los 68 px de la barra, transparente y detrás del contenido. */
.fv-barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 20, 40, 0.94); backdrop-filter: blur(10px); }
/* Brillo de la línea base del menú: un destello azul claro la recorre en 3 s y se apaga; se repite cada 10 s.
   Se anima background-position (no transform) para que el destello nunca ensanche la página. */
.fv-barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(159, 176, 220, 0.85) 40%, #f2f4f8 50%, rgba(159, 176, 220, 0.85) 60%, transparent 100%) 0 50% / 28% 1px no-repeat,
    radial-gradient(50% 50% at 50% 50%, rgba(159, 176, 220, 0.32) 0%, transparent 100%) 0 50% / 28% 100% no-repeat;
  opacity: 0; animation: fv-brillo-barra 10s linear 2s infinite; }
@keyframes fv-brillo-barra {
  0% { background-position: -40% 50%, -40% 50%; opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { background-position: 140% 50%, 140% 50%; opacity: 0; }
  100% { background-position: 140% 50%, 140% 50%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fv-barra::after { animation: none; display: none; } }
@media print { .fv-barra::after { display: none; } }
.fv-barra__fila { display: flex; align-items: center; gap: var(--e-4); min-height: 68px; }
.fv-barra a, .fv-barra button, .fv-barra .fv-btn { white-space: nowrap; }
.fv-barra__logo img { height: 36px; width: auto; }
.fv-barra__nav { display: none; margin-left: auto; }   /* menú pegado a la derecha, junto a «Agendar evaluación» */
.fv-barra__nav > ul { display: flex; align-items: center; gap: var(--e-1); list-style: none; margin: 0; padding: 0; }
.fv-barra__nav a, .fv-barra__nav button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--e-3); border: 0; border-radius: var(--radio-m); background: none; color: var(--texto-2); font: 500 var(--t-sm)/1 var(--f-texto); text-decoration: none; cursor: pointer; }
.fv-barra__nav a:hover, .fv-barra__nav button:hover, .fv-barra__nav [aria-expanded="true"] { color: var(--texto); background: rgba(255, 255, 255, 0.06); }
.fv-barra__nav > ul > li > a[aria-current="page"] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--energia); border-radius: 0; }
.fv-barra__nav button .ico { width: 16px; height: 16px; transition: transform var(--m-base); }
.fv-barra__nav [aria-expanded="true"] .ico { transform: rotate(180deg); }
.fv-barra__desplegable { position: relative; }
.fv-barra__panel { position: absolute; top: calc(100% + 10px); left: 0; width: min(640px, 80vw); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: var(--e-3); background: var(--azul-900); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-l); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); }
.fv-barra__panel[hidden] { display: none; }
.fv-barra__panel a { display: grid; grid-template-columns: 28px 1fr; gap: 2px var(--e-3); align-items: start; min-height: 0; padding: var(--e-3); color: var(--texto); }
.fv-barra__panel a .ico { grid-row: span 2; width: 24px; height: 24px; color: var(--azul-300); }  /* 70-20-10: secundario, no acento */
.fv-barra__panel a small { color: var(--texto-3); font-size: var(--t-xs); font-weight: 400; line-height: 1.35; }
.fv-barra__panel .s-ancho { grid-column: 1 / -1; border-top: 1px solid var(--borde); margin-top: var(--e-2); padding-top: var(--e-4); }
.fv-barra__acciones { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.fv-barra__wa, .fv-barra__menu { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m); background: none; color: var(--texto); cursor: pointer; }
.fv-barra__wa .ico { color: var(--whatsapp); }
.fv-barra__acciones .fv-btn { display: none; }
@media (min-width: 768px) { .fv-barra__acciones .fv-btn { display: inline-flex; } }
@media (min-width: 1100px) { .fv-barra__nav { display: block; } .fv-barra__menu { display: none; } .fv-barra__acciones { margin-left: 0; } }
/* Menú móvil a pantalla completa */
.fv-menu-movil { position: fixed; inset: 68px 0 0; z-index: 49; overflow-y: auto; padding: var(--e-5) var(--margen) calc(var(--e-9) + env(safe-area-inset-bottom)); background: var(--azul-950); }
.fv-menu-movil[hidden] { display: none; }
.fv-menu-movil ul { list-style: none; margin: 0 0 var(--e-6); padding: 0; }
.fv-menu-movil a { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none; font: 600 var(--t-lg)/1.2 var(--f-titulo); font-stretch: var(--ancho-titulo); }
.fv-menu-movil a .ico { color: var(--c, var(--azul-300)); }
.fv-menu-movil a { white-space: nowrap; font-size: clamp(1.0625rem, 5vw, var(--t-lg)); }  /* una sola línea por enlace */
.fv-menu-movil .fv-rotulo { margin-top: var(--e-5); }
@media (min-width: 1100px) { .fv-menu-movil { display: none !important; } }
/* Barra inferior fija en móvil: los dos caminos de contacto */
.fv-barra-inferior { position: fixed; inset: auto 0 0; z-index: 48; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); padding: var(--e-2) var(--e-3) calc(var(--e-2) + env(safe-area-inset-bottom)); background: rgba(11, 20, 40, 0.96); border-top: 1px solid var(--borde); }
.fv-barra-inferior .fv-btn { min-height: 48px; font-size: var(--t-sm); padding: 0 var(--e-3); }
@media (min-width: 768px) { .fv-barra-inferior { display: none; } }
/* Migas de pan */
.fv-migas ol { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); list-style: none; margin: 0; padding: 0; font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); }
.fv-migas li + li::before { content: "/"; margin-right: var(--e-2); opacity: 0.6; }
.fv-migas a { color: inherit; text-decoration: none; }
.fv-migas a:hover { color: var(--texto); text-decoration: underline; }
.fv-migas [aria-current] { color: var(--texto); }
/* Pie de página */
/* Pie: escena del Lago de Maracaibo (ilustración) arriba, columnas con filete y la palabra FAVINCA gigante que se funde hacia arriba.
   Tres versiones: móvil < 768 (1 columna) · tablet 768-1099 (sectores a todo el ancho, Favinca | Contacto) · escritorio ≥ 1100 (3 columnas). */
.fv-pie { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; background: #0b1428; color: var(--texto); }
.fv-pie__escena { position: absolute; inset: 0 0 auto; z-index: -2; height: max(58cqi, 340px); overflow: hidden; overflow: clip; }
/* La escena va en capas con profundidad (pie.js). El lienzo tiene la proporción de la ilustración y la altura de la escena
   (como object-fit: cover, que aquí siempre recorta solo a los lados); --pie-x hace de object-position horizontal. */
.fv-pie__lienzo { position: absolute; top: 0; left: var(--pie-x, 50%); height: 100%; translate: calc(-1 * var(--pie-x, 50%)) 0; }
.fv-pie__capa { position: absolute; max-width: none; transform-origin: 0 0; }
.fv-pie__lienzo.is-vivo .fv-pie__capa { will-change: transform; }
.fv-pie__escena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 40, 0.15) 0%, rgba(11, 20, 40, 0) 22%, rgba(11, 20, 40, 0.35) 52%, #0b1428 92%); }
.fv-pie::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }  /* grano de película */
.fv-pie__cuerpo { width: min(100% - 2 * var(--margen), var(--ancho-max, 1280px)); margin-inline: auto; padding-top: var(--e-6); }
.fv-pie__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); margin-bottom: max(30cqi, 200px); }
.fv-pie__marca img { height: 36px; width: auto; }
.fv-pie__lema { margin: 0; text-align: right; font: 700 clamp(13px, 1.5cqi, 18px)/1.2 var(--f-titulo); font-stretch: var(--ancho-titulo); letter-spacing: 0.04em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--energia) 0%, #f2f4f8 70%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.fv-pie__grid { display: grid; gap: var(--e-7) var(--e-6); }
.fv-pie h2 { margin: 0 0 var(--e-4); padding-bottom: var(--e-3); border-bottom: 1px solid rgba(242, 244, 248, 0.55); font: 700 var(--t-lg)/1 var(--f-titulo); font-stretch: var(--ancho-titulo); letter-spacing: 0.01em; text-transform: uppercase; color: #f2f4f8; }
.fv-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.fv-pie__col--sectores ul { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); column-gap: var(--e-6); }
.fv-pie a { color: #c3cbe0; text-decoration: none; font-weight: 300; font-size: var(--t-base); white-space: nowrap; transition: color var(--m-base); }  /* cada enlace en una línea */
.fv-pie a:hover, .fv-pie a:focus-visible { color: #fff; }
.fv-pie__contacto { display: grid; gap: var(--e-2); }
.fv-pie__contacto a, .fv-pie__contacto > span { display: inline-flex; align-items: center; gap: var(--e-2); white-space: nowrap; color: #c3cbe0; font-weight: 300; }  /* un dato por línea */
.fv-pie__contacto .ico { width: 18px; height: 18px; color: var(--azul-300); }
/* Redes del pie: solo íconos en una fila. Hover: anillo de luz que gira (ámbar → cian), resplandor y el ícono toma el color de la red. */
.fv-pie__redes { display: flex; gap: var(--e-3); margin-top: var(--e-5); }
.fv-pie__redes a { position: relative; isolation: isolate; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(242, 244, 248, 0.28);
  color: #c3cbe0; background: rgba(23, 38, 75, 0.35); transition: transform var(--m-base) var(--ease-salida), color var(--m-base), border-color var(--m-base), background var(--m-base); }
.fv-pie__redes .ico { width: 30px; height: 30px; transition: transform var(--m-base) var(--ease-salida), filter var(--m-base); }
.fv-pie__redes a::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 50%; opacity: 0; transition: opacity var(--m-base);
  background: conic-gradient(from 0deg, transparent 0 55%, var(--energia) 72%, var(--red) 88%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.fv-pie__redes a::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%; opacity: 0; transition: opacity var(--m-base);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 28%, transparent) 0%, transparent 70%); }
.fv-pie__redes a:hover, .fv-pie__redes a:focus-visible { color: var(--c); border-color: transparent; background: rgba(23, 38, 75, 0.7); transform: translateY(-3px); }
.fv-pie__redes a:hover::before, .fv-pie__redes a:focus-visible::before { opacity: 1; animation: fv-anillo 1.6s linear infinite; }
.fv-pie__redes a:hover::after, .fv-pie__redes a:focus-visible::after { opacity: 1; }
.fv-pie__redes a:hover .ico, .fv-pie__redes a:focus-visible .ico { transform: scale(1.06); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); }
@keyframes fv-anillo { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .fv-pie__redes a:hover::before { animation: none; } }
.fv-pie__boton { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--e-5); padding: 0 var(--e-5); border: 1px solid rgba(242, 244, 248, 0.85); border-radius: 999px; color: #f2f4f8 !important; font-weight: 400 !important; font-size: var(--t-sm) !important; transition: background var(--m-base), color var(--m-base), border-color var(--m-base); }
.fv-pie__boton:hover, .fv-pie__boton:focus-visible { background: var(--energia); border-color: var(--energia); color: #0b1428 !important; }
.fv-pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-5); margin-top: var(--e-8); padding-top: var(--e-4); border-top: 1px solid var(--borde); font: 400 var(--t-xs)/1.5 var(--f-dato); color: var(--texto-3); }
.fv-pie__legal a { font-size: inherit; font-weight: 400; color: var(--texto-3); }
.fv-pie__palabra { margin: var(--e-6) 0 -0.035em; text-align: center; white-space: nowrap; font: 900 17.2cqi/1 var(--f-titulo); font-stretch: 125%; letter-spacing: -0.02em; user-select: none; pointer-events: none;
  background: linear-gradient(0deg, #f2f4f8 8%, rgba(242, 244, 248, 0.55) 46%, rgba(242, 244, 248, 0) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) {   /* tablet e iPad */
  .fv-pie__grid { grid-template-columns: 1fr 1fr; }
  .fv-pie__col--sectores { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {  /* escritorio */
  .fv-pie__grid { grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: clamp(32px, 5cqi, 80px); }
  .fv-pie__col--sectores { grid-column: auto; }
}
@media (max-width: 767px) {   /* móvil */
  .fv-pie__cabeza { flex-direction: column; align-items: flex-start; margin-bottom: max(46cqi, 170px); }
  .fv-pie__lema { text-align: left; }
  .fv-pie__escena { height: max(92cqi, 320px); }
  .fv-pie__lienzo { --pie-x: 38%; }
  .fv-pie { padding-bottom: 72px; }  /* deja ver la palabra sobre la barra inferior fija */
}

/* Submenú «Sectores»: barrido de luz que baja por el panel, ítems en cascada y destello del ícono. Al cerrar sale sin golpe. */
.fv-barra__panel:not([hidden]) { animation: fv-panel-abre var(--m-lento) var(--ease-salida) both; }
.fv-barra__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--energia) 30%, var(--red) 70%, transparent); box-shadow: 0 0 14px 1px rgba(232, 163, 61, 0.55); }
.fv-barra__panel:not([hidden]):not([data-cierra])::before { animation: fv-panel-barrido calc(var(--m-lento) * 1.6) cubic-bezier(.5, 0, .3, 1) both; }
.fv-barra__panel:not([hidden]) a { animation: fv-panel-item var(--m-lento) var(--ease-salida) both; animation-delay: calc(90ms + var(--i, 0) * 45ms); }
.fv-barra__panel:not([hidden]) a .ico { animation: fv-panel-chispa calc(var(--m-lento) * 2) ease-out both; animation-delay: calc(140ms + var(--i, 0) * 45ms); }
.fv-barra__panel a:nth-child(2) { --i: 1; } .fv-barra__panel a:nth-child(3) { --i: 2; } .fv-barra__panel a:nth-child(4) { --i: 3; }
.fv-barra__panel a:nth-child(5) { --i: 4; } .fv-barra__panel a:nth-child(6) { --i: 5; } .fv-barra__panel a:nth-child(7) { --i: 6; }
.fv-barra__panel a { position: relative; border-radius: var(--radio-m); transition: background var(--m-base); }
.fv-barra__panel a::after { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: var(--c, var(--energia)); transform: scaleY(0); transition: transform var(--m-base) var(--ease-salida); }
.fv-barra__panel a:hover, .fv-barra__panel a:focus-visible { background: rgba(159, 176, 220, 0.08); }
.fv-barra__panel a:hover::after, .fv-barra__panel a:focus-visible::after { transform: scaleY(1); }
.fv-barra__panel a:hover .ico, .fv-barra__panel a:focus-visible .ico { color: var(--c, var(--azul-300)); }
.fv-barra__panel[data-cierra] { animation: fv-panel-cierra 170ms ease-in both; }
.fv-barra__panel[data-cierra] a, .fv-barra__panel[data-cierra] a .ico { animation: none; }
@keyframes fv-panel-abre { from { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0 round var(--radio-l)); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--radio-l)); } }
@keyframes fv-panel-barrido { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fv-panel-item { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fv-panel-chispa { 0% { color: var(--c, var(--energia)); filter: drop-shadow(0 0 6px var(--c, var(--energia))); } 100% { color: var(--azul-300); filter: none; } }
@keyframes fv-panel-cierra { to { opacity: 0; transform: translateY(-6px); } }
/* Menú móvil: los enlaces entran en cascada. */
.fv-menu-movil:not([hidden]) li { animation: fv-panel-item var(--m-lento) var(--ease-salida) both; animation-delay: calc(60ms + var(--i, 0) * 35ms); }
.fv-menu-movil li:nth-child(2) { --i: 1; } .fv-menu-movil li:nth-child(3) { --i: 2; } .fv-menu-movil li:nth-child(4) { --i: 3; }
.fv-menu-movil li:nth-child(5) { --i: 4; } .fv-menu-movil li:nth-child(6) { --i: 5; } .fv-menu-movil li:nth-child(7) { --i: 6; }
@media (prefers-reduced-motion: reduce) {
  .fv-barra__panel, .fv-barra__panel::before, .fv-barra__panel a, .fv-barra__panel a .ico, .fv-menu-movil li { animation: none !important; }
}

/* ══ Bloques de página ════════════════════════════════════════════════════════════════════════ */
/* El dolor del sector: foto ilustrativa grande + las palabras del comprador */
.fv-dolor { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 1024px) { .fv-dolor { grid-template-columns: 1.15fr 1fr; } }
.fv-dolor .fv-ilustrativa { aspect-ratio: 16 / 10; border-radius: var(--radio-m); }
.fv-dolor__lista { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.fv-dolor__lista li { display: grid; grid-template-columns: 24px 1fr; gap: var(--e-3); color: var(--texto-2); }
.fv-dolor__lista .ico { width: 22px; height: 22px; color: var(--texto-3); margin-top: 2px; }
.fv-dolor__lista q { color: var(--texto); font-weight: 600; quotes: "«" "»"; }
/* Tres líneas que encajan */
.fv-lineas { display: grid; gap: var(--canal); }
@media (min-width: 900px) { .fv-lineas { grid-template-columns: repeat(3, 1fr); } }
.fv-lineas article { padding: var(--e-6) var(--e-5) var(--e-5); background: var(--superficie); border: var(--linea); border-top: 3px solid var(--c); border-radius: var(--radio-m); }
.fv-lineas .ico { width: 32px; height: 32px; color: var(--c); margin-bottom: var(--e-4); }
.fv-lineas h3 { font-size: var(--t-xl); }
.fv-lineas ul { margin: 0; padding-left: 1.1em; color: var(--texto-2); font-size: var(--t-sm); display: grid; gap: 6px; }
.fv-lineas__nota { margin-top: var(--e-5); display: flex; align-items: center; gap: var(--e-3); font: 500 var(--t-sm)/1.4 var(--f-dato); color: var(--texto-2); }
.fv-lineas__nota img { width: 28px; height: auto; }
/* Tarjeta de sector (índice de la home y de /sectores/) */
.fv-sector { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio-m); background: var(--superficie); color: inherit; text-decoration: none; transition: border-color var(--m-base), transform var(--m-base) var(--ease-salida); }
.fv-sector:hover { border-color: var(--borde-fuerte); transform: translateY(-2px); text-decoration: none; }
.fv-sector__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0d1124; }
.fv-sector__img img { width: 100%; height: 100%; object-fit: cover; }
.fv-sector__cuerpo { display: grid; gap: var(--e-2); padding: var(--e-4) var(--e-5) var(--e-5); align-content: start; }
.fv-sector__cuerpo h3 { font-size: var(--t-xl); margin: 0; }
.fv-sector__cuerpo p { margin: 0; font-size: var(--t-sm); color: var(--texto-2); }
.fv-sector .fv-enlace-flecha { margin-top: var(--e-2); color: var(--enlace); font-size: var(--t-sm); }
/* Galería de obra tipo hoja de contacto + caja de luz */
.fv-galeria { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; margin: 0; padding: 0; }
.fv-galeria button { display: grid; gap: 6px; width: 100%; padding: var(--e-1); border: var(--linea); border-radius: var(--radio-s); background: var(--superficie); cursor: zoom-in; text-align: left; color: var(--texto-3); font: 400 10.5px/1.3 var(--f-dato); }
.fv-galeria button:hover { border-color: var(--borde-fuerte); }
.fv-galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }
.fv-caja-luz { width: min(1000px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radio-l); background: var(--azul-950); color: #f2f4f8; }
.fv-caja-luz::backdrop { background: rgba(5, 10, 24, 0.82); }
.fv-caja-luz figure { margin: 0; display: grid; }
.fv-caja-luz img { width: 100%; max-height: 74vh; object-fit: contain; background: #000; }
.fv-caja-luz figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); padding: var(--e-4) var(--e-5); font: 400 var(--t-xs)/1.5 var(--f-dato); color: #c3cbe0; }
.fv-caja-luz figcaption b { color: #fff; font-weight: 500; }
.fv-caja-luz__cerrar { position: absolute; top: var(--e-3); right: var(--e-3); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(11, 20, 40, 0.8); color: #fff; cursor: pointer; }
/* Banda de llamado a la acción (final de página, Alquiler Tecnológico) */
/* Banda final: a sangre, pegada al pie, fondo en parallax (componentes.js mueve .fv-banda__fondo). */
.fv-banda { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 11vw, 150px); background: #0b1428; color: #f2f4f8; }
.fv-banda__fondo { position: absolute; inset: -18% 0; z-index: -2; will-change: transform; }
.fv-banda__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.fv-banda::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(11, 20, 40, 0.55) 0%, rgba(11, 20, 40, 0) 26%, rgba(11, 20, 40, 0) 70%, #0b1428 100%),
  linear-gradient(90deg, rgba(11, 20, 40, 0.95) 0%, rgba(11, 20, 40, 0.86) 38%, rgba(11, 20, 40, 0.5) 72%, rgba(11, 20, 40, 0.3) 100%); }
.fv-banda__grid { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .fv-banda__grid { grid-template-columns: 1.3fr auto; } }
@media (max-width: 767px) { .fv-banda::before { background: linear-gradient(180deg, rgba(11, 20, 40, 0.7) 0%, rgba(11, 20, 40, 0.88) 55%, #0b1428 100%); } }
.fv-banda h2 { font-size: var(--t-3xl); margin-bottom: var(--e-3); max-width: 18ch; }
.fv-banda p { color: #c3cbe0; margin: 0; max-width: 56ch; }
.fv-banda__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
/* Unión banda → pie: el cielo del pie nace del navy de la banda, sin corte. */
main:has(> .fv-banda:last-child) + .fv-pie .fv-pie__escena::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: clamp(90px, 14cqi, 200px); background: linear-gradient(180deg, #0b1428 0%, rgba(11, 20, 40, 0.6) 45%, rgba(11, 20, 40, 0) 100%); pointer-events: none; }
@media (max-width: 767px) { .fv-banda::before { background: linear-gradient(180deg, rgba(11, 20, 40, 0.62) 0%, rgba(11, 20, 40, 0.84) 55%, #0b1428 100%); } }
@media print { .fv-banda__fondo, .fv-banda::before { display: none; } .fv-banda { background: none; color: #000; padding-block: 8mm; } .fv-banda p { color: #333; } }
/* Blog: tarjeta y cabecera de artículo */
.fv-art { display: grid; gap: var(--e-3); align-content: start; color: inherit; text-decoration: none; }
.fv-art__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radio-m); background: var(--gris-100); }
.fv-art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-lento) var(--ease-salida); }
.fv-art:hover .fv-art__img img { transform: scale(1.03); }
.fv-art__img .fv-etiqueta { position: absolute; left: var(--e-2); bottom: var(--e-2); }
.fv-art h3 { font-size: var(--t-xl); margin: 0; }
.fv-art:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.fv-art__meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); }
.fv-resumen { margin: var(--e-6) 0; padding: var(--e-5); border: var(--linea); border-left: 3px solid var(--azul-600); border-radius: var(--radio-s); background: var(--superficie); }
.fv-resumen h2 { font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3); margin-bottom: var(--e-3); }
.fv-resumen ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-2); font-weight: 500; }
/* Avisos y estados del formulario */
.fv-aviso { display: grid; grid-template-columns: 24px 1fr; gap: var(--e-3); padding: var(--e-4); border-radius: var(--radio-m); border: 1px solid; font-size: var(--t-sm); }
.fv-aviso .ico { width: 22px; height: 22px; }
.fv-aviso p { margin: 0; }
.fv-aviso--ok { background: var(--ok-fondo); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.fv-aviso--error { background: var(--antes-fondo); border-color: color-mix(in srgb, var(--antes) 35%, transparent); color: var(--antes); }
.fv-aviso--info { background: var(--azul-50); border-color: var(--azul-100); color: var(--azul-700); }
.fv-campo [aria-invalid="true"] { border-color: var(--antes); box-shadow: 0 0 0 3px rgba(154, 59, 46, 0.14); }
.fv-campo .fv-error { font-size: var(--t-xs); color: var(--antes); font-weight: 500; }
.fv-form[data-estado="enviando"] [type="submit"] { opacity: 0.7; pointer-events: none; }
.fv-form [data-si] { display: none; }
.fv-form[data-estado="enviando"] [data-si~="enviando"], .fv-form[data-estado="ok"] [data-si~="ok"], .fv-form[data-estado="error"] [data-si~="error"] { display: grid; }
.fv-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }  /* honeypot anti-spam */

/* ══ Impresión: cada página de sector sale como brochure A4 limpio ═══════════════════════════════ */
.fv-solo-impresion { display: none; }
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  body { background: #fff; color: #0f1a33; font-size: 10.5pt; }
  [data-tema="noche"] { --texto: #0f1a33; --texto-2: #4a4644; --texto-3: #5f5a58; --borde: #dedad6; --borde-fuerte: #c9c5c2; background: #fff !important; color: #0f1a33; }
  .fv-barra, .fv-barra-inferior, .fv-menu-movil, .fv-compartir, .fv-sim__cab button, .fv-sim__cab .fv-segmento, .fv-sim__cab .fv-rango, .fv-btn, .fv-marquesina__pista ul[aria-hidden], .fv-caja-luz, .fv-no-imprimir { display: none !important; }
  .fv-solo-impresion { display: block; }
  .fv-plano { background-image: none; }
  .fv-sim { backdrop-filter: none; background: #fff; border-color: #dedad6; }
  .fv-sim__capa, .fv-sim__escena video.s-capa-off { display: none; }
  .fv-marquesina { mask-image: none; }
  .fv-marquesina__pista { animation: none; width: auto; }
  .fv-marquesina ul { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
  h1 { font-size: 26pt; } h2 { font-size: 17pt; break-after: avoid; } h3 { font-size: 13pt; break-after: avoid; }
  section, .fv-caso, .fv-cifra, .fv-foto-obra, .fv-objecion, figure { break-inside: avoid; }
  .fv-seccion { padding-block: 8mm; }
  a { color: inherit; text-decoration: none; }
  .fv-pie { padding: 6mm 0 0; border-top: 1px solid #dedad6; }
  .fv-pie__escena, .fv-pie__palabra, .fv-pie::after, .fv-pie__boton { display: none !important; }
  .fv-pie__cabeza { margin-bottom: 4mm; }
  .fv-pie h2, .fv-pie a, .fv-pie__contacto a, .fv-pie__contacto > span { color: #1f1d1c !important; border-color: #c9c5c2; }
  .fv-portada-pdf { break-after: page; min-height: 250mm; display: grid; align-content: space-between; padding: 10mm 0; }
}

/* Menú móvil abierto: la página de fondo no se desplaza. */
.fv-sin-scroll { overflow: hidden; }
/* Interruptor de ruta (telecom): apagado = gris a la izquierda; trazada = cian a la derecha. */
.fv-sim[data-fv="ruta"] .fv-interruptor__riel { background: #39466a; }
.fv-sim[data-fv="ruta"] .fv-interruptor__riel::after { left: 3px; }
.fv-sim[data-fv="ruta"] .fv-interruptor[aria-pressed="true"] .fv-interruptor__riel { background: var(--red); }
.fv-sim[data-fv="ruta"] .fv-interruptor[aria-pressed="true"] .fv-interruptor__riel::after { left: 27px; }

/* Palabra resaltada dentro de un título. Guía §70-20-10: va en el 20 % de marca (azul 600 sobre papel, azul 300 sobre noche);
   el ámbar es acento (10 %) y la guía lo prohíbe en texto de lectura. */
.fv-resalte { display: block; margin-top: 0.12em; font-style: normal; font-size: 0.62em; font-weight: 500; letter-spacing: -0.005em; color: var(--azul-600); }   /* segunda línea del título: ×0,62, peso medio, azul (guía: cambian 3 de 4 variables) */
[data-tema="noche"] .fv-resalte { color: var(--azul-300); }

/* Línea 1 corta de un título sin partir: SOLO en la sección del simulador de la home (el lema de la home),
   que tiene columna ancha. En el resto la línea se parte normal para no esconderse detrás de escenas o fotos. */
@media (min-width: 768px) { .fv-hero--sec .fv-nw { white-space: nowrap; } }
/* Logos de clientes un 35 % más grandes (pedido 09-10-2026). zoom escala el logo y su caja a la vez. */
.fv-marquesina li { height: 76px; }
.fv-marquesina li img { zoom: 1.35; }
/* Cifras que cuentan desde 0 (componentes.js · data-fv="cifras"): aparecen una por una. */
.fv-cifras.is-por-contar .fv-cifra { opacity: 0; transform: translateY(14px); }
.fv-cifras .fv-cifra.is-contando { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-salida), transform 0.6s var(--ease-salida); }
.fv-cifra__valor { font-variant-numeric: tabular-nums; }
/* Cifras en azul de marca (pedido 14-10-2026): el mismo azul del remate de los títulos; sobre noche, azul 300. */
.fv-cifras .fv-cifra__valor { color: var(--azul-600); }
[data-tema="noche"] .fv-cifras .fv-cifra__valor { color: var(--azul-300); }