/* Marco W3 «Plano» de los asistentes del portal ONWIFIX (encargo asistentes-portal, 27/10/2026; diseno/asistentes-portal/ referencia.html y escenas/escenas.html): /profesionales (#acog-pro), alta de fibra (#acog-alta), plan de mantenimiento y presupuesto (#acog-srv) y comunidades (#acog-com). Caja de 960 px (también la cabecera mínima y el pie B), banda blanca de escena con retícula de puntos, rótulo en mono arriba a la derecha y aviso en pastilla azul abajo; progreso «02 / 06» en mono; lo ya contestado en etiquetas con «Cambiar»; respuestas en filas grandes (la elegida, borde azul marino de 2 px); Atrás y Continuar fijos abajo en el móvil; «Solicitud recibida» con tres pasos y Sara. Las reglas del marco salieron de profesionales.css tal cual: :is() de los cuatro ids pesa lo mismo que #acog-pro, así que /profesionales se ve igual. Lo propio de cada escena va al final, con el id de su asistente. Nombres de clase propios (.pb, .ld, .pn, .opt): .btn, .lead y .nav son de Bootstrap. */ html:has(:is(#acog-pro, #acog-alta, #acog-srv, #acog-com)) { --acog-ancho: 960px; } #wrapwrap #wrap:is(.pro-w, .aw3-w) { background: #F3F5F9; } html:has(:is(#acog-pro, #acog-alta, #acog-srv, #acog-com)) #wrapwrap footer .ft.bm { background: #F3F5F9; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) { --ink: #172049; --btn: #3B63E0; --x: #2D6BFF; --gray: #5E6577; --panel: #F3F5F9; --line: #DDE1EA; --dot: #C5CBD8; --mono: 'ACOG Plex Mono', 'IBM Plex Mono', ui-monospace, monospace; font-family: 'ACOG Plex', 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) *, :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) *::before, :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) *::after { box-sizing: border-box; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) a { color: inherit; text-decoration: none; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) input, :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) textarea { font: inherit; color: inherit; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) :focus-visible { outline: 2px solid var(--x); outline-offset: 2px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) h1:focus { outline: none; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) [hidden] { display: none !important; } /* banda de escena */ :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .band { background: #FFFFFF; border-bottom: 1px solid var(--line); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .band .in { max-width: 960px; margin: 0 auto; position: relative; background-image: radial-gradient(var(--dot) 1.1px, transparent 1.3px); background-size: 20px 20px; background-position: 10px 10px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .band svg { display: block; width: 100%; height: auto; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .cap { position: absolute; top: 12px; right: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--gray); text-transform: uppercase; text-align: right; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .toast { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 6px); background: var(--btn); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.3; padding: 7px 14px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .toast:empty { display: none; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .toast.on { opacity: 1; transform: translate(-50%, 0); transition-delay: 1.3s; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .prog { max-width: var(--acog-ancho); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px var(--acog-margen, 32px) 14px; font-family: var(--mono); font-size: 12px; color: var(--gray); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .prog .bars { display: flex; gap: 4px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .prog .bars i { display: block; width: 34px; height: 3px; background: var(--line); border-radius: 2px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .prog .bars i.on { background: var(--ink); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .prog .name { margin-left: auto; } /* contenido */ :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .wrap { max-width: var(--acog-ancho); margin: 0 auto; padding: 28px var(--acog-margen, 32px) 48px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; font-size: 14px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .chips span { background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .chips em { font-style: normal; color: var(--gray); margin-right: 2px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .chips a { color: var(--btn); font-weight: 600; padding: 12px 4px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) h1 { font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; max-width: 720px; margin: 0; color: var(--ink); font-family: inherit; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .ld { font-size: 17px; font-weight: 400; color: var(--gray); margin: 10px 0 22px; max-width: 640px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .ld b { font-weight: 600; color: var(--ink); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .sub { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 26px 0 10px; color: var(--ink); font-family: inherit; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .sub.first { margin-top: 0; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .ops { display: grid; gap: 10px; max-width: 720px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 16px; align-items: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; cursor: pointer; min-height: 64px; margin: 0; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt:has(input:focus-visible) { outline: 2px solid var(--x); outline-offset: 2px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt b { font-size: 19px; font-weight: 600; display: block; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt span span { font-size: 14.5px; color: var(--gray); display: block; margin-top: 2px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt .rd { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #B0B6C6; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt .cb { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #B0B6C6; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) :is(.opt.sel, .opt[aria-pressed="true"]) { border: 2px solid var(--ink); padding: 17px 19px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) :is(.opt.sel, .opt[aria-pressed="true"]) .rd { border: 6px solid var(--ink); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) :is(.opt.sel, .opt[aria-pressed="true"]) .cb { background: var(--ink); border-color: var(--ink); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 720px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .grid2 .opt { min-height: 54px; padding: 14px 16px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .grid2 :is(.opt.sel, .opt[aria-pressed="true"]) { padding: 13px 15px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .grid2 .opt b { font-size: 16px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 720px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl label { display: block; margin: 0; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl label.w { grid-column: 1 / -1; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl .l { display: block; font-size: 13px; color: var(--gray); margin-bottom: 4px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl input, :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl textarea { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; padding: 0 14px; font-size: 16px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl textarea { min-height: 84px; padding: 12px 14px; resize: vertical; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl input:focus, :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl textarea:focus { border-color: var(--ink); outline: none; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .fl .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .priv { position: relative; display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; max-width: 720px; font-size: 14.5px; color: var(--gray); cursor: pointer; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .priv input { position: absolute; opacity: 0; width: 1px; height: 1px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .priv .cb { width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 6px; flex: none; background: #FFFFFF; display: grid; place-items: center; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .priv input:checked + .cb { background: var(--ink); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .priv input:checked + .cb::after { content: ""; width: 6px; height: 11px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .priv input:focus-visible + .cb { outline: 2px solid var(--x); outline-offset: 2px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .priv a { color: var(--btn); font-weight: 600; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .msg { margin: 14px 0 0; max-width: 720px; min-height: 0; font-size: 14.5px; color: #B4261A; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .msg:empty { display: none; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; max-width: 720px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .pb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 12px; background: var(--btn); color: #FFFFFF; font-weight: 600; font-size: 17px; line-height: 1.2; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .pb:disabled { opacity: .4; cursor: not-allowed; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .pb.o { background: #FFFFFF; color: var(--ink); border: 1.5px solid var(--line); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .pb svg { width: 16px; height: 16px; flex: none; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .pb .wai { width: 18px; height: 18px; } /* recibido */ :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec h1 { font-size: 38px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .next { margin: 18px 0 0; max-width: 640px; font-size: 18px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .steps { list-style: none; margin: 22px 0 0; padding: 0; max-width: 720px; border-top: 1px solid var(--line); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .steps li { display: grid; grid-template-columns: 28px 160px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .steps li i { font-family: var(--mono); font-style: normal; font-size: 13px; color: var(--gray); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .steps li b { font-weight: 600; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .steps li span { color: var(--gray); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .who { margin-top: 22px; max-width: 720px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .who .av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ink); } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .who > span { flex: 1 1 180px; min-width: 0; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .who .pb { margin-left: auto; min-height: 48px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com)[data-rec="1"] .wrap { padding-bottom: 72px; } /* móvil: Atrás y Continuar fijos abajo */ @media (max-width: 760px) { :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .prog .bars i { width: 24px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .wrap { padding: 22px var(--acog-margen, 16px) 32px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) h1 { font-size: 28px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec h1 { font-size: 30px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .ld { font-size: 16px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .opt b { font-size: 17px; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) :is(.grid2, .fl) { grid-template-columns: 1fr; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .pn { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 0; max-width: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid var(--line); } html:has(:is(#acog-pro, #acog-alta, #acog-srv, #acog-com)) .acab.min .tel { display: none; } /* como la referencia: en el móvil, logo y bloque de WhatsApp */ :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .steps li { grid-template-columns: 24px 1fr; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .steps li span { grid-column: 2; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .who { flex-wrap: wrap; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com) .rec .who .pb { margin-left: 0; width: 100%; } :is(#acog-pro, #acog-alta, #acog-srv, #acog-com)[data-rec="1"] .wrap { padding-bottom: 32px; } html:has(:is(#acog-pro, #acog-alta, #acog-srv, #acog-com).con-nav) #wrapwrap footer .ft.bm { padding-bottom: 96px; } } /* ---------- asistentes del portal (alta de fibra, mantenimiento, presupuesto, comunidades) ---------- */ /* la pregunta, en Plex 600 a 44 px (30 px en el móvil); lo demás, como /profesionales */ :is(#acog-alta, #acog-srv, #acog-com) h1 { font-size: 44px; line-height: 1.08; text-wrap: balance; } :is(#acog-alta, #acog-srv, #acog-com) .k { margin-bottom: 10px; } :is(#acog-alta, #acog-srv, #acog-com) .k + h1 { margin-bottom: 22px; } :is(#acog-alta, #acog-srv, #acog-com) .ld { margin-top: -10px; } :is(#acog-alta, #acog-srv, #acog-com) section > .sub:first-of-type { margin-top: 4px; } /* filas: botones con aria-pressed (la lógica de siempre); precio al mes en la de la fibra */ :is(#acog-alta, #acog-srv, #acog-com) button.opt { width: 100%; text-align: left; line-height: 1.3; } :is(#acog-alta, #acog-srv, #acog-com) .opt.pr { grid-template-columns: minmax(0,1fr) auto 24px; } :is(#acog-alta, #acog-srv, #acog-com) .opt .op-p { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } :is(#acog-alta, #acog-srv, #acog-com) .opt .op-p b { font-size: 22px; white-space: nowrap; } :is(#acog-alta, #acog-srv, #acog-com) .opt .op-p em { font-style: normal; font-size: 12px; color: var(--gray); white-space: nowrap; margin-top: 0; } :is(#acog-alta, #acog-srv, #acog-com) :is(.opt.sel, .opt[aria-pressed="true"]) .cb::after { content: ""; display: block; width: 6px; height: 11px; margin: 1px auto 0; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* campos: etiqueta normal, no en mayúsculas */ :is(#acog-alta, #acog-srv, #acog-com) .fs { display: grid; gap: 16px; max-width: 720px; } :is(#acog-alta, #acog-srv, #acog-com) .f .l { display: block; font-size: 15px; color: #3A4260; margin-bottom: 6px; } :is(#acog-alta, #acog-srv, #acog-com) .i { display: block; width: 100%; min-height: 54px; border: 1px solid #C5CBD8; border-radius: 12px; background: #FFFFFF; padding: 0 14px; font-size: 16px; color: var(--ink); } :is(#acog-alta, #acog-srv, #acog-com) textarea.i { min-height: 120px; padding: 14px; line-height: 1.5; resize: vertical; } :is(#acog-alta, #acog-srv, #acog-com) input[type="file"].i { padding: 14px; border-style: dashed; border-width: 1.5px; border-color: #B0B6C6; } :is(#acog-alta, #acog-srv, #acog-com) .i:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); } :is(#acog-alta, #acog-srv, #acog-com) .geo { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 1.5px dashed #B0B6C6; border-radius: 12px; background: #FFFFFF; color: var(--btn); font-weight: 600; font-size: 16px; } :is(#acog-alta, #acog-srv, #acog-com) .lnk { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; color: var(--btn); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } :is(#acog-alta, #acog-srv, #acog-com) .msg { color: var(--gray); } :is(#acog-alta, #acog-srv, #acog-com) .msg.ok { color: #0E7A4F; } :is(#acog-alta, #acog-srv, #acog-com) .msg.warn { color: #B4261A; } :is(#acog-alta, #acog-srv, #acog-com) .f .msg { margin-top: 8px; } :is(#acog-alta, #acog-srv, #acog-com) .note { font-size: 14.5px; line-height: 1.5; color: var(--gray); margin: 16px 0 0; max-width: 720px; } :is(#acog-alta, #acog-srv, #acog-com) .note a, :is(#acog-alta, #acog-srv, #acog-com) .box a { color: var(--btn); font-weight: 600; } :is(#acog-alta, #acog-srv, #acog-com) .box { margin-top: 22px; max-width: 720px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.5; } :is(#acog-alta, #acog-srv, #acog-com) .rec .sum { margin: 16px 0 0; font-size: 14.5px; color: var(--gray); } @media (max-width: 760px) { :is(#acog-alta, #acog-srv, #acog-com) h1 { font-size: 30px; } :is(#acog-alta, #acog-srv, #acog-com) .rec h1 { font-size: 30px; } :is(#acog-alta, #acog-srv, #acog-com) .opt { padding: 16px; gap: 12px; } :is(#acog-alta, #acog-srv, #acog-com) :is(.opt.sel, .opt[aria-pressed="true"]) { padding: 15px; } :is(#acog-alta, #acog-srv, #acog-com) .opt .op-p b { font-size: 18px; } :is(#acog-alta, #acog-srv, #acog-com) .pn .pb { padding: 0 12px; } :is(#acog-alta, #acog-srv, #acog-com) .cap { top: 10px; right: 12px; font-size: 11px; } :is(#acog-alta, #acog-srv, #acog-com) .toast { font-size: 12px; bottom: 8px; } } /* ---------- escenas (plano de línea azul marino; la fibra, la luz y el foco en #2D6BFF) ---------- */ :is(#acog-alta, #acog-srv, #acog-com) .band .wl { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } :is(#acog-alta, #acog-srv, #acog-com) .band .wi { fill: none; stroke: var(--ink); stroke-width: 1.6; } :is(#acog-alta, #acog-srv, #acog-com) .band .th { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .5; } :is(#acog-alta, #acog-srv, #acog-com) .band .ds { stroke-dasharray: 3 5; } :is(#acog-alta, #acog-srv, #acog-com) .band .fill { fill: #FFFFFF; } :is(#acog-alta, #acog-srv, #acog-com) .band .lab { font-family: var(--mono); font-size: 10px; fill: var(--gray); letter-spacing: .06em; } /* alta de fibra (W3-b, escenas/escenas.html): la fibra con brillo, la punta que late, la llegada temporizada (1,3 s) con estallido, halo y router encendido, el flujo, la fibra más gruesa con 2,5 Gb, la cobertura escalonada y la casa encendida en «recibida» */ #acog-alta .fbed { fill: none; stroke: var(--x); stroke-opacity: .14; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } #acog-alta .fibre { fill: none; stroke: var(--x); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px rgba(45,107,255,.55)); transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .25s, stroke-width .4s; } #acog-alta .noT .fibre, #acog-alta .noT .head, #acog-alta .noT .ring { transition: none !important; } #acog-alta .fast .fibre { stroke-width: 8; filter: drop-shadow(0 0 9px rgba(45,107,255,.65)); } #acog-alta .fast .fbed { stroke-width: 9; } #acog-alta .head { fill: var(--x); transition: cx 1.1s cubic-bezier(.6,0,.2,1) .25s, cy 1.1s cubic-bezier(.6,0,.2,1) .25s; } #acog-alta .ring { fill: none; stroke: var(--x); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: acogaping 1.6s ease-out infinite; transition: cx 1.1s cubic-bezier(.6,0,.2,1) .25s, cy 1.1s cubic-bezier(.6,0,.2,1) .25s; } @keyframes acogaping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } } @keyframes acogahide { to { opacity: 0; visibility: hidden; } } #acog-alta .flow { fill: #FFFFFF; opacity: 0; } #acog-alta .arrived .flow { opacity: 1; transition: opacity .2s 1.3s; } #acog-alta .arrived .head { animation: acogahide 0s 1.3s forwards; } #acog-alta .arrived .ring { animation: acogaping 1.6s ease-out infinite, acogahide 0s 1.3s forwards; } #acog-alta .rt { fill: var(--ink); transition: fill .3s; } #acog-alta .arrived .rt { fill: var(--x); transition-delay: 1.3s; } #acog-alta .burst { fill: none; stroke: var(--x); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } #acog-alta .arrived .burst { animation: acogaburst 1.1s ease-out 1.3s 2; } #acog-alta .arrived .burst.b2 { animation-delay: 1.55s; } @keyframes acogaburst { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(5); opacity: 0; } } #acog-alta .halo { fill: var(--x); opacity: 0; transform-box: fill-box; transform-origin: center; } #acog-alta .arrived .halo { animation: acogahalo 1.2s ease-out 1.3s 1 forwards; } @keyframes acogahalo { 0% { opacity: .5; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } } #acog-alta .cov { fill: var(--x); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); } #acog-alta .cov.on { animation: acogacov .7s cubic-bezier(.2,.8,.2,1) forwards; } #acog-alta .ask .cov.on { animation-name: acogacovask; } @keyframes acogacov { to { opacity: .13; transform: scale(1); } } @keyframes acogacovask { to { opacity: .07; transform: scale(1); } } #acog-alta .ap { fill: #FFFFFF; stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.6; transition: fill .3s, stroke .3s; } #acog-alta .ap.on { fill: var(--x); stroke: var(--x); stroke-opacity: 1; } #acog-alta .done .fill { fill: var(--ink); transition: fill .6s; } #acog-alta .done .wi, #acog-alta .done .th { stroke: #FFFFFF; stroke-opacity: .35; } #acog-alta .done .rt { fill: #FFFFFF; } #acog-alta .done .ap { fill: #FFFFFF; stroke: #FFFFFF; } #acog-alta .done .fibre { filter: drop-shadow(0 0 7px rgba(45,107,255,.7)); } #acog-alta svg .wi, #acog-alta svg .th { transition: stroke .6s; } @media (prefers-reduced-motion: reduce) { #acog-alta .band * { animation: none !important; transition: none !important; } #acog-alta .ring, #acog-alta .flow, #acog-alta .burst, #acog-alta .halo, #acog-alta .head { display: none !important; } #acog-alta .cov.on { opacity: .13; transform: scale(1); } #acog-alta .ask .cov.on { opacity: .07; } #acog-alta .arrived .rt { fill: var(--x); } #acog-alta .done .rt { fill: #FFFFFF; } } /* mantenimiento (W3-c): los equipos de la familia aparecen y una revisión los recorre con un tic en cada uno. presupuesto: plano quieto con las estancias del servicio */ #acog-srv .fam { display: none; } #acog-srv .fam.on { display: inline; } #acog-srv .eq { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.5); } #acog-srv .eq.on { animation: acogspop .5s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes acogspop { to { opacity: 1; transform: scale(1); } } #acog-srv .eq .g { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.8; transition: fill .3s, stroke .3s; } #acog-srv .eq .gn { fill: none; } #acog-srv .eq .tick { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-dasharray: 14; stroke-dashoffset: 14; } #acog-srv .eq.chk .g { fill: var(--x); stroke: var(--x); } #acog-srv .eq.chk .gn { fill: none; stroke: #FFFFFF; } #acog-srv .eq.chk .tick { animation: acogstick .35s ease-out forwards; } @keyframes acogstick { to { stroke-dashoffset: 0; } } #acog-srv .eq .pg { fill: none; stroke: var(--x); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } #acog-srv .eq.chk .pg { animation: acogsping .9s ease-out 1; } @keyframes acogsping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } } #acog-srv .eq .sector { fill: var(--x); opacity: 0; } #acog-srv .eq.on .sector { animation: acogssec .6s .3s forwards; } @keyframes acogssec { to { opacity: .13; } } #acog-srv .route { fill: none; stroke: var(--x); stroke-width: 1.6; stroke-dasharray: 3 5; opacity: 0; transition: opacity .4s; } #acog-srv .route.on { opacity: .6; } #acog-srv .tech { fill: var(--x); opacity: 0; } #acog-srv .tech.run { opacity: 1; } #acog-srv .room { fill: var(--x); opacity: 0; } #acog-srv .room.on { opacity: .13; } #acog-srv .mark { fill: none; stroke: var(--x); stroke-width: 2; stroke-dasharray: 3 4; } #acog-srv .pin { fill: var(--x); } #acog-srv .mk { display: none; } #acog-srv .mk.on { display: inline; } #acog-srv .done .fill { fill: var(--ink); } #acog-srv .done .wi, #acog-srv .done .th { stroke: #FFFFFF; stroke-opacity: .35; } #acog-srv .done .eq .g { fill: #FFFFFF; stroke: #FFFFFF; } #acog-srv .done .eq .tick { stroke: var(--ink); stroke-dashoffset: 0; } #acog-srv .done .route { opacity: 0; } #acog-srv .done .room.on { opacity: .18; } #acog-srv .done .mark { stroke: #FFFFFF; opacity: .6; } #acog-srv .done .pin { fill: #FFFFFF; } #acog-srv svg .fill, #acog-srv svg .wi, #acog-srv svg .th { transition: fill .6s, stroke .6s; } @media (prefers-reduced-motion: reduce) { #acog-srv .band * { animation: none !important; transition: none !important; } #acog-srv .tech, #acog-srv .eq .pg { display: none !important; } #acog-srv .eq.on { opacity: 1; transform: scale(1); } #acog-srv .eq.chk .tick { stroke-dashoffset: 0; } #acog-srv .eq.on .sector { opacity: .13; } } /* comunidades (W3-c): la fibra llega al cuarto de telecomunicaciones; de ahí, los troncales a cada bloque o casa y el encendido vivienda a vivienda (como mucho 2,5 s, lo marca el JS) */ #acog-com .fbed { fill: none; stroke: var(--x); stroke-opacity: .14; stroke-width: 6; stroke-linecap: round; } #acog-com .fibre { fill: none; stroke: var(--x); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px rgba(45,107,255,.55)); transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .25s; } #acog-com .noT .fibre, #acog-com .noT .head, #acog-com .noT .ring { transition: none !important; } #acog-com .head { fill: var(--x); transition: cx 1.1s cubic-bezier(.6,0,.2,1) .25s, cy 1.1s cubic-bezier(.6,0,.2,1) .25s; } #acog-com .ring { fill: none; stroke: var(--x); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: acogcping 1.6s ease-out infinite; transition: cx 1.1s cubic-bezier(.6,0,.2,1) .25s, cy 1.1s cubic-bezier(.6,0,.2,1) .25s; } @keyframes acogcping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } } @keyframes acogchide { to { opacity: 0; visibility: hidden; } } #acog-com .flow { fill: #FFFFFF; opacity: 0; } #acog-com .arrived .flow { opacity: 1; transition: opacity .2s 1.3s; } #acog-com .arrived .head { animation: acogchide 0s 1.3s forwards; } #acog-com .arrived .ring { animation: acogcping 1.6s ease-out infinite, acogchide 0s 1.3s forwards; } #acog-com .node { fill: var(--ink); transition: fill .3s; } #acog-com .arrived .node { fill: var(--x); transition-delay: 1.3s; } #acog-com .burst { fill: none; stroke: var(--x); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } #acog-com .arrived .burst { animation: acogcburst 1.1s ease-out 1.3s 2; } @keyframes acogcburst { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(5); opacity: 0; } } #acog-com .halo { fill: var(--x); opacity: 0; transform-box: fill-box; transform-origin: center; } #acog-com .arrived .halo { animation: acogchalo 1.2s ease-out 1.3s 1 forwards; } @keyframes acogchalo { 0% { opacity: .5; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } } #acog-com .trunk { fill: none; stroke: var(--x); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(45,107,255,.45)); } #acog-com .trunk.on { animation: acogcdraw .9s cubic-bezier(.6,0,.2,1) forwards; } @keyframes acogcdraw { to { stroke-dashoffset: 0; } } #acog-com .unit { fill: #FFFFFF; stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.4; opacity: 0; } #acog-com .unit.in { opacity: 1; transition: opacity .3s; } #acog-com .unit.on { fill: var(--x); stroke: var(--x); stroke-opacity: 1; transition: fill .25s, stroke .25s; } #acog-com .cov { fill: var(--x); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .45s, transform .45s; } #acog-com .cov.on { opacity: .13; transform: scale(1); } #acog-com .done .fill { fill: var(--ink); transition: fill .6s; } #acog-com .done .th { stroke: #FFFFFF; stroke-opacity: .35; } #acog-com .done .unit { fill: #FFFFFF; stroke: #FFFFFF; } @media (prefers-reduced-motion: reduce) { #acog-com .band * { animation: none !important; transition: none !important; } #acog-com .ring, #acog-com .flow, #acog-com .burst, #acog-com .halo, #acog-com .head { display: none !important; } #acog-com .trunk.on { stroke-dashoffset: 0; } #acog-com .arrived .node { fill: var(--x); } } @media (prefers-reduced-motion: reduce) { :is(#acog-alta, #acog-srv, #acog-com) .toast { transition: none; } } /* /planes con IVA: la base sin IVA en gris debajo del precio (Alfa 05/11/2026, «Planes con IVA») */ .aw3-w .op-p .op-b{display:block;font-size:12.5px;font-weight:400;color:#6B7185;margin-top:2px;white-space:nowrap}